/*
 * Nexus Admin readability baseline.
 *
 * This is the canonical typography and text-contrast layer. The existing component
 * files still own layout, spacing and visual identity; this file deliberately loads
 * last so legacy pixel sizes cannot make operational information unreadable.
 */

:root{
  --type-caption:.875rem;
  --type-small:.9375rem;
  --type-body:1rem;
  --type-control:.9375rem;
  --type-card-title:1.0625rem;
  --type-section-title:1.25rem;
  --type-page-title:2rem;
  --leading-compact:1.3;
  --leading-body:1.5;
  --sidebar-w:15rem;
  --topbar-h:4rem;
  --readable-text:#f4f7fb;
  --readable-text-2:#d6dee7;
  --readable-muted:#a6b2bf;
  --readable-subtle:#93a2b1;
  --readable-disabled:#7f8f9f;
}

html[data-theme="light"]{
  --readable-text:#142236;
  --readable-text-2:#2d4055;
  --readable-muted:#586c81;
  --readable-subtle:#63778c;
  --readable-disabled:#6d7f91;
  --text:#142236;
  --text-2:#2d4055;
  --muted:#586c81;
}

html{
  font-size:16px;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}

html,body,
button,input,select,textarea,option,optgroup,
code,kbd,pre,samp{
  font-family:var(--font-ui)!important;
}

body{
  color:var(--readable-text);
  font-size:var(--type-body);
  line-height:var(--leading-body);
  font-synthesis:none;
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Keep typography readable without scaling the entire application chrome beyond
   the available height. Content styles below provide the readable floor; the
   root only receives a small bump on genuinely large canvases. */
@media (min-width:1400px){
  html{font-size:16px}
}

@media (min-width:1760px){
  html{font-size:16.5px}
}

@media (min-width:2400px){
  html{font-size:17px}
}

@media (min-width:3200px){
  html{font-size:18px}
}

/* Use the full canvas. The old 1500px ceiling centered the dashboard inside an
   ultrawide viewport and produced large dead gutters beside the actual content. */
.main{
  padding:1rem clamp(1rem,1.35vw,2rem) 2rem!important;
}
.view,
.view.active{
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
}

@media (min-width:1440px){
  .main{
    padding-top:1.25rem!important;
    padding-bottom:2.5rem!important;
  }
  .metric-grid,
  .ov-grid,
  .bottom-grid{
    gap:1rem!important;
    margin-bottom:1rem!important;
  }
  .metric-card{
    min-height:6.5rem!important;
    padding:1rem!important;
    gap:.875rem!important;
  }
  .metric-icon{
    width:2.75rem!important;
    height:2.75rem!important;
    border-radius:.75rem!important;
  }
  .metric-icon svg{
    width:1.375rem!important;
    height:1.375rem!important;
  }
  .panel-head{
    height:3.125rem!important;
    padding-inline:1rem!important;
  }
  .worker-grid{
    gap:.75rem!important;
    padding:.875rem!important;
  }
  .worker-card{
    padding:.875rem!important;
  }
}

@media (max-width:1100px){
  :root{--sidebar-w:72px}
}

/* Page hierarchy */
.page-head h1{
  color:var(--readable-text)!important;
  font-size:var(--type-page-title)!important;
  line-height:1.15!important;
  font-weight:750!important;
}
.page-head p{
  color:var(--readable-muted)!important;
  font-size:var(--type-small)!important;
  line-height:var(--leading-body)!important;
}
.topbar-title strong{
  color:var(--readable-text)!important;
  font-size:var(--type-card-title)!important;
  font-weight:700!important;
}
.topbar-title span,
.profile-copy span,
.coordinator-connection-status{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  line-height:var(--leading-compact)!important;
}
.panel-head h2,
.settings-head h3,
.help-section-title{
  color:var(--readable-text)!important;
  font-size:var(--type-section-title)!important;
  line-height:var(--leading-compact)!important;
  font-weight:700!important;
}
.text-link{
  font-size:var(--type-small)!important;
  font-weight:650!important;
}
.app-empty-copy strong,
.machine-list-empty-state .app-empty-copy strong{
  color:var(--readable-text-2)!important;
  font-size:var(--type-card-title)!important;
  line-height:var(--leading-compact)!important;
  font-weight:700!important;
}
.app-empty-copy span,
.machine-list-empty-state .app-empty-copy span{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  line-height:var(--leading-body)!important;
}
.coordinator-info-title{
  color:var(--readable-text)!important;
  font-size:var(--type-section-title)!important;
  line-height:var(--leading-compact)!important;
}
.profile-copy strong,
.notification-head strong,
.account-section-copy strong,
.account-theme-copy strong,
.account-utility-copy strong{
  color:var(--readable-text-2)!important;
  font-size:var(--type-small)!important;
  line-height:var(--leading-compact)!important;
}
.notification-head span,
.notification-review-empty span,
.account-section-copy span,
.account-field label,
.account-theme-copy span,
.account-utility-copy span{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  line-height:var(--leading-body)!important;
}
.notification-review-empty strong,
.account-field strong{
  color:var(--readable-text-2)!important;
  font-size:var(--type-small)!important;
  line-height:var(--leading-compact)!important;
}

/* Sidebar information used a separate 6–10px scale. Keep its hierarchy compact,
   but make every operational value readable at the same distance as main content. */
.sidebar{
  padding-inline:.75rem!important;
  padding-bottom:.75rem!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.nav{
  gap:.3125rem!important;
  padding-block:.75rem!important;
}
.nav-btn{
  min-height:2.75rem!important;
  height:auto!important;
  padding-inline:.8125rem!important;
}
.sidebar-coordinator-copy label,
.sidebar-coordinator-detail label,
.sidebar-operational-copy label,
.sidebar-status-kicker{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  line-height:1.2!important;
  font-weight:700!important;
  letter-spacing:.025em!important;
}
.sidebar-coordinator-copy strong,
.sidebar-coordinator-detail strong,
.sidebar-coordinator-detail>div>strong,
.sidebar-operational-copy>span,
.sidebar-coordinator-detail>div>span{
  color:var(--readable-text-2)!important;
  font-size:var(--type-small)!important;
  line-height:var(--leading-compact)!important;
}
.sidebar-coordinator-state,
.sidebar-health-badge{
  font-size:var(--type-caption)!important;
  line-height:1.2!important;
  font-weight:700!important;
}
.sidebar-operational-copy strong{
  color:var(--readable-text)!important;
  font-size:1.25rem!important;
  line-height:1.1!important;
}
.sidebar-operational-copy strong small,
.sidebar-operational-top>b{
  font-size:var(--type-small)!important;
  line-height:1.2!important;
}
.sidebar-coordinator-card{
  padding:.75rem!important;
}
.sidebar-operational-card{
  min-height:4rem!important;
  padding:.625rem .75rem!important;
}
@media (max-height:820px){
  .brand{min-height:3.5rem!important;height:3.5rem!important}
  .nav{gap:.2rem!important;padding-block:.4rem!important}
  .nav-btn{min-height:2.45rem!important}
  .coordinator-info-card{padding:.5rem!important}
  .coordinator-info-title{padding-bottom:.4rem!important}
  .coordinator-info-list{gap:.3rem!important;margin-top:.4rem!important}
  .coordinator-info-item{min-height:3rem!important;padding:.35rem .45rem!important}
}

/* Navigation and global controls */
.nav-btn{
  color:var(--readable-text-2);
  font-size:var(--type-body)!important;
  line-height:1.2!important;
  font-weight:600!important;
}
.nav-badge,
.machine-pending-folder-badge{
  font-size:var(--type-caption)!important;
  font-weight:700!important;
}
.btn,
.machine-admin-btn,
.machines-add-worker-btn,
#view-workers .machine-admin-btn,
#view-workers .machines-add-worker-btn,
.machine-modal-action,
.machine-confirm-btn,
.team-modal-btn,
.worker-pairing-btn,
.team-permission-bulk-btn,
.theme-choice,
.account-menu button,
.notification-menu button{
  font-size:var(--type-control)!important;
  line-height:1.2!important;
  font-weight:650!important;
}
.search-field input,
.machines-search input,
.machines-search-key,
.shared-folder-search input,
.smart-box input,
.tag-add-row input,
.team-add-input-wrap input,
.team-permission-search input,
.input,
textarea,
select{
  color:var(--readable-text)!important;
  font-size:var(--type-body)!important;
  line-height:1.4!important;
}
#view-workers .machines-search input,
#view-folders .shared-folder-search input,
#view-folders .folder-filter-select select,
#view-workers .machines-state-filter select{
  color:var(--readable-text)!important;
  font-size:var(--type-body)!important;
  line-height:1.4!important;
}
:where(input,textarea)::placeholder{
  color:var(--readable-disabled)!important;
  opacity:1!important;
}
.select,
.media-style-native-select,
.multi-select-placeholder,
.multi-select-option,
.segmented-control button{
  font-size:var(--type-control)!important;
  line-height:1.25!important;
  font-weight:600!important;
}
#view-folders .media-style-native-select,
#view-workers .media-style-native-select,
#view-folders .multi-select-option,
#view-workers .multi-select-option,
#view-folders .multi-select-placeholder,
#view-workers .multi-select-placeholder{
  font-size:var(--type-control)!important;
  line-height:1.25!important;
  font-weight:600!important;
}

