:root {
    --bg: #f2f2f7;
    --bg-accent: radial-gradient(circle at top left, rgba(255, 255, 255, .96), transparent 30%), radial-gradient(circle at top right, rgba(255, 255, 255, .7), transparent 24%), linear-gradient(180deg, #f7f7fb 0%, #eff1f6 100%);
    --panel: rgba(255, 255, 255, .8);
    --panel-2: rgba(255, 255, 255, .7);
    --panel-3: rgba(255, 255, 255, .76);
    --text: #111111;
    --muted: #6b7280;
    --line: rgba(196, 199, 207, .72);
    --line-strong: rgba(174, 179, 190, .88);
    --brand: #007aff;
    --brand-soft: rgba(0, 122, 255, .12);
    --danger: #ff3b30;
    --success: #34c759;
    --warning: #ff9500;
    --shadow: 0 8px 24px rgba(17, 17, 17, .07);
    --shadow-lg: 0 16px 40px rgba(17, 17, 17, .11);
    --z-dropdown: 900;
    --z-sticky-nav: 1000;
    --z-popover: 1600;
    --z-popover-backdrop: 1590;
    --z-modal-backdrop: 3000;
    --z-modal: 3010;
    --z-modal-strong: 3200;
    --z-toast: 99999;
    --z-lightbox: 100000;
    --ease: cubic-bezier(.22, 1, .36, 1)
}

/* ERP right-side table workspace */
body.admin-page .admin-main {
    height: calc(100vh - 48px);
    overflow: auto;
}

body.admin-page .admin-content {
    display: block;
    min-height: 0;
    height: auto;
}

@media (min-width: 961px) {
    body.admin-page .admin-layout,
    body.admin-page.sidebar-expanded .admin-layout,
    body.admin-page.sidebar-collapsed .admin-layout {
        height: calc(100vh - 48px);
        min-height: 0;
        overflow: hidden;
    }

    body.admin-page .admin-main {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        overflow: hidden;
    }

    body.admin-page .admin-content {
        min-height: 0;
        overflow: auto;
    }

    body.admin-page [data-section-panel].is-active-section {
        min-height: 100%;
    }

    body.admin-page [data-section-panel].is-active-section > .panel.wide {
        min-height: 0;
    }

    body.admin-page [data-section-panel="providers"].is-active-section > .panel.wide,
    body.admin-page [data-section-panel="users"].is-active-section > .panel.wide,
    body.admin-page [data-section-panel="jobs"].is-active-section > .panel.wide,
    body.admin-page [data-section-panel="question-bank"].is-active-section > .panel.wide {
        grid-template-rows: auto auto minmax(0, 1fr);
        max-height: 100%;
    }

    body.admin-page [data-section-panel="models"].is-active-section > .panel.wide {
        grid-template-rows: auto auto auto minmax(0, 1fr);
        max-height: 100%;
    }

    body.admin-page [data-section-panel].is-active-section > .panel.wide > .table-wrap,
    body.admin-page #jobsPanelBody > .table-wrap {
        min-height: 0;
        overflow: auto;
    }

    body.admin-page #jobsPanelBody {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        min-height: 0;
    }
}

body.admin-page [data-section-panel].is-active-section {
    min-height: 0;
    align-content: start;
}

body.admin-page [data-section-panel].is-active-section > .panel.wide,
body.admin-page [data-section-panel].is-active-section > .stats-grid + .admin-grid,
body.admin-page [data-section-panel].is-active-section > .section-subnav + .panel.wide {
    min-width: 0;
}

body.admin-page .panel.wide {
    width: 100%;
    max-width: none;
}

body.admin-page [data-section-panel].is-active-section > .panel.wide {
    display: grid;
    grid-template-rows: auto minmax(0, auto);
    gap: 12px;
}

body.admin-page .panel-head,
body.admin-page .panel-head.compact-head {
    margin-bottom: 0;
}

body.admin-page .toolbar,
body.admin-page .settings-toolbar,
body.admin-page .model-toolbar {
    margin-bottom: 12px;
    padding: 10px 12px;
}

body.admin-page .model-price-bar {
    margin-bottom: 12px;
}

body.admin-page .section-subnav {
    display: none !important;
    margin-bottom: 0;
}

body.admin-page .table-wrap {
    width: 100%;
    min-height: 0;
    overflow-x: auto;
    overflow-y: visible;
}

body.admin-page .table-head,
body.admin-page .erp-table-row {
    display: grid;
    align-items: center;
    gap: 0;
    min-width: max-content;
}

body.admin-page .table-head {
    min-height: 38px;
    padding: 0;
    background: #f7f8fb;
    border-bottom: 1px solid #e1e6ef;
    color: #34495e;
    font-size: 12px;
}

body.admin-page .table-head > span,
body.admin-page .erp-table-row > .cell-block {
    min-width: 0;
    padding: 9px 10px;
}

body.admin-page .erp-table-row {
    min-height: 42px;
    border: 0;
    border-bottom: 1px solid #edf0f5;
    border-radius: 0;
    background: #fff;
    color: #1f2d3d;
    font-size: 12px;
    box-shadow: none;
}

body.admin-page .erp-table-row:hover {
    background: #f8fbff;
    transform: none;
    box-shadow: none;
}

body.admin-page .erp-table-row:nth-child(even) {
    background: #fbfcfe;
}

body.admin-page .erp-table-row:nth-child(even):hover {
    background: #f6f9ff;
}

body.admin-page .erp-table-row .cell-block {
    display: block;
}

body.admin-page .erp-table-row .cell-label {
    display: none;
}

body.admin-page .erp-table-row .cell-value {
    display: block;
    min-width: 0;
    line-height: 1.45;
}

body.admin-page .erp-primary {
    display: grid;
    gap: 2px;
    min-width: 0;
}

body.admin-page .erp-primary strong {
    overflow: hidden;
    color: #111827;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.admin-page .erp-primary small,
body.admin-page .erp-stack small {
    overflow: hidden;
    color: #6b7280;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.admin-page .erp-stack,
body.admin-page .erp-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

body.admin-page .erp-row-actions {
    justify-content: flex-start;
}

body.admin-page .cell-text.truncate,
body.admin-page .cell-text.nowrap {
    display: block;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.admin-page .cell-text.wrap {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
}

body.admin-page .btn-group,
body.admin-page .cell-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

body.admin-page .erp-table-row button,
body.admin-page .erp-table-row .ghost,
body.admin-page .erp-table-row .primary,
body.admin-page .erp-table-row .danger {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 12px;
}

body.admin-page .danger-ghost {
    color: #dc2626;
    border-color: #fecaca;
    background: #fff;
}

body.admin-page .provider-grid {
    grid-template-columns: minmax(150px, 1.1fr) minmax(110px, .75fr) minmax(240px, 1.8fr) minmax(86px, .6fr) minmax(140px, 1fr) minmax(160px, 1.05fr);
}

body.admin-page .erp-table-row.provider-grid,
body.admin-page .erp-table-row.download-log-grid,
body.admin-page .erp-table-row.download-ban-grid {
    min-width: 100%;
    max-width: 100%;
}

body.admin-page .model-grid {
    grid-template-columns: 92px minmax(240px, 1.5fr) minmax(140px, .85fr) minmax(210px, 1.2fr) minmax(230px, 1.2fr) minmax(140px, .85fr) minmax(200px, 1.15fr);
}

body.admin-page .user-grid {
    grid-template-columns: 64px minmax(120px, .8fr) minmax(200px, 1.35fr) minmax(90px, .65fr) minmax(80px, .55fr) minmax(140px, .9fr) minmax(160px, 1fr) minmax(140px, .9fr) minmax(140px, .9fr) minmax(120px, .75fr) minmax(170px, 1fr);
}

body.admin-page .job-grid {
    grid-template-columns: minmax(180px, 1.2fr) minmax(86px, .55fr) minmax(140px, .85fr) minmax(86px, .55fr) minmax(140px, .9fr) minmax(180px, 1.1fr) minmax(140px, .85fr) minmax(140px, .85fr) minmax(96px, .6fr);
}

body.admin-page .question-bank-grid {
    grid-template-columns: minmax(140px, .85fr) minmax(420px, 2.35fr) minmax(170px, 1fr) minmax(190px, 1.1fr) minmax(150px, .85fr) minmax(120px, .65fr);
}

body.admin-page .app-version-grid {
    grid-template-columns: minmax(140px, .95fr) minmax(150px, .95fr) minmax(96px, .6fr) minmax(240px, 1.65fr) minmax(100px, .65fr) minmax(96px, .6fr) minmax(145px, .9fr) minmax(200px, 1.2fr);
}

body.admin-page .download-log-grid {
    grid-template-columns: minmax(170px, 1.2fr) minmax(110px, .7fr) minmax(260px, 1.8fr) minmax(150px, 1fr) minmax(170px, 1.15fr);
}

body.admin-page .download-ban-grid {
    grid-template-columns: minmax(160px, 1fr) minmax(90px, .55fr) minmax(180px, 1.05fr) minmax(360px, 2.2fr) minmax(170px, 1.05fr);
}

body.admin-page .preview-share-grid {
    grid-template-columns: 80px minmax(220px, 1.35fr) minmax(90px, .55fr) minmax(130px, .75fr) minmax(150px, .9fr) minmax(110px, .65fr) minmax(150px, .9fr) minmax(300px, 1.8fr);
}

body.admin-page .job-detail-panel {
    position: absolute;
    z-index: var(--z-popover);
    width: min(520px, calc(100vw - 48px));
    max-height: 320px;
    margin-top: 6px;
    overflow: auto;
    border: 1px solid #d8dde8;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
}

body.admin-page .job-detail-panel .json-pre {
    margin: 0;
    max-height: none;
    border: 0;
    border-radius: 0;
    background: #f8fafc;
}

body.admin-page .erp-row-details summary,
body.admin-page .erp-nested-details summary {
    color: #2453b8;
    cursor: pointer;
    font-weight: 700;
}

body.admin-page .question-answer-detail {
    display: grid;
    gap: 6px;
    margin-top: 8px;
    min-width: 360px;
}

body.admin-page .question-answer-line {
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid #e5e8ef;
    border-radius: 4px;
    background: #f8fafc;
}

body.admin-page .share-list {
    gap: 0;
}

body.admin-page .share-extend-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

body.admin-page .share-extend-field input {
    width: 68px;
    min-height: 28px;
    padding: 4px 6px;
}

body.admin-page .provider-card,
body.admin-page .user-card,
body.admin-page .share-card {
    display: contents;
}

body.admin-page .job-grid-card {
    display: contents;
}

@media (max-width: 960px) {
    body.admin-page .admin-main {
        height: calc(100dvh - 48px);
        overflow: auto;
    }

    body.admin-page [data-section-panel="models"].is-active-section > .panel.wide {
        height: auto;
        grid-template-rows: auto auto auto auto auto !important;
    }

    body.admin-page [data-section-panel="models"] .model-toolbar {
        grid-template-columns: minmax(180px, 180px) repeat(7, minmax(88px, 88px)) !important;
        overflow-x: auto;
        overflow-y: hidden;
    }

    body.admin-page [data-section-panel="models"] .model-bulk-bar {
        overflow-x: auto;
        overflow-y: hidden;
    }

    body.admin-page [data-section-panel="models"] .model-price-bar {
        grid-template-columns: minmax(150px, 1fr) auto !important;
    }

    body.admin-page .table-wrap {
        margin-right: -12px;
        padding-bottom: 4px;
    }

    body.admin-page .table-head,
    body.admin-page .erp-table-row {
        font-size: 12px;
    }

    body.admin-page .erp-table-row > .cell-block,
    body.admin-page .table-head > span {
        padding: 8px;
    }

    body.admin-page .job-detail-panel {
        position: fixed;
        left: 12px;
        right: 12px;
        width: auto;
    }
}

/* Final mobile admin model list layout. Connectivity badges can grow after tests,
   so rows become cards and status chips wrap instead of squeezing the viewport. */
@media (max-width: 960px) {
    body.admin-page [data-section-panel="models"].is-active-section > .panel.wide {
        height: auto;
        padding: 10px;
        gap: 8px;
    }

    body.admin-page [data-section-panel="models"] .model-table-wrap {
        width: 100%;
        margin-right: 0 !important;
        overflow: visible !important;
        padding-bottom: 0;
    }

    body.admin-page .model-table-wrap .table-head.model-grid {
        display: none !important;
    }

    body.admin-page #models.table-list {
        display: grid;
        width: 100% !important;
        min-width: 0 !important;
        gap: 10px;
    }

    body.admin-page #models .erp-table-row.model-grid {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 0;
        min-height: 0;
        overflow: hidden !important;
        border: 1px solid #e5e8ef;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
    }

    body.admin-page #models .erp-table-row.model-grid:hover {
        background: #fff;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block {
        display: grid;
        align-content: start;
        gap: 5px;
        min-width: 0;
        padding: 10px !important;
        border-left: 0 !important;
        border-top: 1px solid #edf0f5;
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block:nth-child(-n+2) {
        border-top: 0;
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block:nth-child(odd) {
        border-right: 1px solid #edf0f5;
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block[data-label="模型"],
    body.admin-page #models .erp-table-row.model-grid > .cell-block[data-label="操作"] {
        grid-column: 1 / -1;
        border-right: 0 !important;
    }

    body.admin-page #models .erp-table-row.model-grid .cell-label {
        display: block;
        color: #7b8494;
        font-size: 11px;
        font-weight: 800;
        line-height: 1.2;
    }

    body.admin-page #models .erp-table-row.model-grid .cell-value,
    body.admin-page #models .model-primary,
    body.admin-page #models .model-provider,
    body.admin-page #models .model-meta,
    body.admin-page #models .model-state,
    body.admin-page #models .model-actions {
        display: flex;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 5px;
    }

    body.admin-page #models .model-primary,
    body.admin-page #models .model-meta {
        flex-direction: column;
    }

    body.admin-page #models .model-title,
    body.admin-page #models .model-subtitle,
    body.admin-page #models .model-provider .cell-text,
    body.admin-page #models .model-meta-row,
    body.admin-page #models .model-meta-sub {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.admin-page #models .cell-block[data-label="状态"] .model-state,
    body.admin-page #models .model-state {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 5px !important;
    }

    body.admin-page #models .model-state small {
        display: inline-flex;
        max-width: 100%;
        min-width: 0;
    }

    body.admin-page #models .badge,
    body.admin-page #models .status {
        max-width: 100%;
        min-width: 0;
        min-height: 20px;
        padding: 2px 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
        line-height: 16px;
    }

    body.admin-page #models .model-tags {
        display: flex;
        flex-wrap: wrap !important;
        overflow: visible !important;
        gap: 4px;
    }

    body.admin-page #models .model-grid .btn-group {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    body.admin-page #models .model-grid .btn-group > * {
        width: 100%;
        min-width: 0;
        min-height: 30px;
        justify-content: center;
        white-space: normal;
    }
}

@media (max-width: 520px) {
    body.admin-page #models .erp-table-row.model-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.admin-page #models .model-grid .btn-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    body.admin-page [data-section-panel="models"] .model-toolbar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 8px !important;
        overflow: visible !important;
    }

    body.admin-page [data-section-panel="models"] .model-toolbar #modelSearch {
        grid-column: 1 / -1;
    }

    body.admin-page [data-section-panel="models"] .model-toolbar input,
    body.admin-page [data-section-panel="models"] .model-toolbar select {
        width: 100%;
        min-width: 0;
        height: 32px;
        min-height: 32px;
    }

    body.admin-page [data-section-panel="models"] .model-bulk-bar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        max-height: none !important;
        min-height: 0 !important;
        padding: 8px !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    body.admin-page [data-section-panel="models"] .model-bulk-bar button {
        width: 100%;
        min-width: 0;
        min-height: 32px;
        justify-content: center;
        white-space: normal;
    }

    body.admin-page [data-section-panel="models"] .model-bulk-bar #disableFailedModelsBtn {
        grid-column: 1 / -1;
    }

    body.admin-page [data-section-panel="models"] .model-price-bar {
        grid-template-columns: minmax(0, 1fr) !important;
        max-height: none !important;
        min-height: 0 !important;
        padding: 8px !important;
        overflow: visible !important;
    }

    body.admin-page [data-section-panel="models"] .model-price-field {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    body.admin-page [data-section-panel="models"] .model-price-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        overflow: visible !important;
    }

    body.admin-page [data-section-panel="models"] .model-price-actions button,
    body.admin-page [data-section-panel="models"] .model-price-actions .model-price-badge {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block[data-label="选择"] {
        grid-column: 1 / -1;
        min-height: 0;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        border-right: 0 !important;
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block[data-label="选择"] .cell-label {
        display: none;
    }

    body.admin-page #models .erp-table-row.model-grid .cell-value {
        justify-content: flex-start !important;
        text-align: left;
    }

    body.admin-page #models .cell-block[data-label="状态"] .model-state {
        justify-content: flex-start !important;
    }
}

@media (max-width: 360px) {
    body.admin-page #models .erp-table-row.model-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block,
    body.admin-page #models .erp-table-row.model-grid > .cell-block:nth-child(odd) {
        border-right: 0 !important;
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block:nth-child(2) {
        border-top: 1px solid #edf0f5;
    }

    body.admin-page #models .model-grid .btn-group {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Final mobile admin model list layout. Connectivity badges can grow after tests,
   so rows become cards and status chips wrap instead of squeezing the viewport. */
@media (max-width: 960px) {
    body.admin-page [data-section-panel="models"].is-active-section > .panel.wide {
        height: auto;
        padding: 10px;
        gap: 8px;
    }

    body.admin-page [data-section-panel="models"] .model-table-wrap {
        width: 100%;
        margin-right: 0 !important;
        overflow: visible !important;
        padding-bottom: 0;
    }

    body.admin-page .model-table-wrap .table-head.model-grid {
        display: none !important;
    }

    body.admin-page #models.table-list {
        display: grid;
        width: 100% !important;
        min-width: 0 !important;
        gap: 10px;
    }

    body.admin-page #models .erp-table-row.model-grid {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 0;
        min-height: 0;
        overflow: hidden !important;
        border: 1px solid #e5e8ef;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
    }

    body.admin-page #models .erp-table-row.model-grid:hover {
        background: #fff;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block {
        display: grid;
        align-content: start;
        gap: 5px;
        min-width: 0;
        padding: 10px !important;
        border-left: 0 !important;
        border-top: 1px solid #edf0f5;
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block:nth-child(-n+2) {
        border-top: 0;
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block:nth-child(odd) {
        border-right: 1px solid #edf0f5;
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block[data-label="模型"],
    body.admin-page #models .erp-table-row.model-grid > .cell-block[data-label="操作"] {
        grid-column: 1 / -1;
        border-right: 0 !important;
    }

    body.admin-page #models .erp-table-row.model-grid .cell-label {
        display: block;
        color: #7b8494;
        font-size: 11px;
        font-weight: 800;
        line-height: 1.2;
    }

    body.admin-page #models .erp-table-row.model-grid .cell-value,
    body.admin-page #models .model-primary,
    body.admin-page #models .model-provider,
    body.admin-page #models .model-meta,
    body.admin-page #models .model-state,
    body.admin-page #models .model-actions {
        display: flex;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 5px;
    }

    body.admin-page #models .model-primary,
    body.admin-page #models .model-meta {
        flex-direction: column;
    }

    body.admin-page #models .model-title,
    body.admin-page #models .model-subtitle,
    body.admin-page #models .model-provider .cell-text,
    body.admin-page #models .model-meta-row,
    body.admin-page #models .model-meta-sub {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.admin-page #models .cell-block[data-label="状态"] .model-state,
    body.admin-page #models .model-state {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 5px !important;
    }

    body.admin-page #models .model-state small {
        display: inline-flex;
        max-width: 100%;
        min-width: 0;
    }

    body.admin-page #models .badge,
    body.admin-page #models .status {
        max-width: 100%;
        min-width: 0;
        min-height: 20px;
        padding: 2px 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
        line-height: 16px;
    }

    body.admin-page #models .model-tags {
        display: flex;
        flex-wrap: wrap !important;
        overflow: visible !important;
        gap: 4px;
    }

    body.admin-page #models .model-grid .btn-group {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    body.admin-page #models .model-grid .btn-group > * {
        width: 100%;
        min-width: 0;
        min-height: 30px;
        justify-content: center;
        white-space: normal;
    }
}

@media (max-width: 520px) {
    body.admin-page #models .erp-table-row.model-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block,
    body.admin-page #models .erp-table-row.model-grid > .cell-block:nth-child(odd) {
        border-right: 0 !important;
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block:nth-child(2) {
        border-top: 1px solid #edf0f5;
    }

    body.admin-page #models .model-grid .btn-group {
        grid-template-columns: minmax(0, 1fr);
    }
}

body.intro-page {
    min-height: 100vh;
    background: #000 !important;
    color: #f5f7fb;
    overflow-x: hidden;
    overflow-y: auto;
}

body.intro-page::before {
    display: none;
}

.intro-shell {
    position: relative;
    min-height: 100vh;
    padding: 0;
    isolation: isolate;
}

.intro-backdrop,
.intro-matrix-canvas,
.intro-noise-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.intro-cursor-ring {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    background: rgba(246, 243, 236, .72);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width .16s cubic-bezier(.22, 1, .36, 1), height .16s cubic-bezier(.22, 1, .36, 1), opacity .14s cubic-bezier(.22, 1, .36, 1), background-color .16s cubic-bezier(.22, 1, .36, 1), mix-blend-mode 0s linear .05s;
    mix-blend-mode: difference;
    z-index: 3;
    pointer-events: none;
}

.intro-cursor-ring.is-visible {
    opacity: .55;
}

.intro-cursor-ring.is-hero {
    width: 200px;
    height: 200px;
}

.intro-cursor-ring.is-hidden {
    width: 16px;
    height: 16px;
    opacity: 0;
}

.intro-matrix-canvas {
    width: 100%;
    height: 100%;
    opacity: 1;
    mix-blend-mode: normal;
}

.intro-noise-canvas {
    width: 100%;
    height: 100%;
    opacity: .08;
    mix-blend-mode: screen;
}

.intro-backdrop-blur,
.intro-backdrop-vignette,
.intro-backdrop-scanlines {
    position: absolute;
    inset: 0;
}

.intro-backdrop-blur {
    background:
        radial-gradient(circle at 50% 43%, rgba(255, 255, 255, .025), transparent 22%),
        radial-gradient(circle at 50% 58%, rgba(12, 16, 24, .06), transparent 28%),
        linear-gradient(180deg, rgba(4, 6, 10, 0) 0%, rgba(4, 6, 10, .02) 100%);
    filter: blur(1.5px);
}

.intro-backdrop-vignette {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .08) 16%, rgba(0, 0, 0, .06) 42%, rgba(0, 0, 0, .16) 100%),
        radial-gradient(circle, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0) 60%),
        radial-gradient(circle, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .88) 100%);
}

.intro-backdrop-scanlines {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .025) 0, rgba(255, 255, 255, .025) 1px, transparent 1px, transparent 4px);
    background-size: 100% 4px;
    opacity: .03;
}

.intro-stage {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: grid;
    grid-template-rows: 46px 72px minmax(0, calc(100dvh - 118px)) auto;
    padding: 0;
}

.intro-top-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 46px;
    height: 46px;
    padding: 0 24px;
    background: #394351;
    color: #dfe6ef;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
}

.intro-top-banner-track {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
}

.intro-top-banner p {
    margin: 0;
}

.intro-top-banner-text {
    color: #e2e8f0;
    line-height: 1;
    white-space: nowrap;
    will-change: transform;
}

.intro-top-banner.is-marquee .intro-top-banner-text {
    display: inline-block;
    padding-right: 72px;
    animation: introBannerScroll 16s linear infinite;
}

.intro-top-banner-icon,
.intro-top-banner-spark {
    color: #ff6f4b;
    flex: 0 0 auto;
    font-size: 12px;
}

.intro-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 72px;
    height: 72px;
    padding: 0 30px;
    backdrop-filter: blur(2px);
}

.intro-brand-block,
.intro-topbar-actions,
.intro-topbar-meta {
    display: flex;
    align-items: center;
}

.intro-brand-block {
    gap: 12px;
    min-width: 0;
}

.intro-brand-title {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.intro-brand-dot {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: introStatusPulse 2.2s ease-in-out infinite;
}

.intro-brand-status,
.intro-topbar-meta span {
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    font-weight: 600;
}

.intro-topbar-actions {
    gap: 14px;
}

.intro-topbar-meta {
    gap: 8px;
    white-space: nowrap;
}

.intro-topbar-link,
.intro-topbar-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .04);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0);
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .22s ease, opacity .22s ease, box-shadow .18s ease;
}

.intro-topbar-link:hover,
.intro-topbar-link:focus-visible,
.intro-topbar-share:hover,
.intro-topbar-share:focus-visible {
    border-color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .95);
    color: #0d1015;
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 8px 22px rgba(0, 0, 0, .14);
}

.intro-topbar-share {
    cursor: pointer;
}

.intro-hero {
    align-self: center;
    display: grid;
    gap: 22px;
    justify-items: center;
    position: relative;
    min-height: calc(100dvh - 118px);
    align-content: center;
    padding: 44px 24px 92px;
    text-align: center;
}

.intro-hero-copy {
    display: grid;
    gap: 12px;
}

.intro-hero-kicker,
.intro-type-title,
.intro-hero-subline,
.intro-primary-actions,
.intro-hero-meta,
.intro-scroll-indicator {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .7s cubic-bezier(.19, 1, .22, 1);
}

.intro-hero-kicker.is-visible,
.intro-type-title.is-visible,
.intro-hero-subline.is-visible,
.intro-primary-actions.is-visible,
.intro-hero-meta.is-visible,
.intro-scroll-indicator.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.intro-hero-kicker {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3em;
}

.intro-hero-subline,
.intro-hero-meta span {
    text-shadow: 0 6px 26px rgba(0, 0, 0, .5);
}

.intro-type-title {
    margin: 0;
    min-height: 1.9em;
    color: rgba(255, 255, 255, .97);
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: clamp(3.35rem, 5.15vw, 5.15rem);
    font-weight: 600;
    line-height: 1.14;
    text-align: center;
    letter-spacing: 0;
    white-space: nowrap;
    background: linear-gradient(90deg, #7d8f9e 0%, #b0beca 45%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.intro-typed-content {
    display: inline;
    word-break: break-word;
    white-space: pre-wrap;
}

.intro-title-cursor {
    display: inline;
    margin-left: 3px;
    color: rgba(255, 255, 255, .84);
    font-size: .78em;
    line-height: inherit;
    -webkit-text-fill-color: currentColor;
    animation: introCursorBlink 1s ease-in-out infinite;
}

.intro-hero-subline {
    margin: 0;
    max-width: 720px;
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .04em;
}

.intro-hero-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
    color: rgba(255, 255, 255, .96);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .26em;
}

.intro-hero-meta::before,
.intro-hero-meta::after {
    content: "";
    width: 48px;
    height: 1px;
    background: rgba(255, 255, 255, .22);
}

.intro-primary-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 10px;
}

.intro-primary-cta,
.intro-secondary-link {
    min-height: 48px;
    border-radius: 0;
}

.intro-primary-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(534px, calc(100vw - 40px));
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .46);
    background: rgba(246, 243, 236, .16);
    backdrop-filter: blur(2.5px);
    color: #fff;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0), 0 10px 28px rgba(0, 0, 0, .18);
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .22s ease, opacity .22s ease, box-shadow .18s ease;
}

.intro-primary-cta-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
}

.intro-primary-cta-arrow {
    font-size: 16px;
    line-height: 1;
}

.intro-primary-cta:hover,
.intro-primary-cta:focus-visible,
.intro-secondary-link:hover,
.intro-secondary-link:focus-visible {
    border-color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .94);
    color: #11161e;
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .36), 0 14px 30px rgba(0, 0, 0, .2);
}

.intro-secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .22s ease, box-shadow .18s ease;
}

.intro-secondary-link:hover,
.intro-secondary-link:focus-visible {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

.intro-topbar-share.is-leaving,
.intro-primary-cta.is-leaving {
    opacity: .72;
    transform: scale(.985);
}

.intro-scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 48px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.intro-scroll-indicator span {
    position: relative;
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, .38);
}

.intro-scroll-indicator span::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 8px;
    height: 8px;
    border-right: 1px solid rgba(255, 255, 255, .5);
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    transform: translateX(-50%) rotate(45deg);
}

.intro-overview {
    position: relative;
    z-index: 1;
    width: 100%;
    background: #000;
}

.intro-overview-section {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(900px, calc(100% - 60px));
    margin: 0 auto;
    padding: 65px 0 40px;
}

.intro-section-header {
    padding: 0 12px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.intro-section-kicker {
    margin: 0;
    color: rgba(255, 255, 255, .42);
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.intro-faq-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.intro-faq-item {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    padding: 16px 12px;
}

.intro-faq-item h3 {
    margin: 0 0 8px;
    color: #fff;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

.intro-faq-item p {
    margin: 0;
    color: rgba(255, 255, 255, .55);
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: .24px;
}

body.intro-is-leaving .intro-stage {
    animation: introStageOut .46s var(--ease) forwards;
}

@keyframes introStageOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(1.01);
    }
}

@keyframes introCursorBlink {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes introStatusPulse {
    0%,
    50% {
        opacity: 1;
    }
    50.01%,
    100% {
        opacity: .25;
    }
}

@keyframes introBannerScroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(calc(-100% + 56vw), 0, 0);
    }
}

@media (max-width: 960px) {
    .intro-stage {
        grid-template-rows: 42px 66px minmax(0, calc(100dvh - 108px)) auto;
    }

    .intro-top-banner {
        min-height: 42px;
        height: 42px;
        padding: 0 16px;
        font-size: 12px;
    }

    .intro-topbar {
        min-height: 66px;
        height: 66px;
        padding: 0 16px;
        gap: 14px;
    }

    .intro-topbar-actions {
        gap: 10px;
    }

    .intro-topbar-meta {
        display: none;
    }

    .intro-hero {
        min-height: calc(100dvh - 108px);
        padding: 48px 18px 102px;
    }

    .intro-overview-section {
        width: min(900px, calc(100% - 32px));
        padding-top: 48px;
    }

    .intro-type-title {
        min-height: 142px;
        font-size: clamp(2.3rem, 8vw, 3.4rem);
        white-space: normal;
    }

    .intro-title-cursor {
        font-size: .78em;
    }
}

@media (max-width: 640px) {
    .intro-stage {
        grid-template-rows: 42px 108px minmax(0, calc(100dvh - 150px)) auto;
    }

    .intro-top-banner {
        gap: 8px;
        min-height: 42px;
        height: 42px;
        padding: 0 12px;
        align-items: center;
    }

    .intro-top-banner-track {
        flex: 1 1 auto;
    }

    .intro-top-banner p {
        line-height: 1;
    }

    .intro-top-banner:not(.is-marquee) .intro-top-banner-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .intro-top-banner.is-marquee .intro-top-banner-text {
        animation-duration: 18s;
    }

    .intro-topbar {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        min-height: 108px;
        height: 108px;
        padding: 12px 14px 0;
    }

    .intro-brand-block {
        justify-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
    }

    .intro-brand-status {
        font-size: 12px;
    }

    .intro-topbar-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .intro-topbar-share {
        display: none;
    }

    .intro-topbar-link,
    .intro-topbar-share {
        width: 100%;
        min-width: 0;
        padding: 0 8px;
        font-size: 12px;
        white-space: nowrap;
    }

    .intro-hero {
        gap: 14px;
        min-height: calc(100dvh - 150px);
        padding: 26px 16px 84px;
    }

    .intro-hero-kicker {
        font-size: 10px;
        letter-spacing: .22em;
    }

    .intro-hero-subline {
        font-size: 13px;
        letter-spacing: .02em;
    }

    .intro-type-title {
        min-height: 118px;
        max-width: calc(100vw - 32px);
        font-size: clamp(1.75rem, 8vw, 2.55rem);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .intro-title-cursor {
        font-size: .76em;
    }

    .intro-hero-meta {
        gap: 10px;
        letter-spacing: .16em;
    }

    .intro-hero-meta::before,
    .intro-hero-meta::after {
        width: 26px;
    }

    .intro-primary-actions {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

    .intro-primary-cta,
    .intro-secondary-link {
        width: min(100%, 320px);
        max-width: calc(100vw - 32px);
    }

    .intro-overview-section {
        width: calc(100% - 32px);
        padding: 39px 0 32px;
    }

    .intro-section-header {
        padding: 0 12px 12px;
    }

    .intro-section-kicker {
        font-size: 14px;
        letter-spacing: 2px;
    }

    .intro-faq-item {
        padding: 14px 12px;
    }

    .intro-faq-item h3 {
        font-size: 12px;
        line-height: 1.55;
    }

    .intro-faq-item p {
        font-size: 11px;
        line-height: 1.7;
    }
}

@media (prefers-reduced-motion: reduce) {
    .intro-top-banner.is-marquee .intro-top-banner-text,
    .intro-topbar-share,
    .intro-primary-cta,
    .intro-secondary-link,
    .intro-stage,
    .intro-hero-kicker,
    .intro-hero-subline,
    .intro-primary-actions,
    .intro-hero-meta,
    .intro-scroll-indicator,
    body.intro-is-leaving .intro-stage {
        animation: none !important;
        transition: none !important;
    }

    .intro-hero-kicker,
    .intro-hero-subline,
    .intro-primary-actions,
    .intro-hero-meta,
    .intro-scroll-indicator {
        opacity: 1;
        transform: none;
    }
}

/* Absolute final table sizing overrides. */
body.admin-page .table-wrap {
    width: 100%;
}

body.admin-page .table-list {
    width: 100%;
    min-width: 100%;
}

body.admin-page .table-head,
body.admin-page .erp-table-row {
    width: 100%;
}

body.admin-page .cell-tools,
body.admin-page .btn-group,
body.admin-page .erp-table-row .cell-value {
    min-width: 0;
}

body.admin-page .cell-tools .cell-text {
    flex: 1 1 auto;
    min-width: 0;
}

body.admin-page .cell-tools .copy-btn,
body.admin-page .btn-group > button,
body.admin-page .btn-group > .primary,
body.admin-page .btn-group > .ghost {
    flex: 0 0 auto;
}

body.admin-page .provider-grid {
    grid-template-columns: minmax(150px, 1.1fr) minmax(110px, .75fr) minmax(240px, 1.8fr) minmax(86px, .6fr) minmax(140px, 1fr) minmax(160px, 1.05fr) !important;
}

body.admin-page .model-grid {
    grid-template-columns: 92px minmax(240px, 1.5fr) minmax(140px, .85fr) minmax(210px, 1.2fr) minmax(230px, 1.2fr) minmax(140px, .85fr) minmax(200px, 1.15fr) !important;
}

body.admin-page .user-grid {
    grid-template-columns: 64px minmax(120px, .8fr) minmax(200px, 1.35fr) minmax(90px, .65fr) minmax(80px, .55fr) minmax(140px, .9fr) minmax(160px, 1fr) minmax(140px, .9fr) minmax(140px, .9fr) minmax(120px, .75fr) minmax(170px, 1fr) !important;
}

body.admin-page .job-grid {
    grid-template-columns: minmax(180px, 1.2fr) minmax(86px, .55fr) minmax(140px, .85fr) minmax(86px, .55fr) minmax(140px, .9fr) minmax(180px, 1.1fr) minmax(140px, .85fr) minmax(140px, .85fr) minmax(96px, .6fr) !important;
}

body.admin-page .question-bank-grid {
    grid-template-columns: minmax(140px, .85fr) minmax(420px, 2.35fr) minmax(170px, 1fr) minmax(190px, 1.1fr) minmax(150px, .85fr) minmax(120px, .65fr) !important;
}

body.admin-page .app-version-grid {
    grid-template-columns: minmax(140px, .95fr) minmax(150px, .95fr) minmax(96px, .6fr) minmax(240px, 1.65fr) minmax(100px, .65fr) minmax(96px, .6fr) minmax(145px, .9fr) minmax(200px, 1.2fr) !important;
}

body.admin-page .download-log-grid {
    grid-template-columns: minmax(170px, 1.2fr) minmax(110px, .7fr) minmax(260px, 1.8fr) minmax(150px, 1fr) minmax(170px, 1.15fr) !important;
}

body.admin-page .download-ban-grid {
    grid-template-columns: minmax(160px, 1fr) minmax(90px, .55fr) minmax(180px, 1.05fr) minmax(360px, 2.2fr) minmax(170px, 1.05fr) !important;
}

body.admin-page .preview-share-grid {
    grid-template-columns: 80px minmax(220px, 1.35fr) minmax(90px, .55fr) minmax(130px, .75fr) minmax(150px, .9fr) minmax(110px, .65fr) minmax(150px, .9fr) minmax(300px, 1.8fr) !important;
}

body.admin-page .question-main-cell {
    display: grid;
    gap: 4px;
    min-width: 0;
}

body.admin-page .question-main-cell strong,
body.admin-page .question-main-cell small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.admin-page .question-main-cell strong {
    color: #111827;
    font-weight: 700;
    line-height: 1.45;
}

body.admin-page .question-main-cell small {
    color: #6b7280;
    line-height: 1.45;
}

@media (min-width: 961px) {
    body.admin-page .download-log-grid,
    body.admin-page .download-ban-grid {
        min-width: 100%;
    }

    body.admin-page .question-bank-grid {
        min-width: 1190px;
    }
}

/* Final navigation hierarchy: subviews live in the sidebar tree. */
body.admin-page .section-subnav {
    display: none !important;
}

body.admin-page .admin-tree-children {
    display: grid;
}

body.admin-page .admin-tree-subitem {
    display: block;
}

/* Final ERP column sizing: fill sparse tables, scroll dense tables. */
body.admin-page .table-head,
body.admin-page .erp-table-row {
    width: 100%;
}

body.admin-page .provider-grid {
    grid-template-columns: minmax(150px, 1.1fr) minmax(110px, .75fr) minmax(240px, 1.8fr) minmax(86px, .6fr) minmax(140px, 1fr) minmax(160px, 1.05fr);
}

body.admin-page .model-grid {
    grid-template-columns: 92px minmax(240px, 1.5fr) minmax(140px, .85fr) minmax(210px, 1.2fr) minmax(230px, 1.2fr) minmax(140px, .85fr) minmax(200px, 1.15fr);
}

body.admin-page .user-grid {
    grid-template-columns: 64px minmax(120px, .8fr) minmax(200px, 1.35fr) minmax(90px, .65fr) minmax(80px, .55fr) minmax(140px, .9fr) minmax(160px, 1fr) minmax(140px, .9fr) minmax(140px, .9fr) minmax(120px, .75fr) minmax(170px, 1fr);
}

body.admin-page .job-grid {
    grid-template-columns: minmax(180px, 1.2fr) minmax(86px, .55fr) minmax(140px, .85fr) minmax(86px, .55fr) minmax(140px, .9fr) minmax(180px, 1.1fr) minmax(140px, .85fr) minmax(140px, .85fr) minmax(96px, .6fr);
}

body.admin-page .question-bank-grid {
    grid-template-columns: minmax(140px, .85fr) minmax(420px, 2.35fr) minmax(170px, 1fr) minmax(190px, 1.1fr) minmax(150px, .85fr) minmax(120px, .65fr);
}

body.admin-page .app-version-grid {
    grid-template-columns: minmax(140px, .95fr) minmax(150px, .95fr) minmax(96px, .6fr) minmax(240px, 1.65fr) minmax(100px, .65fr) minmax(96px, .6fr) minmax(145px, .9fr) minmax(200px, 1.2fr);
}

body.admin-page .download-log-grid {
    grid-template-columns: minmax(170px, 1.2fr) minmax(110px, .7fr) minmax(260px, 1.8fr) minmax(150px, 1fr) minmax(170px, 1.15fr);
}

body.admin-page .download-ban-grid {
    grid-template-columns: minmax(160px, 1fr) minmax(90px, .55fr) minmax(180px, 1.05fr) minmax(360px, 2.2fr) minmax(170px, 1.05fr);
}

body.admin-page .preview-share-grid {
    grid-template-columns: 80px minmax(220px, 1.35fr) minmax(90px, .55fr) minmax(130px, .75fr) minmax(150px, .9fr) minmax(110px, .65fr) minmax(150px, .9fr) minmax(300px, 1.8fr);
}

body.admin-page .question-main-cell {
    display: grid;
    gap: 4px;
    min-width: 0;
}

body.admin-page .question-main-cell strong {
    display: -webkit-box;
    overflow: hidden;
    color: #111827;
    font-weight: 700;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.admin-page .question-main-cell small {
    display: -webkit-box;
    overflow: hidden;
    color: #6b7280;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.admin-page .empty-cell,
body.admin-page .empty-state {
    min-width: 100%;
    padding: 22px 16px;
    color: #8a96a8;
    text-align: center;
}

@media (min-width: 961px) {
    body.admin-page .download-log-grid,
    body.admin-page .download-ban-grid {
        min-width: 100%;
    }

    body.admin-page .question-bank-grid {
        min-width: 1190px;
    }
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--bg-accent), var(--bg) !important;
    color: var(--text);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body.admin-page {
    overflow: auto;
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, .9), transparent 28%), radial-gradient(circle at top right, rgba(255, 255, 255, .45), transparent 22%), radial-gradient(circle at bottom right, rgba(255, 255, 255, .3), transparent 24%);
    z-index: -1
}

body.admin-page.sidebar-expanded .admin-layout {
    grid-template-columns: 280px minmax(0, 1fr)
}

body.admin-page.sidebar-collapsed .admin-layout {
    grid-template-columns: 72px minmax(0, 1fr)
}

body.admin-page.sidebar-collapsed .admin-sidebar {
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden
}

body.admin-page.sidebar-collapsed .admin-sidebar .sidebar-note,
body.admin-page.sidebar-collapsed .admin-sidebar .admin-sidebar-head,
body.admin-page.sidebar-collapsed .admin-sidebar .nav-item span,
body.admin-page.sidebar-collapsed .admin-sidebar .nav-item small,
body.admin-page.sidebar-collapsed .admin-sidebar .nav-item::after {
    display: none
}

body.admin-page.sidebar-collapsed .admin-sidebar .nav-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0
}

body.admin-page.sidebar-collapsed .admin-sidebar .nav-item::before {
    content: attr(data-short);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(15, 23, 42, .06);
    color: #0f172a;
    font-size: 14px;
    font-weight: 800
}

body.admin-page.sidebar-collapsed .admin-content {
    min-width: 0;
    width: 100%
}

.admin-shell.nav-open .admin-sidebar {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto
}

body.topbar-collapsed .topbar-main {
    display: none
}

body.topbar-collapsed .topbar-compact {
    display: flex
}

a {
    color: var(--brand);
    text-decoration: none
}

button,
input,
textarea,
select {
    font: inherit;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    border-radius: 20px;
    padding: 12px 14px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .25s var(--ease), background .2s var(--ease), opacity .2s var(--ease)
}

textarea {
    width: 100%;
    min-width: 0;
    resize: vertical
}

button:hover,
button:focus-visible,
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(0, 122, 255, .12)
}

button {
    cursor: pointer
}

.primary {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    font-weight: 600
}

.primary:hover {
    transform: translateY(-1px);
    background: #000
}

.ghost {
    background: var(--panel-2)
}

.ghost-primary {
    background: #fff;
    color: var(--brand);
    border-color: var(--line-strong)
}

.full {
    width: 100%
}

.file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.chrome-toggle {
    padding: 10px 14px;
    border-radius: 999px;
    white-space: nowrap
}

.collapse-toggle {
    align-self: flex-start
}

.app-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: calc(100vh - 48px);
    height: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .22)), var(--bg);
    transition: grid-template-columns .34s var(--ease)
}

body.sidebar-collapsed .app-shell {
    grid-template-columns: 64px minmax(0, 1fr)
}

body.sidebar-collapsed .sidebar {
    width: 64px;
    padding: 10px 6px;
    align-items: center
}

body.sidebar-collapsed .sidebar .conversation-list,
body.sidebar-collapsed .sidebar .side-title,
body.sidebar-collapsed .sidebar .user-box,
body.sidebar-collapsed .sidebar .profile-link {
    display: none
}

body.sidebar-collapsed .sidebar .sidebar-brand {
    justify-content: center;
    width: 100%;
    padding: 0
}

body.sidebar-collapsed .sidebar .sidebar-brand-actions {
    width: auto;
    flex-direction: column;
    align-items: center;
    gap: 8px
}

body.sidebar-collapsed .sidebar .sidebar-menu-btn,
body.sidebar-collapsed .sidebar .sidebar-profile-btn,
body.sidebar-collapsed .sidebar .sidebar-new-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    margin: 0
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 29;
    background: rgba(17, 17, 17, .34);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease)
}

.sidebar {
    position: sticky;
    top: 0;
    height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);
    border-right: 1px solid var(--line);
    background: rgba(255, 255, 255, .54);
    backdrop-filter: blur(30px) saturate(1.2);
    box-shadow: inset -1px 0 0 rgba(255,255,255,.56), 0 14px 34px rgba(17,17,17,.06);
    padding: 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    transition: width .34s var(--ease), padding .34s var(--ease), opacity .25s var(--ease), transform .28s var(--ease)
}

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0
}

.sidebar-brand-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%
}

.sidebar-menu-btn,
.sidebar-profile-btn,
.sidebar-new-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    position: static;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 18px rgba(0,0,0,.10);
    transition: transform .28s var(--ease), opacity .28s var(--ease), background .28s var(--ease), box-shadow .28s var(--ease)
}

.sidebar-menu-btn {
    pointer-events: auto;
    cursor: pointer
}

.sidebar-profile-btn {
    font-size: 15px;
    color: var(--text);
    text-decoration: none
}

.sidebar-new-btn {
    font-size: 20px;
    font-weight: 700;
    color: var(--brand);
    cursor: pointer
}

.sidebar-menu-btn:hover,
.sidebar-profile-btn:hover,
.sidebar-new-btn:hover {
    background: var(--brand-soft);
    transform: translateY(-1px)
}

.eyebrow,
.side-title,
.hint,
.conversation-list small,
.user-box small,
.stat small,
.row small {
    color: var(--muted)
}

.side-title {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-top: 2px
}

.conversation-list {
    overflow: auto;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    gap: 4px;
    scroll-behavior: smooth;
    padding-right: 2px
}

.conv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 6px;
    padding: 6px 8px;
    border-radius: 10px;
    background: var(--panel-2);
    border: 1px solid transparent;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease);
    align-items: center
}

.conv strong,
.conv small {
    grid-column: 1
}

.conv small {
    color: var(--muted);
    overflow-wrap: anywhere;
    display: block
}

.conv.active,
.conv:hover {
    border-color: var(--line-strong);
    background: #fff;
    box-shadow: var(--shadow);
    transform: translateX(2px)
}

.conv:hover .conv-delete,
.conv.active .conv-delete {
    opacity: 1;
    transform: none
}

.conv.empty {
    justify-content: center;
    color: var(--muted);
    text-align: center
}

.user-box {
    margin-top: auto;
    padding: 8px;
    border: 1px solid rgba(196, 199, 207, .78);
    border-radius: 12px;
    background: rgba(255, 255, 255, .68);
    display: grid;
    gap: 4px;
    backdrop-filter: blur(26px) saturate(1.16);
    box-shadow: 0 8px 20px rgba(17,17,17,.04)
}
.user-meta {
    display: grid;
    gap: 6px
}
.user-card {
    padding: 4px 0 0;
    min-width: 0
}
.user-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(245, 243, 238, .75));
    border: 1px solid rgba(196, 199, 207, .56);
    box-shadow: 0 8px 18px rgba(17, 17, 17, .04)
}
.user-card-row.compact {
    padding: 6px 8px;
    background: rgba(255, 255, 255, .72)
}
.user-card-copy {
    display: grid;
    gap: 2px;
    min-width: 0
}
.user-card-copy small {
    color: var(--muted)
}
.profile-link {
    width: fit-content;
    padding: 6px 10px;
    font-size: 11px;
    text-decoration: none
}

.profile-entry strong {
    font-size: 14px
}
.profile-entry small {
    font-size: 12px
}
.profile-entry:hover,
.profile-entry:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(17, 94, 89, .12);
    border-color: rgba(15, 118, 110, .3)
}
.profile-entry.is-active {
    background: linear-gradient(180deg, rgba(15, 118, 110, .16), rgba(255, 255, 255, .82));
    border-color: rgba(15, 118, 110, .42)
}
.profile-entry-text {
    display: grid;
    gap: 0;
    text-align: left
}
.profile-entry-text strong {
    font-size: 13px;
    line-height: 1.15
}
.profile-entry-text small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.1
}
.profile-entry-compact {
    width: fit-content;
    padding: 8px 10px;
    border-radius: 14px;
    max-width: none;
    box-shadow: 0 8px 16px rgba(17, 94, 89, .08);
    justify-self: start
}
.profile-page {
    background: radial-gradient(circle at top, rgba(15, 118, 110, .08), transparent 36%), var(--bg);
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y
}
.profile-shell {
    width: min(1120px, calc(100vw - 48px));
    margin: 16px auto 28px;
    display: grid;
    gap: 16px;
    min-width: 0;
    padding-bottom: 24px
}
.profile-hero,
.profile-card {
    border: 1px solid rgba(196, 199, 207, .72);
    border-radius: 24px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 18px 50px rgba(17, 17, 17, .06);
    backdrop-filter: blur(20px)
}
.profile-card-accent {
    background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(249,247,242,.72))
}
.profile-hero {
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    min-width: 0;
    flex-wrap: wrap
}
.profile-hero-copy {
    display: grid;
    gap: 4px
}
.profile-page-kicker {
    font-size: 11px
}
.profile-hero h2 {
    font-size: 20px;
    line-height: 1.15;
    margin: 0
}
.profile-hero p,
.profile-page-topbar-lead {
    font-size: 12px;
    line-height: 1.45;
    margin: 0
}
.profile-hero.is-collapsed .profile-hero-copy {
    display: none
}
.profile-hero .ghost,
.profile-hero .danger-ghost {
    white-space: nowrap
}
.profile-usage-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}
.profile-reward-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px
}
.profile-reward-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px
}
.invite-share-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(196, 199, 207, .56);
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(245,243,238,.72))
}
.invite-share-copy {
    display: grid;
    gap: 12px;
    flex: 1 1 320px;
    min-width: min(100%, 320px)
}
.invite-share-field {
    display: grid;
    gap: 6px;
    min-width: 0
}
.invite-share-field strong {
    font-size: 20px;
    line-height: 1.15;
    word-break: break-all
}
.invite-link-text {
    width: 100%;
    min-height: 78px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(196, 199, 207, .72);
    background: rgba(255, 255, 255, .96);
    color: var(--text);
    line-height: 1.5;
    resize: vertical;
    word-break: break-all
}
.invite-link-text:focus {
    outline: 2px solid rgba(0, 122, 255, .18);
    border-color: rgba(0, 122, 255, .45)
}
.invite-qr-card {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(196, 199, 207, .56)
}
.invite-qr-card img {
    width: 168px;
    height: 168px;
    max-width: 100%;
    padding: 8px;
    border-radius: 14px;
    background: #fff;
    object-fit: contain
}
.invite-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-self: flex-start
}
.invite-share-actions .primary,
.invite-share-actions .ghost {
    min-width: 120px
}
@media (max-width: 900px) {
    .invite-share-box {
        flex-direction: column;
        align-items: stretch
    }
    .invite-share-copy,
    .invite-qr-card,
    .invite-share-actions {
        width: 100%
    }
    .invite-qr-card {
        justify-items: center
    }
    .invite-qr-card img {
        width: 144px;
        height: 144px
    }
    .invite-share-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-self: stretch
    }
    .invite-share-actions .primary,
    .invite-share-actions .ghost {
        width: 100%;
        min-width: 0
    }
}
.admin-reward-summary {
    margin-top: 8px
}
.reward-settings-form {
    align-items: end
}
.admin-log-table {
    min-width: 920px
}
.admin-log-table td,
.admin-log-table th {
    white-space: normal;
    word-break: break-word;
    vertical-align: top
}
.profile-banner {
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    min-width: 0;
    flex-wrap: wrap
}
.profile-banner,
.profile-card,
.profile-hero {
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease)
}
.profile-card:hover,
.profile-hero:hover {
    box-shadow: 0 22px 56px rgba(17,17,17,.08)
}
.profile-banner-copy {
    display: grid;
    gap: 6px
}
.profile-banner-copy h2 {
    font-size: clamp(22px, 3vw, 30px);
    letter-spacing: -.02em
}
.profile-banner-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px
}
.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 16px;
    min-width: 0
}
.profile-workspace-home {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch
}
.profile-workspace-card {
    min-width: 0;
    min-height: 92px;
    padding: 14px 12px;
    display: grid;
    align-content: start;
    gap: 6px;
    border-radius: 18px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease
}
.profile-workspace-card strong {
    font-size: 14px;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word
}
.profile-workspace-card small {
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word
}
.profile-workspace-card.is-active {
    border-color: rgba(47,111,237,.42);
    background: linear-gradient(180deg, rgba(47,111,237,.12), rgba(255,255,255,.96));
    box-shadow: 0 14px 28px rgba(47,111,237,.12)
}
.profile-workspace-card:hover {
    transform: translateY(-1px)
}
.profile-usage-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px
}
.profile-usage-summary .metric-card {
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(245,243,238,.72));
    border: 1px solid rgba(196,199,207,.56);
    display: grid;
    gap: 6px
}
.profile-usage-summary .metric-card strong {
    font-size: 22px;
    line-height: 1.1
}
.profile-usage-summary .metric-card span {
    color: var(--muted);
    font-size: 12px
}
.usage-dashboard-section {
    gap: 18px
}
.profile-section-subtitle,
.profile-panel-subtitle {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px
}
.usage-section-head {
    align-items: end
}
.usage-toolbar {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap
}
.usage-range-control {
    display: grid;
    gap: 6px;
    min-width: 120px
}
.usage-range-control span {
    color: var(--muted);
    font-size: 12px
}
.usage-range-control select {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(196,199,207,.72);
    background: rgba(255,255,255,.92)
}
.usage-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px
}
.usage-stat-card,
.usage-panel,
.usage-detail-card {
    border: 1px solid rgba(196,199,207,.56);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,243,238,.78));
    box-shadow: 0 16px 36px rgba(17,17,17,.04)
}
.usage-stat-card {
    padding: 16px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start
}
.usage-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 12px 20px rgba(17,17,17,.08)
}
.usage-stat-copy {
    display: grid;
    gap: 4px;
    min-width: 0
}
.usage-stat-copy span,
.usage-stat-copy small {
    color: var(--muted)
}
.usage-stat-copy span {
    font-size: 12px
}
.usage-stat-copy small {
    font-size: 11px
}
.usage-stat-copy strong {
    font-size: 28px;
    line-height: 1.05
}
.usage-main-grid,
.usage-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 16px
}
.usage-panel,
.usage-detail-card {
    padding: 16px;
    display: grid;
    gap: 14px
}
.usage-distribution-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 16px;
    align-items: center
}
.usage-distribution-visual {
    display: grid;
    place-items: center
}
.usage-distribution-chart {
    width: 180px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 24px;
    background: radial-gradient(closest-side, rgba(255,255,255,.96) 62%, transparent 63% 100%), conic-gradient(rgba(196,199,207,.42) 0 100%)
}
.usage-distribution-chart strong {
    display: block;
    font-size: 28px;
    line-height: 1
}
.usage-distribution-chart small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px
}
.usage-mini-table {
    min-width: 520px
}
.usage-mini-table th,
.usage-mini-table td {
    font-size: 13px
}
.usage-color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-right: 8px;
    vertical-align: middle
}
.usage-trend-head {
    align-items: start
}
.usage-trend-wrap {
    margin-top: 0;
    min-height: 288px
}
.usage-trend-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}
.usage-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px
}
.usage-legend-item::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block
}
.usage-legend-item.prompt::before {
    background: #2f6fed
}
.usage-legend-item.completion::before {
    background: #20c997
}
.usage-legend-item.total::before {
    background: #27c3d8
}
.recent-activity-list,
.usage-quick-actions {
    display: grid;
    gap: 12px
}
.recent-models-empty {
    color: var(--muted);
    font-size: 13px
}
.recent-activity-item,
.usage-quick-action {
    border: 1px solid rgba(196,199,207,.52);
    border-radius: 18px;
    background: rgba(255,255,255,.8)
}
.recent-activity-item {
    padding: 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center
}
.recent-activity-index {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(47,111,237,.12);
    color: #2f6fed;
    font-weight: 700
}
.recent-activity-copy,
.recent-activity-metrics {
    display: grid;
    gap: 4px;
    min-width: 0
}
.recent-activity-copy small,
.recent-activity-metrics small {
    color: var(--muted);
    font-size: 12px
}
.recent-activity-metrics {
    text-align: right
}
.usage-quick-action {
    padding: 16px;
    display: grid;
    gap: 4px;
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
}
.usage-quick-action strong,
.usage-quick-action small {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.usage-quick-action:hover {
    transform: translateY(-1px);
    border-color: rgba(47,111,237,.35);
    box-shadow: 0 10px 24px rgba(47,111,237,.08)
}
.usage-quick-action small {
    color: var(--muted)
}
.accent-emerald .usage-stat-icon {
    background: linear-gradient(135deg, #18b78a, #0f766e)
}
.accent-cyan .usage-stat-icon {
    background: linear-gradient(135deg, #22c1dc, #2f6fed)
}
.accent-green .usage-stat-icon {
    background: linear-gradient(135deg, #42c883, #159957)
}
.accent-violet .usage-stat-icon {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9)
}
.accent-sky .usage-stat-icon {
    background: linear-gradient(135deg, #38bdf8, #2563eb)
}
.accent-indigo .usage-stat-icon {
    background: linear-gradient(135deg, #6366f1, #4338ca)
}
.accent-amber .usage-stat-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706)
}
.accent-rose .usage-stat-icon {
    background: linear-gradient(135deg, #f43f5e, #e11d48)
}
.usage-chart-wrap {
    margin-top: 12px;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(245,243,238,.72));
    border: 1px solid rgba(196,199,207,.56)
}
.usage-chart-wrap canvas {
    width: 100%;
    display: block
}
.profile-summary-grid,
#profileAgreementSection {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}
.profile-summary-card,
#passwordSecuritySection,
#profileAgreementSection .profile-card,
#rewardSection,
#inviteSection,
#priceSection,
#usageSection,
#jobSection {
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,243,238,.86));
    border: 1px solid rgba(196,199,207,.52);
    box-shadow: 0 16px 34px rgba(17,17,17,.05)
}
.profile-summary-card {
    padding: 16px;
    gap: 12px
}
.profile-summary-meta,
.profile-summary-tags {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px
}
.profile-summary-meta span,
.profile-summary-tags .status-pill {
    min-height: 40px;
    display: grid;
    align-items: center;
    padding: 0 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(196,199,207,.45)
}
.profile-summary-tags .status-pill {
    justify-content: center
}
#profileAgreementSection .profile-card {
    padding: 16px
}
#rewardSection,
#inviteSection,
#priceSection,
#usageSection,
#jobSection {
    padding: 18px;
    max-width: 980px;
    margin-inline: auto
}
.profile-avatar-wrap {
    width: 72px;
    height: 72px;
    position: relative
}
.profile-avatar-img,
.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    object-fit: cover
}
.profile-avatar {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0f766e, #115e59);
    color: #fff;
    font-weight: 800;
    letter-spacing: .12em;
    box-shadow: 0 16px 30px rgba(17, 94, 89, .24)
}
.profile-avatar-img {
    box-shadow: 0 16px 30px rgba(17, 94, 89, .18)
}
.profile-avatar-wrap .profile-avatar-img[hidden],
.profile-avatar-wrap .profile-avatar[hidden] {
    display: none
}
.profile-summary-copy {
    display: grid;
    gap: 6px;
    min-width: 0
}
.profile-summary-copy h2 {
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.1;
    overflow-wrap: anywhere;
    word-break: break-word
}
.profile-display-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0
}
.profile-type-badge {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 118, 110, .12);
    color: #0f766e;
    font-size: 12px;
    font-weight: 700;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere
}
.profile-summary-tags {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}
.profile-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0
}
.profile-qq-binding-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px
}
.profile-qq-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text)
}
.profile-qq-binding-row .inline-link,
.profile-qq-binding-row .ghost.inline-link {
    padding: 4px 10px;
    font-size: 12px
}
.qq-inline-info span {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(245, 243, 238, .85);
    color: var(--text);
    font-size: 12px;
    line-height: 1.35
}
.qq-inline-info strong {
    font-weight: 600
}
.profile-summary-meta span {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(245, 243, 238, .85);
    color: var(--text);
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word
}
.profile-card {
    padding: 20px;
    display: grid;
    gap: 16px;
    min-width: 0;
    overflow: hidden
}
.card-title-row,
.profile-actions,
.row-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex-wrap: wrap
}
.profile-alert {
    border-radius: 16px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid transparent;
}
.profile-summary-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}
.profile-summary-avatar {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    object-fit: cover;
    flex-shrink: 0;
}
.profile-summary-avatar-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-summary-avatar {
    box-shadow: 0 12px 30px rgba(17, 17, 17, .12);
    background: rgba(255, 255, 255, .92);
}
.profile-summary-avatar-fallback {
    background: linear-gradient(135deg, rgba(0, 122, 255, .9), rgba(88, 86, 214, .88));
}
.qq-profile-grid {
    align-items: stretch;
}
.profile-alert-danger {
    color: #9f1239;
    background: rgba(255, 59, 48, .08);
    border-color: rgba(255, 59, 48, .22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.info-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
}
.info-item {
    padding: 14px;
    border-radius: 18px;
    background: rgba(245, 243, 238, .85);
    display: grid;
    gap: 6px;
    min-width: 0
}
.info-item span,
.info-item strong {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.info-item strong {
    word-break: break-word
}
.quota-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px
}
.quota-metrics div {
    padding: 16px;
    border-radius: 18px;
    background: rgba(245, 243, 238, .85);
    display: grid;
    gap: 6px
}
.quota-bar {
    height: 12px;
    background: rgba(15, 118, 110, .12);
    border-radius: 999px;
    overflow: hidden
}
.quota-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #0f766e, #115e59)
}

@media (min-width: 901px) {
    .quota-card {
        align-content: start;
    }
    .quota-card .card-title-row {
        align-items: center;
    }
    .quota-card .quota-metrics-rich {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .quota-card .quota-metrics-rich > div {
        min-height: 92px;
        padding: 14px;
        border-radius: 16px;
        background: rgba(255,255,255,.86);
        border: 1px solid rgba(196,199,207,.42);
        align-content: start;
    }
    .quota-card .quota-metrics-rich > div:last-child {
        grid-column: 1 / -1;
        min-height: 78px;
    }
    .quota-card .quota-metrics-rich strong {
        font-size: 24px;
        line-height: 1.1;
        word-break: break-word;
    }
    .quota-card .quota-metrics-rich span {
        font-size: 12px;
        line-height: 1.4;
        color: var(--muted);
    }
    .quota-card #balanceStatusBadge {
        white-space: normal;
        text-align: center;
        justify-content: center;
        max-width: min(260px, 100%);
    }
    .quota-card .quota-bar {
        margin-top: 2px;
    }
}
.table-wrap {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%
}
.profile-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
    table-layout: fixed
}
.profile-table th,
.profile-table td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(196, 199, 207, .55);
    text-align: left;
    white-space: nowrap
}
.empty-cell {
    text-align: center;
    color: var(--muted)
}
.profile-table-hint {
    margin: 0;
    color: var(--muted);
    font-size: 13px
}
.status-pill {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(15, 118, 110, .1);
    color: #0f766e;
    font-size: 12px
}
.status-pill.subtle {
    background: rgba(17, 94, 89, .08);
    color: #115e59
}
.form-hint {
    text-align: right;
    flex: 1
}
.message {
    min-height: 24px
}
.profile-mobile-tabs {
    display: none
}
section[data-profile-pane][hidden],
.price-section-content[hidden] {
    display: none !important
}
@media (max-width: 640px) {
    .profile-shell.profile-workspace-shell {
        padding-inline: 10px;
    }
    .profile-page-topbar,
    .profile-workspace-hero,
    .profile-card,
    .profile-summary-card,
    #rewardSection,
    #inviteSection,
    #priceSection,
    #usageSection,
    #jobSection {
        border-radius: 18px;
    }
    .profile-workspace-home {
        grid-template-columns: 1fr;
    }
    .profile-workspace-card {
        min-height: auto;
        padding: 12px;
    }
    .profile-workspace-card small {
        font-size: 11px;
    }
    .profile-summary-copy h2 {
        font-size: 22px;
    }
    .profile-type-badge,
    .status-pill,
    .profile-summary-meta span {
        font-size: 11px;
    }
    .info-item,
    .quota-metrics div,
    .metric-card,
    .usage-stat-card,
    .usage-quick-action {
        padding: 12px;
    }
    .profile-page-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px
    }
    .profile-page-topbar-copy,
    .profile-page-topbar-copy > div,
    .profile-actions {
        width: 100%
    }
    .profile-page-topbar-copy > div,
    .profile-page-topbar-lead,
    .profile-page-topbar-copy h1 {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .profile-actions,
    .row-inline.mobile-stack,
    .profile-page-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch
    }
    .profile-actions > * {
        width: 100%;
        text-align: center;
        justify-content: center;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .profile-workspace-home {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px
    }
    .profile-workspace-card {
        min-width: 0;
        padding: 12px 8px;
        align-content: start;
        border-radius: 16px
    }
    .profile-workspace-card strong {
        font-size: 13px
    }
    .profile-workspace-card small {
        font-size: 10px;
        line-height: 1.35
    }
    .profile-grid,
    .profile-summary-grid,
    .info-list,
    .quota-metrics,
    .profile-reward-summary,
    .usage-stats-grid,
    .usage-main-grid,
    .usage-bottom-grid {
        grid-template-columns: 1fr
    }
    .profile-summary-grid,
    #profileAgreementSection {
        gap: 12px
    }
    .profile-summary-card,
    .profile-card,
    .usage-panel,
    .usage-detail-card,
    #rewardSection,
    #inviteSection,
    #priceSection,
    #jobSection {
        border-radius: 22px;
        padding: 14px;
        gap: 12px
    }
    .profile-summary-card {
        grid-template-columns: 1fr;
        justify-items: start
    }
    .profile-summary-head {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 10px;
        width: 100%;
    }
    .profile-summary-copy,
    .profile-display-title {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .profile-summary-avatar {
        width: 88px;
        height: 88px;
        border-radius: 26px;
    }
    .profile-summary-meta,
    .profile-summary-tags {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px
    }
    .profile-summary-tags {
        grid-template-columns: 1fr
    }
    .status-pill {
        justify-content: center
    }
    .profile-card-accent {
        padding-left: 14px;
        padding-right: 14px
    }
    .profile-banner,
    .profile-hero {
        flex-direction: column;
        align-items: start
    }
    .profile-usage-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px
    }
    .metric-card,
    .usage-stat-card {
        border-radius: 18px;
        padding: 12px
    }
    .usage-stat-copy strong {
        font-size: 22px
    }
    .usage-distribution-layout {
        grid-template-columns: 1fr;
        justify-items: center
    }
    .usage-distribution-chart {
        width: min(180px, 48vw)
    }
    .usage-mini-table,
    .profile-table {
        min-width: 0
    }
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
    .recent-activity-item {
        grid-template-columns: auto minmax(0, 1fr);
        border-radius: 16px
    }
    .recent-activity-metrics {
        grid-column: 2;
        text-align: left
    }
    .invite-share-box,
    .invite-share-actions,
    .price-filter-bar,
    .usage-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px
    }
    .invite-link-text {
        min-height: 88px
    }
    .full-mobile {
        width: 100%
    }
    .form-hint {
        text-align: left
    }
    .profile-shell {
        width: min(1120px, calc(100vw - 16px));
        margin: 12px auto 20px
    }
    .profile-card,
    .profile-hero,
    .profile-banner,
    .profile-page-topbar,
    .profile-workspace-hero,
    .profile-workspace-card {
        border-radius: 20px;
        padding-left: 16px;
        padding-right: 16px
    }
    .profile-avatar {
        width: 60px;
        height: 60px;
        border-radius: 18px
    }
    .profile-entry-compact {
        width: 100%;
        max-width: none
    }
    .logout-btn {
        width: 100%
    }
}
@media (max-width: 640px) {
    .profile-workspace-home {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px
    }
    .profile-workspace-card {
        padding: 10px 6px;
        border-radius: 14px
    }
    .profile-workspace-card strong {
        font-size: 12px
    }
    .profile-workspace-card small {
        font-size: 9px;
        line-height: 1.3
    }
    .profile-summary-meta,
    .profile-summary-tags,
    .profile-usage-summary {
        grid-template-columns: 1fr
    }
    .usage-stat-card {
        grid-template-columns: auto 1fr;
        gap: 10px
    }
    .usage-stat-copy strong {
        font-size: 20px
    }
    .card-title-row {
        gap: 8px;
        align-items: start
    }
    .invite-share-actions {
        grid-template-columns: 1fr 1fr
    }
    .invite-share-actions .primary,
    .invite-share-actions .ghost,
    .profile-actions .ghost,
    .profile-actions .danger-ghost {
        width: 100%
    }
}
@media (max-width: 960px) {
    #chatForm.composer {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: 18;
        box-sizing: border-box;
        padding: 0 8px 0 !important;
        margin-top: 0;
        margin-bottom: 0 !important;
        flex: 0 0 auto;
        align-self: stretch;
        width: 100%;
        overflow: visible;
        background: transparent;
        backdrop-filter: none;
        box-shadow: none;
    }
    #chatForm .mobile-composer-shell {
        margin-bottom: 0 !important;
        align-items: center;
        gap: 8px;
        padding: 8px 8px 4px;
        border-radius: 22px 22px 18px 18px;
        background: rgba(255, 255, 255, .92);
        backdrop-filter: blur(18px);
        box-shadow: 0 -10px 28px rgba(17, 17, 17, .08);
    }
    #chatForm textarea#prompt {
        min-height: 52px;
        max-height: 128px;
    }
    #chatForm.is-voice-mode textarea#prompt {
        display: none;
    }
    #chatForm .mobile-voice-input-btn {
        display: inline-flex !important;
    }
    #chatForm .mobile-voice-hold-btn {
        display: none !important;
    }
    #chatForm.is-voice-mode .mobile-voice-hold-btn {
        display: inline-flex !important;
    }
    #chatForm .voice-call-trigger {
        display: none !important;
    }
    .chat-main {
        min-height: 100dvh;
    }
    .messages {
        padding-bottom: 8px;
    }

    body.chat-user-page #chatForm .slash-skill-picker {
        z-index: 24;
    }
}

.mobile-voice-input-btn,
.mobile-voice-hold-btn {
    min-height: 46px;
    border-radius: 16px;
    padding-inline: 14px;
    font-weight: 700;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.mobile-voice-input-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    padding: 0;
    touch-action: none;
    user-select: none;
    transition: transform .14s var(--ease), background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease), box-shadow .14s var(--ease);
}

.mobile-voice-input-btn.is-active {
    background: rgba(124, 170, 92, .10);
    border-color: rgba(124, 170, 92, .24);
    color: #466b31;
    box-shadow: 0 6px 14px rgba(34, 48, 24, .06);
    transform: translateY(-1px);
}

.mobile-voice-input-btn svg {
    width: 18px;
    height: 18px;
}

.mobile-voice-hold-btn {
    flex: 1 1 100%;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(94, 73, 53, .14);
    box-shadow: 0 8px 20px rgba(36, 28, 18, .05);
    letter-spacing: .02em;
}

.mobile-voice-hold-btn.is-recording {
    background: rgba(171, 233, 132, .96);
    border-color: rgba(93, 156, 63, .24);
    color: #27481a;
    box-shadow: 0 10px 20px rgba(35, 55, 22, .08);
}

.mobile-voice-hold-btn.is-processing,
.mobile-voice-hold-btn.is-hold-active {
    transform: translateY(-1px);
}

.mobile-voice-overlay {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: grid;
    place-items: end center;
    pointer-events: auto;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.mobile-voice-overlay[hidden] {
    display: none !important;
}

.mobile-voice-overlay__scrim {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 18, .56);
    backdrop-filter: blur(8px);
}

.mobile-voice-overlay__panel {
    position: relative;
    width: min(100%, 560px);
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    display: grid;
    gap: 16px;
    align-items: center;
    justify-items: center;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.mobile-voice-overlay__bubble {
    min-width: 160px;
    max-width: 72vw;
    padding: 18px 24px 16px;
    border-radius: 24px;
    background: rgba(166, 233, 126, .96);
    border: 1px solid rgba(93, 156, 63, .18);
    box-shadow: 0 14px 28px rgba(18, 26, 12, .14);
    color: #1f3d12;
    display: grid;
    gap: 10px;
    justify-items: center;
    transform: translateY(-6px);
}

.mobile-voice-overlay__wave {
    width: 84px;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(33, 65, 16, .16), rgba(33, 65, 16, .40), rgba(33, 65, 16, .16));
    mask: radial-gradient(circle at 50% 50%, #000 35%, transparent 36%);
    opacity: .82;
}

.mobile-voice-overlay__text,
.mobile-voice-overlay__footer {
    font: 700 14px/1.2 system-ui;
    letter-spacing: .02em;
    -webkit-user-select: none;
    user-select: none;
}

.mobile-voice-overlay__actions {
    width: min(100%, 520px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mobile-voice-overlay__action {
    min-height: 84px;
    border: 0;
    border-radius: 28px;
    background: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .92);
    font-size: 18px;
    font-weight: 700;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 22px rgba(0, 0, 0, .10);
    transition: transform .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}

.mobile-voice-overlay__action.is-active.is-cancel {
    background: rgba(223, 95, 95, .92);
    color: #fff;
    box-shadow: 0 10px 20px rgba(88, 26, 26, .18);
    transform: scale(1.01);
}

.mobile-voice-overlay__action.is-active.is-transcribe {
    background: rgba(255, 255, 255, .94);
    color: #222;
    box-shadow: 0 10px 20px rgba(22, 22, 22, .12);
    transform: scale(1.01);
}

.mobile-voice-overlay__footer {
    color: rgba(255, 255, 255, .94);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .16);
}

body.mobile-voice-overlay-open {
    overflow: hidden;
}

.mobile-voice-overlay__panel {
    width: min(100%, 100vw);
    min-height: 72vh;
    align-content: end;
    justify-items: center;
    padding: 0 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 50% 50% 0 0 / 20vh 20vh 0 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.mobile-voice-overlay__panel::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -44vh;
    width: 148vw;
    height: 102vh;
    transform: translateX(-50%);
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .12) 18%, rgba(237, 237, 237, .97) 42%, rgba(219, 219, 219, .995) 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .64), 0 -16px 40px rgba(0, 0, 0, .20);
    pointer-events: none;
}

.mobile-voice-overlay__panel::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -38vh;
    width: 138vw;
    height: 90vh;
    transform: translateX(-50%);
    border-radius: 50%;
    border-top: 2px solid rgba(255, 255, 255, .40);
    opacity: .82;
    pointer-events: none;
}

.mobile-voice-overlay__page {
    width: min(100%, 560px);
    display: grid;
    justify-items: center;
    gap: 16px;
    padding: 28px 0 10px;
}

.mobile-voice-overlay__page[hidden] {
    display: none !important;
}

.mobile-voice-overlay__record-page {
    width: min(100%, 560px);
}

.mobile-voice-overlay__bubble {
    min-width: 176px;
    max-width: 82vw;
    padding: 20px 28px 16px;
    border-radius: 26px;
    background: rgba(160, 241, 101, .98);
    border: 1px solid rgba(118, 187, 58, .28);
    box-shadow: 0 16px 30px rgba(16, 23, 12, .18);
    color: #152c0f;
    display: grid;
    gap: 12px;
    justify-items: center;
    transform: translateY(-8px);
}

.mobile-voice-overlay__wave {
    width: 120px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: .92;
    background: transparent;
    border: 0;
    box-shadow: none;
    mask: none;
    -webkit-mask: none;
}

.mobile-voice-overlay__wave span {
    width: 3px;
    height: 8px;
    border-radius: 999px;
    background: rgba(23, 42, 14, .72);
    transform-origin: center bottom;
    animation: mobileVoiceWaveIdle 1.1s ease-in-out infinite;
}

.mobile-voice-overlay[data-mode="record"][data-state="recording"] .mobile-voice-overlay__wave span,
.mobile-voice-overlay[data-mode="record"][data-state="starting"] .mobile-voice-overlay__wave span {
    animation: mobileVoiceWaveActive .78s ease-in-out infinite;
}

.mobile-voice-overlay__wave span:nth-child(1) { animation-delay: -0.78s; height: 7px; }
.mobile-voice-overlay__wave span:nth-child(2) { animation-delay: -0.65s; height: 11px; }
.mobile-voice-overlay__wave span:nth-child(3) { animation-delay: -0.56s; height: 9px; }
.mobile-voice-overlay__wave span:nth-child(4) { animation-delay: -0.48s; height: 14px; }
.mobile-voice-overlay__wave span:nth-child(5) { animation-delay: -0.38s; height: 8px; }
.mobile-voice-overlay__wave span:nth-child(6) { animation-delay: -0.29s; height: 16px; }
.mobile-voice-overlay__wave span:nth-child(7) { animation-delay: -0.21s; height: 9px; }
.mobile-voice-overlay__wave span:nth-child(8) { animation-delay: -0.14s; height: 13px; }
.mobile-voice-overlay__wave span:nth-child(9) { animation-delay: -0.06s; height: 8px; }
.mobile-voice-overlay__wave span:nth-child(10) { animation-delay: -0.72s; height: 14px; }
.mobile-voice-overlay__wave span:nth-child(11) { animation-delay: -0.44s; height: 9px; }
.mobile-voice-overlay__wave span:nth-child(12) { animation-delay: -0.12s; height: 7px; }

.mobile-voice-overlay__text,
.mobile-voice-overlay__footer {
    font: 700 14px/1.2 system-ui;
    letter-spacing: .02em;
    -webkit-user-select: none;
    user-select: none;
}

.mobile-voice-overlay__text {
    font-size: 16px;
}

.mobile-voice-overlay__actions {
    width: min(100%, 560px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.mobile-voice-overlay__action {
    min-height: 82px;
    border: 0;
    border-radius: 30px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .92);
    font-size: 18px;
    font-weight: 700;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 22px rgba(0, 0, 0, .12);
    transition: transform .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}

.mobile-voice-overlay__action.is-active.is-cancel {
    background: rgba(223, 95, 95, .92);
    color: #fff;
    box-shadow: 0 10px 20px rgba(88, 26, 26, .18);
    transform: scale(1.01);
}

.mobile-voice-overlay__action.is-active.is-transcribe {
    background: rgba(255, 255, 255, .94);
    color: #222;
    box-shadow: 0 10px 20px rgba(22, 22, 22, .12);
    transform: scale(1.01);
}

.mobile-voice-overlay__footer {
    color: rgba(255, 255, 255, .94);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .16);
}

.mobile-voice-review-card {
    position: relative;
    z-index: 2;
    width: min(100%, 560px);
    min-height: min(58vh, 430px);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: stretch;
    justify-items: stretch;
    padding: 24px 0 126px;
}

.mobile-voice-review-bubble {
    width: 100%;
    position: relative;
    border-radius: 28px;
    background: rgba(160, 241, 101, .98);
    border: 1px solid rgba(118, 187, 58, .28);
    box-shadow: 0 16px 30px rgba(16, 23, 12, .18);
    color: #102409;
    display: grid;
    gap: 10px;
    padding: 18px 18px 14px;
}

.mobile-voice-review-bubble::after {
    content: '';
    position: absolute;
    right: 56px;
    bottom: -10px;
    width: 18px;
    height: 18px;
    background: rgba(160, 241, 101, .98);
    transform: rotate(45deg);
    border-right: 1px solid rgba(118, 187, 58, .24);
    border-bottom: 1px solid rgba(118, 187, 58, .24);
}

.mobile-voice-review-chip {
    width: fit-content;
    padding: 10px 14px;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, .22);
    color: rgba(0, 0, 0, .7);
    font-weight: 800;
    font-size: 13px;
    backdrop-filter: blur(6px);
}

.mobile-voice-review-editor {
    width: 100%;
    min-height: 96px;
    max-height: 220px;
    resize: none;
    border: 0;
    outline: none;
    background: transparent;
    color: #101010;
    font: 700 28px/1.35 system-ui;
    letter-spacing: .01em;
    padding: 6px 4px 4px;
    caret-color: rgba(20, 20, 20, .82);
}

.mobile-voice-review-tip {
    justify-self: end;
    color: rgba(255, 255, 255, .72);
    font: 600 13px/1.2 system-ui;
    margin-top: -2px;
}

.mobile-voice-review-actions {
    position: fixed;
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 6;
    width: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1.28fr;
    gap: 14px;
    align-items: center;
    padding-top: 8px;
}

.mobile-voice-review-action {
    min-height: 72px;
    border: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
    gap: 3px;
    padding: 10px 12px;
    font-weight: 800;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .16);
}

.mobile-voice-review-action__icon {
    font-size: 16px;
    line-height: 1;
}

.mobile-voice-review-action__label {
    font-size: 16px;
    line-height: 1;
}

.mobile-voice-review-action.is-cancel {
    background: rgba(102, 102, 102, .92);
    color: #fff;
}

.mobile-voice-review-action.is-secondary {
    background: rgba(255, 255, 255, .86);
    color: #111;
}

.mobile-voice-review-action.is-primary {
    background: rgba(248, 248, 248, .98);
    color: #111;
}

@keyframes mobileVoiceWaveActive {
    0%, 100% { transform: scaleY(.55); opacity: .62; }
    50% { transform: scaleY(1.8); opacity: 1; }
}

@keyframes mobileVoiceWaveIdle {
    0%, 100% { transform: scaleY(.8); opacity: .72; }
    50% { transform: scaleY(1.1); opacity: .92; }
}

.mobile-voice-overlay[data-mode="review"] .mobile-voice-overlay__actions,
.mobile-voice-overlay[data-mode="review"] .mobile-voice-overlay__footer,
.mobile-voice-overlay[data-mode="review"] .mobile-voice-overlay__bubble {
    display: none;
}

.mobile-voice-overlay[data-mode="review"] .mobile-voice-overlay__panel {
    background: linear-gradient(180deg, rgba(42, 42, 42, .30) 0%, rgba(35, 35, 35, .78) 34%, rgba(25, 25, 25, .92) 100%);
}

.mobile-voice-overlay[data-mode="review"] .mobile-voice-review-actions {
    display: grid;
    position: fixed;
}

.mobile-voice-overlay[data-mode="review"] .mobile-voice-review-bubble {
    transform: translateY(-2px);
}

.mobile-voice-overlay[data-mode="review"] .mobile-voice-review-editor::selection {
    background: rgba(14, 14, 14, .16);
}

body.mobile-voice-overlay-open {
    overflow: hidden;
}

#chatForm.is-voice-mode .mobile-voice-mode-btn {
    background: rgba(124, 170, 92, .10);
}

#chatForm.is-voice-mode .mobile-voice-hold-btn {
    display: inline-flex;
}

#chatForm.is-voice-mode textarea#prompt {
    display: none;
}
.topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky-nav);
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px 10px 0;
    padding: 8px 14px 6px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(22px) saturate(1.16);
    box-shadow: 0 12px 34px rgba(17, 17, 17, .08)
}

.topbar-main {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap
}

.topbar-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap
}

.topbar-head {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    flex: 1 1 420px
}

.topbar-head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto
}

.topbar-actions {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1 1 520px;
    min-width: 0
}
.topbar.is-collapsed .topbar-main {
    display: none
}
.topbar.is-collapsed .topbar-main {
    display: none
}
.topbar.is-collapsed .topbar-compact {
    display: flex
}
.topbar.is-collapsed {
    padding-top: 12px;
    padding-bottom: 12px
}
.topbar-actions-inline {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-end;
    align-items: center;
    gap: 6px
}
.topbar-actions-inline > * {
    white-space: nowrap
}
.topbar-actions-inline .ghost,
.topbar-actions-inline .file-btn {
    padding: 8px 10px;
    min-height: 44px;
    font-size: 12px;
    border-radius: 14px
}
.topbar-more-menu {
    position: relative;
    display: inline-block;
}
.topbar-more-menu > button {
    padding: 8px 12px;
    min-height: 36px;
    font-size: 12px;
    border-radius: 14px;
    font-weight: 500;
}
.topbar-more-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: var(--z-dropdown);
    min-width: 140px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.topbar-more-dropdown[hidden] {
    display: none;
}
.topbar-more-dropdown .ghost,
.topbar-more-dropdown .file-btn {
    padding: 8px 12px;
    min-height: 36px;
    font-size: 13px;
    border-radius: 10px;
    text-align: left;
    width: 100%;
    justify-content: flex-start;
}
.topbar-more-dropdown .ghost:hover,
.topbar-more-dropdown .file-btn:hover {
    background: #f3f4f6;
}
.topbar-mobile-actions {
    display: none;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto
}

.mobile-sidebar-btn,
.mobile-profile-btn,
.mobile-new-chat-btn {
    position: static;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    box-shadow: none
}

.mobile-profile-btn {
    text-decoration: none
}

.mobile-new-chat-btn {
    font-size: 18px;
    font-weight: 700;
    color: var(--brand)
}

.topbar-compact {
    justify-content: space-between
}

.topbar-actions .topbar-select-wrap {
    min-width: 160px;
    flex: 1 1 160px;
    max-width: 100%;
    overflow: hidden
}
.topbar-actions .topbar-select-wrap select {
    width: 100%;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23111' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    cursor: pointer;
    transition: border-color .15s
}

.topbar-actions .topbar-select-wrap select:focus {
    border-color: rgba(17, 17, 17, .28);
    outline: none
}

.topbar-actions .chat-actions {
    flex: 1 1 100%;
    justify-content: flex-end
}

.topbar-compact {
    display: none;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    padding: 2px 0
}

.topbar-compact-meta {
    display: grid;
    gap: 1px;
    min-width: 0
}

.topbar-compact-meta strong,
.topbar-compact-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.topbar-compact-meta strong {
    font-size: 14px;
    line-height: 1.1
}

.topbar-compact-meta span {
    color: var(--muted);
    font-size: 12px
}

.chat-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.eyebrow {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0 0 6px
}

h1,
h2,
h3,
p {
    margin: 0
}

.topbar h1,
.admin-hero h1 {
    font-size: 30px;
    line-height: 1.1;
    margin-bottom: 10px
}

.topbar p,
.admin-hero p {
    color: var(--muted)
}

.select-wrap {
    display: grid;
    gap: 8px;
    min-width: 220px;
    flex: 1 1 220px
}

.select-wrap span {
    font-size: 12px;
    color: var(--muted)
}

.model-state-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    align-self: flex-start
}

.model-state-badge.success {
    background: #eef8f1;
    color: var(--success);
    border: 1px solid #cce8d4
}

.model-state-badge.danger {
    background: #fff0ef;
    color: var(--danger);
    border: 1px solid #ffd2ce
}

.model-state-badge.muted {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #d1d5db
}

.hero-empty {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    place-items: center;
    padding: 16px 18px;
    min-height: 100%
}

.hero-card {
    width: min(720px, 100%);
    text-align: center;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--panel);
    box-shadow: var(--shadow);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease)
}

.hero-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 50px rgba(17, 17, 17, .07)
}

.hero-mark {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--brand-soft);
    color: #111;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    font-weight: 700
}

.hero-card h2 {
    font-size: 22px;
    margin-bottom: 8px
}

.hero-card p {
    color: var(--muted);
    line-height: 1.65
}

.skill-hub-card {
    width: min(1180px, 100%);
    text-align: left;
    display: grid;
    gap: 28px;
    padding: 32px
}

.skill-hub-hero {
    display: grid;
    gap: 18px
}

.skill-hub-copy {
    display: grid;
    gap: 10px
}

.skill-hub-card .hero-mark {
    margin: 0;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 18px
}

.skill-hub-card h2 {
    font-size: 32px;
    margin: 0
}

.skill-hub-lead {
    max-width: 900px;
    font-size: 15px
}

.skill-hub-badges,
.featured-learning-tags,
.featured-learning-shortcuts,
.skill-hub-actions,
.feature-module-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.skill-hub-badges span,
.featured-learning-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(17, 24, 39, .06);
    border: 1px solid rgba(17, 24, 39, .08);
    color: #374151;
    font-size: 13px;
    font-weight: 600
}

.skill-entry-grid,
.featured-learning-grid,
.featured-learning-metrics {
    display: grid;
    gap: 16px
}

.skill-entry-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.skill-entry-card,
.feature-module-card,
.featured-learning-note,
.featured-learning-metrics div {
    border: 1px solid rgba(209, 213, 219, .7);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(246, 248, 252, .94));
    box-shadow: 0 10px 26px rgba(17, 17, 17, .04)
}

.skill-entry-card {
    padding: 22px;
    display: grid;
    gap: 10px
}

.skill-entry-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 28px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: #111827;
    font-size: 12px;
    font-weight: 700
}

.skill-entry-card h3,
.featured-learning-head h3,
.feature-module-card h4 {
    margin: 0;
    color: #111827
}

.skill-entry-card p,
.featured-learning-head p,
.feature-module-card li,
.featured-learning-note p,
.featured-learning-footer p {
    color: #4b5563
}

.featured-learning-module {
    display: grid;
    gap: 20px;
    padding: 26px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(236, 253, 245, .88), rgba(239, 246, 255, .96));
    border: 1px solid rgba(16, 185, 129, .16)
}

.featured-learning-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap
}

.featured-learning-head h3 {
    font-size: 28px;
    margin-bottom: 8px
}

.featured-learning-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.featured-learning-metrics div {
    padding: 18px;
    display: grid;
    gap: 8px
}

.featured-learning-metrics strong {
    font-size: 15px;
    color: #0f172a
}

.featured-learning-metrics span {
    font-size: 13px;
    color: #475569;
    line-height: 1.65
}

.featured-learning-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.feature-module-card {
    padding: 22px;
    display: grid;
    gap: 16px
}

.feature-module-head {
    display: grid;
    gap: 8px
}

.feature-module-head span {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .06);
    color: #334155;
    font-size: 12px;
    font-weight: 700
}

.feature-module-card ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px
}

.featured-learning-footer {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap
}

.featured-learning-note {
    flex: 1 1 360px;
    padding: 18px 20px;
    display: grid;
    gap: 8px
}

.featured-learning-shortcuts {
    flex: 1 1 300px;
    align-items: flex-start;
    justify-content: flex-end
}

@media (max-width: 1100px) {
    .skill-entry-grid,
    .featured-learning-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 780px) {
    .hero-empty {
        padding: 12px
    }

    .skill-hub-card,
    .featured-learning-module {
        padding: 20px
    }

    .skill-hub-card h2,
    .featured-learning-head h3 {
        font-size: 24px
    }

    .skill-entry-grid,
    .featured-learning-grid,
    .featured-learning-metrics {
        grid-template-columns: 1fr
    }

    .featured-learning-footer {
        flex-direction: column
    }

    .featured-learning-shortcuts {
        justify-content: flex-start
    }
}

.messages {
    overflow: auto;
    padding: 8px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-behavior: auto;
    overflow-anchor: none;
    overscroll-behavior-y: contain;
    min-height: 0;
    padding-bottom: 100px
}

.msg-wrap {
    display: grid;
    gap: 6px;
    width: min(100%, 980px);
    max-width: 100%;
    margin-inline: auto;
    overflow-anchor: none
}

.msg-wrap.streaming,
.msg-wrap:last-child {
    overflow-anchor: auto
}

.msg-wrap.user {
    align-self: stretch;
    justify-items: end
}

.msg-wrap.user .msg-head {
    justify-content: flex-end;
    text-align: right
}

.msg-wrap.user .msg-identity {
    flex-direction: row-reverse
}

.msg-wrap.assistant {
    align-self: stretch;
    justify-items: stretch
}

.msg-wrap.share-select-mode {
    position: relative;
    padding-left: 44px;
    cursor: pointer
}

.msg-wrap.share-select-mode .msg,
.msg-wrap.share-select-mode .msg-head {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
}

.msg-wrap.share-select-mode:hover .msg {
    border-color: rgba(37, 99, 235, .38)
}

.msg-wrap.share-selected .msg {
    border-color: rgba(37, 99, 235, .62);
    box-shadow: 0 18px 40px rgba(37, 99, 235, .12)
}

.msg-share-check {
    position: absolute;
    left: 0;
    top: 44px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(37, 99, 235, .32);
    background: #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
    cursor: pointer;
    z-index: 3
}

.msg-share-check:hover {
    border-color: rgba(37, 99, 235, .46)
}

body.share-selection-active .msg-actions {
    opacity: .42;
    pointer-events: none
}

.msg-share-check.is-selected {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    border-color: #2563eb
}

.msg-share-check.is-selected::after {
    content: '';
    position: absolute;
    left: 9px;
    top: 5px;
    width: 7px;
    height: 12px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg)
}

.msg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding-inline: 4px;
    padding-bottom: 1px
}

.msg-identity {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0
}

.msg-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.msg-duration {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 122, 255, .08);
    color: var(--brand);
    font-size: 12px;
    font-weight: 600
}

.msg-model {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--muted);
    font-size: 11px;
    line-height: 1.2;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.msg-wrap.assistant .msg-model.family-deepseek { background: #eef7ff; color: #0c4a6e; }
.msg-wrap.assistant .msg-model.family-doubao { background: #fff2e8; color: #9a3412; }
.msg-wrap.assistant .msg-model.family-qwen { background: #f2f7ff; color: #1d4ed8; }
.msg-wrap.assistant .msg-model.family-glm { background: #f5f3ff; color: #6d28d9; }
.msg-wrap.assistant .msg-model.family-claude { background: #fff7ed; color: #b45309; }
.msg-wrap.assistant .msg-model.family-openai { background: #ecfeff; color: #0f766e; }
.msg-wrap.assistant .msg-model.family-llama { background: #fdf2f8; color: #be185d; }
.msg-wrap.assistant .msg-model.family-mistral { background: #f0fdf4; color: #15803d; }
.msg-wrap.assistant .msg-model.family-gemini { background: #fefce8; color: #a16207; }
.msg-wrap.assistant .msg-model.family-other { background: #f4f4f5; color: #52525b; }

.msg-avatar {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0
}

.msg-wrap.user .msg-avatar {
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    color: #fff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .18)
}

.msg-wrap.user .msg-name {
    color: var(--text)
}

.msg-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere
}

.msg-time {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap
}

.msg {
    position: relative;
    width: min(100%, 760px);
    padding: 10px 14px 8px;
    border-radius: 20px;
    line-height: 1.65;
    border: 1px solid rgba(209, 213, 219, .62);
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 255, 1));
    box-shadow: 0 12px 28px rgba(17, 17, 17, .05);
    animation: msgIn .35s var(--ease) both;
    display: grid;
    gap: 8px;
    min-width: 0;
    backdrop-filter: blur(14px) saturate(1.08)
}

.msg.user {
    background: linear-gradient(180deg, #eaf2ff, #fff);
    border-color: rgba(191, 219, 254, .88);
    box-shadow: 0 14px 34px rgba(37, 99, 235, .08)
}

.msg-wrap.user .msg.user {
    background: linear-gradient(180deg, #eaf2ff, #fff) !important;
    border-color: rgba(191, 219, 254, .92) !important;
    box-shadow: 0 14px 34px rgba(37, 99, 235, .10) !important
}

.msg.assistant {
    width: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(252, 250, 246, .96))
}

.msg-content {
    display: grid;
    gap: 8px;
    min-width: 0
}

.msg-agent-panel {
    display: grid;
    gap: 8px;
    margin-top: 2px;
    margin-bottom: 2px
}

.agent-card {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(203, 213, 225, .9);
    background: rgba(248, 250, 252, .92)
}

.agent-card[data-status="running"] {
    border-color: rgba(59, 130, 246, .4);
    background: rgba(239, 246, 255, .95)
}

.agent-card[data-status="completed"] {
    border-color: rgba(34, 197, 94, .35);
    background: rgba(240, 253, 244, .95)
}

.agent-card[data-status="failed"] {
    border-color: rgba(239, 68, 68, .35);
    background: rgba(254, 242, 242, .96)
}

.agent-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.agent-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text)
}

.agent-card-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .06);
    color: var(--muted);
    font-size: 11px;
    text-transform: lowercase
}

.agent-card-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 12px;
    color: var(--muted)
}

.agent-card-body p {
    margin: 0
}

.agent-card-details {
    margin-top: 8px;
    white-space: normal
}

.agent-card-details summary {
    cursor: pointer;
    color: var(--brand);
    font-weight: 700
}

.agent-card-body pre {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, .04);
    overflow: auto;
    font-size: 12px
}

.agent-confirm-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px
}

.agent-confirm-btn {
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 10px;
    padding: 6px 12px;
    cursor: pointer;
    background: #fff
}

.agent-confirm-btn.primary {
    background: rgba(37, 99, 235, .96);
    border-color: rgba(37, 99, 235, .96);
    color: #fff
}

.agent-confirm-btn.ghost {
    background: rgba(255, 255, 255, .9)
}

.msg-stream,
.msg-text:not(.msg-rich-text) {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word
}

.msg-rich-text {
    display: grid;
    gap: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word
}

.msg-rich-text>* {
    margin: 0
}

.msg-rich-text p,
.msg-rich-text blockquote p {
    margin: 0
}

.msg-rich-text h1,
.msg-rich-text h2,
.msg-rich-text h3,
.msg-rich-text h4,
.msg-rich-text h5,
.msg-rich-text h6 {
    margin: 0;
    line-height: 1.4
}

.msg-rich-text h1 {
    font-size: 1.45em
}

.msg-rich-text h2 {
    font-size: 1.28em
}

.msg-rich-text h3 {
    font-size: 1.16em
}

.msg-rich-text ul,
.msg-rich-text ol {
    margin: 0;
    padding-left: 1.4em;
    display: grid;
    gap: 6px
}

.msg-rich-text blockquote {
    margin: 0;
    padding: 10px 14px;
    border-left: 3px solid rgba(59, 130, 246, .35);
    border-radius: 16px;
    background: rgba(37, 99, 235, .06);
    color: #334155
}

.msg-rich-text code {
    display: inline-block;
    padding: .08em .42em;
    border-radius: 8px;
    background: rgba(15, 23, 42, .08);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .92em
}

.msg-rich-text a {
    color: var(--brand);
    text-decoration: none;
    word-break: break-all
}

.msg-rich-text a:hover {
    text-decoration: underline
}

.msg-rich-text hr {
    width: 100%;
    border: 0;
    border-top: 1px dashed rgba(148, 163, 184, .55);
    margin: 2px 0
}

.msg-text-streaming {
    opacity: .98
}

.msg-stream {
    position: relative;
    min-height: 1.4em
}

.msg-stream-cursor {
    display: inline-block;
    width: 8px;
    height: 1.2em;
    margin-left: 1px;
    vertical-align: text-bottom;
    background: linear-gradient(180deg, transparent 0, transparent 40%, rgba(34, 197, 94, .8) 40%, rgba(34, 197, 94, .8) 60%, transparent 60%, transparent 100%);
    animation: streamCursorBlink 1s steps(1) infinite;
}

.msg-stream-cursor.hidden {
    display: none;
}

@keyframes streamCursorBlink {
    50% {
        opacity: .1
    }
}

.msg-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 2px
}

.msg-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(203, 213, 225, .92);
    background: rgba(248, 250, 252, .96);
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .04)
}

.msg-action-btn:hover,
.msg-action-btn.is-active {
    background: #111;
    color: #fff;
    border-color: #111
}

.msg-action-btn.copied,
.code-copy.copied {
    background: #111;
    color: #fff;
    border-color: #111
}

.msg-more-wrap {
    position: relative
}

.msg-action-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    display: none;
    min-width: 124px;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, .96);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .14)
}

.msg-more-wrap.is-open .msg-action-menu {
    display: grid;
    gap: 6px
}

.msg-action-menu .ghost {
    width: 100%;
    justify-content: flex-start;
    padding: 8px 10px;
    border-radius: 12px
}

.thinking .msg-actions,
.msg-wrap.streaming .msg-actions {
    display: none
}

.thinking-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-weight: 600;
    min-height: 28px;
    flex-wrap: wrap
}

.thinking-state i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .25;
    animation: thinkingPulse 1.2s infinite
}

.thinking-state i:nth-child(2) {
    animation-delay: .15s
}

.thinking-state i:nth-child(3) {
    animation-delay: .3s
}

.stop-stream-btn {
    padding: 8px 12px;
    border-radius: 999px;
    border-color: rgba(255, 59, 48, .28);
    background: rgba(255, 59, 48, .08);
    color: var(--danger);
    font-weight: 700
}

.stop-stream-btn:hover {
    background: rgba(255, 59, 48, .14);
    box-shadow: 0 0 0 4px rgba(255, 59, 48, .1)
}

.msg-wrap.streaming .msg.assistant {
    border-color: rgba(46, 125, 50, .25);
    box-shadow: 0 18px 50px rgba(32, 90, 54, .12)
}

.tool-inline-result {
    width: 100%
}

.tool-card {
    display: grid;
    gap: 14px;
    border: 1px solid rgba(229, 221, 210, .98);
    border-radius: 24px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(247, 249, 255, .98));
    box-shadow: 0 16px 40px rgba(17, 17, 17, .06);
    border: 1px solid rgba(209, 213, 219, .66)
}

.tool-card-title {
    font-weight: 800;
    color: var(--text)
}

.tool-card .hint {
    color: var(--muted);
    font-size: 13px;
    margin: 0
}

.task-state--pending {
    border-color: rgba(255, 149, 0, .32);
    background: linear-gradient(180deg, rgba(255, 245, 232, .98), rgba(255, 255, 255, .98))
}

.task-state--failed {
    border-color: rgba(255, 59, 48, .28);
    background: linear-gradient(180deg, rgba(255, 242, 241, .98), rgba(255, 255, 255, .98))
}

.task-state--timeout {
    border-color: rgba(255, 59, 48, .42);
    background: linear-gradient(180deg, rgba(255, 235, 233, .98), rgba(255, 255, 255, .98))
}

.video-result-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center
}

.task-state strong {
    display: block;
    margin-bottom: 4px
}

.image-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px
}

.image-result-grid figure,
.video-result {
    margin: 0;
    display: grid;
    gap: 10px
}


.image-result-grid img,
.video-result video,
.js-preview-image {
    width: 100%;
    max-height: 720px;
    object-fit: contain;
    border-radius: 18px;
    background: #111;
    border: 1px solid var(--line-strong)
}

.js-preview-image {
    cursor: zoom-in;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease
}

.js-preview-image:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, .18);
    border-color: rgba(99, 102, 241, .42)
}

body.image-preview-open {
    overflow: hidden
}

.image-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-lightbox);
    display: grid;
    place-items: center;
    padding: max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overflow: hidden;
    touch-action: none
}

.image-preview-overlay[hidden] {
    display: none
}

.image-preview-overlay__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(3, 7, 18, .84);
    backdrop-filter: blur(8px)
}

.image-preview-overlay__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 1280px);
    height: min(100%, 92dvh);
    display: grid;
    place-items: center;
    gap: 12px;
    overflow: hidden;
    touch-action: none;
    cursor: zoom-in
}

.image-preview-overlay__image {
    max-width: 96vw;
    max-height: min(92vh, 92dvh);
    object-fit: contain;
    border-radius: 20px;
    background: #0b1220;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .48);
    border: 1px solid rgba(255, 255, 255, .12);
    transform-origin: center center;
    transform: translate3d(0, 0, 0) scale(1);
    transition: transform .18s var(--ease);
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
    will-change: transform
}

.image-preview-overlay__image.is-zoomed {
    cursor: grab;
    transition: none
}

.image-preview-overlay__dialog.is-dragging,
.image-preview-overlay__dialog.is-dragging .image-preview-overlay__image {
    cursor: grabbing
}

.image-preview-overlay__close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, .94);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .32)
}

@media (max-width: 640px) {
    .image-preview-overlay {
        padding: max(10px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left))
    }

    .image-preview-overlay__dialog {
        width: 100%;
        height: min(100%, 100dvh)
    }

    .image-preview-overlay__image {
        max-width: 100%;
        max-height: calc(100dvh - 20px);
        border-radius: 14px
    }

    .image-preview-overlay__close {
        top: max(10px, env(safe-area-inset-top));
        right: max(10px, env(safe-area-inset-right))
    }
}

.image-preview-overlay__close:hover {
    background: rgba(30, 41, 59, .98)
}

.image-preview-overlay__close:focus-visible,
.js-preview-image:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 2px
}

.video-result video {
    aspect-ratio: 16 / 9
}

.image-result-grid figcaption,
.tool-card-meta,
.video-result a {
    font-size: 13px
}

.tool-raw {
    border-top: 1px dashed rgba(215, 201, 185, .9);
    padding-top: 10px;
    color: var(--muted)
}

.tool-raw summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700
}

.tool-raw pre,
.result-card pre {
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    max-height: 360px;
    font-size: 12px
}

.code-card {
    display: grid;
    gap: 0;
    border: 1px solid #1e2a36;
    border-radius: 20px;
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 16px 32px rgba(15, 23, 42, .24)
}

.code-card.is-streaming {
    border-color: rgba(34, 197, 94, .34);
    box-shadow: 0 18px 36px rgba(15, 23, 42, .3)
}

.code-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #172033, #111827);
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.code-card-head span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #cbd5e1;
    overflow-wrap: anywhere
}

.code-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.code-run,
.code-share,
.code-download,
.code-copy,
.code-expand-toggle,
.code-wrap-toggle {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    color: #e5edf5;
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1)
}

.code-run:hover,
.code-run:focus,
.code-share:hover,
.code-share:focus,
.code-download:hover,
.code-download:focus,
.code-copy:hover,
.code-copy:focus,
.code-expand-toggle:hover,
.code-expand-toggle:focus,
.code-wrap-toggle:hover,
.code-wrap-toggle:focus {
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .08)
}

.code-card-body {
    max-height: 320px;
    overflow: auto;
    background: #0f172a
}

.code-card-body pre {
    margin: 0;
    padding: 16px 18px;
    color: #e5edf5;
    font-size: 13px;
    line-height: 1.7;
    overflow: visible
}

.code-card-body code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre;
    display: block;
    min-width: 100%
}

.code-card.is-expanded .code-card-body {
    max-height: 72vh
}

.code-card.is-expanded .code-card-body pre {
    max-height: none
}

.code-card-body::-webkit-scrollbar {
    width: 10px;
    height: 10px
}

.code-card-body::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .35);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box
}

body.dialog-open {
    overflow: hidden
}

body.share-selection-active .composer {
    display: none
}

body.share-selection-active .messages {
    padding-bottom: 140px
}

.share-selection-chrome {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-popover)
}

.share-selection-topbar,
.share-selection-bottombar {
    width: min(920px, calc(100vw - 24px));
    margin: 0 auto;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(226, 232, 240, .94);
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 36px rgba(15, 23, 42, .12);
    backdrop-filter: blur(16px)
}

.share-selection-topbar {
    margin-top: 12px
}

.share-selection-bottombar {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom));
    transform: translateX(-50%)
}

.share-selection-summary {
    color: #475569;
    font-size: 14px;
    font-weight: 600
}

.share-selection-title {
    display: grid;
    gap: 2px;
    min-width: 0;
    text-align: center
}

.share-selection-title span,
.share-selection-summary small {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4
}

.share-selection-summary {
    display: grid;
    gap: 2px
}

.share-selection-title span.is-error,
.share-selection-summary small.is-error {
    color: #b91c1c
}

.preview-share-dialog {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: 20px;
    overflow-y: auto;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(10px)
}

.message-share-dialog-summary {
    display: grid;
    gap: 12px;
    margin-bottom: 8px;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fafc, #f3f6fb);
    border: 1px solid rgba(226, 232, 240, .9)
}

.message-share-dialog-title {
    font-size: 19px;
    font-weight: 800;
    color: #0f172a
}

.message-share-dialog-count,
.message-share-dialog-empty {
    color: #64748b;
    font-size: 13px
}

.message-share-dialog-item {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, .92);
    background: rgba(255, 255, 255, .96)
}

.message-share-dialog-item strong {
    font-size: 13px
}

.message-share-dialog-item span {
    color: #334155;
    font-size: 14px;
    line-height: 1.7
}

.message-share-dialog-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px
}

.message-share-dialog-actions-grid .ghost,
.message-share-dialog-actions-grid .primary {
    min-height: 44px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700
}

@media (max-width: 768px) {
    button,
    input,
    textarea,
    select,
    a,
    [role="button"] {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        touch-action: manipulation
    }

    input,
    textarea,
    [contenteditable="true"] {
        -webkit-touch-callout: default;
        -webkit-user-select: auto;
        user-select: auto
    }

    .share-selection-topbar,
    .share-selection-bottombar {
        width: calc(100vw - 20px);
        border-radius: 16px;
        padding: 10px 12px
    }

    .share-selection-topbar strong {
        font-size: 16px
    }

    .message-share-dialog-actions-grid {
        grid-template-columns: 1fr
    }

    .msg-wrap.share-select-mode {
        padding-left: 52px
    }

    .msg-share-check {
        left: 8px;
        top: 36px;
        width: 26px;
        height: 26px
    }
}

@media (max-width: 520px) {
    .share-selection-topbar,
    .share-selection-bottombar {
        width: calc(100vw - 16px)
    }

    .share-selection-bottombar {
        flex-direction: column;
        align-items: stretch
    }
}

.preview-share-dialog-card {
    width: min(560px, 100%);
    max-height: calc(100vh - 40px);
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 18px;
    padding: 22px;
    border-radius: 24px;
    background: #fff;
    color: var(--text);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28)
}

.preview-share-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px
}

.preview-share-dialog-head strong {
    display: block;
    font-size: 18px;
    font-weight: 800
}

.preview-share-dialog-head p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6
}

.preview-share-dialog-body {
    min-height: 0;
    display: grid;
    gap: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px
}

.preview-share-dialog-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text)
}

.preview-share-dialog-url {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fafc;
    color: var(--text);
    font-size: 13px
}

.preview-share-dialog-expire,
.preview-share-dialog-tip {
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted)
}

.preview-share-dialog-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px
}

.preview-share-dialog[hidden] {
    display: none !important
}

.ppt-workflow-dialog {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(12px)
}

.ppt-workflow-dialog[hidden] {
    display: none !important
}

.ppt-workflow-dialog-card {
    width: min(1400px, 100%);
    max-height: calc(100vh - 36px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 18px;
    padding: 22px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,243,235,.96));
    color: var(--text);
    box-shadow: 0 32px 80px rgba(15, 23, 42, .24)
}

.ppt-workflow-dialog-head,
.ppt-task-detail-head,
.ppt-task-section-head,
.ppt-workflow-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px
}

.ppt-workflow-dialog-head strong,
.ppt-task-detail-head strong,
.ppt-workflow-section-head strong {
    display: block;
    font-size: 18px;
    font-weight: 800
}

.ppt-workflow-dialog-head p,
.ppt-task-detail-head p,
.ppt-workflow-mode,
.ppt-task-section-head span,
.ppt-task-item-subtitle,
.ppt-task-inline-message,
.ppt-step-card p,
.ppt-step-card-meta,
.ppt-preview-slide-subtitle,
.ppt-preview-slide-notes,
.ppt-preview-slide-empty,
.ppt-task-detail-empty {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6
}

.ppt-workflow-dialog-head-actions,
.ppt-task-detail-actions,
.ppt-workflow-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.ppt-workflow-dialog-body {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
    gap: 18px
}

.ppt-workflow-form,
.ppt-workflow-task-shell,
.ppt-task-detail,
.ppt-task-list,
.ppt-step-list,
.ppt-preview-grid {
    min-height: 0
}

.ppt-workflow-form {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(94, 73, 53, .12);
    background: rgba(255,255,255,.86);
    overflow: auto
}

.ppt-workflow-form label {
    display: grid;
    gap: 8px
}

.ppt-workflow-form span {
    font-size: 13px;
    font-weight: 700;
    color: var(--text)
}

.ppt-workflow-form input,
.ppt-workflow-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(94, 73, 53, .12);
    border-radius: 14px;
    background: #fff;
    color: var(--text)
}

.ppt-workflow-form textarea {
    resize: vertical;
    min-height: 140px
}

.ppt-workflow-inline-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
}

.ppt-workflow-checkbox {
    display: flex !important;
    align-items: center;
    gap: 10px
}

.ppt-workflow-checkbox input {
    width: 18px;
    height: 18px;
    margin: 0
}

.ppt-workflow-form-status {
    min-height: 22px;
    font-size: 13px;
    line-height: 1.5
}

.ppt-workflow-form-status[data-tone="error"] {
    color: #b42318
}

.ppt-workflow-form-status[data-tone="success"] {
    color: #027a48
}

.ppt-workflow-task-shell {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 18px
}

.ppt-task-list,
.ppt-task-detail {
    border-radius: 22px;
    border: 1px solid rgba(94, 73, 53, .12);
    background: rgba(255,255,255,.88)
}

.ppt-task-list {
    padding: 12px;
    overflow: auto;
    display: grid;
    align-content: start;
    gap: 10px
}

.ppt-task-item {
    text-align: left;
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(94, 73, 53, .12);
    background: #fff;
    color: var(--text);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease
}

.ppt-task-item:hover,
.ppt-task-item.is-active {
    border-color: rgba(62, 140, 255, .35);
    box-shadow: 0 14px 24px rgba(15, 23, 42, .08);
    transform: translateY(-1px)
}

.ppt-task-item-title,
.ppt-task-item-meta {
    font-size: 13px;
    font-weight: 700
}

.ppt-task-item-subtitle,
.ppt-task-empty {
    font-size: 12px;
    color: var(--muted)
}

.ppt-task-detail {
    padding: 18px;
    overflow: auto;
    display: grid;
    align-content: start;
    gap: 16px
}

 .ppt-task-inline-message,
.ppt-task-guidance,
.ppt-task-guidance-block,
.ppt-task-meta-card,
.ppt-step-card,
.ppt-preview-slide,
.ppt-task-detail-empty {
    padding: 14px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(94, 73, 53, .1)
}

.ppt-collapsible {
    display: grid;
    gap: 10px
}

.ppt-collapsible-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.ppt-collapsible-head strong {
    font-size: 13px;
    font-weight: 800;
    color: var(--text)
}

.ppt-collapsible-toggle {
    flex: none;
    padding: 6px 12px;
    border-radius: 999px
}

.ppt-collapsible-body {
    max-height: 132px;
    overflow: hidden;
    position: relative
}

.ppt-collapsible-body pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word
}

.ppt-collapsible-body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.96))
}

.ppt-collapsible.is-expanded .ppt-collapsible-body {
    max-height: 99999px;
    overflow: visible
}

.ppt-collapsible.is-expanded .ppt-collapsible-body::after {
    display: none
}

.ppt-task-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px
}

.ppt-task-meta-card span {
    display: block;
    font-size: 12px;
    color: var(--muted)
}

.ppt-task-meta-card strong {
    display: block;
    margin-top: 6px;
    font-size: 14px
}

.ppt-task-guidance strong,
.ppt-task-section strong {
    display: block;
    margin-bottom: 8px
}

.ppt-task-guidance pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text)
}

.ppt-step-list,
.ppt-preview-grid {
    display: grid;
    gap: 12px
}

.ppt-step-card-head,
.ppt-preview-slide-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px
}

.ppt-step-card-head span,
.ppt-preview-slide-head span {
    font-size: 12px;
    color: var(--muted)
}

.ppt-step-card.is-running {
    border-color: rgba(62, 140, 255, .32);
    background: rgba(62,140,255,.05)
}

.ppt-step-card.is-completed {
    border-color: rgba(2, 122, 72, .24);
    background: rgba(2,122,72,.05)
}

.ppt-step-card.is-failed {
    border-color: rgba(180, 35, 24, .25);
    background: rgba(180,35,24,.06)
}

.ppt-step-card-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 10px
}

.ppt-step-card-actions .ghost {
    min-width: 88px
}

.ppt-preview-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
}

.ppt-preview-slide ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px
}

.ppt-preview-slide-canvas {
    margin-top: 12px;
    padding: 10px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #eff6ff, #dbeafe)
}

.ppt-preview-slide-canvas.is-svg {
    background: linear-gradient(180deg, #dbeafe, #e0e7ff)
}

.ppt-preview-slide-canvas img,
.ppt-preview-slide img {
    width: 100%;
    display: block;
    border-radius: 14px;
    background: #0f172a;
    aspect-ratio: 16 / 9;
    object-fit: contain
}

.ppt-preview-slide-caption {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--muted)
}

.ppt-task-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px
}

.ppt-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, .35);
    background: rgba(248, 250, 252, .95);
    color: #475569;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap
}

.ppt-status-badge.is-queued {
    border-color: rgba(148, 163, 184, .35);
    background: rgba(248, 250, 252, .95);
    color: #475569
}

.ppt-status-badge.is-running {
    border-color: rgba(59, 130, 246, .28);
    background: rgba(219, 234, 254, .9);
    color: #1d4ed8
}

.ppt-status-badge.is-completed {
    border-color: rgba(16, 185, 129, .22);
    background: rgba(220, 252, 231, .92);
    color: #047857
}

.ppt-status-badge.is-failed,
.ppt-status-badge.is-cancelled {
    border-color: rgba(239, 68, 68, .22);
    background: rgba(254, 242, 242, .96);
    color: #b91c1c
}

.ppt-status-badge-spinner {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: pptStatusSpin .7s linear infinite
}

.ppt-preview-slide.is-expandable {
    cursor: zoom-in;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
}

.ppt-preview-slide.is-expandable:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, .25);
    box-shadow: 0 14px 24px rgba(15, 23, 42, .08)
}

.ppt-preview-dialog {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-strong);
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(15, 23, 42, .65);
    backdrop-filter: blur(10px)
}

.ppt-preview-dialog[hidden] {
    display: none !important
}

.ppt-preview-dialog-card {
    width: min(920px, 100%);
    max-height: calc(100vh - 56px);
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
    overflow: auto
}

.ppt-preview-dialog-head,
.ppt-preview-dialog-meta,
.ppt-preview-dialog-caption,
.ppt-preview-dialog-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px
}

.ppt-preview-dialog-head strong,
.ppt-preview-dialog-caption strong {
    display: block;
    font-size: 18px;
    font-weight: 800
}

.ppt-preview-dialog-head p,
.ppt-preview-dialog-caption span,
.ppt-preview-dialog-subtitle,
.ppt-preview-dialog-notes {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6
}

.ppt-preview-dialog-meta {
    align-items: center;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 12px
}

.ppt-preview-dialog-stage {
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, #dbeafe, #e0e7ff);
    max-height: min(62vh, 640px)
}

.ppt-preview-dialog-stage img {
    width: 100%;
    display: block;
    background: #0f172a;
    aspect-ratio: 16 / 9;
    object-fit: contain
}

.ppt-preview-dialog-bullets {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px
}

.ppt-preview-dialog-actions {
    justify-content: flex-end;
    flex-wrap: wrap
}

.ppt-preview-dialog-bullets,
.ppt-preview-dialog-notes {
    max-height: 120px;
    overflow: auto
}

@keyframes pptStatusSpin {
    to {
        transform: rotate(360deg)
    }
}

@media (max-width: 1180px) {
    .ppt-workflow-dialog-body,
    .ppt-workflow-task-shell {
        grid-template-columns: 1fr
    }
}

@media (max-width: 760px) {
    .ppt-workflow-dialog {
        padding: 10px
    }

    .ppt-workflow-dialog-card {
        padding: 16px;
        max-height: calc(100vh - 20px)
    }

    .ppt-workflow-inline-grid,
    .ppt-task-meta-grid,
    .ppt-preview-grid {
        grid-template-columns: 1fr
    }

    .plan-composer-state {
        padding: 0 10px 8px
    }

    .plan-composer-chip {
        max-width: 100%;
        flex-wrap: wrap
    }

    .plan-prompt-actions {
        display: grid;
        grid-template-columns: 1fr
    }

    .plan-checklist summary {
        padding: 12px 10px
    }

    .plan-checklist ol {
        padding: 0 10px 10px 10px
    }
}

.composer {
    position: sticky;
    bottom: 0;
    z-index: 15;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "input actions";
    align-items: end;
    column-gap: 8px;
    row-gap: 0;
    padding: 8px 14px 10px;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(18px)
}

.mobile-composer-shell {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
}

.mobile-composer-plus,
.mobile-voice-input-btn,
.mobile-voice-mode-btn {
    display: none !important
}

.mobile-voice-hold-btn {
    display: none !important
}

.composer textarea {
    grid-area: input;
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0
}

.composer-actions {
    grid-area: actions;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    align-self: end;
    gap: 6px;
    width: auto;
    min-width: max-content
}

.composer-submit-btn {
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 14px;
    font-size: 18px;
    line-height: 1;
    display: inline-grid;
    place-items: center
}

.voice-call-trigger svg,
.mobile-voice-input-btn svg,
.composer-submit-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    pointer-events: none
}

.composer-submit-btn.is-stop {
    background: var(--danger);
    border-color: var(--danger)
}

.slash-skill-picker {
    position: absolute;
    left: 20px;
    right: 76px;
    bottom: calc(100% + 8px);
    z-index: 30;
    max-height: min(360px, 48vh);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 8px;
    border: 1px solid rgba(94, 73, 53, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 44px rgba(43, 31, 20, .16);
    backdrop-filter: blur(18px);
    animation: panelIn .18s var(--ease) both
}

.slash-skill-picker[hidden] {
    display: none !important
}

.plan-composer-state {
    position: sticky;
    bottom: calc(100% + 8px);
    z-index: 16;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding: 0 14px 8px;
    pointer-events: none
}

.plan-composer-state[hidden] {
    display: none !important
}

.plan-composer-chip {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(100%, 780px);
    padding: 8px 10px;
    border: 1px solid rgba(79, 70, 229, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
    color: var(--text)
}

.plan-composer-chip strong {
    font-size: 12px;
    font-weight: 800;
    color: #4f46e5
}

.plan-composer-chip span,
.plan-composer-chip small {
    font-size: 12px;
    color: var(--muted)
}

.plan-composer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, .18);
    background: rgba(255, 255, 255, .92);
    color: var(--muted);
    cursor: pointer
}

.plan-workflow-card {
    display: grid;
    gap: 10px
}

.plan-summary-card,
.plan-prompt-card,
.plan-checklist {
    border: 1px solid rgba(203, 213, 225, .9);
    border-radius: 14px;
    background: rgba(248, 250, 252, .94)
}

.plan-summary-card,
.plan-prompt-card {
    padding: 12px
}

.plan-summary-head,
.plan-prompt-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px
}

.plan-summary-head strong,
.plan-prompt-head strong {
    font-size: 14px;
    color: var(--text)
}

.plan-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 800;
    color: #4f46e5;
    text-transform: uppercase
}

.plan-status-pill,
.plan-prompt-head span {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(79, 70, 229, .08);
    color: #4f46e5;
    font-size: 11px;
    font-weight: 700
}

.plan-summary-card p,
.plan-prompt-card p {
    margin: 0;
    color: var(--muted);
    white-space: pre-wrap
}

.plan-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--muted)
}

.plan-checklist {
    padding: 0;
    overflow: hidden
}

.plan-checklist summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px;
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--text)
}

.plan-checklist summary::-webkit-details-marker {
    display: none
}

.plan-checklist ol {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0 12px 12px 12px;
    list-style: none
}

.plan-checklist li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 10px;
    align-items: start
}

.plan-task-status {
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .55)
}

.plan-checklist li[data-status="in_progress"] .plan-task-status {
    background: rgba(59, 130, 246, .9)
}

.plan-checklist li[data-status="completed"] .plan-task-status {
    background: rgba(34, 197, 94, .9)
}

.plan-checklist li[data-status="blocked"] .plan-task-status {
    background: rgba(239, 68, 68, .9)
}

.plan-checklist li strong {
    display: block;
    font-size: 13px;
    color: var(--text)
}

.plan-checklist li p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--muted)
}

.plan-option-list {
    display: grid;
    gap: 8px
}

.plan-option-item {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(203, 213, 225, .9);
    border-radius: 12px;
    background: rgba(255, 255, 255, .92);
    cursor: pointer
}

.plan-option-item input {
    margin: 2px 0 0
}

.plan-option-item span {
    display: grid;
    gap: 4px
}

.plan-option-item small {
    font-size: 12px;
    color: var(--muted)
}

.plan-other-input {
    width: 100%;
    min-height: 72px;
    resize: vertical;
    padding: 10px 12px;
    border: 1px solid rgba(203, 213, 225, .9);
    border-radius: 12px;
    background: rgba(255, 255, 255, .94);
    color: var(--text)
}

.plan-prompt-result {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(79, 70, 229, .06);
    color: var(--muted);
    font-size: 12px
}

.plan-prompt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.plan-prompt-card.is-readonly {
    opacity: .9
}

.plan-prompt-card.is-readonly .plan-option-item {
    cursor: default
}

.slash-skill-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 6px 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800
}

.slash-skill-header small {
    font-size: 11px;
    color: var(--muted);
    font-weight: 700
}

.slash-skill-list {
    display: grid;
    gap: 4px
}

.slash-skill-option {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer
}

.slash-skill-option:hover,
.slash-skill-option.is-active {
    background: rgba(34, 139, 126, .1)
}

.slash-skill-option-main {
    min-width: 0;
    display: grid;
    gap: 3px
}

.slash-skill-option-main strong,
.slash-skill-option-main small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.slash-skill-option-main strong {
    font-size: 13px;
    line-height: 1.25
}

.slash-skill-option-main small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35
}

.slash-skill-option-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    max-width: 150px
}

.slash-skill-option-meta span {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 3px 7px;
    border: 1px solid rgba(34, 139, 126, .2);
    border-radius: 999px;
    background: rgba(34, 139, 126, .08);
    color: #16665d;
    font-size: 11px;
    font-weight: 800
}

.slash-skill-option-meta span.is-workflow {
    color: #16665d;
    background: rgba(34, 139, 126, .10);
    border-color: rgba(34, 139, 126, .22);
}

.slash-skill-option-meta span.is-conversation {
    color: #7c3aed;
    background: rgba(124, 58, 237, .10);
    border-color: rgba(124, 58, 237, .18);
}

.slash-skill-empty {
    padding: 12px;
    color: var(--muted);
    font-size: 13px
}

.slash-skill-chip-bar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0 0 8px;
    overflow: hidden
}

.slash-skill-chip-bar[hidden] {
    display: none !important
}

.slash-skill-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    gap: 7px;
    padding: 5px 8px;
    border: 1px solid rgba(34, 139, 126, .18);
    border-radius: 999px;
    background: rgba(34, 139, 126, .07);
    color: var(--text);
    font-size: 12px;
    line-height: 1.2
}

.slash-skill-chip strong {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.slash-skill-chip-kicker,
.slash-skill-chip span:not(.slash-skill-chip-kicker) {
    color: #16665d;
    font-weight: 800
}

.slash-skill-chip-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(34, 139, 126, .12);
    font-size: 10px
}

.slash-skill-chip span:not(.slash-skill-chip-kicker) {
    min-width: 0;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px
}

.slash-skill-chip-clear {
    width: 20px;
    min-width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(22, 102, 93, .54);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    box-shadow: none;
    opacity: .72;
    transition: background .16s var(--ease), color .16s var(--ease), opacity .16s var(--ease), transform .16s var(--ease)
}

.slash-skill-chip-clear svg {
    width: 12px;
    height: 12px;
    display: block
}

.slash-skill-chip-clear:hover,
.slash-skill-chip-clear:focus-visible {
    background: rgba(34, 139, 126, .14);
    color: #0f5a52;
    opacity: 1
}

.slash-skill-chip-clear:active {
    background: rgba(34, 139, 126, .18);
    color: #0f5a52;
    opacity: 1;
    transform: scale(.96)
}

.multimodal-badge {
    margin: 0 20px 10px;
    padding: 10px 12px;
    border: 1px solid rgba(94, 73, 53, .14);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,248,238,.9));
    box-shadow: 0 10px 22px rgba(82, 63, 40, .06);
    display: grid;
    gap: 8px;
    animation: panelIn .24s var(--ease) both;
}

.multimodal-badge[hidden] {
    display: none !important;
}

.multimodal-badge.is-hiding {
    opacity: 0;
    transform: translateY(6px) scale(.985);
    transition: opacity .16s var(--ease), transform .16s var(--ease);
}

.msg-content .ghost {
    margin-top: 10px;
}

.multimodal-badge-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.multimodal-badge-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--text)
}

.multimodal-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.multimodal-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    font-size: 12px;
    color: var(--text);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .04)
}

.multimodal-chip.image { border-color: rgba(62, 140, 255, .25); background: rgba(62,140,255,.08) }
.multimodal-chip.video { border-color: rgba(160, 91, 255, .25); background: rgba(160,91,255,.08) }
.multimodal-chip.audio { border-color: rgba(255, 122, 89, .25); background: rgba(255,122,89,.08) }
.multimodal-chip.ref { border-color: rgba(123, 90, 36, .25); background: rgba(123,90,36,.08) }

.multimodal-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    max-height: 280px;
    overflow: auto
}

.media-preview {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(94, 73, 53, .12);
    box-shadow: 0 12px 24px rgba(82, 63, 40, .06);
    overflow: hidden
}

.media-preview-title {
    font-size: 12px;
    line-height: 1.35;
    color: var(--muted);
    padding-right: 48px
}

.media-preview-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    font-size: 12px
}

.media-preview img,
.media-preview video {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
    background: #111
}

.media-preview audio {
    width: 100%
}

.media-preview-file {
    min-height: 56px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px dashed rgba(94, 73, 53, .18);
    color: var(--muted);
    background: rgba(255,248,238,.7);
    max-height: 120px;
    overflow: auto;
    padding: 8px 10px;
    text-align: left
}

.media-preview--document img {
    max-height: 120px;
    object-fit: contain;
    background: rgba(15, 23, 42, .04)
}

.media-preview--document-compact {
    gap: 6px
}

.media-preview--document-compact .media-preview-title {
    padding-right: 0
}

.batch-panel {
    position: fixed;
    inset: 18px;
    z-index: var(--z-modal);
    display: none;
    grid-template-rows: auto 1fr;
    gap: 16px;
    padding: 18px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,243,235,.96));
    border: 1px solid rgba(94, 73, 53, .14);
    box-shadow: 0 40px 80px rgba(36, 28, 18, .22);
    backdrop-filter: blur(24px);
    overflow: auto;
    min-width: 0
}

.batch-panel.open {
    display: grid
}

.batch-filter {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(94, 73, 53, .12);
    background: #fff;
    margin-bottom: 10px
}

.batch-upload-dropzone {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px dashed rgba(94, 73, 53, .18);
    background: linear-gradient(180deg, rgba(255,248,238,.82), rgba(255,255,255,.92));
    transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease)
}

.batch-upload-dropzone.is-dragover {
    border-color: rgba(104, 73, 31, .55);
    background: linear-gradient(180deg, rgba(255,240,220,.96), rgba(255,255,255,.98));
    transform: translateY(-1px)
}

.batch-upload-dropzone-copy {
    display: grid;
    gap: 2px;
    color: var(--muted)
}

.batch-upload-queue {
    display: grid;
    gap: 8px
}

.batch-queue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(245,238,227,.8)
}

.batch-file-badge,
.batch-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(94,73,53,.08);
    color: var(--text)
}

.batch-status.in_queue,
.batch-status.pending {
    background: rgba(112, 89, 43, .14)
}

.batch-status.in_progress,
.batch-status.running {
    background: rgba(64, 111, 212, .14)
}

.batch-status.completed,
.batch-status.succeeded {
    background: rgba(57, 148, 89, .14)
}

.batch-status.failed,
.batch-status.cancelled,
.batch-status.expired {
    background: rgba(206, 70, 70, .14)
}

.batch-panel.open {
    display: grid
}

.batch-panel-head,
.batch-card-head,
.batch-upload-row,
.batch-field {
    display: flex;
    gap: 12px
}

.batch-panel-head {
    align-items: flex-start;
    justify-content: space-between
}

.batch-panel-body {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 16px;
    min-height: 0
}

.batch-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(94, 73, 53, .12);
    box-shadow: 0 16px 40px rgba(36, 28, 18, .08)
}

.batch-card-head {
    align-items: center;
    justify-content: space-between
}

.batch-upload-row {
    align-items: center
}

.batch-field {
    flex-direction: column
}

.batch-field span {
    font-size: 12px;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em
}

.batch-file-list {
    display: grid;
    gap: 10px;
    overflow: auto;
    max-height: 58vh
}

.batch-file-item {
    text-align: left;
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(94, 73, 53, .12);
    background: linear-gradient(180deg, #fff, rgba(255,249,240,.88));
    cursor: pointer
}

.batch-file-item strong {
    font-size: 14px
}

.batch-file-item small {
    color: var(--muted)
}

.batch-current {
    display: grid;
    gap: 10px;
    overflow: auto;
    max-height: 58vh
}

.batch-kv {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(245,238,227,.8)
}

.batch-kv span {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .06em;
    text-transform: uppercase
}

.batch-json {
    margin: 0;
    padding: 14px;
    border-radius: 16px;
    background: #101010;
    color: #f7f2ea;
    font-size: 12px;
    overflow: auto;
    max-height: 280px
}

@media (max-width: 1180px) {
    .batch-panel-body {
        grid-template-columns: 1fr;
    }

    .batch-panel {
        inset: 12px;
        padding: 14px
    }
    .memory-panel {
        inset: auto 12px 12px 12px;
        width: auto;
        max-height: calc(100vh - 24px)
    }
}

.composer textarea {
    flex: 1;
    resize: none;
    min-height: 38px;
    max-height: 120px;
    padding-top: 8px;
    padding-bottom: 8px;
    background: #fff
}

.composer.is-dragover {
    border-top-color: rgba(45, 125, 255, .45);
    box-shadow: 0 -14px 34px rgba(45, 125, 255, .12), 0 -8px 28px rgba(17,17,17,.05);
}

.composer.is-dragover textarea {
    border-color: rgba(45, 125, 255, .45);
    background: rgba(248, 251, 255, .96);
}

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--bg) !important
}

.auth-card {
    width: min(520px, 100%);
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: rgba(255, 255, 255, .9);
    box-shadow: var(--shadow-lg);
    animation: panelIn .45s var(--ease) both;
    backdrop-filter: blur(14px)
}

.auth-hero {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,248,238,.92));
    margin-bottom: 18px
}

.auth-hero-copy {
    display: grid;
    gap: 6px;
    min-width: 0
}

.auth-head {
    display: grid;
    gap: 8px;
    margin: 10px 0 18px
}

.auth-head p {
    color: var(--muted);
    line-height: 1.65
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px
}

.auth-tab {
    background: var(--panel-2);
    border-color: var(--line)
}

.auth-tab.active {
    background: #111;
    color: #fff;
    border-color: #111
}

.auth-panel {
    display: none;
    gap: 12px
}

.auth-panel.active-panel {
    display: grid
}

.auth-login-stack {
    display: grid;
    gap: 12px
}

.auth-password-panel {
    display: grid;
    gap: 12px
}

.auth-qr-switch {
    width: 100%
}

.auth-qr-panel {
    display: grid;
    gap: 14px;
    min-height: 0
}

.auth-qr-panel[hidden] {
    display: none !important
}

.auth-qr-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start
}

.auth-qr-panel-head p {
    margin: 4px 0 0;
    color: var(--muted);
    line-height: 1.6;
    font-size: 13px
}

.auth-qr-back {
    min-height: 0;
    padding: 8px 12px
}

.auth-qr-code-wrap {
    display: grid;
    place-items: center;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.88);
    border: 1px solid var(--line)
}

.auth-qr-code {
    width: 220px;
    min-height: 220px;
    display: grid;
    place-items: center;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(15,23,42,.08)
}

.auth-qr-code canvas,
.auth-qr-code img {
    display: block;
    width: 100%;
    height: auto
}

.auth-qr-status {
    margin: 0;
    text-align: center;
    color: var(--muted);
    line-height: 1.7
}

.auth-qr-actions {
    display: flex;
    justify-content: center
}

.auth-qr-actions .secondary {
    min-width: 132px
}

.auth-qr-status.is-error {
    color: var(--danger)
}

.auth-qr-status.is-success {
    color: #0f9f6e
}

.captcha-row {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center
}

.captcha-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    min-height: 52px
}

.captcha-image-wrap img {
    display: block;
    width: 100%;
    height: 52px;
    object-fit: cover;
    cursor: pointer
}

.auth-divider {
    position: relative;
    display: grid;
    place-items: center;
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 12px
}

.auth-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line)
}

.auth-divider span {
    position: relative;
    z-index: 1;
    padding: 0 10px;
    background: rgba(255, 255, 255, .9)
}

.card-surface {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel-2);
    animation: msgIn .28s var(--ease) both
}

.message {
    color: var(--danger);
    min-height: 1.4em;
    margin-top: 12px
}

.qq-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 18px;
    width: 100%;
    min-height: 0;
    border-radius: 8px;
    background: #18b2e6;
    color: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 8px 18px rgba(24, 178, 230, .22);
    align-self: stretch;
    overflow: hidden
}

.qq-login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(24, 178, 230, .3);
    color: #fff
}

.qq-login-icon {
    display: block;
    width: 76px;
    height: 24px;
    object-fit: contain;
    background: transparent;
    flex: 0 0 auto
}

.auth-hint {
    margin: -4px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    text-align: center
}

.admin-auth-page .admin-auth-card {
    max-width: 420px
}

.admin-shell {
    padding: 24px;
    max-width: 1600px;
    margin: auto;
    min-height: 100vh
}

.admin-topbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 0 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line)
}

.topbar-left {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 0
}

.topbar-left h1 {
    font-size: 17px
}

.breadcrumb {
    color: var(--muted);
    font-size: 12px
}

.admin-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    transition: grid-template-columns .28s var(--ease)
}

.admin-sidebar {
    position: sticky;
    top: 20px;
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
    transition: padding .28s var(--ease), transform .28s var(--ease), opacity .28s var(--ease)
}

.sidebar-note {
    font-size: 10px;
    color: var(--muted);
    line-height: 1.4;
    padding: 4px 2px
}

.nav-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
    border: 1px solid var(--line);
    padding: 10px 12px;
    border-radius: 12px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    min-height: 44px;
    box-shadow: 0 6px 16px rgba(17,17,17,.04);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease)
}

.nav-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(17,17,17,.08);
    border-color: rgba(0, 122, 255, .22)
}

.nav-item.active {
    background: linear-gradient(135deg, #111 0%, #1f2937 100%);
    color: #fff;
    border-color: #111;
    box-shadow: 0 14px 28px rgba(17,17,17,.18)
}

.icon-btn {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 14px
}

.admin-content {
    min-width: 0;
    display: grid;
    gap: 18px
}

.admin-content [data-section-panel] {
    animation: panelIn .28s var(--ease) both
}

.section-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid rgba(196, 199, 207, .56);
    border-radius: 16px;
    background: rgba(255,255,255,.6)
}

.section-subnav-btn {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.68));
    border: 1px solid var(--line);
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(17,17,17,.04)
}

.section-subnav-btn.active {
    background: linear-gradient(135deg, #111 0%, #1f2937 100%);
    color: #fff;
    border-color: #111;
    box-shadow: 0 14px 28px rgba(17,17,17,.18)
}

.is-subview-active {
    animation: panelIn .24s var(--ease) both
}

.admin-hero-copy {
    display: grid;
    gap: 8px;
    min-width: 0
}

.admin-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px
}

.wide {
    grid-column: 1/-1
}

.panel,
.stat {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow);
    animation: panelIn .4s var(--ease) both;
    min-width: 0;
    overflow: hidden;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease)
}

.panel:hover,
.stat:hover,
.provider-card:hover,
.user-card:hover,
.share-card:hover,
.job-grid-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(17,17,17,.10);
    border-color: rgba(0, 122, 255, .14)
}

.stat {
    position: relative;
    isolation: isolate;
    background: linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(248,250,252,.86) 54%, rgba(239,246,255,.78) 100%)
}

.stat small {
    font-size: 12px;
    letter-spacing: .02em
}

.stat b {
    display: block;
    font-size: 24px;
    margin-top: 8px;
    word-break: break-word;
    line-height: 1.15
}

.stat::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(0, 122, 255, .08), transparent 42%);
    pointer-events: none;
    z-index: -1
}

.panel-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 10px
}

.panel-head>div {
    min-width: 0
}

.compact-head {
    margin-bottom: 6px
}

.panel-head h2,
.panel h2 {
    font-size: 15px;
    margin-bottom: 4px;
    line-height: 1.25
}

.panel-head h2,
.panel h2,
.admin-hero h1,
.stat b,
.catalog-card strong,
.row b,
.row small,
.hint,
.message,
.breadcrumb,
.cell-text {
    overflow-wrap: anywhere;
    word-break: break-word
}

.truncate {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.nowrap {
    white-space: nowrap
}

.cell-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0
}

.panel-message {
    max-width: 320px;
    text-align: right;
    justify-self: end
}

.panel-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    gap: 6px;
    flex-wrap: wrap
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px
}

.stats-grid .stat {
    position: relative;
    overflow: hidden
}

.stats-grid .stat::after {
    content: '';
    position: absolute;
    inset: auto -16px -16px auto;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(17, 17, 17, .05), transparent 68%);
    pointer-events: none
}

.toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(196, 199, 207, .56);
    border-radius: 16px;
    background: rgba(255,255,255,.58)
}

.toolbar>* {
    min-width: 0
}

.grid-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px
}

.grid-form>* {
    min-width: 0
}

.grid-form button,
.grid-form label {
    grid-column: 1/-1
}

.table-wrap {
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff
}

.table-head,
.row {
    display: grid;
    gap: 6px;
    align-items: center;
    min-width: 0;
    font-size: 12px
}

.table-head {
    position: sticky;
    top: 0;
    z-index: 2;
}

.table-head > span,
.row > .cell-block {
    min-width: 0;
}

.cell-block {
    min-width: 0;
    display: grid;
    gap: 6px;
    padding: 0;
    align-items: start
}

.cell-label {
    display: none;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted)
}

.cell-value {
    min-width: 0;
    line-height: 1.45;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.cell-block .btn-group {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px
}

.cell-block .btn-group > * {
    flex: 0 0 auto
}

.row:not(.model-grid) {
    align-items: start
}

.table-head {
    padding: 8px 12px;
    background: var(--panel-3);
    border-bottom: 1px solid var(--line);
    font-weight: 700;
    color: #333;
    font-size: 11px;
    min-width: max-content;
}

.table-head span {
    text-transform: none
}

.family-badge {
    font-weight: 700;
    border: 1px solid transparent
}

.family-deepseek { background: #eef7ff; color: #0c4a6e; border-color: #c7e5ff; }
.family-doubao { background: #fff2e8; color: #9a3412; border-color: #ffd6bf; }
.family-qwen { background: #f2f7ff; color: #1d4ed8; border-color: #cfe0ff; }
.family-glm { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.family-claude { background: #fff7ed; color: #b45309; border-color: #fed7aa; }
.family-openai { background: #ecfeff; color: #0f766e; border-color: #b9f3f0; }
.family-llama { background: #fdf2f8; color: #be185d; border-color: #f9c2dd; }
.family-mistral { background: #f0fdf4; color: #15803d; border-color: #c9f2d5; }
.family-gemini { background: #fefce8; color: #a16207; border-color: #fde68a; }
.family-other { background: #f4f4f5; color: #52525b; border-color: #e4e4e7; }

.table-list {
    display: grid;
    gap: 0;
    min-width: max-content;
}

.provider-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1fr);
}

.provider-card,
.user-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(250, 247, 241, .97))
}

.provider-card-head,
.user-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start
}

.provider-card-subtitle,
.user-card-subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: var(--muted);
    overflow-wrap: anywhere
}

.provider-card-body,
.user-card-body {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.provider-card-field,
.user-card-field {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .78)
}

.provider-card-actions,
.user-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.user-card-actions .danger-ghost {
    color: var(--danger);
    border-color: rgba(220, 38, 38, .22);
    background: rgba(255, 241, 242, .82)
}

.user-card-actions .danger-ghost:hover {
    border-color: rgba(220, 38, 38, .4);
    background: rgba(254, 226, 226, .92)
}

.model-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
}

.model-toolbar {
    flex-wrap: wrap;
}

.model-price-bar {
    display: grid;
    grid-template-columns: minmax(220px, 280px) auto minmax(240px, 1fr);
    gap: 12px;
    align-items: end;
    margin: 14px 0 12px;
    padding: 14px 16px;
    border: 1px solid rgba(124, 92, 255, 0.12);
    border-radius: 18px;
    background: rgba(124, 92, 255, 0.04);
}

.model-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 1px solid rgba(196, 199, 207, 0.45);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
}

.model-bulk-bar .hint {
    flex: 1 1 220px;
}

.model-free-toggle > label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    color: var(--text);
    font-weight: 600;
}

.model-price-field {
    min-width: 0;
}

.model-price-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.model-price-badge {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid rgba(196, 199, 207, 0.6);
    background: rgba(255, 255, 255, 0.75);
    color: var(--text);
}

.model-price-badge.success {
    border-color: rgba(15, 118, 110, 0.28);
    background: rgba(15, 118, 110, 0.1);
    color: #0f766e;
}

.model-price-badge.danger {
    border-color: rgba(220, 38, 38, 0.22);
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
}

.model-price-badge.warning {
    border-color: rgba(217, 119, 6, 0.22);
    background: rgba(217, 119, 6, 0.08);
    color: #b45309;
}

.model-price-badge.neutral {
    border-color: rgba(196, 199, 207, 0.6);
    background: rgba(255, 255, 255, 0.75);
    color: var(--text);
}

.model-price-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: center;
}

.model-price-current {
    color: var(--text);
    font-weight: 600;
}

.model-price-summary {
    align-self: auto;
}

.table-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.table-sort-btn.active {
    color: var(--brand);
    font-weight: 700;
}

.table-sort-btn span {
    font-size: 13px;
}

.model-grid {
    display: grid;
    grid-template-columns: 96px 320px 180px 240px 180px 150px 170px;
    column-gap: 0;
    align-items: stretch;
    row-gap: 0;
    width: max-content;
    min-width: 100%;
}

.model-grid.row {
    padding-top: 0;
    padding-bottom: 0;
    border: 1px solid rgba(124, 92, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.04);
    background: rgba(255,255,255,0.6);
    overflow: hidden;
}

.model-grid.row:hover {
    background: rgba(255,255,255,0.82);
}

.model-grid .cell-block {
    min-width: 0;
    height: 100%;
    gap: 4px;
    padding: 16px;
    align-items: flex-start;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.model-grid .cell-block[data-label="选择"] {
    padding: 16px 12px;
    align-items: center;
    justify-content: flex-start;
}

.model-grid .cell-block[data-label="选择"] .model-select {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.model-grid .cell-block + .cell-block {
    border-left: 1px solid rgba(196, 199, 207, 0.45);
}

.model-grid .cell-block[data-label="选择"] + .cell-block {
    padding-left: 14px;
}

.model-grid .cell-value,
.model-grid .cell-tools {
    min-width: 0;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.model-grid .cell-value {
    align-items: flex-start;
}

.model-grid .cell-text.wrap {
    white-space: normal;
    word-break: break-word;
}

.model-grid .model-primary,
.model-grid .model-meta,
.model-grid .model-provider,
.model-grid .model-state,
.model-grid .model-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    align-items: flex-start;
    width: 100%;
}

.model-grid .model-title {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.model-grid .model-subtitle,
.model-grid .model-meta-sub {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.model-grid .model-meta-adjust {
    color: var(--brand);
    font-weight: 600;
}

.model-grid .model-tags,
.model-grid .model-meta-row,
.model-grid .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.model-grid .cell-text,
.model-grid .badge,
.model-grid .status {
    display: inline-flex;
    max-width: 100%;
    flex-wrap: wrap;
    vertical-align: middle;
}

.model-grid .btn-group > * {
    min-height: 32px;
}

.bulk-editor {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bulk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bulk-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bulk-field span {
    font-size: 12px;
    color: var(--muted);
}

.user-grid {
    grid-template-columns: minmax(0, .6fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .95fr)
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 14px
}

.catalog-card {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel-2);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
    min-width: 0;
    overflow: hidden
}

.catalog-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow)
}

.catalog-card strong {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.catalog-card .hint,
.catalog-card small {
    font-size: 11px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block
}

.catalog-card input {
    width: 18px;
    height: 18px
}

.row {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-2);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
    min-width: 0;
    font-size: 13px
}

.row:last-child {
    border-bottom: none
}

.row>* {
    min-width: 0
}

.row button {
    white-space: nowrap
}

.row:hover {
    background: #fff
}

.collapsible-panel .panel-actions {
    align-items: center;
    flex-wrap: wrap;
    row-gap: 8px
}

.panel-inline-note {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap
}

.panel-collapse-body {
    display: grid;
    gap: 14px
}

.collapsible-panel.is-collapsed {
    padding-bottom: 18px
}

.collapsible-panel.is-collapsed .panel-head {
    margin-bottom: 0
}

/* ── 任务中心卡片美化 ── */
.job-grid {
    display: grid;
    gap: 0;
    width: 100%;
    min-width: 100%;
}

.job-grid-card {
    border: 1px solid rgba(124, 92, 255, .10);
    border-left: 3px solid rgba(124, 92, 255, .22);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(17, 24, 39, .04), 0 1px 3px rgba(17, 24, 39, .03);
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,246,255,.88));
    overflow: hidden;
    margin-bottom: 10px;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease)
}

.job-grid-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(17, 24, 39, .07), 0 2px 6px rgba(17, 24, 39, .04);
    border-color: rgba(124, 92, 255, .18);
    border-left-color: rgba(124, 92, 255, .36)
}

/* 状态色左边框 */
.job-grid-card:has(.badge.success) { border-left-color: rgba(52, 199, 89, .4) }
.job-grid-card:has(.badge.danger) { border-left-color: rgba(255, 59, 48, .4) }
.job-grid-card:has(.badge.warning) { border-left-color: rgba(255, 149, 0, .4) }

.job-grid-top,
.job-grid-bottom {
    display: grid;
    width: 100%;
}

.job-grid-top {
    grid-template-columns: 2.2fr 1fr 1.4fr;
    gap: 0;
    border-bottom: 1px solid rgba(196, 199, 207, .28);
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(252,250,255,.76));
}

.job-grid-bottom {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0;
    background: rgba(255,255,255,.48);
}

.job-grid .cell-block {
    min-width: 0;
    height: 100%;
    gap: 4px;
    padding: 14px 16px;
    align-items: flex-start;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    position: relative
}

/* 单元格分隔线 */
.job-grid-top .cell-block:not(:last-child)::after,
.job-grid-bottom .cell-block:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 16px;
    bottom: 16px;
    width: 1px;
    background: rgba(196, 199, 207, .3)
}

.job-grid .job-primary,
.job-grid .job-provider,
.job-grid .job-actions,
.job-grid .job-detail-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    width: 100%;
}

.job-grid .job-detail-block {
    align-items: flex-start;
}

.job-grid .job-title {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    overflow-wrap: anywhere;
    color: var(--text)
}

.job-grid .job-subtitle {
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.3;
    overflow-wrap: anywhere
}

.job-grid .job-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px
}

.job-grid .job-actions .btn-group {
    justify-content: flex-start
}

.job-grid .cell-tools {
    flex-direction: column;
    align-items: flex-start;
    width: 100%
}

.job-grid .json-pre {
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(248, 250, 255, .9);
    border: 1px solid rgba(196, 199, 207, .4);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
    max-height: 220px;
    overflow: auto
}

.job-grid .job-action-block {
    justify-content: flex-start
}

/* 展开/收起按钮 */
.job-grid .job-toggle {
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    background: rgba(124, 92, 255, .06);
    border: 1px solid rgba(124, 92, 255, .14);
    color: var(--brand);
    transition: background .18s var(--ease)
}

.job-grid .job-toggle:hover {
    background: rgba(124, 92, 255, .12)
}

/* 任务结果视频链接 */
.job-video-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(0, 122, 255, .10);
    border: 1px solid rgba(0, 122, 255, .16);
    font-weight: 700;
    font-size: 13px;
    color: var(--brand);
    white-space: nowrap;
    transition: background .18s var(--ease)
}

.job-video-link:hover {
    background: rgba(0, 122, 255, .16)
}

.job-card-field .muted {
    color: var(--muted);
    font-size: 12px
}

.job-card-actions {
    display: flex;
    justify-content: flex-end
}

/* 空状态 */
.table-list .empty-state {
    padding: 48px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 14px
}

/* ── 任务中心移动端适配 ── */
@media (max-width: 960px) {
    .job-grid-top {
        grid-template-columns: 1.6fr 1fr
    }

    .job-grid-top .cell-block:nth-child(3) {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(196, 199, 207, .24)
    }

    .job-grid-top .cell-block:nth-child(3)::after {
        display: none
    }

    .job-grid-bottom {
        grid-template-columns: 1fr 1fr
    }

    .job-grid-bottom .cell-block:nth-child(n+3) {
        border-top: 1px solid rgba(196, 199, 207, .24)
    }

    .job-grid-bottom .cell-block:nth-child(3)::after {
        display: none
    }
}

@media (max-width: 640px) {
    .job-grid-top {
        grid-template-columns: 1fr
    }

    .job-grid-top .cell-block::after {
        display: none
    }

    .job-grid-top .cell-block:not(:last-child) {
        border-bottom: 1px solid rgba(196, 199, 207, .2)
    }

    .job-grid-bottom {
        grid-template-columns: 1fr
    }

    .job-grid-bottom .cell-block::after {
        display: none
    }

    .job-grid-bottom .cell-block:not(:last-child) {
        border-bottom: 1px solid rgba(196, 199, 207, .2)
    }

    .job-grid .cell-block {
        padding: 10px 14px
    }

    .job-grid-card {
        border-radius: 12px;
        margin-bottom: 8px
    }

    .job-grid .job-title {
        font-size: 13px
    }

    .job-grid .job-subtitle {
        font-size: 11px
    }

    .job-grid .job-toggle {
        width: 100%;
        text-align: center;
        padding: 8px 12px
    }

    /* 移动端筛选栏 */
    [data-section-panel="jobs"] .toolbar {
        flex-wrap: wrap;
        gap: 6px
    }

    [data-section-panel="jobs"] .toolbar select {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        font-size: 13px
    }

    /* 移动端面板头部 */
    [data-section-panel="jobs"] .compact-head {
        flex-direction: column;
        gap: 8px
    }

    [data-section-panel="jobs"] .panel-actions {
        flex-wrap: wrap;
        gap: 6px
    }

    .panel-inline-note {
        font-size: 11px
    }
}

.status.on {
    color: #0f7a2f;
    font-weight: 700
}

.status.off {
    color: var(--muted)
}

.share-list {
    display: grid;
    gap: 12px;
}

.share-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(124, 92, 255, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.04);
}

.share-card-head,
.share-card-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.share-card-subtitle {
    color: var(--muted);
    font-size: 12px;
    margin-top: 4px;
}

.share-card-body {
    display: grid;
    gap: 12px;
}

.share-card-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.share-card-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.settings-toolbar {
    align-items: end;
}

.settings-inline-field {
    min-width: min(280px, 100%);
}

.share-extend-field {
    display: grid;
    gap: 6px;
    min-width: 120px;
}

.table-footer {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    background: var(--panel-2)
}

.link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap
}

.badge.neutral {
    background: #f4f4f4;
    color: #555;
    border-color: #e2e2e2
}

.badge.success {
    background: #eef8f1;
    color: var(--success);
    border-color: #cce8d4
}

.badge.danger {
    background: #fff0ef;
    color: var(--danger);
    border-color: #ffd2ce
}

.badge.warning {
    background: #fff7e6;
    color: var(--warning);
    border-color: #ffe5a1
}

.btn-group {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap
}

.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, .38);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s var(--ease);
    z-index: var(--z-modal-backdrop)
}

.drawer {
    position: fixed;
    top: 18px;
    right: -500px;
    width: min(500px, calc(100vw - 24px));
    height: calc(100vh - 36px);
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 247, 241, .98));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(229, 221, 210, .95);
    border-radius: 28px 0 0 28px;
    box-shadow: -20px 0 60px rgba(0, 0, 0, .14);
    z-index: var(--z-modal);
    padding: 18px;
    display: grid;
    gap: 16px;
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    transition: right .28s var(--ease)
}

.drawer.open {
    right: 0
}

body.admin-page.editor-modal-open {
    overflow: hidden;
    height: 100vh
}

.drawer.drawer-modal-layout {
    top: 10px;
    left: 50%;
    right: auto;
    width: min(1660px, calc(100vw - 20px));
    height: min(calc(100dvh - 20px), 1040px);
    padding: 0;
    gap: 0;
    border-radius: 30px;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    overflow: hidden;
    opacity: 0;
    transform: translate(-50%, 24px) scale(.985);
    box-shadow: 0 28px 90px rgba(15, 23, 42, .22);
    transition: opacity .22s var(--ease), transform .28s var(--ease)
}

.drawer.drawer-modal-layout.open {
    right: auto;
    opacity: 1;
    transform: translate(-50%, 0) scale(1)
}

.drawer.drawer-modal-layout .drawer-head {
    padding: 22px 26px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
}

.drawer.drawer-modal-layout .drawer-head .hint {
    margin: 6px 0 0;
    max-width: 860px
}

.drawer.drawer-modal-layout .icon-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 14px;
    flex: 0 0 auto
}

.drawer.drawer-modal-layout .preview-share-modal-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    padding: 18px 20px 20px;
    border: none;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(245, 247, 251, .96), rgba(239, 244, 251, .94));
    overflow: hidden;
    align-content: stretch;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 16px
}

.drawer.drawer-modal-layout .preview-share-modal-form[hidden] {
    display: none
}

.drawer.open+.drawer-backdrop,
.drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto
}

@media (max-width: 960px) {
    .sidebar {
        padding: 10px 12px;
        gap: 10px
    }

    .sidebar-brand-actions {
        gap: 10px;
        flex-wrap: wrap
    }

    .topbar-head-actions {
        width: 100%;
        justify-content: space-between
    }

    .topbar-mobile-actions {
        display: flex
    }
}

@media (max-width: 640px) {
    .sidebar-brand-actions {
        gap: 6px
    }

    .sidebar-menu-btn,
    .sidebar-profile-btn,
    .sidebar-new-btn,
    .mobile-sidebar-btn,
    .mobile-profile-btn,
    .mobile-new-chat-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 9px
    }
}

.drawer-form {
    margin-top: 0;
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255, 255, 255, .82)
}

.drawer-section-title {
    grid-column: 1/-1;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 4px
}

.drawer-form[hidden] {
    display: none
}

.drawer-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px
}

.memory-panel {
    position: fixed;
    inset: auto 24px 24px auto;
    z-index: var(--z-modal);
    width: min(520px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
    padding: 18px;
    display: none;
    gap: 12px;
    min-width: 0
}

.memory-panel.open {
    display: grid
}

.memory-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start
}

.memory-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel-2);
    padding: 14px;
    display: grid;
    gap: 10px
}

.memory-card-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center
}

.memory-summary {
    white-space: pre-wrap;
    margin: 0;
    font-family: inherit;
    color: var(--text);
    background: #fff;
    border-radius: 14px;
    padding: 12px;
    border: 1px solid var(--line);
    max-height: 220px;
    overflow: auto
}

.memory-card textarea {
    min-height: 180px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(12, 12, 12, .56);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: 20px;
    backdrop-filter: blur(4px)
}

.modal-backdrop.open {
    display: flex
}

.modal-card {
    width: min(460px, 100%);
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(212, 36, 24, .14);
    border-radius: 28px;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .24);
    padding: 24px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: start;
    animation: panelIn .18s var(--ease) both
}

.modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #fff0ef;
    color: var(--danger);
    font-weight: 800;
    border: 1px solid #ffd2ce
}

.danger-text {
    color: var(--danger) !important
}

.modal-body h3 {
    font-size: 22px;
    line-height: 1.25
}

.modal-body p {
    margin-top: 10px;
    color: var(--muted);
    line-height: 1.7
}

.modal-actions {
    grid-column: 1/-1;
    display: flex;
    justify-content: flex-end;
    gap: 10px
}

.danger-btn {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff
}

.danger-btn:hover {
    background: #971c12
}

.site-footer {
    padding: 14px 24px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(12px)
}

@keyframes msgIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.985)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes panelIn {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes thinkingPulse {

    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: .2
    }

    40% {
        transform: translateY(-2px);
        opacity: .95
    }
}

@media(max-width:560px) {
    .topbar-actions {
        grid-template-columns: 1fr;
    }

    .topbar-actions-inline {
        gap: 4px;
    }

    .topbar-actions-inline .ghost,
    .topbar-actions-inline .file-btn {
        padding: 7px 9px;
        font-size: 11px;
    }
}

@media(max-width:960px) {
    html, body {
        height: auto;
        min-height: 100%
    }
    body {
        overflow: auto;
        -webkit-overflow-scrolling: touch
    }

    .app-shell,
    body.sidebar-collapsed .app-shell {
        grid-template-columns: 1fr;
        width: 100%;
        min-width: 0;
        min-height: 100dvh;
        height: 100dvh
    }

    .sidebar,
    body.sidebar-collapsed .sidebar {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: var(--z-popover);
        width: min(320px, calc(100vw - 52px));
        height: 100vh;
        max-height: 100vh;
        padding: 16px 14px 20px;
        transform: translateX(-110%);
        opacity: 0;
        pointer-events: none;
        box-shadow: var(--shadow-lg)
    }

    .sidebar-backdrop {
        display: block !important
    }

    body.sidebar-drawer-open .sidebar {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto
    }

    body.sidebar-drawer-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto
    }

    .chat-main {
        min-height: 0;
        height: 100%;
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0;
        scroll-padding-bottom: 0
    }

    .chat-main .hero-empty {
        min-height: 0;
        padding-bottom: 0;
        overflow-y: auto;
        overflow-x: hidden
    }

    .chat-main .messages {
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 8px;
        scroll-padding-bottom: 8px
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky-nav);
        align-self: start;
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        box-sizing: border-box;
        height: auto;
        margin: 4px 4px 0;
        padding: 5px 5px 3px;
        border-radius: 12px;
        background: rgba(245, 243, 238, .96);
        backdrop-filter: blur(16px);
        box-shadow: 0 8px 22px rgba(17, 17, 17, .05);
        display: flex;
        flex-direction: column;
        gap: 3px
    }

    .topbar.is-collapsed {
        padding-top: 4px;
        padding-bottom: 4px
    }

    .topbar-main {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        justify-content: flex-start;
        gap: 6px;
        min-width: 0
    }

    .topbar-head {
        display: flex;
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: space-between;
        gap: 8px;
        align-items: flex-start;
        min-width: 0
    }

    .topbar-head-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto
    }

    .topbar-title-wrap {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 4px;
        align-items: stretch;
        min-width: 0
    }

    .topbar h1 {
        font-size: 13px;
        line-height: 1.06;
        margin-bottom: 0
    }

    .topbar p {
        font-size: 10px;
        line-height: 1.16
    }

    .topbar-actions-inline {
        display: flex;
        flex: 0 0 auto;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 3px;
        grid-column: 1 / -1
    }

    .topbar-actions {
        display: grid;
        flex: 0 0 auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        justify-content: stretch;
        gap: 6px;
        min-width: 0;
        width: 100%;
        font-size: 10px
    }

    .topbar-actions .topbar-select-wrap {
        min-width: 0
    }

    .select-wrap {
        min-width: 0;
        width: 100%
    }

    .select-wrap span {
        font-size: 9px;
        margin-bottom: 1px
    }

    .select-wrap select {
        padding: 6px 8px;
        border-radius: 11px;
        min-height: 30px;
        font-size: 11px
    }

    .topbar-mobile-actions {
        display: flex !important;
        align-self: auto;
        gap: 6px
    }

    .topbar-head-actions .collapse-toggle {
        width: 30px;
        height: 30px;
        min-width: 30px;
        padding: 0;
        border-radius: 10px;
        font-size: 14px;
        line-height: 1
    }

    .topbar-mobile-actions .sidebar-menu-btn,
    .topbar-mobile-actions .sidebar-profile-btn {
        position: static;
        width: 30px;
        height: 30px;
        margin: 0;
        border-radius: 10px;
        font-size: 15px;
        box-shadow: 0 8px 18px rgba(17, 17, 17, .08)
    }

    .topbar.is-collapsed .topbar-main {
        display: none
    }

    .topbar.is-collapsed .topbar-compact {
        display: flex
    }

    .topbar-compact {
        gap: 4px;
        padding: 0
    }

    .hero-empty {
        place-items: start stretch;
        padding: 10px 10px 0;
        min-height: auto
    }

    .hero-card {
        width: 100%;
        padding: 18px 16px;
        border-radius: 18px;
        text-align: left
    }

    .hero-mark {
        margin: 0 0 12px
    }

    .messages {
        padding: 10px 8px 12px;
        overscroll-behavior-y: contain
    }

    .topbar-compact-meta strong {
        font-size: 12px
    }

    .topbar-compact-meta span {
        font-size: 10px
    }

    .msg {
        width: 100%
    }

    .composer {
        display: grid;
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) min-content;
        align-items: flex-end;
        column-gap: 6px;
        row-gap: 0;
        padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
    }

    .composer textarea {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 38px;
        max-height: 72px;
        margin: 0;
        border-radius: 13px;
        padding: 7px 10px;
        line-height: 1.45
    }

    .composer-actions {
        display: flex;
        flex: 0 0 auto;
        gap: 4px;
        width: auto;
        min-width: 0;
        align-items: flex-end;
        align-self: flex-end;
        justify-self: end
    }

    .composer-submit-btn {
        width: 38px;
        min-width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 16px
    }

    .slash-skill-picker {
        left: 8px;
        right: 8px;
        bottom: calc(100% + 6px);
        max-height: min(320px, 44vh);
        padding: 6px;
        -webkit-overflow-scrolling: touch
    }

    .slash-skill-option {
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
        padding: 10px
    }

    .slash-skill-option-meta {
        justify-content: flex-start;
        max-width: 100%
    }

    .slash-skill-chip-bar {
        margin: 0 0 6px
    }

    .slash-skill-chip {
        width: auto;
        max-width: 100%;
        gap: 6px;
        padding: 4px 7px;
    }

    .slash-skill-chip strong {
        max-width: 160px;
        font-size: 11px;
    }

    .slash-skill-chip span:not(.slash-skill-chip-kicker) {
        max-width: 84px;
        font-size: 10px;
        opacity: .78;
    }

    .slash-skill-chip-clear {
        width: 18px;
        min-width: 18px;
        height: 18px;
        font-size: 11px;
        opacity: .58;
    }

    .admin-shell {
        padding: 10px
    }

    .admin-topbar {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky-nav);
        margin-bottom: 3px;
        padding: 4px 8px 3px;
        border-radius: 0 0 12px 12px;
        background: rgba(245, 243, 238, .94);
        backdrop-filter: blur(16px);
        box-shadow: 0 6px 16px rgba(17, 17, 17, .04);
        flex-wrap: nowrap
    }

    .admin-topbar .topbar-left {
        gap: 8px;
        flex: 1 1 auto;
        min-width: 0
    }

    .admin-topbar .topbar-left h1 {
        font-size: 14px;
        line-height: 1.2
    }

    .admin-topbar .topbar-left .eyebrow {
        font-size: 9px
    }

    .admin-topbar .breadcrumb {
        font-size: 10px
    }

    .admin-topbar .topbar-actions {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 6px;
        order: 1
    }

    .admin-topbar .topbar-actions .link {
        padding: 5px 10px;
        font-size: 11px;
        border-radius: 8px;
        white-space: nowrap
    }

    .admin-topbar .icon-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
        padding: 0;
        border-radius: 8px;
        font-size: 14px
    }

    .admin-layout {
        display: block;
        margin-top: 0;
        gap: 6px
    }

    .admin-sidebar {
        position: fixed;
        top: 42px;
        left: 8px;
        right: 8px;
        z-index: var(--z-popover);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: calc(100vh - 52px);
        overflow: auto;
        padding: 7px;
        gap: 5px;
        border-radius: 16px;
        transform: translateY(-8px) scale(.985);
        opacity: 0;
        pointer-events: none;
        box-shadow: var(--shadow-lg)
    }

    .admin-shell.nav-open .admin-sidebar {
        transform: translateY(0) scale(1);
        opacity: 1;
        pointer-events: auto
    }

    .admin-sidebar .sidebar-note,
    .admin-sidebar .toast {
        grid-column: 1 / -1
    }

    .admin-hero {
        padding: 10px 10px 8px;
        border-radius: 14px;
        margin-top: 0
    }

    .admin-hero-copy {
        gap: 3px
    }

    .admin-hero-copy h1 {
        font-size: 16px;
        line-height: 1.08
    }

    .admin-hero-copy p {
        font-size: 10px;
        line-height: 1.22
    }

    .admin-hero-actions {
        gap: 6px
    }

    .panel,
    .stat {
        padding: 14px;
        border-radius: 16px
    }
}
@media(max-width:640px) {
    body {
        overflow: auto
    }

    .auth-page {
        padding: 14px 12px 18px;
        align-items: flex-start
    }

    .auth-card {
        width: 100%;
        padding: 18px;
        border-radius: 20px;
        box-shadow: 0 16px 36px rgba(17, 17, 17, .08)
    }

    .auth-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        border-radius: 18px;
        margin-bottom: 18px
    }

    .auth-hero .brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 11px
    }

    .auth-hero-copy h1 {
        font-size: 1.34rem;
        line-height: 1.18;
        margin: 0
    }

    .auth-hero-copy p,
    .auth-head p {
        font-size: .92rem;
        line-height: 1.62
    }

    .auth-head {
        margin: 8px 0 14px;
        gap: 6px
    }

    .auth-tabs {
        gap: 8px;
        margin-bottom: 12px
    }

    .captcha-row {
        grid-template-columns: 1fr;
    }

    .auth-tab,
    .auth-page button,
    .auth-page input {
        min-height: 48px
    }

    .auth-panel,
    .card-surface {
        gap: 10px
    }

    .card-surface {
        padding: 14px;
        border-radius: 16px
    }

    .message {
        margin-top: 10px;
        font-size: .92rem
    }

    .site-footer {
        position: static;
        margin-top: 14px;
        padding: 0 8px 10px;
        font-size: .82rem;
        line-height: 1.45;
        text-align: center
    }

    .topbar p br {
        display: none
    }

    .topbar {
        gap: 12px;
        margin: 12px 14px 0;
        padding-top: 12px;
        padding-bottom: 12px;
        background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(248,245,239,.9));
        backdrop-filter: blur(22px) saturate(1.08);
        border-bottom: 1px solid rgba(229, 221, 210, .72);
        box-shadow: inset 0 -1px 0 rgba(255,255,255,.55), 0 14px 34px rgba(17,17,17,.06)
    }

    .topbar-compact {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 10px;
        padding: 2px 0 4px
    }

    .topbar-compact-meta strong {
        font-size: 16px;
        line-height: 1.2
    }

    .topbar-compact-meta span {
        white-space: normal;
        line-height: 1.45;
        font-size: 12px
    }

    .topbar-head,
    .msg-head {
        flex-direction: column;
        align-items: flex-start;
        min-width: 0
    }

    .msg-wrap.user .msg-head {
        align-items: flex-end
    }

    .msg-wrap.user .msg-identity {
        flex-direction: row-reverse
    }

    .msg-wrap.user .msg-time {
        text-align: right
    }

    .messages,
    .hero-empty,
    .composer,
    .site-footer,
    .admin-shell,
    .profile-shell {
        padding-left: 10px;
        padding-right: 10px
    }

    .hero-card {
        padding: 28px;
        border-radius: 30px;
        background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,245,239,.94));
        box-shadow: 0 18px 44px rgba(17,17,17,.08);
        border: 1px solid rgba(229, 221, 210, .78)
    }

    .multimodal-badge {
        margin: 0 16px 12px;
        padding: 11px 12px;
    }

    .composer {
        display: grid;
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) min-content;
        align-items: flex-end;
        padding: 10px 0 calc(14px + env(safe-area-inset-bottom));
        gap: 0;
        column-gap: 8px;
        row-gap: 0;
        background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(246,248,255,.94));
        border-top: 1px solid rgba(196, 199, 207, .72);
        box-shadow: 0 -10px 28px rgba(17,17,17,.05);
        backdrop-filter: blur(24px) saturate(1.14)
    }

    .composer textarea {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 40px;
    }

    .composer-actions {
        width: auto;
        min-width: 0;
        align-self: flex-end;
    }

    .composer button,
    .chrome-toggle {
        width: 100%
    }

    .composer-actions button {
        width: 38px;
        min-width: 38px;
    }

    .msg {
        border-radius: 22px;
        padding: 16px 16px 14px;
        background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,245,239,.97));
        box-shadow: 0 14px 30px rgba(17,17,17,.07);
        border: 1px solid rgba(229, 221, 210, .72)
    }

    .code-card-head {
        padding: 10px 12px
    }

    .code-card pre {
        padding: 14px 12px
    }

    .memory-card-head {
        flex-direction: column;
        align-items: stretch
    }

    .admin-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    .drawer {
        width: 100vw;
        border-radius: 18px 0 0 18px;
        right: -100vw
    }

    .drawer-actions,
    .pager {
        flex-direction: column
    }

    .drawer-actions>*,
    .pager>* {
        width: 100%
    }

    .table-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px
    }

    .site-footer {
        padding-bottom: 20px
    }
}

@media(max-width:960px) {
    .app-shell,
    .chat-main,
    .messages,
    .hero-empty,
    .composer,
    .mobile-chatbar,
    .mobile-composer-shell {
        max-width: 100%;
        overflow-x: clip;
    }

    .chat-main,
    .messages,
    .hero-empty {
        overscroll-behavior-x: none;
    }

    .composer {
        padding-bottom: max(2px, env(safe-area-inset-bottom)) !important;
        margin-bottom: 0 !important;
    }

    .mobile-composer-shell {
        align-items: flex-end;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .composer-actions {
        gap: 6px;
        align-items: flex-end;
    }

    .voice-call-trigger {
        display: none !important;
    }
}

@media(max-width:960px) {
    .app-shell,
    .chat-main,
    .messages,
    .hero-empty,
    .composer,
    .mobile-chatbar,
    .mobile-composer-shell {
        max-width: 100%;
        overflow-x: clip;
    }

    .chat-main,
    .messages,
    .hero-empty {
        overscroll-behavior-x: none;
    }

    .composer {
        padding-bottom: max(2px, env(safe-area-inset-bottom)) !important;
        margin-bottom: 0 !important;
    }

    .mobile-composer-shell {
        align-items: flex-end;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .composer-actions {
        gap: 6px;
        align-items: flex-end;
    }

    .voice-call-trigger {
        display: none !important;
    }
}

@media(max-width:420px) {
    .auth-page {
        padding: 10px
    }

    .auth-card {
        padding: 14px;
        border-radius: 18px
    }

    .auth-tabs {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .auth-hero-copy h1 {
        font-size: 1.3rem
    }

    .auth-tab,
    .auth-page button,
    .auth-page input {
        min-height: 46px;
        padding-left: 12px;
        padding-right: 12px
    }

    .admin-shell {
        padding: 8px
    }

    .admin-topbar {
        padding: 10px;
        border-radius: 0 0 14px 14px
    }

    .topbar-left h1 {
        font-size: 1.05rem
    }

    .breadcrumb {
        font-size: 11px
    }

    .admin-sidebar {
        left: 8px;
        right: 8px;
        top: 64px;
        grid-template-columns: 1fr;
        max-height: calc(100vh - 84px)
    }

    .panel,
    .stat {
        padding: 12px;
        border-radius: 14px
    }

    .stats-grid .stat {
        padding: 14px
    }

    .stat b {
        font-size: 20px
    }

    .row,
    .provider-grid,
    .user-grid,
    .model-grid,
    .job-grid,
    .provider-card,
    .user-card {
        padding: 10px
    }

    .cell-block {
        padding: 10px
    }

    .drawer {
        border-radius: 16px 0 0 16px
    }
}

.price-section-content {
    display: grid;
    gap: 14px;
    margin-top: 14px
}

.price-section-content.is-collapsed {
    display: none
}

.price-section-head {
    align-items: end;
    gap: 12px
}

.price-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.price-filter-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px
}

.price-filter-field {
    display: grid;
    gap: 6px;
    min-width: 0
}

.price-filter-field span {
    color: var(--muted);
    font-size: 12px
}

.price-filter-field input,
.price-filter-field select {
    min-height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(196,199,207,.72);
    background: rgba(255,255,255,.92)
}

.profile-card .table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch
}

.price-table-wrap .profile-table {
    min-width: 560px
}

.usage-detail-card .profile-table,
#jobSection .profile-table,
#rewardSection .profile-table,
#inviteSection .profile-table {
    min-width: 720px
}

@media (max-width: 900px) {
    .usage-stats-grid,
    .price-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .usage-main-grid,
    .usage-bottom-grid,
    .usage-distribution-layout {
        grid-template-columns: 1fr
    }

    .usage-panel,
    .usage-detail-card,
    .price-section-card {
        min-width: 0
    }

    .usage-toolbar,
    .price-toolbar {
        width: 100%;
        align-items: stretch
    }

    .usage-toolbar {
        flex-direction: column
    }

    .usage-range-control,
    .price-filter-field {
        min-width: 0
    }

    .usage-distribution-visual {
        order: -1
    }
}

@media (max-width: 640px) {
    .usage-stats-grid,
    .price-filter-bar,
    .profile-reward-summary {
        grid-template-columns: 1fr
    }

    .price-section-head,
    .usage-section-head {
        align-items: start
    }

    .price-toolbar,
    .price-toolbar .ghost,
    .usage-toolbar .ghost,
    .usage-range-control select {
        width: 100%
    }

    .usage-stat-card {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 14px
    }

    .usage-stat-copy strong {
        font-size: 22px
    }

    .usage-panel,
    .usage-detail-card,
    .profile-card,
    .profile-hero,
    .profile-banner {
        padding-left: 14px;
        padding-right: 14px
    }

    .usage-distribution-chart {
        width: 152px;
        padding: 18px
    }

    .usage-distribution-chart strong {
        font-size: 22px
    }

    .usage-mini-table {
        min-width: 520px
    }

    .recent-activity-item {
        grid-template-columns: 1fr;
        align-items: start
    }

    .recent-activity-metrics {
        text-align: left
    }
}

@media (max-width: 520px) {
    .profile-shell {
        width: min(1120px, calc(100vw - 10px));
        margin: 10px auto 18px
    }

    .profile-banner-badges {
        justify-content: flex-start
    }

    .profile-summary-meta {
        flex-direction: column;
        align-items: stretch
    }

    .profile-summary-meta span,
    .invite-share-actions .ghost {
        width: 100%
    }

    .invite-share-box {
        padding: 14px
    }

    .invite-share-copy,
    .invite-share-actions,
    .invite-qr-card {
        flex-basis: 100%;
        width: 100%
    }

    .invite-share-actions {
        display: grid;
        grid-template-columns: 1fr
    }

    .usage-chart-wrap {
        padding: 10px
    }

    .usage-stat-card {
        gap: 10px
    }

    .usage-stat-icon {
        width: 36px;
        height: 36px;
        border-radius: 12px
    }

    .price-table-wrap .profile-table,
    .usage-mini-table {
        min-width: 480px
    }

    .usage-detail-card .profile-table,
    #jobSection .profile-table,
    #rewardSection .profile-table,
    #inviteSection .profile-table {
        min-width: 640px
    }
}

@media (max-width: 430px) {
    .profile-banner-copy h2,
    .profile-summary-copy h2 {
        font-size: 20px
    }

    .profile-card,
    .profile-hero,
    .profile-banner,
    .usage-panel,
    .usage-detail-card {
        padding-left: 12px;
        padding-right: 12px
    }

    .profile-usage-summary .metric-card strong,
    .usage-stat-copy strong {
        font-size: 20px
    }

    .profile-section-subtitle,
    .profile-panel-subtitle,
    .usage-stat-copy small,
    .hint {
        font-size: 12px
    }

    .invite-qr-card canvas {
        width: 144px;
        height: 144px
    }
}

@media (max-width: 390px) {
    .profile-shell {
        width: min(1120px, calc(100vw - 8px))
    }

    .profile-banner-copy h2,
    .profile-summary-copy h2 {
        font-size: 19px
    }

    .usage-distribution-chart {
        width: 136px;
        padding: 16px
    }

    .invite-qr-card canvas {
        width: 132px;
        height: 132px
    }

    .profile-banner-badges .status-pill,
    .profile-summary-tags .status-pill {
        font-size: 11px
    }
}

.share-edit-meta-editor {
    margin: 0
}

.share-editor-modal-hero,
.share-editor-meta-grid,
.share-editor-workspace {
    grid-column: 1 / -1
}

.share-editor-modal-hero {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    padding: 4px 4px 0
}

.share-editor-modal-hero-copy {
    display: grid;
    gap: 6px;
    min-width: 0
}

.share-editor-modal-hero-copy h3 {
    margin: 0;
    font-size: 28px;
    line-height: 1.18
}

.share-editor-modal-hero-copy .hint {
    margin: 0;
    max-width: 760px;
    line-height: 1.7
}

.share-editor-modal-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex: 0 0 auto
}

.share-editor-open-link {
    white-space: nowrap;
    background: rgba(255, 255, 255, .9)
}

.share-editor-meta-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px
}

.share-editor-meta-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, .16);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05)
}

.share-editor-meta-card strong,
.share-editor-meta-card span:last-child {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text)
}

.share-editor-meta-card-wide {
    grid-column: span 2
}

.share-editor-pane {
    display: grid;
    min-height: 0;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
    box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
    overflow: hidden
}

.share-editor-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(420px, 1fr);
    gap: 16px;
    align-items: stretch;
    min-height: 0;
    width: 100%
}

.share-editor-pane-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, .14)
}

.share-editor-pane-head strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--text)
}

.share-editor-pane-head .hint,
.share-editor-code-footer .hint {
    margin: 6px 0 0
}

.share-editor-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(94, 234, 212, .2);
    background: rgba(15, 118, 110, .08);
    color: #0f766e;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap
}

.share-editor-pill.muted {
    border-color: rgba(148, 163, 184, .18);
    background: rgba(148, 163, 184, .1);
    color: #475569
}

.share-editor-pill.loading {
    border-color: rgba(59, 130, 246, .2);
    background: rgba(59, 130, 246, .1);
    color: #1d4ed8
}

.share-editor-pill.success {
    border-color: rgba(16, 185, 129, .22);
    background: rgba(16, 185, 129, .1);
    color: #047857
}

.share-editor-pill.warning {
    border-color: rgba(245, 158, 11, .28);
    background: rgba(245, 158, 11, .12);
    color: #b45309
}

.share-editor-pill-dark {
    border-color: rgba(96, 165, 250, .2);
    background: rgba(96, 165, 250, .14);
    color: #bfdbfe
}

.share-editor-code-pane {
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 0;
    background: linear-gradient(180deg, #111827, #0f172a);
    color: #e2e8f0
}

.share-editor-code-pane .share-editor-pane-head {
    border-bottom-color: rgba(148, 163, 184, .16)
}

.share-editor-code-pane .share-editor-pane-head strong,
.share-editor-code-pane .share-editor-pane-head .hint,
.share-editor-code-footer .hint {
    color: rgba(226, 232, 240, .88)
}

.share-edit-code-field {
    display: grid;
    gap: 10px;
    min-height: 0;
    padding: 18px 20px 0
}

.share-edit-code-field > span {
    color: inherit;
    font-weight: 700
}

.share-edit-code-field textarea {
    height: 100%;
    min-height: 640px;
    resize: none;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 18px;
    background: rgba(2, 6, 23, .88);
    color: #e2e8f0;
    font: 13px/1.7 "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03)
}

.share-edit-code-field textarea:focus {
    border-color: rgba(96, 165, 250, .55);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .12)
}

.share-editor-code-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px 20px;
    font-size: 12px;
    color: rgba(226, 232, 240, .78)
}

.share-editor-ai-pane {
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 0
}

.share-editor-ai-scroll {
    display: grid;
    align-content: start;
    gap: 16px;
    min-height: 0;
    overflow: auto;
    padding-bottom: 8px
}

.share-editor-ai-field {
    display: grid;
    gap: 10px;
    padding: 0 20px
}

.share-editor-ai-field:first-of-type {
    padding-top: 18px
}

.share-editor-ai-field textarea,
.share-editor-ai-field select {
    width: 100%
}

.share-editor-ai-field textarea {
    min-height: 260px;
    resize: vertical;
    font: 13px/1.65 "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace
}

.share-editor-model-meta {
    display: block;
    line-height: 1.6
}

.share-editor-ai-hint {
    padding: 0 20px
}

.share-editor-inline-status {
    margin: 0 20px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, .18);
    background: rgba(148, 163, 184, .08);
    color: #475569;
    font-size: 13px;
    line-height: 1.65
}

.share-editor-inline-status.loading {
    border-color: rgba(59, 130, 246, .2);
    background: rgba(59, 130, 246, .08);
    color: #1d4ed8
}

.share-editor-inline-status.success {
    border-color: rgba(16, 185, 129, .22);
    background: rgba(16, 185, 129, .08);
    color: #047857
}

.share-editor-inline-status.error {
    border-color: rgba(239, 68, 68, .22);
    background: rgba(239, 68, 68, .08);
    color: #b91c1c
}

.share-editor-ai-live,
.share-editor-ai-result {
    display: grid;
    gap: 12px;
    margin: 0 20px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(15, 23, 42, .04);
    border: 1px solid rgba(148, 163, 184, .18)
}

.share-editor-ai-live {
    min-height: 260px
}

.share-editor-ai-stream-output,
.share-editor-ai-patch-preview {
    margin: 0;
    overflow: auto;
    padding: 14px;
    border-radius: 14px;
    background: #0f172a;
    color: #e2e8f0;
    font: 12px/1.65 "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace
}

.share-editor-ai-stream-output {
    min-height: 220px;
    max-height: 420px;
    white-space: pre-wrap;
    word-break: break-word
}

.share-editor-ai-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.share-editor-ai-summary {
    white-space: pre-wrap;
    color: var(--text);
    line-height: 1.7
}

.share-editor-ai-patch-stats {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(59, 130, 246, .08), rgba(15, 23, 42, .02));
    border: 1px solid rgba(59, 130, 246, .14)
}

.share-editor-ai-patch-count {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text)
}

.share-editor-ai-patch-stats .hint {
    margin: 0;
    line-height: 1.6
}

.share-editor-ai-patch-preview {
    min-height: 180px;
    max-height: 340px
}

.share-editor-ai-notes {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(99, 102, 241, .16);
    background: linear-gradient(180deg, rgba(99, 102, 241, .06), rgba(15, 23, 42, .02))
}

.share-editor-ai-notes-content {
    white-space: pre-wrap;
    line-height: 1.7;
    color: var(--text)
}

.share-editor-ai-diff {
    display: grid;
    gap: 12px
}

.share-editor-diff-list {
    display: grid;
    gap: 12px
}

.share-editor-diff-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, .18);
    background: rgba(255, 255, 255, .9)
}

.share-editor-diff-card-replace {
    border-color: rgba(59, 130, 246, .18)
}

.share-editor-diff-card-insert {
    border-color: rgba(16, 185, 129, .22)
}

.share-editor-diff-card-fallback {
    border-color: rgba(245, 158, 11, .28);
    background: rgba(255, 251, 235, .94)
}

.share-editor-diff-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px
}

.share-editor-diff-card-head strong {
    font-size: 13px;
    color: var(--text)
}

.share-editor-diff-card-head span {
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted)
}

.share-editor-diff-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
}

.share-editor-diff-column {
    display: grid;
    gap: 8px;
    min-width: 0
}

.share-editor-diff-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted)
}

.share-editor-diff-column pre {
    margin: 0;
    min-height: 140px;
    max-height: 280px;
    overflow: auto;
    padding: 12px;
    border-radius: 14px;
    font: 12px/1.65 "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    white-space: pre-wrap;
    word-break: break-word
}

.share-editor-diff-column.before pre {
    background: rgba(254, 226, 226, .55);
    color: #991b1b
}

.share-editor-diff-column.after pre {
    background: rgba(220, 252, 231, .72);
    color: #166534
}

@media (max-width: 900px) {
    .share-editor-diff-columns {
        grid-template-columns: 1fr
    }

    .share-editor-diff-column pre {
        min-height: 120px;
        max-height: 220px
    }
}

.share-editor-ai-actions {
    padding: 0 20px 20px
}

.share-editor-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, .14);
    background: linear-gradient(180deg, rgba(248,250,252,.18), rgba(248,250,252,.98) 38%)
}

.share-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 4px 4px
}

.share-editor-primary-actions {
    justify-content: flex-end;
    padding-top: 0;
    flex: 0 0 auto
}

.share-edit-note {
    margin: 0;
    max-width: 720px
}

@media (max-width: 1280px) {
    .share-editor-meta-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .share-editor-meta-card-wide {
        grid-column: span 2
    }
}

@media (max-width: 1180px) {
    .drawer.drawer-modal-layout {
        width: min(1360px, calc(100vw - 16px));
        height: calc(100dvh - 16px);
        top: 8px
    }

    .share-editor-workspace {
        grid-template-columns: minmax(0, 1.45fr) minmax(360px, .95fr)
    }

    .share-edit-code-field textarea {
        min-height: 560px
    }
}

@media (max-width: 1024px) {
    .drawer.drawer-modal-layout {
        width: min(1120px, calc(100vw - 18px));
        height: calc(100dvh - 18px);
        top: 9px
    }

    .share-editor-workspace {
        grid-template-columns: 1fr
    }

    .share-editor-ai-pane {
        min-height: 360px
    }
}

@media (max-width: 768px) {
    .drawer.drawer-modal-layout {
        width: calc(100vw - 12px);
        height: calc(100dvh - 12px);
        top: 6px;
        border-radius: 24px
    }

    .drawer.drawer-modal-layout .drawer-head {
        padding: 18px 18px 14px
    }

    .drawer.drawer-modal-layout .preview-share-modal-form {
        padding: 16px;
        gap: 14px
    }

    .share-editor-modal-hero,
    .share-editor-footer,
    .share-editor-pane-head,
    .share-editor-code-footer {
        flex-direction: column;
        align-items: flex-start
    }

    .share-editor-modal-hero-actions {
        width: 100%;
        align-items: stretch
    }

    .share-editor-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .share-editor-meta-card-wide {
        grid-column: span 2
    }

    .share-edit-code-field textarea,
    .share-editor-ai-field textarea {
        min-height: 240px
    }

    .share-editor-ai-actions button,
    .share-editor-primary-actions button {
        flex: 1 1 calc(50% - 6px)
    }
}

@media (max-width: 640px) {
    .share-editor-modal-hero-copy h3 {
        font-size: 22px
    }

    .share-editor-meta-grid {
        grid-template-columns: 1fr
    }

    .share-editor-meta-card-wide {
        grid-column: auto
    }

    .share-edit-code-field textarea {
        min-height: 320px
    }

    .share-editor-ai-field textarea {
        min-height: 160px
    }

    .share-editor-ai-actions button,
    .share-editor-primary-actions button {
        flex: 1 1 100%
    }
}

@media (max-width: 375px) {
    .profile-shell {
        width: min(1120px, calc(100vw - 6px));
        margin: 8px auto 16px
    }

    .usage-stat-card {
        grid-template-columns: 32px minmax(0, 1fr);
        padding: 12px
    }

    .usage-stat-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 12px
    }

    .profile-usage-summary .metric-card strong,
    .usage-stat-copy strong {
        font-size: 18px
    }

    .invite-share-box,
    .invite-qr-card,
    .usage-chart-wrap {
        padding: 12px
    }

    .invite-qr-card canvas {
        width: 124px;
        height: 124px
    }

    .price-table-wrap .profile-table,
    .usage-mini-table {
        min-width: 440px
    }

    .usage-detail-card .profile-table,
    #jobSection .profile-table,
    #rewardSection .profile-table,
    #inviteSection .profile-table {
        min-width: 600px
    }
}

.tool-option-bar {
    display: grid;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05)
}

.tool-option-bar[hidden] {
    display: none !important
}

.tool-option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    min-width: 0
}

.tool-option-intent {
    padding: 8px 10px;
    border: 1px solid rgba(59, 130, 246, .16);
    border-radius: 12px;
    background: rgba(239, 246, 255, .68);
    color: #475569;
    font-size: 12px;
    line-height: 1.5
}

.tool-option-field {
    display: grid;
    gap: 6px;
    min-width: 0
}

.tool-option-field span {
    font-size: 12px;
    color: var(--muted)
}

.tool-option-field select {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .96)
}

.tool-option-note {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-top: 2px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted)
}

.tool-option-note-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1 1 280px
}

.tool-option-note strong {
    color: var(--text);
    white-space: nowrap
}

.tool-option-note-copy span {
    min-width: 0
}

.tool-option-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    flex: 1 1 320px
}

.tool-option-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, .18);
    background: rgba(255, 255, 255, .92);
    color: var(--text);
    white-space: nowrap
}

.tool-option-pill b {
    color: var(--muted);
    font-weight: 700
}

.collab-toggle-bar {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
    padding: 0
}

.collab-expand-btn,
.collab-settings-toggle,
.collab-toggle-btn {
    border: 1px solid rgba(148, 163, 184, .18);
    background: rgba(255, 255, 255, .96)
}

.mobile-composer-shell {
    display: contents
}

#prompt {
    grid-area: input;
    flex: initial;
    min-width: 0
}

.collab-toggle-btn {
    flex: 0 0 auto;
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    align-self: center
}

.topbar-collab-toggle {
    margin-top: auto;
    align-self: end;
}

.collab-toggle-btn svg {
    width: 16px;
    height: 16px
}

.collab-toggle-btn.is-active {
    color: #4f46e5;
    border-color: rgba(79, 70, 229, .35);
    background: rgba(238, 242, 255, .96)
}

.collab-expand-btn,
.collab-settings-toggle {
    width: 18px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4f46e5;
    font-size: 10px;
    line-height: 1;
    padding: 0
}

.collab-settings-popover {
    display: grid;
    gap: 10px
}

.collab-settings-popover__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(148, 163, 184, .16)
}

.collab-settings-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch
}

.collab-model-picker-field {
    grid-column: span 3
}

.collab-model-picker-summary {
    margin-top: 5px;
    max-height: 34px;
    overflow: hidden
}

.collab-model-picker-trigger {
    width: 100%;
    margin-top: 0;
    justify-content: space-between
}

.collab-settings-popover .tool-option-field {
    min-width: 0;
    min-height: 66px;
    padding: 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .66);
    border: 1px solid rgba(148, 163, 184, .18);
    box-shadow: none
}

.collab-settings-popover .tool-option-field > span {
    margin-bottom: 5px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.15;
    font-weight: 650
}

.collab-settings-popover .tool-option-field select,
.collab-settings-popover .collab-model-picker-trigger {
    min-height: 34px;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.2
}

.collab-settings-popover .tool-option-field select {
    width: 100%;
    padding: 0 28px 0 10px;
    background-color: rgba(255, 255, 255, .92);
    border-color: rgba(148, 163, 184, .24)
}

.collab-settings-popover .tool-option-summary {
    gap: 6px;
    justify-content: flex-start
}

.collab-field-mode {
    grid-column: span 2
}

.collab-field-models {
    grid-column: span 3
}

.collab-field-synth {
    grid-column: span 5
}

.collab-field-compact {
    grid-column: span 1
}

@media (max-width: 1180px) {
    .collab-field-mode {
        grid-column: span 3
    }

    .collab-field-models,
    .collab-field-synth {
        grid-column: span 6
    }

    .collab-field-compact {
        grid-column: span 3
    }
}

@media (max-width: 720px) {
    .collab-settings-grid {
        grid-template-columns: 1fr
    }

    .collab-field-mode,
    .collab-field-models,
    .collab-field-synth,
    .collab-field-compact {
        grid-column: 1
    }
}

.collab-mobile-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px
}

.collab-mobile-modal[hidden] {
    display: none !important
}

.collab-mobile-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .48)
}

.collab-mobile-modal__dialog {
    position: relative;
    width: min(720px, 100%);
    max-height: min(86vh, 920px);
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(214, 219, 231, .95);
    background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(247,249,253,.97));
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
    display: flex;
    flex-direction: column
}

.collab-mobile-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 14px
}

.collab-mobile-modal__head span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted)
}

.collab-mobile-modal__body {
    overflow: auto;
    padding: 0 22px 22px
}

@media (max-width: 960px) {
    .collab-toggle-btn {
        display: none
    }
}

@media (max-width: 768px) {
    .collab-tool-option-grid {
        grid-template-columns: 1fr
    }

    .collab-model-picker-list {
        max-height: 260px
    }

    .collab-mobile-modal {
        padding: 12px
    }

    .collab-mobile-modal__dialog {
        width: 100%;
        max-height: min(92vh, 920px);
        border-radius: 20px
    }
}

@media (max-width: 520px) {
    .collab-mobile-modal__head,
    .collab-mobile-modal__body {
        padding-left: 16px;
        padding-right: 16px
    }
}

@media (max-width: 1180px) {
    .tool-option-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media (max-width: 768px) {
    .composer {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "options options" "input actions";
        column-gap: 6px;
        row-gap: 6px;
        padding: 6px 8px calc(8px + env(safe-area-inset-bottom))
    }

    .composer textarea {
        min-height: 34px;
        max-height: 76px;
        padding: 5px 8px;
        border-radius: 10px;
        font-size: 13px
    }

    .composer-actions {
        align-self: flex-end;
        justify-content: flex-end;
        gap: 4px
    }

    .topbar {
        margin: 4px 6px 0;
        padding: 6px 10px 5px;
        gap: 4px;
        border-radius: 12px
    }

    .messages {
        padding: 8px 10px 12px;
        gap: 8px
    }

    .msg {
        padding: 10px 12px 8px;
        border-radius: 16px;
        gap: 8px;
        line-height: 1.62
    }

    .msg-content {
        gap: 6px
    }

    .tool-option-bar {
        margin-bottom: 0;
        padding: 10px;
        border-radius: 14px
    }

    .tool-option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .tool-option-note {
        flex-direction: column;
        align-items: stretch
    }

    .tool-option-summary {
        justify-content: flex-start
    }
}

@media (max-width: 640px) {
    .tool-option-grid {
        grid-template-columns: 1fr
    }
}

@media (max-width: 520px) {
    .tool-option-field select {
        min-height: 44px
    }

    .tool-option-pill {
        width: 100%;
        justify-content: space-between
    }
}

/* ── 移动端侧栏历史对话紧凑化 ── */
@media (max-width: 960px) {
    .conv {
        padding: 5px 7px;
        gap: 2px 5px;
        border-radius: 8px
    }

    .conv strong {
        font-size: 12px;
        line-height: 1.2
    }

    .conv small {
        font-size: 10.5px;
        line-height: 1.25
    }

    .side-title {
        font-size: 10px;
        margin-top: 1px
    }

    #newChat {
        padding: 6px 8px;
        font-size: 12px
    }

    .sidebar {
        gap: 3px
    }

    .conversation-list {
        gap: 3px
    }
}

/* ── 个人中心邀请链接移动端适配 ── */
@media (max-width: 640px) {
    .invite-share-box {
        padding: 12px;
        gap: 10px
    }

    .invite-share-copy {
        gap: 8px
    }

    .invite-share-field strong {
        font-size: 16px
    }

    .invite-link-text {
        min-height: 60px;
        padding: 10px;
        font-size: 12px;
        border-radius: 12px
    }

    .invite-qr-card {
        padding: 8px
    }

    .invite-qr-card img {
        width: 120px;
        height: 120px
    }

    .invite-share-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .invite-share-actions .primary,
    .invite-share-actions .ghost {
        width: 100%;
        min-width: 0;
        padding: 10px 10px;
        font-size: 13px
    }

    .profile-reward-summary {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .profile-reward-summary .metric-card {
        padding: 10px
    }

    .profile-reward-summary .metric-card strong {
        font-size: 18px
    }

    .profile-reward-summary .metric-card span {
        font-size: 11px
    }

    .profile-reward-actions {
        gap: 8px
    }

    .profile-reward-actions button {
        padding: 10px 14px;
        font-size: 13px
    }
}

@media (max-width: 420px) {
    .invite-share-actions {
        grid-template-columns: 1fr
    }

    .profile-reward-summary {
        grid-template-columns: 1fr
    }

    .invite-share-field strong {
        font-size: 14px
    }

    .invite-link-text {
        min-height: 50px;
        font-size: 11px
    }
}

/* ── 后台移动端适配 ── */
@media (max-width: 960px) {
    .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 12px
    }

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

    .toolbar {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 10px
    }

    .toolbar input[type="search"],
    .toolbar > input {
        grid-column: 1 / -1
    }

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

    .model-price-bar {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px
    }

    .model-price-actions {
        flex-wrap: wrap;
        gap: 8px
    }

    .panel-actions {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px
    }

    .panel-actions button,
    .panel-actions .ghost,
    .panel-actions .primary {
        padding: 8px 12px;
        font-size: 13px
    }

    .panel-head {
        flex-direction: column;
        gap: 10px
    }

    .panel-head h2 {
        font-size: 18px
    }

    .catalog-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10px
    }

    .catalog-card {
        padding: 12px;
        border-radius: 14px
    }

    .catalog-card strong {
        font-size: 13px
    }

    .voice-upload-row {
        flex-direction: column;
        gap: 8px
    }

    .voice-upload-row input,
    .voice-upload-row button {
        width: 100%
    }

    .share-card {
        padding: 14px;
        border-radius: 16px;
        gap: 10px
    }

    .share-card-actions {
        flex-wrap: wrap;
        gap: 8px
    }

    .share-card-field-grid {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .settings-toolbar {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .settings-inline-field {
        min-width: 0;
        width: 100%
    }

    .reward-settings-form {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .nav-item {
        padding: 10px 12px;
        font-size: 13px;
        border-radius: 12px
    }

    .drawer {
        width: 100vw;
        border-radius: 20px 0 0 20px
    }

    .drawer-form {
        padding: 12px;
        border-radius: 18px;
        gap: 8px
    }

    .drawer-form input,
    .drawer-form select,
    .drawer-form textarea {
        padding: 10px 12px;
        border-radius: 12px
    }

    .drawer-actions {
        flex-wrap: wrap;
        gap: 8px
    }

    .drawer-actions button {
        flex: 1 1 auto;
        min-width: 100px
    }

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

@media (max-width: 640px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px
    }

    .stat b {
        font-size: 22px
    }

    .stat small {
        font-size: 11px
    }

    .toolbar {
        grid-template-columns: 1fr
    }

    .panel-head h2 {
        font-size: 16px
    }

    .panel-actions {
        gap: 6px
    }

    .panel-actions button {
        padding: 7px 10px;
        font-size: 12px
    }

    .catalog-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px
    }

    .share-card-head {
        flex-direction: column;
        gap: 8px
    }

    .share-card-actions {
        width: 100%
    }

    .share-card-actions button {
        flex: 1 1 auto;
        min-width: 0
    }

    .model-price-meta {
        gap: 2px
    }

    .model-price-badge {
        font-size: 12px;
        padding: 0 10px;
        min-height: 34px
    }
}

@media (max-width: 420px) {
    .stats-grid {
        grid-template-columns: 1fr
    }

    .admin-sidebar {
        grid-template-columns: 1fr
    }

    .nav-item {
        padding: 9px 10px;
        font-size: 12px
    }

    .panel {
        padding: 10px;
        border-radius: 14px
    }

    .panel-head h2 {
        font-size: 15px
    }

    .catalog-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px
    }

    .catalog-card {
        padding: 10px;
        border-radius: 12px
    }

    .catalog-card strong {
        font-size: 12px
    }

    .drawer-actions button {
        width: 100%;
        min-width: 0
    }
}

.collapsible-panel.is-collapsed .panel-collapse-body,
.panel-collapse-body[hidden] {
    display: none !important
}

/* ── Chat Toast 通知 ── */
.chat-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
    z-index: 99999;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(30, 30, 30, .92);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
    max-width: min(90vw, 480px);
    text-align: center;
    word-break: break-word
}

.chat-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto
}

.chat-toast.error {
    background: rgba(255, 59, 48, .92)
}

.chat-toast.success {
    background: rgba(52, 199, 89, .92)
}

.chat-toast.warning {
    background: rgba(255, 149, 0, .92)
}

.friendly-error-card {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(214, 68, 68, .22);
    border-radius: 8px;
    background: rgba(255, 247, 247, .78);
    color: #3b1d1d
}

.friendly-error-card p {
    margin: 0;
    line-height: 1.65
}

.friendly-error-details {
    color: #6a3a3a;
    font-size: 12px
}

.friendly-error-details summary {
    cursor: pointer;
    user-select: none;
    width: fit-content
}

.friendly-error-details pre {
    margin: 8px 0 0;
    max-height: 220px;
    overflow: auto;
    padding: 10px;
    border-radius: 8px;
    background: rgba(40, 30, 30, .06);
    color: #3a2a2a;
    white-space: pre-wrap;
    word-break: break-word
}

.friendly-error-request {
    margin: 6px 0 0;
    color: #765
}

.skill-error-card {
    display: grid;
    gap: 8px;
    border-color: rgba(214, 68, 68, .18);
    background: linear-gradient(180deg, rgba(255, 250, 248, .96), rgba(255, 246, 246, .88));
    color: #3b1d1d
}

.skill-error-card p {
    margin: 0;
    line-height: 1.7
}

.skill-error-card .friendly-error-details {
    margin-top: 2px
}

/* ── 用户消息中的附件图片 ── */
.msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px
}

.msg-attachments img {
    max-width: 180px;
    max-height: 180px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(196, 199, 207, .4);
    cursor: pointer;
    transition: transform .18s var(--ease)
}

.msg-attachments img:hover {
    transform: scale(1.03)
}

@media (max-width: 640px) {
    .msg-attachments img {
        max-width: 120px;
        max-height: 120px;
        border-radius: 8px
    }
}

/* ── 图片全屏预览 ── */
.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease)
}

.image-lightbox.open {
    opacity: 1;
    pointer-events: auto
}

.image-lightbox img {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.4)
}

.image-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.2);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .18s var(--ease)
}

.image-lightbox-close:hover {
    background: rgba(255,255,255,.35)
}

/* ---- Markdown Tables ---- */
.table-wrap {
    overflow-x: auto;
    margin: 8px 0;
}
.msg-text table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9em;
}
.msg-text th,
.msg-text td {
    border: 1px solid var(--border, rgba(255,255,255,.12));
    padding: 6px 10px;
}
.msg-text th {
    background: var(--surface-2, rgba(255,255,255,.06));
    font-weight: 600;
}
.msg-text tr:hover td {
    background: rgba(255,255,255,.03);
}

/* ---- Task Lists ---- */
.task-list {
    list-style: none;
    padding-left: 4px;
}
.task-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.task-item input[type="checkbox"] {
    margin-top: 4px;
    accent-color: var(--primary, #6c5ce7);
    pointer-events: none;
}

/* ── Task 22/27: 对话框更窄 + 输入框不重合 ── */
.msg-content { gap: 6px }

/* ── Task 20: 后台移动端进一步紧凑化 ── */
@media (max-width: 960px) {
    .admin-shell { padding: 16px }
    .admin-topbar { padding-bottom: 8px; margin-bottom: 8px }
    .panel { padding: 14px; border-radius: 16px }
    .panel-head h2 { font-size: 17px }
    .table-head, .row { font-size: 11px; gap: 4px; padding: 8px 10px }
    .row { padding: 10px }
    .user-grid { grid-template-columns: minmax(0, .5fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .7fr) minmax(0, .8fr) minmax(0, .5fr) }
    .model-grid { font-size: 11px }
    .pager { gap: 4px }
    .pager button { padding: 6px 10px; font-size: 12px }
    .panel-inline-note { font-size: 11px }
}

@media (max-width: 640px) {
    .admin-shell { padding: 10px }
    .panel { padding: 10px; border-radius: 14px }
    .panel-head h2 { font-size: 15px }
    .panel-head.compact-head { flex-direction: column; gap: 6px }
    .table-head, .row { font-size: 10px; padding: 6px 8px }
    .user-grid { grid-template-columns: repeat(6, minmax(60px, 1fr)); overflow-x: auto }
    .model-grid { overflow-x: auto }
    .pager { gap: 2px }
    .pager button { padding: 5px 8px; font-size: 11px }
    .stat { padding: 8px; border-radius: 12px }
    .stat b { font-size: 20px }
    .stat small { font-size: 10px }
}

/* ── Task 23: 个人中心移动端美化 ── */
.profile-hero { padding: 16px 20px; border-radius: 20px }
.profile-hero h1 { font-size: 18px }
.profile-shell { gap: 12px; margin: 10px auto 20px; padding: 0 8px 16px }
.profile-card { padding: 14px; border-radius: 18px }
.profile-grid { gap: 12px }
.profile-banner { display: none }
.profile-summary-grid { gap: 12px }

@media (max-width: 768px) {
    .profile-hero { padding: 12px 14px; border-radius: 16px }
    .profile-hero h1 { font-size: 16px }
    .profile-shell { gap: 10px; margin: 8px auto 16px }
    .profile-card { padding: 12px; border-radius: 16px }
    .profile-grid { grid-template-columns: 1fr; gap: 10px }
    .profile-summary-grid { grid-template-columns: 1fr; gap: 10px }
    .profile-display-title h2 { font-size: 16px }
    .card-title-row h2 { font-size: 16px; min-width: 0; overflow-wrap: anywhere; word-break: break-word }
    .card-title-row .hint { min-width: 0; overflow-wrap: anywhere; word-break: break-word }
    .sf-key-promo { min-width: 0; overflow-wrap: anywhere; word-break: break-word }
    .sf-key-promo p { font-size: 13px }
    .sf-key-promo a { font-size: 13px; word-break: break-all }
    .sf-key-promo .hint { font-size: 12px }
    .profile-qq-binding-row { gap: 6px }
    .profile-qq-binding-row .inline-link,
    .profile-qq-binding-row .ghost.inline-link { font-size: 11px; padding: 3px 8px }
    .profile-alert { font-size: 13px; padding: 10px 12px }
    .profile-summary-meta { font-size: 11px }
    .profile-summary-tags .status-pill { font-size: 10px; padding: 3px 8px }
    .profile-card-accent { padding: 12px }
    .info-list { gap: 6px }
    .info-list dt { font-size: 11px }
    .info-list dd { font-size: 13px }
    .metric-card { padding: 10px; border-radius: 12px }
    .metric-card strong { font-size: 16px }
    .metric-card span { font-size: 10px }
    .profile-table-wrap { font-size: 11px }
    .profile-reward-summary { grid-template-columns: 1fr 1fr; gap: 6px }
    .profile-reward-actions button { padding: 8px 12px; font-size: 12px }
    .invite-share-box { padding: 10px; gap: 8px }
    .invite-share-field strong { font-size: 14px }
    .invite-link-text { min-height: 50px; font-size: 11px; padding: 8px }
    .invite-share-actions { grid-template-columns: 1fr }
    .usage-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px }
    .usage-stat { padding: 8px; border-radius: 10px }
    .usage-stat strong { font-size: 14px }
    .usage-stat span { font-size: 10px }
    .usage-quick-action { padding: 10px }
    .usage-chart-wrap { padding: 10px }
    .recent-activity-card { padding: 10px }
    .recent-activity-card td, .recent-activity-card th { padding: 6px 8px; font-size: 11px }
    .job-summary-grid { grid-template-columns: 1fr; gap: 6px }
    .job-summary-card { padding: 8px; border-radius: 10px }
    .job-summary-card strong { font-size: 14px }
    .job-summary-card span { font-size: 10px }
}

@media (max-width: 420px) {
    .profile-shell { padding: 0 6px 12px }
    .profile-card { padding: 10px; border-radius: 14px }
    .profile-hero { padding: 10px 12px }
    .profile-hero h1 { font-size: 14px }
    .profile-display-title h2 { font-size: 14px }
    .card-title-row h2 { font-size: 14px }
    .sf-key-promo p { font-size: 12px }
    .sf-key-promo a { font-size: 12px }
    .sf-key-promo .hint { font-size: 11px }
    .profile-qq-binding-row .inline-link,
    .profile-qq-binding-row .ghost.inline-link { font-size: 10px; padding: 2px 6px }
    .profile-alert { font-size: 12px; padding: 8px 10px }
    .metric-card strong { font-size: 14px }
    .invite-share-field strong { font-size: 12px }
    .usage-stat-grid { grid-template-columns: 1fr }
    .profile-reward-summary { grid-template-columns: 1fr }
    .info-list dd { font-size: 12px }
}

/* ── Task 24: PPT 对话框移动端适配 ── */
@media (max-width: 768px) {
    .ppt-workflow-dialog { padding: 8px }
    .ppt-workflow-dialog-card { padding: 12px; border-radius: 16px; max-height: calc(100vh - 16px) }
    .ppt-workflow-dialog-card h2 { font-size: 16px }
    .ppt-workflow-inline-grid { grid-template-columns: 1fr; gap: 8px }
    .ppt-task-meta-grid { grid-template-columns: 1fr; gap: 8px }
    .ppt-step-list { gap: 8px }
    .ppt-step-card { padding: 10px; border-radius: 12px }
    .ppt-step-card-head { gap: 8px; margin-bottom: 6px }
    .ppt-step-card-head span { font-size: 11px }
    .ppt-preview-grid { grid-template-columns: 1fr; gap: 8px }
    .ppt-preview-slide { padding: 10px; border-radius: 12px }
    .ppt-preview-slide-head { gap: 8px }
    .ppt-preview-slide-head span { font-size: 11px }
    .ppt-preview-slide-caption { font-size: 11px; margin: 6px 0 0 }
    .ppt-task-guidance pre { font-size: 12px }
    .ppt-task-section strong { font-size: 13px; margin-bottom: 6px }
    .ppt-task-meta-card strong { font-size: 12px }
}

@media (max-width: 420px) {
    .ppt-workflow-dialog { padding: 6px }
    .ppt-workflow-dialog-card { padding: 10px; border-radius: 14px }
    .ppt-workflow-dialog-card h2 { font-size: 14px }
    .ppt-step-card { padding: 8px; border-radius: 10px }
    .ppt-preview-slide { padding: 8px; border-radius: 10px }
    .ppt-preview-slide-canvas { border-radius: 10px }
    .ppt-preview-slide-canvas img, .ppt-preview-slide img { border-radius: 10px }
}

/* ── Task 25: 后台主流模型框文字溢出修复（补充） ── */
.catalog-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
}

@media (max-width: 640px) {
    .catalog-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 8px
    }
    .catalog-card {
        padding: 10px;
        gap: 4px
    }
    .catalog-card strong { font-size: 12px }
    .catalog-card .hint, .catalog-card small { font-size: 10px }
}

/* ── Task 26: 账号管理新增列样式 ── */
.user-card-field .cell-label + div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.user-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 0
}

.user-pagination button {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 8px
}

.user-pagination button.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand)
}

.user-pagination button:disabled {
    opacity: .4;
    cursor: not-allowed
}

.user-pagination span {
    font-size: 12px;
    color: var(--muted)
}

/* ── Task 27: 输入框不被遮挡（补充移动端） ── */
@media (max-width: 768px) {
    .messages { padding-bottom: 80px }
    .composer-submit-btn { width: 40px; min-width: 40px; height: 40px; font-size: 16px }
}

.skill-page-body {
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(180deg, #f5f3ee 0%, #ece8dc 100%);
    color: #1f2937
}

.skill-page-shell {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 20px 56px
}

.skill-page-topbar,
.skill-page-hero-card,
.skill-filter-panel,
.skill-content-section {
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(213, 205, 187, .85);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(84, 72, 49, .08)
}

.skill-page-topbar {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    padding: 28px 30px;
    margin-bottom: 20px
}

.skill-page-topbar h1,
.skill-page-hero-card h2,
.skill-section-head h3 {
    margin: 0;
    color: #1f2937
}

.skill-page-lead,
.skill-page-hero-copy p,
.skill-filter-head p,
.skill-module-card p,
.skill-empty-card,
.skill-work-meta,
.skill-history-card span,
.skill-history-card time {
    color: #5b6472
}

.skill-page-actions,
.skill-page-hero-metrics,
.skill-filter-tabs,
.skill-module-tags,
.skill-module-actions,
.skill-work-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.skill-page-actions {
    justify-content: flex-end
}

.skill-page-hero-card {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 18px;
    padding: 28px 30px;
    margin-bottom: 20px
}

.skill-page-kicker,
.skill-module-badge,
.skill-module-type,
.skill-module-tags span,
.skill-filter-tabs button,
.skill-history-card span {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase
}

.skill-page-kicker,
.skill-module-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(86, 107, 255, .1);
    color: #4154d8;
    font-weight: 700
}

.skill-page-hero-metrics {
    align-content: flex-start
}

.skill-page-hero-metrics div {
    flex: 1 1 150px;
    min-width: 140px;
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(243, 245, 255, .95), rgba(255, 255, 255, .92));
    border: 1px solid rgba(197, 205, 255, .8)
}

.skill-page-hero-metrics strong {
    display: block;
    font-size: 28px;
    color: #1e3a8a
}

.skill-filter-panel,
.skill-content-section {
    padding: 24px 26px;
    margin-bottom: 20px;
    transition: border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease)
}

.skill-content-section[data-collapsed="1"] {
    background: rgba(255, 255, 255, .74)
}

.skill-filter-head,
.skill-section-head,
.skill-module-head,
.skill-history-card,
.skill-category-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start
}

.skill-section-head {
    position: relative
}

.skill-section-toggle {
    min-width: 76px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(79, 70, 229, .14);
    background: rgba(79, 70, 229, .08);
    color: #4f46e5;
    flex: 0 0 auto
}

.skill-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 18px
}

.skill-category-card,
.skill-module-card,
.skill-empty-card,
.skill-history-card {
    border-radius: 22px;
    border: 1px solid rgba(214, 219, 231, .95);
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(245, 247, 252, .95));
    padding: 20px
}

.skill-category-card {
    cursor: pointer;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease)
}

.skill-category-card:hover,
.skill-category-card.active {
    transform: translateY(-2px);
    border-color: rgba(79, 70, 229, .55);
    box-shadow: 0 14px 34px rgba(79, 70, 229, .12)
}

.skill-category-card h4,
.skill-module-card h4,
.skill-history-card strong {
    margin: 14px 0 10px;
    color: #1f2937
}

.skill-category-card p,
.skill-module-card p,
.skill-module-note,
.skill-work-meta,
.skill-history-card time {
    color: #667085
}

.skill-category-count {
    font-size: 24px;
    line-height: 1;
    color: #1e3a8a
}

.skill-filter-tabs button {
    border: 1px solid #d8deea;
    background: #fff;
    color: #506078;
    border-radius: 999px;
    padding: 10px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.skill-filter-tabs button.active {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #fff
}

.skill-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(79, 70, 229, .1);
    color: inherit
}

.skill-filter-tabs button.active .skill-tab-count {
    background: rgba(255, 255, 255, .18)
}
body.skill-modal-open {
    overflow: hidden
}

.skill-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 18px
}

.skill-model-picker-trigger {
    width: fit-content;
    margin-top: 10px
}

.skill-model-picker-summary,
.skill-model-picker-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px
}

.skill-model-picker-empty {
    color: #667085
}

.skill-model-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4154d8;
    font-size: 12px;
    font-weight: 600
}

.skill-model-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px
}

.skill-model-modal[hidden] {
    display: none !important
}

.skill-model-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .46)
}

.skill-model-modal-dialog {
    position: relative;
    width: min(960px, 100%);
    max-height: min(86vh, 920px);
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(214, 219, 231, .95);
    background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(247,249,253,.97));
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
    display: flex;
    flex-direction: column
}

.skill-model-modal-head,
.skill-model-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px
}

.skill-model-modal-body {
    overflow: auto;
    padding: 0 22px 22px
}

.skill-model-family-group + .skill-model-family-group {
    margin-top: 18px
}

.skill-model-family-title {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #4f46e5;
    letter-spacing: .04em;
    text-transform: uppercase
}

.skill-model-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 10px
}

.skill-model-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(214, 219, 231, .95);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    cursor: pointer;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease)
}

.skill-model-option.is-selected {
    border-color: rgba(79,70,229,.55);
    box-shadow: 0 10px 24px rgba(79,70,229,.10);
    transform: translateY(-1px)
}

.skill-model-option input {
    margin: 0;
    width: 18px;
    height: 18px
}

.skill-model-option-main {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.skill-model-option-main strong {
    color: #1f2937
}

.skill-model-option-main small {
    color: #667085
}

.skill-vote-card h5 {
    font-size: 20px;
    color: #1e3a8a
}

.skill-module-card.is-featured {
    border-color: rgba(79, 70, 229, .42);
    box-shadow: 0 16px 36px rgba(79, 70, 229, .10)
}

.skill-module-type,
.skill-module-tags span,
.skill-module-meta,
.skill-module-protected {
    color: #6b7280
}

.skill-module-meta,
.skill-work-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
    font-size: 13px
}

.skill-module-protected {
    font-weight: 700;
    color: #7c3aed
}

.skill-module-capability {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    border: 1px solid transparent;
}

.skill-module-capability.is-workflow {
    color: #16665d;
    background: rgba(34, 139, 126, .10);
    border-color: rgba(34, 139, 126, .18);
}

.skill-module-capability.is-conversation {
    color: #7c3aed;
    background: rgba(124, 58, 237, .10);
    border-color: rgba(124, 58, 237, .16);
}

.skill-module-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px
}

.skill-module-tags span {
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef2ff
}

.skill-module-footer {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px
}

.skill-module-note {
    font-size: 13px;
    line-height: 1.6
}

.skill-module-actions {
    margin-top: 0
}

.skill-module-actions .primary,
.skill-module-actions .ghost,
.skill-page-actions .ghost {
    text-decoration: none
}

.skill-work-card .skill-module-badge {
    background: rgba(16, 185, 129, .12);
    color: #0f766e
}

.skill-history-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 18px
}

.skill-empty-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    text-align: center
}

@media (max-width: 900px) {
    .skill-page-topbar,
    .skill-page-hero-card,
    .skill-filter-head,
    .skill-section-head {
        flex-direction: column
    }

    .skill-page-hero-card {
        grid-template-columns: 1fr
    }
}

@media (max-width: 768px) {
    .skill-model-modal {
        padding: 0
    }

    .skill-model-modal-dialog {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0
    }

    .skill-model-modal-head,
    .skill-model-modal-actions,
    .skill-model-modal-body {
        padding-left: 14px;
        padding-right: 14px
    }

    .skill-model-checklist {
        grid-template-columns: 1fr
    }

    .topbar {
        margin: 8px 10px 0;
        padding: 10px 12px 8px;
        border-radius: 20px;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 12px 30px rgba(17, 17, 17, .10)
    }

    .topbar-title-wrap {
        gap: 8px
    }

    .topbar h1 {
        font-size: 22px;
        margin-bottom: 6px
    }

    .topbar p,
    .topbar .eyebrow {
        font-size: 11px
    }

    .app-shell {
        grid-template-columns: 1fr;
        min-height: 100vh;
        background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.28)), var(--bg)
    }

    .chat-main {
        gap: 10px;
        padding-bottom: calc(env(safe-area-inset-bottom) + 10px)
    }

    .hero-empty {
        margin: 0 10px;
        padding: 18px 16px 14px;
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,246,241,.94));
        border: 1px solid rgba(17,17,17,.05);
        box-shadow: 0 16px 36px rgba(17,17,17,.08)
    }

    .messages {
        padding-left: 10px;
        padding-right: 10px
    }

    .composer {
        margin: 0 10px 8px;
        padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
        border: 1px solid rgba(17,17,17,.06);
        border-radius: 24px;
        background: rgba(255,255,255,.94);
        box-shadow: 0 18px 40px rgba(17,17,17,.12)
    }

    .composer textarea {
        min-height: 46px;
        border-radius: 16px;
        background: #fff
    }

    .composer-actions {
        gap: 8px
    }

    .voice-call-trigger,
    .mobile-voice-input-btn,
    .composer-submit-btn {
        box-shadow: 0 8px 20px rgba(17,17,17,.08)
    }

    .skill-page-topbar,
    .skill-page-hero-card,
    .skill-filter-panel,
    .skill-content-section {
        border-radius: 20px
    }

    .skill-page-hero-card {
        padding: 22px 18px
    }

    .skill-content-section[data-collapsed="1"] {
        padding-top: 18px;
        padding-bottom: 18px
    }
}

.skill-workbench-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px
}

.skill-tool-card,
.skill-analysis-card {
    border-radius: 22px;
    border: 1px solid rgba(214, 219, 231, .95);
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(245, 247, 252, .95));
    padding: 20px
}

.skill-tool-head,
.skill-inline-actions,
.skill-pagination,
.skill-kv-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center
}

.skill-tool-copy,
.skill-tool-status,
.skill-field span,
.skill-kv-list span,
.skill-analysis-card p,
.skill-analysis-card li,
.skill-pre {
    color: #667085
}

.skill-tool-form,
.skill-form-grid,
.skill-result-grid,
.skill-kv-list,
.skill-text-block,
.skill-toolbar {
    display: grid;
    gap: 14px
}

.skill-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.skill-field {
    display: grid;
    gap: 8px
}

.skill-field input,
.skill-field textarea,
.skill-field select {
    width: 100%;
    border-radius: 14px;
    border: 1px solid #d8deea;
    background: #fff;
    padding: 12px 14px;
    font: inherit;
    color: #1f2937;
    box-sizing: border-box
}

.skill-field textarea {
    resize: vertical;
    min-height: 110px
}

.skill-ocr-review {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(197, 205, 255, .9);
    background: linear-gradient(180deg, rgba(243, 245, 255, .9), rgba(255, 255, 255, .95))
}

.skill-ocr-review[hidden] {
    display: none
}

.skill-ocr-review-head,
.skill-ocr-review-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start
}

.skill-ocr-review-head p,
.skill-ocr-preview-card figcaption,
.skill-ocr-review-meta {
    margin: 0;
    color: #667085;
    font-size: 13px
}

.skill-ocr-review-head strong {
    color: #1f2937
}

.skill-ocr-review-meta {
    justify-content: flex-end;
    flex-wrap: wrap;
    color: #4154d8;
    font-weight: 700;
    text-align: right
}

.skill-ocr-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

.skill-ocr-preview-card {
    margin: 0;
    display: grid;
    gap: 10px
}

.skill-ocr-preview-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border-radius: 16px;
    border: 1px solid rgba(214, 219, 231, .95);
    background: #fff
}

.skill-tool-status {
    margin-top: 14px;
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(79, 70, 229, .08)
}

.skill-tool-status[data-mode="success"] {
    background: rgba(16, 185, 129, .12);
    color: #0f766e
}

.skill-tool-status[data-mode="error"] {
    background: rgba(239, 68, 68, .1);
    color: #b91c1c
}

.skill-tool-result {
    margin-top: 14px;
    display: grid;
    gap: 14px
}

.skill-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.skill-analysis-card h5,
.skill-analysis-card h6,
.skill-tool-card h4 {
    margin: 0;
    color: #1f2937
}

.skill-analysis-card h5 {
    margin-bottom: 14px
}

.skill-kv-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 8px
}

.skill-kv-list div {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(238, 242, 255, .72);
    align-items: flex-start;
    flex-direction: column
}

.skill-kv-list strong,
.skill-tool-side-note {
    color: #1e3a8a
}

.skill-text-block ul {
    margin: 10px 0 0;
    padding-left: 18px
}

.skill-pre {
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    line-height: 1.6
}

.skill-pre--analysis {
    font-family: inherit;
    font-size: 14px
}

.session-detail-block {
    margin-top: 12px;
    padding: 16px;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    max-height: 60vh;
    overflow-y: auto
}

.session-detail-block .skill-pre--analysis {
    white-space: pre-wrap;
    word-break: break-word;
    color: #374151;
    line-height: 1.8;
    font-size: 13px
}

.skill-analysis-card--diff {
    padding: 18px;
    gap: 14px
}

.skill-diff-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

.skill-diff-panel {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(214, 219, 231, .95);
    background: rgba(248, 250, 252, .88)
}

.skill-diff-panel header {
    display: flex;
    align-items: center
}

.skill-diff-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em
}

.skill-diff-badge--before {
    color: #b42318;
    background: rgba(254, 226, 226, .9)
}

.skill-diff-badge--after {
    color: #027a48;
    background: rgba(220, 252, 231, .9)
}

.skill-diff-content {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.9;
    color: #1f2937;
    font-size: 14px
}

.skill-diff-token {
    border-radius: 8px;
    transition: background-color .15s ease, color .15s ease
}

.skill-diff-token--removed {
    background: rgba(254, 226, 226, .95);
    color: #b42318;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px
}

.skill-diff-token--added {
    background: rgba(220, 252, 231, .95);
    color: #027a48;
    font-weight: 600
}

@media (max-width: 900px) {
    .skill-diff-grid {
        grid-template-columns: 1fr
    }
}

.skill-toolbar {
    grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(160px, .7fr)) auto;
    margin-top: 18px;
    align-items: end
}

.skill-field--toolbar {
    min-width: 0
}

.skill-pagination {
    justify-content: flex-end;
    margin-top: 14px;
    color: #667085
}

@media (max-width: 1100px) {
    .skill-workbench-grid,
    .skill-result-grid,
    .skill-form-grid,
    .skill-ocr-preview-grid {
        grid-template-columns: 1fr
    }

    .skill-toolbar {
        grid-template-columns: 1fr 1fr
    }
}


.skill-theme-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px
}

.skill-theme-overview-card,
.skill-theme-panel {
    border-radius: 22px;
    border: 1px solid rgba(214, 219, 231, .95);
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(245, 247, 252, .95));
    padding: 20px
}

.skill-theme-overview-card strong {
    display: block;
    font-size: 30px;
    line-height: 1;
    color: #1e3a8a
}

.skill-theme-overview-card span {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #4154d8;
    font-weight: 700
}

.skill-theme-overview-card p {
    margin: 12px 0 0;
    color: #667085;
    line-height: 1.6
}

.skill-theme-stack {
    display: grid;
    gap: 16px;
    margin-top: 16px
}

.skill-theme-panel .skill-section-head {
    margin-bottom: 0
}

.skill-theme-panel .skill-card-grid {
    margin-top: 16px
}

.skill-theme-card--story .skill-module-badge {
    background: rgba(59, 130, 246, .12);
    color: #1d4ed8
}

.skill-theme-card--video .skill-module-badge {
    background: rgba(168, 85, 247, .12);
    color: #7c3aed
}

.skill-theme-card--community .skill-module-badge {
    background: rgba(16, 185, 129, .12);
    color: #0f766e
}

@media (max-width: 1100px) {
    .skill-theme-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 640px) {
    .skill-theme-overview {
        grid-template-columns: 1fr
    }
}

/* ==== Fix: 卡片高度对齐 & 按钮推底 ==== */
.skill-module-card,
.skill-theme-card--story,
.skill-theme-card--video,
.skill-theme-card--community,
.skill-favorite-card,
.skill-work-card {
    display: flex;
    flex-direction: column
}

.skill-module-card .skill-module-footer,
.skill-module-card > .skill-module-actions {
    margin-top: auto
}

.skill-module-card > p,
.skill-module-card > h4,
.skill-module-card > .skill-module-head,
.skill-module-card > .skill-module-meta,
.skill-module-card > .skill-module-tags {
    flex-shrink: 0
}

.skill-theme-overview-card {
    display: flex;
    flex-direction: column
}
.skill-theme-overview-card p {
    margin-top: auto
}

/* 联动助手卡片美化 */
.skill-theme-overview-card:last-child {
    background: linear-gradient(135deg, rgba(79,70,229,.06), rgba(99,102,241,.10));
    border-color: rgba(99,102,241,.28);
    position: relative;
    overflow: hidden
}
.skill-theme-overview-card:last-child::before {
    content: '→';
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 20px;
    color: rgba(99,102,241,.18);
    font-weight: 700
}
.skill-theme-overview-card:last-child strong {
    color: #4f46e5
}
.skill-theme-overview-card:last-child span {
    color: #6366f1
}

/* 移动端适配增强 */
@media (max-width: 900px) {
    .skill-page-shell {
        padding: 16px 12px 40px
    }
    .skill-page-topbar,
    .skill-page-hero-card,
    .skill-filter-panel,
    .skill-content-section {
        padding: 16px
    }
    .skill-workbench-grid,
    .skill-result-grid,
    .skill-form-grid {
        grid-template-columns: 1fr
    }
    .skill-toolbar {
        grid-template-columns: 1fr
    }
    .skill-page-hero-card {
        grid-template-columns: 1fr
    }
    .skill-page-actions {
        width: 100%;
        justify-content: flex-start
    }
    .skill-page-topbar h1 {
        font-size: 22px
    }
    .skill-module-card .skill-module-actions--dual {
        flex-direction: column
    }
    .skill-module-card .skill-module-actions--dual .ghost,
    .skill-module-card .skill-module-actions--dual .primary {
        width: 100%
    }
    .skill-inline-actions {
        flex-direction: column
    }
    .skill-inline-actions .primary,
    .skill-inline-actions .ghost {
        width: 100%;
        min-height: 44px
    }
    .skill-ocr-review-head {
        flex-direction: column
    }
    .skill-ocr-review-meta {
        width: 100%;
        justify-content: flex-start;
        text-align: left
    }
}

@media (max-width: 640px) {
    .skill-page-shell {
        padding: 12px 8px 32px
    }
    .skill-page-topbar,
    .skill-page-hero-card,
    .skill-filter-panel,
    .skill-content-section {
        padding: 14px;
        border-radius: 18px
    }
    .skill-card-grid {
        grid-template-columns: 1fr
    }
    .skill-category-grid {
        grid-template-columns: 1fr
    }
    .skill-history-list {
        grid-template-columns: 1fr
    }
    .skill-theme-overview {
        grid-template-columns: 1fr
    }
    .skill-filter-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 4px
    }
    .skill-filter-tabs button {
        scroll-snap-align: start;
        flex-shrink: 0
    }
    .skill-tool-card,
    .skill-analysis-card {
        padding: 16px
    }
    .skill-page-hero-metrics div {
        min-width: 100%
    }
    .skill-module-card {
        padding: 16px
    }
    .skill-ocr-preview-grid {
        grid-template-columns: 1fr
    }
    .skill-ocr-preview-card img {
        min-height: 180px;
        aspect-ratio: auto
    }
}

/* PPT 任务列表挤压修复 */
.ppt-workflow-dialog-body {
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr)
}
.ppt-workflow-task-shell {
    min-height: 0;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr)
}
.ppt-task-detail {
    min-width: 0;
    overflow: auto;
    word-break: break-word;
    max-width: 100%
}
.ppt-task-detail .ppt-preview-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))
}
.ppt-task-detail .ppt-step-list {
    width: 100%
}
.ppt-task-detail .ppt-task-detail-empty {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center
}
.ppt-task-detail .skill-module-actions--dual {
    flex-wrap: wrap
}
.ppt-task-detail .skill-module-actions--dual .ghost {
    font-size: 12px;
    padding: 6px 10px
}
.ppt-preview-slide-canvas img,
.ppt-preview-slide img {
    max-width: 100%;
    height: auto
}
.ppt-preview-slide {
    word-break: break-word;
    overflow: hidden
}

/* ── Skill 页面卡片高度对齐 + 美化主题区块 + 移动端适配 ── */

/* 统一卡片高度：让内容区撑满，按钮区自动沉底 */
.skill-module-card,
.skill-category-card,
.skill-empty-card,
.skill-history-card {
    display: flex;
    flex-direction: column;
    min-height: 0
}

.skill-module-card > *:last-child,
.skill-category-card > *:last-child {
    margin-top: auto
}

/* 主题概览卡片统一高度 */
.skill-theme-overview-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 18px;
    border-radius: 18px
}

.skill-theme-overview-card strong {
    font-size: 26px;
    line-height: 1.1
}

.skill-theme-overview-card span {
    font-size: 11px
}

.skill-theme-overview-card p {
    margin-top: auto;
    font-size: 12px;
    line-height: 1.5
}

/* 主题面板美化 */
.skill-theme-panel {
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,255,.94));
    border: 1px solid rgba(214,219,231,.9)
}

.skill-theme-panel .skill-section-head {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(214,219,231,.6)
}

.skill-theme-panel .skill-section-head h4 {
    margin: 0;
    font-size: 15px
}

.skill-theme-panel .skill-section-head .hint {
    font-size: 11px;
    margin: 0
}

.skill-theme-panel .skill-card-grid {
    margin-top: 14px
}

/* Skill 页面全端文字防溢出 */
.skill-page-shell,
.skill-card-grid,
.skill-category-grid,
.skill-workbench-grid,
.skill-history-list,
.skill-result-grid,
.skill-diff-grid,
.skill-form-grid,
.skill-tool-card,
.skill-analysis-card,
.skill-module-card,
.skill-category-card,
.skill-work-card,
.skill-history-card,
.skill-empty-card,
.skill-theme-panel,
.skill-theme-overview-card,
.skill-ocr-review,
.skill-diff-panel,
.skill-text-block,
.skill-module-footer,
.skill-module-actions {
    min-width: 0;
    max-width: 100%
}

.skill-page-shell :is(h1, h2, h3, h4, h5, h6, p, span, strong, a, button, label, small, li, time, figcaption),
.skill-tool-copy,
.skill-tool-status,
.skill-tool-side-note,
.skill-page-lead,
.skill-module-note,
.skill-work-meta,
.skill-module-meta,
.skill-pre,
.skill-diff-content {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%
}

.skill-tool-head,
.skill-inline-actions,
.skill-module-actions,
.skill-page-actions,
.skill-module-meta,
.skill-work-meta,
.skill-module-tags,
.skill-ocr-review-head,
.skill-ocr-review-meta,
.skill-section-head,
.skill-page-topbar {
    flex-wrap: wrap
}

.skill-tool-head > div,
.skill-page-topbar > div,
.skill-section-head > div,
.skill-module-footer,
.skill-module-actions,
.skill-tool-form > *,
.skill-analysis-card > *,
.skill-tool-card > * {
    min-width: 0;
    max-width: 100%
}

.skill-module-card h4,
.skill-category-card h4 {
    margin: 10px 0 6px;
    font-size: 14px;
    line-height: 1.3
}

.skill-module-card p,
.skill-category-card p {
    font-size: 12px;
    line-height: 1.5;
    display: block;
    overflow: visible
}

.skill-tool-side-note {
    max-width: 100%
}

.skill-category-count {
    font-size: 22px
}

/* 卡片内链接作品文字截断 */
.skill-work-card p {
    font-size: 12px;
    line-height: 1.5
}

/* 技能页面整体紧凑 */
.skill-page-shell {
    padding: 24px 16px 40px
}

.skill-page-topbar {
    padding: 20px 24px;
    margin-bottom: 16px
}

.skill-page-topbar h1 {
    font-size: 20px
}

.skill-page-hero-card {
    padding: 20px 24px;
    border-radius: 20px
}

.skill-page-hero-card h2 {
    font-size: 18px
}

.skill-page-hero-metrics {
    gap: 12px
}

.skill-page-hero-metrics strong {
    font-size: 22px
}

.skill-page-hero-metrics span {
    font-size: 11px
}

.skill-content-section {
    padding: 18px 22px;
    border-radius: 20px
}

.skill-section-head h3 {
    font-size: 16px;
    margin: 0
}

.skill-section-head .hint {
    font-size: 11px
}

.skill-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 14px
}

.skill-category-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 14px
}

.skill-category-card {
    padding: 14px;
    border-radius: 16px
}

.skill-module-card {
    padding: 16px;
    border-radius: 18px
}

/* 主题概览数据卡片美化 */
.skill-theme-overview {
    gap: 12px;
    margin-top: 14px
}

.skill-theme-overview-card strong {
    background: linear-gradient(135deg, #1e3a8a, #4154d8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

/* 技能工具表单美化 */
.skill-tool-card {
    padding: 18px;
    border-radius: 20px
}

.skill-tool-head {
    margin-bottom: 10px
}

.skill-tool-head h4 {
    font-size: 15px;
    margin: 8px 0 4px
}

.skill-tool-copy {
    font-size: 12px;
    line-height: 1.55;
    margin: 0 0 14px
}

.skill-field span {
    font-size: 11px
}

.skill-field input,
.skill-field select,
.skill-field textarea {
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 8px
}

.skill-inline-actions {
    gap: 8px;
    margin-top: 10px
}

.skill-inline-actions button {
    padding: 7px 14px;
    font-size: 12px;
    border-radius: 8px
}

/* 移动端适配 */
@media (max-width: 1024px) {
    .skill-theme-overview {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 768px) {
    .skill-page-shell {
        padding: 14px 10px 28px
    }

    .skill-page-topbar {
        padding: 14px 16px;
        margin-bottom: 12px;
        flex-direction: column;
        gap: 12px
    }

    .skill-page-topbar h1 {
        font-size: 17px
    }

    .skill-page-hero-card {
        padding: 14px 16px;
        border-radius: 16px
    }

    .skill-page-hero-card h2 {
        font-size: 16px
    }

    .skill-page-hero-metrics {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px
    }

    .skill-page-hero-metrics strong {
        font-size: 18px
    }

    .skill-page-hero-metrics span {
        font-size: 10px
    }

    .skill-content-section {
        padding: 14px 14px;
        border-radius: 16px
    }

    .skill-section-head h3 {
        font-size: 15px
    }

    .skill-card-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 10px;
        margin-top: 12px
    }

    .skill-category-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 8px
    }

    .skill-module-card,
    .skill-tool-card {
        padding: 12px;
        border-radius: 14px
    }

    .skill-category-card {
        padding: 10px;
        border-radius: 12px
    }

    .skill-theme-overview {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-top: 10px
    }

    .skill-theme-overview-card {
        padding: 12px;
        border-radius: 14px
    }

    .skill-theme-overview-card strong {
        font-size: 20px
    }

    .skill-theme-overview-card span {
        font-size: 10px
    }

    .skill-theme-overview-card p {
        font-size: 11px
    }

    .skill-theme-panel {
        padding: 12px;
        border-radius: 14px
    }

    .skill-theme-panel .skill-section-head {
        margin-bottom: 10px;
        padding-bottom: 8px
    }

    .skill-theme-panel .skill-section-head h4 {
        font-size: 14px
    }

    .skill-tool-card {
        padding: 12px
    }

    .skill-tool-head h4 {
        font-size: 14px
    }

    .skill-tool-copy {
        font-size: 11px
    }

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

    .skill-field input,
    .skill-field select,
    .skill-field textarea {
        font-size: 11px;
        padding: 6px 8px
    }

    .skill-inline-actions button {
        padding: 6px 10px;
        font-size: 11px
    }

    .skill-toolbar {
        grid-template-columns: 1fr
    }

    .skill-module-card h4,
    .skill-category-card h4 {
        font-size: 13px
    }

    .skill-module-card p,
    .skill-category-card p {
        font-size: 11px
    }
}

@media (max-width: 480px) {
    .skill-page-shell {
        padding: 10px 8px 20px
    }

    .skill-page-topbar {
        padding: 10px 12px
    }

    .skill-page-hero-card {
        padding: 10px 12px
    }

    .skill-page-hero-metrics {
        grid-template-columns: 1fr
    }

    .skill-content-section {
        padding: 10px 10px
    }

    .skill-card-grid {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .skill-category-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .skill-theme-overview {
        grid-template-columns: 1fr
    }

    .skill-module-card {
        padding: 10px
    }

    .skill-category-card {
        padding: 8px
    }

    .skill-theme-overview-card {
        padding: 10px
    }

    .skill-theme-panel {
        padding: 10px
    }
}

/* ═══════════════════════════════════════════
   Skill 页面移动端深度美化
   ═══════════════════════════════════════════ */

/* ── 视频弹窗移动端适配 ── */
@media (max-width: 768px) {
    .skill-video-modal {
        padding: 8px
    }
    .skill-video-dialog {
        width: 100%;
        border-radius: 18px;
        padding: 14px;
        max-height: calc(100vh - 16px);
        overflow: auto
    }
    .skill-video-head {
        flex-direction: column;
        gap: 8px;
        align-items: stretch
    }
    .skill-video-close {
        width: 100%;
        text-align: center
    }
    .skill-video-player {
        width: 100%;
        border-radius: 12px;
        max-height: 50vh
    }
}

/* ── 分页器移动端 ── */
@media (max-width: 640px) {
    .skill-pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        font-size: 12px
    }
    .skill-pagination button {
        flex: 1 1 auto;
        min-width: 0;
        padding: 8px 10px;
        font-size: 12px;
        text-align: center
    }
}

/* ── 社区表单四列网格堆叠 ── */
@media (max-width: 900px) {
    .skill-community-form .skill-form-grid {
        grid-template-columns: 1fr
    }
}

/* ── 知识库面板内嵌套 workbench-grid ── */
@media (max-width: 768px) {
    .skill-theme-panel .skill-workbench-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }
    .skill-theme-panel .skill-card-grid {
        grid-template-columns: 1fr;
        gap: 8px
    }
}

/* ── 筛选标签栏触控优化 ── */
@media (max-width: 640px) {
    .skill-filter-tabs {
        gap: 6px;
        padding: 4px 0 8px
    }
    .skill-filter-tabs button {
        padding: 10px 14px;
        min-height: 42px;
        font-size: 12px;
        border-radius: 999px;
        white-space: nowrap
    }
    .skill-tab-count {
        min-width: 20px;
        height: 20px;
        font-size: 10px
    }
}

/* ── 触摸目标最小化 44px ── */
@media (max-width: 768px) {
    .skill-inline-actions button,
    .skill-page-actions a,
    .skill-module-actions button,
    .skill-module-actions a {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 13px
    }
    .skill-filter-tabs button {
        min-height: 42px
    }
}

/* ── 英雄卡片指标区 ── */
@media (max-width: 640px) {
    .skill-page-hero-metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px
    }
    .skill-page-hero-metrics div {
        padding: 12px 8px;
        text-align: center;
        min-width: 0;
        border-radius: 14px
    }
    .skill-page-hero-metrics strong {
        font-size: 20px
    }
    .skill-page-hero-metrics span {
        font-size: 10px;
        display: block;
        margin-top: 2px
    }
}
@media (max-width: 400px) {
    .skill-page-hero-metrics {
        grid-template-columns: 1fr
    }
    .skill-page-hero-metrics div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: 10px 14px
    }
}

/* ── 工具卡片内表单字段优化 ── */
@media (max-width: 768px) {
    .skill-tool-form {
        gap: 10px
    }
    .skill-form-grid {
        gap: 10px
    }
    .skill-field {
        gap: 5px
    }
    .skill-field span {
        font-size: 11px;
        font-weight: 600
    }
    .skill-field input[type="file"] {
        padding: 8px 10px;
        font-size: 12px
    }
    .skill-field select {
        padding: 8px 10px;
        font-size: 12px;
        min-height: 40px
    }
}

/* ── 搜索/筛选工具栏移动端 ── */
@media (max-width: 640px) {
    .skill-toolbar {
        gap: 10px
    }
    .skill-toolbar .skill-field--toolbar {
        min-width: 0
    }
    .skill-toolbar .skill-field--toolbar input,
    .skill-toolbar .skill-field--toolbar select {
        width: 100%;
        font-size: 13px;
        padding: 10px 12px
    }
    .skill-toolbar .skill-inline-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }
    .skill-toolbar .skill-inline-actions button {
        width: 100%
    }
}

/* ── 模块卡片按钮区 ── */
@media (max-width: 768px) {
    .skill-module-actions {
        flex-direction: column;
        gap: 6px
    }
    .skill-module-actions .primary,
    .skill-module-actions .ghost {
        width: 100%;
        text-align: center
    }
}

/* ── 成果收藏和作品网格 ── */
@media (max-width: 640px) {
    .skill-work-grid .skill-work-card {
        padding: 14px
    }
    .skill-work-card h4 {
        font-size: 13px
    }
    .skill-work-card p {
        font-size: 11px;
        -webkit-line-clamp: 3
    }
    .skill-work-meta {
        font-size: 11px;
        gap: 6px
    }
}

/* ── 移动端顶部安全区 ── */
@supports (padding-top: env(safe-area-inset-top)) {
    .skill-page-body {
        padding-top: env(safe-area-inset-top)
    }
    .skill-page-shell {
        padding-bottom: calc(40px + env(safe-area-inset-bottom))
    }
}

/* ── 移动端全局滑动优化 ── */
@media (max-width: 768px) {
    .skill-page-body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain
    }
    .skill-page-shell {
        scroll-behavior: smooth
    }
}

/* ── 移动端卡片动画轻量化 ── */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .skill-category-card,
    .skill-module-card,
    .skill-tool-card,
    .skill-theme-overview-card {
        transition: none
    }
}

/* ── 成果检索结果区移动端 ── */
@media (max-width: 768px) {
    .skill-result-grid {
        gap: 10px
    }
    .skill-kv-list {
        grid-template-columns: 1fr
    }
    .skill-kv-list div {
        padding: 8px 10px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }
    .skill-text-block {
        font-size: 13px;
        line-height: 1.6
    }
}

/* ── 学习画像表单 ── */
@media (max-width: 768px) {
    #learningProfileForm .skill-form-grid {
        grid-template-columns: 1fr
    }
}

/* ── 历史调用列表 ── */
@media (max-width: 640px) {
    .skill-history-list {
        gap: 8px
    }
    .skill-history-card {
        padding: 12px;
        border-radius: 14px
    }
    .skill-history-card strong {
        font-size: 13px;
        margin: 8px 0 6px
    }
    .skill-history-card span {
        font-size: 10px
    }
    .skill-history-card time {
        font-size: 11px
    }
}

/* ── 移动端 section 间距优化 ── */
@media (max-width: 640px) {
    .skill-content-section,
    .skill-filter-panel {
        margin-bottom: 12px
    }
    .skill-section-head {
        flex-direction: column;
        gap: 6px;
        margin-bottom: 10px
    }
    .skill-section-head h3 {
        font-size: 15px
    }
    .skill-section-head .hint {
        font-size: 11px;
        line-height: 1.5
    }
}

/* ── 移动端主题面板间距 ── */
@media (max-width: 768px) {
    .skill-theme-stack {
        gap: 12px;
        margin-top: 12px
    }
    .skill-theme-panel .skill-section-head {
        padding-bottom: 8px;
        margin-bottom: 10px
    }
    .skill-theme-panel .skill-section-head h4 {
        font-size: 14px
    }
}

/* ── 移动端页头操作按钮组 ── */
@media (max-width: 640px) {
    .skill-page-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%
    }
    .skill-page-actions a {
        text-align: center;
        padding: 10px 12px;
        font-size: 13px;
        border-radius: 12px
    }
}

/* ── 移动端 topbar 标题区 ── */
@media (max-width: 640px) {
    .skill-page-topbar h1 {
        font-size: 18px;
        line-height: 1.2
    }
    .skill-page-lead {
        font-size: 12px;
        line-height: 1.6
    }
    .skill-page-topbar .eyebrow {
        font-size: 10px;
        margin-bottom: 4px
    }
}

/* ── 移动端 hero 卡片副标题 ── */
@media (max-width: 640px) {
    .skill-page-hero-card h2 {
        font-size: 16px;
        line-height: 1.3
    }
    .skill-page-hero-copy p {
        font-size: 12px;
        line-height: 1.6
    }
    .skill-page-kicker {
        font-size: 10px;
        padding: 4px 8px
    }
}

/* ── 移动端主题概览卡片 ── */
@media (max-width: 480px) {
    .skill-theme-overview-card strong {
        font-size: 18px
    }
    .skill-theme-overview-card span {
        font-size: 9px
    }
    .skill-theme-overview-card p {
        font-size: 10px;
        line-height: 1.4
    }
}

/* ── 移动端类别卡片 ── */
@media (max-width: 480px) {
    .skill-category-card {
        padding: 10px;
        border-radius: 12px
    }
    .skill-category-count {
        font-size: 18px
    }
    .skill-category-card h4 {
        font-size: 12px;
        margin: 6px 0 4px
    }
    .skill-category-card p {
        font-size: 10px
    }
}

/* ── 移动端模块卡片 ── */
@media (max-width: 480px) {
    .skill-module-card {
        padding: 12px;
        border-radius: 14px
    }
    .skill-module-badge {
        font-size: 10px;
        padding: 3px 8px
    }
    .skill-module-card h4 {
        font-size: 13px;
        margin: 8px 0 4px
    }
    .skill-module-card p {
        font-size: 11px;
        line-height: 1.5;
        -webkit-line-clamp: 3
    }
    .skill-module-tags span {
        font-size: 10px;
        padding: 4px 8px
    }
    .skill-module-footer {
        gap: 10px;
        margin-top: 12px
    }
}

/* ── 移动端工具卡片 ── */
@media (max-width: 480px) {
    .skill-tool-card {
        padding: 12px;
        border-radius: 14px
    }
    .skill-tool-head {
        margin-bottom: 8px
    }
    .skill-tool-head h4 {
        font-size: 13px
    }
    .skill-tool-copy {
        font-size: 11px;
        margin-bottom: 10px
    }
    .skill-tool-side-note {
        font-size: 10px
    }
    .skill-tool-status {
        font-size: 11px;
        padding: 8px 10px;
        border-radius: 10px;
        margin-top: 10px
    }
}

/* ── 移动端文本域 ── */
@media (max-width: 480px) {
    .skill-field textarea {
        min-height: 80px;
        font-size: 13px
    }
    .skill-field textarea[rows="7"] {
        min-height: 120px
    }
}

/* ── 移动端内联操作 ── */
@media (max-width: 480px) {
    .skill-inline-actions {
        flex-direction: column;
        gap: 6px
    }
    .skill-inline-actions button {
        width: 100%;
        text-align: center;
        padding: 12px 14px;
        font-size: 13px;
        border-radius: 10px
    }
}

/* ── 移动端链接作品卡片 ── */
@media (max-width: 480px) {
    .skill-work-card {
        padding: 10px
    }
    .skill-work-card .skill-module-badge {
        font-size: 9px;
        padding: 2px 6px
    }
}

/* ── 移动端收藏卡片 ── */
@media (max-width: 480px) {
    .skill-favorite-card {
        padding: 10px
    }
}

/* ═══════════════════════════════════════════
   PPT 任务中心移动端深度美化
   ═══════════════════════════════════════════ */

/* ── 900px: 弹窗主体和任务壳单列 ── */
@media (max-width: 900px) {
    .ppt-workflow-dialog-body {
        grid-template-columns: 1fr;
        gap: 12px
    }
    .ppt-workflow-task-shell {
        grid-template-columns: 1fr;
        gap: 12px
    }
    .ppt-workflow-form {
        padding: 14px;
        border-radius: 18px
    }
    .ppt-workflow-dialog-card {
        padding: 16px;
        border-radius: 22px
    }
}

/* ── 768px: 弹窗整体紧凑化 ── */
@media (max-width: 768px) {
    .ppt-workflow-dialog {
        padding: 6px;
        place-items: start center
    }
    .ppt-workflow-dialog-card {
        width: 100%;
        max-height: calc(100vh - 12px);
        padding: 14px;
        gap: 12px;
        border-radius: 20px;
        overflow: auto;
        -webkit-overflow-scrolling: touch
    }
    .ppt-workflow-dialog-head {
        flex-direction: column;
        gap: 10px;
        align-items: stretch
    }
    .ppt-workflow-dialog-head strong {
        font-size: 16px
    }
    .ppt-workflow-dialog-head p {
        font-size: 12px;
        line-height: 1.5
    }
    .ppt-workflow-dialog-head-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }
    .ppt-workflow-dialog-head-actions button {
        width: 100%;
        text-align: center;
        min-height: 40px;
        font-size: 13px;
        padding: 8px 12px;
        border-radius: 12px
    }

    /* 表单 */
    .ppt-workflow-form {
        padding: 12px;
        gap: 10px;
        border-radius: 16px
    }
    .ppt-workflow-form label {
        gap: 5px
    }
    .ppt-workflow-form span {
        font-size: 12px
    }
    .ppt-workflow-form input,
    .ppt-workflow-form textarea {
        padding: 10px 12px;
        font-size: 13px;
        border-radius: 12px
    }
    .ppt-workflow-form textarea {
        min-height: 100px
    }
    .ppt-workflow-form select {
        padding: 10px 12px;
        font-size: 13px;
        min-height: 40px;
        border-radius: 12px
    }
    .ppt-workflow-inline-grid {
        grid-template-columns: 1fr;
        gap: 10px
    }
    .ppt-workflow-checkbox {
        gap: 8px;
        min-height: 40px
    }
    .ppt-workflow-checkbox input {
        width: 20px;
        height: 20px
    }
    .ppt-workflow-form-status {
        font-size: 12px;
        min-height: 18px
    }
    .ppt-workflow-form-actions {
        gap: 8px
    }
    .ppt-workflow-form-actions button {
        width: 100%;
        min-height: 44px;
        font-size: 14px;
        padding: 10px 16px;
        border-radius: 12px
    }
    .ppt-workflow-section-head {
        gap: 8px
    }
    .ppt-workflow-section-head strong {
        font-size: 15px
    }
    .ppt-workflow-mode {
        font-size: 11px
    }
    .ppt-workflow-source-note {
        font-size: 12px;
        padding: 8px 10px;
        border-radius: 10px
    }

    /* 任务列表 */
    .ppt-task-list {
        padding: 10px;
        gap: 8px;
        border-radius: 16px;
        max-height: 240px;
        overflow: auto
    }
    .ppt-task-item {
        padding: 12px;
        border-radius: 14px;
        gap: 4px
    }
    .ppt-task-item-title {
        font-size: 13px
    }
    .ppt-task-item-meta {
        gap: 6px
    }
    .ppt-task-item-subtitle {
        font-size: 11px
    }
    .ppt-task-empty {
        font-size: 12px;
        padding: 16px 10px
    }

    /* 任务详情 */
    .ppt-task-detail {
        padding: 14px;
        border-radius: 16px;
        gap: 12px
    }
    .ppt-task-detail-head {
        flex-direction: column;
        gap: 8px;
        align-items: stretch
    }
    .ppt-task-detail-head strong {
        font-size: 15px
    }
    .ppt-task-detail-head p {
        font-size: 12px
    }
    .ppt-task-detail-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px
    }
    .ppt-task-detail-actions button {
        width: 100%;
        min-height: 38px;
        font-size: 12px;
        padding: 6px 10px;
        border-radius: 10px
    }
    .ppt-task-detail-empty {
        min-height: 120px;
        font-size: 12px;
        padding: 12px;
        border-radius: 14px
    }

    /* 任务元数据 */
    .ppt-task-meta-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }
    .ppt-task-meta-card {
        padding: 10px;
        border-radius: 14px
    }
    .ppt-task-meta-card span {
        font-size: 11px
    }
    .ppt-task-meta-card strong {
        font-size: 13px;
        margin-top: 4px
    }

    /* 引导文本 */
    .ppt-task-guidance {
        padding: 12px;
        border-radius: 14px
    }
    .ppt-task-guidance strong {
        font-size: 13px;
        margin-bottom: 6px
    }
    .ppt-task-guidance pre {
        font-size: 12px;
        line-height: 1.5
    }
    .ppt-task-section-head {
        gap: 6px
    }
    .ppt-task-section-head span {
        font-size: 11px
    }
    .ppt-task-section-head strong {
        font-size: 14px
    }
    .ppt-task-inline-message {
        font-size: 12px;
        padding: 10px;
        border-radius: 12px
    }

    /* 步骤卡片 */
    .ppt-step-list {
        gap: 10px
    }
    .ppt-step-card {
        padding: 12px;
        border-radius: 14px
    }
    .ppt-step-card-head {
        gap: 8px;
        margin-bottom: 6px;
        flex-direction: column
    }
    .ppt-step-card-head span {
        font-size: 11px
    }
    .ppt-step-card p {
        font-size: 12px;
        line-height: 1.5
    }
    .ppt-step-card-meta {
        font-size: 11px
    }
    .ppt-step-card-actions {
        margin-top: 8px;
        gap: 6px
    }
    .ppt-step-card-actions .ghost {
        min-width: 0;
        padding: 6px 10px;
        font-size: 11px
    }

    /* 状态徽章 */
    .ppt-status-badge {
        padding: 2px 8px;
        font-size: 11px
    }
    .ppt-status-badge-spinner {
        width: 10px;
        height: 10px
    }

    /* 预览网格 */
    .ppt-preview-grid {
        grid-template-columns: 1fr;
        gap: 10px
    }
    .ppt-preview-slide {
        padding: 12px;
        border-radius: 14px
    }
    .ppt-preview-slide-head {
        flex-direction: column;
        gap: 4px;
        margin-bottom: 6px
    }
    .ppt-preview-slide-head span {
        font-size: 11px
    }
    .ppt-preview-slide-canvas {
        border-radius: 12px
    }
    .ppt-preview-slide-canvas img,
    .ppt-preview-slide img {
        border-radius: 10px
    }
    .ppt-preview-slide-caption {
        font-size: 11px
    }
    .ppt-preview-slide ul {
        font-size: 12px;
        padding-left: 16px;
        gap: 4px
    }
    .ppt-preview-slide-notes {
        font-size: 11px
    }
    .ppt-preview-slide-subtitle {
        font-size: 11px
    }
    .ppt-preview-slide-empty {
        font-size: 12px;
        padding: 12px;
        border-radius: 12px
    }
}

/* ── 480px: 极窄屏幕进一步压缩 ── */
@media (max-width: 480px) {
    .ppt-workflow-dialog {
        padding: 4px
    }
    .ppt-workflow-dialog-card {
        padding: 10px;
        gap: 10px;
        border-radius: 16px;
        max-height: calc(100vh - 8px)
    }
    .ppt-workflow-dialog-head strong {
        font-size: 15px
    }
    .ppt-workflow-dialog-head-actions {
        grid-template-columns: 1fr
    }
    .ppt-workflow-form {
        padding: 10px;
        gap: 8px
    }
    .ppt-workflow-form input,
    .ppt-workflow-form textarea,
    .ppt-workflow-form select {
        padding: 8px 10px;
        font-size: 12px;
        border-radius: 10px
    }
    .ppt-workflow-form textarea {
        min-height: 80px
    }
    .ppt-workflow-form-actions button {
        min-height: 42px;
        font-size: 13px
    }
    .ppt-task-list {
        max-height: 200px;
        padding: 8px;
        border-radius: 14px
    }
    .ppt-task-item {
        padding: 10px;
        border-radius: 12px
    }
    .ppt-task-item-title {
        font-size: 12px
    }
    .ppt-task-detail {
        padding: 10px;
        border-radius: 14px
    }
    .ppt-task-detail-actions {
        grid-template-columns: 1fr
    }
    .ppt-task-meta-grid {
        grid-template-columns: 1fr
    }
    .ppt-step-card {
        padding: 10px;
        border-radius: 12px
    }
    .ppt-preview-slide {
        padding: 10px;
        border-radius: 12px
    }
}

/* ── PPT 预览弹窗移动端 ── */
@media (max-width: 768px) {
    .ppt-preview-dialog {
        padding: 6px;
        place-items: start center
    }
    .ppt-preview-dialog-card {
        width: 100%;
        max-height: calc(100vh - 12px);
        padding: 14px;
        gap: 12px;
        border-radius: 20px;
        overflow: auto;
        -webkit-overflow-scrolling: touch
    }
    .ppt-preview-dialog-head {
        flex-direction: column;
        gap: 8px;
        align-items: stretch
    }
    .ppt-preview-dialog-head strong {
        font-size: 16px
    }
    .ppt-preview-dialog-head p,
    .ppt-preview-dialog-subtitle {
        font-size: 12px
    }
    .ppt-preview-dialog-meta {
        font-size: 11px;
        gap: 6px
    }
    .ppt-preview-dialog-stage {
        border-radius: 14px
    }
    .ppt-preview-dialog-stage img {
        border-radius: 12px
    }
    .ppt-preview-dialog-caption strong {
        font-size: 15px
    }
    .ppt-preview-dialog-caption span,
    .ppt-preview-dialog-notes {
        font-size: 12px
    }
    .ppt-preview-dialog-actions {
        flex-direction: column;
        gap: 8px
    }
    .ppt-preview-dialog-actions button {
        width: 100%;
        min-height: 42px;
        font-size: 13px
    }
    .ppt-preview-dialog-bullets {
        font-size: 12px;
        padding-left: 16px;
        gap: 4px
    }
}

@media (max-width: 480px) {
    .ppt-preview-dialog {
        padding: 4px
    }
    .ppt-preview-dialog-card {
        padding: 10px;
        border-radius: 16px;
        max-height: calc(100vh - 8px)
    }
    .ppt-preview-dialog-head strong {
        font-size: 15px
    }
    .ppt-preview-dialog-caption strong {
        font-size: 14px
    }
}

/* ── PPT 弹窗安全区适配 ── */
@supports (padding-top: env(safe-area-inset-top)) {
    .ppt-workflow-dialog-card {
        max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px)
    }
    .ppt-preview-dialog-card {
        max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px)
    }
}

/* ═══════════════════════════════════════════
   首页对话 + 侧边栏 + 音色面板 移动端深度优化
   ═══════════════════════════════════════════ */

/* ── 768px: 顶部操作栏紧凑化 ── */
@media (max-width: 768px) {
    .topbar {
        margin: 4px 4px 0;
        padding: 5px 6px 4px;
        border-radius: 12px;
        gap: 3px
    }
    .topbar .eyebrow {
        display: none
    }
    .topbar h1 {
        font-size: 13px;
        margin-bottom: 0
    }
    .topbar p {
        font-size: 10px;
        margin: 0
    }
    .topbar-actions-inline {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        width: 100%
    }
    .topbar-actions-inline > .ghost,
    .topbar-actions-inline > .file-btn {
        padding: 4px 7px;
        font-size: 10px;
        border-radius: 9px;
        min-height: 28px;
        white-space: nowrap
    }
    .topbar-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        width: 100%
    }
    .topbar-actions .topbar-select-wrap {
        min-width: 0
    }
    .topbar-actions .select-wrap select {
        padding: 5px 7px;
        font-size: 11px;
        min-height: 30px;
        border-radius: 9px
    }
    .topbar-actions .select-wrap span {
        font-size: 9px
    }
    .topbar-actions .chat-actions {
        grid-column: 1 / -1;
        gap: 4px
    }
    .topbar-actions .chat-actions .ghost {
        padding: 4px 7px;
        font-size: 10px;
        min-height: 26px;
        border-radius: 8px
    }
}

/* ── 480px: 极窄屏进一步压缩顶部 ── */
@media (max-width: 480px) {
    .topbar {
        margin: 2px 2px 0;
        padding: 3px 5px 2px;
        border-radius: 10px;
        gap: 2px
    }
    .topbar h1 {
        font-size: 12px;
        margin-bottom: 0
    }
    .topbar p {
        font-size: 9px
    }
    .topbar-actions-inline > .ghost,
    .topbar-actions-inline > .file-btn {
        padding: 3px 5px;
        font-size: 9px;
        min-height: 24px;
        border-radius: 7px
    }
    .topbar-actions .select-wrap select {
        padding: 4px 5px;
        font-size: 10px;
        min-height: 26px;
        border-radius: 7px
    }
    .topbar-actions .select-wrap span {
        font-size: 8px
    }
    .topbar-head-actions .collapse-toggle {
        width: 26px;
        height: 26px;
        min-width: 26px;
        border-radius: 8px;
        font-size: 12px
    }
    .topbar-mobile-actions .sidebar-menu-btn,
    .topbar-mobile-actions .sidebar-profile-btn,
    .topbar-mobile-actions .sidebar-new-btn {
        width: 26px;
        height: 26px;
        min-width: 26px;
        border-radius: 8px;
        font-size: 13px
    }
}

/* ── 768px: 侧边栏紧凑化 ── */
@media (max-width: 768px) {
    .sidebar {
        padding: 12px 10px 16px;
        gap: 4px;
        width: min(280px, calc(100vw - 40px))
    }
    .sidebar-brand {
        padding: 0
    }
    .sidebar-brand-actions {
        gap: 6px
    }
    .sidebar-menu-btn,
    .sidebar-profile-btn,
    .sidebar-new-btn {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        font-size: 14px
    }
    .side-title {
        font-size: 10px;
        margin-top: 1px;
        letter-spacing: .08em
    }
    .conversation-list {
        gap: 2px
    }
    .conv {
        padding: 5px 7px;
        border-radius: 8px;
        gap: 2px 4px
    }
    .conv strong {
        font-size: 12px
    }
    .conv small {
        font-size: 10px
    }
    .conv-delete {
        font-size: 10px;
        padding: 2px 4px
    }
    .user-box {
        padding: 5px;
        border-radius: 10px;
        gap: 3px
    }
    .user-card-row {
        padding: 4px 7px;
        border-radius: 9px;
        gap: 6px
    }
    .user-card-copy strong {
        font-size: 12px
    }
    .user-card-copy small {
        font-size: 10px
    }
    .sidebar-help-btn {
        padding: 4px 0;
        font-size: 0.75rem
    }
}

/* ── 480px: 侧边栏进一步压缩 ── */
@media (max-width: 480px) {
    .sidebar {
        padding: 8px 8px 12px;
        width: min(260px, calc(100vw - 32px))
    }
    .sidebar-menu-btn,
    .sidebar-profile-btn,
    .sidebar-new-btn {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        font-size: 12px
    }
    .sidebar-brand-actions {
        gap: 4px
    }
    .conv {
        padding: 4px 6px;
        border-radius: 7px
    }
    .conv strong {
        font-size: 11px
    }
    .conv small {
        font-size: 9px
    }
    .user-card-row {
        padding: 3px 5px;
        border-radius: 7px
    }
}

/* ── 768px: 音色/工具选项栏紧凑化（关键修复） ── */
@media (max-width: 768px) {
    .tool-option-bar {
        margin-bottom: 0;
        padding: 6px 8px;
        border-radius: 12px;
        gap: 6px;
        max-height: 35vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch
    }
    .tool-option-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px
    }
    .tool-option-field {
        gap: 2px
    }
    .tool-option-field span {
        font-size: 9px
    }
    .tool-option-field select,
    .tool-option-field input {
        padding: 5px 7px;
        font-size: 11px;
        min-height: 30px;
        border-radius: 9px
    }
    .tool-option-note {
        flex-direction: column;
        gap: 4px;
        font-size: 10px
    }
    .tool-option-note-copy {
        flex: 1 1 auto
    }
    .tool-option-note-copy strong {
        font-size: 11px
    }
    .tool-option-summary {
        justify-content: flex-start;
        gap: 3px;
        flex-wrap: wrap
    }
    .tool-option-pill {
        padding: 2px 6px;
        font-size: 9px;
        border-radius: 999px;
        gap: 3px
    }
    .tool-option-pill b {
        font-size: 9px
    }
}

/* ── 480px: 音色面板进一步压缩 ── */
@media (max-width: 480px) {
    .tool-option-bar {
        padding: 5px 6px;
        border-radius: 10px;
        gap: 5px;
        max-height: 30vh
    }
    .tool-option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px
    }
    .tool-option-field select,
    .tool-option-field input {
        padding: 4px 6px;
        font-size: 10px;
        min-height: 26px;
        border-radius: 7px
    }
    .tool-option-field span {
        font-size: 8px
    }
    .tool-option-note {
        font-size: 9px;
        gap: 3px
    }
    .tool-option-note-copy strong {
        font-size: 10px
    }
    .tool-option-pill {
        padding: 2px 5px;
        font-size: 8px
    }
}

/* ── 移动端消息区域优化 ── */
@media (max-width: 768px) {
    .messages {
        padding: 4px 6px 8px;
        gap: 5px;
        overscroll-behavior-y: contain
    }
    .msg-wrap {
        gap: 3px
    }
    .msg-head {
        gap: 5px;
        padding-inline: 2px
    }
    .msg-avatar {
        width: 22px;
        height: 22px;
        border-radius: 7px;
        font-size: 9px
    }
    .msg-name {
        font-size: 11px
    }
    .msg-time {
        font-size: 9px
    }
    .msg-model {
        font-size: 9px;
        padding: 1px 5px;
        max-width: 120px
    }
    .msg-duration {
        font-size: 9px;
        padding: 1px 5px
    }
    .msg {
        padding: 7px 9px 5px;
        border-radius: 12px;
        font-size: 13px;
        line-height: 1.6
    }
    .msg-content {
        gap: 5px
    }
    .msg-copy {
        top: 6px;
        right: 6px;
        padding: 3px 6px;
        font-size: 9px
    }
    .hero-card {
        padding: 12px 10px;
        border-radius: 12px
    }
    .hero-card h2 {
        font-size: 15px
    }
    .hero-card p {
        font-size: 12px
    }
    .hero-mark {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 13px;
        margin-bottom: 6px
    }
    .skill-entry-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }
    .skill-entry-card {
        padding: 10px
    }
    .skill-entry-card h3 {
        font-size: 13px
    }
    .skill-entry-card p {
        font-size: 11px
    }
}

/* ── 移动端合成器按钮组 ── */
@media (max-width: 768px) {
    .composer {
        padding: 3px 5px calc(5px + env(safe-area-inset-bottom));
        column-gap: 4px;
        row-gap: 0
    }
    .composer textarea {
        min-height: 32px;
        max-height: 60px;
        padding: 5px 8px;
        font-size: 13px;
        border-radius: 10px
    }
    .composer-submit-btn {
        width: 34px;
        min-width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: 14px
    }
}

@media (max-width: 480px) {
    .composer {
        padding: 2px 4px calc(4px + env(safe-area-inset-bottom))
    }
    .composer textarea {
        min-height: 28px;
        max-height: 52px;
        padding: 4px 7px;
        font-size: 12px;
        border-radius: 8px
    }
    .composer-submit-btn {
        width: 30px;
        min-width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 13px
    }
    .composer-actions {
        gap: 2px
    }
    .composer-actions .ghost {
        padding: 3px 5px;
        font-size: 9px;
        min-height: 24px;
        border-radius: 7px
    }
}

/* ── 移动端工具卡片消息内嵌 ── */
@media (max-width: 768px) {
    .tool-card {
        padding: 10px;
        border-radius: 14px;
        gap: 8px
    }
    .tool-card-title {
        font-size: 12px
    }
    .tool-card .hint {
        font-size: 10px
    }
    .image-result-grid {
        grid-template-columns: 1fr;
        gap: 8px
    }
    .image-result-grid img,
    .video-result video {
        border-radius: 10px;
        max-height: 360px
    }
    .code-card {
        border-radius: 12px
    }
    .code-card-head {
        padding: 5px 8px
    }
    .code-card-head span {
        font-size: 9px
    }
    .code-card-actions .ghost {
        padding: 3px 6px;
        font-size: 9px
    }
    .code-card-body {
        max-height: 200px
    }
    .code-card-body pre {
        padding: 8px 10px;
        font-size: 10px;
        line-height: 1.5
    }
}

/* ── 移动端 thinking 状态 ── */
@media (max-width: 768px) {
    .thinking-state {
        font-size: 11px;
        gap: 5px;
        min-height: 20px
    }
    .stop-stream-btn {
        padding: 5px 8px;
        font-size: 10px
    }
}

/* ── 对话窗口：贴近主流 AI 聊天样式 ── */
.msg-wrap {
    gap: 8px;
    width: min(100%, 860px)
}

.msg-wrap.assistant {
    padding-right: clamp(0px, 8vw, 72px)
}

.msg-wrap.user {
    padding-left: clamp(0px, 14vw, 180px)
}

.msg-head {
    gap: 8px;
    padding-inline: 2px 4px
}

.msg-identity {
    gap: 6px
}

.msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #111827;
    border: 1px solid rgba(209, 213, 219, .9)
}

.msg-wrap.user .msg-avatar {
    background: #111827;
    border-color: #111827;
    color: #fff
}

.msg-name {
    font-size: 12px;
    font-weight: 600
}

.msg-time,
.msg-model,
.msg-duration {
    font-size: 11px
}

.msg {
    width: auto;
    max-width: min(100%, 720px);
    padding: 12px 14px;
    border-radius: 22px;
    gap: 8px;
    box-shadow: none;
    backdrop-filter: none
}

.msg.user {
    justify-self: end;
    max-width: min(100%, 560px);
    background: linear-gradient(180deg, #2b2b2f, #1f1f23);
    border-color: rgba(17, 24, 39, .95);
    color: #fff
}

.msg.user .msg-rich-text,
.msg.user .msg-stream,
.msg.user .msg-text {
    color: inherit
}

.msg.assistant {
    justify-self: start;
    max-width: min(100%, 760px);
    padding: 0;
    background: transparent;
    border: none
}

.msg-content {
    gap: 10px
}

.msg-wrap.assistant .msg-copy,
.msg-wrap.assistant .msg-export-doc,
.msg-wrap.assistant .msg-regenerate {
    background: rgba(255, 255, 255, .82)
}

.chat-inline-attachments {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch
}

.chat-inline-attachments.compact {
    gap: 6px
}

.chat-inline-attachment {
    flex: 0 0 92px;
    display: grid;
    gap: 5px;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid rgba(209, 213, 219, .9);
    background: rgba(255, 255, 255, .92)
}

.msg.user .chat-inline-attachment {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .08)
}

.chat-inline-attachment img,
.chat-inline-attachment video {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    object-fit: cover;
    background: #111827
}

.chat-inline-attachment-file {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .08);
    color: #111827;
    font-size: 12px;
    font-weight: 700
}

.msg.user .chat-inline-attachment-file {
    background: rgba(255, 255, 255, .12);
    color: #fff
}

.chat-inline-attachment-meta {
    font-size: 10px;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word
}

.multimodal-preview-grid {
    grid-template-columns: repeat(auto-fit, minmax(92px, 92px));
    gap: 8px;
    justify-content: flex-start
}

.media-preview {
    gap: 6px;
    padding: 6px;
    border-radius: 14px;
    box-shadow: none
}

.media-preview-title {
    font-size: 10px;
    padding-right: 38px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.media-preview-remove {
    top: 6px;
    right: 6px;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 999px
}

.media-preview img,
.media-preview video,
.media-preview-file {
    min-height: 0;
    aspect-ratio: 1 / 1;
    border-radius: 10px
}

.media-preview audio {
    height: 30px
}

.tool-inline-result {
    width: 100%
}

.tool-card {
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    box-shadow: none
}

.tool-card.image-card {
    padding: 4px 0 0;
    background: transparent;
    border: none
}

.image-result-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
    gap: 10px;
    justify-content: flex-start
}

.image-result-grid figure {
    padding: 6px;
    border-radius: 18px;
    border: 1px solid rgba(209, 213, 219, .82);
    background: rgba(255, 255, 255, .96)
}

.image-result-grid img {
    max-height: 320px;
    border-radius: 14px;
    object-fit: cover;
    background: #111827
}

.image-result-grid figcaption {
    padding: 0 2px 2px;
    font-size: 12px
}

@media (max-width: 768px) {
    .msg-wrap.assistant,
    .msg-wrap.user {
        padding-left: 0;
        padding-right: 0;
        width: 100%
    }
    .msg-head {
        gap: 6px
    }
    .msg-avatar {
        width: 24px;
        height: 24px;
        font-size: 10px
    }
    .msg {
        max-width: calc(100% - 4px);
        padding: 10px 12px;
        border-radius: 18px
    }
    .msg.user {
        max-width: min(100%, 84vw)
    }
    .chat-inline-attachment {
        flex-basis: 76px;
        padding: 5px;
        border-radius: 12px
    }
    .chat-inline-attachment-meta {
        font-size: 9px
    }
    .multimodal-preview-grid {
        grid-template-columns: repeat(auto-fit, minmax(76px, 76px));
        gap: 6px
    }
    .tool-card {
        padding: 8px;
        border-radius: 16px
    }
    .image-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px
    }
    .image-result-grid figure {
        padding: 4px;
        border-radius: 14px
    }
    .image-result-grid img {
        max-height: 220px;
        border-radius: 12px
    }
}

@media (max-width: 480px) {
    .msg-wrap {
        gap: 6px
    }
    .msg.user {
        max-width: min(100%, 88vw)
    }
    .msg {
        padding: 9px 10px;
        border-radius: 16px
    }
    .chat-inline-attachments {
        gap: 5px
    }
    .chat-inline-attachment {
        flex-basis: 68px;
        padding: 4px;
        border-radius: 10px
    }
    .multimodal-preview-grid {
        grid-template-columns: repeat(auto-fit, minmax(68px, 68px))
    }
    .tool-card-title {
        font-size: 12px
    }
    .image-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .image-result-grid figcaption {
        font-size: 11px
    }
}

body.voice-call-open {
    overflow: hidden
}

.voice-call-trigger {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.voice-call-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(180deg, rgba(11, 15, 24, .92), rgba(20, 28, 45, .96));
    backdrop-filter: blur(18px)
}

.voice-call-screen {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(24px, env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    overflow: visible
}

.voice-call-screen__glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 122, 255, .42), rgba(0, 122, 255, .04) 60%, transparent 72%);
    filter: blur(12px);
    animation: voiceCallPulse 3.4s ease-in-out infinite
}

.voice-call-screen__body {
    position: relative;
    width: min(560px, 100%);
    display: grid;
    gap: 22px;
    justify-items: center;
    color: #fff;
    text-align: center
}

.voice-call-screen__eyebrow {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, .68);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px
}

.voice-call-screen__meta h2 {
    margin: 0;
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700
}

.voice-call-screen__model-meta {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word
}

.voice-call-screen__status {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: 15px
}

.voice-call-screen__avatar {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .28);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: .08em
}

.voice-call-wave {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    min-height: 72px
}

.voice-call-wave span {
    width: 8px;
    height: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .32);
    transform-origin: center bottom;
    animation: voiceCallWave 1.2s ease-in-out infinite;
    animation-play-state: paused
}

.voice-call-overlay[data-state="listening"] .voice-call-wave span,
.voice-call-overlay[data-state="speaking"] .voice-call-wave span,
.voice-call-overlay[data-state="processing"] .voice-call-wave span {
    animation-play-state: running
}

.voice-call-wave span:nth-child(2) {
    animation-delay: .12s
}

.voice-call-wave span:nth-child(3) {
    animation-delay: .24s
}

.voice-call-wave span:nth-child(4) {
    animation-delay: .36s
}

.voice-call-wave span:nth-child(5) {
    animation-delay: .48s
}

.voice-call-screen__transcript {
    width: 100%;
    display: grid;
    gap: 12px
}

.voice-call-screen__settings {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
}

.voice-call-setting {
    display: grid;
    gap: 8px;
    text-align: left;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12)
}

.voice-call-setting span {
    font-size: 13px;
    color: rgba(255, 255, 255, .72)
}

.voice-call-setting select {
    min-width: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-color: rgba(255, 255, 255, .14);
    padding: 10px 12px
}

.voice-call-setting select option {
    color: #111;
    background: #fff
}

.voice-call-screen__transcript-card {
    padding: 16px 18px;
    border-radius: 22px;
    text-align: left;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .18)
}

.voice-call-screen__transcript-card.is-ai {
    background: rgba(0, 122, 255, .14)
}

.voice-call-screen__transcript-card small {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .62)
}

.voice-call-screen__transcript-card p {
    margin: 0;
    line-height: 1.65;
    color: #fff;
    white-space: pre-wrap;
    word-break: break-word
}

.voice-call-screen__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap
}

.voice-call-control {
    min-width: 112px;
    border-radius: 999px;
    padding: 14px 24px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff
}

.voice-call-control[aria-pressed="true"] {
    background: rgba(255, 255, 255, .2)
}

.voice-call-control--danger {
    background: #ff3b30;
    border-color: #ff3b30;
    color: #fff
}

@keyframes voiceCallWave {
    0%,
    100% {
        transform: scaleY(.45);
        opacity: .45
    }
    50% {
        transform: scaleY(1.9);
        opacity: 1
    }
}

@keyframes voiceCallPulse {
    0%,
    100% {
        transform: scale(.92);
        opacity: .72
    }
    50% {
        transform: scale(1.06);
        opacity: 1
    }
}

@media (max-width: 640px) {
    .voice-call-screen {
        align-items: flex-start;
        padding: max(16px, env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom))
    }
    .voice-call-screen__body {
        gap: 18px;
        padding-bottom: 8px
    }
    .voice-call-screen__settings {
        grid-template-columns: 1fr
    }
    .voice-call-screen__avatar {
        width: 112px;
        height: 112px;
        font-size: 28px
    }
    .voice-call-screen__controls {
        position: sticky;
        bottom: 0;
        width: 100%;
        padding: 8px 0 calc(4px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(20, 28, 45, 0), rgba(20, 28, 45, .82) 28%, rgba(20, 28, 45, .96) 100%)
    }
    .voice-call-control {
        flex: 1 1 140px
    }
}

@media (max-width: 960px) {
    .mobile-chatbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 52px;
        padding: 8px 10px;
        border-radius: 24px;
        background: rgba(255, 255, 255, .94);
        border: 1px solid rgba(17, 17, 17, .06);
        box-shadow: 0 10px 30px rgba(17, 17, 17, .06)
    }

    .mobile-chatbar-title {
        min-width: 0;
        display: grid;
        gap: 2px;
        flex: 1 1 auto
    }

    .mobile-chatbar-title strong,
    .mobile-chatbar-title span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .mobile-chatbar-title strong {
        font-size: 15px;
        line-height: 1.2;
        color: #111
    }

    .mobile-chatbar-title span {
        font-size: 11px;
        color: rgba(17, 17, 17, .46)
    }

    .mobile-chatbar-actions {
        display: flex;
        align-items: center;
        gap: 8px
    }

    .mobile-chatbar-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        padding: 0;
        border-radius: 999px;
        border: 1px solid rgba(17, 17, 17, .06);
        background: rgba(248, 248, 248, .96);
        box-shadow: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #111
    }

    .mobile-chatbar-menu {
        position: relative;
        overflow: hidden
    }

    .mobile-chatbar-line {
        position: absolute;
        left: 50%;
        height: 2px;
        border-radius: 999px;
        background: #111;
        transform: translateX(-50%);
        transition: transform .18s ease, opacity .18s ease, width .18s ease, top .18s ease
    }

    .mobile-chatbar-line.long {
        top: 14px;
        width: 16px
    }

    .mobile-chatbar-line.short {
        top: 22px;
        width: 10px;
        margin-left: -3px
    }

    .mobile-chatbar-menu.is-open .mobile-chatbar-line.long {
        top: 18px;
        width: 15px;
        transform: translateX(-50%) rotate(45deg)
    }

    .mobile-chatbar-menu.is-open .mobile-chatbar-line.short {
        top: 18px;
        width: 15px;
        margin-left: 0;
        transform: translateX(-50%) rotate(-45deg)
    }

    .mobile-chatbar-more {
        font-size: 24px;
        line-height: 1
    }

    .topbar {
        margin: 0;
        padding: 10px 10px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none
    }

    .topbar-main,
    .topbar-compact,
    .topbar.is-collapsed .topbar-compact {
        display: none !important
    }

    .sidebar,
    body.sidebar-collapsed .sidebar {
        width: min(86vw, 336px);
        padding: 18px 14px 22px;
        background: #f4f1ea;
        border-right: 1px solid rgba(17, 17, 17, .06);
        box-shadow: 0 24px 70px rgba(17, 17, 17, .16)
    }

    .sidebar-brand,
    .sidebar-brand-actions {
        display: none !important
    }

    .mobile-sidebar-panel {
        display: grid;
        gap: 14px;
        margin-bottom: 12px
    }

    .mobile-sidebar-search {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 14px;
        min-height: 46px;
        border-radius: 18px;
        background: rgba(255, 255, 255, .72);
        border: 1px solid rgba(17, 17, 17, .05)
    }

    .mobile-sidebar-search-icon {
        color: rgba(17, 17, 17, .38);
        font-size: 15px
    }

    .mobile-sidebar-search input {
        border: 0;
        background: transparent;
        padding: 0;
        min-height: auto
    }

    .mobile-sidebar-shortcuts {
        display: grid;
        gap: 8px
    }

    .mobile-sidebar-shortcut {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 14px;
        border-radius: 18px;
        border: 1px solid transparent;
        background: rgba(255, 255, 255, .68);
        color: #111;
        text-decoration: none;
        text-align: left
    }

    .mobile-sidebar-shortcut.is-current {
        background: #111;
        color: #fff
    }

    .mobile-sidebar-shortcut-icon {
        width: 26px;
        height: 26px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(17, 17, 17, .06)
    }

    .mobile-sidebar-shortcut.is-current .mobile-sidebar-shortcut-icon {
        background: rgba(255, 255, 255, .18)
    }

    .side-title {
        margin: 6px 2px 10px;
        font-size: 12px;
        color: rgba(17, 17, 17, .46)
    }

    .conversation-list {
        gap: 8px;
        padding-right: 2px
    }

    .conv {
        border-radius: 18px;
        padding: 12px 12px 10px;
        background: rgba(255, 255, 255, .72);
        border: 1px solid transparent
    }

    .conv.active {
        background: #fff;
        border-color: rgba(17, 17, 17, .08);
        box-shadow: 0 10px 22px rgba(17, 17, 17, .06)
    }

    .user-box {
        padding-top: 12px
    }

    .messages {
        padding: 10px 12px 64px;
        gap: 14px
    }

    .composer {
        position: sticky;
        bottom: 0;
        z-index: var(--z-sticky-nav);
        display: block;
        padding: 8px 12px max(8px, env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(244, 241, 234, 0), rgba(244, 241, 234, .94) 22%, rgba(244, 241, 234, .98) 100%);
        border-top: 0;
        box-shadow: none
    }

    .tool-option-bar {
        margin: 0 0 8px;
        padding: 10px 12px;
        border-radius: 20px;
        background: rgba(255, 255, 255, .88);
        border: 1px solid rgba(17, 17, 17, .05);
        box-shadow: 0 10px 24px rgba(17, 17, 17, .05)
    }

    .mobile-composer-shell {
        display: flex;
        align-items: flex-end;
        gap: 8px;
        min-width: 0;
        padding: 8px 10px;
        border-radius: 24px;
        background: rgba(255, 255, 255, .95);
        border: 1px solid rgba(17, 17, 17, .06);
        box-shadow: 0 18px 44px rgba(17, 17, 17, .08)
    }

    .mobile-composer-plus {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        min-width: 38px;
        padding: 0;
        border-radius: 999px;
        flex: 0 0 auto;
        background: #fff;
        border-color: rgba(17, 17, 17, .08);
        color: #111;
        box-shadow: none
    }

    .composer textarea {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        min-height: 42px;
        max-height: 120px;
        padding: 10px 12px;
        border: 0;
        border-radius: 18px;
        background: transparent;
        box-shadow: none
    }

    .composer-actions {
        position: static;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        width: auto;
        min-width: max-content;
        height: auto;
        flex: 0 0 auto;
        gap: 6px
    }

    .composer-actions button {
        width: 38px;
        height: 38px;
        min-width: 38px;
        padding: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto
    }

    .voice-call-trigger,
    .mobile-voice-input-btn,
    .composer-submit-btn {
        position: static;
        inset: auto;
        margin: 0;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        transition: background .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease
    }

    .voice-call-trigger {
        display: none !important;
        background: #fff;
        border-color: rgba(17, 17, 17, .08);
        color: #111
    }

    .mobile-voice-input-btn,
    .composer-submit-btn {
        background: #111;
        border-color: #111;
        color: #fff
    }

    .composer-submit-btn {
        box-shadow: 0 8px 20px rgba(17, 17, 17, .14)
    }

    @media (max-width: 520px) {
        .composer {
            padding: 6px 10px max(4px, env(safe-area-inset-bottom))
        }

        .tool-option-bar {
            margin-bottom: 6px;
            padding: 8px 10px;
            border-radius: 18px
        }

        .mobile-composer-shell {
            gap: 6px;
            padding: 7px 8px;
            border-radius: 22px
        }

        .composer textarea {
            min-height: 38px;
            padding: 8px 10px;
            border-radius: 16px
        }

        .composer-actions {
            gap: 4px
        }

        .composer-actions button {
            width: 34px;
            height: 34px;
            min-width: 34px
        }

        .voice-call-trigger svg,
        .mobile-voice-input-btn svg,
        .composer-submit-btn svg {
            width: 16px;
            height: 16px
        }
    }

    .mobile-flyout-backdrop {
        position: fixed;
        inset: 0;
        z-index: var(--z-modal-backdrop);
        background: rgba(15, 15, 15, .26);
        backdrop-filter: blur(2px)
    }

    .mobile-overflow-menu {
        position: fixed;
        top: 68px;
        right: 12px;
        z-index: var(--z-modal);
        width: min(260px, calc(100vw - 24px))
    }

    .mobile-overflow-menu-card {
        display: grid;
        gap: 4px;
        padding: 8px;
        border-radius: 24px;
        background: rgba(255, 255, 255, .98);
        border: 1px solid rgba(17, 17, 17, .06);
        box-shadow: 0 18px 40px rgba(17, 17, 17, .16);
        max-height: calc(100dvh - 100px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin
    }

    .mobile-overflow-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 18px;
        border: 0;
        background: transparent;
        color: #111;
        text-align: left
    }

    .mobile-overflow-item.danger {
        color: #c32929
    }

    .mobile-action-sheet {
        position: fixed;
        inset: auto 0 0;
        z-index: var(--z-modal);
        padding: 0 8px max(8px, env(safe-area-inset-bottom))
    }

    .mobile-action-sheet-panel {
        display: grid;
        gap: 14px;
        height: var(--mobile-action-sheet-height, min(56dvh, calc(100dvh - 120px)));
        max-height: calc(100dvh - 18px);
        padding: 12px 14px calc(28px + env(safe-area-inset-bottom));
        border-radius: 28px 28px 0 0;
        background: rgba(248, 246, 241, .98);
        border: 1px solid rgba(17, 17, 17, .06);
        box-shadow: 0 -18px 50px rgba(17, 17, 17, .16);
        overflow-y: auto !important;
        overflow-x: hidden;
        overscroll-behavior-y: contain;
        overscroll-behavior-x: none;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        align-content: start;
        transition: height .22s cubic-bezier(.2, .8, .2, 1);
        scrollbar-width: none
    }

    .mobile-action-sheet-panel.is-dragging {
        transition: none
    }

    .mobile-action-sheet.is-expanded .mobile-action-sheet-panel {
        height: var(--mobile-action-sheet-height, calc(100dvh - 18px));
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none
    }

    .mobile-action-sheet-panel::-webkit-scrollbar,
    .mobile-action-sheet.is-expanded .mobile-action-sheet-panel::-webkit-scrollbar {
        display: none
    }

    .mobile-action-sheet-handle {
        width: 42px;
        height: 5px;
        margin: 0 auto;
        border: 0;
        border-radius: 999px;
        background: rgba(17, 17, 17, .16);
        touch-action: none
    }

    .mobile-action-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        touch-action: none
    }

    .mobile-action-media-row,
    .mobile-action-primary-list,
    .mobile-action-secondary-grid,
    .mobile-action-recent-strip,
    .mobile-action-camera,
    .mobile-action-thumb,
    .mobile-action-list-item,
    .mobile-action-grid-item,
    .mobile-action-sheet button,
    .mobile-action-sheet select,
    .mobile-action-sheet input,
    .mobile-action-sheet textarea {
        touch-action: auto
    }

    .mobile-action-sheet-head strong {
        font-size: 18px;
        color: #111
    }

    .mobile-action-sheet-link {
        padding: 0;
        border: 0;
        background: transparent;
        color: rgba(17, 17, 17, .52)
    }

    .mobile-action-media-row {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 10px;
        align-items: stretch
    }

    .mobile-action-camera,
    .mobile-action-thumb,
    .mobile-action-list-item,
    .mobile-action-grid-item {
        border: 0;
        text-align: left
    }

    .mobile-action-camera {
        min-height: 98px;
        padding: 12px 8px;
        border-radius: 22px;
        background: #fff;
        border: 1px solid rgba(17, 17, 17, .05);
        box-shadow: 0 10px 24px rgba(17, 17, 17, .05);
        display: grid;
        align-content: center;
        justify-items: center;
        gap: 8px
    }

    .mobile-action-camera-icon {
        width: 42px;
        height: 42px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #111;
        color: #fff
    }

    .mobile-action-camera-icon svg,
    .mobile-action-list-icon svg {
        width: 22px;
        height: 22px;
        display: block
    }

    .mobile-action-camera-label {
        font-size: 12px;
        font-weight: 600;
        color: rgba(17, 17, 17, .72)
    }

    .mobile-action-recent-strip {
        display: flex;
        gap: 10px;
        min-width: 0;
        overflow-x: auto;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none
    }

    .mobile-action-recent-strip::-webkit-scrollbar {
        display: none
    }

    .mobile-action-thumb {
        position: relative;
        flex: 0 0 88px;
        width: 88px;
        min-height: 98px;
        border-radius: 22px;
        overflow: hidden;
        background: linear-gradient(180deg, rgba(227, 233, 243, .9), rgba(255, 255, 255, .98));
        border: 1px solid rgba(17, 17, 17, .05);
        box-shadow: 0 10px 24px rgba(17, 17, 17, .05)
    }

    .mobile-action-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    .mobile-action-thumb-label {
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 8px;
        padding: 4px 6px;
        border-radius: 12px;
        background: rgba(17, 17, 17, .5);
        backdrop-filter: blur(8px);
        font-size: 11px;
        line-height: 1.35;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .mobile-action-thumb-count {
        position: absolute;
        top: 8px;
        right: 8px;
        min-width: 28px;
        height: 28px;
        padding: 0 8px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(17, 17, 17, .78);
        color: #fff;
        font-size: 11px;
        font-weight: 700
    }

    .mobile-action-thumb.is-empty {
        flex: 1 1 auto;
        min-width: 180px;
        padding: 12px;
        display: flex;
        align-items: flex-end
    }

    .mobile-action-thumb.is-empty span {
        font-size: 11px;
        line-height: 1.45;
        color: rgba(17, 17, 17, .58)
    }

    .mobile-composer-plus,
    .mobile-voice-input-btn,
    .voice-call-trigger,
    .mobile-overflow-item,
    .mobile-action-camera,
    .mobile-action-thumb,
    .mobile-action-list-item,
    .mobile-action-grid-item,
    .mobile-action-sheet-link {
        outline: none;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none
    }

    .mobile-composer-plus:focus,
    .mobile-composer-plus:focus-visible,
    .mobile-voice-input-btn:focus,
    .mobile-voice-input-btn:focus-visible,
    .voice-call-trigger:focus,
    .voice-call-trigger:focus-visible,
    .mobile-overflow-item:focus,
    .mobile-overflow-item:focus-visible,
    .mobile-action-camera:focus,
    .mobile-action-camera:focus-visible,
    .mobile-action-thumb:focus,
    .mobile-action-thumb:focus-visible,
    .mobile-action-list-item:focus,
    .mobile-action-list-item:focus-visible,
    .mobile-action-grid-item:focus,
    .mobile-action-grid-item:focus-visible,
    .mobile-action-sheet-link:focus,
    .mobile-action-sheet-link:focus-visible {
        box-shadow: none;
        border-color: rgba(17, 17, 17, .08)
    }

    .mobile-composer-plus:active,
    .mobile-voice-input-btn:active,
    .voice-call-trigger:active,
    .mobile-overflow-item:active,
    .mobile-action-camera:active,
    .mobile-action-thumb:active,
    .mobile-action-list-item:active,
    .mobile-action-grid-item:active {
        transform: scale(.985)
    }

    .mobile-voice-input-btn.is-hold-active,
    .mobile-voice-input-btn.is-recording {
        box-shadow: 0 0 0 4px rgba(0, 122, 255, .12);
        border-color: rgba(0, 122, 255, .28)
    }

    .mobile-action-thumb.is-empty:active,
    .mobile-action-thumb.is-empty:focus,
    .mobile-action-thumb.is-empty:focus-visible {
        background: rgba(255,255,255,.96)
    }

    .mobile-action-list-item:active,
    .mobile-action-grid-item:active,
    .mobile-overflow-item:active,
    .mobile-action-camera:active {
        background: rgba(244, 242, 238, .96)
    }

    .mobile-action-sheet-link:active {
        opacity: .72
    }

    .mobile-action-primary-list {
        display: grid;
        gap: 10px
    }

    .mobile-action-secondary-scroller {
        min-width: 0;
        overflow: visible;
        padding: 2px 0 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: none;
        -webkit-mask-image: none;
        mask-image: none
    }

    .mobile-action-secondary-scroller::-webkit-scrollbar {
        display: none
    }

    .mobile-action-list-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 15px 16px;
        border-radius: 22px;
        background: #fff;
        border: 1px solid rgba(17, 17, 17, .05);
        box-shadow: 0 10px 24px rgba(17, 17, 17, .05)
    }

    .mobile-action-list-icon {
        width: 42px;
        height: 42px;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff
    }

    .mobile-action-list-item[data-mobile-tool="image"] .mobile-action-list-icon {
        background: linear-gradient(135deg, #111827, #4f46e5)
    }

    .mobile-action-list-item[data-mobile-tool="video"] .mobile-action-list-icon {
        background: linear-gradient(135deg, #111827, #db2777)
    }

    .mobile-action-list-copy {
        min-width: 0;
        display: grid;
        gap: 2px
    }

    .mobile-action-list-copy strong,
    .mobile-action-list-copy small {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .mobile-action-list-copy strong {
        font-size: 15px;
        color: #111
    }

    .mobile-action-list-copy small,
    .mobile-action-grid-item small {
        color: rgba(17, 17, 17, .5)
    }

    .mobile-action-secondary-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-columns: unset;
        grid-template-rows: none;
        gap: 10px;
        min-width: 0;
        align-items: stretch
    }

    .mobile-action-grid-item {
        display: grid;
        gap: 4px;
        min-height: 92px;
        padding: 14px;
        border-radius: 20px;
        background: rgba(255, 255, 255, .92);
        border: 1px solid rgba(17, 17, 17, .05);
        box-shadow: 0 10px 24px rgba(17, 17, 17, .05);
        scroll-snap-align: start
    }

    .mobile-action-grid-item strong {
        font-size: 14px;
        color: #111
    }

    body.mobile-flyout-open {
        overflow: hidden
    }

    .site-footer {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important
    }
}

.mobile-overflow-select-wrap,
.mobile-voice-input-btn {
    display: none
}

@media (min-width: 961px) {
    .mobile-overflow-select-wrap,
    .mobile-voice-input-btn {
        display: none !important
    }
}

@media (max-width: 960px) {
    .mobile-overflow-select-wrap {
        display: grid;
        gap: 8px;
        padding: 14px 16px;
        border-radius: 20px;
        background: rgba(255, 255, 255, .92);
        border: 1px solid rgba(17, 17, 17, .05);
        box-shadow: 0 10px 24px rgba(17, 17, 17, .05)
    }

    .mobile-overflow-select-wrap span {
        font-size: 13px;
        font-weight: 700;
        color: rgba(17, 17, 17, .72)
    }

    #mobileModelSelect {
        width: 100%;
        min-height: 44px;
        padding: 10px 36px 10px 12px;
        border-radius: 14px;
        border: 1px solid rgba(17, 17, 17, .08);
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
        color: #111;
        -webkit-appearance: none;
        appearance: none;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: border-color .15s, box-shadow .15s
    }

    #mobileModelSelect:focus {
        border-color: rgba(17, 17, 17, .24);
        box-shadow: 0 0 0 3px rgba(17, 17, 17, .06);
        outline: none
    }

    .mobile-voice-input-btn {
        position: relative;
        overflow: hidden;
        background: linear-gradient(180deg, #242424 0%, #111 100%);
        border-color: rgba(17, 17, 17, .92);
        color: #fff;
        box-shadow: 0 10px 24px rgba(17, 17, 17, .18), inset 0 1px 0 rgba(255, 255, 255, .08)
    }

    .mobile-voice-input-btn svg {
        width: 17px;
        height: 17px;
        display: block
    }

    .mobile-voice-input-btn.is-hold-active {
        transform: scale(.96)
    }

    .composer .mobile-voice-input-btn {
        display: inline-flex !important;
        visibility: visible !important;
    }

    .mobile-voice-input-btn.is-recording {
        background: #111;
        border-color: #111;
        color: #ff5a52;
        box-shadow: 0 0 0 4px rgba(17, 17, 17, .08), 0 12px 28px rgba(17, 17, 17, .2)
    }

    .mobile-voice-input-btn.is-processing {
        background: #1f1f1f;
        border-color: #1f1f1f;
        color: rgba(255, 255, 255, .92)
    }

    .composer .voice-call-trigger,
    .composer .composer-submit-btn,
    .composer .mobile-voice-input-btn {
        display: inline-flex
    }
}

.mobile-ppt-workspace,
.mobile-ppt-queue-fab,
.mobile-ppt-queue-popover {
    display: none
}

body.mobile-ppt-open {
    overflow: hidden
}

@media (max-width: 960px) {
    .mobile-ppt-workspace {
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        display: block;
        background: linear-gradient(180deg, #f8f5ef 0%, #f3efe7 100%)
    }

    .mobile-ppt-workspace[hidden],
    .mobile-ppt-queue-fab[hidden],
    .mobile-ppt-queue-popover[hidden] {
        display: none !important
    }

    .mobile-ppt-workspace__panel {
        position: relative;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr)
    }

    .mobile-ppt-workspace__header {
        position: sticky;
        top: 0;
        z-index: 2;
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) 64px;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        background: rgba(248, 245, 239, .92);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(94, 73, 53, .08)
    }

    .mobile-ppt-header-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        border-radius: 14px
    }

    .mobile-ppt-workspace__title {
        min-width: 0;
        display: grid;
        gap: 2px
    }

    .mobile-ppt-workspace__title strong {
        font-size: 16px;
        color: #111
    }

    .mobile-ppt-workspace__title span {
        font-size: 12px;
        color: rgba(17, 17, 17, .52)
    }

    .mobile-ppt-workspace__body {
        min-height: 0;
        overflow: auto;
        padding: 16px 16px 120px
    }

    .mobile-ppt-create-view,
    .mobile-ppt-detail-view,
    .mobile-ppt-detail-shell,
    .mobile-ppt-form {
        display: grid;
        gap: 14px
    }

    .mobile-ppt-hero-card,
    .mobile-ppt-detail-summary {
        padding: 18px;
        border-radius: 24px;
        background: rgba(255, 255, 255, .9);
        border: 1px solid rgba(94, 73, 53, .08);
        box-shadow: 0 18px 40px rgba(15, 23, 42, .08)
    }

    .mobile-ppt-hero-kicker {
        font-size: 11px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: rgba(94, 73, 53, .56)
    }

    .mobile-ppt-hero-card strong,
    .mobile-ppt-detail-summary strong {
        display: block;
        margin-top: 8px;
        font-size: 16px;
        line-height: 1.6;
        color: #111
    }

    .mobile-ppt-hero-card p,
    .mobile-ppt-detail-summary p,
    .mobile-ppt-inline-note,
    .mobile-ppt-form-status {
        margin: 0;
        font-size: 13px;
        line-height: 1.7;
        color: rgba(17, 17, 17, .56)
    }

    .mobile-ppt-inline-note,
    .mobile-ppt-form {
        padding: 18px;
        border-radius: 24px;
        background: rgba(255, 255, 255, .9);
        border: 1px solid rgba(94, 73, 53, .08)
    }

    .mobile-ppt-form label {
        display: grid;
        gap: 8px
    }

    .mobile-ppt-form span {
        font-size: 13px;
        font-weight: 700;
        color: #111
    }

    .mobile-ppt-form input,
    .mobile-ppt-form textarea,
    .mobile-ppt-form select {
        width: 100%;
        min-height: 46px;
        padding: 12px 14px;
        border-radius: 16px;
        border: 1px solid rgba(94, 73, 53, .12);
        background: #fff;
        color: #111
    }

    .mobile-ppt-form textarea {
        min-height: 136px;
        resize: vertical
    }

    .mobile-ppt-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px
    }

    .mobile-ppt-checkbox {
        display: flex !important;
        align-items: center;
        gap: 10px
    }

    .mobile-ppt-checkbox input {
        width: 18px;
        height: 18px;
        margin: 0
    }

    .mobile-ppt-form-actions {
        display: flex
    }

    .mobile-ppt-form-actions .primary {
        width: 100%;
        min-height: 48px;
        border-radius: 16px
    }

    .mobile-ppt-detail-content {
        min-height: 0;
        padding: 18px;
        border-radius: 24px;
        background: rgba(255, 255, 255, .94);
        border: 1px solid rgba(94, 73, 53, .08);
        box-shadow: 0 18px 40px rgba(15, 23, 42, .08)
    }

    .mobile-ppt-workspace .ppt-task-detail-head,
    .mobile-ppt-workspace .ppt-task-section-head {
        flex-direction: column;
        align-items: flex-start
    }

    .mobile-ppt-workspace .ppt-task-detail-actions,
    .mobile-ppt-workspace .ppt-workflow-form-actions {
        width: 100%
    }

    .mobile-ppt-workspace .ppt-task-detail-actions>* {
        flex: 1 1 calc(50% - 8px)
    }

    .mobile-ppt-workspace .ppt-task-meta-grid,
    .mobile-ppt-workspace .ppt-preview-grid {
        grid-template-columns: 1fr
    }

    .mobile-ppt-workspace .ppt-preview-slide {
        border-radius: 20px
    }

    .mobile-ppt-queue-fab {
        position: absolute;
        right: 16px;
        bottom: 24px;
        z-index: 3;
        min-width: 92px;
        min-height: 52px;
        padding: 0 16px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: #111;
        color: #fff;
        box-shadow: 0 18px 40px rgba(17, 17, 17, .28)
    }

    .mobile-ppt-queue-fab strong {
        min-width: 26px;
        height: 26px;
        padding: 0 8px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .16)
    }

    .mobile-ppt-queue-popover {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 92px;
        z-index: 3;
        max-height: min(54vh, 420px);
        padding: 14px;
        border-radius: 24px;
        background: rgba(255, 255, 255, .98);
        border: 1px solid rgba(94, 73, 53, .08);
        box-shadow: 0 24px 48px rgba(15, 23, 42, .16);
        overflow: auto
    }

    .mobile-ppt-queue-popover__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px
    }

    .mobile-ppt-queue-close {
        min-width: 40px;
        min-height: 40px;
        padding: 0;
        border-radius: 12px
    }

    .mobile-ppt-task-list {
        min-height: 0
    }
}

/* Skill 页面高级布局覆盖：靠近移动端 ChatGPT 首页风格 */
.skill-page-body {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .96), transparent 26%),
        radial-gradient(circle at top right, rgba(255, 255, 255, .58), transparent 22%),
        linear-gradient(180deg, #f7f4ee 0%, #f1ede5 36%, #ece9e2 100%) !important
}

.skill-page-shell {
    position: relative;
    isolation: isolate;
    width: min(1380px, calc(100vw - 28px));
    padding: 18px 0 72px !important
}

.skill-page-shell::before,
.skill-page-shell::after {
    content: '';
    position: absolute;
    inset: auto;
    width: 320px;
    height: 320px;
    border-radius: 999px;
    filter: blur(18px);
    pointer-events: none;
    z-index: -1
}

.skill-page-shell::before {
    top: 28px;
    right: -100px;
    background: radial-gradient(circle, rgba(255,255,255,.92), rgba(255,255,255,0))
}

.skill-page-shell::after {
    top: 220px;
    left: -120px;
    background: radial-gradient(circle, rgba(225, 230, 245, .82), rgba(225,230,245,0))
}

.skill-page-topbar,
.skill-page-hero-card,
.skill-content-section,
.skill-filter-panel {
    border-radius: 30px;
    border: 1px solid rgba(94, 73, 53, .08);
    background: rgba(255, 255, 255, .74);
    backdrop-filter: blur(22px);
    box-shadow: 0 22px 56px rgba(15, 23, 42, .08)
}

.skill-page-topbar {
    position: sticky;
    top: 12px;
    z-index: 15;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 18px 22px;
    margin-bottom: 18px
}

.skill-page-topbar-copy,
.skill-page-hero-copy,
.skill-page-hero-side {
    min-width: 0
}

.skill-page-topbar-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px
}

.skill-page-topbar-badge,
.skill-page-topbar-status,
.skill-home-shortcut,
.skill-page-hero-panel-label {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .04em
}

.skill-page-topbar-badge {
    background: #111;
    color: #fff;
    font-weight: 700
}

.skill-page-topbar-status {
    background: rgba(17, 17, 17, .05);
    color: rgba(17, 17, 17, .62)
}

.skill-page-topbar h1 {
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.14
}

.skill-page-lead {
    max-width: 760px;
    line-height: 1.72
}

.skill-page-actions {
    align-items: center;
    gap: 12px
}

.skill-page-actions .ghost,
.skill-page-hero-panel-actions .ghost,
.skill-home-shortcut {
    border-color: rgba(17, 17, 17, .06);
    background: rgba(255, 255, 255, .78);
    color: #111;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06)
}

.skill-page-hero-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(320px, .94fr);
    gap: 22px;
    padding: 28px;
    margin-bottom: 18px;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.95), transparent 26%),
        linear-gradient(135deg, rgba(249, 248, 244, .96), rgba(240, 236, 228, .94))
}

.skill-page-hero-card::after {
    content: '';
    position: absolute;
    inset: auto -120px -140px auto;
    width: 320px;
    height: 320px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(214, 220, 234, .85), rgba(214,220,234,0));
    pointer-events: none
}

.skill-page-hero-copy {
    display: grid;
    align-content: start;
    gap: 16px
}

.skill-page-hero-copy h2 {
    font-size: clamp(24px, 3.8vw, 40px);
    line-height: 1.18;
    max-width: 760px
}

.skill-page-hero-copy p,
.skill-page-hero-panel-copy {
    font-size: 14px;
    line-height: 1.76;
    color: rgba(17, 17, 17, .62)
}

.skill-home-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px
}

.skill-home-shortcut {
    text-decoration: none;
    font-weight: 600
}

.skill-page-hero-side {
    display: grid;
    gap: 14px;
    align-content: start
}

.skill-page-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px
}

.skill-page-hero-metrics div,
.skill-page-hero-panel {
    border-radius: 24px;
    border: 1px solid rgba(94, 73, 53, .08);
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .05)
}

.skill-page-hero-metrics div {
    min-width: 0;
    padding: 16px 14px
}

.skill-page-hero-metrics strong {
    font-size: clamp(24px, 3vw, 30px);
    line-height: 1.05;
    color: #111
}

.skill-page-hero-metrics span {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: rgba(17, 17, 17, .54)
}

.skill-page-hero-panel {
    display: grid;
    gap: 12px;
    padding: 18px 18px 20px
}

.skill-page-hero-panel-label {
    width: fit-content;
    background: rgba(17, 17, 17, .06);
    color: #111;
    font-weight: 700
}

.skill-page-hero-panel-title {
    font-size: 16px;
    line-height: 1.65;
    color: #111
}

.skill-page-hero-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.skill-content-section,
.skill-filter-panel {
    padding: 24px 24px 26px;
    margin-bottom: 18px
}

.skill-section-head,
.skill-filter-head {
    margin-bottom: 16px
}

.skill-section-head .eyebrow,
.skill-filter-head .eyebrow {
    color: rgba(17, 17, 17, .46)
}

.skill-section-head h3,
.skill-filter-head h3 {
    font-size: 24px;
    line-height: 1.18
}

.skill-section-head .hint,
.skill-filter-head p {
    max-width: 620px;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(17, 17, 17, .54)
}

.skill-tool-card,
.skill-analysis-card,
.skill-theme-panel,
.skill-module-card,
.skill-category-card,
.skill-work-card,
.skill-history-card,
.skill-empty-card {
    border-radius: 26px;
    border: 1px solid rgba(94, 73, 53, .08);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(252,251,248,.86));
    box-shadow: 0 16px 34px rgba(15, 23, 42, .06)
}

.skill-tool-card,
.skill-theme-panel,
.skill-module-card,
.skill-category-card,
.skill-work-card,
.skill-history-card {
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease)
}

.skill-tool-card:hover,
.skill-theme-panel:hover,
.skill-module-card:hover,
.skill-category-card:hover,
.skill-work-card:hover,
.skill-history-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 44px rgba(15, 23, 42, .09);
    border-color: rgba(94, 73, 53, .12)
}

.skill-workbench-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px
}

.skill-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px
}

.skill-category-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px
}

.skill-filter-tabs {
    gap: 12px
}

.skill-filter-tabs button,
.skill-module-tags span,
.skill-module-badge,
.skill-page-kicker {
    border-radius: 999px
}

.skill-tool-head,
.skill-inline-actions,
.skill-module-actions,
.skill-page-actions,
.skill-page-hero-panel-actions {
    align-items: center
}

.skill-tool-side-note {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(17, 17, 17, .05);
    color: rgba(17, 17, 17, .56)
}

.skill-toolbar {
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(94, 73, 53, .08)
}

.skill-pagination {
    margin-top: 16px
}

.skill-page-body .primary {
    background: #111;
    border-color: #111;
    color: #fff
}

.skill-page-body .primary:hover {
    background: #000
}

.skill-page-body .ghost {
    background: rgba(255,255,255,.72)
}

@media (max-width: 1100px) {
    .skill-page-hero-card {
        grid-template-columns: 1fr
    }

    .skill-page-hero-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media (max-width: 760px) {
    .skill-page-shell {
        width: min(100vw - 20px, 100%);
        padding: 12px 0 44px !important
    }

    .skill-page-topbar {
        top: 8px;
        grid-template-columns: 1fr;
        padding: 16px;
        border-radius: 24px
    }

    .skill-page-topbar h1 {
        font-size: 22px
    }

    .skill-page-hero-card,
    .skill-content-section,
    .skill-filter-panel {
        padding: 18px;
        border-radius: 24px
    }

    .skill-page-hero-copy h2 {
        font-size: 24px
    }

    .skill-page-hero-metrics {
        grid-template-columns: 1fr
    }

    .skill-home-shortcuts {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch
    }

    .skill-home-shortcut {
        flex: 0 0 auto
    }

    .skill-workbench-grid,
    .skill-card-grid,
    .skill-category-grid {
        grid-template-columns: 1fr
    }

    .skill-toolbar {
        padding: 14px
    }
}

.skill-page-topbar {
    position: static !important;
    top: auto !important
}

.skill-page-body .skill-tool-status {
    border: 1px solid transparent
}

.skill-page-body .skill-tool-status[data-mode="success"] {
    background: rgba(15, 23, 42, .05);
    border-color: rgba(148, 163, 184, .22);
    color: #334155
}

.skill-page-body .skill-tool-status[data-mode="error"] {
    background: rgba(245, 158, 11, .12);
    border-color: rgba(245, 158, 11, .24);
    color: #92400e
}

.skill-page-body .skill-diff-badge--before {
    color: #64748b;
    background: rgba(226, 232, 240, .92)
}

.skill-page-body .skill-diff-token--removed {
    background: rgba(226, 232, 240, .9);
    color: #64748b;
    text-decoration-color: rgba(100, 116, 139, .72)
}

#paperWriterResult {
    gap: 18px
}

#paperWriterResult .skill-analysis-card {
    padding: 20px 22px
}

#paperWriterResult .skill-module-head {
    margin-bottom: 10px
}

#paperWriterResult .skill-card-meta {
    line-height: 1.75
}

#paperWriterResult .skill-pre--analysis {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.95;
    letter-spacing: .01em;
    color: #243041
}

#paperWriterResult .skill-inline-actions {
    margin-top: 14px
}

@media (max-width: 760px) {
    .skill-page-topbar {
        display: grid;
        gap: 14px;
        padding: 14px 16px
    }

    .skill-page-topbar-meta,
    .skill-page-topbar .eyebrow {
        display: none
    }

    .skill-page-topbar h1 {
        font-size: 20px;
        line-height: 1.25
    }

    .skill-page-lead,
    .skill-page-hero-panel-copy,
    .skill-section-head .hint {
        font-size: 14px;
        line-height: 1.75
    }

    .skill-page-actions {
        width: 100%;
        justify-content: flex-start
    }

    .skill-page-actions .ghost {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0
    }

    .skill-page-action-secondary {
        display: none
    }

    .skill-inline-actions {
        flex-direction: column;
        align-items: stretch
    }
}

@media (max-width: 640px) {
    #chatForm.composer {
        display: block;
        padding: 6px 10px max(6px, env(safe-area-inset-bottom))
    }

    #chatForm #toolOptionBar {
        margin-bottom: 8px
    }

    #chatForm .mobile-composer-shell {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        grid-template-areas: "plus prompt actions";
        align-items: center;
        gap: 8px;
        width: 100%;
        min-width: 0
    }

    #chatForm .mobile-composer-plus {
        grid-area: plus
    }

    #chatForm .mobile-composer-shell > * {
        min-width: 0
    }

    #chatForm .mobile-composer-plus,
    #chatForm .mobile-voice-input-btn,
    #chatForm .voice-call-trigger {
        display: inline-grid !important;
        place-items: center;
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 999px
    }

    #chatForm .composer-submit-btn {
        width: 40px;
        min-width: 40px;
        height: 40px
    }

    #chatForm #prompt {
        grid-area: prompt;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        writing-mode: horizontal-tb;
        text-orientation: mixed
    }

    #chatForm .composer-actions {
        grid-area: actions;
        justify-self: end;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        width: auto;
        min-width: 0;
        flex: 0 0 auto
    }
}

@media (max-width: 520px) {
    #chatForm.composer {
        padding: 6px 8px max(4px, env(safe-area-inset-bottom));
        padding-inline: 8px
    }

    #chatForm .mobile-composer-shell {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 6px
    }

    #chatForm .mobile-composer-plus,
    #chatForm .mobile-voice-input-btn,
    #chatForm .voice-call-trigger,
    #chatForm .composer-submit-btn {
        width: 36px;
        min-width: 36px;
        height: 36px
    }

    #chatForm .composer-actions {
        gap: 4px
    }
}

@media (min-width: 961px) {
    .mobile-chatbar,
    .mobile-sidebar-panel,
    .mobile-flyout-backdrop,
    .mobile-action-sheet,
    .mobile-overflow-menu,
    .mobile-ppt-workspace,
    .mobile-ppt-queue-fab,
    .mobile-ppt-queue-popover {
        display: none !important
    }

    body.mobile-flyout-open,
    body.mobile-ppt-open {
        overflow: auto
    }

    body.sidebar-drawer-open .sidebar-backdrop {
        opacity: 0;
        pointer-events: none
    }
}

@media (max-width: 960px) {
    .admin-shell {
        padding: 14px 10px 18px;
    }

    .admin-topbar {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 10px;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .admin-topbar .topbar-left {
        width: 100%;
        align-items: flex-start;
        gap: 10px;
        flex-wrap: nowrap;
    }

    .admin-topbar .topbar-left > div {
        min-width: 0;
        flex: 1 1 auto;
    }

    .admin-topbar .topbar-left .eyebrow,
    .admin-topbar .topbar-left .breadcrumb {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-topbar .topbar-left h1 {
        font-size: 20px;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    .admin-topbar #navToggle {
        width: 42px;
        height: 42px;
        min-width: 42px;
        flex: 0 0 auto;
    }

    .admin-topbar .topbar-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
    }

    .admin-topbar .topbar-actions .ghost,
    .admin-topbar .topbar-actions .link {
        min-height: 40px;
        padding: 9px 12px;
        border-radius: 12px;
    }

    .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: static;
        order: 2;
        display: none;
    }

    .admin-shell.nav-open .admin-sidebar {
        display: grid;
    }

    .admin-content {
        order: 1;
    }
}

/* Skill App 化收口：保留旧 H5 功能，压短首屏并强化移动端工作区入口 */
.skill-app-home {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px
}

.skill-app-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 132px;
    padding: 16px;
    border-radius: 28px;
    border: 1px solid rgba(17, 17, 17, .07);
    background: rgba(255, 255, 255, .76);
    color: #111;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .07);
    backdrop-filter: blur(20px);
    overflow: hidden
}

.skill-app-card::after {
    content: '';
    position: absolute;
    inset: auto -42px -48px auto;
    width: 112px;
    height: 112px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(17, 17, 17, .08), rgba(17, 17, 17, 0));
    pointer-events: none
}

.skill-app-card.is-primary {
    background: linear-gradient(145deg, rgba(17,17,17,.96), rgba(50,50,50,.9));
    color: #fff
}

.skill-app-card-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 16px;
    background: rgba(17, 17, 17, .07);
    font-weight: 800
}

.skill-app-card.is-primary .skill-app-card-icon {
    background: rgba(255,255,255,.16)
}

.skill-app-card strong {
    font-size: 16px;
    line-height: 1.25
}

.skill-app-card small {
    color: rgba(17, 17, 17, .56);
    line-height: 1.55
}

.skill-app-card.is-primary small {
    color: rgba(255,255,255,.66)
}

.skill-page-body .skill-content-section {
    scroll-margin-top: 96px
}

.skill-page-body .skill-content-section.is-collapsed {
    padding-block: 18px
}

.skill-page-body .skill-content-section.is-collapsed .skill-section-head {
    margin-bottom: 0
}

.skill-page-body .skill-section-toggle {
    min-width: 66px;
    border-radius: 999px
}

.skill-page-body .skill-create-section .skill-tool-card {
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,248,252,.88))
}

@media (max-width: 960px) {
    .skill-app-home {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .skill-app-card {
        min-height: 118px
    }
}

@media (max-width: 760px) {
    .skill-page-body {
        background: #f2f2f7 !important;
        overflow-x: hidden;
    }

    .skill-page-shell {
        width: 100% !important;
        max-width: 100%;
        overflow-x: clip;
        padding: max(8px, env(safe-area-inset-top)) 8px calc(88px + env(safe-area-inset-bottom)) !important
    }

    .skill-page-topbar {
        position: static;
        top: auto;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 16px;
        border-radius: 22px;
        background: rgba(255,255,255,.92);
        box-shadow: 0 10px 24px rgba(15, 23, 42, .06)
    }

    .skill-page-topbar-meta,
    .skill-page-action-secondary,
    .skill-section-toggle {
        display: none !important
    }

    .skill-page-topbar h1 {
        font-size: 22px
    }

    .skill-page-lead {
        font-size: 13px;
        line-height: 1.65
    }

    .skill-page-actions {
        width: 100%
    }

    .skill-page-actions .ghost {
        width: 100%;
        justify-content: center
    }

    .skill-page-hero-card {
        display: none
    }

    .skill-app-home {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        z-index: 30;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        margin: 0;
        padding: 8px;
        border-radius: 22px;
        border: 1px solid rgba(17, 17, 17, .06);
        background: rgba(255,255,255,.94);
        box-shadow: 0 16px 36px rgba(15, 23, 42, .12);
        backdrop-filter: blur(20px);
        overflow: hidden;
        max-width: calc(100vw - 16px)
    }

    .skill-app-card {
        min-height: 0;
        min-width: 0;
        padding: 8px 4px 6px;
        border-radius: 16px;
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 4px;
        box-shadow: none;
        background: transparent;
        border-color: transparent
    }

    .skill-app-card::after,
    .skill-app-card small {
        display: none
    }

    .skill-app-card-icon {
        width: 28px;
        height: 28px;
        border-radius: 10px;
        font-size: 13px;
    }

    .skill-app-card strong {
        font-size: 10px;
        line-height: 1.15;
        text-align: center
    }

    .skill-app-card.is-active,
    .skill-app-card.is-primary {
        background: linear-gradient(145deg, rgba(17,17,17,.96), rgba(50,50,50,.9));
        color: #fff;
        border-color: rgba(17, 17, 17, .08)
    }

    .skill-app-card.is-active .skill-app-card-icon,
    .skill-app-card.is-primary .skill-app-card-icon {
        background: rgba(255,255,255,.16)
    }

    .skill-content-section,
    .skill-filter-panel {
        display: none;
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
        padding: 16px;
        border-radius: 24px;
        margin-bottom: 12px
    }

    .skill-content-section.is-mobile-active,
    .skill-filter-panel.is-mobile-active {
        display: block
    }

    .skill-section-head,
    .skill-filter-head {
        display: block;
        margin-bottom: 12px
    }

    .skill-section-head .hint,
    .skill-filter-head p {
        margin-top: 6px
    }

    .skill-section-head h3,
    .skill-filter-head h3 {
        font-size: 20px
    }

    .skill-workbench-grid,
    .skill-card-grid,
    .skill-category-grid,
    .skill-theme-overview {
        grid-template-columns: 1fr !important;
        gap: 12px
    }

    .skill-tool-card,
    .skill-theme-panel,
    .skill-module-card,
    .skill-category-card,
    .skill-work-card,
    .skill-history-card,
    .skill-empty-card {
        border-radius: 22px;
        box-shadow: 0 10px 22px rgba(15, 23, 42, .06)
    }

    .skill-tool-card:hover,
    .skill-theme-panel:hover,
    .skill-module-card:hover,
    .skill-category-card:hover,
    .skill-work-card:hover,
    .skill-history-card:hover {
        transform: none
    }
}

/* 旧 H5 聊天页移动端轻量统一：只调视觉，不改业务交互 */
@media (max-width: 960px) {
    .mobile-chatbar,
    .mobile-composer-shell,
    .mobile-overflow-menu-card,
    .mobile-action-sheet-panel {
        border: 1px solid rgba(17, 17, 17, .07);
        background: rgba(255, 255, 255, .86);
        backdrop-filter: blur(22px);
        box-shadow: 0 14px 34px rgba(15, 23, 42, .08)
    }

    .mobile-chatbar {
        margin: max(8px, env(safe-area-inset-top)) 10px 0;
        border-radius: 24px
    }

    .mobile-chatbar-title strong {
        letter-spacing: -.02em
    }

    .mobile-chatbar-btn,
    .mobile-composer-plus,
    .mobile-voice-input-btn,
    .voice-call-trigger,
    .composer-submit-btn {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation
    }

    .mobile-action-sheet-panel {
        border-radius: 30px 30px 0 0
    }

    .mobile-action-list-item,
    .mobile-overflow-item,
    .mobile-action-thumb,
    .mobile-action-camera {
        border-color: rgba(17, 17, 17, .06);
        background: rgba(255, 255, 255, .78)
    }

    .mobile-action-list-item:active,
    .mobile-overflow-item:active,
    .mobile-action-thumb:active,
    .mobile-action-camera:active {
        transform: scale(.985)
    }

    #chatForm.composer {
        background: linear-gradient(180deg, rgba(242,242,247,0), rgba(242,242,247,.94) 32%, rgba(242,242,247,.98))
    }
}

.profile-workspace-shell {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom))
}

.profile-page-topbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 14px 20px;
    border: 1px solid rgba(196, 199, 207, .72);
    border-radius: 20px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 8px 24px rgba(17, 17, 17, .05);
    backdrop-filter: blur(20px)
}

.profile-page-topbar-copy {
    min-width: 0
}

.profile-page-topbar-copy h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.02em
}

.profile-page-topbar-copy h1,
.profile-workspace-hero h2 {
    margin: 0;
    letter-spacing: -.02em
}

.profile-page-topbar-lead,
.profile-page-hero-panel-copy {
    margin: 0;
    color: var(--muted);
    line-height: 1.6
}

.profile-workspace-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .8fr);
    gap: 18px;
    align-items: stretch
}

.profile-page-hero-actions,
.profile-mobile-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px
}

.profile-page-hero-panel {
    border: 1px solid rgba(196, 199, 207, .56);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,247,251,.72));
    padding: 18px;
    display: grid;
    gap: 10px
}

.profile-page-hero-panel-title {
    font-size: 18px;
    line-height: 1.5
}

.profile-workspace-home {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px
}

.profile-workspace-card {
    text-align: left;
    border: 1px solid rgba(196, 199, 207, .66);
    border-radius: 22px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 14px 30px rgba(17, 17, 17, .05);
    display: grid;
    gap: 6px;
    padding: 16px;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease)
}

.profile-workspace-card:hover,
.profile-workspace-card.is-primary,
.profile-pane-subtab.is-active,
.skill-subtab.is-active {
    border-color: rgba(0, 122, 255, .34);
    box-shadow: 0 18px 38px rgba(0, 122, 255, .12)
}

.profile-workspace-card-icon {
    color: #007aff;
    font-size: 18px;
    font-weight: 700
}

.profile-workspace-card strong,
.profile-workspace-card small {
    display: block
}

.profile-workspace-card small {
    color: var(--muted);
    line-height: 1.5
}

.profile-pane-subtabs,
.skill-subtabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 0 4px;
    scrollbar-width: none
}

.profile-pane-subtabs::-webkit-scrollbar,
.skill-subtabs::-webkit-scrollbar {
    display: none
}

.profile-pane-subtab,
.skill-subtab {
    flex: none;
    border: 1px solid rgba(196, 199, 207, .66);
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    color: var(--muted);
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.15;
    white-space: nowrap
}

.profile-mobile-workspace-stack {
    padding-bottom: max(20px, env(safe-area-inset-bottom))
}

.profile-mobile-hero-card {
    gap: 14px
}

.profile-inline-action {
    width: auto;
    min-height: 44px;
    margin-top: 0
}

.skill-subtab-panels [data-skill-subtab-panel][hidden] {
    display: none !important
}

@media (max-width: 960px) {
    .profile-page-topbar,
    .profile-workspace-hero {
        grid-template-columns: 1fr;
        align-items: stretch
    }

    .profile-workspace-home {
        display: flex;
        overflow-x: auto;
        padding-bottom: 4px
    }

    .profile-workspace-card {
        flex: 0 0 min(260px, 82vw)
    }
}

@media (max-width: 760px) {
    .profile-page-topbar {
        padding: 16px;
        border-radius: 22px
    }

    .profile-workspace-hero,
    .profile-page-hero-panel,
    .profile-workspace-card {
        border-radius: 20px
    }

    .profile-pane-subtabs,
    .skill-subtabs {
        margin-top: -4px
    }

    .profile-pane-subtab,
    .skill-subtab {
        padding: 7px 10px;
        font-size: 12px
    }
}

/* Final override for user bubbles */
.msg-wrap.user .msg.user {
    background: linear-gradient(180deg, #eaf2ff, #ffffff) !important;
    border-color: rgba(191, 219, 254, .92) !important;
    box-shadow: 0 14px 34px rgba(37, 99, 235, .10) !important;
    color: var(--text) !important
}

.msg-wrap.user .msg.user .msg-content,
.msg-wrap.user .msg.user .msg-content *,
.msg-wrap.user .msg-name {
    color: var(--text) !important
}

.msg-wrap.user .msg-avatar {
    background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .18) !important
}

/* Admin nav responsiveness override */
.admin-page {
    overflow-x: hidden;
}

.admin-topbar {
    position: sticky;
    top: 12px;
    z-index: var(--z-sticky-nav);
}

.topbar-actions {
    position: relative;
}

.admin-more-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 180px;
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    border: 1px solid var(--line);
    box-shadow: 0 16px 36px rgba(17,17,17,.12);
    z-index: var(--z-dropdown);
}

.admin-more-menu .link,
.admin-more-menu .admin-more-link {
    justify-content: flex-start;
    width: 100%;
}

.admin-sidebar {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-nav-group {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.admin-nav-group-toggle {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(196, 199, 207, .4);
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.58));
    color: var(--muted);
    text-align: left;
    font-weight: 700;
    cursor: pointer;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease)
}

.admin-nav-group-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(17,17,17,.08);
    border-color: rgba(0, 122, 255, .2)
}

.admin-nav-group-toggle::after {
    content: '▾';
    float: right;
    transition: transform .18s ease;
}

.admin-nav-group-toggle[aria-expanded="false"]::after {
    transform: rotate(-90deg);
}

.admin-nav-group-items {
    display: grid;
    gap: 8px;
}

.admin-content {
    min-width: 0;
    width: 100%;
}

@media (max-width: 960px) {
    body.admin-page.nav-open {
        overflow: hidden;
    }

    .admin-topbar {
        top: 0;
        border-radius: 0 0 18px 18px;
        padding-inline: 12px;
    }

    .admin-layout {
        position: relative;
        display: block;
        min-height: auto;
    }

    .admin-sidebar {
        position: fixed;
        top: 76px;
        left: 12px;
        right: 12px;
        z-index: var(--z-popover);
        max-height: calc(100vh - 92px);
        padding: 14px;
        border-radius: 20px;
        box-shadow: 0 24px 64px rgba(15, 23, 42, .24);
        transform: translateY(-12px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease, transform .2s ease;
    }

    .admin-shell.nav-open .admin-sidebar {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .admin-shell.nav-open .admin-content::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .35);
        z-index: var(--z-popover-backdrop);
        backdrop-filter: blur(2px);
    }

    .admin-content {
        position: relative;
        z-index: 1;
    }

    .nav-item,
    .admin-nav-group-toggle {
        width: 100%;
    }

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

@media (max-width: 640px) {
    .admin-sidebar {
        left: 10px;
        right: 10px;
        top: 72px;
        max-height: calc(100vh - 84px);
        padding: 12px;
    }

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

    .section-subnav {
        display: grid;
        grid-template-columns: 1fr;
    }

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

    .panel-actions,
    .cell-tools {
        width: 100%;
    }
}

@media (min-width: 901px) {
    .profile-shell.profile-workspace-shell {
        width: min(1280px, calc(100vw - 40px));
        margin: 20px auto 28px;
        gap: 16px;
    }
    .profile-page-topbar {
        padding: 16px 18px;
        align-items: center;
    }
    .profile-page-topbar-copy {
        display: grid;
        gap: 6px;
    }
    .profile-page-topbar-copy h1 {
        font-size: 28px;
        line-height: 1.1;
        margin: 0;
    }
    .profile-page-topbar-lead {
        font-size: 13px;
    }
    .profile-workspace-hero {
        padding: 12px 16px;
        min-height: 0;
    }
    .profile-workspace-hero h2 {
        font-size: 18px;
        line-height: 1.15;
        margin: 0;
    }
    .profile-workspace-hero p {
        font-size: 12px;
        line-height: 1.35;
        margin: 0;
    }
    .profile-workspace-home {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
    .profile-workspace-card {
        min-height: 74px;
        padding: 10px 10px;
        gap: 4px;
        border-radius: 16px;
    }
    .profile-workspace-card strong {
        font-size: 13px;
        line-height: 1.15;
    }
    .profile-workspace-card small {
        font-size: 10px;
        line-height: 1.25;
    }
    .profile-summary-grid,
    #profileAgreementSection {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }
    .profile-summary-card,
    #passwordSecuritySection {
        grid-column: span 2;
        min-height: 100%;
    }
    .profile-summary-card,
    #passwordSecuritySection,
    #profileAgreementSection .profile-card {
        padding: 16px;
    }
    .profile-summary-meta,
    .profile-summary-tags,
    .quota-metrics,
    .profile-reward-summary,
    .profile-usage-summary {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }
    .info-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    #rewardSection,
    #inviteSection,
    #priceSection,
    #usageSection,
    #jobSection {
        max-width: 1160px;
        margin-inline: auto;
        padding: 16px;
    }
    .usage-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }
    .usage-main-grid {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        gap: 12px;
    }
    .usage-bottom-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .usage-detail-card,
    .usage-panel {
        padding: 14px;
    }
    .usage-distribution-layout {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 12px;
    }
    .usage-distribution-chart {
        width: 156px;
        padding: 18px;
    }
    .usage-chart-wrap {
        padding: 12px;
    }
    .profile-table {
        min-width: 0;
        width: 100%;
    }
    .profile-table th,
    .profile-table td {
        white-space: normal;
        word-break: break-word;
        font-size: 13px;
    }
    .table-wrap {
        overflow-x: hidden;
    }
    .invite-share-box {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) 180px minmax(220px, .8fr);
        gap: 12px;
        align-items: start;
    }
    .invite-share-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-self: stretch;
    }
    .invite-share-actions .primary,
    .invite-share-actions .ghost {
        min-width: 0;
        width: 100%;
    }
    .invite-qr-card img {
        width: 136px;
        height: 136px;
    }
}

/* Profile workspace: compact hero + 2x4 overview grid + panelized rewards/usage */
.profile-workspace-hero {
    padding: 12px 14px;
    border-radius: 18px;
}
.profile-workspace-hero .profile-hero-copy {
    gap: 2px;
}
.profile-workspace-hero .profile-page-kicker {
    font-size: 10px;
}
.profile-workspace-hero h2 {
    font-size: 18px;
    line-height: 1.15;
}
.profile-workspace-hero p {
    font-size: 11px;
    line-height: 1.35;
}
.profile-workspace-home {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.profile-workspace-card {
    min-height: 78px;
    padding: 10px 8px;
    gap: 4px;
    border-radius: 16px;
}
.profile-workspace-card strong {
    font-size: 13px;
}
.profile-workspace-card small {
    font-size: 10px;
    line-height: 1.25;
}
.profile-workspace-card.is-active,
.profile-workspace-card.is-primary {
    border-color: rgba(47,111,237,.42);
    background: linear-gradient(180deg, rgba(47,111,237,.12), rgba(255,255,255,.96));
    box-shadow: 0 14px 28px rgba(47,111,237,.12);
}
.profile-summary-grid,
#profileAgreementSection {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.profile-summary-card,
#passwordSecuritySection,
#profileAgreementSection .profile-card {
    min-height: 100%;
}
.profile-summary-card {
    grid-column: span 2;
}
#passwordSecuritySection {
    grid-column: span 2;
}
#profileAgreementSection .profile-card {
    padding: 14px;
}
#rewardSection,
#inviteSection,
#priceSection,
#usageSection,
#jobSection {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}
.profile-reward-summary,
.profile-usage-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.usage-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.usage-main-grid,
.usage-bottom-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.table-wrap {
    overflow-x: auto;
    max-width: 100%;
}
.profile-table {
    min-width: 0;
    width: 100%;
}
.profile-table th,
.profile-table td {
    white-space: normal;
    word-break: break-word;
}
@media (max-width: 1100px) {
    .profile-summary-grid,
    #profileAgreementSection {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .usage-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .usage-main-grid,
    .usage-bottom-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 700px) {
    .profile-workspace-home {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    .profile-workspace-card {
        min-height: 70px;
        padding: 8px 6px;
        border-radius: 14px;
    }
    .profile-workspace-card strong {
        font-size: 12px;
    }
    .profile-workspace-card small {
        font-size: 9px;
    }
    .profile-summary-grid,
    #profileAgreementSection,
    .profile-reward-summary,
    .profile-usage-summary,
    .usage-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .profile-summary-card,
    #passwordSecuritySection {
        grid-column: span 2;
    }
}
@media (max-width: 960px) {
    body.admin-page [data-section-panel="question-bank"] .settings-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    body.admin-page [data-section-panel="question-bank"] .table-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    body.admin-page [data-section-panel="question-bank"] .pager {
        justify-content: space-between;
        width: 100%;
    }
    body.admin-page [data-section-panel="question-bank"] .provider-card-actions,
    body.admin-page [data-section-panel="question-bank"] .panel-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    body.admin-page [data-section-panel="question-bank"] .provider-card-actions button,
    body.admin-page [data-section-panel="question-bank"] .panel-actions button {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }
    body.admin-page [data-section-panel="question-bank"] #questionBankAdminForm {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }
    body.admin-page [data-section-panel="question-bank"] .field-label-span-2,
    body.admin-page [data-section-panel="question-bank"] .settings-inline-field {
        grid-column: auto;
        width: 100%;
    }
}
    .skill-question-grid,
    .tool-result-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        margin-top: 14px;
    }
    .skill-question-card,
    .skill-analysis-card {
        border: 1px solid rgba(204, 209, 220, .9);
        border-radius: 22px;
        background: rgba(255, 255, 255, .88);
        box-shadow: 0 10px 28px rgba(17, 17, 17, .07);
        padding: 16px 16px 14px;
        overflow: hidden;
    }
    .skill-question-card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .skill-question-card::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 22px;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0));
    }
    .skill-question-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }
    .skill-question-title-row {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .skill-question-index {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 0 12px;
        border-radius: 999px;
        background: rgba(0, 122, 255, .12);
        color: #0b63ce;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .02em;
    }
    .question-type-badge,
    .question-answer-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        padding: 0 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .02em;
        white-space: nowrap;
    }
    .question-type-badge.is-single { background: rgba(0, 122, 255, .10); color: #0b63ce; }
    .question-type-badge.is-multiple { background: rgba(175, 82, 222, .12); color: #7b2cbf; }
    .question-type-badge.is-judge { background: rgba(52, 199, 89, .14); color: #1f9a4d; }
    .question-answer-badge {
        background: rgba(255, 149, 0, .14);
        color: #b05c00;
    }
    .skill-question-stem {
        border: 1px solid rgba(210, 215, 226, .82);
        border-radius: 18px;
        background: rgba(246, 248, 252, .92);
        padding: 12px 12px 11px;
        line-height: 1.7;
        white-space: pre-wrap;
        word-break: break-word;
    }
    .question-option-list {
        display: grid;
        gap: 10px;
    }
    .question-option-pill {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        align-items: flex-start;
        padding: 11px 12px;
        border: 1px solid rgba(206, 211, 222, .9);
        border-radius: 16px;
        background: rgba(255, 255, 255, .92);
    }
    .question-option-pill.is-correct {
        border-color: rgba(52, 199, 89, .55);
        background: linear-gradient(180deg, rgba(52, 199, 89, .12), rgba(52, 199, 89, .06));
        box-shadow: inset 0 0 0 1px rgba(52, 199, 89, .08);
    }
    .question-option-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 28px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(0, 122, 255, .10);
        color: #0b63ce;
        font-weight: 800;
        font-size: 12px;
        letter-spacing: .03em;
    }
    .question-option-pill.is-correct .question-option-label {
        background: rgba(52, 199, 89, .16);
        color: #1f9a4d;
    }
    .question-option-text {
        line-height: 1.65;
        word-break: break-word;
    }

body.is-android-shell {
    --android-shell-safe-bottom: env(safe-area-inset-bottom, 0px);
}

body.is-android-shell .site-footer {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body.is-android-shell .app-shell {
    min-height: 100dvh;
    padding-bottom: var(--android-shell-safe-bottom);
}

body.is-android-shell .chat-main {
    padding-bottom: max(12px, var(--android-shell-safe-bottom)) !important;
    margin-bottom: 0 !important;
}

/* ===== 桌面端布局修复：与移动端分离 ===== */
@media (min-width: 961px) {
    .app-shell {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .sidebar {
        height: 100%;
        max-height: 100%;
    }

    .chat-main {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .chat-main .topbar {
        flex-shrink: 0;
    }

    .chat-main .hero-empty {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .chat-main .messages {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .chat-main .composer {
        position: relative;
        bottom: auto;
        flex-shrink: 0;
    }

    .chat-main .site-footer {
        flex-shrink: 0;
        width: 100%;
        padding: 10px 24px;
    }
}

/* Skills page optimizations - 2026 */
/* Damping easing functions */
:root {
    --skill-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --skill-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --skill-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --skill-duration-fast: 0.2s;
    --skill-duration-normal: 0.35s;
    --skill-duration-slow: 0.5s;
}

/* Entrance animations */
@keyframes skill-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes skill-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes skill-scale-in {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes skill-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Apply entrance animations */
.skill-page-topbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 14px 20px;
    border-radius: 20px;
    border: 1px solid rgba(196, 199, 207, .72);
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 8px 24px rgba(17, 17, 17, .05);
    backdrop-filter: blur(20px);
    position: static;
    margin-bottom: 16px;
    animation: skill-fade-in-up var(--skill-duration-slow) var(--skill-ease-smooth) both;
}

.skill-page-topbar-copy {
    min-width: 0
}

.skill-page-topbar h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.02em
}

.skill-page-actions {
    display: flex;
    gap: 8px;
    align-items: center
}

.skill-page-actions .ghost {
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(196, 199, 207, .72);
    background: rgba(255, 255, 255, .76);
    color: var(--text);
    transition: all var(--skill-duration-normal) var(--skill-ease-spring);
    will-change: transform, box-shadow;
}

.skill-page-actions .ghost:hover {
    background: rgba(255, 255, 255, .92);
    border-color: rgba(196, 199, 207, .88);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
}

.skill-page-actions .ghost:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
}

.skill-app-home {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px;
    animation: skill-fade-in-up var(--skill-duration-slow) var(--skill-ease-smooth) 0.1s both;
}

.skill-app-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 120px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(196, 199, 207, .66);
    background: rgba(255, 255, 255, .82);
    color: #111;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
    backdrop-filter: blur(16px);
    overflow: hidden;
    transition: all var(--skill-duration-normal) var(--skill-ease-spring);
    text-decoration: none;
    will-change: transform, box-shadow;
    cursor: pointer;
}

.skill-app-card:nth-child(1) { animation: skill-fade-in-up var(--skill-duration-slow) var(--skill-ease-smooth) 0.15s both; }
.skill-app-card:nth-child(2) { animation: skill-fade-in-up var(--skill-duration-slow) var(--skill-ease-smooth) 0.2s both; }
.skill-app-card:nth-child(3) { animation: skill-fade-in-up var(--skill-duration-slow) var(--skill-ease-smooth) 0.25s both; }
.skill-app-card:nth-child(4) { animation: skill-fade-in-up var(--skill-duration-slow) var(--skill-ease-smooth) 0.3s both; }
.skill-app-card:nth-child(5) { animation: skill-fade-in-up var(--skill-duration-slow) var(--skill-ease-smooth) 0.35s both; }

.skill-app-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 24px 48px rgba(15, 23, 42, .12);
    border-color: rgba(196, 199, 207, .82);
}

.skill-app-card:active {
    transform: translateY(-1px) scale(0.99);
    transition-duration: 0.15s;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .1);
}

.skill-app-card::after {
    content: '';
    position: absolute;
    inset: auto -32px -38px auto;
    width: 96px;
    height: 96px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(17, 17, 17, .06), rgba(17, 17, 17, 0));
    pointer-events: none;
    transition: transform var(--skill-duration-slow) var(--skill-ease-smooth);
}

.skill-app-card:hover::after {
    transform: scale(1.3) translate(-10px, -10px);
}

.skill-app-card.is-primary {
    background: linear-gradient(145deg, rgba(17,17,17,.96), rgba(50,50,50,.9));
    color: #fff
}

.skill-app-card-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 14px;
    background: rgba(17, 17, 17, .07);
    font-weight: 800;
    font-size: 16px;
    transition: all var(--skill-duration-normal) var(--skill-ease-spring);
}

.skill-app-card:hover .skill-app-card-icon {
    transform: scale(1.1) rotate(-3deg);
    background: rgba(17, 17, 17, .1);
}

.skill-app-card.is-primary .skill-app-card-icon {
    background: rgba(255,255,255,.16)
}

.skill-app-card.is-primary:hover .skill-app-card-icon {
    background: rgba(255,255,255,.24);
    transform: scale(1.1) rotate(3deg);
}

.skill-app-card strong {
    font-size: 15px;
    line-height: 1.25;
    font-weight: 600;
    transition: color var(--skill-duration-fast) ease;
}

.skill-app-card small {
    color: rgba(17, 17, 17, .56);
    line-height: 1.5;
    font-size: 12px;
    transition: color var(--skill-duration-fast) ease;
}

.skill-app-card.is-primary small {
    color: rgba(255,255,255,.66)
}

.skill-content-section {
    padding: 20px 22px;
    margin-bottom: 16px;
    border-radius: 24px;
    border: 1px solid rgba(196, 199, 207, .66);
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(18px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
    animation: skill-fade-in-up var(--skill-duration-slow) var(--skill-ease-smooth) both;
}

.skill-section-head {
    margin-bottom: 16px;
    animation: skill-fade-in var(--skill-duration-normal) var(--skill-ease-smooth) both;
}

.skill-section-head .eyebrow {
    color: rgba(17, 17, 17, .46);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px
}

.skill-section-head h3 {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0
}

.skill-workbench-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
}

.skill-tool-card {
    padding: 20px;
    border-radius: 22px;
    border: 1px solid rgba(196, 199, 207, .66);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(252,251,248,.86));
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
    transition: all var(--skill-duration-normal) var(--skill-ease-spring);
    will-change: transform, box-shadow;
    animation: skill-fade-in-up var(--skill-duration-slow) var(--skill-ease-smooth) both;
}

.skill-tool-card:nth-child(1) { animation-delay: 0.1s; }
.skill-tool-card:nth-child(2) { animation-delay: 0.15s; }
.skill-tool-card:nth-child(3) { animation-delay: 0.2s; }
.skill-tool-card:nth-child(4) { animation-delay: 0.25s; }
.skill-tool-card:nth-child(5) { animation-delay: 0.3s; }
.skill-tool-card:nth-child(6) { animation-delay: 0.35s; }
.skill-tool-card:nth-child(7) { animation-delay: 0.4s; }
.skill-tool-card:nth-child(8) { animation-delay: 0.45s; }
.skill-tool-card:nth-child(9) { animation-delay: 0.5s; }
.skill-tool-card:nth-child(10) { animation-delay: 0.55s; }

.skill-tool-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 24px 48px rgba(15, 23, 42, .1);
    border-color: rgba(196, 199, 207, .82);
}

.skill-tool-card:active {
    transform: translateY(-1px) scale(0.995);
    transition-duration: 0.12s;
}

.skill-tool-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px
}

.skill-module-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 122, 255, .1);
    color: #007aff;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 6px;
    transition: all var(--skill-duration-normal) var(--skill-ease-spring);
}

.skill-tool-card:hover .skill-module-badge {
    transform: scale(1.05);
    background: rgba(0, 122, 255, .14);
}

.skill-tool-card h4 {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
    margin: 0;
    transition: color var(--skill-duration-fast) ease;
}

.skill-tool-card:hover h4 {
    color: #007aff;
}

.skill-tool-side-note {
    font-size: 11px;
    color: rgba(17, 17, 17, .46);
    white-space: nowrap
}

.skill-tool-form {
    display: grid;
    gap: 12px;
    animation: skill-fade-in var(--skill-duration-normal) var(--skill-ease-smooth) 0.2s both;
}

.skill-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
}

.skill-field {
    display: grid;
    gap: 6px
}

.skill-field span {
    font-size: 13px;
    font-weight: 600;
    color: rgba(17, 17, 17, .72);
    transition: color var(--skill-duration-fast) ease;
}

.skill-field:focus-within span {
    color: #007aff;
}

.skill-field input,
.skill-field textarea,
.skill-field select {
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(196, 199, 207, .72);
    background: rgba(255, 255, 255, .92);
    font-size: 14px;
    line-height: 1.5;
    color: #111;
    transition: all var(--skill-duration-normal) var(--skill-ease-spring);
    will-change: border-color, box-shadow;
}

.skill-field input:focus,
.skill-field textarea:focus,
.skill-field select:focus {
    outline: none;
    border-color: rgba(0, 122, 255, .6);
    box-shadow: 0 0 0 4px rgba(0, 122, 255, .12), 0 4px 12px rgba(0, 122, 255, .08);
    transform: translateY(-1px);
}

.skill-field input::placeholder,
.skill-field textarea::placeholder {
    color: rgba(17, 17, 17, .36);
    transition: color var(--skill-duration-fast) ease;
}

.skill-field input:focus::placeholder,
.skill-field textarea:focus::placeholder {
    color: rgba(17, 17, 17, .24);
}

.skill-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px
}

.skill-inline-actions .primary,
.skill-inline-actions .ghost {
    padding: 10px 18px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    transition: all var(--skill-duration-normal) var(--skill-ease-spring);
    will-change: transform, box-shadow;
    position: relative;
    overflow: hidden;
}

.skill-inline-actions .primary {
    background: #111;
    color: #fff;
    border: 1px solid #111;
}

.skill-inline-actions .primary:hover {
    background: #333;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(17, 17, 17, .2);
}

.skill-inline-actions .primary:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
}

/* Ripple effect */
.skill-inline-actions .primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,.3), transparent 60%);
    opacity: 0;
    transition: opacity var(--skill-duration-fast) ease;
}

.skill-inline-actions .primary:active::after {
    opacity: 1;
}

.skill-inline-actions .ghost {
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(196, 199, 207, .72);
    color: #111;
}

.skill-inline-actions .ghost:hover {
    background: rgba(255, 255, 255, .92);
    border-color: rgba(196, 199, 207, .88);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
}

.skill-inline-actions .ghost:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
}

.skill-tool-status {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(17, 17, 17, .62);
    background: rgba(245, 243, 238, .85);
    border: 1px solid transparent
}

.skill-theme-stack {
    display: grid;
    gap: 16px
}

.skill-theme-panel {
    padding: 20px;
    border-radius: 22px;
    border: 1px solid rgba(196, 199, 207, .66);
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
    transition: all var(--skill-duration-normal) var(--skill-ease-spring);
    will-change: transform, box-shadow;
    animation: skill-fade-in-up var(--skill-duration-slow) var(--skill-ease-smooth) both;
}

.skill-theme-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, .09);
    border-color: rgba(196, 199, 207, .82);
}

.skill-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px
}

.skill-card-grid > * {
    animation: skill-fade-in-up var(--skill-duration-normal) var(--skill-ease-smooth) both;
}

.skill-card-grid > *:nth-child(1) { animation-delay: 0.05s; }
.skill-card-grid > *:nth-child(2) { animation-delay: 0.1s; }
.skill-card-grid > *:nth-child(3) { animation-delay: 0.15s; }
.skill-card-grid > *:nth-child(4) { animation-delay: 0.2s; }
.skill-card-grid > *:nth-child(5) { animation-delay: 0.25s; }
.skill-card-grid > *:nth-child(6) { animation-delay: 0.3s; }

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 960px) {
    .skill-app-home {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .skill-workbench-grid {
        grid-template-columns: 1fr
    }

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

@media (max-width: 760px) {
    .skill-page-shell {
        padding: 8px;
        padding-bottom: calc(88px + env(safe-area-inset-bottom))
    }

    .skill-page-topbar {
        position: static;
        padding: 12px 14px;
        border-radius: 18px
    }

    .skill-page-topbar h1 {
        font-size: 16px
    }

    .skill-page-action-secondary {
        display: none
    }

    .skill-app-home {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        z-index: 30;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        margin: 0;
        padding: 8px;
        border-radius: 20px;
        border: 1px solid rgba(196, 199, 207, .66);
        background: rgba(255,255,255,.94);
        box-shadow: 0 16px 36px rgba(15, 23, 42, .12);
        backdrop-filter: blur(20px);
        animation: skill-slide-in-right var(--skill-duration-slow) var(--skill-ease-spring) both;
    }

    .skill-app-card {
        min-height: 0;
        padding: 8px 4px 6px;
        border-radius: 14px;
        justify-items: center;
        gap: 3px;
        box-shadow: none;
        background: transparent;
        border-color: transparent
    }

    .skill-app-card::after,
    .skill-app-card small {
        display: none
    }

    .skill-app-card-icon {
        width: 28px;
        height: 28px;
        border-radius: 10px;
        font-size: 13px
    }

    .skill-app-card strong {
        font-size: 10px;
        text-align: center;
        line-height: 1.2
    }

    .skill-content-section {
        padding: 16px;
        border-radius: 20px
    }

    .skill-section-head h3 {
        font-size: 18px
    }

    .skill-tool-card {
        padding: 16px;
        border-radius: 18px
    }

    .skill-tool-card h4 {
        font-size: 15px
    }

    .skill-field input,
    .skill-field textarea,
    .skill-field select {
        padding: 10px 12px;
        border-radius: 12px;
        font-size: 14px
    }

    .skill-inline-actions .primary,
    .skill-inline-actions .ghost {
        width: 100%;
        justify-content: center
    }
}

/* User-facing UI v2: compact professional shell shared by chat, profile, skills and public pages. */
body.user-ui-page {
    --user-page-bg: #f6f7f9;
    --user-card-bg: rgba(255, 255, 255, .94);
    --user-card-border: rgba(209, 213, 219, .82);
    --user-card-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px rgba(15, 23, 42, .04);
    --user-card-shadow-hover: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 30px rgba(15, 23, 42, .07);
    --user-radius: 14px;
    --user-radius-sm: 10px;
    --user-gap: 14px;
    background: var(--user-page-bg) !important
}

body.user-ui-page::before {
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0) 260px)
}

body.user-ui-page .user-page-shell {
    width: min(1120px, calc(100vw - 40px));
    margin: 20px auto 36px;
    display: grid;
    gap: var(--user-gap);
    min-width: 0
}

body.user-ui-page .user-page-shell-wide {
    width: min(1280px, calc(100vw - 40px))
}

body.user-ui-page .user-topbar,
body.user-ui-page .profile-page-topbar,
body.user-ui-page .skill-page-topbar,
body.user-ui-page .download-topbar {
    border-radius: var(--user-radius) !important;
    border: 1px solid var(--user-card-border) !important;
    background: var(--user-card-bg) !important;
    box-shadow: var(--user-card-shadow) !important;
    backdrop-filter: none !important
}

body.user-ui-page .profile-card,
body.user-ui-page .profile-summary-card,
body.user-ui-page .profile-workspace-card,
body.user-ui-page .skill-app-card,
body.user-ui-page .skill-content-section,
body.user-ui-page .skill-tool-card,
body.user-ui-page .download-card,
body.user-ui-page .help-section,
body.user-ui-page .policy-card,
body.user-ui-page .agreement-card,
body.user-ui-page .auth-card,
body.user-ui-page .card-surface {
    border-radius: var(--user-radius) !important;
    border: 1px solid var(--user-card-border) !important;
    background: var(--user-card-bg) !important;
    box-shadow: var(--user-card-shadow) !important;
    backdrop-filter: none !important
}

body.user-ui-page .profile-card:hover,
body.user-ui-page .profile-hero:hover,
body.user-ui-page .profile-workspace-card:hover,
body.user-ui-page .skill-app-card:hover {
    transform: none !important;
    box-shadow: var(--user-card-shadow-hover) !important
}

body.user-ui-page .user-segment-nav,
body.user-ui-page .profile-workspace-home,
body.user-ui-page .skill-app-home {
    gap: 8px !important
}

body.user-ui-page .profile-workspace-card,
body.user-ui-page .skill-primary-nav .skill-app-card {
    min-height: 0 !important;
    padding: 11px 12px !important;
    align-content: center !important;
    text-align: left
}

body.user-ui-page .profile-workspace-card-icon,
body.user-ui-page .skill-primary-nav .skill-app-card-icon {
    display: none !important
}

body.user-ui-page .profile-workspace-card strong,
body.user-ui-page .skill-primary-nav .skill-app-card strong {
    font-size: 14px !important;
    line-height: 1.2 !important
}

body.user-ui-page .profile-workspace-card small,
body.user-ui-page .skill-primary-nav .skill-app-card small {
    font-size: 11px !important;
    line-height: 1.35 !important;
    color: #64748b !important
}

body.user-ui-page .profile-workspace-card.is-active,
body.user-ui-page .profile-workspace-card.is-primary,
body.user-ui-page .skill-primary-nav .skill-app-card.is-primary {
    border-color: rgba(37, 99, 235, .4) !important;
    background: #eef4ff !important;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .08), var(--user-card-shadow) !important
}

body.user-ui-page .profile-grid,
body.user-ui-page .profile-summary-grid,
body.user-ui-page #profileAgreementSection {
    align-items: start !important
}

body.user-ui-page .profile-summary-card,
body.user-ui-page #passwordSecuritySection,
body.user-ui-page #profileAgreementSection .profile-card {
    min-height: 0 !important
}

body.user-ui-page .profile-card {
    padding: 16px !important
}

body.user-ui-page .profile-summary-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .8fr) minmax(260px, .8fr) !important;
    gap: 12px !important
}

body.user-ui-page .profile-summary-card {
    grid-column: span 1 !important
}

body.user-ui-page #passwordSecuritySection {
    grid-column: span 2 !important
}

body.user-ui-page #profileAgreementSection {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(260px, .8fr) !important;
    gap: 12px !important
}

body.user-ui-page #profileAgreementSection .profile-card {
    padding: 16px !important
}

body.user-ui-page #profileAgreementSection > .profile-card:first-child,
body.user-ui-page #profileAgreementSection > .sf-key-card {
    grid-column: span 2
}

body.user-ui-page .profile-summary-meta,
body.user-ui-page .profile-summary-tags {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important
}

body.user-ui-page .info-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important
}

body.user-ui-page .info-item,
body.user-ui-page .metric-card,
body.user-ui-page .profile-usage-summary .metric-card,
body.user-ui-page .profile-reward-summary .metric-card,
body.user-ui-page .quota-metrics-rich > div {
    border-radius: var(--user-radius-sm) !important;
    background: #f8fafc !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    box-shadow: none !important
}

body.user-ui-page .info-item {
    padding: 10px 12px !important
}

body.user-ui-page .info-item span,
body.user-ui-page .metric-card span,
body.user-ui-page .quota-metrics-rich span {
    color: #64748b !important;
    font-size: 12px !important
}

body.user-ui-page .info-item strong,
body.user-ui-page .metric-card strong,
body.user-ui-page .quota-metrics-rich strong {
    color: #0f172a !important
}

body.user-ui-page .quota-metrics-rich {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important
}

body.user-ui-page .profile-qq-binding-row {
    border-radius: var(--user-radius-sm) !important;
    background: #f8fafc !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    padding: 10px !important
}

body.user-ui-page .profile-qq-binding-row .inline-link,
body.user-ui-page .profile-qq-binding-row .ghost.inline-link,
body.user-ui-page .profile-qq-binding-row button.inline-link {
    min-height: 34px !important;
    border-radius: 10px !important;
    padding: 6px 10px !important
}

body.user-ui-page.auth-page {
    background: var(--user-page-bg) !important;
    padding: 20px
}

body.user-ui-page .auth-card {
    width: min(460px, 100%) !important;
    padding: 24px !important
}

body.user-ui-page .auth-hero,
body.user-ui-page .policy-hero,
body.user-ui-page .agreement-hero {
    border-radius: var(--user-radius) !important;
    background: #f8fafc !important;
    border-color: rgba(226, 232, 240, .95) !important
}

body.user-ui-page .auth-tabs {
    gap: 6px !important;
    padding: 4px;
    border-radius: 12px;
    background: #f1f5f9
}

body.user-ui-page .auth-tab {
    min-height: 38px !important;
    border-radius: 10px !important;
    border-color: transparent !important;
    background: transparent !important
}

body.user-ui-page .auth-tab.active {
    background: #fff !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08)
}

body.user-ui-page .skill-page-shell {
    max-width: min(1280px, calc(100vw - 40px)) !important;
    overflow-x: clip
}

body.user-ui-page .skill-primary-nav,
body.user-ui-page .skill-content-section,
body.user-ui-page .skill-workbench-grid,
body.user-ui-page .skill-card-grid {
    max-width: 100%;
    min-width: 0
}

body.user-ui-page .skill-content-section,
body.user-ui-page .skill-tool-card {
    padding: 18px !important
}

body.user-ui-page .skill-section-head,
body.user-ui-page .skill-tool-head {
    align-items: flex-start !important
}

body.user-ui-page.download-page,
body.user-ui-page.help-page,
body.user-ui-page.policy-page,
body.user-ui-page.agreement-page,
body.user-ui-page.skill-page-body {
    background: var(--user-page-bg) !important;
    overflow-x: hidden
}

body.user-ui-page .download-shell,
body.user-ui-page .help-shell,
body.user-ui-page .policy-shell,
body.user-ui-page .agreement-shell {
    width: min(1040px, calc(100vw - 40px)) !important;
    max-width: 1040px !important;
    padding: 24px 0 44px !important
}

body.user-ui-page .policy-card,
body.user-ui-page .agreement-card {
    overflow: hidden
}

body.user-ui-page .policy-body,
body.user-ui-page .agreement-body,
body.user-ui-page .help-section {
    line-height: 1.78
}

body.chat-user-page .topbar {
    border-radius: 0 0 var(--user-radius) var(--user-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04)
}

body.chat-user-page .sidebar,
body.chat-user-page .composer,
body.chat-user-page .hero-card {
    border-color: var(--user-card-border);
    box-shadow: var(--user-card-shadow)
}

@media (max-width: 1100px) {
    body.user-ui-page .profile-summary-grid,
    body.user-ui-page #profileAgreementSection {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important
    }

    body.user-ui-page .profile-summary-card,
    body.user-ui-page #passwordSecuritySection {
        grid-column: span 2 !important
    }
}

@media (max-width: 760px) {
    body.user-ui-page .user-page-shell,
    body.user-ui-page .user-page-shell-wide,
    body.user-ui-page .profile-shell.profile-workspace-shell,
    body.user-ui-page .skill-page-shell,
    body.user-ui-page .download-shell,
    body.user-ui-page .help-shell,
    body.user-ui-page .policy-shell,
    body.user-ui-page .agreement-shell {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 10px max(24px, env(safe-area-inset-bottom)) !important;
        gap: 10px !important
    }

    body.user-ui-page .profile-page-topbar,
    body.user-ui-page .skill-page-topbar,
    body.user-ui-page .download-topbar {
        padding: 12px !important;
        gap: 10px !important
    }

    body.user-ui-page .profile-page-topbar-copy h1,
    body.user-ui-page .skill-page-topbar h1,
    body.user-ui-page .download-topbar h1 {
        font-size: 20px !important;
        line-height: 1.15 !important
    }

    body.user-ui-page .profile-actions,
    body.user-ui-page .skill-page-actions,
    body.user-ui-page .download-topbar-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px !important
    }

    body.user-ui-page .profile-actions > *,
    body.user-ui-page .skill-page-actions > *,
    body.user-ui-page .download-topbar-actions > * {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
        font-size: 12px !important
    }

    body.user-ui-page .profile-workspace-home,
    body.user-ui-page .skill-primary-nav {
        position: static !important;
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        grid-template-columns: none !important;
        overflow-x: auto;
        padding: 2px 0 6px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        scrollbar-width: none
    }

    body.user-ui-page .profile-workspace-home::-webkit-scrollbar,
    body.user-ui-page .skill-primary-nav::-webkit-scrollbar {
        display: none
    }

    body.user-ui-page .profile-workspace-card,
    body.user-ui-page .skill-primary-nav .skill-app-card {
        width: auto !important;
        min-width: 86px !important;
        max-width: 132px !important;
        min-height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 12px !important;
        border-radius: 999px !important;
        flex: none !important
    }

    body.user-ui-page .profile-workspace-card small,
    body.user-ui-page .skill-primary-nav .skill-app-card small {
        display: none !important
    }

    body.user-ui-page .profile-workspace-card strong,
    body.user-ui-page .skill-primary-nav .skill-app-card strong {
        font-size: 13px !important;
        white-space: nowrap
    }

    body.user-ui-page .profile-summary-grid,
    body.user-ui-page #profileAgreementSection,
    body.user-ui-page .profile-grid,
    body.user-ui-page .profile-reward-summary,
    body.user-ui-page .profile-usage-summary,
    body.user-ui-page .usage-stats-grid,
    body.user-ui-page .usage-main-grid,
    body.user-ui-page .usage-bottom-grid,
    body.user-ui-page .download-grid,
    body.user-ui-page .download-hero-meta {
        grid-template-columns: 1fr !important;
        gap: 10px !important
    }

    body.user-ui-page .profile-summary-card,
    body.user-ui-page #passwordSecuritySection,
    body.user-ui-page #profileAgreementSection > .profile-card:first-child,
    body.user-ui-page #profileAgreementSection > .sf-key-card {
        grid-column: auto !important
    }

    body.user-ui-page .profile-card,
    body.user-ui-page .profile-summary-card,
    body.user-ui-page .skill-content-section,
    body.user-ui-page .skill-tool-card,
    body.user-ui-page .download-card,
    body.user-ui-page .help-section,
    body.user-ui-page .auth-card {
        padding: 12px !important;
        border-radius: 12px !important
    }

    body.user-ui-page .profile-summary-head {
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important
    }

    body.user-ui-page .profile-summary-meta,
    body.user-ui-page .profile-summary-tags,
    body.user-ui-page .quota-metrics-rich {
        grid-template-columns: 1fr !important;
        gap: 8px !important
    }

    body.user-ui-page .profile-qq-binding-row {
        display: grid !important;
        grid-template-columns: 1fr !important
    }

    body.user-ui-page .row-inline.mobile-stack,
    body.user-ui-page .skill-form-grid,
    body.user-ui-page .captcha-row {
        grid-template-columns: 1fr !important
    }

    body.user-ui-page .policy-hero,
    body.user-ui-page .policy-body,
    body.user-ui-page .agreement-hero,
    body.user-ui-page .agreement-body {
        padding: 18px !important
    }

    body.user-ui-page.auth-page {
        align-items: start;
        padding: 12px
    }

    body.chat-user-page .composer {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: calc(100vw - 20px) !important
    }
}

@media (max-width: 420px) {
    body.user-ui-page .profile-card,
    body.user-ui-page .profile-summary-card,
    body.user-ui-page .skill-content-section,
    body.user-ui-page .skill-tool-card,
    body.user-ui-page .download-card,
    body.user-ui-page .help-section,
    body.user-ui-page .auth-card {
        padding: 10px !important
    }

    body.user-ui-page .profile-page-topbar,
    body.user-ui-page .skill-page-topbar,
    body.user-ui-page .download-topbar {
        border-radius: 12px !important
    }
}

/* PC chat workspace: focused, centered, desktop-app density. */
@media (min-width: 961px) {
    body.chat-user-page {
        --chat-column-width: min(820px, calc(100vw - 360px));
        --chat-side-gap: clamp(18px, 3vw, 44px);
        overflow: hidden;
        background: #f6f5f2;
        font-size: 14px
    }

    body.chat-user-page .app-shell {
        grid-template-columns: 268px minmax(0, 1fr);
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
        background: linear-gradient(180deg, #faf9f6 0%, #f4f3ef 100%)
    }

    body.chat-user-page.sidebar-collapsed .app-shell {
        grid-template-columns: 64px minmax(0, 1fr)
    }

    body.chat-user-page .sidebar {
        height: 100dvh;
        max-height: 100dvh;
        padding: 10px 8px;
        gap: 8px;
        background: rgba(250, 249, 246, .92);
        border-right: 1px solid rgba(15, 23, 42, .08);
        box-shadow: none;
        backdrop-filter: blur(18px) saturate(1.08)
    }

    body.chat-user-page .sidebar-brand-actions {
        gap: 6px
    }

    body.chat-user-page .sidebar-menu-btn,
    body.chat-user-page .sidebar-profile-btn,
    body.chat-user-page .sidebar-new-btn,
    body.chat-user-page .topbar .ghost,
    body.chat-user-page .topbar .file-btn,
    body.chat-user-page .topbar-collab-toggle,
    body.chat-user-page .composer-actions button,
    body.chat-user-page .composer-actions .file-btn {
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
        border-radius: 10px;
        display: inline-grid;
        place-items: center;
        font-size: 16px;
        line-height: 1
    }

    body.chat-user-page .sidebar-menu-btn,
    body.chat-user-page .sidebar-profile-btn,
    body.chat-user-page .sidebar-new-btn {
        background: transparent;
        box-shadow: none;
        border-color: transparent
    }

    body.chat-user-page .sidebar-profile-btn {
        font-size: 14px
    }

    body.chat-user-page .sidebar-new-btn {
        font-size: 20px
    }

    body.chat-user-page .side-title {
        margin: 4px 6px 2px;
        font-size: 10px;
        letter-spacing: .08em
    }

    body.chat-user-page .conversation-list {
        gap: 3px;
        padding-right: 0
    }

    body.chat-user-page .conv {
        padding: 7px 8px;
        border-radius: 8px;
        gap: 2px 6px;
        background: transparent;
        box-shadow: none;
        transform: none
    }

    body.chat-user-page .conv:hover,
    body.chat-user-page .conv.active {
        background: rgba(255, 255, 255, .86);
        box-shadow: none;
        transform: none
    }

    body.chat-user-page .conv strong {
        font-size: 12px;
        font-weight: 600
    }

    body.chat-user-page .conv small {
        font-size: 10px;
        line-height: 1.35
    }

    body.chat-user-page .user-box {
        padding: 8px;
        border-radius: 10px;
        box-shadow: none;
        background: rgba(255, 255, 255, .62);
        backdrop-filter: none
    }

    body.chat-user-page .user-box strong {
        font-size: 12px
    }

    body.chat-user-page .user-box small,
    body.chat-user-page .sidebar-help-btn {
        font-size: 11px !important
    }

    body.chat-user-page .chat-main {
        min-width: 0;
        height: 100dvh;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        overflow: hidden;
        background: #fbfaf7
    }

    body.chat-user-page .chat-main > .topbar,
    body.chat-user-page .chat-main > .hero-empty,
    body.chat-user-page .chat-main > .messages,
    body.chat-user-page .chat-main > .composer {
        grid-column: 1
    }

    body.chat-user-page .topbar {
        position: relative;
        top: auto;
        z-index: var(--z-sticky-nav);
        width: calc(var(--chat-column-width) + 32px);
        max-width: calc(100% - (var(--chat-side-gap) * 2));
        margin: 10px auto 0;
        padding: 5px 8px;
        border: 1px solid rgba(15, 23, 42, .08);
        border-radius: 14px;
        background: rgba(255, 255, 255, .88);
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
        backdrop-filter: blur(18px) saturate(1.08);
        gap: 4px
    }

    body.chat-user-page .topbar-main {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        flex: none;
        flex-wrap: wrap;
        width: 100%
    }

    body.chat-user-page .topbar-head-actions,
    body.chat-user-page .topbar-actions-inline {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background: transparent;
        box-shadow: none
    }

    body.chat-user-page .topbar-head-actions {
        order: 4;
        margin-left: 0;
        flex: 0 0 auto
    }

    body.chat-user-page .topbar-title-wrap {
        display: flex;
        align-items: center;
        flex: 1 1 150px;
        gap: 8px;
        max-width: 210px;
        min-width: 0
    }

    body.chat-user-page .topbar-title-wrap > div:first-child {
        min-width: 0
    }

    body.chat-user-page .topbar h1 {
        margin: 0;
        font-size: 12px;
        line-height: 1.2;
        font-weight: 650;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    body.chat-user-page .topbar p {
        margin: 1px 0 0;
        font-size: 10px;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    body.chat-user-page .topbar-actions {
        order: 2;
        flex: 0 1 auto;
        justify-content: flex-end;
        align-items: center;
        gap: 5px;
        flex-wrap: nowrap;
        min-width: 0;
        width: auto
    }

    body.chat-user-page .topbar-actions-inline {
        order: 3;
        flex: 0 0 auto;
        width: auto;
        overflow: visible
    }

    body.chat-user-page .topbar-actions-inline > .file-btn {
        overflow: hidden;
        color: #64748b;
        font-size: 0;
        line-height: 0;
        white-space: nowrap;
        text-indent: 0;
        border-color: transparent;
        background: transparent !important;
        box-shadow: none
    }

    body.chat-user-page .topbar-actions-inline > .file-btn::before {
        content: "";
        width: 16px;
        height: 16px;
        text-indent: 0;
        background-color: currentColor;
        display: block;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 16px 16px;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: 16px 16px
    }

    body.chat-user-page .topbar-actions-inline > #multimodalUploadLabel::before,
    body.chat-user-page .topbar-actions-inline > #topbarMultimodalUploadLabel::before {
        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v13a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18.5v-13Zm2.5-.5a.5.5 0 0 0-.5.5v8.38l2.34-2.34a2 2 0 0 1 2.82 0l1.3 1.29 2.05-2.05a2 2 0 0 1 2.82 0L18 11.46V5.5a.5.5 0 0 0-.5-.5h-11Zm11 14a.5.5 0 0 0 .5-.5v-4.2l-2.09-2.1-5.8 5.8h7.39ZM6 16.7v1.8a.5.5 0 0 0 .5.5h.78l3.76-3.76-1.29-1.29L6 16.7ZM9 8.25a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v13a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18.5v-13Zm2.5-.5a.5.5 0 0 0-.5.5v8.38l2.34-2.34a2 2 0 0 1 2.82 0l1.3 1.29 2.05-2.05a2 2 0 0 1 2.82 0L18 11.46V5.5a.5.5 0 0 0-.5-.5h-11Zm11 14a.5.5 0 0 0 .5-.5v-4.2l-2.09-2.1-5.8 5.8h7.39ZM6 16.7v1.8a.5.5 0 0 0 .5.5h.78l3.76-3.76-1.29-1.29L6 16.7ZM9 8.25a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z'/%3E%3C/svg%3E")
    }

    body.chat-user-page .topbar-actions-inline > #wordUploadLabel::before,
    body.chat-user-page .topbar-actions-inline > #topbarWordUploadLabel::before {
        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M6 3h8.6L20 8.4V19a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm7.75 2H6v14h12V9.25h-4.25V5ZM8 12a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M6 3h8.6L20 8.4V19a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm7.75 2H6v14h12V9.25h-4.25V5ZM8 12a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E")
    }

    body.chat-user-page .topbar-actions-inline > #folderUploadLabel::before {
        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M3 7a3 3 0 0 1 3-3h3.4a3 3 0 0 1 2.4 1.2l.6.8H18a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7Zm3-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-6.6L10.2 6.4A1 1 0 0 0 9.4 6H6Zm6 4a1 1 0 0 1 1 1v1h1a1 1 0 1 1 0 2h-1v1a1 1 0 1 1-2 0v-1h-1a1 1 0 1 1 0-2h1v-1a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M3 7a3 3 0 0 1 3-3h3.4a3 3 0 0 1 2.4 1.2l.6.8H18a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7Zm3-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-6.6L10.2 6.4A1 1 0 0 0 9.4 6H6Zm6 4a1 1 0 0 1 1 1v1h1a1 1 0 1 1 0 2h-1v1a1 1 0 1 1-2 0v-1h-1a1 1 0 1 1 0-2h1v-1a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E")
    }

    body.chat-user-page .topbar-actions-inline > #referenceUploadLabel::before {
        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 3a1 1 0 0 1 1 1v2h2.5A3.5 3.5 0 0 1 19 9.5V18a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9.5A3.5 3.5 0 0 1 8.5 6H11V4a1 1 0 0 1 1-1Zm-3.5 5A1.5 1.5 0 0 0 7 9.5V18a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V9.5A1.5 1.5 0 0 0 15.5 8h-7ZM9 13.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Z'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 3a1 1 0 0 1 1 1v2h2.5A3.5 3.5 0 0 1 19 9.5V18a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9.5A3.5 3.5 0 0 1 8.5 6H11V4a1 1 0 0 1 1-1Zm-3.5 5A1.5 1.5 0 0 0 7 9.5V18a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V9.5A1.5 1.5 0 0 0 15.5 8h-7ZM9 13.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Z'/%3E%3C/svg%3E")
    }

    body.chat-user-page .composer-actions > #multimodalUploadLabel,
    body.chat-user-page .composer-actions > #wordUploadLabel,
    body.chat-user-page .composer-actions > #referenceUploadLabel {
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
        border-radius: 10px;
        overflow: hidden;
        color: #64748b;
        font-size: 0;
        line-height: 0;
        white-space: nowrap;
        text-indent: 0;
        border-color: rgba(15, 23, 42, .08);
        background: rgba(248, 250, 252, .88) !important;
        box-shadow: none
    }

    body.chat-user-page .composer-actions > #multimodalUploadLabel::before,
    body.chat-user-page .composer-actions > #wordUploadLabel::before,
    body.chat-user-page .composer-actions > #referenceUploadLabel::before {
        content: "";
        width: 17px;
        height: 17px;
        text-indent: 0;
        background-color: currentColor;
        display: block;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 17px 17px;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: 17px 17px
    }

    body.chat-user-page .composer-actions > #multimodalUploadLabel::before {
        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v13a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18.5v-13Zm2.5-.5a.5.5 0 0 0-.5.5v8.38l2.34-2.34a2 2 0 0 1 2.82 0l1.3 1.29 2.05-2.05a2 2 0 0 1 2.82 0L18 11.46V5.5a.5.5 0 0 0-.5-.5h-11Zm11 14a.5.5 0 0 0 .5-.5v-4.2l-2.09-2.1-5.8 5.8h7.39ZM6 16.7v1.8a.5.5 0 0 0 .5.5h.78l3.76-3.76-1.29-1.29L6 16.7ZM9 8.25a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v13a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18.5v-13Zm2.5-.5a.5.5 0 0 0-.5.5v8.38l2.34-2.34a2 2 0 0 1 2.82 0l1.3 1.29 2.05-2.05a2 2 0 0 1 2.82 0L18 11.46V5.5a.5.5 0 0 0-.5-.5h-11Zm11 14a.5.5 0 0 0 .5-.5v-4.2l-2.09-2.1-5.8 5.8h7.39ZM6 16.7v1.8a.5.5 0 0 0 .5.5h.78l3.76-3.76-1.29-1.29L6 16.7ZM9 8.25a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z'/%3E%3C/svg%3E")
    }

    body.chat-user-page .composer-actions > #wordUploadLabel::before {
        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M6 3h8.6L20 8.4V19a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm7.75 2H6v14h12V9.25h-4.25V5ZM8 12a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M6 3h8.6L20 8.4V19a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm7.75 2H6v14h12V9.25h-4.25V5ZM8 12a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E")
    }

    body.chat-user-page .composer-actions > #referenceUploadLabel::before {
        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 3a1 1 0 0 1 1 1v2h2.5A3.5 3.5 0 0 1 19 9.5V18a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9.5A3.5 3.5 0 0 1 8.5 6H11V4a1 1 0 0 1 1-1Zm-3.5 5A1.5 1.5 0 0 0 7 9.5V18a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V9.5A1.5 1.5 0 0 0 15.5 8h-7ZM9 13.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Z'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 3a1 1 0 0 1 1 1v2h2.5A3.5 3.5 0 0 1 19 9.5V18a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9.5A3.5 3.5 0 0 1 8.5 6H11V4a1 1 0 0 1 1-1Zm-3.5 5A1.5 1.5 0 0 0 7 9.5V18a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V9.5A1.5 1.5 0 0 0 15.5 8h-7ZM9 13.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Z'/%3E%3C/svg%3E")
    }

    body.chat-user-page .topbar-actions .topbar-select-wrap {
        min-width: 118px;
        max-width: 168px;
        min-height: 36px;
        padding: 4px 7px;
        border-radius: 10px;
        gap: 2px
    }

    body.chat-user-page .topbar-actions .topbar-select-wrap:first-child {
        max-width: 116px
    }

    body.chat-user-page .topbar-actions .topbar-select-wrap span {
        font-size: 9px;
        line-height: 1.1;
        letter-spacing: .02em
    }

    body.chat-user-page .topbar-actions .topbar-select-wrap select {
        min-height: 18px;
        padding: 0 16px 0 0;
        border: 0;
        border-radius: 0;
        background-color: transparent;
        font-size: 11px;
        font-weight: 600
    }

    body.chat-user-page .topbar-actions .topbar-select-wrap .hint {
        display: none
    }

    body.chat-user-page .topbar-head-actions .ghost,
    body.chat-user-page .topbar-more-menu > button,
    body.chat-user-page .topbar-actions-inline > .file-btn,
    body.chat-user-page .topbar-collab-toggle {
        color: #64748b;
        border-color: transparent;
        background: transparent !important;
        box-shadow: none
    }

    body.chat-user-page .topbar-head-actions .ghost:hover,
    body.chat-user-page .topbar-head-actions .ghost:focus-visible,
    body.chat-user-page .topbar-more-menu > button:hover,
    body.chat-user-page .topbar-more-menu > button:focus-visible,
    body.chat-user-page .topbar-actions-inline > .file-btn:hover,
    body.chat-user-page .topbar-actions-inline > .file-btn:focus-visible,
    body.chat-user-page .topbar-collab-toggle:hover,
    body.chat-user-page .topbar-collab-toggle:focus-visible,
    body.chat-user-page .topbar-collab-toggle[aria-pressed="true"] {
        color: #111827;
        background: rgba(255, 255, 255, .96) !important;
        border-color: rgba(226, 232, 240, .92)
    }

    body.chat-user-page .topbar-head-actions .ghost svg,
    body.chat-user-page .topbar-more-menu > button svg,
    body.chat-user-page .topbar-collab-toggle svg {
        width: 16px;
        height: 16px;
        display: block;
        flex: 0 0 auto
    }

    body.chat-user-page .topbar-more-menu > button {
        font-size: 0;
        letter-spacing: 0;
        font-weight: 600
    }

    body.chat-user-page .topbar-more-dropdown {
        min-width: 166px;
        padding: 6px;
        border-radius: 12px;
        box-shadow: 0 14px 34px rgba(15, 23, 42, .12)
    }

    body.chat-user-page .topbar-more-dropdown .ghost,
    body.chat-user-page .topbar-more-dropdown .file-btn {
        width: 100%;
        min-width: 0;
        min-height: 34px;
        height: 34px;
        display: flex;
        justify-content: flex-start;
        padding: 7px 10px;
        font-size: 12px;
        border-radius: 8px
    }

    body.chat-user-page .topbar.is-collapsed {
        padding: 7px 10px
    }

    body.chat-user-page .topbar-compact {
        min-height: 36px;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0
    }

    body.chat-user-page .topbar-compact .collapse-toggle,
    body.chat-user-page .topbar-head-actions .collapse-toggle {
        margin-left: auto
    }

    body.chat-user-page .topbar-compact-meta strong {
        font-size: 12px
    }

    body.chat-user-page .topbar-compact-meta span {
        font-size: 11px
    }

    body.chat-user-page .tool-option-bar,
    body.chat-user-page .collab-toggle-bar {
        flex: 1 0 100%;
        width: 100%;
        margin: 0;
        padding: 6px 8px;
        border-radius: 10px
    }

    body.chat-user-page .collab-toggle-bar {
        justify-content: flex-end
    }

    body.chat-user-page .collab-expand-btn {
        margin-left: auto
    }

    body.chat-user-page .tool-option-bar[hidden],
    body.chat-user-page .collab-toggle-bar[hidden],
    body.chat-user-page .collab-expand-btn[hidden] {
        display: none !important
    }

    body.chat-user-page .hero-empty,
    body.chat-user-page .messages {
        grid-row: 2;
        min-height: 0
    }

    body.chat-user-page .hero-empty {
        width: var(--chat-column-width);
        max-width: calc(100% - (var(--chat-side-gap) * 2));
        margin: 0 auto;
        padding: 16px 0 18px;
        align-content: center;
        overflow: auto
    }

    body.chat-user-page .hero-card {
        padding: 18px;
        border-radius: 14px;
        box-shadow: none;
        background: rgba(255, 255, 255, .72)
    }

    body.chat-user-page .messages {
        width: 100%;
        padding: 18px var(--chat-side-gap) 20px;
        gap: 16px;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-gutter: stable
    }

    body.chat-user-page .msg-wrap {
        width: var(--chat-column-width);
        max-width: 100%;
        gap: 6px;
        margin-inline: auto;
        padding-left: 0;
        padding-right: 0
    }

    body.chat-user-page .msg-wrap.assistant,
    body.chat-user-page .msg-wrap.user {
        padding-left: 0;
        padding-right: 0
    }

    body.chat-user-page .msg-wrap.share-select-mode {
        padding-left: 0
    }

    body.chat-user-page .msg-share-check {
        left: -24px;
        top: 38px;
        width: 18px;
        height: 18px;
        border-width: 1.5px;
        box-shadow: 0 4px 10px rgba(15, 23, 42, .08)
    }

    body.chat-user-page .msg-share-check.is-selected::after {
        left: 5px;
        top: 2px;
        width: 4px;
        height: 8px
    }

    body.chat-user-page .msg-head {
        padding-inline: 0;
        gap: 8px
    }

    body.chat-user-page .msg-avatar {
        width: 24px;
        height: 24px;
        font-size: 10px;
        border-radius: 999px;
        box-shadow: none !important
    }

    body.chat-user-page .msg-name {
        font-size: 12px;
        font-weight: 600
    }

    body.chat-user-page .msg-time,
    body.chat-user-page .msg-model,
    body.chat-user-page .msg-duration {
        font-size: 10px
    }

    body.chat-user-page .msg {
        font-size: 14px;
        line-height: 1.65;
        letter-spacing: 0;
        gap: 8px
    }

    body.chat-user-page .msg.assistant {
        width: 100%;
        max-width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none
    }

    body.chat-user-page .msg.user {
        max-width: min(560px, 78%);
        padding: 10px 13px;
        border-radius: 16px;
        justify-self: end;
        background: #f0f6ff !important;
        border-color: rgba(191, 219, 254, .82) !important;
        box-shadow: none !important;
        color: #111827 !important
    }

    body.chat-user-page .msg-content {
        gap: 8px
    }

    body.chat-user-page .msg-content p,
    body.chat-user-page .msg-rich-text,
    body.chat-user-page .msg-stream,
    body.chat-user-page .msg-text {
        font-size: 14px;
        line-height: 1.65
    }

    body.chat-user-page .msg-content pre,
    body.chat-user-page .code-card-body pre {
        font-size: 12px;
        line-height: 1.6
    }

    body.chat-user-page .msg-content code {
        font-size: .9em
    }

    body.chat-user-page .msg-actions {
        gap: 5px;
        align-items: center
    }

    body.chat-user-page .msg-actions .ghost,
    body.chat-user-page .msg-wrap.assistant .msg-copy,
    body.chat-user-page .msg-wrap.assistant .msg-export-doc,
    body.chat-user-page .msg-wrap.assistant .msg-regenerate {
        min-height: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 11px;
        box-shadow: none
    }

    body.chat-user-page .msg-action-btn {
        width: 32px;
        min-width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 9px;
        background: transparent !important;
        border-color: transparent;
        color: #6b7280;
        box-shadow: none
    }

    body.chat-user-page .msg-action-btn svg,
    body.chat-user-page .msg-action-menu .ghost svg {
        width: 16px;
        height: 16px;
        display: block;
        flex: 0 0 auto
    }

    body.chat-user-page .msg-action-btn:hover,
    body.chat-user-page .msg-action-btn:focus-visible,
    body.chat-user-page .msg-action-btn.is-active,
    body.chat-user-page .msg-action-btn.copied {
        background: rgba(17, 24, 39, .06);
        border-color: rgba(17, 24, 39, .08);
        color: #111827
    }

    body.chat-user-page .msg-action-btn.is-busy svg {
        animation: chat-msg-action-pulse 1.08s ease-in-out infinite
    }

    body.chat-user-page .msg-more-wrap {
        display: inline-flex
    }

    body.chat-user-page .msg-action-menu {
        min-width: 132px;
        border-radius: 12px;
        padding: 6px
    }

    body.chat-user-page .msg-action-menu .ghost {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        padding: 7px 9px;
        border-radius: 8px;
        color: #374151
    }

    body.chat-user-page .agent-card,
    body.chat-user-page .tool-call-card,
    body.chat-user-page .media-card,
    body.chat-user-page .code-card {
        border-radius: 12px;
        box-shadow: none
    }

    body.chat-user-page .composer {
        position: relative;
        z-index: 16;
        width: calc(var(--chat-column-width) + 32px);
        max-width: calc(100% - (var(--chat-side-gap) * 2));
        margin: 0 auto 12px;
        padding: 8px;
        border: 1px solid rgba(15, 23, 42, .09);
        border-radius: 16px;
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
        backdrop-filter: blur(16px) saturate(1.08)
    }

    body.chat-user-page .share-selection-topbar,
    body.chat-user-page .share-selection-bottombar {
        width: calc(var(--chat-column-width) + 32px);
        max-width: calc(100% - (var(--chat-side-gap) * 2));
        border-radius: 16px;
        padding: 11px 14px
    }

    body.chat-user-page .mobile-composer-shell {
        display: flex !important;
        gap: 8px;
        align-items: flex-end;
        flex-wrap: nowrap
    }

    body.chat-user-page .composer textarea {
        min-height: 42px;
        max-height: 132px;
        padding: 10px 12px;
        border-radius: 12px;
        border-color: transparent;
        background: transparent;
        font-size: 14px;
        line-height: 1.5;
        box-shadow: none
    }

    body.chat-user-page .composer textarea:focus {
        border-color: transparent;
        box-shadow: none
    }

    body.chat-user-page .composer-actions {
        gap: 6px;
        align-self: center
    }

    body.chat-user-page .composer-actions .composer-submit-btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        border-radius: 12px;
        box-shadow: none
    }

    body.chat-user-page .composer-submit-btn svg,
    body.chat-user-page .topbar-collab-toggle svg,
    body.chat-user-page .composer-actions button svg {
        width: 17px;
        height: 17px
    }

    body.chat-user-page .composer.is-dragover {
        border-color: rgba(37, 99, 235, .34);
        box-shadow: 0 12px 28px rgba(37, 99, 235, .10)
    }
}

@keyframes chat-msg-action-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1
    }

    50% {
        transform: scale(.9);
        opacity: .72
    }
}

@media (min-width: 961px) and (max-width: 1220px) {
    body.chat-user-page {
        --chat-column-width: min(760px, calc(100vw - 332px));
        --chat-side-gap: 18px
    }

    body.chat-user-page .topbar-actions .topbar-select-wrap {
        min-width: 110px;
        max-width: 148px
    }

    body.chat-user-page .topbar-actions .topbar-select-wrap:first-child {
        max-width: 108px
    }
}

@media (min-width: 961px) {
    body.chat-user-page {
        --chat-sidebar-width: 268px;
        --chat-main-width: calc(100vw - var(--chat-sidebar-width));
        --chat-main-left: var(--chat-sidebar-width)
    }

    body.chat-user-page.sidebar-collapsed {
        --chat-sidebar-width: 64px
    }

    body.chat-user-page .share-selection-chrome {
        z-index: 1200
    }

    body.chat-user-page .share-selection-topbar,
    body.chat-user-page .share-selection-bottombar {
        width: calc(var(--chat-column-width) + 32px);
        max-width: calc(var(--chat-main-width) - (var(--chat-side-gap) * 2));
        margin-left: calc(var(--chat-main-left) + (var(--chat-main-width) - min(calc(var(--chat-column-width) + 32px), calc(var(--chat-main-width) - (var(--chat-side-gap) * 2)))) / 2);
        margin-right: 0;
        transform: none
    }

    body.chat-user-page .share-selection-bottombar {
        left: auto
    }

    body.chat-user-page .msg-share-check {
        box-sizing: border-box;
        width: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        min-height: 18px !important;
        padding: 0 !important;
        left: -24px;
        top: 38px;
        display: inline-grid;
        place-items: center;
        line-height: 1;
        border-width: 1.5px;
        box-shadow: 0 4px 10px rgba(15, 23, 42, .08)
    }

    body.chat-user-page .msg-share-check.is-selected::after {
        left: 5px;
        top: 2px;
        width: 4px;
        height: 8px;
        border-right-width: 1.5px;
        border-bottom-width: 1.5px
    }
}

body.chat-user-page .composer-edit-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 2px 8px;
    padding: 7px 10px;
    border: 1px solid rgba(37, 99, 235, .14);
    border-radius: 10px;
    background: rgba(239, 246, 255, .92);
    color: #1d4ed8;
    font-size: 13px;
    line-height: 1.35
}

body.chat-user-page .composer-edit-bar[hidden] {
    display: none
}

body.chat-user-page .composer-edit-bar span {
    flex: 1;
    min-width: 0;
    font-weight: 600
}

body.chat-user-page .composer-edit-action {
    min-height: 28px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 12px;
    color: #1d4ed8
}

body.chat-user-page .reasoning-budget-wrap {
    display: inline-flex;
    align-items: center;
    min-width: 76px;
    height: 40px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 12px;
    background: rgba(248, 250, 252, .88)
}

body.chat-user-page .reasoning-budget-wrap[hidden] {
    display: none
}

body.chat-user-page .reasoning-budget-wrap select {
    width: 100%;
    height: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0 8px;
    color: #374151;
    font: inherit;
    font-size: 12px;
    outline: none
}

body.chat-user-page .scroll-to-bottom-btn {
    position: fixed;
    right: max(24px, calc((100vw - var(--chat-column-width)) / 2 - 56px));
    bottom: 104px;
    z-index: 18;
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: #111827;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
    cursor: pointer
}

body.chat-user-page .scroll-to-bottom-btn[hidden] {
    display: none
}

body.chat-user-page .scroll-to-bottom-btn svg {
    width: 18px;
    height: 18px
}

body.chat-user-page .msg-wrap.user .msg-actions {
    justify-content: flex-end;
    opacity: .88;
    padding-inline: 4px
}

body.chat-user-page .msg-wrap.user .msg-action-btn {
    min-width: 32px;
    background: rgba(255, 255, 255, .76)
}

body.chat-user-page .sidebar {
    background: #fff;
    border-right: 1px solid rgba(15, 23, 42, .08);
    box-shadow: none
}

body.chat-user-page .conv {
    min-height: 0;
    padding: 9px 10px;
    border-radius: 10px;
    border-color: transparent;
    box-shadow: none
}

body.chat-user-page .conv:hover,
body.chat-user-page .conv.active {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, .06);
    box-shadow: none
}

@media (min-width: 961px) {
    body.chat-user-page .topbar {
        padding: 6px 8px;
    }

    body.chat-user-page .topbar-main {
        display: grid;
        grid-template-columns: minmax(170px, 1fr) minmax(430px, auto) auto auto;
        grid-template-rows: auto;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
    }

    body.chat-user-page .topbar-main > .topbar-title-wrap {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        width: auto;
    }

    body.chat-user-page .topbar-main > .topbar-actions:not(.topbar-actions-inline) {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        min-width: 0;
        justify-content: flex-end;
    }

    body.chat-user-page .topbar-main > .topbar-actions-inline {
        grid-column: 3;
        grid-row: 1;
        width: auto;
        justify-self: end;
    }

    body.chat-user-page .topbar-main > .topbar-head-actions {
        grid-column: 4;
        grid-row: 1;
        width: auto;
        min-width: 0;
        justify-self: end;
        order: 0;
    }

    body.chat-user-page .topbar-title-wrap {
        display: grid;
        max-width: none;
        min-width: 0;
    }

    body.chat-user-page .topbar-title-wrap > div:first-child {
        min-width: 0;
        max-width: 100%;
    }

    body.chat-user-page .topbar-actions-inline {
        flex: 0 0 auto;
    }

    body.chat-user-page .tool-option-bar,
    body.chat-user-page .collab-toggle-bar {
        grid-column: 1 / -1;
    }

    body.chat-user-page .topbar-actions .topbar-select-wrap {
        min-width: 118px;
        max-width: 168px;
    }

    body.chat-user-page .topbar-actions .topbar-select-wrap:first-child {
        min-width: 108px;
        max-width: 118px;
    }

    body.chat-user-page .collab-toggle-bar {
        margin-top: 4px;
        min-height: 0;
    }

    body.chat-user-page .collab-toggle-bar[hidden] {
        display: none !important;
    }
}

body.chat-user-page .topbar-title-wrap,
body.chat-user-page .topbar-compact-meta {
    display: grid;
    gap: 1px;
    min-width: 0
}

body.chat-user-page .topbar h1,
body.chat-user-page .topbar-compact-meta strong {
    margin: 0;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: 0;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

body.chat-user-page .topbar p,
body.chat-user-page .topbar-compact-meta span {
    margin: 1px 0 0;
    font-size: 10px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

body.chat-user-page .topbar-actions-inline > .topbar-upload-btn {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    color: #64748b;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
    text-indent: 0;
    border: 1px solid transparent;
    background: transparent !important;
    box-shadow: none
}

body.chat-user-page .topbar-actions-inline > .topbar-upload-btn::before {
    content: "";
    width: 17px;
    height: 17px;
    text-indent: 0;
    background-color: currentColor;
    display: block;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 17px 17px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 17px 17px
}

body.chat-user-page .topbar-actions-inline > .topbar-upload-btn:hover,
body.chat-user-page .topbar-actions-inline > .topbar-upload-btn:focus-visible {
    color: #111827;
    background: rgba(255, 255, 255, .96) !important;
    border-color: rgba(226, 232, 240, .92)
}

body.chat-user-page .topbar-actions-inline > #topbarMultimodalUploadLabel::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v13a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18.5v-13Zm2.5-.5a.5.5 0 0 0-.5.5v8.38l2.34-2.34a2 2 0 0 1 2.82 0l1.3 1.29 2.05-2.05a2 2 0 0 1 2.82 0L18 11.46V5.5a.5.5 0 0 0-.5-.5h-11Zm11 14a.5.5 0 0 0 .5-.5v-4.2l-2.09-2.1-5.8 5.8h7.39ZM6 16.7v1.8a.5.5 0 0 0 .5.5h.78l3.76-3.76-1.29-1.29L6 16.7ZM9 8.25a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v13a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18.5v-13Zm2.5-.5a.5.5 0 0 0-.5.5v8.38l2.34-2.34a2 2 0 0 1 2.82 0l1.3 1.29 2.05-2.05a2 2 0 0 1 2.82 0L18 11.46V5.5a.5.5 0 0 0-.5-.5h-11Zm11 14a.5.5 0 0 0 .5-.5v-4.2l-2.09-2.1-5.8 5.8h7.39ZM6 16.7v1.8a.5.5 0 0 0 .5.5h.78l3.76-3.76-1.29-1.29L6 16.7ZM9 8.25a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z'/%3E%3C/svg%3E")
}

body.chat-user-page .topbar-actions-inline > #topbarWordUploadLabel::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M6 3h8.6L20 8.4V19a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm7.75 2H6v14h12V9.25h-4.25V5ZM8 12a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M6 3h8.6L20 8.4V19a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm7.75 2H6v14h12V9.25h-4.25V5ZM8 12a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E")
}

body.chat-user-page .topbar-actions-inline,
body.chat-user-page .topbar-head-actions {
    align-self: center;
    align-items: center;
    height: 36px;
    min-height: 36px;
    transform: translateY(1px)
}

body.chat-user-page .topbar-actions-inline > .topbar-upload-btn,
body.chat-user-page .topbar-actions-inline > .topbar-more-menu,
body.chat-user-page .topbar-more-menu > button,
body.chat-user-page .topbar-head-actions > .ghost {
    display: inline-grid;
    place-items: center;
    align-self: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    margin: 0;
    padding: 0;
    line-height: 1;
    vertical-align: middle;
    box-sizing: border-box
}

body.chat-user-page .topbar-actions-inline > .topbar-more-menu {
    position: relative;
    flex: 0 0 36px
}

body.chat-user-page .composer-actions > #multimodalUploadLabel,
body.chat-user-page .composer-actions > #wordUploadLabel,
body.chat-user-page .composer-actions > #referenceUploadLabel {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    color: #64748b;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
    text-indent: 0;
    border-color: rgba(15, 23, 42, .08);
    background: rgba(248, 250, 252, .88) !important;
    box-shadow: none
}

body.chat-user-page .composer-actions > #multimodalUploadLabel::before,
body.chat-user-page .composer-actions > #wordUploadLabel::before,
body.chat-user-page .composer-actions > #referenceUploadLabel::before {
    content: "";
    width: 17px;
    height: 17px;
    text-indent: 0;
    background-color: currentColor;
    display: block;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 17px 17px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 17px 17px
}

body.chat-user-page .composer-actions > #multimodalUploadLabel::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v13a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18.5v-13Zm2.5-.5a.5.5 0 0 0-.5.5v8.38l2.34-2.34a2 2 0 0 1 2.82 0l1.3 1.29 2.05-2.05a2 2 0 0 1 2.82 0L18 11.46V5.5a.5.5 0 0 0-.5-.5h-11Zm11 14a.5.5 0 0 0 .5-.5v-4.2l-2.09-2.1-5.8 5.8h7.39ZM6 16.7v1.8a.5.5 0 0 0 .5.5h.78l3.76-3.76-1.29-1.29L6 16.7ZM9 8.25a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v13a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18.5v-13Zm2.5-.5a.5.5 0 0 0-.5.5v8.38l2.34-2.34a2 2 0 0 1 2.82 0l1.3 1.29 2.05-2.05a2 2 0 0 1 2.82 0L18 11.46V5.5a.5.5 0 0 0-.5-.5h-11Zm11 14a.5.5 0 0 0 .5-.5v-4.2l-2.09-2.1-5.8 5.8h7.39ZM6 16.7v1.8a.5.5 0 0 0 .5.5h.78l3.76-3.76-1.29-1.29L6 16.7ZM9 8.25a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z'/%3E%3C/svg%3E")
}

body.chat-user-page .composer-actions > #wordUploadLabel::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M6 3h8.6L20 8.4V19a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm7.75 2H6v14h12V9.25h-4.25V5ZM8 12a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M6 3h8.6L20 8.4V19a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm7.75 2H6v14h12V9.25h-4.25V5ZM8 12a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E")
}

body.chat-user-page .composer-actions > #referenceUploadLabel::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 3a1 1 0 0 1 1 1v2h2.5A3.5 3.5 0 0 1 19 9.5V18a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9.5A3.5 3.5 0 0 1 8.5 6H11V4a1 1 0 0 1 1-1Zm-3.5 5A1.5 1.5 0 0 0 7 9.5V18a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V9.5A1.5 1.5 0 0 0 15.5 8h-7ZM9 13.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 3a1 1 0 0 1 1 1v2h2.5A3.5 3.5 0 0 1 19 9.5V18a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9.5A3.5 3.5 0 0 1 8.5 6H11V4a1 1 0 0 1 1-1Zm-3.5 5A1.5 1.5 0 0 0 7 9.5V18a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V9.5A1.5 1.5 0 0 0 15.5 8h-7ZM9 13.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Z'/%3E%3C/svg%3E")
}

body.chat-user-page .user-box {
    border-radius: 10px;
    background: transparent;
    border-color: rgba(15, 23, 42, .08);
    box-shadow: none
}

body.chat-user-page.sidebar-collapsed .sidebar .sidebar-brand-actions,
body.chat-user-page.sidebar-collapsed .sidebar .sidebar-menu-btn,
body.chat-user-page.sidebar-collapsed .sidebar .sidebar-profile-btn,
body.chat-user-page.sidebar-collapsed .sidebar .sidebar-new-btn {
    justify-content: center
}

@media (max-width: 720px) {
    body.chat-user-page .composer-actions > #multimodalUploadLabel,
    body.chat-user-page .composer-actions > #wordUploadLabel,
    body.chat-user-page .composer-actions > #referenceUploadLabel {
        display: none !important
    }

    body.chat-user-page #chatForm.is-voice-mode .mobile-composer-shell {
        grid-template-columns: minmax(0, 1fr) 40px;
        grid-template-areas: "prompt actions"
    }

    body.chat-user-page #chatForm.is-voice-mode .mobile-composer-plus {
        display: none !important
    }

    body.chat-user-page #chatForm.is-voice-mode .mobile-voice-hold-btn {
        grid-area: prompt;
        display: inline-flex !important;
        width: 100%;
        min-width: 0;
        min-height: 40px;
        height: 40px;
        border-radius: 999px;
        justify-content: center
    }

    body.chat-user-page #chatForm.is-voice-mode .composer-submit-btn {
        display: none !important
    }

    body.chat-user-page #chatForm.is-voice-mode .composer-actions {
        display: flex !important;
        grid-area: actions;
        width: 40px;
        min-width: 40px;
        justify-self: end;
        align-items: center
    }

    body.chat-user-page #chatForm.is-voice-mode .mobile-voice-input-btn {
        display: inline-grid !important
    }

    body.chat-user-page #chatForm .mobile-voice-input-btn,
    body.chat-user-page #chatForm .composer-submit-btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        max-height: 40px;
        align-self: center
    }

    body.chat-user-page #chatForm .mobile-voice-input-btn svg,
    body.chat-user-page #chatForm .composer-submit-btn svg {
        width: 18px;
        height: 18px
    }

    body.chat-user-page #chatForm .composer-actions {
        align-items: center
    }

    body.chat-user-page .reasoning-budget-wrap {
        min-width: 62px
    }

    body.chat-user-page .reasoning-budget-wrap select {
        padding: 0 6px;
        font-size: 11px
    }

    body.chat-user-page .scroll-to-bottom-btn {
        right: 18px;
        bottom: 94px
    }
}

/* ERP admin navigation */
body.admin-page .admin-shell {
    max-width: none;
    padding: 16px 20px 28px;
}

body.admin-page .admin-topbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto;
    gap: 16px;
    align-items: center;
    top: 0;
    margin: 0 -20px 16px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(196, 199, 207, .72);
    background: rgba(248, 250, 252, .94);
    backdrop-filter: blur(16px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}

body.admin-page .topbar-left h1 {
    font-size: 18px;
    line-height: 1.25;
}

body.admin-page .breadcrumb {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

body.admin-page .admin-module-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border: 1px solid rgba(196, 199, 207, .72);
    border-radius: 8px;
    background: rgba(255,255,255,.78);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.admin-page .admin-module-tab {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: none;
}

body.admin-page .admin-module-tab:hover,
body.admin-page .admin-module-tab:focus-visible {
    transform: none;
    border-color: rgba(15, 23, 42, .1);
    background: rgba(241, 245, 249, .92);
    box-shadow: none;
}

body.admin-page .admin-module-tab.active {
    color: #fff;
    border-color: #0f172a;
    background: #0f172a;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .16);
}

body.admin-page .admin-layout,
body.admin-page.sidebar-expanded .admin-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
}

body.admin-page.sidebar-collapsed .admin-layout {
    grid-template-columns: 72px minmax(0, 1fr);
}

body.admin-page .admin-sidebar {
    top: 84px;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
}

body.admin-page .admin-sidebar-head {
    display: grid;
    gap: 4px;
    padding: 8px 8px 10px;
    border-bottom: 1px solid rgba(196, 199, 207, .5);
}

body.admin-page .sidebar-kicker {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
}

body.admin-page .admin-sidebar-head strong {
    color: #0f172a;
    font-size: 16px;
}

body.admin-page .admin-secondary-nav {
    display: grid;
    gap: 6px;
}

body.admin-page .nav-item {
    display: grid;
    gap: 3px;
    justify-content: stretch;
    min-height: 48px;
    padding: 9px 10px;
    border-radius: 6px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

body.admin-page .nav-item:hover,
body.admin-page .nav-item:focus-visible {
    transform: none;
    border-color: rgba(15, 23, 42, .08);
    background: rgba(241, 245, 249, .86);
    box-shadow: none;
}

body.admin-page .nav-item.active {
    color: #0f172a;
    border-color: rgba(37, 99, 235, .2);
    background: #eef4ff;
    box-shadow: inset 3px 0 0 #2563eb;
}

body.admin-page .nav-item-label {
    font-size: 14px;
    font-weight: 750;
}

body.admin-page .nav-item-desc {
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
}

body.admin-page .nav-item.active .nav-item-desc {
    color: #3b5f9b;
}

body.admin-page .sidebar-note {
    padding: 8px;
    border-radius: 6px;
    background: rgba(248, 250, 252, .9);
    color: #64748b;
    font-size: 11px;
}

body.admin-page.sidebar-collapsed .admin-sidebar {
    padding: 8px;
}

body.admin-page.sidebar-collapsed .nav-item {
    min-height: 42px;
}

@media (max-width: 960px) {
    body.admin-page .admin-shell {
        padding: 0 10px 18px;
    }

    body.admin-page .admin-topbar {
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 0 -10px 12px;
        padding: 10px;
        border-radius: 0 0 10px 10px;
    }

    body.admin-page .topbar-left {
        align-items: flex-start;
    }

    body.admin-page .topbar-actions {
        justify-content: flex-start;
    }

    body.admin-page .admin-module-nav {
        width: 100%;
    }

    body.admin-page .admin-module-tab {
        flex: 1 0 auto;
    }

    body.admin-page .admin-layout,
    body.admin-page.sidebar-expanded .admin-layout,
    body.admin-page.sidebar-collapsed .admin-layout {
        display: block;
    }

    body.admin-page .admin-sidebar {
        display: grid;
        position: fixed;
        top: 126px;
        left: 10px;
        right: 10px;
        z-index: var(--z-popover);
        max-height: calc(100vh - 138px);
        border-radius: 10px;
        transform: translateY(-10px);
        opacity: 0;
        pointer-events: none;
    }

    body.admin-page .admin-shell.nav-open .admin-sidebar {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    body.admin-page .admin-content {
        position: relative;
        z-index: 1;
    }
}

@media (max-width: 640px) {
    body.admin-page .admin-topbar {
        gap: 8px;
    }

    body.admin-page .topbar-left h1 {
        font-size: 16px;
    }

    body.admin-page .admin-module-tab {
        min-height: 34px;
        padding: 0 10px;
        font-size: 12px;
    }

    body.admin-page .admin-sidebar {
        top: 122px;
        max-height: calc(100vh - 132px);
    }
}

/* Mobile admin workspace refinements */
@media (max-width: 960px) {
    body.admin-page {
        background: #f8fafc !important;
    }

    body.admin-page.nav-open {
        overflow: hidden;
    }

    body.admin-page .admin-shell {
        padding: 0 8px 16px;
        min-height: 100dvh;
    }

    body.admin-page .admin-topbar {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky-nav);
        grid-template-columns: 40px minmax(0, 1fr) auto;
        grid-template-areas:
            "menu title action"
            "modules modules modules";
        gap: 8px;
        align-items: center;
        margin: 0 -8px 10px;
        padding: max(8px, env(safe-area-inset-top)) 8px 8px;
        border-radius: 0;
        background: rgba(248, 250, 252, .98);
        box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
    }

    body.admin-page .topbar-left {
        display: contents;
    }

    body.admin-page #navToggle {
        grid-area: menu;
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        border-radius: 10px;
        background: #fff;
    }

    body.admin-page .topbar-left > div {
        grid-area: title;
        min-width: 0;
    }

    body.admin-page .topbar-left .eyebrow {
        display: none;
    }

    body.admin-page .topbar-left h1 {
        margin: 0;
        font-size: 16px;
        line-height: 1.18;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.admin-page .breadcrumb {
        margin-top: 2px;
        font-size: 11px;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.admin-page .topbar-actions {
        grid-area: action;
        justify-self: end;
        width: auto;
        min-width: 0;
    }

    body.admin-page .topbar-actions .link {
        min-height: 36px;
        padding: 0 10px;
        border-radius: 10px;
        font-size: 12px;
        white-space: nowrap;
        background: #fff;
    }

    body.admin-page .admin-module-nav {
        grid-area: modules;
        width: 100%;
        gap: 6px;
        padding: 3px;
        border-radius: 10px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.admin-page .admin-module-nav::-webkit-scrollbar {
        display: none;
    }

    body.admin-page .admin-module-tab {
        flex: 0 0 auto;
        min-height: 34px;
        min-width: 72px;
        padding: 0 12px;
        border-radius: 8px;
        font-size: 13px;
    }

    body.admin-page .admin-layout,
    body.admin-page.sidebar-expanded .admin-layout,
    body.admin-page.sidebar-collapsed .admin-layout {
        display: block;
    }

    body.admin-page .admin-content {
        display: grid;
        gap: 12px;
        width: 100%;
        min-width: 0;
    }

    body.admin-page .admin-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body.admin-page .admin-sidebar {
        display: grid;
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-popover);
        max-height: min(78dvh, 560px);
        padding: 14px 12px max(16px, env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
        border-width: 1px 0 0;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 -18px 48px rgba(15, 23, 42, .2);
        transform: translateY(100%);
        opacity: 1;
        pointer-events: none;
        overflow-y: auto;
    }

    body.admin-page .admin-shell.nav-open .admin-sidebar {
        z-index: var(--z-popover);
        transform: translateY(0);
        pointer-events: auto;
    }

    body.admin-page .admin-shell.nav-open .admin-content::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: var(--z-popover-backdrop);
        background: rgba(15, 23, 42, .42);
        backdrop-filter: blur(2px);
    }

    body.admin-page .admin-shell.nav-open .admin-content {
        z-index: auto;
    }

    body.admin-page .admin-sidebar-head {
        padding: 2px 4px 10px;
    }

    body.admin-page .admin-secondary-nav {
        grid-template-columns: 1fr;
    }

    body.admin-page .nav-item {
        min-height: 54px;
        padding: 10px 12px;
        border-radius: 10px;
        background: #f8fafc;
        border-color: rgba(15, 23, 42, .06);
    }

    body.admin-page .nav-item.active {
        background: #eef4ff;
    }

    body.admin-page .panel,
    body.admin-page .stat {
        padding: 12px;
        border-radius: 12px;
    }

    body.admin-page .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
    }

    body.admin-page .stat b {
        font-size: 18px;
    }

    body.admin-page .panel-head,
    body.admin-page .panel-head.compact-head {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 8px;
    }

    body.admin-page .panel-head h2,
    body.admin-page .panel h2 {
        font-size: 16px;
        line-height: 1.2;
    }

    body.admin-page .hint {
        font-size: 12px;
        line-height: 1.45;
    }

    body.admin-page .panel-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
        justify-content: stretch;
    }

    body.admin-page .panel-actions > *,
    body.admin-page .provider-card-actions > *,
    body.admin-page .user-card-actions > *,
    body.admin-page .model-actions > *,
    body.admin-page .btn-group > * {
        width: 100%;
        min-width: 0;
    }

    body.admin-page .toolbar,
    body.admin-page .settings-toolbar,
    body.admin-page .model-toolbar {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px;
        border-radius: 12px;
    }

    body.admin-page .toolbar input,
    body.admin-page .toolbar select,
    body.admin-page .toolbar textarea,
    body.admin-page .settings-toolbar input,
    body.admin-page .settings-toolbar select,
    body.admin-page .settings-toolbar textarea {
        width: 100%;
        min-height: 42px;
    }

    body.admin-page .section-subnav {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 4px;
        margin-bottom: 10px;
        border-radius: 10px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.admin-page .section-subnav::-webkit-scrollbar {
        display: none;
    }

    body.admin-page .section-subnav-btn {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 0 12px;
        border-radius: 8px;
        font-size: 12px;
        white-space: nowrap;
    }

    body.admin-page .table-wrap {
        border-radius: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.admin-page .table-head {
        display: none;
    }

    body.admin-page .table-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px;
        text-align: center;
    }

    body.admin-page .pager {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 8px;
        align-items: center;
        width: 100%;
    }

    body.admin-page .pager button {
        width: 100%;
        min-height: 38px;
    }

    body.admin-page .provider-card,
    body.admin-page .user-card,
    body.admin-page .job-card,
    body.admin-page .share-card {
        border-radius: 12px;
    }

    body.admin-page .provider-card-actions,
    body.admin-page .user-card-actions,
    body.admin-page .share-card-actions,
    body.admin-page .btn-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.admin-page .model-price-bar {
        grid-template-columns: 1fr;
        padding: 10px;
        border-radius: 12px;
    }

    body.admin-page .model-price-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.admin-page .voice-upload-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body.admin-page .drawer {
        top: auto;
        left: 0;
        right: auto;
        bottom: -100dvh;
        width: 100vw;
        height: min(86dvh, 720px);
        padding: 14px 12px max(16px, env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
        transition: bottom .28s var(--ease);
    }

    body.admin-page .drawer.open {
        right: auto;
        bottom: 0;
    }

    body.admin-page .drawer-head {
        position: sticky;
        top: 0;
        z-index: 1;
        margin: -14px -12px 0;
        padding: 12px;
        background: rgba(255, 255, 255, .96);
        border-bottom: 1px solid rgba(15, 23, 42, .08);
    }

    body.admin-page .drawer-form {
        grid-template-columns: 1fr;
        padding: 10px;
        border-radius: 12px;
    }

    body.admin-page .drawer-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

@media (max-width: 420px) {
    body.admin-page .admin-topbar {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 6px;
    }

    body.admin-page #navToggle {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
    }

    body.admin-page .topbar-actions .link {
        padding: 0 8px;
        font-size: 11px;
    }

    body.admin-page .admin-module-tab {
        min-width: 68px;
        padding: 0 10px;
        font-size: 12px;
    }

    body.admin-page .panel-actions,
    body.admin-page .provider-card-actions,
    body.admin-page .user-card-actions,
    body.admin-page .share-card-actions,
    body.admin-page .model-price-actions,
    body.admin-page .btn-group {
        grid-template-columns: 1fr;
    }

    body.admin-page .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Traditional ERP admin frame */
body.admin-page {
    background: #f3f5f9 !important;
    color: #1f2d3d;
}

body.admin-page .site-footer {
    display: none;
}

body.admin-page .admin-shell {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-rows: 48px minmax(0, 1fr);
    background: #f3f5f9;
}

body.admin-page .admin-topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky-nav);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 0;
    background: #2453b8;
    color: #fff;
    box-shadow: none;
    backdrop-filter: none;
}

body.admin-page .topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

body.admin-page .admin-menu-toggle {
    display: none;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 18px;
    box-shadow: none;
}

body.admin-page .admin-brand {
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

body.admin-page .admin-build {
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    white-space: nowrap;
}

body.admin-page .topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    width: auto;
    color: #fff;
    font-size: 13px;
}

body.admin-page .admin-station,
body.admin-page .admin-user-name {
    white-space: nowrap;
}

body.admin-page .admin-role-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
}

body.admin-page .admin-topbar-link {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    white-space: nowrap;
}

body.admin-page .admin-topbar-link:hover,
body.admin-page .admin-topbar-link:focus-visible {
    color: #dbeafe;
    transform: none;
    box-shadow: none;
}

body.admin-page .admin-layout,
body.admin-page.sidebar-expanded .admin-layout,
body.admin-page.sidebar-collapsed .admin-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 0;
    min-height: calc(100vh - 48px);
}

body.admin-page .admin-sidebar {
    position: sticky;
    top: 48px;
    align-self: start;
    display: block;
    width: 200px;
    height: calc(100vh - 48px);
    max-height: none;
    padding: 14px 0;
    border: 0;
    border-right: 1px solid #e5e8ef;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    overflow-y: auto;
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

body.admin-page .admin-tree-nav {
    display: block;
}

body.admin-page .admin-tree-group {
    margin: 0;
    padding: 0;
}

body.admin-page .admin-tree-group h2 {
    margin: 0;
    padding: 15px 20px 8px;
    color: #34495e;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

body.admin-page .admin-tree-item {
    display: block;
    width: 100%;
    min-height: 36px;
    padding: 0 20px 0 32px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #34495e;
    font-size: 13px;
    font-weight: 500;
    line-height: 36px;
    text-align: left;
    box-shadow: none;
    transition: background .16s ease, color .16s ease;
}

body.admin-page .admin-tree-leaf {
    padding-left: 20px;
    font-weight: 700;
}

body.admin-page .admin-tree-item:hover,
body.admin-page .admin-tree-item:focus-visible {
    transform: none;
    background: #f4f7ff;
    color: #2453b8;
    box-shadow: none;
}

body.admin-page .admin-tree-item.active {
    background: #e9f0ff;
    color: #1744a2;
    font-weight: 800;
    box-shadow: inset 3px 0 0 #2453b8;
}

body.admin-page .admin-tree-children {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0 0 4px;
}

body.admin-page .admin-tree-subitem {
    display: block;
    width: 100%;
    min-height: 32px;
    padding: 0 18px 0 48px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #556274;
    font-size: 12px;
    font-weight: 500;
    line-height: 32px;
    text-align: left;
    box-shadow: none;
}

body.admin-page .admin-tree-subitem:hover,
body.admin-page .admin-tree-subitem:focus-visible {
    transform: none;
    background: #f4f7ff;
    color: #2453b8;
    box-shadow: none;
}

body.admin-page .admin-tree-subitem.active {
    background: #f0f5ff;
    color: #1744a2;
    font-weight: 800;
    box-shadow: inset 3px 0 0 #7aa2ff;
}

body.admin-page .admin-main {
    min-width: 0;
    padding: 20px 24px 32px;
    background: #f3f5f9;
}

body.admin-page .admin-page-head {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

body.admin-page .breadcrumb {
    margin: 0;
    color: #8a96a8;
    font-size: 12px;
    line-height: 1.4;
}

body.admin-page .admin-page-head h1 {
    margin: 0;
    color: #111827;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
}

body.admin-page .admin-content {
    display: grid;
    gap: 12px;
    min-width: 0;
    width: 100%;
}

body.admin-page .admin-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

body.admin-page .panel,
body.admin-page .stat,
body.admin-page .table-wrap {
    border: 1px solid #e5e8ef;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}

body.admin-page .panel {
    padding: 18px;
}

body.admin-page .panel-head,
body.admin-page .panel-head.compact-head {
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

body.admin-page .panel-head h2,
body.admin-page .panel h2 {
    color: #111827;
    font-size: 16px;
    font-weight: 800;
}

body.admin-page .hint {
    color: #6b7280;
    font-size: 12px;
}

body.admin-page .toolbar,
body.admin-page .settings-toolbar,
body.admin-page .model-toolbar,
body.admin-page .section-subnav {
    border: 1px solid #e5e8ef;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}

body.admin-page .section-subnav {
    padding: 10px;
}

body.admin-page .section-subnav-btn {
    min-height: 34px;
    border-radius: 3px;
    box-shadow: none;
}

body.admin-page .section-subnav-btn.active {
    background: #2453b8;
    border-color: #2453b8;
    box-shadow: none;
}

body.admin-page button.primary,
body.admin-page .primary {
    border-color: #2453b8;
    background: #2453b8;
    color: #fff;
    border-radius: 3px;
    box-shadow: none;
}

body.admin-page .ghost,
body.admin-page .file-btn {
    border-color: #d8dde8;
    background: #fff;
    color: #34495e;
    border-radius: 3px;
    box-shadow: none;
}

body.admin-page .table-head {
    background: #fff;
    border-bottom: 1px solid #e5e8ef;
    color: #111827;
    font-weight: 800;
}

body.admin-page .table-list > *,
body.admin-page .row,
body.admin-page .provider-card,
body.admin-page .user-card,
body.admin-page .share-card {
    border-radius: 0;
}

body.admin-page .table-footer {
    background: #fff;
    border-top: 1px solid #e5e8ef;
}

body.admin-page .admin-module-nav,
body.admin-page .admin-sidebar-head,
body.admin-page .sidebar-note,
body.admin-page .admin-secondary-nav,
body.admin-page .admin-module-tab {
    display: none !important;
}

@media (max-width: 960px) {
    body.admin-page .admin-shell {
        grid-template-rows: 48px minmax(0, 1fr);
        padding: 0;
    }

    body.admin-page .admin-topbar {
        display: flex;
        min-height: 48px;
        padding: 0 12px;
    }

    body.admin-page .admin-menu-toggle {
        display: inline-grid;
        place-items: center;
    }

    body.admin-page .admin-build,
    body.admin-page .admin-station,
    body.admin-page .admin-role-badge {
        display: none;
    }

    body.admin-page .admin-brand {
        font-size: 13px;
    }

    body.admin-page .topbar-actions {
        gap: 10px;
        font-size: 12px;
    }

    body.admin-page .admin-layout,
    body.admin-page.sidebar-expanded .admin-layout,
    body.admin-page.sidebar-collapsed .admin-layout {
        display: block;
        min-height: calc(100vh - 48px);
    }

    body.admin-page .admin-sidebar {
        position: fixed;
        top: 48px;
        left: 0;
        bottom: 0;
        z-index: var(--z-popover);
        width: 220px;
        height: calc(100dvh - 48px);
        border-right: 1px solid #e5e8ef;
        transform: translateX(-100%);
        transition: transform .22s ease;
    }

    body.admin-page .admin-shell.nav-open .admin-sidebar {
        transform: translateX(0);
    }

    body.admin-page .admin-shell.nav-open .admin-main::before {
        content: "";
        position: fixed;
        inset: 48px 0 0;
        z-index: var(--z-popover-backdrop);
        background: rgba(15, 23, 42, .38);
    }

    body.admin-page .admin-main {
        padding: 14px 12px 24px;
    }

    body.admin-page .admin-page-head h1 {
        font-size: 18px;
    }

    body.admin-page .panel {
        padding: 12px;
    }

    body.admin-page .panel-head,
    body.admin-page .panel-head.compact-head {
        align-items: flex-start;
        flex-direction: column;
    }

    body.admin-page .panel-actions {
        justify-content: flex-start;
    }
}

/* Final ERP table overrides: keep the right workspace as compact grids. */
body.admin-page [data-section-panel][hidden],
body.admin-page [data-subview-item][hidden] {
    display: none !important;
}

body.admin-page [data-section-panel] {
    display: none !important;
}

body.admin-page [data-section-panel].is-active-section {
    display: grid !important;
}

body.admin-page .admin-main {
    height: calc(100vh - 48px);
    overflow: auto;
}

body.admin-page .panel.wide {
    width: 100%;
    max-width: none;
}

body.admin-page .toolbar,
body.admin-page .settings-toolbar,
body.admin-page .model-toolbar {
    margin-bottom: 12px;
    padding: 10px 12px;
}

body.admin-page .table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

body.admin-page .table-head,
body.admin-page .erp-table-row {
    display: grid;
    align-items: center;
    gap: 0;
    min-width: max-content;
}

body.admin-page .table-head {
    min-height: 38px;
    padding: 0;
    background: #f7f8fb;
    border-bottom: 1px solid #e1e6ef;
    color: #34495e;
    font-size: 12px;
    font-weight: 800;
}

body.admin-page .table-head > span,
body.admin-page .erp-table-row > .cell-block {
    min-width: 0;
    padding: 9px 10px;
}

body.admin-page .erp-table-row {
    min-height: 42px;
    border: 0;
    border-bottom: 1px solid #edf0f5;
    border-radius: 0;
    background: #fff;
    color: #1f2d3d;
    font-size: 12px;
    box-shadow: none;
}

body.admin-page .erp-table-row:hover {
    background: #f8fbff;
    transform: none;
    box-shadow: none;
}

body.admin-page .erp-table-row:nth-child(even) {
    background: #fbfcfe;
}

body.admin-page .erp-table-row:nth-child(even):hover {
    background: #f6f9ff;
}

body.admin-page .erp-table-row .cell-block {
    display: block;
}

body.admin-page .erp-table-row .cell-label {
    display: none;
}

body.admin-page .erp-table-row .cell-value {
    display: block;
    min-width: 0;
    line-height: 1.45;
}

body.admin-page .erp-primary {
    display: grid;
    gap: 2px;
    min-width: 0;
}

body.admin-page .erp-primary strong {
    overflow: hidden;
    color: #111827;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.admin-page .erp-primary small,
body.admin-page .erp-stack small {
    overflow: hidden;
    color: #6b7280;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.admin-page .erp-stack,
body.admin-page .erp-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

body.admin-page .erp-row-actions {
    justify-content: flex-start;
}

body.admin-page .cell-text.truncate,
body.admin-page .cell-text.nowrap {
    display: block;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.admin-page .cell-text.wrap {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
}

body.admin-page .btn-group,
body.admin-page .cell-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

body.admin-page .erp-table-row button,
body.admin-page .erp-table-row .ghost,
body.admin-page .erp-table-row .primary,
body.admin-page .erp-table-row .danger {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 12px;
}

body.admin-page .danger-ghost {
    color: #dc2626;
    border-color: #fecaca;
    background: #fff;
}

body.admin-page .provider-grid {
    grid-template-columns: minmax(150px, 1.1fr) minmax(110px, .75fr) minmax(240px, 1.8fr) minmax(86px, .6fr) minmax(140px, 1fr) minmax(160px, 1.05fr);
}

body.admin-page .model-grid {
    grid-template-columns: 92px minmax(240px, 1.5fr) minmax(140px, .85fr) minmax(210px, 1.2fr) minmax(230px, 1.2fr) minmax(140px, .85fr) minmax(200px, 1.15fr);
}

body.admin-page .user-grid {
    grid-template-columns: 64px minmax(120px, .8fr) minmax(200px, 1.35fr) minmax(90px, .65fr) minmax(80px, .55fr) minmax(140px, .9fr) minmax(160px, 1fr) minmax(140px, .9fr) minmax(140px, .9fr) minmax(120px, .75fr) minmax(170px, 1fr);
}

body.admin-page .job-grid {
    grid-template-columns: minmax(180px, 1.2fr) minmax(86px, .55fr) minmax(140px, .85fr) minmax(86px, .55fr) minmax(140px, .9fr) minmax(180px, 1.1fr) minmax(140px, .85fr) minmax(140px, .85fr) minmax(96px, .6fr);
}

body.admin-page .question-bank-grid {
    grid-template-columns: minmax(140px, .85fr) minmax(420px, 2.35fr) minmax(170px, 1fr) minmax(190px, 1.1fr) minmax(150px, .85fr) minmax(120px, .65fr);
}

body.admin-page .app-version-grid {
    grid-template-columns: minmax(140px, .95fr) minmax(150px, .95fr) minmax(96px, .6fr) minmax(240px, 1.65fr) minmax(100px, .65fr) minmax(96px, .6fr) minmax(145px, .9fr) minmax(200px, 1.2fr);
}

body.admin-page .download-log-grid {
    grid-template-columns: minmax(170px, 1.2fr) minmax(110px, .7fr) minmax(260px, 1.8fr) minmax(150px, 1fr) minmax(170px, 1.15fr);
}

body.admin-page .download-ban-grid {
    grid-template-columns: minmax(160px, 1fr) minmax(90px, .55fr) minmax(180px, 1.05fr) minmax(360px, 2.2fr) minmax(170px, 1.05fr);
}

body.admin-page .preview-share-grid {
    grid-template-columns: 80px minmax(220px, 1.35fr) minmax(90px, .55fr) minmax(130px, .75fr) minmax(150px, .9fr) minmax(110px, .65fr) minmax(150px, .9fr) minmax(300px, 1.8fr);
}

body.admin-page .job-detail-panel {
    position: absolute;
    z-index: var(--z-popover);
    width: min(520px, calc(100vw - 48px));
    max-height: 320px;
    margin-top: 6px;
    overflow: auto;
    border: 1px solid #d8dde8;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
}

body.admin-page .job-detail-panel .json-pre {
    margin: 0;
    max-height: none;
    border: 0;
    border-radius: 0;
    background: #f8fafc;
}

body.admin-page .erp-row-details summary,
body.admin-page .erp-nested-details summary {
    color: #2453b8;
    cursor: pointer;
    font-weight: 700;
}

body.admin-page .question-answer-detail {
    display: grid;
    gap: 6px;
    margin-top: 8px;
    min-width: 360px;
}

body.admin-page .question-answer-line {
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid #e5e8ef;
    border-radius: 4px;
    background: #f8fafc;
}

body.admin-page .share-list {
    gap: 0;
}

body.admin-page .share-extend-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

body.admin-page .share-extend-field input {
    width: 68px;
    min-height: 28px;
    padding: 4px 6px;
}

body.admin-page .provider-card,
body.admin-page .user-card,
body.admin-page .share-card,
body.admin-page .job-grid-card {
    display: contents;
}

body.admin-page .model-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
}

body.admin-page .model-table-wrap .table-head.model-grid,
body.admin-page #models.table-list,
body.admin-page #models .erp-table-row.model-grid {
    min-width: 1360px;
    width: 100%;
}

body.admin-page .model-table-wrap .table-head.model-grid,
body.admin-page #models .erp-table-row.model-grid {
    display: grid;
    grid-template-columns: 72px minmax(260px, 1.35fr) minmax(150px, .8fr) minmax(220px, 1fr) minmax(280px, 1.2fr) minmax(170px, .85fr) minmax(260px, 1.1fr) !important;
    align-items: stretch;
    column-gap: 0;
}

body.admin-page #models .erp-table-row.model-grid {
    overflow: visible;
    padding: 0 !important;
    border: 0;
    border-bottom: 1px solid #edf0f5;
    border-radius: 0;
    box-shadow: none;
}

body.admin-page #models .erp-table-row.model-grid:hover {
    background: #f8fbff;
    box-shadow: none;
}

body.admin-page .model-table-wrap .table-head.model-grid > span,
body.admin-page #models .erp-table-row.model-grid > .cell-block {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-width: 0;
    padding: 8px 10px !important;
}

body.admin-page #models .erp-table-row.model-grid > .cell-block + .cell-block {
    border-left: 1px solid #edf0f5;
}

body.admin-page #models .erp-table-row.model-grid .cell-value,
body.admin-page #models .model-primary,
body.admin-page #models .model-provider,
body.admin-page #models .model-meta,
body.admin-page #models .model-state,
body.admin-page #models .model-actions {
    width: 100%;
    min-width: 0;
}

body.admin-page #models .model-title,
body.admin-page #models .model-subtitle,
body.admin-page #models .model-provider .cell-text,
body.admin-page #models .model-meta-row,
body.admin-page #models .model-meta-sub {
    display: block;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.admin-page #models .model-tags,
body.admin-page #models .model-grid .btn-group {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow: hidden;
    gap: 6px;
}

body.admin-page #models .model-tags .badge {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.admin-page #models .model-grid .btn-group > * {
    flex: 0 0 auto;
}

body.admin-page .model-table-wrap .table-sort-btn {
    width: auto;
    justify-content: flex-start;
}

body.admin-page [data-section-panel="models"].is-active-section > .panel.wide {
    height: 100%;
    gap: 8px;
    padding: 12px;
    grid-template-columns: minmax(430px, 1fr) minmax(360px, 420px);
    grid-template-rows: auto auto auto minmax(0, 1fr);
}

body.admin-page [data-section-panel="models"] .panel-head,
body.admin-page [data-section-panel="models"] .model-toolbar,
body.admin-page [data-section-panel="models"] .model-table-wrap {
    grid-column: 1 / -1;
}

body.admin-page [data-section-panel="models"] .model-price-bar {
    grid-column: 2 / 3;
    grid-row: 3;
    min-width: 0;
}

body.admin-page [data-section-panel="models"] .model-bulk-bar {
    grid-column: 1 / 2;
    grid-row: 3;
    align-self: stretch;
}

body.admin-page [data-section-panel="models"] .model-table-wrap {
    grid-row: 4;
}

body.admin-page [data-section-panel="models"] .panel-head.compact-head {
    gap: 8px;
    margin-bottom: 0;
}

body.admin-page [data-section-panel="models"] .panel-head h2 {
    font-size: 15px;
    line-height: 1.2;
}

body.admin-page [data-section-panel="models"] .panel-head .hint {
    display: none;
}

body.admin-page [data-section-panel="models"] .panel-actions {
    gap: 6px;
    margin-top: 0;
}

body.admin-page [data-section-panel="models"] .panel-actions > * {
    min-height: 30px;
    padding: 4px 10px;
}

body.admin-page .model-toolbar {
    grid-template-columns: minmax(180px, 1.25fr) repeat(7, minmax(88px, .62fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 4px 8px !important;
}

body.admin-page .model-toolbar input,
body.admin-page .model-toolbar select {
    width: 100%;
    min-height: 28px;
    height: 28px;
    padding: 4px 8px;
    font-size: 12px;
}

body.admin-page .model-bulk-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    margin: 0 !important;
    padding: 3px 8px !important;
    border: 1px solid #e5e8ef;
    border-radius: 4px;
    background: #fff;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
}

body.admin-page .model-bulk-bar button {
    min-height: 24px;
    padding: 2px 9px;
    flex: 0 1 auto;
    min-width: 0;
}

body.admin-page .model-bulk-bar .hint {
    display: none;
}

body.admin-page .model-price-bar {
    grid-template-columns: minmax(148px, 172px) auto auto;
    gap: 6px;
    align-items: center;
    margin: 0 !important;
    padding: 4px 8px !important;
    border-radius: 4px;
}

body.admin-page .model-price-field {
    display: grid;
    grid-template-columns: auto minmax(80px, 1fr);
    align-items: center;
    gap: 5px;
}

body.admin-page .model-price-field span {
    white-space: nowrap;
}

body.admin-page .model-price-field input {
    min-height: 28px;
    height: 28px;
    padding: 4px 8px;
}

body.admin-page .model-price-actions {
    flex-wrap: nowrap;
    gap: 4px;
    min-width: 0;
}

body.admin-page .model-price-actions button {
    min-height: 28px;
    padding: 3px 8px;
}

body.admin-page .model-price-badge {
    min-height: 26px;
    padding: 0 10px;
    border-radius: 3px;
    font-size: 12px;
}

body.admin-page .model-price-meta {
    display: grid;
    gap: 2px;
    min-width: 0;
}

body.admin-page .model-price-current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.admin-page .model-price-summary {
    display: none;
}

body.admin-page [data-section-panel="models"].is-active-section .model-table-wrap {
    min-height: 0;
    height: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

body.admin-page .model-table-wrap .table-head.model-grid {
    min-height: 32px;
}

body.admin-page .model-table-wrap .table-head.model-grid > span,
body.admin-page #models .erp-table-row.model-grid > .cell-block {
    padding: 5px 8px !important;
}

body.admin-page #models .erp-table-row.model-grid {
    min-height: 58px;
}

body.admin-page #models .model-primary,
body.admin-page #models .model-provider,
body.admin-page #models .model-meta,
body.admin-page #models .model-state,
body.admin-page #models .model-actions {
    gap: 3px;
}

body.admin-page #models .model-title {
    font-size: 13px;
    line-height: 16px;
}

body.admin-page #models .model-subtitle,
body.admin-page #models .model-meta-sub {
    font-size: 11px;
    line-height: 14px;
}

body.admin-page #models .model-meta-row {
    min-height: 0;
    line-height: 15px;
}

body.admin-page #models .model-tags {
    align-items: center;
    gap: 4px;
    min-height: 0;
}

body.admin-page #models .model-tags .badge,
body.admin-page #models .badge,
body.admin-page #models .status {
    min-height: 20px;
    padding: 1px 6px;
    font-size: 11px;
    line-height: 16px;
    flex-wrap: nowrap;
}

body.admin-page #models .model-grid .btn-group {
    gap: 4px;
}

body.admin-page #models .model-grid .btn-group > * {
    min-height: 24px;
    padding: 2px 6px;
    font-size: 11px;
}

body.admin-page [data-section-panel="models"].is-active-section > .panel.wide {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
    gap: 6px;
}

body.admin-page [data-section-panel="models"] .panel-head,
body.admin-page [data-section-panel="models"] .model-toolbar,
body.admin-page [data-section-panel="models"] .model-bulk-bar,
body.admin-page [data-section-panel="models"] .model-price-bar,
body.admin-page [data-section-panel="models"] .model-table-wrap {
    grid-column: 1 / -1 !important;
    min-width: 0;
}

body.admin-page [data-section-panel="models"] .model-toolbar {
    grid-row: 2 !important;
    min-height: 34px;
}

body.admin-page [data-section-panel="models"] .model-bulk-bar {
    grid-row: 3 !important;
    flex-wrap: nowrap !important;
    min-height: 30px;
    max-height: 32px;
    overflow-x: auto;
    overflow-y: hidden;
}

body.admin-page [data-section-panel="models"] .model-price-bar {
    grid-row: 4 !important;
    grid-template-columns: minmax(160px, 220px) auto !important;
    min-height: 32px;
    max-height: 34px;
    overflow: hidden;
}

body.admin-page [data-section-panel="models"] .model-table-wrap {
    grid-row: 5 !important;
}

body.admin-page [data-section-panel="models"] .model-toolbar {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

body.admin-page [data-section-panel="models"] .model-toolbar input,
body.admin-page [data-section-panel="models"] .model-toolbar select,
body.admin-page [data-section-panel="models"] .model-price-field input {
    min-height: 26px;
    height: 26px;
}

body.admin-page [data-section-panel="models"] .model-price-meta {
    display: none !important;
}

body.admin-page [data-section-panel="models"] .model-price-actions {
    overflow: hidden;
}

body.admin-page [data-section-panel="models"] .model-price-actions button,
body.admin-page [data-section-panel="models"] .model-bulk-bar button {
    min-height: 24px;
    padding-top: 2px;
    padding-bottom: 2px;
}

body.admin-page #models .cell-block[data-label="状态"] .model-state {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
}

body.admin-page #models .cell-block[data-label="价格"] .model-meta-sub {
    display: none !important;
}

body.admin-page #models .cell-block[data-label="价格"] .model-meta {
    gap: 0;
}

body.admin-page [data-section-panel="dashboard"].stats-grid {
    align-items: stretch;
}

body.admin-page [data-section-panel="dashboard"].stats-grid .stat {
    display: grid;
    align-content: center;
    min-height: 76px;
    padding: 12px;
    overflow: visible;
}

body.admin-page [data-section-panel="dashboard"].stats-grid .stat small {
    display: block;
    min-width: 0;
    color: #667085;
    line-height: 1.25;
    white-space: normal;
}

body.admin-page [data-section-panel="dashboard"].stats-grid .stat b {
    display: block;
    min-width: 0;
    overflow: visible;
    font-size: clamp(16px, 1.6vw, 22px);
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.admin-page [data-section-panel="dashboard"] .panel.wide {
    overflow: visible;
}

body.admin-page [data-section-panel="dashboard"] .catalog-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

body.admin-page [data-section-panel="dashboard"] .catalog-card {
    min-height: 0;
    border-radius: 4px;
}

body.admin-page [data-section-panel="dashboard"] .catalog-card strong,
body.admin-page [data-section-panel="dashboard"] .catalog-card .hint,
body.admin-page [data-section-panel="dashboard"] .catalog-card small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.35;
}

body.admin-page [data-section-panel="dashboard"] .panel-actions {
    align-items: center;
    justify-content: flex-start;
}

body.admin-page [data-section-panel="dashboard"] .panel-message {
    width: 100%;
    max-width: none;
    min-height: 0;
    overflow-wrap: anywhere;
    text-align: left;
}

body.admin-page [data-section-panel="dashboard"] .voice-manager {
    min-width: 0;
    overflow: visible;
}

body.admin-page [data-section-panel="dashboard"] .voice-upload-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) auto;
    gap: 8px;
}

body.admin-page [data-section-panel="dashboard"] .voice-upload-row > * {
    min-width: 0;
}

@media (max-width: 960px) {
    body.admin-page .admin-main {
        height: calc(100dvh - 48px);
        overflow: auto;
    }

    body.admin-page [data-section-panel="dashboard"].stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 8px;
    }

    body.admin-page [data-section-panel="dashboard"].stats-grid .stat {
        min-height: 70px;
        padding: 10px;
    }

    body.admin-page [data-section-panel="dashboard"].stats-grid .stat::after {
        display: none;
    }

    body.admin-page [data-section-panel="dashboard"].stats-grid .stat b {
        margin-top: 4px;
        font-size: clamp(15px, 4.6vw, 18px);
    }

    body.admin-page [data-section-panel="dashboard"].stats-grid .stat small {
        font-size: 11px;
    }

    body.admin-page [data-section-panel="dashboard"] .panel-head,
    body.admin-page [data-section-panel="dashboard"] .panel-head.compact-head {
        gap: 6px;
    }

    body.admin-page [data-section-panel="dashboard"] .panel-head .hint {
        display: block;
        line-height: 1.45;
    }

    body.admin-page [data-section-panel="dashboard"] .panel-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 6px;
    }

    body.admin-page [data-section-panel="dashboard"] .panel-actions > * {
        width: 100%;
        min-width: 0;
        white-space: normal;
    }

    body.admin-page [data-section-panel="dashboard"] .panel-head .panel-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    body.admin-page [data-section-panel="dashboard"] .panel-message {
        padding: 0;
        background: transparent;
    }

    body.admin-page [data-section-panel="dashboard"] .catalog-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin-top: 6px;
    }

    body.admin-page [data-section-panel="dashboard"] .catalog-card {
        padding: 10px;
    }

    body.admin-page [data-section-panel="dashboard"] .voice-upload-row {
        grid-template-columns: minmax(0, 1fr);
    }

    body.admin-page .table-wrap {
        margin-right: -12px;
        padding-bottom: 4px;
    }

    body.admin-page .table-head,
    body.admin-page .erp-table-row {
        font-size: 12px;
    }

    body.admin-page .erp-table-row > .cell-block,
    body.admin-page .table-head > span {
        padding: 8px;
    }

    body.admin-page .job-detail-panel {
        position: fixed;
        left: 12px;
        right: 12px;
        width: auto;
    }
}

/* Final mobile admin model list layout. Connectivity badges can grow after tests,
   so rows become cards and status chips wrap instead of squeezing the viewport. */
@media (max-width: 960px) {
    body.admin-page [data-section-panel="models"].is-active-section > .panel.wide {
        height: auto;
        padding: 10px;
        gap: 8px;
    }

    body.admin-page [data-section-panel="models"] .model-table-wrap {
        width: 100%;
        margin-right: 0 !important;
        overflow: visible !important;
        padding-bottom: 0;
    }

    body.admin-page .model-table-wrap .table-head.model-grid {
        display: none !important;
    }

    body.admin-page #models.table-list {
        display: grid;
        width: 100% !important;
        min-width: 0 !important;
        gap: 10px;
    }

    body.admin-page #models .erp-table-row.model-grid {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 0;
        min-height: 0;
        overflow: hidden !important;
        border: 1px solid #e5e8ef;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
    }

    body.admin-page #models .erp-table-row.model-grid:hover {
        background: #fff;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block {
        display: grid;
        align-content: start;
        gap: 5px;
        min-width: 0;
        padding: 10px !important;
        border-left: 0 !important;
        border-top: 1px solid #edf0f5;
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block:nth-child(-n+2) {
        border-top: 0;
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block:nth-child(odd) {
        border-right: 1px solid #edf0f5;
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block[data-label="模型"],
    body.admin-page #models .erp-table-row.model-grid > .cell-block[data-label="操作"] {
        grid-column: 1 / -1;
        border-right: 0 !important;
    }

    body.admin-page #models .erp-table-row.model-grid .cell-label {
        display: block;
        color: #7b8494;
        font-size: 11px;
        font-weight: 800;
        line-height: 1.2;
    }

    body.admin-page #models .erp-table-row.model-grid .cell-value,
    body.admin-page #models .model-primary,
    body.admin-page #models .model-provider,
    body.admin-page #models .model-meta,
    body.admin-page #models .model-state,
    body.admin-page #models .model-actions {
        display: flex;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 5px;
    }

    body.admin-page #models .model-primary,
    body.admin-page #models .model-meta {
        flex-direction: column;
    }

    body.admin-page #models .model-title,
    body.admin-page #models .model-subtitle,
    body.admin-page #models .model-provider .cell-text,
    body.admin-page #models .model-meta-row,
    body.admin-page #models .model-meta-sub {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.admin-page #models .cell-block[data-label="状态"] .model-state,
    body.admin-page #models .model-state {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 5px !important;
    }

    body.admin-page #models .model-state small {
        display: inline-flex;
        max-width: 100%;
        min-width: 0;
    }

    body.admin-page #models .badge,
    body.admin-page #models .status {
        max-width: 100%;
        min-width: 0;
        min-height: 20px;
        padding: 2px 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
        line-height: 16px;
    }

    body.admin-page #models .model-tags {
        display: flex;
        flex-wrap: wrap !important;
        overflow: visible !important;
        gap: 4px;
    }

    body.admin-page #models .model-grid .btn-group {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    body.admin-page #models .model-grid .btn-group > * {
        width: 100%;
        min-width: 0;
        min-height: 30px;
        justify-content: center;
        white-space: normal;
    }
}

@media (max-width: 520px) {
    body.admin-page #models .erp-table-row.model-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block,
    body.admin-page #models .erp-table-row.model-grid > .cell-block:nth-child(odd) {
        border-right: 0 !important;
    }

    body.admin-page #models .erp-table-row.model-grid > .cell-block:nth-child(2) {
        border-top: 1px solid #edf0f5;
    }

    body.admin-page #models .model-grid .btn-group {
        grid-template-columns: minmax(0, 1fr);
    }
}