/* ControlRoom */
.root { display: flex; flex-direction: column; min-height: 100vh; height: 100vh; overflow: hidden; background: radial-gradient(circle at 16% 10%, rgba(124,58,237,0.18), transparent 34%), radial-gradient(circle at 76% 12%, rgba(59,130,246,0.10), transparent 30%), var(--color-base-bg); color: var(--color-text-primary); }
.header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-8); border-bottom: var(--glass-border); background: rgba(13, 17, 28, 0.86); backdrop-filter: blur(22px); flex-shrink: 0; }
.headerLeft { display: flex; align-items: center; gap: var(--space-4); }
.headerIcon { font-size: 28px; color: var(--color-text-tertiary); }
.title { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-text-primary); margin: 0; }
.subtitle { font-size: var(--text-xs); color: var(--color-text-tertiary); margin: 0; }
.body { display: flex; flex: 1; overflow: hidden; }
/* Sidebar */
.sidebar { width: 220px; border-right: var(--glass-border); display: flex; flex-direction: column; padding: var(--space-4); gap: var(--space-1); flex-shrink: 0; background: rgba(10, 14, 24, 0.78); }
.sideItem { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: none; border: none; cursor: pointer; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-text-secondary); text-align: left; transition: all var(--duration-fast) var(--ease-standard); width: 100%; }
.sideItem:hover { background: var(--glass-bg); color: var(--color-text-primary); }
.sideActive { color: var(--color-text-primary) !important; background: var(--glass-bg); }
.sideIcon { font-size: 14px; flex-shrink: 0; }
.indicator { position: absolute; left: 0; top: 20%; bottom: 20%; width: 2px; background: var(--color-violet); border-radius: 1px; }
/* Content */
.content { flex: 1; overflow-y: auto; padding: var(--space-8); background: radial-gradient(circle at 12% 12%, rgba(124,58,237,0.10), transparent 28%), linear-gradient(135deg, rgba(15,23,42,0.22), rgba(2,6,23,0.52)), var(--color-base-bg); }
.panelWrap { display: flex; flex-direction: column; gap: 0; }
/* Panel */
.panel { display: flex; flex-direction: column; gap: var(--space-6); max-width: 800px; }
.panelTitle { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-text-primary); margin: 0; }
.panelSubtitle { font-size: var(--text-sm); color: var(--color-text-secondary); margin: -var(--space-4) 0 0; }
.subTitle { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-secondary); margin: 0; }
.muted { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }
.adminSection { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--glass-bg); border: var(--glass-border); border-radius: var(--radius-lg); }
/* Service grid */
.serviceGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); }
.svcCard { display: flex; flex-direction: column; gap: var(--space-2); }
.svcTop { display: flex; align-items: center; gap: var(--space-2); }
.statusDot { width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; }
.svcName { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-primary); }
.svcMeta { display: flex; flex-direction: column; gap: 2px; }
.svcMeta span { font-size: 10px; color: var(--color-text-secondary); }
.svcMeta code { font-family: var(--font-mono); color: var(--color-text-primary); }
/* GPU */
.gpuCard { display: flex; flex-direction: column; gap: var(--space-4); }
.migSlices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.migSlice { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); background: var(--glass-bg); border-radius: var(--radius-md); border: var(--glass-border); }
.migLabel { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-violet-light); }
.migService { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-secondary); }
.migStatus { font-size: 10px; font-weight: var(--font-semibold); }
/* Form */
.formGroup { display: flex; flex-direction: column; gap: var(--space-2); }
.formLabel { font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-secondary); }
.formInput, .formSelect { background: var(--glass-bg); border: var(--glass-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-text-primary); outline: none; width: 100%; box-sizing: border-box; }
.formInput:focus, .formSelect:focus { border-color: rgba(124,58,237,0.4); box-shadow: 0 0 0 3px var(--color-violet-glow); }
/* Users */
.userToolbar { display: flex; gap: var(--space-3); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th { text-align: left; font-size: 10px; font-weight: var(--font-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-tertiary); padding: var(--space-2) var(--space-3); border-bottom: var(--glass-border); }
.table td { padding: var(--space-3); border-bottom: var(--glass-border); color: var(--color-text-secondary); }
.table code { font-family: var(--font-mono); font-size: 10px; color: var(--color-violet-light); }
.tableAction { background: none; border: none; color: var(--color-text-tertiary); font-size: var(--text-xs); cursor: pointer; }
/* Models */
.modelRow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-2); }
.modelName { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-primary); display: block; }
.modelPath { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-tertiary); display: block; }
.modelRight { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.modelSize { font-size: var(--text-xs); color: var(--color-text-secondary); }
/* Meta */
.metaStatus { display: flex; align-items: center; gap: var(--space-3); }
