/* Responsive rules for tablet and mobile operation. */
/* Large desktop comfort mode: scale typography, spacing, and pane sizes for 2K/4K displays. */
@media (min-width: 1800px) {
  :root {
    --control-h: 44px;
    --fs-2xs: 12px;
    --fs-xs: 13px;
    --fs-sm: 14px;
    --fs-md: 15px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-2xl: 32px;
    --type-number-md: 24px;
    --type-number-lg: 32px;
  }

  body {
    padding: 16px;
  }

  .app-shell {
    grid-template-columns: 332px minmax(920px, 1480px) 420px;
    justify-content: center;
    gap: 28px;
  }

  .center-pane {
    gap: 18px;
    padding: 20px;
  }

  .workspace {
    gap: 28px;
  }

  .center-card,
  .workspace-card {
    padding: 22px;
  }

  .workspace-head {
    padding: 22px 28px;
  }

  .workspace-body {
    gap: 18px;
  }

  .employee-card {
    min-height: 98px;
    padding: 18px 18px 18px 22px;
  }

  .employee-card-top {
    gap: 14px;
  }

  .employee-role-text {
    -webkit-line-clamp: 3;
  }

  .stats-grid {
    gap: 10px;
  }

  .stat-chip {
    min-height: 78px;
    padding: 12px 14px;
  }

  .search-filter-bar {
    gap: 12px;
    margin-bottom: 16px;
  }

  .filter-chip {
    min-height: 36px;
    padding: 0 14px;
  }

  .task-item {
    padding: 18px 18px 16px;
    border-radius: 18px;
  }

  .task-meta-grid,
  .snapshot-summary {
    gap: 14px;
  }

  .snapshot-summary > div {
    min-height: 86px;
  }

  .task-center-toolbar {
    padding: 16px 18px;
  }

  .x-home {
    grid-template-columns: 304px minmax(0, 1fr);
  }

  .x-home-sidebar {
    padding: 18px 14px 14px;
    gap: 16px;
  }

  .x-home-sidebar-item {
    min-height: 40px;
    padding: 0 12px;
  }

  .x-home-history-search {
    min-height: 40px;
    padding: 8px 12px;
  }

  .x-home-agent-workspace .app-shell {
    margin: 0 auto;
  }
}

@media (min-width: 2400px) {
  :root {
    --control-h: 48px;
    --fs-2xs: 13px;
    --fs-xs: 14px;
    --fs-sm: 15px;
    --fs-md: 16px;
    --fs-lg: 19px;
    --fs-xl: 24px;
    --fs-2xl: 36px;
    --type-number-md: 26px;
    --type-number-lg: 36px;
  }

  body {
    padding: 18px;
  }

  .app-shell {
    grid-template-columns: 360px minmax(1040px, 1640px) 456px;
    gap: 32px;
  }

  .center-pane {
    gap: 20px;
    padding: 22px;
  }

  .center-card,
  .workspace-card {
    padding: 24px;
  }

  .workspace-head {
    padding: 24px 30px;
  }

  .employee-card {
    min-height: 108px;
    padding: 20px 20px 20px 24px;
  }

  .task-item {
    padding: 20px 20px 18px;
    border-radius: 20px;
  }

  .task-meta-grid,
  .snapshot-summary {
    gap: 16px;
  }

  .snapshot-summary > div {
    min-height: 92px;
  }

  .filter-chip {
    min-height: 38px;
    padding: 0 16px;
  }

  .x-home {
    grid-template-columns: 340px minmax(0, 1fr);
  }

  .x-home-sidebar {
    padding: 20px 16px 16px;
  }

  .x-home-sidebar-item {
    min-height: 42px;
    padding: 0 14px;
  }

  .x-home-agent-workspace .workspace-body {
    max-width: 1700px;
    margin: 0 auto;
    width: 100%;
  }
}
/* Windowed desktop: keep three panes, but prioritize the center workspace. */
@media (max-width: 1919px){
  .app-shell {
    grid-template-columns: 320px minmax(0, 1fr) 400px;
    gap: 12px;
  }

  .employee-registry,
  .overview-card {
    margin-left: 0;
    margin-right: 0;
  }

  .summary-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .summary-section,
  .summary-hero-card {
    min-height: auto;
  }

  .summary-metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  }

  .summary-context-list {
    height: auto;
  }

  .workspace-head {
    padding: 24px 28px;
  }

  .workspace-body {
    gap: 14px;
  }
}/* Compact desktop: tighter side panes before switching to single-panel mode. */
@media (max-width: 1600px){
  .app-shell {
    grid-template-columns: 300px minmax(0, 1fr) 360px;
  }

  .employee-registry,
  .overview-card {
    margin-left: 0;
    margin-right: 0;
  }

  .workspace-head {
    padding: 22px 24px;
  }

  
}

