:root{
  --ui-state-bg: color-mix(in srgb, var(--color-card, #1a1a1a) 92%, var(--accent, #8B5CF6) 8%);
  --ui-state-border: color-mix(in srgb, var(--color-border, rgba(255,255,255,.12)) 75%, var(--accent, #8B5CF6) 25%);
  --ui-state-text: var(--color-text, rgba(255,255,255,.92));
  --ui-state-muted: var(--color-muted, rgba(255,255,255,.68));
}

.ui-state{
  border:1px solid var(--ui-state-border);
  background:var(--ui-state-bg);
  border-radius:16px;
  padding:18px 16px;
  display:grid;
  gap:10px;
  align-items:start;
}

.ui-state__icon{
  width:36px;height:36px;
  border-radius:12px;
  display:grid;place-items:center;
  font-weight:900;
  background: color-mix(in srgb, var(--accent, #8B5CF6) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--accent, #8B5CF6) 28%, transparent);
}

.ui-state__title{font-size:16px;font-weight:900;color:var(--ui-state-text);}
.ui-state__desc{font-size:13px;line-height:1.55;color:var(--ui-state-muted);}

.ui-state__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;}
.ui-state__hint{font-size:12px;color:var(--ui-state-muted);opacity:.9;}

/* Accent button (token-driven) */
.btn.btn--accent{
  background: var(--accent, #8B5CF6);
  border-color: color-mix(in srgb, var(--accent, #8B5CF6) 70%, transparent);
  color: #111;
}
.btn.btn--accent:hover{
  filter: brightness(1.04);
}

.ui-state--error .ui-state__icon{
  background: color-mix(in srgb, #ef4444 18%, transparent);
  border-color: color-mix(in srgb, #ef4444 30%, transparent);
}

/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, #000 50%, #fff)){
  :root{--ui-state-bg: rgba(139,92,246,.10);--ui-state-border: rgba(139,92,246,.25);} 
}