body { background: var(--gradient-page-bg); background-attachment: fixed; }

    /* --- Login screen --- */
    .login-container {
      max-width: 420px; margin: 0 auto; padding: var(--spacing-xl);
      min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
    }
    .login-header { text-align: center; margin-bottom: var(--spacing-xl); }
    .login-header h1 { font-size: 1.5rem; color: var(--uttop-blue); margin-bottom: var(--spacing-xs); }
    .login-header p { color: var(--text-secondary); font-size: 0.9rem; }
    .login-card {
      background: var(--bg-primary); border-radius: var(--radius-lg);
      padding: var(--spacing-xl); box-shadow: var(--shadow-lg);
    }
    .form-group { margin-bottom: var(--spacing-md); }
    .form-group label {
      display: block; font-size: 0.85rem; font-weight: 600;
      color: var(--text-secondary); margin-bottom: var(--spacing-xs);
    }
    .form-group input[type="password"] {
      width: 100%; padding: var(--spacing-sm) var(--spacing-md);
      border: 2px solid var(--border-light); border-radius: var(--radius-md);
      font-size: 1rem; background: var(--bg-primary); color: var(--text-primary);
      transition: border-color var(--transition-base); box-sizing: border-box;
    }
    .form-group input:focus { outline: none; border-color: var(--uttop-blue); }
    .login-error { color: var(--color-error); font-size: 0.85rem; margin-top: var(--spacing-sm); display: none; }

    /* --- Admin header (same style as dashboard) --- */
    .admin-header {
      background: var(--bg-primary);
      border-bottom: 3px solid; border-image: var(--gradient-rainbow) 1;
      padding: 0 var(--spacing-lg); display: flex; align-items: center;
      justify-content: space-between; position: sticky; top: 0;
      z-index: var(--z-sticky); height: 56px; gap: var(--spacing-md);
    }
    .header-left { display: flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; }
    .header-logo { font-weight: 800; color: var(--uttop-blue); font-size: 1.15rem; text-decoration: none; }
    .header-logo:hover { text-decoration: none; }
    .admin-badge {
      font-size: 0.65rem; padding: 2px 8px; border-radius: var(--radius-full);
      background: rgba(16,153,125,0.12); color: var(--uttop-green); font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.05em;
    }
    /* Network badge */
    .network-badge {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 0.7rem; font-weight: 600; padding: 3px 10px;
      border-radius: var(--radius-full); white-space: nowrap;
    }
    .network-badge svg { width: 14px; height: 14px; flex-shrink: 0; }
    .net-campus  { background: rgba(16,153,125,0.12); color: var(--uttop-green); }
    .net-vpn     { background: rgba(41,128,185,0.12); color: var(--uttop-blue-light); }
    .net-externe { background: rgba(255,152,0,0.12);  color: #E68900; }
    .net-offline { background: var(--gray-200);        color: var(--gray-500); }

    /* Clock */
    .header-center { display: flex; align-items: baseline; gap: var(--spacing-sm); flex: 1; justify-content: center; }
    .header-date { font-size: 0.82rem; color: var(--text-secondary); white-space: nowrap; }
    .header-time { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

    /* Header right */
    .header-right { display: flex; align-items: center; gap: var(--spacing-xs); flex-shrink: 0; }
    .header-btn {
      width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
      border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer;
      transition: all var(--transition-fast); background: none; border: none;
    }
    .header-btn:hover { background: var(--gray-200); color: var(--uttop-blue); }
    .header-btn svg { width: 18px; height: 18px; }
    .icon-sun  { display: block; }
    .icon-moon { display: none; }
    [data-theme="dark"] .icon-sun  { display: none; }
    [data-theme="dark"] .icon-moon { display: block; }

    /* --- Admin main --- */
    .admin-main { padding: var(--spacing-md); max-width: 1200px; margin: 0 auto; }

    /* --- Tabs --- */
    .admin-tabs {
      display: flex; gap: var(--spacing-xs); margin-bottom: var(--spacing-lg);
      border-bottom: 2px solid var(--border-light); overflow-x: auto;
    }
    .admin-tab {
      padding: var(--spacing-sm) var(--spacing-md); font-size: 0.9rem; font-weight: 600;
      color: var(--text-secondary); cursor: pointer; border: none; background: none;
      border-bottom: 3px solid transparent; margin-bottom: -2px;
      transition: all var(--transition-base); white-space: nowrap;
    }
    .admin-tab:hover { color: var(--uttop-blue); }
    .admin-tab.active { color: var(--uttop-blue); border-bottom-color: var(--uttop-blue); }
    .tab-count {
      display: inline-block; min-width: 20px; height: 20px; line-height: 20px;
      text-align: center; font-size: 0.7rem; border-radius: var(--radius-full);
      background: var(--gray-200); color: var(--text-secondary); margin-left: var(--spacing-xs);
    }
    .tab-count.alert { background: var(--color-warning); color: #fff; }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /* --- Stats --- */
    .stats-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: var(--spacing-md); margin-bottom: var(--spacing-lg);
    }
    .stat-card {
      background: var(--bg-primary); border-radius: var(--radius-lg);
      padding: var(--spacing-lg); box-shadow: var(--shadow-sm); text-align: center;
      transition: all var(--transition-base); border: 1px solid var(--border-light);
    }
    .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
    .stat-value { font-size: 2rem; font-weight: 800; color: var(--uttop-blue); line-height: 1; margin-bottom: var(--spacing-xs); }
    .stat-label { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; }
    .stat-card.alert { border-color: var(--color-warning); }
    .stat-card.alert .stat-value { color: var(--color-warning); }

    /* Distrib */
    .distrib-section { margin-bottom: var(--spacing-lg); }
    .distrib-section h3 { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: var(--spacing-sm); }
    .distrib-grid { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
    .distrib-chip {
      display: inline-flex; align-items: center; gap: var(--spacing-xs);
      padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-full);
      background: var(--bg-primary); border: 1px solid var(--border-light);
      font-size: 0.8rem; color: var(--text-primary);
    }
    .chip-count { font-weight: 700; color: var(--uttop-blue); }
    .chip-label { color: var(--text-secondary); }

    /* --- Pending items --- */
    .pending-list { display: flex; flex-direction: column; gap: var(--spacing-sm); }
    .pending-item {
      display: flex; align-items: center; justify-content: space-between;
      gap: var(--spacing-md); padding: var(--spacing-md);
      background: var(--bg-primary); border-radius: var(--radius-lg);
      border: 1px solid var(--border-light); transition: all var(--transition-base);
    }
    .pending-item:hover { box-shadow: var(--shadow-sm); }
    .pending-name { font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
    .pending-meta { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; font-size: 0.75rem; color: var(--text-disabled); }
    .pending-actions { display: flex; gap: var(--spacing-xs); flex-shrink: 0; }
    .btn-validate {
      background: var(--uttop-green); color: #fff;
      padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-md);
      font-size: 0.8rem; font-weight: 600; border: none; cursor: pointer;
      transition: all var(--transition-fast);
    }
    .btn-validate:hover { background: var(--uttop-light-green); }
    .btn-reject {
      background: var(--color-error); color: #fff;
      padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-md);
      font-size: 0.8rem; font-weight: 600; border: none; cursor: pointer;
      transition: all var(--transition-fast);
    }
    .btn-reject:hover { opacity: 0.85; }
    .btn-message {
      background: var(--uttop-purple); color: #fff;
      padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-md);
      font-size: 0.8rem; font-weight: 600; border: none; cursor: pointer;
      transition: all var(--transition-fast);
    }
    .btn-message:hover { opacity: 0.85; }

    /* Empty state */
    .empty-state {
      text-align: center; padding: var(--spacing-2xl);
      color: var(--text-disabled); font-size: 0.9rem;
    }

    /* --- Hosts table --- */
    .hosts-table-wrapper { overflow-x: auto; }
    .hosts-table {
      width: 100%; border-collapse: collapse; background: var(--bg-primary);
      border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
    }
    .hosts-table th {
      text-align: left; padding: var(--spacing-sm) var(--spacing-md);
      font-size: 0.75rem; font-weight: 700; color: var(--text-secondary);
      text-transform: uppercase; letter-spacing: 0.05em;
      background: var(--bg-secondary); border-bottom: 2px solid var(--border-light);
    }
    .hosts-table td {
      padding: var(--spacing-sm) var(--spacing-md); font-size: 0.875rem;
      color: var(--text-primary); border-bottom: 1px solid var(--border-light);
    }
    .hosts-table tr:last-child td { border-bottom: none; }
    .hosts-table tr:hover td { background: var(--bg-secondary); }

    /* --- Config --- */
    .config-card {
      background: var(--bg-primary); border-radius: var(--radius-lg);
      padding: var(--spacing-lg); box-shadow: var(--shadow-sm);
      border: 1px solid var(--border-light);
    }
    .config-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--border-light);
    }
    .config-row:last-child { border-bottom: none; }
    .config-label { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
    .config-desc { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }
    .config-control { flex-shrink: 0; }
    .toggle { position: relative; display: inline-block; width: 48px; height: 26px; }
    .toggle input { opacity: 0; width: 0; height: 0; }
    .toggle-slider {
      position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
      background-color: var(--gray-300); border-radius: 26px; transition: var(--transition-base);
    }
    .toggle-slider::before {
      content: ""; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px;
      background-color: #fff; border-radius: 50%; transition: var(--transition-base);
    }
    .toggle input:checked + .toggle-slider { background-color: var(--uttop-green); }
    .toggle input:checked + .toggle-slider::before { transform: translateX(22px); }
    .config-input {
      width: 80px; padding: var(--spacing-xs) var(--spacing-sm);
      border: 2px solid var(--border-light); border-radius: var(--radius-md);
      font-size: 0.9rem; text-align: center; background: var(--bg-primary);
      color: var(--text-primary); box-sizing: border-box;
    }
    .config-input:focus { outline: none; border-color: var(--uttop-blue); }
    .config-actions { margin-top: var(--spacing-lg); display: flex; gap: var(--spacing-sm); justify-content: flex-end; }

    /* --- Toast --- */
    .toast {
      position: fixed; bottom: var(--spacing-lg); right: var(--spacing-lg);
      padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-md);
      color: #fff; font-size: 0.9rem; font-weight: 500; box-shadow: var(--shadow-lg);
      z-index: var(--z-tooltip); transform: translateY(100px); opacity: 0;
      transition: all var(--transition-slow); pointer-events: none;
    }
    .toast.visible { transform: translateY(0); opacity: 1; }
    .toast.success { background: var(--uttop-green); }
    .toast.error { background: var(--color-error); }
    .toast.info { background: var(--uttop-blue); }

    /* Refresh bar */
    .refresh-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-md); }
    .refresh-bar h2 { font-size: 1.1rem; margin: 0; color: var(--text-primary); }
    .last-refresh { font-size: 0.75rem; color: var(--text-disabled); }

    /* --- Host status badges --- */
    .conn-status {
      font-size: 0.75rem;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: var(--radius-full);
      white-space: nowrap;
    }
    .status-active { background: rgba(16, 153, 125, 0.12); color: var(--uttop-green); }
    .status-inactive { background: rgba(255, 152, 0, 0.12); color: #E68900; }
    .status-disconnected { background: var(--gray-200); color: var(--gray-500); }
    .status-revoked { background: rgba(220, 53, 69, 0.1); color: var(--color-error, #dc3545); }

    .row-revoked { opacity: 0.6; }

    /* --- Host action buttons --- */
    .host-actions {
      display: flex;
      gap: 4px;
      white-space: nowrap;
    }
    .btn-action {
      font-size: 0.72rem;
      padding: 3px 8px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--gray-300);
      background: var(--bg-primary);
      color: var(--text-secondary);
      cursor: pointer;
      transition: all var(--transition-fast);
    }
    .btn-action:hover {
      background: var(--gray-100);
      color: var(--text-primary);
    }
    .btn-revoke {
      border-color: rgba(220, 53, 69, 0.3);
      color: var(--color-error, #dc3545);
    }
    .btn-revoke:hover {
      background: rgba(220, 53, 69, 0.1);
    }
    .btn-msg-host {
      border-color: rgba(0, 116, 183, 0.3);
      color: var(--uttop-blue);
    }
    .btn-msg-host:hover {
      background: rgba(0, 116, 183, 0.1);
    }

    /* --- Responsive --- */
    @media (max-width: 768px) {
      .admin-main { padding: var(--spacing-sm); }
      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); }
      .pending-item { flex-direction: column; align-items: flex-start; }
      .pending-actions { width: 100%; justify-content: flex-end; }
      .config-row { flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); }
      .admin-tabs { gap: 0; }
      .admin-tab { padding: var(--spacing-sm); font-size: 0.8rem; }
      .admin-header { padding: 0 var(--spacing-sm); gap: var(--spacing-xs); }
      .header-center { display: none; }
    }