/* ============================================================
 * Windows Lab Qcow2 — Global component styles
 * Depends on: colors_and_type.css tokens. These .ds-* classes are the shared
 * vocabulary used by the templates and the inline page scripts. Framework-free;
 * everything is driven by the design tokens.
 * ============================================================ */

/* ============================================================
 * Buttons
 * Defensive states baked in:
 *   :disabled        → not-allowed, muted
 *   [data-loading]   → spinner overlay + pointer-events:none
 *   [aria-busy]      → paired with data-loading by ds-ui.setLoading
 * ============================================================ */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--control-h-md);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font: 500 15px/22px var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard);
}
.ds-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ds-btn:active:not(:disabled) { transform: scale(0.985); }
.ds-btn:disabled { cursor: not-allowed; }

.ds-btn--primary { background: var(--accent-600); color: var(--neutral-0); }
.ds-btn--primary:hover:not(:disabled) { background: var(--accent-500); }
.ds-btn--primary:active:not(:disabled) { background: var(--accent-700); }
.ds-btn--primary:disabled { background: var(--neutral-200); color: var(--neutral-400); }

.ds-btn--secondary { background: var(--neutral-0); color: var(--neutral-700); border-color: var(--neutral-200); }
.ds-btn--secondary:hover:not(:disabled) { background: var(--neutral-50); border-color: var(--neutral-300); }
.ds-btn--secondary:active:not(:disabled) { background: var(--neutral-100); }
.ds-btn--secondary:disabled { background: var(--neutral-50); color: var(--neutral-400); border-color: var(--neutral-200); }

.ds-btn--destructive { background: var(--danger-600); color: var(--neutral-0); }
.ds-btn--destructive:hover:not(:disabled) { background: var(--danger-700); }
.ds-btn--destructive:active:not(:disabled) { background: var(--danger-700); }
.ds-btn--destructive:disabled { background: var(--neutral-200); color: var(--neutral-400); }

.ds-btn--ghost { background: transparent; color: var(--neutral-700); }
.ds-btn--ghost:hover:not(:disabled) { background: var(--neutral-100); }
.ds-btn--ghost:active:not(:disabled) { background: var(--neutral-200); }

.ds-btn--success { background: var(--success-600); color: var(--neutral-0); }
.ds-btn--success:hover:not(:disabled) { background: var(--success-700); }

.ds-btn--warning { background: var(--warning-100); color: var(--warning-700); border-color: var(--warning-100); }
.ds-btn--warning:hover:not(:disabled) { background: var(--warning-600); color: var(--neutral-0); border-color: var(--warning-600); }

.ds-btn--sm { min-height: var(--control-h-sm); padding: 6px 11px; font-size: 14px; line-height: 20px; }
.ds-btn--lg { min-height: var(--control-h-lg); padding: 11px 22px; font-size: 16px; line-height: 22px; }
.ds-btn--block { width: 100%; }

.ds-btn .icon, .ds-btn i, .ds-btn svg { width: 16px; height: 16px; stroke-width: 1.75; flex-shrink: 0; }
.ds-btn--lg i, .ds-btn--lg svg { width: 18px; height: 18px; }

.ds-btn[data-loading="true"] { color: transparent; position: relative; pointer-events: none; }
.ds-btn[data-loading="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px;
  border: 2px solid rgb(255 255 255 / 50%); border-top-color: #fff;
  border-radius: 50%;
  animation: ds-spin 0.8s linear infinite;
}
.ds-btn--secondary[data-loading="true"]::after,
.ds-btn--ghost[data-loading="true"]::after,
.ds-btn--warning[data-loading="true"]::after { border-color: var(--neutral-300); border-top-color: var(--neutral-700); }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* Icon-only button — square, keeps a 44px touch target via min-height/width */
.ds-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-h-md); height: var(--control-h-md);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent; color: var(--neutral-600);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-standard), color var(--dur-micro) var(--ease-standard);
}
.ds-icon-btn:hover:not(:disabled) { background: var(--neutral-100); color: var(--neutral-800); }
.ds-icon-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ds-icon-btn:active:not(:disabled) { transform: scale(0.94); }
.ds-icon-btn:disabled { color: var(--neutral-300); cursor: not-allowed; }
.ds-icon-btn i, .ds-icon-btn svg { width: 18px; height: 18px; stroke-width: 1.75; }
.ds-icon-btn--sm { width: var(--control-h-sm); height: var(--control-h-sm); }
.ds-icon-btn--sm i, .ds-icon-btn--sm svg { width: 16px; height: 16px; }

/* ============================================================
 * Inputs / Select / Textarea
 * ============================================================ */
.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  min-height: var(--control-h-md);
  padding: 9px 12px;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  font: 400 15px/23px var(--font-sans);
  color: var(--neutral-800);
  transition: border-color var(--dur-micro) var(--ease-standard), box-shadow var(--dur-micro) var(--ease-standard);
}
.ds-textarea { min-height: 88px; resize: vertical; }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--neutral-400); }
.ds-input:hover, .ds-select:hover, .ds-textarea:hover { border-color: var(--neutral-300); }
.ds-input:focus-visible,
.ds-select:focus-visible,
.ds-textarea:focus-visible {
  outline: none;
  border-color: var(--accent-600);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.ds-input:disabled, .ds-select:disabled, .ds-textarea:disabled {
  background: var(--neutral-100); color: var(--neutral-400); cursor: not-allowed;
}
.ds-input[aria-invalid="true"], .ds-textarea[aria-invalid="true"], .ds-select[aria-invalid="true"] { border-color: var(--danger-600); }
.ds-input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px var(--danger-100); }

.ds-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23665040' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
}
.ds-select::-ms-expand { display: none; }
.ds-select:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a89e92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.ds-label { display: block; font: 500 14px/20px var(--font-sans); color: var(--neutral-700); margin-bottom: 6px; }
.ds-label--required::after { content: "*"; color: var(--danger-600); margin-left: 4px; font-weight: 600; }
.ds-label__optional { margin-left: 6px; font: 500 13px/16px var(--font-sans); color: var(--neutral-400); }
.ds-helper { font: 400 13px/18px var(--font-sans); color: var(--neutral-500); margin-top: 6px; }
.ds-error { font: 500 13px/18px var(--font-sans); color: var(--danger-600); margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.ds-error i, .ds-error svg { width: 15px; height: 15px; }

/* Checkbox / Radio — native control, brand-tinted */
.ds-checkbox, .ds-radio {
  width: 18px; height: 18px; border: 1.5px solid var(--neutral-300);
  background: var(--neutral-0); cursor: pointer; accent-color: var(--accent-600);
  flex-shrink: 0;
}
.ds-checkbox { border-radius: 4px; }
.ds-radio { border-radius: 50%; }

/* Switch — accessible toggle (wrap a visually-hidden checkbox) */
.ds-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.ds-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds-switch__track {
  position: relative; width: 40px; height: 24px; border-radius: var(--radius-pill);
  background: var(--neutral-300); transition: background-color var(--dur-small) var(--ease-standard); flex-shrink: 0;
}
.ds-switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--neutral-0); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-small) var(--ease-standard);
}
.ds-switch input:checked + .ds-switch__track { background: var(--accent-600); }
.ds-switch input:checked + .ds-switch__track::after { transform: translateX(16px); }
.ds-switch input:focus-visible + .ds-switch__track { box-shadow: var(--shadow-focus); }
.ds-switch input:disabled + .ds-switch__track { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
 * Card
 * ============================================================ */
.ds-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-7);
}
.ds-card--flush { padding: 0; }
.ds-card--interactive { cursor: pointer; transition: border-color var(--dur-micro) var(--ease-standard), box-shadow var(--dur-micro) var(--ease-standard), transform var(--dur-micro) var(--ease-standard); }
.ds-card--interactive:hover { border-color: var(--accent-400); box-shadow: var(--shadow-md); }
.ds-card--interactive:active { transform: translateY(1px); }
.ds-card__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-7);
  border-bottom: 1px solid var(--border-default);
}
.ds-card__body { padding: var(--space-7); }
.ds-card__title { font: 600 18px/27px var(--font-sans); color: var(--neutral-900); margin: 0; }

/* ============================================================
 * Badge & Status pill
 * ============================================================ */
.ds-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font: 600 13px/17px var(--font-sans); border: 1px solid transparent; white-space: nowrap;
}
.ds-badge i, .ds-badge svg { width: 12px; height: 12px; stroke-width: 1.75; }
.ds-badge--neutral   { background: var(--neutral-100); color: var(--neutral-700); border-color: var(--neutral-200); }
.ds-badge--accent    { background: var(--accent-50);   color: var(--accent-700);  border-color: var(--accent-100); }
.ds-badge--success   { background: var(--success-50);  color: var(--success-700); border-color: var(--success-100); }
.ds-badge--warning   { background: var(--warning-50);  color: var(--warning-700); border-color: var(--warning-100); }
.ds-badge--danger    { background: var(--danger-50);   color: var(--danger-700);  border-color: var(--danger-100); }
.ds-badge--info      { background: var(--info-50);     color: var(--info-700);    border-color: var(--info-100); }
.ds-badge--windows   { background: var(--windows-50);  color: var(--windows-700); border-color: var(--windows-100); }
.ds-badge--highlight { background: var(--highlight-yellow-100); color: var(--accent-700); border-color: var(--highlight-yellow-500); }

/* Status pill — a badge with a leading state dot */
.ds-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px; border-radius: var(--radius-pill);
  font: 600 13px/17px var(--font-sans); border: 1px solid transparent; white-space: nowrap;
}
.ds-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ds-pill--running     { background: var(--success-50); color: var(--success-700); border-color: var(--success-100); }
.ds-pill--restarting,
.ds-pill--preparing,
.ds-pill--terminating,
.ds-pill--noip        { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-100); }
.ds-pill--creating,
.ds-pill--booting     { background: var(--info-50); color: var(--info-700); border-color: var(--info-100); }
.ds-pill--restarting::before,
.ds-pill--preparing::before,
.ds-pill--creating::before,
.ds-pill--booting::before,
.ds-pill--terminating::before { animation: ds-pulse 1.4s ease-in-out infinite; }
.ds-pill--queued, .ds-pill--idle { background: var(--neutral-100); color: var(--neutral-600); border-color: var(--neutral-200); }
.ds-pill--queued::before, .ds-pill--idle::before { background: var(--neutral-500); }
.ds-pill--stopped, .ds-pill--error, .ds-pill--failed { background: var(--danger-50); color: var(--danger-700); border-color: var(--danger-100); }
.ds-pill--windows     { background: var(--windows-50); color: var(--windows-700); border-color: var(--windows-100); }
.ds-pill--info        { background: var(--info-50); color: var(--info-700); border-color: var(--info-100); }
.ds-pill--highlight   { background: var(--highlight-yellow-100); color: var(--accent-700); border-color: var(--highlight-yellow-500); }
@keyframes ds-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ============================================================
 * Stat card
 * ============================================================ */
.ds-stat {
  position: relative; background: var(--surface-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: 16px 16px 18px; min-height: 96px;
}
.ds-stat__icon {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-50); color: var(--accent-600);
}
.ds-stat__icon i, .ds-stat__icon svg { width: 18px; height: 18px; stroke-width: 1.75; }
.ds-stat__icon--success { background: var(--success-50); color: var(--success-700); }
.ds-stat__icon--warning { background: var(--warning-50); color: var(--warning-700); }
.ds-stat__icon--info    { background: var(--info-50);    color: var(--info-700); }
.ds-stat__icon--windows { background: var(--windows-50); color: var(--windows-700); }
.ds-stat__icon--danger  { background: var(--danger-50);  color: var(--danger-700); }
.ds-stat__value { font: 600 30px/36px var(--font-sans); color: var(--neutral-900); letter-spacing: -0.01em; padding-right: 44px; }
.ds-stat__label { font: 500 14px/20px var(--font-sans); color: var(--neutral-500); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-stat__delta { display: inline-flex; align-items: center; gap: 3px; margin-top: 8px; padding: 2px 8px; border-radius: var(--radius-pill); font: 500 13px/17px var(--font-mono); }
.ds-stat__delta--up   { background: var(--success-50); color: var(--success-700); }
.ds-stat__delta--down { background: var(--danger-50);  color: var(--danger-700); }

/* ============================================================
 * Table
 * ============================================================ */
.ds-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ds-table thead th {
  text-align: left; font: 600 12px/17px var(--font-sans);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--neutral-500);
  padding: 10px 14px; background: var(--neutral-50); border-bottom: 1px solid var(--neutral-200);
  position: sticky; top: 0;
}
.ds-table tbody td { padding: 13px 14px; font: 400 14px/20px var(--font-sans); color: var(--neutral-800); border-bottom: 1px solid var(--neutral-100); }
.ds-table tbody tr:hover td { background: var(--neutral-50); }
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-table .mono { font-family: var(--font-mono); font-size: 13.5px; color: var(--neutral-700); }

/* ============================================================
 * Toast / Banner
 * ============================================================ */
.ds-toast {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 16px; background: var(--neutral-900); color: var(--neutral-0);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font: 500 14px/20px var(--font-sans);
}
.ds-toast i, .ds-toast svg { width: 16px; height: 16px; stroke-width: 2; }
.ds-toast--success { background: var(--success-700); }
.ds-toast--error { background: var(--danger-700); }

.ds-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px; border-radius: var(--radius-md); border: 1px solid; font: 400 14px/22px var(--font-sans);
}
.ds-banner i, .ds-banner svg { width: 16px; height: 16px; stroke-width: 1.75; margin-top: 2px; flex-shrink: 0; }
.ds-banner--info    { background: var(--info-50);    border-color: var(--info-100);    color: var(--info-700); }
.ds-banner--warning { background: var(--warning-50); border-color: var(--warning-100); color: var(--warning-700); }
.ds-banner--danger  { background: var(--danger-50);  border-color: var(--danger-100);  color: var(--danger-700); }
.ds-banner--success { background: var(--success-50); border-color: var(--success-100); color: var(--success-700); }
.ds-banner strong { color: inherit; font-weight: 600; }

/* ============================================================
 * Modal / Dialog
 * ============================================================ */
.ds-dialog {
  background: var(--neutral-0); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
  max-width: 480px; width: 100%; border: 1px solid var(--neutral-200); overflow: hidden;
}
.ds-dialog__header { padding: 20px 24px 4px; }
.ds-dialog__title { font: 600 20px/28px var(--font-sans); color: var(--neutral-900); margin: 0; }
.ds-dialog__body { padding: 12px 24px 8px; font: 400 15px/24px var(--font-sans); color: var(--neutral-700); }
.ds-dialog__footer { padding: 16px 24px 20px; display: flex; justify-content: flex-end; gap: 8px; }
.ds-backdrop {
  position: fixed; inset: 0; background: var(--backdrop);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}

/* ============================================================
 * Tabs
 * ============================================================ */
.ds-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--neutral-200); overflow-x: auto; scrollbar-width: thin; }
.ds-tab {
  display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; white-space: nowrap;
  padding: 10px 18px; min-height: var(--control-h-lg); font: 500 15px/22px var(--font-sans);
  color: var(--neutral-500); border: none; background: transparent;
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
  transition: color var(--dur-micro) var(--ease-standard), border-color var(--dur-micro) var(--ease-standard);
}
.ds-tab__icon { width: 17px; height: 17px; flex-shrink: 0; }
.ds-tab i, .ds-tab svg { width: 17px; height: 17px; stroke-width: 1.75; }
.ds-tab__count { margin-left: 1px; }
.ds-tab:hover { color: var(--neutral-800); }
.ds-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.ds-tab[aria-selected="true"] { color: var(--accent-700); border-bottom-color: var(--accent-600); }

/* Segmented control — compact 2-3 option switch */
.ds-segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--neutral-100); border-radius: var(--radius-md); border: 1px solid var(--neutral-200); flex-wrap: wrap; }
.ds-segmented button {
  border: none; background: transparent; cursor: pointer; color: var(--neutral-600);
  padding: 6px 13px; border-radius: var(--radius-sm); font: 500 14px/20px var(--font-sans);
  transition: background-color var(--dur-micro) var(--ease-standard), color var(--dur-micro) var(--ease-standard);
}
.ds-segmented button:hover { color: var(--neutral-900); }
.ds-segmented button[aria-pressed="true"], .ds-segmented button[aria-selected="true"] { background: var(--neutral-0); color: var(--accent-700); box-shadow: var(--shadow-xs); }
.ds-segmented button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ============================================================
 * Chip / copyable code token
 * ============================================================ */
.ds-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; background: var(--neutral-100); border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm); font: 500 13px/18px var(--font-mono); color: var(--neutral-800);
}
.ds-chip button { background: transparent; border: none; cursor: pointer; padding: 0; color: var(--neutral-500); display: inline-flex; }
.ds-chip button:hover { color: var(--accent-600); }
.ds-chip i, .ds-chip svg { width: 13px; height: 13px; stroke-width: 1.75; }

/* Avatar */
.ds-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-100); color: var(--accent-700);
  font: 600 14px/1 var(--font-sans); text-transform: uppercase; overflow: hidden;
}
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-avatar--sm { width: 28px; height: 28px; font-size: 12px; }
.ds-avatar--lg { width: 48px; height: 48px; font-size: 18px; }

/* Tooltip — pure-CSS, attribute-driven (data-tip). Decorative; pair with aria-label for SR. */
.ds-tip { position: relative; }
.ds-tip::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  padding: 5px 9px; background: var(--neutral-900); color: var(--neutral-0); border-radius: var(--radius-sm);
  font: 500 13px/17px var(--font-sans); white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-micro) var(--ease-standard), transform var(--dur-micro) var(--ease-standard); z-index: var(--z-overlay);
}
.ds-tip:hover::after, .ds-tip:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Divider */
.ds-divider { height: 1px; background: var(--border-default); border: 0; margin: var(--space-6) 0; }