/* Reusable operational text */
.status,
.folder-state,
#view-folders .folder-state,
#view-folders .folder-process-state,
#view-folders .folder-process-indicator,
.machine-state-badge,
#view-workers .machine-page-status,
.review-status-chip,
.media-list-status,
.processing-status,
.overview-render-status,
.shared-folder-modal-status,
.machine-detail-header-status{
  font-size:var(--type-caption)!important;
  line-height:1.2!important;
  font-weight:700!important;
}
.data-table th,
.folder-table th{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  line-height:1.25!important;
  font-weight:700!important;
}
.data-table td,
.folder-table td{
  color:var(--readable-text-2);
  font-size:var(--type-small)!important;
  line-height:1.4!important;
}

/* Overview */
.metric-copy label{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  font-weight:650!important;
}
.metric-copy strong{
  color:var(--readable-text)!important;
  font-size:1.5rem!important;
  line-height:1.1!important;
  font-weight:750!important;
}
#view-overview .metric-copy strong{
  color:var(--readable-text)!important;
  font-size:1.5rem!important;
  line-height:1.15!important;
  font-weight:750!important;
}
#view-overview .metric-storage .metric-copy strong{
  font-size:1.25rem!important;
}
.metric-copy span,
.metric-status,
.review-copy span,
.review-copy small,
.overview-render-editor,
.overview-render-time,
.overview-render-progress-head span{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  line-height:var(--leading-compact)!important;
}
.review-copy strong,
.overview-processing-table .render-editor-name,
.overview-render-target strong{
  color:var(--readable-text-2)!important;
  font-size:var(--type-small)!important;
  line-height:var(--leading-compact)!important;
  font-weight:650!important;
}

/* Machines */
.machine-page-name-row h3,
#view-workers .machine-page-name-row h3,
.machine-page-identity h3,
.machine-name-line strong,
.machine-detail-title strong{
  color:var(--readable-text)!important;
  font-size:var(--type-section-title)!important;
  line-height:var(--leading-compact)!important;
  font-weight:700!important;
}
.machine-page-os,
.machine-page-role,
.machine-page-foot,
.machine-page-property label,
#view-workers .machine-page-os,
#view-workers .machine-page-role,
#view-workers .machine-page-foot,
#view-workers .machine-page-property label,
#view-workers .machine-page-property>div>span,
.machine-detail-info-card label,
.machine-detail-summary-card label,
#machineDetailOverlay .machine-detail-info-card label,
#machineDetailOverlay .machine-detail-summary-card label,
#machineDetailOverlay .hardware-copy label,
.hardware-copy label,
.machine-approval-copy span{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  line-height:var(--leading-compact)!important;
}
.machine-page-property strong,
.machine-page-foot-meta,
#view-workers .machine-page-property strong,
#view-workers .machine-page-foot-meta,
.hardware-copy strong,
.machine-detail-info-card strong,
.machine-detail-summary-card strong,
#machineDetailOverlay .hardware-copy strong,
#machineDetailOverlay .machine-detail-info-card strong,
#machineDetailOverlay .machine-detail-summary-card strong,
.machine-approval-copy strong{
  color:var(--readable-text-2)!important;
  font-size:var(--type-small)!important;
  line-height:var(--leading-compact)!important;
}

/* Shared folders */
.folder-name-copy strong,
#view-folders .folder-name-copy strong,
.machine-item-copy strong,
#view-folders .machine-item-copy strong,
.shared-folder-modal-title strong{
  color:var(--readable-text)!important;
  font-size:var(--type-card-title)!important;
  line-height:var(--leading-compact)!important;
  font-weight:700!important;
}
.folder-name-copy span,
.machine-item-copy span,
.folder-visual-stat label,
.folder-stat-copy label,
.folder-column-title,
#view-folders .folder-name-copy span,
#view-folders .machine-item-copy span,
#view-folders .folder-visual-stat label,
#view-folders .folder-stat-copy label,
#view-folders .folder-column-title,
#view-folders .folder-header-pending-copy small,
#view-folders .folder-header-pending-label,
.shared-folder-modal-title span{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  line-height:var(--leading-compact)!important;
}
.folder-visual-stat strong,
.folder-stat-copy strong{
  color:var(--readable-text-2)!important;
  font-size:var(--type-small)!important;
}
#view-folders .folder-visual-stat strong,
#view-folders .folder-stat-copy strong,
#view-folders .folder-header-pending-copy strong,
#view-folders .folder-header-pending-count{
  color:var(--readable-text-2)!important;
  font-size:var(--type-small)!important;
  line-height:var(--leading-compact)!important;
}

