/* Shared empty state (tools/_shared/empty.js): line icon, title, one sentence, actions. Tokens only. */
.ux-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 100%; max-width: 560px; margin: 16px auto; padding: 32px 16px; border-radius: var(--r-lg, 20px); border: 1px dashed var(--line-2); background: var(--soft); color: var(--muted); text-align: center; }
.ux-empty.sm { margin: 8px auto; padding: 20px 12px; gap: 6px; }
.ux-empty-i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent); }
.ux-empty.sm .ux-empty-i { width: 44px; height: 44px; }
.ux-empty-t { margin: 4px 0 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--text); }
.ux-empty.sm .ux-empty-t { font-size: 15px; }
.ux-empty-x { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ux-empty-b { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.ux-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--ctl-h, 40px); padding: 6px var(--ctl-px, 16px); border-radius: var(--ctl-r, 12px); border: 1px solid var(--line-2); background: var(--soft-2); color: var(--text); font: 600 var(--ctl-fs, 14px)/1.2 var(--font); text-decoration: none; cursor: pointer; }
.ux-btn:hover { background: var(--soft-3, var(--soft-2)); }
.ux-btn.pri { border-color: transparent; background: var(--accent-solid, var(--accent)); color: #fff; } /* white on --accent-solid: 5.4:1 (the --c-ink tint was for --accent, 3.6:1 here) */
.ux-btn.pri:hover { filter: brightness(1.06); }
.ux-btn:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.ux-btn:disabled { opacity: .5; cursor: default; }
.ux-gives { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; text-align: start; font-size: 13.5px; color: var(--muted); }
.ux-gives li { display: flex; align-items: flex-start; gap: 6px; }
.ux-gives .ico { flex: none; margin-top: 2px; color: var(--t-ok); }
.ux-sample { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font: 700 11px/1.4 var(--font); letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; color: color-mix(in srgb, var(--t-warn) 68%, var(--text)); background: color-mix(in srgb, var(--t-warn) 16%, transparent); border: 1px solid color-mix(in srgb, var(--t-warn) 40%, transparent); }
.ux-retry { display: inline-flex; align-items: center; gap: 5px; min-height: var(--ctl-h-sm, 32px); margin-inline-start: 6px; padding: 4px var(--ctl-px-sm, 12px); border-radius: var(--ctl-r-sm, 10px); border: 1px solid var(--line-2); background: var(--soft-2); color: var(--text); font: 600 var(--ctl-fs-sm, 12.5px)/1.2 var(--font); vertical-align: middle; cursor: pointer; }
.ux-retry:disabled { opacity: .6; cursor: progress; }
.ux-retry:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }