.app-monitor {display:flex;flex-direction:column;height:100%;background:var(--bg-primary);}.mon-header {height:50px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;align-items:center;padding:0 var(--space-4);}.mon-tabs {display:flex;height:100%;}.mon-tab {padding:0 var(--space-4);display:flex;align-items:center;color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--transition-fast);}.mon-tab:hover {color:var(--text-primary);background:rgba(255,255,255,0.05);}.mon-tab.active {color:var(--accent-primary);border-bottom-color:var(--accent-primary);}.mon-content {flex:1;padding:var(--space-4);overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-4);}.mon-graphs {display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--space-4);}@media (max-width:800px) {.mon-graphs {grid-template-columns:1fr;}}.mon-panel {background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-4);display:flex;flex-direction:column;}.mon-panel-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4);}.mon-panel-title {font-weight:var(--fw-semibold);color:var(--text-bright);}.mon-panel-value {font-family:var(--font-mono);font-size:var(--fs-xl);color:var(--accent-primary);}.mon-graph-box {height:150px;position:relative;display:flex;align-items:flex-end;gap:2px;border-bottom:1px solid rgba(255,255,255,0.1);border-left:1px solid rgba(255,255,255,0.1);padding-left:1px;}.mon-bar {flex:1;background:linear-gradient(to top, rgba(122, 162, 247, 0.2), rgba(122, 162, 247, 0.8));border-top:2px solid var(--accent-primary);animation:barGrow 1s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;transform-origin:bottom;}.mon-bar.cpu {background:linear-gradient(to top, rgba(158, 206, 106, 0.2), rgba(158, 206, 106, 0.8));border-top-color:var(--accent-secondary);}.mon-bar.mem {background:linear-gradient(to top, rgba(187, 154, 247, 0.2), rgba(187, 154, 247, 0.8));border-top-color:var(--accent-tertiary);}.mon-stats-grid {display:grid;grid-template-columns:repeat(4, 1fr);gap:var(--space-4);}@media (max-width:800px) {.mon-stats-grid {grid-template-columns:repeat(2, 1fr);}}.mon-stat-card {background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-4);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;}.mon-stat-card::before {content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent-primary);}.mon-stat-card:nth-child(2)::before { background:var(--accent-secondary); }.mon-stat-card:nth-child(3)::before { background:var(--accent-warning); }.mon-stat-card:nth-child(4)::before { background:var(--accent-tertiary); }.mon-stat-icon {font-size:24px;color:var(--text-muted);margin-bottom:var(--space-2);}.mon-stat-value {font-family:var(--font-mono);font-size:var(--fs-3xl);font-weight:var(--fw-bold);color:var(--text-bright);margin-bottom:var(--space-1);}.mon-stat-label {font-size:var(--fs-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;}.mon-table-container {background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;}.mon-table {width:100%;border-collapse:collapse;}.mon-table th, .mon-table td {padding:var(--space-2) var(--space-4);text-align:left;}.mon-table th {background:var(--bg-tertiary);color:var(--text-secondary);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid var(--border-color);}.mon-table td {color:var(--text-primary);font-family:var(--font-mono);font-size:var(--fs-sm);border-bottom:1px solid rgba(255,255,255,0.05);}.mon-table tr:hover td {background:rgba(255,255,255,0.05);}.mon-table .col-name { color:var(--text-bright); font-family:var(--font-ui); }.mon-table .col-id { color:var(--text-muted); }.mon-table .col-user { color:var(--accent-tertiary); }.mon-table .col-cpu { color:var(--accent-secondary); }.mon-table .col-mem { color:var(--accent-primary); }