/* Media */
.media-body strong,
#view-media .media-list-file strong,
.media-modal-title strong{
  color:var(--readable-text)!important;
  font-size:var(--type-card-title)!important;
  line-height:var(--leading-compact)!important;
  font-weight:700!important;
}
.media-card-info span,
#view-media .media-list-file small,
.media-modal-title span,
.meta-section-head span,
.meta-item label,
.meta-item span,
#view-media .media-list-meta label{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  line-height:var(--leading-compact)!important;
}
.origin,
.meta-tag{
  font-size:var(--type-caption)!important;
  line-height:1.2!important;
  font-weight:700!important;
}
.meta-section-head strong,
.meta-item strong,
#view-media .media-list-meta strong{
  color:var(--readable-text-2)!important;
  font-size:var(--type-small)!important;
  line-height:var(--leading-compact)!important;
}

/* Reviews */
#view-reviews .review-list-file strong,
#view-reviews .review-grid-file-name,
.review-modal-title strong{
  color:var(--readable-text)!important;
  font-size:var(--type-card-title)!important;
  line-height:var(--leading-compact)!important;
  font-weight:700!important;
}
#view-reviews .review-list-file small,
#view-reviews .review-list-meta label,
#view-reviews .review-grid-meta-item label,
.review-file-item label,
.review-person-card label,
.review-comment-head label,
.review-modal-title span{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  line-height:var(--leading-compact)!important;
}
#view-reviews .review-list-meta strong,
#view-reviews .review-grid-meta-item strong,
.review-file-item strong,
.review-person-card strong{
  color:var(--readable-text-2)!important;
  font-size:var(--type-small)!important;
  line-height:var(--leading-compact)!important;
}
.review-comment-block textarea{
  font-size:var(--type-body)!important;
}

/* The overview previously had page-ID selectors that overrode the shared rules
   above and reduced the most useful operational details to 7.8–10px. */
#view-overview .metric-copy label,
#view-overview .metric-folders .metric-copy label,
#view-overview .metric-status,
#view-overview .overview-active-editor,
#view-overview .overview-machine-meta-row .worker-system-copy span,
#view-overview .overview-machine-meta-row .worker-mini-stat label,
#view-overview .overview-render-copy>span,
#view-overview .overview-render-copy small,
#view-overview .overview-render-progress>small,
#view-overview .overview-render-progress-head span,
#view-overview .overview-review-edited-by{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  line-height:var(--leading-compact)!important;
}
#view-overview .overview-processing-table .processing-status,
#view-overview #overviewFolderTableWrap .folder-state,
#view-overview .overview-render-status{
  font-size:var(--type-caption)!important;
  line-height:1.2!important;
  font-weight:700!important;
}
#view-overview .overview-processing-table .render-file-cell>span.processing-job-meta,
#view-overview .overview-render-progress-head strong{
  color:var(--readable-text-2)!important;
  font-size:var(--type-small)!important;
  line-height:var(--leading-compact)!important;
}
#view-overview #overviewFolderTableWrap .data-table th{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  line-height:1.25!important;
  font-weight:700!important;
}

/* Team */
#view-team .team-identity>strong,
.team-detail-title strong,
.team-add-title strong{
  color:var(--readable-text)!important;
  font-size:var(--type-card-title)!important;
  line-height:var(--leading-compact)!important;
  font-weight:700!important;
}
#view-team .team-email,
#view-team .team-meta label,
.team-detail-title div>span,
.team-add-title div>span,
.team-detail-info-card label,
.team-detail-status-card label,
.team-permission-copy small,
.team-add-field>span,
.team-field-error{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  line-height:var(--leading-compact)!important;
}
#view-team .team-meta strong,
.team-detail-info-card strong,
.team-detail-status-card strong,
.team-permission-copy strong{
  color:var(--readable-text-2)!important;
  font-size:var(--type-small)!important;
  line-height:var(--leading-compact)!important;
}

/* Processing */
#view-processing .processing-kind strong,
#view-processing .processing-target strong{
  color:var(--readable-text)!important;
  font-size:var(--type-card-title)!important;
  line-height:var(--leading-compact)!important;
  font-weight:700!important;
}
#view-processing .processing-target span,
#view-processing .processing-worker,
#view-processing .processing-time,
#view-processing .render-editor-name,
#view-processing .render-progress-head span{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  line-height:var(--leading-compact)!important;
}
#view-processing .processing-type-badge,
#view-processing .processing-progress strong{
  font-size:var(--type-small)!important;
  line-height:var(--leading-compact)!important;
}

/* Settings, Help and Coordinator summary */
#view-settings .settings-tab,
.setting-row strong,
.help-info-card strong,
.help-topic strong{
  color:var(--readable-text-2)!important;
  font-size:var(--type-small)!important;
  line-height:var(--leading-compact)!important;
}
.settings-head p,
.setting-row span,
.help-info-card label,
.help-info-card p,
.help-topic p,
.help-bullet,
.help-note{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  line-height:var(--leading-body)!important;
}
.coordinator-info-copy .coordinator-primary-value{
  font-size:var(--type-card-title)!important;
}
.coordinator-info-copy .coordinator-info-number{
  font-size:1.5rem!important;
}
.coordinator-info-copy .coordinator-storage-value,
.coordinator-info-copy .coordinator-render-value{
  font-size:1.125rem!important;
}

/* Settings is assembled dynamically and historically carried a separate 7-12px
   scale. Keep every tab, field, storage value and network action on the same
   readable type rhythm as the rest of the application. */
#view-settings .settings-tab{
  min-height:2.75rem!important;
  height:auto!important;
  padding:.625rem .75rem!important;
  font-size:var(--type-body)!important;
}
#view-settings .settings-head{
  min-height:4rem!important;
  padding:1rem 1.125rem!important;
}
#view-settings .setting-row,
#view-settings .settings-password{
  padding:1rem 1.125rem!important;
}
#view-settings .setting-row strong,
#view-settings .settings-password-copy strong,
#view-settings .proxy-storage-card-copy>strong,
#view-settings .proxy-storage-card-title>div>strong,
#view-settings .settings-network-copy code{
  color:var(--readable-text)!important;
  font-size:var(--type-body)!important;
  line-height:var(--leading-compact)!important;
}
#view-settings .setting-row span,
#view-settings .settings-password-copy small,
#view-settings .settings-password-status,
#view-settings .proxy-storage-eyebrow,
#view-settings .proxy-resolution-control>small,
#view-settings .proxy-storage-usage span,
#view-settings .proxy-storage-path-row>span,
#view-settings .proxy-storage-error,
#view-settings .settings-network-copy>span,
#view-settings .settings-network-copy-status,
#view-settings .settings-network-error{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  line-height:var(--leading-body)!important;
}
#view-settings .proxy-resolution-picker>summary,
#view-settings .proxy-resolution-options button,
#view-settings .proxy-resolution-picker-unavailable,
#view-settings .settings-network-copy-button{
  min-height:2.625rem!important;
  height:auto!important;
  font-size:var(--type-control)!important;
  line-height:1.2!important;
}
#view-settings .proxy-resolution-control,
#view-settings .proxy-resolution-picker,
#view-settings .proxy-resolution-picker-unavailable{
  min-width:10rem!important;
  width:10rem!important;
}
#view-settings .proxy-storage-usage strong{
  font-size:1.25rem!important;
  line-height:1.2!important;
}
#view-settings .proxy-storage-path-row{
  min-height:3rem!important;
  padding:.75rem!important;
}
#view-settings .proxy-storage-path-row code{
  font-size:var(--type-small)!important;
  line-height:var(--leading-body)!important;
}
#view-settings .settings-network-card{
  min-height:7rem!important;
}
#view-settings .settings-network-copy-button{
  min-width:6.5rem!important;
  padding:.625rem 1rem!important;
}

