/* Additions for the live app, on top of the approved design system (app.css). */
.tab-count { font-weight: 700; color: var(--accent-orange); margin-left: 2px; }
.tab-count:empty { display: none; }

.say { min-height: 22px; font-size: 13px; color: var(--text-secondary); margin: 10px 0 0; text-align: center; }
.say.err { color: #e59a9a; }

.card { border: 1px solid var(--hairline-strong); border-radius: 4px; padding: 16px; margin: 14px 0; background: var(--surface-card, transparent); }
.card h3 { font-family: var(--serif); font-weight: 600; font-size: 17px; margin-bottom: 6px; color: var(--text-primary); }
.card p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

.proposal { border-color: var(--accent-orange); }
.proposal .figure { font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--text-primary); margin: 6px 0 2px; }
.proposal .action-row { margin-top: 14px; }

.field { width: 100%; margin-bottom: 14px; }
.field label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; font: inherit; font-size: 15px; padding: 12px; border-radius: 4px;
  border: 1px solid var(--hairline-strong); background: transparent; color: var(--text-primary);
}
.field select option { background: #12151B; color: #F2F1ED; }

.addr { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12px; color: var(--text-secondary); word-break: break-all; }
.qr { display: block; width: 220px; height: 220px; margin: 16px auto; background: #fff; padding: 10px; border-radius: 4px; }
.link { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.muted { color: var(--text-tertiary); font-size: 12px; }
.empty { text-align: center; color: var(--text-tertiary); font-size: 13px; padding: 26px 0; }
.stop { padding: 26px 18px; text-align: center; }
.stop h2 { font-family: var(--serif); font-size: 22px; margin-bottom: 10px; color: var(--text-primary); }
.stop p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 14px; }
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--hairline-strong); border-top-color: var(--accent-orange); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }