@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #080808;
  --bg2:     #0e0e0e;
  --bg3:     #141414;
  --border:  #1e1e1e;
  --border2: #2a2a2a;
  --vio:     #7C3AED;
  --vio-b:   #A78BFA;
  --vio-dim: #4C1D95;
  --vio-g:   #7C3AED14;
  --blue:    #00D4FF;
  --blue-dim:#004A66;
  --blue-g:  #00D4FF12;
  --text:    #E8E8E8;
  --text1:   #E8E8E8;
  --text2:   #999;
  --text3:   #666;
  --ok:      #5DCAA5;
  --warn:    #EF9F27;
  --err:     #E24B4A;
  --green-b: #5DCAA5;
  --red-b:   #E24B4A;
  --accent:  #A78BFA;
  --card:    #0e0e0e;
  --mono:    'JetBrains Mono', 'Fira Code', monospace;
}

[data-theme="light"] {
  --bg:      #f4f4f5;
  --bg2:     #ffffff;
  --bg3:     #e8e8ec;
  --border:  #d4d4d8;
  --border2: #a1a1aa;
  --blue:    #0891B2;
  --blue-dim:#BAE6FD;
  --blue-g:  #0891B214;
  --text:    #18181b;
  --text1:   #18181b;
  --text2:   #52525b;
  --text3:   #a1a1aa;
  --ok:      #16a34a;
  --warn:    #d97706;
  --err:     #dc2626;
  --green-b: #16a34a;
  --red-b:   #dc2626;
  --card:    #ffffff;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── SCROLLBAR ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); }
::-webkit-scrollbar-thumb:hover { background: var(--vio-dim); }

/* ── LOGIN ──────────────────────────────────────────────────────────────────── */
#login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.grid-bg {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .25;
  pointer-events: none;
}

.login-box {
  width: 100%;
  max-width: 520px;
  position: relative;
  z-index: 1;
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  justify-content: center;
}

.logo-mark {
  width: 36px;
  height: 36px;
  border: 1px solid var(--vio);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vio-g);
  flex-shrink: 0;
  overflow: hidden;
}
.logo-mark .logo-img { width: 100%; height: 100%; object-fit: cover; }
.sb-logo .logo-mark  { width: 28px; height: 28px; }

.logo-mark .ti { font-size: 17px; color: var(--vio-b); }

.logo-name  { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: 2px; }
.logo-ver   { font-size: 9px;  color: var(--text3); letter-spacing: 1px; margin-top: 2px; }

.servers-panel { margin-bottom: 24px; }
.panel-label {
  font-size: 9px;
  color: var(--blue);
  letter-spacing: 1.5px;
  font-weight: 700;
  margin-bottom: 8px;
}

.srv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--bg2);
  cursor: pointer;
  margin-bottom: 5px;
  transition: border-color .1s;
  position: relative;
}
.srv-row:hover    { border-color: var(--border2); }
.srv-row.selected { border-color: var(--vio); background: var(--vio-g); }

.srv-dot { width: 7px; height: 7px; flex-shrink: 0; }
.dot-ok  { background: var(--ok); }
.dot-off { background: var(--text3); }

.srv-info { flex: 1; min-width: 0; }
.srv-name { font-size: 11px; font-weight: 700; color: var(--text); letter-spacing: .5px; }
.srv-meta { font-size: 9px; color: var(--text3); margin-top: 2px; letter-spacing: .3px; }