/* Drawers, modals and confirmations */
.drawer-head strong,
.modal-head strong,
.worker-pairing-title strong,
#workerPairingOverlay .worker-pairing-title strong,
#machineDetailOverlay .machine-detail-title strong,
.machine-confirm-copy h2,
#machineConfirmOverlay .machine-confirm-copy h2,
.team-create-confirm-dialog .machine-confirm-copy h2{
  color:var(--readable-text)!important;
  font-size:var(--type-section-title)!important;
  line-height:var(--leading-compact)!important;
  font-weight:700!important;
}
.drawer-body,
.modal-body,
.machine-confirm-copy p,
#machineConfirmOverlay .machine-confirm-copy p,
.team-create-confirm-dialog .machine-confirm-copy p{
  color:var(--readable-text-2)!important;
  font-size:var(--type-small)!important;
  line-height:var(--leading-body)!important;
}
.machine-confirm-kicker,
#machineConfirmOverlay .machine-confirm-kicker,
.worker-pairing-kicker,
#workerPairingOverlay .worker-pairing-kicker,
.worker-pairing-code-label,
#workerPairingOverlay .worker-pairing-code-label,
.shared-folder-confirm-kicker{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  line-height:var(--leading-compact)!important;
  font-weight:700!important;
}

/* Authentication uses the same type scale as the application. The legacy login
   rules are intentionally fixed in pixels, so they need explicit normalization
   to remain comfortably readable on high-DPI and large desktop displays. */
.auth-bootstrap strong{
  color:var(--readable-text-2)!important;
  font-size:var(--type-small)!important;
  line-height:var(--leading-compact)!important;
}
.login-card{
  width:min(29.375rem,100%)!important;
  padding:1.875rem 2rem 2rem!important;
}
.login-brand{
  min-height:4.375rem!important;
}
.login-logo{
  width:min(15.5rem,72vw)!important;
  max-height:4.875rem!important;
}
.login-heading{
  margin-top:1.875rem!important;
}
.login-heading h1{
  color:var(--readable-text)!important;
  font-size:1.9375rem!important;
  line-height:1.15!important;
}
.login-heading p{
  max-width:22rem;
  color:var(--readable-muted)!important;
  font-size:var(--type-small)!important;
  line-height:var(--leading-body)!important;
}
.login-form{
  margin-top:1.875rem!important;
  gap:1.125rem!important;
}
.login-field>span{
  color:var(--readable-text-2)!important;
  font-size:var(--type-small)!important;
  line-height:var(--leading-compact)!important;
}
.login-input-wrap,
.login-input-wrap input{
  height:3.125rem!important;
}
.login-input-wrap input{
  color:var(--readable-text)!important;
  font-size:var(--type-body)!important;
  line-height:var(--leading-compact)!important;
}
.login-input-wrap input::placeholder{
  color:var(--readable-subtle)!important;
}
.login-field-error,
.login-form-error{
  font-size:var(--type-caption)!important;
  line-height:var(--leading-body)!important;
}
.login-submit{
  min-height:3rem!important;
  font-size:var(--type-body)!important;
  line-height:1!important;
}
html[data-theme="light"] .login-heading h1,
html[data-theme="light"] .login-input-wrap input{
  color:var(--readable-text)!important;
}
html[data-theme="light"] .login-heading p,
html[data-theme="light"] .login-input-wrap input::placeholder{
  color:var(--readable-muted)!important;
}
html[data-theme="light"] .login-field>span{
  color:var(--readable-text-2)!important;
}

/* Legacy microcopy floor. These labels are meaningful data, not decoration, and
   must not collapse to the old 6.5–10px values on compact page variants. */
body .machine-role-pill,
body .machine-folder-count,
body .folder-summary-chip,
body .folder-summary-chip strong,
body .machine-item-folder-badge,
body .machine-panel-count,
body .machine-section-count,
body .multi-select-count,
body .coordinator-status-badge,
body .worker-state-chip,
body .media-stage-badge,
body .media-status-pill,
body .media-format-badge,
body .media-status-badge,
body .proxy-stage-badge,
body .notification-review-state,
body .review-grid-type,
body .review-preview-badge{
  font-size:var(--type-caption)!important;
  line-height:1.2!important;
  font-weight:700!important;
}
#view-folders .machine-section-count,
#view-folders .machine-panel-count,
#view-folders .folder-summary-chip,
#view-folders .folder-summary-chip strong,
#view-folders .shared-folder-workspace:not(.machine-collapsed) .machine-role-pill,
#view-folders .shared-folder-workspace:not(.machine-collapsed) .machine-folder-count,
#view-folders .shared-folder-workspace:not(.machine-collapsed) .machine-state-badge,
#view-folders .shared-folder-workspace.machine-collapsed .machine-item-folder-badge{
  font-size:var(--type-caption)!important;
  line-height:1.2!important;
  font-weight:700!important;
}

/* Shared-folder machine cards: reserve the full information column for the host
   name, then stack connectivity and pending approval state underneath it. */
#view-folders .shared-folder-workspace:not(.machine-collapsed) .machine-item{
  min-height:7rem!important;
  padding:.75rem!important;
  display:grid!important;
  grid-template-columns:3rem minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  grid-template-areas:
    "machineIcon machineInfo"
    ". machineStatus"!important;
  column-gap:.75rem!important;
  row-gap:.625rem!important;
  align-items:start!important;
}
#view-folders .shared-folder-workspace:not(.machine-collapsed) .machine-item-icon{
  grid-area:machineIcon!important;
  align-self:start!important;
}
#view-folders .shared-folder-workspace:not(.machine-collapsed) .machine-item-copy{
  grid-area:machineInfo!important;
  width:100%!important;
  min-width:0!important;
  align-self:start!important;
}
#view-folders .machine-item-name{
  width:100%!important;
  overflow:visible!important;
  color:var(--readable-text)!important;
  font-size:var(--type-card-title)!important;
  line-height:var(--leading-compact)!important;
  font-weight:700!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  text-overflow:clip!important;
}
#view-folders .machine-item-status-stack{
  grid-area:machineStatus;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.375rem;
}
#view-folders .machine-item-status-stack .machine-state-badge{
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
  min-height:1.75rem!important;
  padding-inline:.625rem!important;
  font-size:var(--type-caption)!important;
}
#view-folders .machine-item-status-stack .machine-pending-folder-badge{
  width:max-content!important;
  max-width:100%!important;
  min-height:1.75rem!important;
  height:auto!important;
  padding:.25rem .625rem!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:.375rem!important;
  font-size:var(--type-caption)!important;
  line-height:1.2!important;
  white-space:normal!important;
}
#view-folders .machine-item-status-stack .machine-pending-folder-badge svg{
  width:.875rem;
  height:.875rem;
  flex:0 0 .875rem;
}
#view-folders .shared-folder-workspace.machine-collapsed .machine-item-status-stack{
  display:none!important;
}