@media (max-width: 1480px) {.app-shell{
    grid-template-columns: 280px minmax(0, 1fr) 320px;
  }.overview-side-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }.overview-grid,
.config-grid,
.config-managed-grid,
.config-section-grid,
.date-range-summary,
.date-months{
    grid-template-columns: 1fr;
  }.config-managed-overview{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }.summary-grid{
    grid-template-columns: 1fr;
  }.snapshot-summary{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }.summary-metric-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }.workspace-head{
    flex-direction: column;
    align-items: flex-start;
  }.head-action-panel{
    justify-content: flex-start;
  }
}

@media (max-width: 1180px) {.overview-side-grid{
    grid-template-columns: 1fr;
  }.config-managed-overview{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }.employee5-assets-shell{
    grid-template-columns: 1fr;
  }.employee5-gallery-grid{
    grid-template-columns: 1fr;
  }.employee5-asset-thumb-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }.asset-upload-list{
    grid-template-columns: 1fr;
  }.asset-upload-card{
    min-height: 0;
  }.asset-thumb-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }.asset-library-list{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }.task-center-toolbar{
    padding: 14px;
  }.asset-library-actions{
    align-items: stretch;
    flex-direction: column;
  }.asset-library-actions-left,
.asset-library-actions-right{
    width: 100%;
    justify-content: stretch;
  }.asset-library-actions-left button,
.asset-library-actions-right button{
    flex: 1 1 0;
  }
}

@media (max-width: 720px) {.asset-thumb-grid,
.asset-library-list,
.employee5-asset-thumb-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}/* Tablet/mobile foundation: the document scrolls,
not nested full-page panes. */
@media (max-width: 1320px){
  html {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    overflow-x: hidden;
    overflow-y: visible;
  }

  body {
    padding: 12px;
  }

  .x-home {
    grid-template-columns: 1fr;
  }

  .x-home-mobile-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    background: rgba(250, 250, 250, 0.92);
    border-bottom: 1px solid rgba(229, 229, 231, 0.9);
    backdrop-filter: blur(14px);
  }

  .x-home-sidebar {
    display: none;
  }

  .x-home-workspace,
  .x-home-agent-workspace,
  .x-home-assets-workspace {
    grid-column: 1;
  }

  .app-shell {
    height: auto;
    min-height: calc(100vh - 24px);
    grid-template-columns: 1fr;
  }

  .x-home-workspace,
  .x-home-assets-workspace {
    padding-top: 72px;
  }

  

  .summary-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .readiness-kpis {
    grid-template-columns: 1fr;
  }

  .task-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-metric-grid {
    grid-template-columns: 1fr;
  }
}/* Single-panel operation: use bottom navigation instead of stacking all panes. */
@media (max-width: 1320px){
  html {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    overflow-x: hidden;
    overflow-y: visible;
  }

  body {
    padding: 10px;
    padding-bottom: 86px;
  }

  .toast-stack {
    top: 10px;
    right: 10px;
    left: 10px;
    width: auto;
  }

  .app-shell {
    height: auto;
    min-height: calc(100dvh - 96px);
    padding-bottom: 6px;
    overflow: visible;
  }

  .app-shell[data-mobile-view="workspace"],
  .app-shell[data-mobile-view="panel"] {
    height: auto;
    min-height: calc(100dvh - 96px);
  }

  .app-shell {
    min-height: 0;
    display: block;
  }

  .center-pane,
  .workspace {
    height: auto;
    min-height: calc(100dvh - 96px);
    display: none;
  }

  .app-shell[data-mobile-view="panel"] .center-pane,
  .app-shell[data-mobile-view="workspace"] .workspace {
    display: flex;
  }

  .center-pane {
    padding: 12px;
    gap: 12px;
    border-radius: 18px;
    overflow: visible;
    overscroll-behavior: contain;
  }

  .center-card,
  .workspace-card {
    border-radius: 16px;
    padding: 14px;
  }

  .employee-registry {
    flex: 0 0 auto;
    min-height: 0;
  }

  .overview-card {
    flex: 0 0 auto;
    order: 3;
  }

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

  .employee-list {
    min-height: 280px;
    max-height: none;
    flex: 0 0 auto;
    overflow: visible;
  }

  .stat-chip {
    min-height: 56px;
    padding: 9px 8px;
  }

  .stat-chip .value {
    font-size: 18px;
  }

  .employee-card {
    min-height: 76px;
    padding: 14px 14px 14px 18px;
    border-radius: 16px;
  }

  .employee-name {
    font-size: 16px;
  }

  .employee-role {
    font-size: 12px;
  }

  .workspace {
    gap: 12px;
    overflow: visible;
    overscroll-behavior: contain;
  }

  .workspace-head {
    position: relative;
    z-index: 5;
    padding: 14px;
    border-radius: 18px;
    gap: 14px;
  }

  .hero-avatar {
    width: 48px;
    height: 48px;
    margin-right: 12px;
    border-radius: 15px;
    font-size: 19px;
  }

  .workspace-title {
    gap: 8px;
  }

  .workspace-title h2 {
    font-size: 22px;
  }

  .detail-role-row {
    display: grid;
    gap: 4px;
  }

  .head-action-panel {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .header-actions button {
    width: 100%;
    min-height: 42px;
    padding: 0 10px;
    font-size: 13px;
  }

  .workspace-body {
    gap: 12px;
    min-height: auto;
    flex: 0 0 auto;
    overflow: visible;
  }

  .tab-panel-wrap {
    min-height: auto;
    flex: 0 0 auto;
    position: static;
  }

  .tab-panel {
    position: static;
    inset: auto;
    display: none;
    overflow: visible;
  }

  .tab-panel.active {
    display: block;
  }

  .tab-bar {
    flex-wrap: nowrap;
    gap: 18px;
    overflow-x: auto;
    padding: 0 2px;
    scrollbar-width: none;
  }

  .tab-bar::-webkit-scrollbar {
    display: none;
  }

  .tab-button {
    flex: 0 0 auto;
    padding-bottom: 10px;
  }

  .overview-summary-card {
    padding: 14px;
  }

  .summary-grid,
  .summary-metric-grid,
  .asset-grid,
  .result-grid,
  .config-grid,
  .config-section-grid,
  .date-range-summary,
  .date-months {
    grid-template-columns: 1fr;
  }

  .config-section-head {
    display: grid;
    gap: 8px;
  }

  .config-section-head p {
    max-width: none;
    text-align: left;
  }

  .summary-section {
    padding: 14px;
  }

  .summary-status-line,
  .summary-focus,
  .summary-hero-meta,
  .asset-card-top,
  .result-card-top,
  .readiness-hero,
  .task-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .task-center-toolbar {
    gap: 10px;
  }

  .task-filter-chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .task-filter-chips::-webkit-scrollbar {
    display: none;
  }

  .task-context-row {
    gap: 6px;
  }

  .task-meta-grid,
  .snapshot-summary {
    grid-template-columns: 1fr;
  }

  .readiness-kpis {
    grid-template-columns: 1fr;
  }

  .config-shell {
    height: auto;
    min-height: 360px;
    max-height: none;
    overflow: visible;
  }

  .config-form-scroll {
    overflow: visible;
  }

  .config-actions {
    position: static;
    bottom: auto;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
    background: rgba(255, 255, 255, 0.86);
  }

  .config-actions button {
    width: 100%;
    min-height: 42px;
    padding: 0 10px;
    font-size: 13px;
  }

  .prompt-library-row {
    grid-template-columns: 1fr;
  }

  .date-range-panel {
    padding: 14px;
  }

  .date-range-toolbar,
  .date-range-footnote,
  .task-row {
    align-items: stretch;
    flex-direction: column;
  }

  .date-day {
    min-height: 34px;
  }

  .mobile-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(203, 213, 225, 0.86);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(18px);
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .mobile-nav button {
    min-height: 48px;
    border-radius: 16px;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
  }

  .mobile-nav button.active,
  .mobile-nav button.is-active {
    background: var(--brand);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(15, 118, 110, 0.24);
  }

  .mobile-nav-global {
    display: grid !important;
  }

  .mobile-nav-agent {
    left: auto;
    right: 10px;
    bottom: 86px;
    width: min(220px, calc(100vw - 20px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    z-index: 69;
  }

  .x-home-agent-workspace {
    padding-bottom: 148px;
  }

  .x-home-assets-workspace,
  .x-home-workspace {
    padding-bottom: 176px;
  }

  .x-home-assets-head {
    padding: 16px 14px 12px;
    display: grid;
    gap: 12px;
    align-items: stretch;
  }

  .x-home-assets-head-title {
    display: grid;
    gap: 8px;
  }

  .x-home-assets-head h1 {
    font-size: 28px;
    line-height: 1.1;
  }

  .x-home-assets-head-sub {
    font-size: 14px;
    line-height: 1.6;
  }

  .x-home-assets-capacity {
    min-width: 0;
    align-items: stretch;
    gap: 8px;
  }

  .x-home-assets-capacity > span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .x-home-assets-capacity-bar {
    width: 100%;
  }

  .x-home-assets-toolbar {
    padding: 12px 14px;
    display: grid;
    gap: 12px;
    align-items: stretch;
  }

  .x-home-assets-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .x-home-assets-tabs button {
    min-height: 42px;
    padding: 0 10px;
    writing-mode: horizontal-tb !important;
    white-space: nowrap;
    text-align: center;
  }

  .x-home-assets-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
    justify-content: stretch;
  }

  .x-home-assets-filters > * {
    min-width: 0;
  }

  .x-home-assets-filters .x-home-assets-action#xHomeAssetsSelectAll,
  .x-home-assets-tool,
  .x-home-assets-employee-filter {
    width: 100%;
    min-height: 42px;
  }

  .x-home-assets-tool {
    justify-content: center;
  }

  .x-home-assets-selection-bar {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    justify-items: stretch;
  }

  .x-home-assets-selection-bar[hidden] {
    display: none;
  }

  .x-home-assets-selection-bar .x-home-assets-action {
    width: 100%;
    height: 40px;
  }

  .x-home-assets-media-tabs {
    padding: 12px 14px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 8px;
    overflow: visible;
    flex-wrap: wrap;
    scrollbar-width: auto;
  }

  .x-home-assets-media-tabs::-webkit-scrollbar {
    display: none;
  }

  .x-home-assets-media-tabs button {
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
    white-space: nowrap;
    justify-content: center;
  }

  .x-home-assets-pagination {
    padding: 12px 14px;
    display: grid;
    gap: 10px;
    justify-items: stretch;
  }

  .x-home-assets-pagination-summary {
    justify-content: flex-start;
  }

  .x-home-assets-pagination-controls {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .x-home-assets-pagination-controls::-webkit-scrollbar {
    display: none;
  }

  .x-home-assets-page-btn,
  .x-home-assets-page-ellipsis {
    flex: 0 0 auto;
  }

  .x-home-assets-body {
    display: block;
    overflow: visible;
  }

  .x-home-assets-grid {
    padding: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .x-home-assets-detail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 82;
    border-left: 0;
    border-top: 1px solid #e5e7eb;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 36px rgba(15, 23, 42, 0.16);
    max-height: 72dvh;
  }

  .x-home-assets-detail[hidden] {
    display: none;
  }

  .x-home-assets-detail-body {
    overflow: auto;
  }

  .x-home-agent-workspace .center-pane {
    padding: 10px;
    gap: 10px;
  }

  .x-home-agent-workspace .center-card,
  .x-home-agent-workspace .workspace-card {
    padding: 12px;
  }

  .x-home-agent-workspace .workspace-head {
    padding: 12px;
    gap: 12px;
  }

  .x-home-agent-workspace .workspace-title h2 {
    font-size: 20px;
  }

  .x-home-agent-workspace .employee-card.simple {
    min-height: 72px;
    padding: 12px 14px 12px 16px;
  }
}

@media (max-width: 560px) {body{
    padding: 8px;
    padding-bottom: 76px;
  }.app-shell{
    min-height: calc(100dvh - 84px);
  }.center-pane{
    padding: 10px;
    gap: 10px;
  }.center-card,
.workspace-card{
    padding: 12px;
  }.empty{
    min-height: 76px;
    padding: 16px 16px 16px 44px;
    text-align: left;
  }.empty::before{
    left: 16px;
  }.employee-registry{
    min-height: 0;
    margin: 0 4px 8px !important;
  }.overview-card{
    margin: 0 4px !important;
  }.employee-list-head,
.panel-head{
    align-items: flex-start;
    flex-direction: column;
  }.employee-count-head{
    padding: 0 12px !important;
  }.search-filter-bar{
    padding: 0 12px 12px !important;
  }.filter-chips{
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
  }.task-filter-chips{
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
  }.filter-chip{
    flex: 0 0 auto;
  }.stats-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }.employee-list{
    min-height: 230px;
    max-height: none;
    overflow: visible;
    padding: 0 12px 4px !important;
  }.stat-chip{
    min-height: 58px;
  }.snapshot-path-row{
    grid-template-columns: 1fr;
  }.workspace-head{
    padding: 12px;
  }.hero-identity{
    align-items: flex-start;
  }.hero-avatar{
    width: 42px;
    height: 42px;
    margin-right: 10px;
    border-radius: 14px;
    font-size: 17px;
  }.workspace-title h2{
    font-size: 20px;
  }.hero-inline{
    gap: 6px;
  }.badge{
    min-height: 26px;
    padding: 0 8px;
    border-radius: 9px;
    font-size: 11px;
  }.config-actions{
    grid-template-columns: 1fr;
  }.head-action-panel{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }.header-actions button{
    min-height: 40px;
    padding: 0 8px;
    font-size: 12px;
  }.config-form-scroll{
    padding: 12px 12px 4px;
    overflow: visible;
  }.config-section,
.prompt-library-box{
    padding: 14px;
    border-radius: 18px;
  }.config-managed-block-head{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }.config-managed-actions,
.asset-upload-card-actions{
    justify-content: flex-start;
    padding: 0 2px;
  }.config-managed-actions .artifact-link,
.asset-upload-card-actions .artifact-link{
    max-width: 100%;
  }textarea{
    min-height: 150px;
  }.mini-console,
.mono,
.json-box{
    font-size: 11px;
  }.mobile-nav{
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: 18px;
    padding: 7px;
  }.mobile-nav button{
    min-height: 42px;
    font-size: 12px;
  }.mobile-nav-agent{
    bottom: 78px;
    width: min(204px, calc(100vw - 16px));
  }.x-home-assets-head{
    padding: 14px 12px 10px;
  }.x-home-assets-head h1{
    font-size: 24px;
  }.x-home-assets-head-sub{
    font-size: 13px;
  }.x-home-assets-toolbar{
    padding: 10px 12px;
  }.x-home-assets-tabs{
    gap: 6px;
  }.x-home-assets-tabs button{
    min-height: 38px;
    padding: 0 8px;
    font-size: 13px;
  }.x-home-assets-filters{
    grid-template-columns: 1fr 1fr;
  }.x-home-assets-media-tabs{
    padding: 12px 12px;
  }.x-home-assets-pagination{
    padding: 10px 12px;
  }.x-home-assets-grid{
    padding: 12px;
    gap: 10px;
  }.x-home-assets-meta{
    padding: 9px 10px;
  }.x-home-assets-meta strong{
    font-size: 12px;
  }.x-home-assets-meta span{
    font-size: 10px;
  }.x-home-assets-detail{
    max-height: 78dvh;
  }
}

@media (max-width: 560px) and (max-height: 620px) {.overview-card .employee-list-head{
    display: none;
  }.employee-list{
    min-height: 260px;
    max-height: none;
  }.overview-card{
    padding-top: 10px;
  }.stat-chip{
    min-height: 54px;
    padding: 8px 10px;
  }
}/* Desktop full-bleed layout: authenticated workspace fills the viewport with no outer page gutter. */
@media (min-width: 1321px){
  html,
  body {
    width: 100%;
    height: 100%;
  }

  body,
  body.is-authenticated {
    padding: 0 !important;
    margin: 0 !important;
  }

  .app-shell,
  body.is-authenticated .app-shell {
    width: 100%;
    height: 100dvh !important;
    min-height: 100dvh !important;
    grid-template-columns: 362px minmax(0, 1fr) 420px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* 2K屏优化 (1920px - 2560px): 增加内容密度，优化布局 */
@media (min-width: 1920px) {
  .app-shell,
  body.is-authenticated .app-shell {
    grid-template-columns: 400px minmax(0, 1fr) 480px !important;
  }

  .x-home {
    grid-template-columns: 320px minmax(0, 1fr);
  }

  .x-home-sidebar {
    padding: 18px 14px 14px;
  }

  .x-home-workspace {
    max-width: 1400px;
    margin: 0 auto;
  }

  .workspace-head {
    padding: 28px 32px;
  }

  .workspace-body {
    gap: 18px;
  }

  .summary-metric-grid {
    grid-template-columns: repeat(6, minmax(120px, 1fr)) !important;
  }

  .employee-card {
    padding: 18px 18px 18px 22px;
  }

  .overview-summary-card {
    padding: 28px !important;
  }

  .tab-panel > .workspace-card,
  .tab-panel .workspace-card.stretch {
    padding: 28px !important;
  }

  .config-section,
  .prompt-library-box {
    padding: 18px;
  }
}

/* 超大屏优化 (2560px+): 4K/5K显示器 */
@media (min-width: 2560px) {
  .app-shell,
  body.is-authenticated .app-shell {
    grid-template-columns: 440px minmax(0, 1fr) 520px !important;
  }

  .x-home {
    grid-template-columns: 360px minmax(0, 1fr);
  }

  .x-home-workspace {
    max-width: 1600px;
  }

  .workspace-head {
    padding: 32px 36px;
  }

  .summary-metric-grid {
    grid-template-columns: repeat(7, minmax(130px, 1fr)) !important;
  }

  .employee-list {
    font-size: 15px;
  }

  .workspace-title h2 {
    font-size: 32px;
  }
}

/* 小屏优化 (1024px - 1366px): 笔记本电脑 */
@media (min-width: 1024px) and (max-width: 1366px) {
  .x-home {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .x-home-sidebar {
    padding: 12px 8px 8px;
  }

  .x-home-sidebar-brand {
    padding: 6px 8px 8px;
  }

  .x-home-brand-mark {
    width: 36px;
    height: 36px;
  }

  .x-home-sidebar-item {
    min-height: 32px;
    padding: 0 8px;
    font-size: 12px;
  }

  .x-home-sidebar-heading {
    padding: 6px 8px 3px;
    font-size: 10px;
  }

  .x-home-history-search {
    padding: 5px 8px;
    font-size: 11px;
  }

  .x-home-composer {
    padding: 12px;
  }

  .x-home-input {
    font-size: 13px;
  }

  .x-home-quick-actions button {
    padding: 8px 12px;
    font-size: 12px;
  }
}

@media (min-width: 1321px) and (max-width: 1480px) {
  .app-shell {
    grid-template-columns: 300px minmax(0, 1fr) 340px !important;
  }

  .workspace-head {
    padding: 20px 22px;
  }

  .workspace-body {
    gap: 12px;
  }

  .summary-metric-grid {
    grid-template-columns: repeat(4, minmax(100px, 1fr)) !important;
  }

  .employee-card {
    padding: 14px 14px 14px 16px;
  }

  .stat-chip {
    min-height: 64px;
    padding: 10px 12px;
  }
}/* SaaS visual polish: lighter runtime summary,
cleaner asset panel,
tighter terminal and actions. */
.tab-panel-wrap{
  padding-top: 0 !important;
}.tab-bar{
  min-height: 48px !important;
}.tab-button{
  min-height: 48px !important;
  padding-bottom: 12px !important;
}.overview-summary-card{
  padding: 24px !important;
  border: 1px solid rgba(216, 225, 234, 0.92) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045) !important;
}.overview-summary-card .panel-head{
  margin-bottom: 18px !important;
}.summary-grid{
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}.summary-section{
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}.summary-hero-card{
  min-height: 0 !important;
  padding: 18px !important;
  border: 1px solid rgba(183, 231, 222, 0.78) !important;
  background: linear-gradient(180deg, rgba(244, 255, 251, 0.88) 0%, rgba(255, 255, 255, 0.96) 100%) !important;
}.summary-metric-grid{
  grid-template-columns: repeat(5, minmax(112px, 1fr)) !important;
  gap: 10px !important;
}.metric-card{
  min-height: 70px !important;
  height: auto !important;
  align-content: center !important;
  gap: 4px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(226, 232, 240, 0.96) !important;
  background: rgba(248, 250, 252, 0.9) !important;
}.summary-item .label{
  min-height: 0 !important;
  display: block !important;
  white-space: nowrap !important;
}.summary-item .value.value-metric{
  font-size: 24px !important;
  line-height: 1 !important;
}.summary-context-list{
  height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}.summary-context-row{
  min-height: 68px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(226, 232, 240, 0.96) !important;
  background: rgba(248, 250, 252, 0.82) !important;
}.summary-context-row .value.value-time,
.summary-context-row .value.value-compact{
  font-size: 12px !important;
  letter-spacing: 0 !important;
}.tab-panel[data-tab-panel="assets"] .workspace-card.stretch{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}.asset-upload-list{
  display: grid !important;                                               /* 兜底：根定义已经写过，这里再加保险 */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}.asset-upload-card{
  width: auto !important;                                                 /* 让 grid 1fr 自然撑满 */
  min-height: 0 !important;
  padding: 16px !important;
  border: 1px solid #e5e5e7 !important;
  border-radius: var(--x-r-md, 8px) !important;                            /* 给卡片轻微圆角，与站点其他卡片一致 */
  background: #ffffff !important;
  box-shadow: none !important;
}.asset-upload-card.is-cloud,
.asset-upload-card.is-local,
.asset-upload-card.is-empty{
  background: #ffffff !important;
}/* Asset tab must align with the same page padding as overview/config/tasks. */
.tab-panel[data-tab-panel="assets"] > .workspace-card.stretch{
  padding: 24px !important;
}.tab-panel[data-tab-panel="assets"] .asset-center-head,
.tab-panel[data-tab-panel="assets"] /* Workspace page standard v2: remove outer frames; only real content groups keep borders. */
.tab-panel > .workspace-card,
.tab-panel .workspace-card.stretch,
.overview-summary-card,
.config-shell{
  padding: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}.tab-panel[data-tab-panel="config"] > .workspace-card,
.tab-panel[data-tab-panel="tasks"] > .workspace-card,
.tab-panel[data-tab-panel="snapshot"] > .workspace-card,
.tab-panel[data-tab-panel="logs"] > .workspace-card,
.tab-panel[data-tab-panel="assets"] > .workspace-card{
  border: 0 !important;
  background: transparent !important;
}.config-form-scroll{
  padding: 0 !important;
}.config-actions{
  padding: 18px 0 0 !important;
}.tab-panel[data-tab-panel="overview"] .summary-grid,
.tab-panel[data-tab-panel="tasks"] #taskList,
.tab-panel[data-tab-panel="snapshot"] .snapshot-shell,
.tab-panel[data-tab-panel="logs"] .mono,
.tab-panel[data-tab-panel="assets"]