.srv-badges { display: flex; gap: 4px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  padding: 2px 6px;
  font-weight: 700;
  letter-spacing: .5px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-ok   { color: var(--ok);    border-color: #0F6E5640; }
.badge-off  { color: var(--text3); border-color: var(--border); }
.badge-vio  { color: var(--vio-b); border-color: var(--vio-dim); }
.badge-warn { color: var(--warn);  border-color: #854F0B40; }
.badge-run  { color: var(--vio-b); border-color: var(--vio-dim); }
.badge-stop { color: var(--text3); border-color: var(--border2); }
.badge-err  { color: var(--err);   border-color: #A32D2D40; }

.srv-check {
  width: 16px; height: 16px;
  border: 1px solid var(--vio);
  background: var(--vio);
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.srv-check .ti  { font-size: 10px; color: #fff; }
.selected .srv-check { display: flex; }

.add-srv {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px dashed var(--border2);
  color: var(--text3);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: .8px;
  transition: all .1s;
  background: none;
  width: 100%;
  font-family: var(--mono);
}
.add-srv:hover { border-color: var(--vio-dim); color: var(--vio-b); }

.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  color: var(--text3);
  font-size: 9px;
  letter-spacing: 1px;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.field  { display: flex; flex-direction: column; gap: 5px; }
.field.full { grid-column: 1 / -1; }

.field-label {
  font-size: 9px;
  color: var(--blue);
  letter-spacing: 1px;
  font-weight: 700;
}
.field-input {
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: 11px;
  padding: 8px 10px;
  font-family: var(--mono);
  letter-spacing: .3px;
  outline: none;
  width: 100%;
}
.field-input:focus { border-color: var(--vio); }
.field-input::placeholder { color: var(--text3); }

.login-actions { display: flex; gap: 8px; }

.btn {
  height: 32px;
  padding: 0 14px;
  font-size: 10px;
  font-family: var(--mono);
  cursor: pointer;
  letter-spacing: .8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  border: 1px solid var(--border2);
  background: none;
  color: var(--text2);
  transition: all .1s;
  white-space: nowrap;
}
.btn:hover { color: var(--text); border-color: var(--text3); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn .ti { font-size: 13px; }

.btn-vio { background: var(--vio); color: #fff; border-color: var(--vio); flex: 1; justify-content: center; }
.btn-vio:hover { background: var(--vio-dim); border-color: var(--vio-b); color: #fff; }

.btn-sm {
  height: 24px;
  padding: 0 9px;
  font-size: 9px;
  font-family: var(--mono);
  cursor: pointer;
  letter-spacing: .6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  border: 1px solid var(--border2);
  background: none;
  color: var(--text3);
  white-space: nowrap;
  transition: all .1s;
}
.btn-sm:hover { color: var(--text); border-color: var(--text3); }
.btn-sm.danger:hover { color: var(--err); border-color: var(--err); }
.btn-sm .ti { font-size: 11px; }

.status-bar {
  margin-top: 14px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  background: var(--bg2);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  color: var(--text3);
  letter-spacing: .5px;
}
.status-bar .ti { font-size: 12px; color: var(--vio-b); }

.login-error {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #A32D2D40;
  background: #FCEBEB08;
  color: var(--err);
  font-size: 10px;
  letter-spacing: .3px;
  display: none;
}
.login-error.show { display: block; }

/* ── SHELL (app principale) ─────────────────────────────────────────────────── */
#app { display: none; height: 100vh; overflow: hidden; }
#app.visible { display: flex; }

/* ── SIDEBAR ──────────────────────────────────────────────────────────────── */
.sidebar {
  width: 210px;
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
}
.sidebar::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent, var(--vio), transparent);
  opacity: .3;
  pointer-events: none;
}

.sidebar.collapsed { width: 48px; overflow: hidden; }
.sidebar.collapsed .sb-logo .logo-name,
.sidebar.collapsed .sb-logo .logo-ver { display: none; }
.sidebar.collapsed .sb-search { display: none; }
.sidebar.collapsed .sb-group-label { display: none; }
.sidebar.collapsed .sb-item-label { display: none; }
.sidebar.collapsed .sb-chev { display: none; }
.sidebar.collapsed .sb-item { justify-content: center; padding: 6px 0; }
.sidebar.collapsed .sb-logo { justify-content: center; padding: 16px 10px 14px; }
.sidebar.collapsed .sb-apps-title { display: none; }
.sidebar.collapsed .sb-app-item-name { display: none; }
.sidebar.collapsed .sb-app-item { justify-content: center; padding: 4px 0; }
.sidebar.collapsed .sb-footer { display: none; }
.sidebar.collapsed .sb-collapse-btn { right: -10px; }
.sidebar.collapsed .sb-collapse-btn .ti { transform: rotate(180deg); }

.sb-collapse-btn {
  position: absolute;
  bottom: 16px;
  right: -10px;
  width: 20px; height: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  color: var(--text3);
  font-size: 10px;
  transition: color .15s, border-color .15s;
}
.sb-collapse-btn:hover { color: var(--text); border-color: var(--border2); }
.sb-collapse-btn .ti { transition: transform .25s; }

.sb-logo {
  padding: 16px 14px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-logo .logo-mark { width: 28px; height: 28px; }
.sb-logo .logo-mark .ti { font-size: 13px; }
.sb-logo .logo-name { font-size: 13px; letter-spacing: 1.5px; }
.sb-logo .logo-ver  { font-size: 8px; }

.sb-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.sb-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text2);
  font-size: 9px;
  font-family: inherit;
  letter-spacing: .5px;
}
.sb-search input::placeholder { color: var(--text3); }

.sb-nav { flex: 1; padding: 8px; overflow-y: auto; }

.sb-group {
  font-size: 8px;
  color: var(--blue);
  letter-spacing: 1.5px;
  padding: 12px 8px 4px;
  font-weight: 700;
}

/* ── Sidebar collapsible ──────────────────────────────────────── */
.sb-section { /* wrapper pour chaque groupe collapsible */ }

.sb-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 8px 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 8px;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--blue);
  transition: color .1s;
}
.sb-group-toggle:hover { color: var(--text2); }
.sb-chev {
  font-size: 10px;
  color: var(--text3);
  transition: transform .18s ease;
  flex-shrink: 0;
}
.sb-group-toggle.collapsed .sb-chev { transform: rotate(-90deg); }
.sb-items.collapsed { display: none; }

/* sous-groupes d'app dans la zone intégrations */
.sb-app-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px 2px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 8px;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text3);
  transition: color .1s;
}
.sb-app-toggle:hover { color: var(--text2); }
.sb-app-toggle .sb-chev { margin-left: auto; font-size: 9px; }
.sb-app-items.collapsed { display: none; }

.nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  cursor: pointer;
  color: var(--text2);
  border: none;
  border-left: 2px solid transparent;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: .5px;
  position: relative;
  transition: color .1s, background .1s;
}
.nav-btn .ti { font-size: 14px; opacity: .7; }
.nav-btn:hover { color: var(--text); background: var(--bg2); }
.nav-btn:hover .ti { opacity: 1; }
.nav-btn.active {
  color: var(--vio-b);
  border-left-color: var(--vio);
  background: var(--bg2);
}
.nav-btn.active .ti { opacity: 1; color: var(--vio); }

.sb-foot {
  padding: 10px;
  border-top: 1px solid var(--border);
}
.srv-chip {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.srv-chip:hover { border-color: var(--border2); }
.chip-pulse {
  width: 6px; height: 6px;
  background: var(--vio-b);
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.2} }
.chip-host { font-size: 10px; color: var(--text); font-weight: 500; letter-spacing: .5px; }
.chip-ip   { font-size: 9px; color: var(--text3); margin-top: 1px; }

/* ── MAIN ─────────────────────────────────────────────────────────────────── */
.main { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

.topbar {
  height: 48px;
  padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.tb-left  { display: flex; align-items: center; gap: 10px; }
.tb-right { display: flex; gap: 6px; align-items: center; }
.tb-section { font-size: 9px; color: var(--blue); letter-spacing: 1px; font-weight: 700; }
.tb-sep     { color: var(--border2); }
.tb-title   { font-size: 13px; color: var(--text); font-weight: 500; letter-spacing: .5px; }

.sys-clock {
  font-size: 10px;
  color: var(--blue);
  letter-spacing: .5px;
  border: 1px solid var(--blue-dim);
  padding: 4px 8px;
  background: var(--blue-g);
}

/* ── CONTENT ──────────────────────────────────────────────────────────────── */
.content { flex: 1; overflow-y: auto; padding: 16px 20px; }

/* ── METRICS ──────────────────────────────────────────────────────────────── */
.metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 16px; }
.mc {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}
.mc::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--vio);
}
.mc-label { font-size: 8px; color: var(--blue); letter-spacing: 1px; font-weight: 700; margin-bottom: 8px; }
.mc-val   { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1; letter-spacing: -1px; }
.mc-sub   { font-size: 8px; color: var(--blue); margin-top: 4px; letter-spacing: .3px; }
.mc-vio .mc-val { color: var(--vio-b); }
.mc-ok  .mc-val { color: var(--ok); }

/* ── SEG BARS ──────────────────────────────────────────────────────────────── */
.seg-wrap { margin: 6px 0; }
.seg-meta {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: var(--blue);
  margin-bottom: 3px;
  letter-spacing: .3px;
}
.seg-bar { display: flex; gap: 1.5px; }
.seg     { height: 7px; flex: 1; background: var(--bg3); border: 1px solid var(--border); }
.seg.on  { background: var(--vio); border-color: var(--vio-b); }
.seg.on-b{ background: var(--vio-b); border-color: var(--vio-b); }
.seg.on-ok   { background: var(--ok);   border-color: var(--ok); }
.seg.on-warn { background: var(--warn); border-color: var(--warn); }
.seg.on-err  { background: var(--err);  border-color: var(--err); }

/* ── TABS ─────────────────────────────────────────────────────────────────── */
.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.tab-btn {
  font-size: 10px;
  padding: 9px 14px;
  cursor: pointer;
  color: var(--text3);
  border: none;
  border-bottom: 1px solid transparent;
  background: none;
  font-family: var(--mono);
  letter-spacing: .8px;
  font-weight: 700;
  margin-bottom: -1px;
  transition: color .1s;
}
.tab-btn:hover { color: var(--text2); }
.tab-btn.active { color: var(--vio-b); border-bottom-color: var(--vio); }
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  background: var(--bg3);
  font-size: 9px;
  color: var(--text3);
  margin-left: 5px;
  border: 1px solid var(--border);
}

/* ── APP CARDS ────────────────────────────────────────────────────────────── */
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }

.apps-list { display: flex; flex-direction: column; gap: 2px; }
.app-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color .15s;
}
.app-list-row:hover { border-color: var(--border2); }
.app-list-row[data-status="running"] { border-left: 2px solid var(--vio-dim); }

.app-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 14px;
  position: relative;
  overflow: hidden;
  transition: border-color .1s;
}
.app-card:hover { border-color: var(--border2); }
.app-card.running:hover { border-color: var(--vio-dim); }

.card-corner {
  position: absolute;
  top: 0; right: 0;
  width: 14px; height: 14px;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.app-top    { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.app-icon   { width: 36px; height: 36px; border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; background: var(--bg3); text-decoration: none; }
a.app-icon  { cursor: pointer; transition: border-color .15s, background .15s; }
a.app-icon:hover { border-color: var(--blue); background: var(--blue-g); }
.app-meta   { flex: 1; min-width: 0; }
.app-name   { font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-ver    { font-size: 9px; color: var(--text3); margin-top: 2px; }
.app-desc   { font-size: 10px; color: var(--text3); line-height: 1.5; margin-bottom: 12px; letter-spacing: .2px; }

.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 9px;
  gap: 6px;
}
.app-actions { display: flex; flex-wrap: wrap; gap: 4px; }

/* Boutons d'action : icône + label TOUJOURS visibles.
   (Avant : icône seule qui s'élargissait au survol pour révéler le label —
   comme la rangée est en flex-wrap, l'agrandissement provoquait un reflow qui
   faisait "fuir" le bouton sous le curseur → impossible de cliquer SUPPRIMER.
   En taille fixe, plus aucun mouvement au survol → clic fiable.) */
.action-btn {
  height: 24px;
  padding: 0 8px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 9px;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .5px;
  border: 1px solid var(--border2);
  background: none;
  color: var(--text3);
  cursor: pointer;
  transition: color .1s, border-color .1s, background .1s;
  white-space: nowrap;
}
.action-btn .ti { font-size: 12px; flex-shrink: 0; }
.action-btn .btn-label { opacity: 1; }
.action-btn:hover {
  color: var(--text);
  border-color: var(--text3);
  background: var(--bg3);
}
.action-btn.danger:hover { color: var(--err); border-color: var(--err); }
.action-btn.success:hover { color: var(--ok); border-color: var(--ok); }

.app-link {
  font-size: 9px;
  color: var(--vio-b);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  letter-spacing: .5px;
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
}
.app-link:hover { text-decoration: underline; }

/* ── CATALOG ──────────────────────────────────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.cat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 12px 14px;
  transition: border-color .1s;
}
.cat-card:hover { border-color: var(--border2); }
.cat-top  { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cat-name { font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: .3px; }
.cat-tag  { font-size: 9px; color: var(--text3); margin-top: 2px; letter-spacing: .5px; }
.cat-desc { font-size: 10px; color: var(--text3); line-height: 1.4; margin-bottom: 8px; }

.install-btn {
  width: 100%;
  height: 26px;
  font-size: 9px;
  border: 1px solid var(--border2);
  cursor: pointer;
  background: none;
  color: var(--text3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--mono);
  letter-spacing: .8px;
  font-weight: 700;
  transition: all .1s;
}
.install-btn:hover { background: var(--vio); color: #fff; border-color: var(--vio); }

/* ── LOG PANEL ────────────────────────────────────────────────────────────── */
.log-wrap { background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.log-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.log-select {
  background: var(--bg);
  border: 1px solid var(--border2);
  color: var(--text2);
  font-size: 10px;
  padding: 4px 8px;
  font-family: var(--mono);
  outline: none;
  letter-spacing: .5px;
}
.log-body {
  padding: 10px 12px;
  max-height: 420px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.8;
}
.log-line { display: flex; gap: 10px; }
.log-ts   { color: var(--text3); flex-shrink: 0; font-size: 10px; min-width: 80px; }
.log-tag  { flex-shrink: 0; font-weight: 700; min-width: 70px; }
.log-ok   { color: var(--vio-b); }
.log-err  { color: var(--err); }
.log-step { color: var(--warn); }
.log-info { color: var(--text3); }
.log-txt  { color: var(--text2); }
.log-path { color: #7F77DD; }
.log-cursor { display: inline-block; width: 7px; height: 13px; background: var(--vio-b); vertical-align: middle; animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:0} }

/* ── SECRETS ──────────────────────────────────────────────────────────────── */
.secret-alert {
  background: var(--bg2);
  border: 1px solid var(--vio-dim);
  padding: 9px 12px;
  font-size: 10px;
  color: var(--vio-b);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  letter-spacing: .3px;
}
.secret-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  gap: 8px;
  margin-bottom: 6px;
}
.secret-key  { font-size: 10px; color: var(--text); letter-spacing: .3px; font-weight: 500; }
.secret-app  { font-size: 9px; color: var(--text3); margin-top: 2px; }
.secret-mask { font-size: 11px; color: var(--text3); letter-spacing: 3px; }

/* ── SETTINGS ─────────────────────────────────────────────────────────────── */
/* Étiquette de section : regroupe les cartes par thème (// SYSTÈME, // COMPTE…) */
.settings-group-label {
  font-size: 10px;
  color: var(--vio-b);
  letter-spacing: 2.5px;
  font-weight: 700;
  margin: 22px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.settings-group-label:first-child { margin-top: 4px; }
.settings-card { background: var(--bg2); border: 1px solid var(--border); padding: 14px; margin-bottom: 10px; }
.settings-title {
  font-size: 9px;
  color: var(--blue);
  letter-spacing: 1.5px;
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 10px;
  color: var(--blue);
  letter-spacing: .3px;
}
.setting-row + .setting-row { border-top: 1px solid var(--border); }
.setting-val { color: var(--text); font-size: 10px; }

/* ── EMPTY STATE ──────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 60px;
  gap: 10px;
  text-align: center;
}
.empty-icon {
  width: 48px; height: 48px;
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.empty-icon .ti { font-size: 22px; color: var(--text3); }
.empty-title { font-size: 12px; color: var(--text2); font-weight: 700; letter-spacing: .5px; }
.empty-sub   { font-size: 10px; color: var(--text3); letter-spacing: .3px; }

/* ── INSTALL MODAL ────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-overlay.open { display: flex; }
.modal {
  width: 100%;
  max-width: 480px;
  background: var(--bg2);
  border: 1px solid var(--vio-dim);
  padding: 20px 24px;
  position: relative;
}
.modal-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .5px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text3);
  font-size: 16px;
}
.modal-close:hover { color: var(--text); }
.modal-params { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── SPINNER ──────────────────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 1.5px solid var(--border2);
  border-top-color: var(--vio-b);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── NOTIFICATIONS ────────────────────────────────────────────────────────── */
.notif-stack {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 200;
}
.notif {
  padding: 9px 14px;
  border: 1px solid;
  font-size: 10px;
  letter-spacing: .3px;
  max-width: 320px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  animation: slideIn .2s ease;
}
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.notif-ok   { background: var(--bg2); border-color: #0F6E5640; color: var(--ok); }
.notif-err  { background: var(--bg2); border-color: #A32D2D40; color: var(--err); }
.notif-info { background: var(--bg2); border-color: var(--vio-dim); color: var(--vio-b); }

/* ── LOGO IMAGE ──────────────────────────────────────────────────────────────── */
.logo-img-wrap { overflow: hidden; display: flex; align-items: center; justify-content: center; }
.logo-img { width: 100%; height: 100%; object-fit: cover; }

/* ── REFRESH SPIN ─────────────────────────────────────────────────────────────── */
.spinning .ti { animation: spin .6s linear; }

/* ── DASHBOARD SIMPLE MODE (Heimdall-style) ────────────────────────────────────── */
.dash-simple-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}
.dash-tile-simple {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color .1s, background .1s;
  position: relative;
  min-height: 90px;
}
.dash-tile-simple:hover { border-color: var(--vio-dim); background: var(--vio-g); }
.dash-tile-simple.offline { opacity: 0.55; }
.dts-icon { font-size: 20px; line-height: 1; margin-bottom: 2px; }
.dts-name {
  font-size: 8px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: .5px;
}
.dts-status { display: flex; align-items: center; gap: 3px; margin-top: 1px; }
.dts-actions {
  display: flex; gap: 3px; margin-top: auto; padding-top: 6px;
}
.dts-actions .btn-sm { padding: 2px 5px; font-size: 9px; }

/* ── DASHBOARD CUSTOMIZE MODE ─────────────────────────────────────────────────── */
.dash-block { position: relative; }
.dash-block-hide-btn {
  display: none;
  position: absolute; top: 50%; right: 8px;
  transform: translateY(-50%);
  background: var(--red-b); color: #fff; border: none;
  width: 22px; height: 22px; border-radius: 4px;
  cursor: pointer; z-index: 5;
  align-items: center; justify-content: center;
  transition: opacity .15s;
}
.dash-customize .dash-block {
  outline: 1px dashed var(--border1);
  border-radius: 6px;
  padding: 0 2px 2px;
  margin-bottom: 2px;
}
.dash-customize .dash-block-hide-btn { display: flex; }
#dash-customize-btn.active { background: var(--vio-g); border-color: var(--vio-dim); color: var(--vio-b); }

/* ── DASHBOARD ────────────────────────────────────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.dash-tile {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  cursor: pointer;
  font-family: var(--mono);
  text-align: left;
  transition: border-color .1s, background .1s;
  position: relative;
  overflow: hidden;
}
.dash-tile::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--vio);
  opacity: 0;
  transition: opacity .15s;
}
.dash-tile:hover { border-color: var(--vio-dim); background: var(--vio-g); }
.dash-tile:hover::before { opacity: 1; }
.dash-tile-icon { font-size: 18px; color: var(--vio-b); margin-bottom: 2px; }
.dash-tile-label { font-size: 9px; font-weight: 700; color: var(--text); letter-spacing: .8px; }
.dash-tile-sub { font-size: 9px; color: var(--text3); letter-spacing: .3px; }
.dash-loading { display: flex; align-items: center; gap: 10px; padding: 40px; font-size: 10px; color: var(--text3); }
.mc-err { }
.mc-err .mc-val { color: var(--err); }

/* ── BACKUP ROWS ──────────────────────────────────────────────────────────── */
.backup-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: var(--bg2);
  margin-bottom: 12px;
}
.backup-list { display: flex; flex-direction: column; gap: 6px; }
.backup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  gap: 10px;
  transition: border-color .1s;
}
.backup-row:hover { border-color: var(--border2); }
.backup-info { flex: 1; min-width: 0; }
.backup-name { font-size: 11px; color: var(--text); font-weight: 500; letter-spacing: .3px; }
.backup-meta { font-size: 9px; color: var(--blue); margin-top: 3px; letter-spacing: .3px; }
.backup-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── LOCATION ROWS ────────────────────────────────────────────────────────── */
.loc-list { display: flex; flex-direction: column; gap: 6px; }
.loc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  gap: 10px;
  transition: border-color .1s;
}
.loc-row:hover { border-color: var(--border2); }
.loc-info { flex: 1; min-width: 0; }
.loc-name { font-size: 11px; color: var(--text); font-weight: 500; letter-spacing: .3px; }
.loc-meta { font-size: 9px; color: var(--blue); margin-top: 3px; letter-spacing: .3px; }
.loc-type-badge { font-size: 9px; color: var(--blue); border: 1px solid var(--blue-dim); padding: 2px 6px; letter-spacing: .5px; font-weight: 700; }

/* ── SECRETS UNLOCK ───────────────────────────────────────────────────────── */
.secret-unlocked-bar {
  background: var(--bg2);
  border: 1px solid #0F6E5640;
  padding: 9px 12px;
  font-size: 10px;
  color: var(--ok);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  letter-spacing: .3px;
}

/* ── TASK QUEUE (Proxmox-style) ──────────────────────────────────────────── */
#task-queue { font-family: var(--mono); }
.task-row:hover { background: var(--bg3); }
/* Barre de progression indéterminée pour tâche en cours */
.task-seg-run {
  height: 7px; flex: 1;
  background: var(--bg3); border: 1px solid var(--border);
  animation: taskPulse 1.2s ease-in-out infinite;
}
@keyframes taskPulse {
  0%,100% { background: var(--bg3); border-color: var(--border); }
  50%     { background: var(--vio); border-color: var(--vio-b); }
}
.seg-err { background: var(--err); border-color: #A32D2D; }

/* ── UTILITIES ────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.mono { font-family: var(--mono); }
.text-vio  { color: var(--vio-b); }
.text-ok   { color: var(--ok); }
.text-err  { color: var(--err); }
.text-warn { color: var(--warn); }
.text-dim  { color: var(--text3); }

/* ══════════════════════════════════════════════════════════════════════════
   TERMINAL
   ══════════════════════════════════════════════════════════════════════════ */
.term-wrap {
  width: 100%; height: calc(100vh - 56px);
  background: #0a0a0f;
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
}
#xterm-container {
  width: 100%; height: 100%;
}
#xterm-container .xterm { height: 100%; }
#xterm-container .xterm-viewport { overflow-y: auto !important; }

/* ══════════════════════════════════════════════════════════════════════════
   SERVICES
   ══════════════════════════════════════════════════════════════════════════ */
.svc-list { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.svc-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 14px;
  transition: background .15s;
}
.svc-row:hover { background: var(--bg3); }
.svc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.svc-info { flex: 1; min-width: 0; }
.svc-name { font-size: 11px; font-weight: 600; letter-spacing: .5px; color: var(--text1); font-family: var(--mono); }
.svc-desc { font-size: 9px; color: var(--text3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-badges { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.svc-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   RÉSEAU
   ══════════════════════════════════════════════════════════════════════════ */
.net-section-title {
  font-size: 9px; letter-spacing: 1px; color: var(--blue);
  padding: 0 16px; margin-top: 16px; margin-bottom: 8px;
}
.net-grid { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.net-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px; padding: 12px 14px;
}
.net-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.net-ifname { font-size: 12px; font-weight: 700; font-family: var(--mono); color: var(--text1); }
.net-mac { font-size: 9px; color: var(--text3); font-family: var(--mono); flex: 1; }
.net-addr { display: flex; align-items: baseline; gap: 4px; font-family: var(--mono); font-size: 10px; padding: 2px 0; }
.net-ip { color: var(--text1); }
.net-prefix { color: var(--text3); }
.net-scope { font-size: 8px; color: var(--text3); letter-spacing: .5px; }
.table-wrap { padding: 0 16px; overflow-x: auto; }
.sys-table { width: 100%; border-collapse: collapse; font-size: 10px; font-family: var(--mono); }
.sys-table th { color: var(--text3); font-weight: 500; letter-spacing: .5px; border-bottom: 1px solid var(--border); padding: 6px 8px; text-align: left; }
.sys-table td { color: var(--text2); border-bottom: 1px solid var(--border)20; padding: 5px 8px; }
.sys-table tr:hover td { background: var(--bg3); }

/* ══════════════════════════════════════════════════════════════════════════
   STOCKAGE
   ══════════════════════════════════════════════════════════════════════════ */
.storage-header { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.disk-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.disk-row {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px; padding: 12px 14px;
  display: flex; align-items: center; gap: 16px;
}
.disk-avail-row {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 14px;
  display: flex; align-items: center; gap: 16px;
}
.disk-avail-row:hover { background: var(--bg3); }
.disk-info { min-width: 160px; flex-shrink: 0; }
.disk-target { font-size: 11px; font-weight: 600; font-family: var(--mono); color: var(--text1); }
.disk-source { font-size: 9px; color: var(--text3); margin-top: 2px; font-family: var(--mono); }
.disk-bar-wrap { flex: 1; }
.disk-bar { height: 4px; background: var(--bg3); border-radius: 2px; margin-bottom: 6px; overflow: hidden; }
.disk-bar-fill { height: 100%; border-radius: 2px; transition: width .3s; }
.disk-stats { font-size: 9px; font-family: var(--mono); }

/* ══════════════════════════════════════════════════════════════════════════
   JOURNAL
   ══════════════════════════════════════════════════════════════════════════ */
.journal-wrap { display: flex; flex-direction: column; height: calc(100vh - 56px); }
.journal-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
#journal-body {
  flex: 1; overflow-y: auto;
  font-family: var(--mono); font-size: 10px;
  padding: 8px 0;
  background: var(--bg1);
}
#journal-body .log-line { padding: 2px 14px; display: flex; gap: 8px; align-items: baseline; }
#journal-body .log-line:hover { background: var(--bg2); }
#journal-body .log-ts  { color: var(--text3); flex-shrink: 0; min-width: 56px; }
#journal-body .log-app { flex-shrink: 0; min-width: 100px; }
#journal-body .log-level { flex-shrink: 0; min-width: 52px; font-size: 9px; letter-spacing: .3px; }
#journal-body .log-msg { color: var(--text2); word-break: break-word; }

/* ── Loading / empty states ─────────────────────────────────────────────── */
.loading-msg, .empty-msg {
  padding: 40px 20px; text-align: center;
  color: var(--text3); font-size: 11px; letter-spacing: .5px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}