/* Overview metrics keep all five operational signals while giving each one a
   stronger visual hierarchy. The lower Machines panel remains intentionally
   removed, so Shared Folders owns the full summary row below. */
#view-overview .metric-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.4fr)!important;
  gap:1rem!important;
}
#view-overview .metric-card{
  --metric-accent:#8b5cf6;
  position:relative;
  min-width:0!important;
  min-height:8rem!important;
  padding:1.125rem!important;
  display:grid!important;
  grid-template-columns:3rem minmax(0,1fr)!important;
  align-items:center!important;
  gap:1rem!important;
  overflow:hidden;
  border-radius:.875rem!important;
  background:
    radial-gradient(circle at 8% 0%,color-mix(in srgb,var(--metric-accent) 10%,transparent),transparent 42%),
    linear-gradient(145deg,rgba(15,24,34,.99),rgba(8,15,22,.99))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 .75rem 2rem rgba(0,0,0,.10);
}
#view-overview .metric-card::before{
  content:"";
  position:absolute;
  top:0;
  left:1.125rem;
  right:1.125rem;
  height:2px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,transparent,var(--metric-accent),transparent);
  opacity:.7;
}
#view-overview .metric-media{--metric-accent:#9b62f3}
#view-overview .metric-folders{--metric-accent:#4ab6f2}
#view-overview .metric-machines{--metric-accent:#61d788}
#view-overview .metric-reviews{--metric-accent:#efbd50}
#view-overview .metric-storage{--metric-accent:#44b7f2}
#view-overview .metric-icon{
  width:3rem!important;
  height:3rem!important;
  min-width:3rem!important;
  min-height:3rem!important;
  border-radius:.875rem!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 .5rem 1.25rem rgba(0,0,0,.12);
}
#view-overview .metric-icon svg{
  width:1.375rem!important;
  height:1.375rem!important;
}
#view-overview .metric-copy{
  min-width:0!important;
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:.25rem!important;
  direction:ltr!important;
  text-align:center!important;
}
#view-overview .metric-copy>label,
#view-overview .metric-copy>strong,
#view-overview .metric-copy>span{
  align-self:flex-start!important;
  justify-self:start!important;
  text-align:left!important;
}
#view-overview .metric-copy label,
#view-overview .metric-folders .metric-copy label{
  color:var(--readable-text-2)!important;
  font-size:1rem!important;
  line-height:1.2!important;
  font-weight:700!important;
  letter-spacing:.005em!important;
}
#view-overview .metric-copy strong,
#view-overview .metric-storage .metric-copy>strong{
  margin:0!important;
  color:var(--metric-accent)!important;
  font-size:1.75rem!important;
  line-height:1.05!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
}
#view-overview .metric-status{
  min-height:1.625rem!important;
  height:auto!important;
  margin:.125rem 0 0!important;
  padding:.25rem .625rem!important;
  font-size:var(--type-caption)!important;
  line-height:1.15!important;
}
#view-overview .metric-card:not(.metric-machines):not(.metric-reviews) .metric-copy::after{
  display:none!important;
}
#view-overview .metric-storage{
  grid-template-columns:4.5rem minmax(0,1fr)!important;
  gap:.875rem!important;
}
#view-overview .storage-gauge{
  --storage-gauge-color:#49d8ee;
  --storage-gauge-color-end:#238cf3;
  position:relative;
  width:4.5rem;
  height:4.5rem;
  display:grid;
  place-items:center;
  color:var(--storage-gauge-color);
  filter:drop-shadow(0 .5rem 1rem rgba(24,150,190,.13));
}
#view-overview .storage-gauge.warning{
  --storage-gauge-color:#ffd56a;
  --storage-gauge-color-end:#f29f38;
}
#view-overview .storage-gauge.critical{
  --storage-gauge-color:#ff9a73;
  --storage-gauge-color-end:#ff5570;
}
#view-overview .storage-gauge.unavailable{
  --storage-gauge-color:var(--readable-disabled);
  --storage-gauge-color-end:var(--readable-disabled);
  opacity:.72;
}
#view-overview .storage-gauge svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
#view-overview .storage-gauge-gradient-start{
  stop-color:var(--storage-gauge-color);
}
#view-overview .storage-gauge-gradient-end{
  stop-color:var(--storage-gauge-color-end);
}
#view-overview .storage-gauge-track,
#view-overview .storage-gauge-track-cap{
  fill:rgba(128,151,172,.14);
}
#view-overview .storage-gauge-value,
#view-overview .storage-gauge-value-cap{
  fill:url(#overviewStorageGaugeGradient);
  filter:drop-shadow(0 2px 4px color-mix(in srgb,var(--storage-gauge-color) 35%,transparent));
}
#view-overview .storage-gauge-value{
  transition:d .35s ease;
}
#view-overview .storage-gauge-copy{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:translateY(-.05rem);
}
#view-overview .storage-gauge-copy strong{
  color:var(--readable-text)!important;
  font-size:1rem!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:-.025em!important;
}
#view-overview .storage-gauge-copy small{
  margin-top:.2rem;
  color:var(--readable-muted)!important;
  font-size:.625rem!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:.06em;
  text-transform:uppercase;
}
#view-overview .metric-storage .storage-metric-copy>strong{
  max-width:100%;
  font-size:1.25rem!important;
  white-space:nowrap!important;
}
#view-overview .storage-metric-caption{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  line-height:1.2!important;
  font-weight:600!important;
}
#view-overview .bottom-grid{
  grid-template-columns:minmax(0,1fr)!important;
}
@media (max-width:1350px){
  #view-overview .metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #view-overview .metric-storage{
    grid-column:span 2!important;
  }
}
@media (max-width:620px){
  #view-overview .metric-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #view-overview .metric-storage{
    grid-column:span 1!important;
  }
}

/* AI capability is an operational state, not footer microcopy. */
#view-workers .machine-ai-state{
  min-height:2rem!important;
  padding:.375rem .75rem!important;
  border:1px solid rgba(166,181,196,.18)!important;
  border-radius:.625rem!important;
  color:var(--readable-text-2)!important;
  background:rgba(147,162,177,.08)!important;
  font-size:var(--type-caption)!important;
  line-height:1.2!important;
  font-weight:700!important;
}
#view-workers .machine-ai-state svg{
  width:1rem!important;
  height:1rem!important;
  flex:0 0 1rem!important;
}
#view-workers .machine-ai-state.enabled{
  color:#91e3b2!important;
  border-color:rgba(82,210,139,.28)!important;
  background:rgba(65,190,124,.11)!important;
}
#view-workers .machine-ai-state.disabled{
  color:#f2ca78!important;
  border-color:rgba(241,184,66,.28)!important;
  background:rgba(241,184,66,.10)!important;
}
html[data-theme="dark"] #view-workers .machine-ai-state.disabled{
  color:#f2ca78!important;
  border-color:rgba(241,184,66,.28)!important;
  background:rgba(241,184,66,.10)!important;
}

/* Light overview cards use a genuinely light surface instead of inheriting the
   dark card background while receiving the light theme's dark typography. */