/* ============================================================
 * OtpInput — six single-digit boxes for one-time codes / 2FA
 * ============================================================ */
.ds-otp { display: flex; gap: 8px; }
.ds-otp__box {
  flex: 1; min-width: 0; aspect-ratio: 1 / 1; text-align: center;
  font: 600 22px/1 var(--font-mono); color: var(--neutral-900);
  background: var(--neutral-0); border: 1.5px solid var(--neutral-200); border-radius: var(--radius-md);
  transition: border-color var(--dur-micro) var(--ease-standard), box-shadow var(--dur-micro) var(--ease-standard), background-color var(--dur-micro) var(--ease-standard);
}
.ds-otp__box:hover { border-color: var(--neutral-300); }
.ds-otp__box.is-filled { border-color: var(--accent-400); background: var(--accent-50); }
.ds-otp__box:focus { outline: none; border-color: var(--accent-600); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--neutral-0); }

/* ============================================================
 * UserMenu — avatar dropdown for app top-nav (account actions)
 * ============================================================ */
.ds-usermenu { position: relative; }
.ds-usermenu__btn { display: inline-flex; align-items: center; gap: 8px; background: var(--neutral-0); border: 1px solid var(--neutral-200); border-radius: var(--radius-pill); padding: 4px 10px 4px 4px; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-standard), border-color var(--dur-micro) var(--ease-standard); }
.ds-usermenu__btn:hover { background: var(--neutral-50); border-color: var(--neutral-300); }
.ds-usermenu__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ds-usermenu__name { font: 500 14px/1 var(--font-sans); color: var(--neutral-700); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-usermenu__caret { width: 15px; height: 15px; color: var(--neutral-400); }
.ds-usermenu__pop { position: absolute; right: 0; top: calc(100% + 8px); width: 252px; background: var(--neutral-0); border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 6px; z-index: var(--z-overlay); }
.ds-usermenu__head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; border-bottom: 1px solid var(--neutral-100); margin-bottom: 6px; }
.ds-usermenu__h1 { font: 600 14px/18px var(--font-sans); color: var(--neutral-900); }
.ds-usermenu__h2 { font: 400 12px/16px var(--font-mono); color: var(--neutral-500); word-break: break-all; }
.ds-usermenu__item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; font: 500 14px/20px var(--font-sans); color: var(--neutral-700); text-align: left; text-decoration: none; }
.ds-usermenu__item:hover { background: var(--neutral-100); }
.ds-usermenu__item i { width: 17px; height: 17px; }
.ds-usermenu__item svg { width: 17px; height: 17px; color: var(--neutral-500); }
.ds-usermenu__item--danger { color: var(--danger-700); }
.ds-usermenu__item--danger svg { color: var(--danger-600); }
.ds-usermenu__item--danger:hover { background: var(--danger-50); }
.ds-usermenu__sep { height: 1px; background: var(--neutral-100); margin: 6px 0; }

/* ============================================================
 * RowMenu — overflow (⋯) popup for table-row actions (admin)
 * ============================================================ */
.ds-rowmenu__btn.is-open { background: var(--neutral-100); color: var(--neutral-900); }
.ds-rowmenu__pop { position: fixed; z-index: var(--z-overlay); width: 212px; background: var(--neutral-0); border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 6px; }
.ds-rowmenu__item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; font: 500 13px/18px var(--font-sans); color: var(--neutral-700); text-align: left; }
.ds-rowmenu__item:hover:not(:disabled) { background: var(--neutral-100); }
.ds-rowmenu__item:disabled { color: var(--neutral-300); cursor: not-allowed; }
.ds-rowmenu__item i, .ds-rowmenu__item svg { width: 16px; height: 16px; color: var(--neutral-500); flex-shrink: 0; }
.ds-rowmenu__item:disabled i, .ds-rowmenu__item:disabled svg { color: var(--neutral-300); }
.ds-rowmenu__item--danger { color: var(--danger-700); }
.ds-rowmenu__item--danger i, .ds-rowmenu__item--danger svg { color: var(--danger-600); }
.ds-rowmenu__item--danger:hover:not(:disabled) { background: var(--danger-50); }
.ds-rowmenu__sep { height: 1px; background: var(--neutral-100); margin: 5px 0; }