/* Modern CSS Variables for Dark Theme */
    :root {
      /* Color Palette - Modern Dark Theme */
      --bg-primary: #0f1117;
      --bg-secondary: #161b22;
      --bg-tertiary: #1c2128;
      --bg-elevated: #22272e;
      --bg-hover: #2d333b;
      
      /* Accent Colors - Modern Teal Theme */
      --accent-primary: #2dd4bf;
      --accent-secondary: #14b8a6;
      --accent-success: #4ade80;
      --accent-warning: #fbbf24;
      --accent-danger: #f87171;
      --accent-info: #38bdf8;
      
      /* Text Colors — contrast-tuned for dark surfaces */
      --text-primary: #f4f7fb;
      --text-secondary: #c8d1df;
      --text-muted: #9aa8bc;
      --text-faint: #7d8b9f;
      
      /* Border & Divider */
      --border-color: rgba(255, 255, 255, 0.1);
      --border-radius: 12px;
      --border-radius-sm: 8px;
      
      /* Shadows */
      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
      --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
      --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
      
      /* Transitions */
      --transition-fast: 150ms ease;
      --transition-base: 250ms ease;
      --transition-slow: 350ms ease;
      
      /* Spacing */
      --spacing-xs: 4px;
      --spacing-sm: 8px;
      --spacing-md: 16px;
      --spacing-lg: 24px;
      --spacing-xl: 32px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      display: flex;
      height: 100vh;
      background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
      color: var(--text-primary);
      overflow: hidden;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Inter', sans-serif;
      font-size: 14px;
      line-height: 1.65;
      font-weight: 400;
    }

    .hidden {
      display: none !important;
    }

    #titlebar {
      -webkit-app-region: drag;
      height: var(--titlebar-h, 42px);
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-tertiary) 100%);
      border-bottom: 1px solid var(--border-color);
      z-index: 1100;
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px 0 8px;
      gap: 0;
      overflow: visible;
    }

    #titlebar > *,
    #titlebar .titlebar-left,
    #titlebar .titlebar-right,
    #titlebar pear-ctrl,
    #titlebar .app-brand,
    #titlebar .notification-tray,
    #titlebar .connection-health-badge,
    #titlebar #active-peer-chip {
      -webkit-app-region: no-drag;
    }

    #titlebar .titlebar-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      z-index: 2;
    }

    #titlebar .titlebar-right {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
      flex-shrink: 0;
      z-index: 2;
    }

    #titlebar .notification-tray {
      margin-left: 0;
    }

    /* Window controls: keep brand clear of pear-ctrl hit targets */
    #titlebar pear-ctrl {
      flex: 0 0 auto;
      position: relative;
      z-index: 5;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      min-width: 54px;
      min-height: 28px;
      padding: 0 4px;
      overflow: visible;
      -webkit-app-region: no-drag;
    }

    #titlebar pear-ctrl[data-platform="darwin"] {
      min-width: 78px;
      margin: 0 8px 0 8px !important;
      margin-top: 0 !important;
    }

    #titlebar pear-ctrl[data-platform="linux"],
    #titlebar pear-ctrl[data-platform="win32"] {
      min-width: 110px;
    }

    pear-ctrl[data-platform="darwin"] {
      margin-top: 0;
      margin-left: 0;
    }

    #titlebar .app-brand {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: 4px;
      min-width: 0;
      flex-shrink: 1;
      position: relative;
      z-index: 1;
      pointer-events: none;
    }

    #sidebar {
      position: fixed;
      top: 35px;
      left: 0;
      background: var(--bg-secondary);
      border-right: 1px solid var(--border-color);
      height: calc(100vh - 35px);
      width: 280px;
      /* Nav scrolls inside .sidebar-nav-scroll; peers stay bottom-docked */
      overflow: hidden;
      transition: width var(--transition-base), box-shadow var(--transition-base);
      box-shadow: var(--shadow-lg);
      display: flex;
      flex-direction: column;
    }

    #sidebar .content {
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .sidebar-nav-scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .sidebar-footer {
      flex: 0 0 auto;
      margin-top: auto;
    }

    .connections-panel {
      flex: 0 0 auto;
      margin-top: 0;
    }

    #connection-list {
      max-height: calc((4 * 54px) + (3 * 8px));
      overflow-y: auto;
    }

    #sidebar.collapsed {
      width: 68px;
    }

    /* Keep collapsed nav icons reachable (do not hide entire .content) */

    #collapse-sidebar-btn {
      position: absolute;
      top: var(--spacing-md);
      right: var(--spacing-md);
      background: var(--bg-hover);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      width: 32px;
      height: 32px;
      border-radius: var(--border-radius-sm);
      font-size: 14px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
      transition: all var(--transition-fast);
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #collapse-sidebar-btn:hover {
      background: var(--bg-elevated);
      transform: scale(1.05);
      box-shadow: var(--shadow-md);
    }

    #content {
      display: flex;
      flex-direction: column;
      margin-left: 280px;
      flex: 1;
      overflow-y: auto;
      position: relative;
      background: var(--bg-primary);
      transition: margin-left var(--transition-base);
    }

    #sidebar.collapsed~#content {
      margin-left: 68px;
    }

    .connection-status {
      border-radius: 50%;
      width: 10px;
      height: 10px;
      display: inline-block;
      margin-right: var(--spacing-sm);
      box-shadow: 0 0 8px currentColor;
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    .status-connected {
      background-color: var(--accent-success);
      color: var(--accent-success);
    }

    .status-disconnected {
      background-color: var(--accent-danger);
      color: var(--accent-danger);
      animation: none;
    }

    #terminal-modal {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      max-height: 90vh;
      height: 300px;
      background: var(--bg-secondary);
      border-top: 1px solid var(--border-color);
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
      display: none;
      flex-direction: column;
      z-index: 1000;
      overflow: hidden;
      backdrop-filter: blur(10px);
    }

    #terminal-modal .header {
      background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-tertiary) 100%);
      cursor: move;
      padding: var(--spacing-md);
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border-color);
    }

    #terminal-container {
      flex: 1;
      overflow: hidden;
      background: var(--bg-primary);
      color: var(--text-primary);
    }

    #tray {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: var(--bg-elevated);
      border-top: 1px solid var(--border-color);
      padding: var(--spacing-sm) var(--spacing-md);
      display: flex;
      gap: var(--spacing-sm);
      overflow-x: auto;
      white-space: nowrap;
      z-index: 999;
      backdrop-filter: blur(10px);
    }

    #tray .tray-item {
      background: var(--bg-tertiary);
      color: var(--text-primary);
      padding: var(--spacing-sm) var(--spacing-md);
      border-radius: var(--border-radius-sm);
      cursor: pointer;
      border: 1px solid var(--border-color);
      transition: all var(--transition-fast);
      white-space: nowrap;
    }

    #tray .tray-item:hover {
      background: var(--bg-hover);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    /* Legacy full-screen status spinner removed — activity uses #job-drawer */

    /* Sidebar Content Styling (layout flex/overflow controlled in modern.css) */
    #sidebar .content {
      padding: var(--spacing-lg);
    }

    #sidebar .content h4 {
      color: var(--text-primary);
      font-weight: 700;
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: var(--spacing-lg);
      padding-bottom: var(--spacing-md);
      border-bottom: 2px solid var(--border-color);
    }

    /* Connection List Item Styling */
    #connection-list .list-group-item {
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
      margin-bottom: var(--spacing-sm);
      padding: var(--spacing-md);
      border-radius: var(--border-radius-sm);
      cursor: pointer;
      transition: all var(--transition-fast);
      position: relative;
    }

    #connection-list .list-group-item:hover {
      background: var(--bg-hover);
      border-color: var(--accent-primary);
      transform: translateX(4px);
      box-shadow: var(--shadow-md);
    }

    #connection-list .list-group-item.active {
      background: linear-gradient(135deg, rgba(45, 212, 191, 0.2) 0%, rgba(20, 184, 166, 0.2) 100%);
      border-color: var(--accent-primary);
      box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
    }

    /* Navigation Menu */
    .nav-menu {
      list-style: none;
      padding: 0;
      margin: 0 0 var(--spacing-lg) 0;
    }

    .nav-item {
      margin-bottom: var(--spacing-xs);
    }

    .nav-link {
      display: flex;
      align-items: center;
      gap: var(--spacing-md);
      padding: var(--spacing-md);
      color: var(--text-secondary);
      text-decoration: none;
      border-radius: var(--border-radius-sm);
      transition: all var(--transition-fast);
      font-weight: 500;
    }

    .nav-link:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
      transform: translateX(4px);
    }

    .nav-link.active {
      background: linear-gradient(90deg, rgba(45, 212, 191, 0.2) 0%, rgba(45, 212, 191, 0.1) 100%);
      color: var(--accent-primary);
      border-left: 3px solid var(--accent-primary);
    }

    .nav-link i {
      width: 20px;
      text-align: center;
      font-size: 1rem;
    }

    .nav-label {
      flex: 1;
    }

    .sidebar-divider {
      border-color: var(--border-color);
      margin: var(--spacing-md) 0;
      opacity: 0.3;
    }

    /* Image Filter Buttons — segmented control (matches dark teal UI) */
    .view-toolbar .btn-group[aria-label="Image filters"] {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-sm);
      padding: 3px;
      gap: 2px;
    }

    .view-toolbar .btn-group[aria-label="Image filters"] > .image-filter-btn {
      border-radius: 6px !important;
      margin: 0 !important;
    }

    .image-filter-btn {
      background: transparent !important;
      border-color: transparent !important;
      color: var(--text-secondary) !important;
      transition: all var(--transition-fast);
      font-weight: 500;
    }

    .image-filter-btn:hover {
      background: var(--bg-hover) !important;
      border-color: rgba(45, 212, 191, 0.35) !important;
      color: var(--text-primary) !important;
    }

    .image-filter-btn.active {
      background: rgba(45, 212, 191, 0.14) !important;
      border-color: var(--accent-primary) !important;
      color: var(--accent-primary) !important;
      box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.18);
    }

    .image-filter-btn.active:hover {
      background: rgba(45, 212, 191, 0.2) !important;
      border-color: var(--accent-primary) !important;
      color: var(--accent-primary) !important;
    }

    /* Semantic accent on icons only — not whole-button fills */
    .image-filter-btn[data-filter="used"] > i {
      color: var(--accent-success);
    }

    .image-filter-btn[data-filter="unused"] > i {
      color: var(--accent-warning);
    }

    .image-filter-btn[data-filter="all"] > i {
      color: var(--text-muted);
    }

    .image-filter-btn.active > i {
      color: inherit;
    }

    /* Count pills inside filters stay muted; active inherits teal */
    .image-filter-btn .badge {
      background: rgba(255, 255, 255, 0.08) !important;
      color: var(--text-secondary) !important;
      border: 1px solid rgba(255, 255, 255, 0.06);
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      font-size: 0.7rem;
      padding: 0.2em 0.5em;
      vertical-align: middle;
    }

    .image-filter-btn.active .badge {
      background: rgba(45, 212, 191, 0.18) !important;
      color: var(--accent-primary) !important;
      border-color: rgba(45, 212, 191, 0.25);
    }

    #sidebar.collapsed .nav-label,
    #sidebar.collapsed .nav-group-label {
      display: none;
    }

    #sidebar.collapsed .nav-link {
      justify-content: center;
      padding: 0;
    }

    /* View Management */
    .view {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      min-height: 0;
      margin-top: 35px;
      overflow-x: auto;
      overflow-y: auto;
      position: relative;
      padding: var(--spacing-lg);
      box-sizing: border-box;
      -webkit-overflow-scrolling: touch;
    }

    /* Kill Bootstrap table-responsive horizontal scrollbars in app views */
    .view .table-responsive {
      overflow-x: hidden !important;
      max-width: 100%;
      min-width: 0;
      width: 100%;
    }

    /* Ensure pre/long tokens wrap inside any view or modal */
    .view pre,
    .modal-body pre {
      max-width: 100%;
      overflow-x: auto;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .view.hidden {
      display: none !important;
    }

    #content {
      max-width: 100%;
      min-width: 0;
    }

    /* Hide horizontal scrollbar in deploy view */
    #deploy-view {
      overflow-x: hidden;
    }

    /* Hide horizontal scrollbar in template list container */
    #deploy-template-list-container {
      overflow-x: hidden !important;
    }

    /* Prevent horizontal overflow in template list */
    #deploy-template-list-container .list-group {
      overflow-x: hidden;
      max-width: 100%;
    }

    #deploy-template-list-container .list-group-item {
      overflow: hidden;
      max-width: 100%;
      min-width: 0;
    }

    /* Dashboard Styles */
    .stat-card {
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      padding: var(--spacing-lg);
      display: flex;
      align-items: center;
      gap: var(--spacing-md);
      transition: all var(--transition-fast);
    }

    .stat-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
      border-color: var(--accent-primary);
    }

    .stat-card-icon {
      width: 56px;
      height: 56px;
      border-radius: var(--border-radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      flex-shrink: 0;
    }

    .stat-card-content {
      flex: 1;
    }

    .stat-card-value {
      font-size: 2rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1;
      margin-bottom: var(--spacing-xs);
    }

    .stat-card-label {
      font-size: 0.875rem;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .info-card {
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      padding: var(--spacing-lg);
      transition: all var(--transition-fast);
    }

    .info-card:hover {
      box-shadow: var(--shadow-md);
    }

    .info-card-title {
      color: var(--text-primary);
      font-weight: 600;
      font-size: 1.125rem;
      margin-bottom: var(--spacing-md);
      padding-bottom: var(--spacing-md);
      border-bottom: 1px solid var(--border-color);
    }

    .info-card-body {
      color: var(--text-secondary);
    }

    .info-card-body .key-value {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      min-width: 0;
      padding: var(--spacing-sm) 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .info-card-body .key-value:last-child {
      border-bottom: none;
    }

    .info-card-body .key {
      font-weight: 600;
      color: var(--text-primary);
      flex-shrink: 0;
    }

    .info-card-body .value {
      color: var(--text-secondary);
      min-width: 0;
      text-align: right;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    /* Enhanced Container Details Styles */
    .detail-section-card {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      padding: var(--spacing-lg);
      margin-bottom: var(--spacing-lg);
      transition: all var(--transition-fast);
    }

    .detail-section-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--accent-primary);
    }

    .detail-section-header {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      margin-bottom: var(--spacing-md);
      padding-bottom: var(--spacing-md);
      border-bottom: 1px solid var(--border-color);
    }

    .detail-section-header i {
      color: var(--accent-primary);
      font-size: 1.125rem;
    }

    .detail-section-title {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0;
    }

    .detail-info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: var(--spacing-md);
      margin-top: var(--spacing-md);
    }

    .detail-info-item {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
    }

    .detail-info-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
    }

    .detail-info-label i {
      font-size: 0.875rem;
      color: var(--accent-info);
    }

    .detail-info-value {
      font-size: 0.9375rem;
      color: var(--text-primary);
      font-weight: 500;
      word-break: break-word;
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
    }

    .detail-info-value code {
      background: var(--bg-primary);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 0.875rem;
      color: var(--accent-primary);
      border: 1px solid var(--border-color);
    }

    .detail-badge {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-xs);
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 0.8125rem;
      font-weight: 600;
      text-transform: capitalize;
    }

    .detail-badge.status-running {
      background: rgba(81, 207, 102, 0.2);
      color: var(--accent-success);
      border: 1px solid rgba(81, 207, 102, 0.3);
    }

    .detail-badge.status-exited {
      background: rgba(255, 107, 107, 0.2);
      color: var(--accent-danger);
      border: 1px solid rgba(255, 107, 107, 0.3);
    }

    .detail-badge.status-paused {
      background: rgba(255, 212, 59, 0.2);
      color: var(--accent-warning);
      border: 1px solid rgba(255, 212, 59, 0.3);
    }

    .detail-badge.status-restarting {
      background: rgba(116, 192, 252, 0.2);
      color: var(--accent-info);
      border: 1px solid rgba(116, 192, 252, 0.3);
    }

    .copy-btn {
      background: var(--bg-hover);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.75rem;
      transition: all var(--transition-fast);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-left: var(--spacing-xs);
    }

    .copy-btn:hover {
      background: var(--accent-primary);
      color: var(--bg-primary);
      border-color: var(--accent-primary);
    }

    .copy-btn i {
      font-size: 0.75rem;
    }

    .detail-code-block {
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-sm);
      padding: var(--spacing-md);
      margin-top: var(--spacing-sm);
      overflow-x: auto;
      position: relative;
    }

    .detail-code-block .copy-btn {
      position: absolute;
      top: var(--spacing-sm);
      right: var(--spacing-sm);
    }

    .detail-code-block pre {
      margin: 0;
      font-family: 'Courier New', monospace;
      font-size: 0.8125rem;
      color: var(--text-primary);
      line-height: 1.6;
    }

    .detail-code-block code {
      background: transparent;
      padding: 0;
      border: none;
      color: var(--text-primary);
    }

    .detail-env-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: var(--spacing-sm);
    }

    .detail-env-table th,
    .detail-env-table td {
      padding: var(--spacing-sm) var(--spacing-md);
      text-align: left;
      border-bottom: 1px solid var(--border-color);
    }

    .detail-env-table th {
      background: var(--bg-tertiary);
      color: var(--text-primary);
      font-weight: 600;
      font-size: 0.8125rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .detail-env-table td {
      color: var(--text-secondary);
      font-size: 0.875rem;
      font-family: 'Courier New', monospace;
    }

    .detail-env-table tr:hover {
      background: var(--bg-hover);
    }

    .detail-env-table tr:last-child td {
      border-bottom: none;
    }

    .network-card {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-sm);
      padding: var(--spacing-md);
      margin-bottom: var(--spacing-md);
      transition: all var(--transition-fast);
    }

    .network-card:hover {
      border-color: var(--accent-primary);
      box-shadow: var(--shadow-sm);
    }

    .network-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--spacing-md);
      padding-bottom: var(--spacing-sm);
      border-bottom: 1px solid var(--border-color);
    }

    .network-card-title {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
    }

    .network-card-title i {
      color: var(--accent-primary);
    }

    .port-mapping-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: var(--spacing-sm);
    }

    .port-mapping-table th,
    .port-mapping-table td {
      padding: var(--spacing-sm) var(--spacing-md);
      text-align: left;
      border-bottom: 1px solid var(--border-color);
      font-size: 0.875rem;
    }

    .port-mapping-table th {
      background: var(--bg-tertiary);
      color: var(--text-primary);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-size: 0.75rem;
    }

    .port-mapping-table td {
      color: var(--text-secondary);
    }

    .port-mapping-table tr:hover {
      background: var(--bg-hover);
    }

    .port-mapping-table tr:last-child td {
      border-bottom: none;
    }

    .protocol-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
    }

    .protocol-badge.tcp {
      background: rgba(56, 189, 248, 0.2);
      color: var(--accent-info);
      border: 1px solid rgba(56, 189, 248, 0.3);
    }

    .protocol-badge.udp {
      background: rgba(45, 212, 191, 0.2);
      color: var(--accent-primary);
      border: 1px solid rgba(45, 212, 191, 0.3);
    }

    .empty-state {
      text-align: center;
      padding: var(--spacing-xl);
      color: var(--text-muted);
      font-style: italic;
    }

    .empty-state i {
      font-size: 2rem;
      margin-bottom: var(--spacing-md);
      opacity: 0.5;
    }

    .detail-stat-card {
      background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-elevated) 100%);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-sm);
      padding: var(--spacing-md);
      display: flex;
      align-items: center;
      gap: var(--spacing-md);
      transition: all var(--transition-fast);
    }

    .detail-stat-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: var(--accent-primary);
    }

    .detail-stat-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--border-radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      flex-shrink: 0;
    }

    .detail-stat-content {
      flex: 1;
    }

    .detail-stat-value {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1;
      margin-bottom: var(--spacing-xs);
    }

    .detail-stat-label {
      font-size: 0.8125rem;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .relative-time {
      font-size: 0.8125rem;
      color: var(--text-muted);
      font-style: italic;
      margin-top: 2px;
    }

    /* Logs Tab Styles */
    .logs-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 10px;
      border-bottom: 1px solid var(--border-color);
      background: var(--bg-tertiary);
      flex-wrap: wrap;
      gap: var(--spacing-sm);
      flex-shrink: 0;
    }

    .logs-toolbar-left {
      display: flex;
      align-items: center;
      gap: var(--spacing-md);
      flex: 1 1 auto;
      min-width: 0;
      flex-wrap: wrap;
      max-width: 100%;
    }

    .logs-toolbar-right {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      flex-wrap: wrap;
      min-width: 0;
      max-width: 100%;
    }

    .logs-search-container {
      position: relative;
      display: flex;
      align-items: center;
      flex: 1 1 10rem;
      min-width: 0;
      max-width: min(300px, 100%);
    }

    .logs-search-icon {
      position: absolute;
      left: var(--spacing-sm);
      color: var(--text-muted);
      z-index: 1;
    }

    .logs-search-input {
      width: 100%;
      padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 32px;
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-sm);
      color: var(--text-primary);
      font-size: 0.875rem;
      transition: all var(--transition-fast);
    }

    .logs-search-input:focus {
      outline: none;
      border-color: var(--accent-primary);
      box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
    }

    .logs-clear-search {
      position: absolute;
      right: var(--spacing-xs);
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
      transition: all var(--transition-fast);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .logs-clear-search:hover {
      color: var(--text-primary);
      background: var(--bg-hover);
    }

    .logs-filter-buttons {
      display: flex;
      gap: var(--spacing-xs);
    }

    .logs-filter-btn {
      padding: var(--spacing-xs) var(--spacing-sm);
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-sm);
      color: var(--text-secondary);
      font-size: 0.8125rem;
      cursor: pointer;
      transition: all var(--transition-fast);
      display: flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }

    .logs-filter-btn:hover {
      background: var(--bg-hover);
      border-color: var(--accent-primary);
      color: var(--text-primary);
    }

    .logs-filter-btn.active {
      background: var(--accent-primary);
      border-color: var(--accent-primary);
      color: var(--bg-primary);
    }

    .logs-controls {
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
    }

    .logs-toggle-label {
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
      padding: var(--spacing-xs) var(--spacing-sm);
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-sm);
      color: var(--text-secondary);
      font-size: 0.8125rem;
      cursor: pointer;
      transition: all var(--transition-fast);
      user-select: none;
    }

    .logs-toggle-label:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }

    .logs-toggle-label input[type="checkbox"] {
      margin: 0;
      cursor: pointer;
    }

    .logs-control-btn {
      padding: var(--spacing-xs) var(--spacing-sm);
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-sm);
      color: var(--text-secondary);
      font-size: 0.8125rem;
      cursor: pointer;
      transition: all var(--transition-fast);
      display: flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }

    .logs-control-btn:hover {
      background: var(--bg-hover);
      border-color: var(--accent-primary);
      color: var(--text-primary);
    }

    .logs-container {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      height: auto;
      overflow-y: auto;
      overflow-x: auto;
      font-family: 'Courier New', monospace;
      font-size: 0.8125rem;
      line-height: 1.5;
      background: var(--bg-primary);
      padding: var(--spacing-sm) var(--spacing-md);
      position: relative;
    }

    .logs-container::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    .logs-container::-webkit-scrollbar-track {
      background: var(--bg-tertiary);
    }

    .logs-container::-webkit-scrollbar-thumb {
      background: var(--bg-hover);
      border-radius: 4px;
    }

    .logs-container::-webkit-scrollbar-thumb:hover {
      background: var(--accent-primary);
    }

    .logs-loading {
      padding: var(--spacing-xl);
      text-align: center;
      color: var(--text-muted);
    }

    .log-line {
      padding: 2px 0;
      word-wrap: break-word;
      white-space: pre-wrap;
      border-left: 3px solid transparent;
      padding-left: var(--spacing-sm);
      margin-left: var(--spacing-xs);
      transition: all var(--transition-fast);
    }

    .log-line:hover {
      background: rgba(255, 255, 255, 0.02);
    }

    .log-line.hidden {
      display: none;
    }

    .log-line.highlight {
      background: rgba(255, 212, 59, 0.15);
      border-left-color: var(--accent-warning);
    }

    .log-line.error,
    .log-line[data-level="error"] {
      color: var(--accent-danger);
      border-left-color: var(--accent-danger);
    }

    .log-line.warn,
    .log-line[data-level="warn"] {
      color: var(--accent-warning);
      border-left-color: var(--accent-warning);
    }

    .log-line.info,
    .log-line[data-level="info"] {
      color: var(--accent-info);
      border-left-color: var(--accent-info);
    }

    .log-line.debug,
    .log-line[data-level="debug"] {
      color: var(--text-muted);
      border-left-color: var(--text-muted);
    }

    .log-line.stdout {
      color: var(--text-primary);
    }

    .log-line.stderr {
      color: var(--accent-danger);
    }

    .log-timestamp {
      color: var(--text-muted);
      margin-right: var(--spacing-sm);
      font-weight: 500;
    }

    .log-level-badge {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      margin-right: var(--spacing-sm);
    }

    .log-level-badge.error {
      background: rgba(255, 107, 107, 0.2);
      color: var(--accent-danger);
    }

    .log-level-badge.warn {
      background: rgba(255, 212, 59, 0.2);
      color: var(--accent-warning);
    }

    .log-level-badge.info {
      background: rgba(116, 192, 252, 0.2);
      color: var(--accent-info);
    }

    .log-level-badge.debug {
      background: rgba(173, 181, 189, 0.2);
      color: var(--text-muted);
    }

    /* Terminal Styles */
    .terminal-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 10px;
      border-bottom: 1px solid var(--border-color);
      background: var(--bg-tertiary);
      flex-wrap: wrap;
      gap: var(--spacing-sm);
      flex-shrink: 0;
    }

    .terminal-toolbar-left,
    .terminal-toolbar-right {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      flex-wrap: wrap;
      min-width: 0;
      max-width: 100%;
    }

    .terminal-controls-group {
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
    }

    .terminal-controls-divider {
      width: 1px;
      height: 24px;
      background: var(--border-color);
      margin: 0 var(--spacing-xs);
    }

    .terminal-control-btn {
      padding: var(--spacing-xs) var(--spacing-sm);
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-sm);
      color: var(--text-secondary);
      font-size: 0.8125rem;
      cursor: pointer;
      transition: all var(--transition-fast);
      display: flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }

    .terminal-control-btn:hover {
      background: var(--bg-hover);
      border-color: var(--accent-primary);
      color: var(--text-primary);
    }

    .terminal-font-size {
      min-width: 30px;
      text-align: center;
      color: var(--text-primary);
      font-size: 0.8125rem;
      font-weight: 600;
    }

    .terminal-theme-select {
      padding: var(--spacing-xs) var(--spacing-sm);
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-sm);
      color: var(--text-primary);
      font-size: 0.8125rem;
      cursor: pointer;
      transition: all var(--transition-fast);
    }

    .terminal-theme-select:focus {
      outline: none;
      border-color: var(--accent-primary);
      box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
    }

    .terminal-container-wrapper {
      position: relative;
      width: 100%;
      flex: 1 1 auto;
      min-height: 180px;
      height: auto;
      max-height: none;
      background: var(--bg-primary);
      border-radius: 0 0 var(--border-radius) var(--border-radius);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .terminal-xterm-container {
      width: 100%;
      height: 100%;
      flex: 1 1 auto;
      min-height: 0;
      padding: var(--spacing-sm);
    }

    .terminal-xterm-container .xterm {
      width: 100%;
      height: 100%;
    }

    .terminal-xterm-container .xterm-viewport {
      background: transparent !important;
    }

    .terminal-xterm-container .xterm-screen {
      background: transparent !important;
    }

    /* Terminal Theme Variants */
    .terminal-theme-dark {
      --term-bg: #000000;
      --term-fg: #ffffff;
      --term-cursor: #ffffff;
      --term-selection: #4d4d4d;
    }

    .terminal-theme-light {
      --term-bg: #ffffff;
      --term-fg: #000000;
      --term-cursor: #000000;
      --term-selection: #b3d4fc;
    }

    .terminal-theme-solarized-dark {
      --term-bg: #002b36;
      --term-fg: #839496;
      --term-cursor: #93a1a1;
      --term-selection: #073642;
    }

    .terminal-theme-solarized-light {
      --term-bg: #fdf6e3;
      --term-fg: #657b83;
      --term-cursor: #586e75;
      --term-selection: #eee8d5;
    }

    .terminal-theme-monokai {
      --term-bg: #272822;
      --term-fg: #f8f8f2;
      --term-cursor: #f8f8f0;
      --term-selection: #49483e;
    }

    /* Connection Name Styling */
    .connection-name {
      font-weight: 600;
      color: var(--text-primary);
      font-size: 0.9375rem;
      margin-bottom: var(--spacing-xs);
    }

    /* Add peer modal form */
    #add-connection-form .form-control {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      border-radius: var(--border-radius-sm);
      padding: var(--spacing-sm) var(--spacing-md);
      font-size: 0.875rem;
    }

    #add-connection-form .form-control:focus {
      background: var(--bg-hover);
      border-color: var(--accent-primary);
      box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
    }

    .connections-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }



    /* Filter and Search Bar Styling */
    #container-search,
    #container-status-filter,
    #container-sort {
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      border-radius: var(--border-radius-sm);
      padding: var(--spacing-sm) var(--spacing-md);
      transition: all var(--transition-fast);
    }

    #container-search:focus,
    #container-status-filter:focus,
    #container-sort:focus {
      background: var(--bg-hover);
      border-color: var(--accent-primary);
      box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
      outline: none;
    }

    #clear-filters {
      padding: var(--spacing-sm) var(--spacing-md);
    }

    #welcome-page {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 700px;
      width: 90%;
      padding: var(--spacing-xl);
      background: linear-gradient(135deg, rgba(45, 212, 191, 0.1) 0%, rgba(20, 184, 166, 0.1) 100%);
      border-radius: var(--border-radius);
      border: 1px solid var(--border-color);
      backdrop-filter: blur(10px);
      box-shadow: var(--shadow-xl);
      animation: fadeInUp 0.6s ease-out;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translate(-50%, -40%);
      }
      to {
        opacity: 1;
        transform: translate(-50%, -50%);
      }
    }

    #welcome-page h1 {
      font-size: 3rem;
      font-weight: 700;
      background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: var(--spacing-md);
      letter-spacing: -0.02em;
    }

    #welcome-page p {
      font-size: 1.125rem;
      color: var(--text-secondary);
      margin-bottom: var(--spacing-sm);
      line-height: 1.8;
    }

    #welcome-page.hidden {
      display: none !important;
    }

    #dashboard {
      display: flex;
      flex-direction: column;
      flex: 1;
      width: 100%;
      margin-top: 35px;
      overflow-y: auto;
      position: relative;
      padding: var(--spacing-lg);
    }

    #dashboard.hidden {
      display: none !important;
    }

    #alert-container {
      position: fixed;
      top: 50px;
      right: var(--spacing-lg);
      z-index: 1055;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
      pointer-events: none;
      max-width: 400px;
    }

    .alert {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--spacing-md) var(--spacing-lg);
      background: var(--bg-elevated);
      color: var(--text-primary);
      border-radius: var(--border-radius-sm);
      box-shadow: var(--shadow-xl);
      font-size: 14px;
      animation: slideInRight 0.3s ease-out, fadeOut 4.5s ease-in forwards;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      pointer-events: auto;
      border: 1px solid var(--border-color);
      backdrop-filter: blur(10px);
      min-width: 300px;
    }

    @keyframes slideInRight {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

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

    .alert.success {
      border-left: 4px solid var(--accent-success);
      background: linear-gradient(90deg, rgba(16, 185, 129, 0.1) 0%, var(--bg-elevated) 100%);
    }

    .alert.danger {
      border-left: 4px solid var(--accent-danger);
      background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, var(--bg-elevated) 100%);
    }

    .alert.info {
      border-left: 4px solid var(--accent-info);
      background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, var(--bg-elevated) 100%);
    }

    .alert.warning {
      border-left: 4px solid var(--accent-warning);
      background: linear-gradient(90deg, rgba(245, 158, 11, 0.1) 0%, var(--bg-elevated) 100%);
    }

    .alert .close-btn {
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 16px;
      cursor: pointer;
      margin-left: var(--spacing-md);
      padding: var(--spacing-xs);
      border-radius: var(--border-radius-sm);
      transition: all var(--transition-fast);
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .alert .close-btn:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }

    /* Notification Tray Styles */
    .notification-tray {
      position: relative;
      z-index: 1060;
    }

    .notification-tray-toggle {
      position: relative;
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-sm);
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all var(--transition-fast);
      color: var(--text-primary);
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(10px);
      padding: 0;
    }

    .notification-tray-toggle:hover {
      background: var(--bg-hover);
      transform: scale(1.05);
      box-shadow: var(--shadow-md);
    }

    .notification-tray-toggle i {
      font-size: 16px;
    }

    .notification-badge {
      position: absolute;
      top: -6px;
      right: -6px;
      background: var(--accent-danger);
      color: white;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 600;
      border: 2px solid var(--bg-primary);
      min-width: 18px;
      padding: 0 3px;
    }

    .notification-badge:empty {
      display: none;
    }

    .notification-panel {
      position: fixed;
      top: calc(35px + var(--spacing-sm));
      right: var(--spacing-md);
      width: 400px;
      max-width: calc(100vw - 2 * var(--spacing-lg));
      max-height: calc(100vh - 35px - var(--spacing-lg));
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-md);
      box-shadow: var(--shadow-xl);
      backdrop-filter: blur(10px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: slideDown 0.3s ease-out;
      z-index: 1061;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
    }

    .notification-panel::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
    }

    .notification-panel.hidden {
      display: none;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .notification-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--spacing-md) var(--spacing-lg);
      border-bottom: 1px solid var(--border-color);
    }

    .notification-panel-title {
      margin: 0;
      color: var(--text-primary);
      font-size: 1.125rem;
      font-weight: 600;
    }

    .notification-panel-actions {
      display: flex;
      gap: var(--spacing-xs);
    }

    .notification-action-btn {
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      padding: var(--spacing-xs);
      border-radius: var(--border-radius-sm);
      transition: all var(--transition-fast);
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .notification-action-btn:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }

    .notification-filters {
      display: flex;
      gap: var(--spacing-xs);
      padding: var(--spacing-sm) var(--spacing-lg);
      border-bottom: 1px solid var(--border-color);
      overflow-x: auto;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
    }

    .notification-filters::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
    }

    .notification-filter-btn {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      padding: var(--spacing-xs) var(--spacing-md);
      border-radius: var(--border-radius-sm);
      cursor: pointer;
      transition: all var(--transition-fast);
      font-size: 0.875rem;
      white-space: nowrap;
    }

    .notification-filter-btn:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }

    .notification-filter-btn.active {
      background: var(--accent-primary);
      border-color: var(--accent-primary);
      color: white;
    }

    .notification-list {
      flex: 1;
      overflow-y: auto;
      padding: var(--spacing-sm);
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
    }

    .notification-list::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
    }

    .notification-item {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-sm);
      padding: var(--spacing-md);
      margin-bottom: var(--spacing-sm);
      display: flex;
      gap: var(--spacing-md);
      transition: all var(--transition-fast);
      position: relative;
      animation: slideInRight 0.3s ease-out;
    }

    .notification-item:hover {
      background: var(--bg-hover);
      transform: translateX(-2px);
      box-shadow: var(--shadow-md);
    }

    .notification-item.unread {
      border-left: 4px solid var(--accent-primary);
      background: linear-gradient(90deg, rgba(45, 212, 191, 0.1) 0%, var(--bg-tertiary) 100%);
    }

    .notification-item.unread:hover {
      background: linear-gradient(90deg, rgba(45, 212, 191, 0.15) 0%, var(--bg-hover) 100%);
    }

    .notification-icon {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--border-radius-sm);
      font-size: 16px;
    }

    .notification-item.success .notification-icon {
      background: rgba(16, 185, 129, 0.2);
      color: var(--accent-success);
    }

    .notification-item.danger .notification-icon {
      background: rgba(239, 68, 68, 0.2);
      color: var(--accent-danger);
    }

    .notification-item.warning .notification-icon {
      background: rgba(245, 158, 11, 0.2);
      color: var(--accent-warning);
    }

    .notification-item.info .notification-icon {
      background: rgba(59, 130, 246, 0.2);
      color: var(--accent-info);
    }

    .notification-content {
      flex: 1;
      min-width: 0;
    }

    .notification-message {
      color: var(--text-primary);
      font-size: 0.875rem;
      line-height: 1.5;
      margin: 0 0 var(--spacing-xs) 0;
      word-wrap: break-word;
    }

    .notification-timestamp {
      color: var(--text-secondary);
      font-size: 0.75rem;
      margin: 0;
    }

    .notification-actions {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
      flex-shrink: 0;
    }

    .notification-action {
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      padding: var(--spacing-xs);
      border-radius: var(--border-radius-sm);
      transition: all var(--transition-fast);
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }

    .notification-action:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }

    .notification-empty {
      text-align: center;
      padding: var(--spacing-xl);
      color: var(--text-secondary);
    }

    .notification-empty i {
      font-size: 3rem;
      margin-bottom: var(--spacing-md);
      opacity: 0.5;
    }

    .notification-empty p {
      margin: 0;
      font-size: 0.875rem;
    }

    @media (max-width: 768px) {
      #alert-container {
        bottom: 10px;
        right: 10px;
      }

      .alert {
        max-width: 90%;
        font-size: 12px;
        padding: 10px 15px;
        white-space: normal;
        /* Allow wrapping on small screens */
        text-overflow: clip;
        /* Disable ellipsis when wrapping */
      }

      .notification-tray {
        position: relative;
      }

      .notification-tray-toggle {
        width: 28px;
        height: 28px;
        min-width: 28px;
      }

      .notification-tray-toggle i {
        font-size: 14px;
      }

      .notification-panel {
        width: calc(100vw - 2 * var(--spacing-sm));
        max-height: calc(100vh - 35px - var(--spacing-lg));
        top: calc(35px + var(--spacing-sm));
        right: var(--spacing-sm);
      }

      .notification-panel-header {
        padding: var(--spacing-sm) var(--spacing-md);
      }

      .notification-panel-title {
        font-size: 1rem;
      }

      .notification-filters {
        padding: var(--spacing-xs) var(--spacing-md);
      }

      .notification-filter-btn {
        font-size: 0.75rem;
        padding: var(--spacing-xs) var(--spacing-sm);
      }

      .notification-item {
        padding: var(--spacing-sm);
      }

      .notification-message {
        font-size: 0.8125rem;
      }
    }

    @media (min-width: 768px) {
      .alert {
        white-space: nowrap;
        /* Re-enable nowrap for larger screens */
        text-overflow: ellipsis;
        /* Add ellipsis for overflowed text */
      }
    }

    #sidebar.collapsed .btn-danger {
      display: none;
    }

    /* Collapsed peer rows: status-only (no overflowing actions) */
    #sidebar.collapsed #connection-list .list-group-item {
      overflow: hidden;
    }

    /* Skeleton loader styles */
    .skeleton {
      background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
      background-size: 200% 100%;
      animation: loading 1.5s ease-in-out infinite;
      border-radius: var(--border-radius-sm);
      height: 20px;
    }

    .skeleton-text {
      width: 60%;
    }

    .skeleton-number {
      width: 40px;
    }

    .skeleton-badge {
      width: 80px;
      height: 24px;
    }

    .skeleton-buttons {
      width: 200px;
      height: 32px;
    }

    @keyframes loading {
      0% {
        background-position: 200% 0;
      }
      100% {
        background-position: -200% 0;
      }
    }

    /* Progress bar container */
    .progress-container {
      background: var(--bg-elevated);
      padding: var(--spacing-md);
      border-radius: var(--border-radius-sm);
      margin-bottom: var(--spacing-sm);
      border: 1px solid var(--border-color);
    }

    /* Operation status container */
    .operation-status-container {
      max-width: 350px;
    }

    .operation-status-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacing-md);
      margin-bottom: var(--spacing-sm);
      background: var(--bg-elevated);
      border-radius: var(--border-radius-sm);
      border-left: 4px solid var(--border-color);
      border: 1px solid var(--border-color);
      transition: all var(--transition-fast);
    }

    .operation-status-item:hover {
      background: var(--bg-hover);
      transform: translateX(4px);
    }

    .operation-status-item.status-processing {
      border-left-color: var(--accent-info);
    }

    .operation-status-item.status-completed {
      border-left-color: var(--accent-success);
    }

    .operation-status-item.status-failed {
      border-left-color: var(--accent-danger);
    }

    /* Stats visualization — compact column layout (overridden further in modern.css) */
    .stats-container {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
      min-width: 0;
      width: 100%;
    }

    .stats-value {
      min-width: 0;
      font-weight: 600;
      font-size: 12px;
      color: var(--text-primary);
    }

    .stats-bar-container {
      flex: 0 0 auto;
      height: 6px;
      background: var(--bg-tertiary);
      border-radius: 999px;
      overflow: hidden;
      min-width: 0;
      width: 100%;
      position: relative;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .stats-bar {
      height: 100%;
      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
      border-radius: var(--border-radius-sm);
      position: relative;
      box-shadow: 0 0 8px currentColor;
    }

    .stats-bar::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      animation: shimmer 2s infinite;
    }

    @keyframes shimmer {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    .cpu-bar {
      background: linear-gradient(90deg, var(--accent-success), var(--accent-warning), var(--accent-danger));
    }

    .memory-bar {
      background: linear-gradient(90deg, var(--accent-info), var(--accent-warning), var(--accent-danger));
    }

    /* General scrollbar styles for dark and modern scrollbars */
    * {
      scrollbar-width: thin;
      scrollbar-color: var(--bg-hover) var(--bg-primary);
    }

    /* WebKit-based browsers (Chrome, Edge, Safari) */
    *::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    *::-webkit-scrollbar-track {
      background: var(--bg-primary);
      border-radius: var(--border-radius-sm);
    }

    *::-webkit-scrollbar-thumb {
      background: var(--bg-hover);
      border-radius: var(--border-radius-sm);
      border: 2px solid var(--bg-primary);
      transition: background var(--transition-fast);
    }

    *::-webkit-scrollbar-thumb:hover {
      background: var(--accent-primary);
    }

    *::-webkit-scrollbar-thumb:active {
      background: var(--accent-secondary);
    }

    /* Accordion styling for deploy modal */
    .accordion-item {
      background: var(--bg-elevated);
      border-color: var(--border-color);
      border-radius: var(--border-radius-sm);
      margin-bottom: var(--spacing-sm);
      overflow: hidden;
    }

    .accordion-button {
      background: var(--bg-elevated);
      color: var(--text-primary);
      border-color: var(--border-color);
      transition: all var(--transition-fast);
    }

    .accordion-button:hover {
      background: var(--bg-hover);
    }

    .accordion-button:not(.collapsed) {
      background: var(--bg-hover);
      color: var(--text-primary);
      box-shadow: inset 0 -1px 0 var(--border-color);
      font-weight: 600;
    }

    .accordion-button:focus {
      box-shadow: 0 0 0 0.25rem rgba(45, 212, 191, 0.25);
      border-color: var(--accent-primary);
    }

    .accordion-body {
      background: var(--bg-elevated);
      color: var(--text-secondary);
      padding: var(--spacing-lg);
    }

    /* Improve form label visibility in deploy modal */
    #templateDeployModalUnique .form-label,
    .form-label {
      color: var(--text-primary);
      font-weight: 600;
      margin-bottom: var(--spacing-sm);
      font-size: 0.875rem;
      letter-spacing: 0.01em;
    }

    /* Improve form control visibility in deploy modal */
    #templateDeployModalUnique .form-control,
    #templateDeployModalUnique .form-select,
    .form-control,
    .form-select {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      border-radius: var(--border-radius-sm);
      padding: var(--spacing-sm) var(--spacing-md);
      transition: all var(--transition-fast);
    }

    #templateDeployModalUnique .form-control:hover,
    #templateDeployModalUnique .form-select:hover,
    .form-control:hover,
    .form-select:hover {
      border-color: var(--accent-primary);
      background: var(--bg-hover);
    }

    #templateDeployModalUnique .form-control:focus,
    #templateDeployModalUnique .form-select:focus,
    .form-control:focus,
    .form-select:focus {
      background: var(--bg-hover);
      border-color: var(--accent-primary);
      color: var(--text-primary);
      box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
      outline: none;
    }

    /* Improve help text visibility */
    #templateDeployModalUnique .text-muted,
    .text-muted {
      color: var(--text-muted) !important;
      font-size: 0.8125rem;
    }

    /* Improve small text visibility */
    #templateDeployModalUnique small,
    small {
      color: var(--text-muted);
      font-size: 0.8125rem;
    }

    /* Improve button visibility */
    #templateDeployModalUnique .btn-outline-primary,
    .btn-outline-primary {
      border-color: var(--accent-primary);
      color: var(--accent-primary);
      transition: all var(--transition-fast);
      border-width: 1.5px;
      font-weight: 500;
    }

    #templateDeployModalUnique .btn-outline-primary:hover,
    .btn-outline-primary:hover {
      background: var(--accent-primary);
      border-color: var(--accent-primary);
      color: #042f1a;
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }

    /* Ensure helper / muted copy stays readable on dark panels */
    .page-subtitle,
    .info-card-body .text-muted,
    .accordion-body .text-muted,
    .modal-body .text-muted {
      color: var(--text-muted) !important;
    }

    .list-group-item,
    .list-group-item.bg-dark {
      color: var(--text-primary) !important;
    }

    .list-group-item .text-muted,
    .list-group-item small {
      color: var(--text-muted) !important;
    }

    /* Improve input placeholder visibility */
    #templateDeployModalUnique .form-control::placeholder,
    #templateDeployModalUnique .form-select::placeholder,
    .form-control::placeholder,
    .form-select::placeholder {
      color: var(--text-muted);
      opacity: 1;
    }

    /* Preset field styling */
    .preset-field {
      background-color: var(--bg-secondary) !important;
      border-color: var(--border-color) !important;
      cursor: not-allowed;
      opacity: 0.7;
    }

    .preset-field:disabled {
      background-color: var(--bg-secondary) !important;
      opacity: 0.7;
    }

    /* Slider container styling */
    .slider-container {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
      margin-bottom: var(--spacing-sm);
    }

    .slider-input {
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: var(--bg-tertiary);
      outline: none;
      -webkit-appearance: none;
      appearance: none;
    }

    .slider-input::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--accent-primary);
      cursor: pointer;
      border: 2px solid var(--bg-elevated);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      transition: all var(--transition-fast);
    }

    .slider-input::-webkit-slider-thumb:hover {
      transform: scale(1.1);
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    }

    .slider-input::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--accent-primary);
      cursor: pointer;
      border: 2px solid var(--bg-elevated);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      transition: all var(--transition-fast);
    }

    .slider-input::-moz-range-thumb:hover {
      transform: scale(1.1);
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    }

    .slider-input:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .slider-value-display {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
    }

    .slider-number-input {
      max-width: 120px;
      flex-shrink: 0;
    }

    /* Environment variable item styling */
    .env-var-item {
      padding: var(--spacing-md);
      background: var(--bg-tertiary);
      border-radius: var(--border-radius-sm);
      border: 1px solid var(--border-color);
      margin-bottom: var(--spacing-md);
    }

    .env-var-item .form-label {
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
    }

    /* Validation error styling */
    .validation-error {
      color: var(--accent-danger);
      font-size: 0.75rem;
      margin-top: var(--spacing-xs);
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
    }

    .validation-error::before {
      content: "⚠";
      font-size: 0.875rem;
    }

    .form-control.is-invalid,
    .form-select.is-invalid {
      border-color: var(--accent-danger);
      box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1);
    }

    .form-control.is-valid,
    .form-select.is-valid {
      border-color: var(--accent-success);
      box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
    }

    /* Tooltip/help text styling */
    .env-var-item small.text-muted {
      display: block;
      margin-top: var(--spacing-xs);
      line-height: 1.4;
      color: var(--text-muted);
    }

    /* Checkbox/switch styling for boolean env vars */
    .form-check-input:checked {
      background-color: var(--accent-primary);
      border-color: var(--accent-primary);
    }

    .form-check-input:focus {
      border-color: var(--accent-primary);
      box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
    }

    /* Select dropdown styling */
    .form-select {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 0.75rem center;
      background-size: 16px 12px;
    }

    .form-select:disabled {
      background-color: var(--bg-secondary);
      opacity: 0.7;
      cursor: not-allowed;
    }

    /* Form control styling in dark mode */
    .form-control:focus,
    .form-select:focus {
      background-color: var(--bg-hover);
      border-color: var(--accent-primary);
      color: var(--text-primary);
    }

    /* Array item styling */
    .array-item {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      align-items: center;
    }

    .array-item input {
      flex: 1;
    }

    .array-item .btn-sm {
      flex-shrink: 0;
    }

    /* Modern List Group Styling */
    .list-group-item {
      position: relative;
      display: block;
      padding: var(--spacing-md);
      color: var(--text-primary);
      text-decoration: none;
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-sm);
      margin-bottom: var(--spacing-sm);
      transition: all var(--transition-fast);
    }

    .list-group-item:hover {
      background: var(--bg-hover);
      transform: translateX(4px);
      border-color: var(--accent-primary);
    }

    .text-primary {
      color: var(--accent-primary) !important;
    }

    .list-group {
      --bs-list-group-color: var(--text-primary);
      --bs-list-group-bg: transparent;
      --bs-list-group-border-color: transparent;
      --bs-list-group-border-width: 0;
      --bs-list-group-border-radius: var(--border-radius-sm);
      --bs-list-group-item-padding-x: var(--spacing-md);
      --bs-list-group-item-padding-y: var(--spacing-md);
      --bs-list-group-action-color: var(--text-secondary);
      --bs-list-group-action-hover-color: var(--text-primary);
      --bs-list-group-action-hover-bg: var(--bg-hover);
      --bs-list-group-action-active-color: var(--text-primary);
      --bs-list-group-action-active-bg: var(--bg-hover);
      --bs-list-group-disabled-color: var(--text-muted);
      --bs-list-group-disabled-bg: var(--bg-tertiary);
      --bs-list-group-active-color: var(--text-primary);
      --bs-list-group-active-bg: var(--accent-primary);
      --bs-list-group-active-border-color: var(--accent-primary);
      display: flex;
      flex-direction: column;
      padding-left: 0;
      margin-bottom: 0;
      gap: var(--spacing-sm);
    }

    /* Modern Table Styling */
    .table-dark {
      --bs-table-bg: var(--bg-elevated);
      --bs-table-color: var(--text-primary);
      --bs-table-border-color: var(--border-color);
      border-color: var(--border-color);
    }

    .table-dark thead th {
      background: var(--bg-tertiary);
      color: var(--text-primary);
      font-weight: 600;
      text-transform: uppercase;
      font-size: 0.75rem;
      letter-spacing: 0.05em;
      padding: var(--spacing-md);
      border-bottom: 2px solid var(--border-color);
    }

    .table-dark tbody tr {
      background: var(--bg-elevated);
      border-bottom: 1px solid var(--border-color);
      transition: all var(--transition-fast);
    }

    .table-dark tbody tr:hover {
      background: var(--bg-hover);
      transform: scale(1.001);
      box-shadow: var(--shadow-sm);
    }

    .table-dark tbody td {
      padding: var(--spacing-md);
      vertical-align: middle;
      color: var(--text-secondary);
    }

    .table-striped > tbody > tr:nth-of-type(odd) {
      --bs-table-accent-bg: rgba(45, 212, 191, 0.03);
    }

    /* Clickable Container Name Link */
    .container-name-link {
      color: var(--accent-primary);
      text-decoration: none;
      font-weight: 500;
      cursor: pointer;
      transition: all var(--transition-fast);
      display: inline-block;
    }

    .container-name-link:hover {
      color: var(--accent-secondary);
      text-decoration: underline;
      transform: translateX(2px);
    }

    .container-name-link:active {
      color: var(--accent-info);
      transform: translateX(0);
    }

    .container-name-link:focus {
      outline: 2px solid var(--accent-primary);
      outline-offset: 2px;
      border-radius: 2px;
    }

    /* Chart Wrapper Styles - Prevent vertical growth */
    .chart-wrapper {
      height: 250px;
      position: relative;
      width: 100%;
    }

    .chart-wrapper canvas {
      max-height: 100%;
      width: 100% !important;
      height: 100% !important;
    }

    /* Modern Button Styles */
    .btn {
      border-radius: var(--border-radius-sm);
      padding: var(--spacing-sm) var(--spacing-md);
      font-weight: 500;
      transition: all var(--transition-fast);
      border-width: 1.5px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--spacing-xs);
    }

    .btn:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }

    .btn:active {
      transform: translateY(0);
    }

    .btn-primary {
      background: var(--accent-primary);
      border-color: var(--accent-primary);
      color: var(--bg-primary);
      font-weight: 500;
    }

    .btn-primary:hover {
      background: var(--accent-secondary);
      border-color: var(--accent-secondary);
      box-shadow: 0 4px 12px rgba(45, 212, 191, 0.4);
    }

    .btn-outline-success {
      border-color: var(--accent-success);
      color: var(--accent-success);
    }

    .btn-outline-success:hover {
      background: var(--accent-success);
      color: var(--text-primary);
    }

    .btn-outline-danger {
      border-color: var(--accent-danger);
      color: var(--accent-danger);
    }

    .btn-outline-danger:hover {
      background: var(--accent-danger);
      color: var(--text-primary);
    }

    .btn-outline-warning {
      border-color: rgba(251, 191, 36, 0.32);
      color: #e8c878;
    }

    .btn-outline-warning:hover {
      background: rgba(251, 191, 36, 0.1);
      border-color: rgba(251, 191, 36, 0.5);
      color: #fef3c7;
    }

    .btn-outline-info {
      border-color: var(--accent-info);
      color: var(--accent-info);
    }

    .btn-outline-info:hover {
      background: var(--accent-info);
      color: var(--text-primary);
    }

    /* Secondary outline — page-level utility actions (Prune, cache, etc.) */
    .btn-outline-secondary {
      border-color: rgba(255, 255, 255, 0.14);
      color: var(--text-secondary);
      background: transparent;
    }

    .btn-outline-secondary:hover {
      background: var(--bg-hover);
      border-color: rgba(255, 255, 255, 0.22);
      color: var(--text-primary);
    }

    /* Modal Styling — base layer (modern.css extends the full system) */
    .modal-content {
      background: linear-gradient(165deg, #1a2332 0%, #121820 50%, #0e141c 100%);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 16px;
      box-shadow:
        0 28px 64px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(45, 212, 191, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
      overflow: hidden;
    }

    .modal-header {
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 0;
      padding: 1.15rem 1.35rem 1rem;
    }

    .modal-title {
      color: var(--text-primary);
      font-weight: 700;
      font-size: 1.05rem;
      letter-spacing: -0.025em;
    }

    .modal-body {
      background: transparent;
      color: var(--text-secondary);
      padding: 1.25rem 1.35rem 1.1rem;
    }

    .modal-footer {
      background: rgba(0, 0, 0, 0.22);
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 0;
      padding: 0.9rem 1.35rem;
      gap: 0.55rem;
    }

    .btn-close-white {
      filter: invert(1) grayscale(100%) brightness(200%);
    }

    /* Status Badge Styling */
    .badge {
      padding: var(--spacing-xs) var(--spacing-sm);
      border-radius: var(--border-radius-sm);
      font-weight: 600;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Container Status Badges */
    .status-running {
      background: rgba(16, 185, 129, 0.2);
      color: var(--accent-success);
      border: 1px solid var(--accent-success);
    }

    .status-exited {
      background: rgba(239, 68, 68, 0.2);
      color: var(--accent-danger);
      border: 1px solid var(--accent-danger);
    }

    .status-created {
      background: rgba(59, 130, 246, 0.2);
      color: var(--accent-info);
      border: 1px solid var(--accent-info);
    }

    .status-restarting {
      background: rgba(245, 158, 11, 0.2);
      color: var(--accent-warning);
      border: 1px solid var(--accent-warning);
    }

    /* Connection Item Enhanced Styling — buttons stay pinned; labels ellipsize */
    .connection-item {
      background: transparent !important;
      border: none !important;
      margin: 0 !important;
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      min-width: 0;
    }

    .connection-info {
      display: block;
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
    }

    .connection-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .connection-item .connection-actions {
      flex: 0 0 auto;
    }

    .connection-item .btn-group {
      flex-wrap: nowrap;
      flex-shrink: 0;
    }

    .connection-item .col-5 {
      min-width: 0;
      flex-shrink: 0;
    }

    /* Responsive Design Improvements */
    @media (max-width: 1200px) {
      #sidebar {
        width: 240px;
      }

      #sidebar.collapsed {
        width: 68px;
      }

      #content {
        margin-left: 240px;
      }

      #sidebar.collapsed~#content {
        margin-left: 68px;
      }
    }

    @media (max-width: 768px) {
      #alert-container {
        right: var(--spacing-sm);
        left: var(--spacing-sm);
        max-width: calc(100% - 2 * var(--spacing-sm));
      }

      .alert {
        min-width: auto;
        width: 100%;
      }

      #dashboard {
        padding: var(--spacing-md);
      }
    }

    /* Animation for page transitions */
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    /* Loading state improvements */
    .spinner-border {
      border-color: var(--accent-primary);
      border-right-color: transparent;
    }

    /* Additional utility classes */
    .glass-effect {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .gradient-text {
      background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Container Inspect Modal Styling */
    #inspect-json-content {
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      line-height: 1.6;
    }

    .inspect-key-value {
      display: flex;
      padding: var(--spacing-sm) 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .inspect-key-value:last-child {
      border-bottom: none;
    }

    .inspect-key {
      font-weight: 600;
      color: var(--accent-primary);
      min-width: 200px;
      flex-shrink: 0;
      font-size: 0.875rem;
    }

    .inspect-value {
      color: var(--text-secondary);
      flex: 1;
      word-break: break-word;
      font-size: 0.875rem;
    }

    .inspect-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .inspect-list-item {
      padding: var(--spacing-xs) 0;
      color: var(--text-secondary);
      font-size: 0.875rem;
      border-left: 2px solid var(--border-color);
      padding-left: var(--spacing-sm);
      margin-left: var(--spacing-sm);
      margin-bottom: var(--spacing-xs);
    }

    .inspect-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 0.75rem;
      font-weight: 600;
      margin-right: var(--spacing-xs);
      margin-bottom: var(--spacing-xs);
    }

    .inspect-badge-success {
      background: rgba(16, 185, 129, 0.2);
      color: var(--accent-success);
      border: 1px solid var(--accent-success);
    }

    .inspect-badge-danger {
      background: rgba(239, 68, 68, 0.2);
      color: var(--accent-danger);
      border: 1px solid var(--accent-danger);
    }

    /* Port Mapping Structured Input Styles */
    .port-mapping-item {
      display: flex;
      align-items: flex-start;
      gap: var(--spacing-md);
      padding: var(--spacing-md);
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-sm);
      margin-bottom: var(--spacing-sm);
    }

    .port-mapping-fields {
      display: flex;
      align-items: flex-start;
      gap: var(--spacing-md);
      flex: 1;
      flex-wrap: wrap;
    }

    .port-field-group {
      flex: 1;
      min-width: 120px;
    }

    .port-field-label {
      display: block;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: var(--spacing-xs);
    }

    .port-connector {
      display: flex;
      align-items: center;
      padding-top: 1.75rem;
      color: var(--accent-primary);
      font-size: 0.875rem;
    }

    .port-error-msg {
      display: block;
      color: var(--accent-danger);
      font-size: 0.75rem;
      margin-top: 2px;
    }

    /* Volume Mount Structured Input Styles */
    .volume-mount-item {
      display: flex;
      align-items: flex-start;
      gap: var(--spacing-md);
      padding: var(--spacing-md);
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-sm);
      margin-bottom: var(--spacing-sm);
    }

    .volume-mount-fields {
      display: flex;
      align-items: flex-start;
      gap: var(--spacing-md);
      flex: 1;
      flex-wrap: wrap;
    }

    .volume-field-group {
      flex: 1;
      min-width: 150px;
    }

    .volume-field-label {
      display: block;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: var(--spacing-xs);
    }

    .volume-connector {
      display: flex;
      align-items: center;
      padding-top: 1.75rem;
      color: var(--accent-primary);
      font-size: 0.875rem;
    }

    .volume-error-msg {
      display: block;
      color: var(--accent-danger);
      font-size: 0.75rem;
      margin-top: 2px;
    }

    .volume-host-path-group .input-group {
      display: flex;
    }

    .volume-host-path-group .input-group .form-control {
      flex: 1;
    }

    /* Validation States */
    .is-invalid {
      border-color: var(--accent-danger) !important;
    }

    .is-invalid:focus {
      border-color: var(--accent-danger) !important;
      box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25) !important;
    }

    /* File Browser Styles */
    #fileBrowserModal .modal-body {
      padding: var(--spacing-md);
    }

    #fileBrowserBreadcrumb {
      background: var(--bg-tertiary);
      padding: var(--spacing-sm);
      border-radius: var(--border-radius-sm);
      border: 1px solid var(--border-color);
    }

    #fileBrowserBreadcrumb .breadcrumb {
      margin-bottom: 0;
      background: transparent;
    }

    #fileBrowserBreadcrumb .breadcrumb-item a {
      color: var(--accent-primary);
      text-decoration: none;
      transition: color var(--transition-fast);
    }

    #fileBrowserBreadcrumb .breadcrumb-item a:hover {
      color: var(--accent-secondary);
    }

    #fileBrowserBreadcrumb .breadcrumb-item.active {
      color: var(--text-primary);
    }

    .file-browser-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .file-browser-item {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      padding: var(--spacing-sm) var(--spacing-md);
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-sm);
      cursor: pointer;
      transition: all var(--transition-fast);
    }

    .file-browser-item:hover {
      background: var(--bg-hover);
      border-color: var(--accent-primary);
      transform: translateX(4px);
    }

    .file-browser-item i {
      font-size: 1.125rem;
      width: 20px;
      text-align: center;
    }

    .file-browser-item span {
      flex: 1;
      color: var(--text-primary);
    }

    .file-browser-item .fa-chevron-right {
      color: var(--text-muted);
      font-size: 0.75rem;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .port-mapping-fields,
      .volume-mount-fields {
        flex-direction: column;
      }

      .port-connector,
      .volume-connector {
        padding-top: 0;
        transform: rotate(90deg);
        margin: var(--spacing-xs) 0;
      }

      .port-field-group,
      .volume-field-group {
        min-width: 100%;
      }
    }

    .inspect-badge-info {
      background: rgba(59, 130, 246, 0.2);
      color: var(--accent-info);
      border: 1px solid var(--accent-info);
    }

    .inspect-badge-warning {
      background: rgba(245, 158, 11, 0.2);
      color: var(--accent-warning);
      border: 1px solid var(--accent-warning);
    }

    .inspect-section-empty {
      color: var(--text-muted);
      font-style: italic;
      padding: var(--spacing-md);
      text-align: center;
    }

    /* ─── Container details: dense layout, fill-height panes ─── */
    #container-details-view {
      overflow: hidden;
      padding: 12px 16px 12px;
    }

    #container-details-view > .container-details-layout {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
      max-width: 100%;
      padding-left: 0;
      padding-right: 0;
    }

    .container-details-header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px 12px;
      flex-shrink: 0;
      margin-bottom: 8px;
      min-height: 2.25rem;
      min-width: 0;
      max-width: 100%;
      width: 100%;
      /* Prefer a single toolbar row; stack as whole left/right units only when needed */
      flex-wrap: nowrap;
    }

    .container-details-header-left {
      display: flex;
      align-items: center;
      gap: 8px 10px;
      min-width: 0;
      flex: 0 1 auto;
      max-width: min(40%, 22rem);
    }

    .container-details-back {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .container-details-header h2 {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 1.15rem;
      font-weight: 650;
      line-height: 1.25;
      min-width: 0;
      flex: 1 1 auto;
      margin: 0;
      max-width: 100%;
    }

    .container-details-header h2 > i {
      flex-shrink: 0;
      opacity: 0.9;
    }

    .container-details-title-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }

    /* State badge sits between title and actions — same row, vertically centered */
    #container-details-state-badge,
    .container-details-state-badge {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      align-self: center;
      max-width: 8rem;
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.2;
    }

    #container-details-state-badge[hidden],
    .container-details-state-badge[hidden] {
      display: none !important;
    }

    .container-details-actions {
      display: flex;
      align-items: center;
      /* Keep Start…Remove on one line; scroll if the pane is too narrow */
      flex-wrap: nowrap;
      gap: 6px;
      flex: 1 1 auto;
      justify-content: flex-end;
      min-width: 0;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      padding-bottom: 1px; /* room for thin scrollbar without layout jump */
    }

    .container-details-actions .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-weight: 600;
      flex: 0 0 auto;
      min-height: 1.85rem;
      white-space: nowrap;
    }

    .container-details-actions .btn:disabled {
      opacity: 0.4;
    }

    .container-details-action-sep,
    .container-details-actions .containers-action-sep {
      width: 1px;
      height: 22px;
      background: var(--border-color);
      margin: 0 2px;
      flex-shrink: 0;
      align-self: center;
    }

    /* Viewport fallback when container queries unavailable / full-window */
    @media (max-width: 960px) {
      .container-details-actions .btn span {
        display: none;
      }
      .container-details-actions .btn {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        min-width: 2rem;
      }
    }

    /* Narrow windows: title row, then badge + actions still one aligned toolbar */
    @media (max-width: 720px) {
      .container-details-header {
        flex-wrap: wrap;
        row-gap: 8px;
      }
      .container-details-header-left {
        flex: 1 1 100%;
        max-width: 100%;
      }
      #container-details-state-badge,
      .container-details-state-badge {
        order: 2;
      }
      .container-details-actions {
        order: 3;
        flex: 1 1 auto;
        min-width: 0;
      }
    }

    .container-details-tabs {
      display: flex;
      flex-shrink: 0;
      margin-bottom: 8px !important;
      border-bottom-color: var(--border-color);
      gap: 2px;
      /* Horizontal scroll when narrow — avoid wrapping that steals height / clips labels */
      flex-wrap: nowrap !important;
      overflow-x: auto;
      overflow-y: hidden;
      max-width: 100%;
      min-width: 0;
      width: 100%;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      overscroll-behavior-x: contain;
    }

    .container-details-tabs .nav-item {
      flex: 0 0 auto;
    }

    .container-details-tabs .nav-link {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.35rem 0.7rem;
      font-size: 0.8125rem;
      font-weight: 600;
      border-radius: 8px 8px 0 0;
      white-space: nowrap;
    }

    .container-details-tabs .nav-link i {
      font-size: 0.85em;
      opacity: 0.9;
      flex-shrink: 0;
    }

    .container-details-tabs .nav-link span {
      line-height: 1.2;
    }

    .container-details-tab-content {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    /* Active pane fills remaining viewport height */
    #container-details-tab-content > .tab-pane {
      flex: 1 1 auto;
      min-height: 0;
    }

    #container-details-tab-content > .tab-pane.show.active {
      display: flex;
      flex-direction: column;
    }

    .detail-tab-body {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* Overview: fill remaining viewport; scroll when content exceeds pane */
    #overview-pane.tab-pane.show.active {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
    }

    #overview-pane .detail-tab-body {
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .detail-tab-body.detail-scroll-body,
    .detail-scroll-body {
      overflow-y: auto;
      overflow-x: hidden;
      min-height: 0;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    /* Single fill panel for logs / terminal / processes */
    .detail-fill-panel {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-sm);
      overflow: hidden;
      margin: 0;
    }

    .detail-panel-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 6px 10px;
      border-bottom: 1px solid var(--border-color);
      background: var(--bg-tertiary);
      flex-shrink: 0;
      flex-wrap: wrap;
      min-width: 0;
      max-width: 100%;
    }

    .detail-panel-title {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    /* Dense section cards inside detail tabs */
    #container-details-view .detail-section-card {
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-sm);
      padding: 10px 12px;
      margin-bottom: 8px;
      box-shadow: none;
    }

    #container-details-view .detail-section-card:last-child {
      margin-bottom: 0;
    }

    #container-details-view .detail-section-card:hover {
      transform: none;
      box-shadow: none;
      border-color: var(--border-color);
    }

    #container-details-view .detail-section-card--flat {
      padding: 12px 14px;
    }

    #container-details-view .detail-section-header {
      gap: 6px;
      margin-bottom: 8px;
      padding-bottom: 6px;
    }

    #container-details-view .detail-section-header i {
      font-size: 0.9rem;
    }

    #container-details-view .detail-section-title {
      font-size: 0.8125rem;
      font-weight: 650;
      letter-spacing: 0.01em;
    }

    #container-details-view .detail-info-grid {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 8px 14px;
      margin-top: 0;
    }

    #container-details-view .detail-info-item {
      gap: 2px;
    }

    #container-details-view .detail-info-label {
      font-size: 0.6875rem;
      letter-spacing: 0.04em;
    }

    #container-details-view .detail-info-value {
      font-size: 0.875rem;
      line-height: 1.35;
    }

    #container-details-view .detail-code-block {
      padding: 8px 10px;
      margin-top: 4px;
    }

    #container-details-view .detail-code-block pre {
      font-size: 0.75rem;
      line-height: 1.45;
    }

    #container-details-view .detail-env-table {
      margin-top: 0;
    }

    #container-details-view .detail-env-table th,
    #container-details-view .detail-env-table td,
    #container-details-view .port-mapping-table th,
    #container-details-view .port-mapping-table td {
      padding: 5px 8px;
      font-size: 0.8125rem;
    }

    #container-details-view .network-card {
      padding: 8px 10px;
      margin-bottom: 8px;
    }

    #container-details-view .network-card:last-child {
      margin-bottom: 0;
    }

    #container-details-view .network-card-header {
      margin-bottom: 6px;
      padding-bottom: 4px;
    }

    #container-details-view .empty-state {
      padding: 12px;
      font-size: 0.8125rem;
    }

    #container-details-view .empty-state i {
      font-size: 1.25rem;
      margin-bottom: 4px;
    }

    #container-details-view .stat-card {
      padding: 10px 12px;
      gap: 10px;
    }

    #container-details-view .stat-card-icon {
      width: 36px;
      height: 36px;
      font-size: 1rem;
    }

    #container-details-view .stat-card-value {
      font-size: 1.25rem;
      margin-bottom: 0;
    }

    #container-details-view .stat-card-label {
      font-size: 0.7rem;
    }

    /* Overview card — at least fill pane; grow with content so parent can scroll */
    .detail-overview-card {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
      flex: 0 0 auto;
      height: auto;
      width: 100%;
      box-sizing: border-box;
    }

    #overview-pane .detail-section-card.detail-section-card--flat,
    #overview-pane .detail-overview-card {
      flex: 0 0 auto;
      min-height: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      margin-bottom: 0;
      padding: 14px 16px 12px;
      background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.025) 0%,
          transparent 40%
        ),
        var(--bg-elevated);
      border: 1px solid var(--border-color);
      border-radius: 14px;
    }

    .detail-overview-hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 0;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      flex-shrink: 0;
    }

    .detail-overview-hero-main {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      flex: 1 1 auto;
    }

    .detail-overview-name {
      font-size: 1.2rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text-primary);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .detail-overview-hero-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .detail-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-secondary);
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
    }

    .detail-pill--warn {
      color: var(--accent-warning);
      border-color: rgba(245, 158, 11, 0.35);
      background: rgba(245, 158, 11, 0.1);
    }

    .detail-pill--danger {
      color: var(--accent-danger);
      border-color: rgba(248, 113, 113, 0.35);
      background: rgba(248, 113, 113, 0.1);
    }

    /* Metric strip — slightly roomier */
    .detail-metric-row {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
      flex-shrink: 0;
    }

    .detail-metric-chip {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 10px 12px;
      border-radius: 10px;
      background: var(--bg-tertiary);
      border: 1px solid rgba(255, 255, 255, 0.06);
      min-width: 0;
      transition: border-color 0.15s ease;
    }

    .detail-metric-chip:hover {
      border-color: rgba(45, 212, 191, 0.28);
    }

    .detail-metric-chip i {
      font-size: 0.75rem;
      color: var(--accent-primary);
      margin-bottom: 2px;
      opacity: 0.95;
    }

    .detail-metric-label {
      font-size: 0.625rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
    }

    .detail-metric-value {
      font-size: 0.9375rem;
      font-weight: 700;
      color: var(--text-primary);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    /* Primary: Identity / Runtime / Network — content height (no crush/overlap) */
    .detail-overview-primary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      min-height: 0;
      flex: 0 0 auto;
      align-content: start;
      align-items: start;
    }

    /* Secondary: Ports / Mounts / Timeline — content-height band (no empty voids) */
    .detail-overview-secondary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      flex: 0 0 auto;
      min-height: 0;
      align-items: start;
    }

    .detail-overview-panels {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      min-height: 0;
    }

    .detail-overview-section {
      min-width: 0;
      min-height: 0;
      height: auto;
      max-width: 100%;
      padding: 12px 14px;
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.18);
      border: 1px solid rgba(255, 255, 255, 0.06);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    .detail-overview-section--soft {
      height: auto;
      min-height: 7.5rem;
      background: rgba(255, 255, 255, 0.02);
    }

    .detail-overview-section-title {
      margin: 0 0 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      font-size: 0.6875rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 7px;
      flex-shrink: 0;
    }

    .detail-overview-section-title i {
      color: var(--accent-primary);
      font-size: 0.8rem;
      opacity: 0.95;
    }

    /* Stack key/values top-down — never space-evenly (that crushes/overlaps when short) */
    .detail-overview-primary .detail-kv-grid--compact {
      flex: 0 0 auto;
      min-height: 0;
      min-width: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 0;
      overflow: visible;
    }

    .detail-overview-secondary .detail-chip-row,
    .detail-overview-secondary .detail-timeline,
    .detail-overview-secondary .detail-overview-empty {
      flex: 1 1 auto;
      min-width: 0;
    }

    .detail-kv-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 2px 16px;
    }

    .detail-kv-grid--compact {
      grid-template-columns: 1fr;
      gap: 0;
      min-width: 0;
    }

    .detail-kv {
      display: grid;
      grid-template-columns: minmax(5.5rem, 6.5rem) minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      padding: 7px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      min-width: 0;
    }

    .detail-kv-grid--compact .detail-kv {
      grid-template-columns: minmax(4.5rem, 5.5rem) minmax(0, 1fr);
      gap: 8px 10px;
      padding: 6px 0;
      align-items: start;
    }

    .detail-overview-primary .detail-kv {
      border-bottom-color: rgba(255, 255, 255, 0.045);
    }

    .detail-kv:last-child {
      border-bottom: none;
    }

    .detail-kv-label {
      font-size: 0.6875rem;
      font-weight: 650;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      overflow: hidden;
      min-width: 0;
      max-width: 100%;
    }

    .detail-kv-grid--compact .detail-kv-label {
      flex-shrink: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      letter-spacing: 0.03em;
      font-size: 0.65rem;
    }

    .detail-kv-grid--compact .detail-kv-label i {
      flex-shrink: 0;
      width: 0.9em;
      text-align: center;
    }

    .detail-kv-grid--compact .detail-kv-value {
      min-width: 0;
    }

    .detail-kv-label i {
      font-size: 0.75rem;
      color: var(--accent-info);
      opacity: 0.9;
    }

    .detail-kv-value {
      font-size: 0.875rem;
      font-weight: 550;
      color: var(--text-primary);
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 4px 6px;
      min-width: 0;
      max-width: 100%;
      line-height: 1.35;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .detail-kv-grid--compact .detail-kv-value {
      font-size: 0.85rem;
    }

    .detail-kv-value code,
    .detail-kv-value .detail-kv-value--wrap {
      min-width: 0;
      max-width: 100%;
    }

    .detail-kv-value--wrap {
      overflow-wrap: anywhere;
      word-break: break-word;
      display: inline;
    }

    /* Chips inside Network "Nets" must not blow the grid cell */
    .detail-kv-value .detail-chip {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .detail-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      min-width: 0;
      align-content: flex-start;
    }

    .detail-chip-row--flow {
      max-height: none;
      overflow: visible;
    }

    .detail-chip-row--stack {
      max-height: none;
      overflow: visible;
    }

    .detail-chip {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      padding: 4px 9px;
      border-radius: 7px;
      font-size: 0.75rem;
      font-weight: 550;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      color: var(--text-secondary);
      background: rgba(0, 0, 0, 0.28);
      border: 1px solid rgba(255, 255, 255, 0.07);
      white-space: nowrap;
    }

    /* Mount paths as readable rows */
    .detail-mount-item {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px 8px;
      width: 100%;
      padding: 7px 10px;
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.22);
      border: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 0.75rem;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      color: var(--text-secondary);
      min-width: 0;
    }

    .detail-mount-src {
      color: var(--text-muted);
      overflow-wrap: anywhere;
      word-break: break-all;
      min-width: 0;
    }

    .detail-mount-arrow {
      font-size: 0.6rem;
      color: var(--accent-primary);
      opacity: 0.85;
      flex-shrink: 0;
    }

    .detail-mount-dst {
      color: var(--text-primary);
      font-weight: 600;
      overflow-wrap: anywhere;
      word-break: break-all;
      min-width: 0;
    }

    .detail-mount-ro {
      margin-left: auto;
      font-size: 0.625rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--accent-warning);
      background: rgba(245, 158, 11, 0.12);
      border: 1px solid rgba(245, 158, 11, 0.25);
      border-radius: 4px;
      padding: 1px 5px;
    }

    .detail-overview-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 3.5rem;
      padding: 12px 8px;
      color: var(--text-muted);
      font-size: 0.8rem;
      text-align: center;
    }

    .detail-overview-empty i {
      font-size: 1rem;
      opacity: 0.45;
      color: var(--text-muted);
    }

    /* Timeline band */
    .detail-timeline {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 2px 0 0 4px;
    }

    .detail-timeline-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      min-width: 0;
      position: relative;
    }

    .detail-timeline-item:not(:last-child)::before {
      content: '';
      position: absolute;
      left: 4px;
      top: 12px;
      bottom: -10px;
      width: 1px;
      background: rgba(45, 212, 191, 0.25);
    }

    .detail-timeline-dot {
      width: 9px;
      height: 9px;
      margin-top: 4px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 2px solid rgba(45, 212, 191, 0.45);
      flex-shrink: 0;
      z-index: 1;
    }

    .detail-timeline-dot--active {
      background: var(--accent-primary);
      border-color: var(--accent-primary);
      box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
    }

    .detail-timeline-meta {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
    }

    .detail-timeline-label {
      font-size: 0.625rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
    }

    .detail-timeline-value {
      font-size: 0.8125rem;
      font-weight: 550;
      color: var(--text-primary);
      line-height: 1.3;
    }

    .detail-timeline-meta .relative-time {
      font-size: 0.7rem;
    }

    .detail-overview-command {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.28);
      border: 1px solid rgba(255, 255, 255, 0.07);
      min-width: 0;
      flex-shrink: 0;
    }

    .detail-overview-command .detail-kv-label {
      flex-shrink: 0;
    }

    .detail-command-line {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.8125rem;
      color: var(--accent-primary);
      background: transparent;
      border: none;
      padding: 0;
    }

    @media (max-width: 1100px) {
      .detail-overview-primary,
      .detail-overview-secondary {
        grid-template-columns: 1fr;
      }
      .detail-overview-primary {
        flex: 0 0 auto;
      }
      .detail-metric-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    /* Tall windows: fill leftover vertical space without re-spacing rows (avoids overlap) */
    @media (min-width: 1101px) and (min-height: 820px) {
      #overview-pane .detail-overview-card {
        flex: 1 0 auto;
        min-height: 100%;
      }
      .detail-overview-primary {
        flex: 1 1 auto;
        align-items: stretch;
      }
      .detail-overview-primary > .detail-overview-section {
        height: 100%;
        min-height: 12rem;
      }
      /* Keep rows top-aligned; empty space stays below the list */
      .detail-overview-primary .detail-kv-grid--compact {
        flex: 0 0 auto;
        justify-content: flex-start;
      }
    }

    @media (max-width: 640px) {
      .detail-overview-primary {
        flex: 0 0 auto;
      }
      .detail-overview-primary .detail-kv-grid--compact {
        justify-content: flex-start;
      }
      .detail-metric-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .detail-kv-grid--compact .detail-kv {
        grid-template-columns: 1fr;
        gap: 2px 0;
      }
    }

    .detail-kv-value .relative-time {
      display: inline;
      margin-top: 0;
      margin-left: 2px;
      font-size: 0.75rem;
    }

    .detail-kv-value code,
    #container-details-view .detail-info-value code {
      font-size: 0.8125rem;
      padding: 1px 5px;
      max-width: 100%;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    #container-details-view .copy-btn {
      padding: 2px 6px;
      margin-left: 0;
    }

    #container-details-view .detail-badge {
      padding: 2px 8px;
      font-size: 0.75rem;
    }

    /* Tables inside processes: denser */
    #container-top-content {
      flex: 1 1 auto;
      min-height: 0;
      padding: 0 4px 4px;
    }

    #container-top-content table {
      margin-bottom: 0;
    }

    #container-top-content .table > :not(caption) > * > * {
      padding: 0.35rem 0.55rem;
      font-size: 0.8125rem;
    }

    /* ─── Processes filter form ─── */
    .procs-toolbar-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
      min-width: 0;
      max-width: 100%;
    }

    .procs-toolbar-actions .btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .procs-result-count {
      font-size: 0.75rem;
      font-weight: 650;
      color: var(--text-muted);
      font-variant-numeric: tabular-nums;
      padding: 2px 8px;
      border-radius: 999px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      min-height: 1.5rem;
      display: inline-flex;
      align-items: center;
    }

    .procs-result-count:empty {
      display: none;
    }

    .procs-result-count[data-active='1'] {
      color: var(--accent-primary);
      border-color: rgba(45, 212, 191, 0.35);
      background: rgba(45, 212, 191, 0.08);
    }

    .procs-result-count[data-active='empty'] {
      color: var(--accent-warning);
      border-color: rgba(245, 158, 11, 0.35);
      background: rgba(245, 158, 11, 0.08);
    }

    .procs-filter-form {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
      border-bottom: 1px solid var(--border-color);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%),
        var(--bg-tertiary);
    }

    .procs-filter-row {
      display: flex;
      align-items: stretch;
      gap: 8px;
      padding: 8px 10px;
    }

    .procs-filter-row--primary {
      align-items: center;
    }

    .procs-search-field {
      position: relative;
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      align-items: center;
    }

    .procs-search-icon {
      position: absolute;
      left: 10px;
      color: var(--text-muted);
      font-size: 0.8rem;
      pointer-events: none;
      z-index: 1;
    }

    .procs-filter-input {
      width: 100%;
      min-width: 0;
      padding: 7px 10px;
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      color: var(--text-primary);
      font-size: 0.8125rem;
      line-height: 1.3;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .procs-filter-input--search {
      padding-left: 32px;
      padding-right: 56px;
      font-size: 0.875rem;
    }

    .procs-filter-input:focus {
      outline: none;
      border-color: var(--accent-primary);
      box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12);
    }

    .procs-filter-input::placeholder {
      color: var(--text-muted);
      opacity: 0.85;
    }

    .procs-filter-select {
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M3 4.5L6 8l3-3.5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 28px;
    }

    .procs-search-clear,
    .procs-debounce-hint {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      background: transparent;
      color: var(--text-muted);
      width: 26px;
      height: 26px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      cursor: pointer;
      font-size: 0.75rem;
    }

    .procs-search-clear:hover {
      color: var(--text-primary);
      background: var(--bg-hover);
    }

    .procs-debounce-hint {
      right: 34px;
      cursor: default;
      color: var(--accent-primary);
      font-size: 0.7rem;
      pointer-events: none;
    }

    .procs-filter-toggle {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--bg-elevated);
      color: var(--text-secondary);
      font-size: 0.8125rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
    }

    .procs-filter-toggle:hover {
      border-color: var(--accent-primary);
      color: var(--text-primary);
    }

    .procs-filter-toggle.is-open {
      border-color: rgba(45, 212, 191, 0.45);
      color: var(--accent-primary);
      background: rgba(45, 212, 191, 0.08);
    }

    .procs-filter-chevron {
      font-size: 0.65rem;
      opacity: 0.8;
      transition: transform 0.15s ease;
    }

    .procs-filter-toggle.is-open .procs-filter-chevron {
      transform: rotate(180deg);
    }

    .procs-filter-advanced {
      padding: 0 10px 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.04);
      animation: procs-adv-in 0.15s ease;
    }

    .procs-filter-advanced[hidden] {
      display: none !important;
    }

    @keyframes procs-adv-in {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: none; }
    }

    .procs-filter-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px 10px;
      padding-top: 10px;
    }

    .procs-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
      margin: 0;
    }

    .procs-field--wide {
      grid-column: span 2;
    }

    .procs-field--check {
      justify-content: flex-end;
    }

    .procs-field-label {
      font-size: 0.625rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .procs-field-label i {
      color: var(--accent-info);
      font-size: 0.7rem;
      opacity: 0.9;
    }

    .procs-check {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      padding: 7px 10px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--bg-elevated);
      color: var(--text-secondary);
      font-size: 0.8125rem;
      font-weight: 500;
      cursor: pointer;
      user-select: none;
      min-height: 34px;
    }

    .procs-check input {
      margin: 0;
      accent-color: var(--accent-primary);
    }

    .procs-filter-hint {
      margin: 8px 0 0;
      font-size: 0.7rem;
      color: var(--text-muted);
      display: flex;
      align-items: flex-start;
      gap: 6px;
      line-height: 1.35;
    }

    .procs-filter-hint i {
      margin-top: 2px;
      color: var(--accent-info);
      opacity: 0.85;
    }

    .procs-loading,
    .procs-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 2rem 1rem;
      color: var(--text-muted);
      font-size: 0.875rem;
      text-align: center;
    }

    .procs-loading i,
    .procs-empty i {
      font-size: 1.25rem;
      opacity: 0.7;
      color: var(--accent-primary);
    }

    .procs-empty i {
      color: var(--text-muted);
    }

    /* Process table: real table cells, narrow meta cols, wide wrapping CMD */
    .procs-table {
      width: 100% !important;
      max-width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
    }

    .procs-table col.procs-col-compact {
      width: 4rem;
    }

    .procs-table col.procs-col-time {
      width: 4.5rem;
    }

    .procs-table col.procs-col-mid {
      width: 5.5rem;
    }

    .procs-table col.procs-col-cmd {
      width: auto;
    }

    .procs-table th,
    .procs-table td {
      display: table-cell !important;
      vertical-align: top;
      overflow: visible;
      text-overflow: clip;
    }

    .procs-table th.procs-th-compact,
    .procs-table td.procs-td-compact {
      width: 4rem;
      white-space: nowrap;
      padding-left: 0.4rem !important;
      padding-right: 0.4rem !important;
      font-variant-numeric: tabular-nums;
    }

    .procs-table th.procs-th-time,
    .procs-table td.procs-td-time {
      width: 4.5rem;
      white-space: nowrap;
    }

    .procs-table th.procs-th-mid,
    .procs-table td.procs-td-mid {
      width: 5.5rem;
      white-space: nowrap;
    }

    .procs-table th.procs-th-cmd,
    .procs-table td.procs-td-cmd {
      width: auto;
      white-space: normal;
      word-break: break-word;
      overflow-wrap: anywhere;
    }

    .procs-table thead th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--bg-elevated) !important;
      border-bottom: 1px solid var(--border-color);
      font-size: 0.6875rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted) !important;
      white-space: nowrap;
      user-select: none;
    }

    .procs-th {
      cursor: pointer;
    }

    .procs-th:hover {
      color: var(--text-primary) !important;
    }

    .procs-th.is-sorted {
      color: var(--accent-primary) !important;
    }

    .procs-sort-ind {
      font-size: 0.65rem;
      margin-left: 2px;
    }

    /* code inside cells: never ellipsis-truncate; stay inline in the cell */
    .procs-table td code {
      display: inline !important;
      max-width: none !important;
      overflow: visible !important;
      text-overflow: clip !important;
      white-space: inherit !important;
      font-size: 0.75rem;
      line-height: 1.35;
      background: transparent;
      border: none;
      padding: 0;
      color: inherit;
    }

    .procs-table td.procs-td-cmd code {
      white-space: pre-wrap !important;
      word-break: break-word !important;
      overflow-wrap: anywhere !important;
      color: var(--text-primary);
      line-height: 1.4;
    }

    .procs-mark {
      background: rgba(45, 212, 191, 0.28);
      color: inherit;
      border-radius: 2px;
      padding: 0 1px;
    }

    @media (max-width: 900px) {
      .procs-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .procs-field--wide {
        grid-column: span 2;
      }
    }

    @media (max-width: 560px) {
      .procs-filter-grid {
        grid-template-columns: 1fr;
      }
      .procs-field--wide {
        grid-column: span 1;
      }
      .procs-filter-toggle span {
        display: none;
      }
    }

    @media (max-width: 768px) {
      .detail-kv {
        grid-template-columns: 1fr;
        gap: 2px;
      }

      .container-details-tabs .nav-link {
        padding: 0.3rem 0.55rem;
        font-size: 0.75rem;
      }
    }

    /* ─── Advanced container stats tab ─── */
    .detail-stats-shell {
      gap: 10px !important;
      min-height: 0;
      overflow: hidden;
    }

    #stats-pane.tab-pane.show.active {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
    }

    #stats-pane .detail-stats-shell {
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 2px;
    }

    .detail-stats-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      flex-shrink: 0;
      padding: 8px 10px;
      border-radius: 12px;
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
    }

    .detail-stats-toolbar-left,
    .detail-stats-toolbar-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .detail-stats-live {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--accent-success);
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(74, 222, 128, 0.1);
      border: 1px solid rgba(74, 222, 128, 0.25);
    }

    .detail-stats-live i {
      font-size: 0.45rem;
      animation: detail-stats-pulse 1.4s ease infinite;
    }

    .detail-stats-live.is-paused {
      color: var(--accent-warning);
      background: rgba(245, 158, 11, 0.1);
      border-color: rgba(245, 158, 11, 0.28);
    }

    .detail-stats-live.is-paused i {
      animation: none;
    }

    @keyframes detail-stats-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.35; }
    }

    .detail-stats-timeframe {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding: 2px;
      border-radius: 9px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
    }

    .detail-stats-tf {
      border: none;
      background: transparent;
      color: var(--text-muted);
      font-size: 0.75rem;
      font-weight: 650;
      padding: 5px 10px;
      border-radius: 7px;
      cursor: pointer;
      transition: all 0.12s ease;
    }

    .detail-stats-tf:hover {
      color: var(--text-primary);
    }

    .detail-stats-tf.active {
      background: rgba(45, 212, 191, 0.16);
      color: var(--accent-primary);
      box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.25);
    }

    .detail-stats-check {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      font-size: 0.75rem;
      color: var(--text-secondary);
      cursor: pointer;
      user-select: none;
    }

    .detail-stats-check input {
      margin: 0;
      accent-color: var(--accent-primary);
    }

    .detail-stats-kpis {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      flex-shrink: 0;
    }

    .detail-stats-kpi {
      padding: 10px 12px;
      border-radius: 12px;
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .detail-stats-kpi-top {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
    }

    .detail-stats-kpi-top i {
      font-size: 0.75rem;
    }

    .detail-stats-kpi--cpu .detail-stats-kpi-top i { color: #34d399; }
    .detail-stats-kpi--mem .detail-stats-kpi-top i { color: #38bdf8; }
    .detail-stats-kpi--net .detail-stats-kpi-top i { color: #a78bfa; }
    .detail-stats-kpi--disk .detail-stats-kpi-top i { color: #f472b6; }

    .detail-stats-kpi-value {
      font-size: 1.15rem;
      font-weight: 750;
      letter-spacing: -0.02em;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
      line-height: 1.15;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .detail-stats-kpi-sub {
      font-size: 0.7rem;
      color: var(--text-muted);
      line-height: 1.25;
      min-height: 1.1em;
    }

    .detail-stats-bar {
      height: 4px;
      border-radius: 99px;
      background: rgba(255, 255, 255, 0.06);
      overflow: hidden;
      margin-top: 4px;
    }

    .detail-stats-bar i {
      display: block;
      height: 100%;
      border-radius: 99px;
      transition: width 0.25s ease;
    }

    .detail-stats-kpi--cpu .detail-stats-bar i {
      background: linear-gradient(90deg, #34d399, #2dd4bf);
    }

    .detail-stats-kpi--mem .detail-stats-bar i {
      background: linear-gradient(90deg, #38bdf8, #818cf8);
    }

    .detail-stats-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 14px;
      flex-shrink: 0;
      padding: 6px 10px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .detail-stats-sum-item {
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      font-size: 0.7rem;
    }

    .detail-stats-sum-item span {
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 650;
      font-size: 0.625rem;
    }

    .detail-stats-sum-item strong {
      color: var(--text-primary);
      font-weight: 650;
      font-variant-numeric: tabular-nums;
    }

    .detail-stats-charts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      flex: 1 1 auto;
      min-height: 0;
      padding-bottom: 4px;
    }

    .detail-stats-chart-card {
      display: flex;
      flex-direction: column;
      min-height: 200px;
      border-radius: 12px;
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
      overflow: hidden;
    }

    .detail-stats-chart-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 12px 0;
      flex-shrink: 0;
    }

    .detail-stats-chart-head h6 {
      margin: 0;
      font-size: 0.75rem;
      font-weight: 650;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .detail-stats-chart-head h6 i {
      color: var(--accent-primary);
      font-size: 0.7rem;
    }

    .detail-stats-chart-unit {
      font-size: 0.65rem;
      font-weight: 650;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .detail-stats-chart-wrap {
      flex: 1 1 auto;
      min-height: 160px;
      position: relative;
      padding: 4px 8px 8px;
    }

    @media (max-width: 1100px) {
      .detail-stats-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .detail-stats-charts {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .detail-stats-kpis {
        grid-template-columns: 1fr;
      }
      .detail-stats-toolbar-right .btn span {
        display: none;
      }
    }

    /* ─── Containers bulk action bar ─── */
    .containers-action-bar {
      border-radius: 12px;
      border: 1px solid var(--border-color);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
        var(--bg-elevated);
      padding: 8px 10px;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .containers-action-bar.has-selection {
      border-color: rgba(45, 212, 191, 0.35);
      box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.08);
    }

    .containers-action-bar-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .containers-action-bar-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      min-width: 0;
    }

    .containers-selected-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.6rem;
      height: 1.6rem;
      padding: 0 6px;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 750;
      font-variant-numeric: tabular-nums;
      color: var(--accent-primary);
      background: rgba(45, 212, 191, 0.12);
      border: 1px solid rgba(45, 212, 191, 0.28);
    }

    .containers-action-hint {
      font-size: 0.75rem;
    }

    .containers-action-btns {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }

    .containers-action-btns .btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-weight: 600;
    }

    .containers-action-btns .btn:disabled {
      opacity: 0.4;
    }

    .containers-action-sep {
      width: 1px;
      height: 22px;
      background: var(--border-color);
      margin: 0 2px;
    }

    @media (max-width: 900px) {
      .containers-action-btns .btn span {
        display: none;
      }
    }

    /* ─── Advanced container network manager ─── */
    .net-mgr {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .net-mgr-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      padding: 10px 12px;
      border-radius: 12px;
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
    }

    .net-mgr-title {
      margin: 0 0 4px;
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--text-primary);
    }

    .net-mgr-sub {
      font-size: 0.8rem;
    }

    .net-mgr-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .net-mgr-join-panel {
      padding: 12px;
      border-radius: 12px;
      border: 1px solid rgba(45, 212, 191, 0.28);
      background: rgba(45, 212, 191, 0.05);
    }

    .net-mgr-join-panel[hidden] {
      display: none !important;
    }

    .net-mgr-join-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .net-mgr-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin: 0;
      min-width: 0;
    }

    .net-mgr-field > span {
      font-size: 0.7rem;
      font-weight: 650;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
    }

    .net-mgr-join-footer {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 12px;
    }

    .net-mgr-table-card {
      padding-bottom: 4px;
    }

    .net-mgr-table td,
    .net-mgr-table th {
      vertical-align: middle;
      font-size: 0.8125rem;
    }

    @media (max-width: 768px) {
      .net-mgr-join-grid {
        grid-template-columns: 1fr;
      }
    }