html[data-theme="light"] #view-overview .metric-card{
  border-color:color-mix(in srgb,var(--metric-accent) 20%,#cfdbe5)!important;
  background:
    radial-gradient(circle at 7% 0%,color-mix(in srgb,var(--metric-accent) 12%,transparent),transparent 44%),
    linear-gradient(145deg,#ffffff,#f5f8fb 90%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 .75rem 1.75rem rgba(39,58,76,.08)!important;
}
html[data-theme="light"] #view-overview .metric-copy label{
  color:#43576b!important;
}
html[data-theme="light"] #view-overview .metric-copy>strong,
html[data-theme="light"] #view-overview .metric-storage .metric-copy>strong{
  color:color-mix(in srgb,var(--metric-accent) 78%,#17324b)!important;
}
html[data-theme="light"] #view-overview .storage-gauge-copy strong{
  color:#20364b!important;
}
html[data-theme="light"] #view-overview .storage-gauge-copy small,
html[data-theme="light"] #view-overview .storage-metric-caption{
  color:#687b8e!important;
}
html[data-theme="light"] #view-overview .storage-gauge-track,
html[data-theme="light"] #view-overview .storage-gauge-track-cap{
  fill:rgba(82,105,125,.15)!important;
}

/* Compact account rows: the title is the useful navigation label; repeated
   explanatory subtitles only added visual noise. */
.account-section-copy,
.account-theme-copy,
.account-utility-copy{
  justify-content:center!important;
}
.account-section-copy>strong,
.account-theme-copy>strong,
.account-utility-copy>strong{
  margin:0!important;
}

/* Sidebar operational summary mirrors the Overview hierarchy while remaining
   compact enough for the fixed navigation rail. */
.coordinator-info-card{
  padding:.75rem!important;
  border-color:rgba(112,137,159,.22)!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(139,92,246,.10),transparent 38%),
    linear-gradient(155deg,#0f1923,#091119 78%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 .875rem 2rem rgba(0,0,0,.12)!important;
}
.coordinator-info-title{
  padding:.125rem .25rem .75rem!important;
  color:var(--readable-text)!important;
  text-align:center!important;
  font-size:1rem!important;
  letter-spacing:.01em!important;
}
.coordinator-status-minimal,
.coordinator-info-item{
  --sidebar-accent:#8b5cf6;
  position:relative!important;
  overflow:hidden!important;
  border-color:color-mix(in srgb,var(--sidebar-accent) 25%,#263846)!important;
  background:
    radial-gradient(circle at 0 0,color-mix(in srgb,var(--sidebar-accent) 10%,transparent),transparent 46%),
    #0c151e!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.coordinator-status-minimal::before,
.coordinator-info-item::before{
  content:"";
  position:absolute;
  top:0;
  left:.75rem;
  right:.75rem;
  height:2px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,transparent,var(--sidebar-accent),transparent);
  opacity:.72;
}
.coordinator-status-minimal.online{
  --sidebar-accent:#54d58a;
  color:#72e5a1!important;
  border-color:rgba(70,201,126,.32)!important;
  background:
    radial-gradient(circle at 0 0,rgba(58,188,113,.15),transparent 48%),
    #0c1815!important;
}
.coordinator-status-minimal.offline{
  --sidebar-accent:#ff6673;
  color:#ff858f!important;
  border-color:rgba(244,83,97,.34)!important;
  background:
    radial-gradient(circle at 0 0,rgba(223,67,80,.16),transparent 48%),
    #1a1014!important;
}
.coordinator-info-item.machines{--sidebar-accent:#4ab6f2}
.coordinator-info-item.storage{--sidebar-accent:#efbd50}
.coordinator-info-item.rendering{--sidebar-accent:#9b62f3}
.coordinator-info-card .coordinator-status-minimal,
.coordinator-info-card .coordinator-info-item{
  cursor:default!important;
  transition:none!important;
}
.coordinator-info-card .coordinator-status-minimal:hover,
.coordinator-info-card .coordinator-info-item:hover{
  transform:none!important;
}
.coordinator-info-item.machines .coordinator-info-number{color:#62c5f7!important}
.coordinator-info-item.storage .coordinator-storage-value{color:#f2ca72!important}
.coordinator-info-item.rendering .coordinator-render-value{color:#bd96ff!important}
.coordinator-storage-progress{
  background:rgba(116,138,157,.18)!important;
}

html[data-theme="light"] .coordinator-info-card{
  border-color:#d1dce6!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(139,92,246,.08),transparent 40%),
    linear-gradient(155deg,#ffffff,#f4f7fa 82%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 .75rem 1.75rem rgba(42,60,78,.09)!important;
}
html[data-theme="light"] .coordinator-info-title{
  color:#253a4f!important;
  border-bottom-color:#dce4eb!important;
}
html[data-theme="light"] .coordinator-status-minimal,
html[data-theme="light"] .coordinator-info-item{
  border-color:color-mix(in srgb,var(--sidebar-accent) 24%,#d2dce5)!important;
  background:
    radial-gradient(circle at 0 0,color-mix(in srgb,var(--sidebar-accent) 11%,transparent),transparent 48%),
    #ffffff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 .35rem .9rem rgba(44,63,81,.045)!important;
}
html[data-theme="light"] .coordinator-status-minimal.online{
  color:#23824c!important;
  border-color:#b9ddc7!important;
  background:linear-gradient(145deg,#f4fcf7,#eaf7ef)!important;
}
html[data-theme="light"] .coordinator-status-minimal.offline{
  color:#b63f4b!important;
  border-color:#ebc2c6!important;
  background:linear-gradient(145deg,#fff8f8,#fbecee)!important;
}
html[data-theme="light"] .coordinator-info-item.machines .coordinator-info-number{color:#197bb0!important}
html[data-theme="light"] .coordinator-info-item.storage .coordinator-storage-value{color:#a66c08!important}
html[data-theme="light"] .coordinator-info-item.rendering .coordinator-render-value{color:#7246bd!important}
html[data-theme="light"] .coordinator-storage-progress{
  background:#dce5ed!important;
}

/* Shared-folder machine availability is a compact, recognizable power control
   rather than a text badge; title/aria-label preserve the exact state. */
#view-folders .shared-folder-workspace .machine-item-icon.machine-power-state{
  position:relative!important;
  isolation:isolate;
  width:2.75rem!important;
  height:2.75rem!important;
  min-width:2.75rem!important;
  min-height:2.75rem!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,currentColor 58%,#18232d)!important;
  border-radius:50%!important;
  font-size:0!important;
  line-height:0!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -.5rem 1rem rgba(0,0,0,.36),
    0 .35rem .8rem rgba(0,0,0,.18)!important;
}
#view-folders .shared-folder-workspace .machine-item-icon.machine-power-state::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:.34rem;
  border:2px solid currentColor;
  border-radius:50%;
  opacity:.88;
  box-shadow:inset 0 0 .55rem rgba(0,0,0,.28),0 0 .4rem color-mix(in srgb,currentColor 30%,transparent);
}
#view-folders .shared-folder-workspace .machine-item-icon.machine-power-state::after{
  content:"";
  position:absolute;
  z-index:1;
  top:.24rem;
  left:24%;
  width:52%;
  height:22%;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.18),transparent);
  pointer-events:none;
}
#view-folders .shared-folder-workspace .machine-item-icon.machine-power-state svg{
  position:relative;
  z-index:2;
  width:1.22rem!important;
  height:1.22rem!important;
  margin:0!important;
  transform:translateY(-.03rem);
  transform-origin:center;
  filter:drop-shadow(0 0 .22rem currentColor);
}
#view-folders .machine-power-state.online{
  color:#61e316!important;
  background:
    radial-gradient(circle at 50% 42%,rgba(91,226,25,.12),transparent 48%),
    linear-gradient(180deg,#303833,#0b110d)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -.5rem 1rem rgba(0,0,0,.48),
    0 0 .8rem rgba(83,219,20,.15)!important;
}
#view-folders .machine-power-state.offline{
  color:#ff2936!important;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,41,54,.12),transparent 48%),
    linear-gradient(180deg,#3a3032,#140c0e)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -.5rem 1rem rgba(0,0,0,.48),
    0 0 .8rem rgba(239,25,39,.15)!important;
}

/* The table header is a dedicated navigation surface, visually separated from
   folder data rows through height, contrast and per-column identity. */
#view-folders .folder-table-inner{
  grid-template-rows:4.75rem minmax(0,1fr)!important;
}
#view-folders .folder-icon-header,
#view-folders .folder-row{
  min-width:800px!important;
  grid-template-columns:
    minmax(180px,1.35fr)
    minmax(120px,.85fr)
    repeat(4,minmax(110px,.85fr))!important;
  column-gap:.625rem!important;
}
#view-folders .folder-table-inner,
#view-folders .selected-folder-list{
  min-width:800px!important;
}
#view-folders .folder-icon-header{
  width:calc(100% - 10px)!important;
  min-height:4.75rem!important;
  padding:.625rem 11px!important;
  border-top:1px solid rgba(255,255,255,.035)!important;
  border-bottom:1px solid rgba(99,151,188,.24)!important;
  background:
    radial-gradient(circle at 8% 0%,rgba(74,182,242,.10),transparent 36%),
    linear-gradient(180deg,#111d28,#0b151e)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 .5rem 1rem rgba(0,0,0,.10)!important;
}
#view-folders .folder-column-title{
  --folder-header-accent:#4ab6f2;
  width:100%!important;
  min-height:3.35rem!important;
  padding:.5rem .625rem!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:.625rem!important;
  border:1px solid color-mix(in srgb,var(--folder-header-accent) 19%,transparent)!important;
  border-radius:.75rem!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--folder-header-accent) 9%,transparent),rgba(255,255,255,.012))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
#view-folders .folder-column-title:nth-child(1){--folder-header-accent:#efbd50}
#view-folders .folder-column-title:nth-child(2){--folder-header-accent:#54d58a}
#view-folders .folder-column-title:nth-child(3){--folder-header-accent:#9b62f3}
#view-folders .folder-column-title:nth-child(4){--folder-header-accent:#4ab6f2}
#view-folders .folder-column-title:nth-child(5){--folder-header-accent:#e9a33f}
#view-folders .folder-column-title:nth-child(6){--folder-header-accent:#36c99a}
#view-folders .folder-column-title strong{
  color:#dce8f2!important;
  font-size:.75rem!important;
  line-height:1.1!important;
  font-weight:800!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
}
#view-folders .folder-header-icon{
  width:2.15rem!important;
  height:2.15rem!important;
  min-width:2.15rem!important;
  min-height:2.15rem!important;
  border-color:color-mix(in srgb,var(--folder-header-accent) 34%,transparent)!important;
  border-radius:.7rem!important;
  color:var(--folder-header-accent)!important;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--folder-header-accent) 18%,transparent),rgba(255,255,255,.015))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 .35rem .75rem rgba(0,0,0,.12)!important;
}
#view-folders .folder-header-icon svg{
  width:1.05rem!important;
  height:1.05rem!important;
}

