.wrap { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; margin-bottom: 16px; } .wrap.compact { gap: 8px; margin-top: 0; } .balanceRow { font-size: 13px; color: var(--muted, #666); line-height: 1.4; } .balanceRow strong { color: var(--foreground, #eaeaea); font-weight: 600; } .packRow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; } .label { flex: 1 0 100%; font-size: 12px; color: var(--muted, #888); } .packBtn { appearance: none; font: inherit; font-size: 12px; font-weight: 500; line-height: 1.2; padding: 6px 12px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12)); background: transparent; color: var(--foreground, #e8e8ea); display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .packHint { font-size: 10px; font-weight: 400; color: var(--muted, #888); } .passBtn { border-color: rgba(255, 255, 255, 0.22); background: var(--surface-muted, rgba(255, 255, 255, 0.05)); } .packBtn:hover:not(:disabled) { background: var(--color-accent-warm-light, rgba(226, 179, 106, 0.14)); border-color: var(--color-accent-warm-border, rgba(226, 179, 106, 0.35)); box-shadow: 0 0 0 1px rgba(226, 179, 106, 0.12); } .packBtn:hover:not(:disabled) .packHint { color: var(--color-accent-warm, #e2b36a); } .packBtn:focus-visible { outline: 2px solid var(--color-accent-warm, #e2b36a); outline-offset: 2px; } .packBtn:disabled { opacity: 0.5; cursor: not-allowed; } /* Slightly stronger affordance when shown next to an credit error */ .emphasize .packBtn { border-color: rgba(255, 255, 255, 0.2); background: var(--surface-muted, rgba(255, 255, 255, 0.04)); } .emphasize .packBtn:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent-warm, #e2b36a) 20%, var(--surface-card, #0f191c)); border-color: color-mix(in srgb, var(--color-accent-warm, #e2b36a) 60%, transparent); }