:root {
  --bg: #0A0918;
  --surface: #131129;
  --surface-2: #1A1835;
  --line: rgba(255, 255, 255, 0.08);
  --line-forte: rgba(255, 255, 255, 0.14);
  --text: #EDEBFF;
  --muted: #9C98C4;
  --faint: #6B6794;
  --violeta: rgb(109, 40, 217);
  --indigo: rgb(99, 102, 241);
  --azul: rgb(67, 97, 238);
  --indigo-claro: rgb(129, 140, 248);
  --roxo-claro: #C6A7FF; /* o accent do 88kanban no tema escuro (AppColorsExtension) */
  --grad: linear-gradient(135deg, var(--violeta), var(--indigo) 55%, var(--azul));
  --ok: #22C55E;
  --perigo: #F05252;
  --ifood: #EA1D2C;
  --ambar: #FFB300;
  --raio: 14px;
}
.if-card { padding: 14px; border-radius: var(--raio); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.if-card p { color: var(--muted); }
.if-hint { font-size: 12px; color: var(--muted); }
.if-hint:empty { display: none; }
.if-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.if-badge .material-symbols-outlined { font-size: 13px; }
.if-badge.on { background: rgba(34, 197, 94, 0.12); color: var(--ok); border: 1px solid rgba(34, 197, 94, 0.3); }
.if-badge.off { background: rgba(255, 255, 255, 0.05); color: var(--muted); border: 1px solid var(--line); }
.if-badge.erro { background: rgba(248, 113, 113, 0.12); color: #F87171; border: 1px solid rgba(248, 113, 113, 0.35); }
.if-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.if-btn:active:not(:disabled) { transform: translateY(1px); }
.if-btn:disabled { opacity: .45; cursor: default; }
.if-btn-block { width: 100%; }
.if-btn-primary { border-color: transparent; background: var(--grad); color: #fff; box-shadow: 0 8px 20px -10px rgba(99, 102, 241, 0.8); }
.if-btn-primary:hover:not(:disabled) { background: var(--grad); filter: brightness(1.08); }
.if-btn-ifood { grid-column: 1 / -1; border-color: transparent; background: var(--ifood); color: #fff; }
.if-btn-ifood:hover:not(:disabled) { background: var(--ifood); filter: brightness(1.08); }
.if-btn-danger { color: #FCA5A5; border-color: rgba(240, 82, 82, 0.35); background: rgba(240, 82, 82, 0.06); }
.if-btn-danger:hover:not(:disabled) { background: rgba(240, 82, 82, 0.12); }
.if-spin { animation: girar 1s linear infinite; }
.if-hint.erro { color: #FCA5A5; }
.if-card:has(> .mais-op):not(.mais) > .if-btn-block:not(.if-btn-primary) { display: none; } /* só com o "Mais opções" no cartão */
.ia-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.ia-btns .if-btn { gap: 6px; justify-content: center; }
.if-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line-forte);
  background: rgba(255, 255, 255, 0.04); color: var(--text); font-weight: 600; cursor: pointer;
  transition: transform .1s, background .15s, border-color .15s, opacity .15s;
}
@keyframes girar { to { transform: rotate(360deg); } }