html[data-theme="light"] #view-folders .machine-power-state.online{
  color:#42bb0e!important;
  border-color:#3bab0d!important;
  background:linear-gradient(180deg,#f5fff1,#d9efcf)!important;
  box-shadow:inset 0 0 0 3px rgba(71,184,19,.08),0 .25rem .65rem rgba(47,127,20,.13)!important;
}
html[data-theme="light"] #view-folders .machine-power-state.offline{
  color:#e82b38!important;
  border-color:#d92331!important;
  background:linear-gradient(180deg,#fff7f7,#f5dfe1)!important;
  box-shadow:inset 0 0 0 3px rgba(218,39,52,.07),0 .25rem .65rem rgba(154,37,47,.12)!important;
}
html[data-theme="light"] #view-folders .folder-icon-header{
  border-top-color:#ffffff!important;
  border-bottom-color:#c8d8e4!important;
  background:
    radial-gradient(circle at 8% 0%,rgba(74,182,242,.10),transparent 38%),
    linear-gradient(180deg,#edf4f8,#e4edf4)!important;
  box-shadow:inset 0 1px 0 #ffffff,0 .45rem .9rem rgba(43,63,80,.07)!important;
}
html[data-theme="light"] #view-folders .folder-column-title{
  border-color:color-mix(in srgb,var(--folder-header-accent) 25%,#d4dee7)!important;
  background:linear-gradient(135deg,#ffffff,color-mix(in srgb,var(--folder-header-accent) 8%,#f5f8fa))!important;
  box-shadow:inset 0 1px 0 #ffffff,0 .25rem .65rem rgba(45,65,82,.045)!important;
}
html[data-theme="light"] #view-folders .folder-column-title strong{
  color:#334a60!important;
}
html[data-theme="light"] #view-folders .folder-header-icon{
  color:color-mix(in srgb,var(--folder-header-accent) 78%,#24425a)!important;
  border-color:color-mix(in srgb,var(--folder-header-accent) 30%,#d5dfe8)!important;
  background:linear-gradient(145deg,#ffffff,color-mix(in srgb,var(--folder-header-accent) 13%,#f2f6f9))!important;
  box-shadow:inset 0 1px 0 #ffffff,0 .25rem .55rem rgba(45,65,82,.06)!important;
}
#view-workers .machine-ai-state.unknown{
  color:var(--readable-muted)!important;
}
html[data-theme="light"] #view-workers .machine-ai-state.enabled{
  color:#176b3f!important;
  border-color:#acd9bf!important;
  background:#e7f5ed!important;
}
html[data-theme="light"] #view-workers .machine-ai-state.disabled{
  color:#765313!important;
  border-color:#dfcb95!important;
  background:#faf2dc!important;
}
body .coordinator-status-minimal,
body .coordinator-status-copy>div>span,
body .coordinator-availability,
body .worker-system-copy span,
body .worker-mini-stat label,
body .player-time,
body .player-no-controls,
body .media-audio-name span,
body .media-preview-summary,
body .media-bytes-line,
body .media-duration,
body .notification-copy span,
body .notification-time,
body .notification-footer,
body .edit-event-copy span,
body .review-note,
body .review-thread-head span,
body .shared-folder-detail-card label,
body .shared-folder-workflow-note,
body .shared-folder-workflow-banner p,
body .shared-folder-confirm-copy p,
body .shared-folder-confirm-target,
body .selected-machine-copy span,
body .worker-pairing-code-help,
body .multi-select-note,
body .multi-select-option-note,
body .team-create-confirm-summary,
body .processing-empty p,
body .app-empty-copy p,
body .folder-empty p,
body .team-empty p,
body .team-permission-empty p,
body .meta-note,
body .meta-empty,
body .inline-meta-muted,
body .settings-password-status,
body .settings-network-copy-status,
body .settings-network-error,
body .help-version{
  color:var(--readable-muted)!important;
  font-size:var(--type-caption)!important;
  line-height:var(--leading-body)!important;
}
body .coordinator-status-minimal strong{
  color:var(--readable-text-2)!important;
  font-size:var(--type-small)!important;
  line-height:var(--leading-compact)!important;
}
body .coordinator-status-copy strong,
body .worker-system-copy strong,
body .notification-copy strong,
body .edit-event-copy strong,
body .media-audio-name strong,
body .selected-machine-copy strong,
body .shared-folder-detail-card strong,
body .detail-box strong,
body .entity-stats strong{
  color:var(--readable-text-2)!important;
  font-size:var(--type-small)!important;
  line-height:var(--leading-compact)!important;
}
body .shared-folder-action,
body .shared-folder-confirm-btn,
body .review-action-btn,
body .review-comment-send,
body .processing-retry-button,
body .settings-network-copy-button,
body .worker-pairing-address-button,
body .team-add-member-btn,
body .account-logout{
  font-size:var(--type-control)!important;
  line-height:1.2!important;
  font-weight:650!important;
}

/* Disabled text must remain legible while still looking inactive. */
:where(button,input,select,textarea):disabled,
.is-disabled,
[aria-disabled="true"]{
  color:var(--readable-disabled)!important;
  opacity:.72!important;
}

/* Compact widths reflow through existing component media queries; typography keeps
   its readable floor instead of shrinking again. */
@media (max-width:760px){
  html{font-size:16px}
  .page-head h1{font-size:1.5rem!important}
  .panel-head h2,.settings-head h3{font-size:.9375rem!important}
  .login-card{padding:1.5rem 1.25rem!important}
  .login-heading h1{font-size:1.6875rem!important}
}

/* Media search: keep browser-generated UI consistent with the active theme and
   give the AI affordance enough size and contrast to remain readable. */
#view-media .smart-box input{
  padding-right:7.25rem!important;
}
#view-media .smart-box .ai-key{
  top:50%!important;
  right:.75rem!important;
  min-height:2rem!important;
  padding:.375rem .75rem!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:translateY(-50%);
  border:1px solid rgba(159,112,255,.30)!important;
  border-radius:.5rem!important;
  color:#d8c8ff!important;
  background:linear-gradient(145deg,rgba(139,78,255,.24),rgba(105,55,211,.16))!important;
  font-size:var(--type-caption)!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.01em;
  white-space:nowrap;
  pointer-events:none;
}
html[data-theme="dark"] #mediaSmartSearch{color-scheme:dark}
html[data-theme="light"] #mediaSmartSearch{color-scheme:light}
html[data-theme="light"] #view-media .smart-box .ai-key{
  color:#5f34ad!important;
  border-color:#cdbbec!important;
  background:linear-gradient(145deg,#f1eaff,#e7dcfb)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 .2rem .55rem rgba(81,50,139,.08)!important;
}

/* A machine without pending folders only needs one content row. Reserving an
   empty second row made ordinary machine cards much taller than their content. */
#view-folders .shared-folder-workspace:not(.machine-collapsed) .machine-item{
  min-height:0!important;
  grid-template-rows:auto!important;
}
#view-folders .shared-folder-workspace:not(.machine-collapsed) .machine-item:not(:has(.machine-item-status-stack)){
  align-items:center!important;
}
#view-folders .shared-folder-workspace:not(.machine-collapsed) .machine-item:not(:has(.machine-item-status-stack)) .machine-item-icon,
#view-folders .shared-folder-workspace:not(.machine-collapsed) .machine-item:not(:has(.machine-item-status-stack)) .machine-item-copy{
  align-self:center!important;
}

/* Neon power indicators: a dark physical-button face, illuminated perimeter
   ring and centered power glyph matching the supplied reference. */
#view-folders .shared-folder-workspace .machine-item-icon.machine-power-state{
  --power-accent:#ff3046;
  color:var(--power-accent)!important;
  overflow:visible!important;
  border:1px solid #34373b!important;
  background:
    radial-gradient(circle at 50% 43%,color-mix(in srgb,var(--power-accent) 15%,transparent),transparent 48%),
    linear-gradient(145deg,#303236 0%,#151619 48%,#070809 100%)!important;
  box-shadow:
    0 0 0 1px #090a0c,
    0 0 0 2px color-mix(in srgb,var(--power-accent) 58%,#15171a),
    0 0 .65rem color-mix(in srgb,var(--power-accent) 48%,transparent),
    inset 0 1px 1px rgba(255,255,255,.18),
    inset 0 -.45rem .85rem rgba(0,0,0,.72)!important;
}
#view-folders .shared-folder-workspace .machine-item-icon.machine-power-state::before{
  inset:.24rem!important;
  border:1.5px solid var(--power-accent)!important;
  opacity:1!important;
  box-shadow:
    0 0 .26rem var(--power-accent),
    inset 0 0 .32rem color-mix(in srgb,var(--power-accent) 42%,transparent)!important;
}
#view-folders .shared-folder-workspace .machine-item-icon.machine-power-state::after{
  z-index:1!important;
  top:.16rem!important;
  left:25%!important;
  width:50%!important;
  height:22%!important;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent)!important;
  opacity:.6;
}
#view-folders .shared-folder-workspace .machine-item-icon.machine-power-state svg{
  width:1.42rem!important;
  height:1.42rem!important;
  transform:none!important;
  filter:
    drop-shadow(0 0 .12rem var(--power-accent))
    drop-shadow(0 0 .3rem color-mix(in srgb,var(--power-accent) 72%,transparent))!important;
}
#view-folders .shared-folder-workspace .machine-power-state.online{
  --power-accent:#54ed22;
}
#view-folders .shared-folder-workspace .machine-power-state.offline{
  --power-accent:#ff3046;
}
html[data-theme="light"] #view-folders .shared-folder-workspace .machine-power-state.online,
html[data-theme="light"] #view-folders .shared-folder-workspace .machine-power-state.offline{
  color:var(--power-accent)!important;
  border-color:#34373b!important;
  background:
    radial-gradient(circle at 50% 43%,color-mix(in srgb,var(--power-accent) 15%,transparent),transparent 48%),
    linear-gradient(145deg,#303236 0%,#151619 48%,#070809 100%)!important;
  box-shadow:
    0 0 0 1px #090a0c,
    0 0 0 2px color-mix(in srgb,var(--power-accent) 58%,#15171a),
    0 0 .65rem color-mix(in srgb,var(--power-accent) 48%,transparent),
    inset 0 1px 1px rgba(255,255,255,.18),
    inset 0 -.45rem .85rem rgba(0,0,0,.72)!important;
}