/* Paleta e hierarquia do painel Rust, sem depender de build de CSS. */
:root {
  color-scheme: light;
  --bg: #f8fafc; --bg-2: #f1f5f9; --card: #fff; --card-2: #f8fafc;
  --line: #e2e8f0; --border: #e2e8f0; --text: #0f172a; --text-2: #475569; --text-3: #64748b;
  --accent: #0284c7; --accent-2: #0369a1; --accent-ink: #fff; --blue: #0284c7;
  --danger: #be123c; --warn: #a16207; --soft-blue: #f0f9ff; --soft-green: #ecfdf5;
  --green: #047857; --soft-warn: #fffbeb; --soft-danger: #fff1f2;
  --shadow: 0 2px 8px #0f172a05, 0 12px 30px #0f172a04;
  --fg: var(--text); --muted: var(--text-3);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #070b14; --bg-2: #111827; --card: #111927; --card-2: #172131;
    --line: #263244; --border: #263244; --text: #f1f5f9; --text-2: #cbd5e1; --text-3: #94a3b8;
    --accent: #0284c7; --accent-2: #0ea5e9; --blue: #38bdf8; --danger: #fda4af; --warn: #fcd34d;
    --soft-blue: #0d2639; --soft-green: #0c302b; --green: #6ee7b7; --soft-warn: #30271b; --soft-danger: #341a28;
    --shadow: 0 6px 24px #0002;
  }
}
[hidden] { display: none !important; }
html { scrollbar-gutter: stable; }
body { background: var(--bg); color: var(--text); padding: 0; min-height: 100svh; font: 14px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif; }
html, body { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 26px; line-height: 1.25; letter-spacing: -.65px; font-weight: 700; }
h2 { font-size: 15px; line-height: 1.4; letter-spacing: -.15px; }
button, input, textarea, select { font: inherit; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 16px; border-radius: 11px; font-weight: 600; letter-spacing: 0; box-shadow: none; transition: background .15s, transform .15s; }
button:hover { transform: none; background: var(--accent-2); }
button:active { transform: scale(.98); }
button:disabled { background: var(--bg-2); color: var(--text-3); opacity: .65; cursor: not-allowed; box-shadow: none; }
button.primary { background: var(--accent); color: #fff; border: 1px solid transparent; }
button.primary:hover { background: var(--accent-2); }
button.primary:disabled { opacity: .5; }
button.ghost, button.confirm-btn-cancel { background: var(--card); border: 1px solid var(--border); color: var(--text-2); box-shadow: none; }
button.ghost:hover, button.confirm-btn-cancel:hover { background: var(--bg-2); }
button.danger { background: var(--soft-danger); border: 1px solid var(--border); color: var(--danger); }
button.full { width: 100%; }
button svg { flex-shrink: 0; }
input, textarea, select { border: 1px solid var(--border); background-color: var(--bg); color: var(--text); border-radius: 10px; padding: 11px 13px; min-height: 44px; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { background: var(--card); border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: .9; }
select { color-scheme: inherit; }
select option { background: var(--card); color: var(--text); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
label { display: block; color: var(--text-2); font-size: 13px; font-weight: 600; }
.muted { color: var(--text-3); font-size: 13px; line-height: 1.55; }
.small-muted { color: var(--text-3); font-size: 12px; line-height: 1.5; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.app-header { position: sticky; top: 0; z-index: 30; display: block; padding: 0; max-width: none; margin: 0; background: var(--bg); border-bottom: 1px solid var(--border); }
.header-inner { max-width: 1152px; margin: auto; min-height: 65px; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 36px; height: 36px; filter: none; }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: -.25px; }
.brand-caption { font-size: 11px; color: var(--text-3); }
.status { background: var(--card); border: 1px solid var(--border); color: var(--text-3); font-size: 11px; text-transform: none; letter-spacing: 0; padding: 5px 10px; }
.status[data-state="connected"], .status[data-state="open"] { background: var(--soft-green); color: var(--green); }
.status[data-state="disconnected"], .status[data-state="logged_out"] { color: var(--text-3); background: var(--card); }
.app-main { max-width: 1152px; margin: auto; padding: 26px 20px 12px; min-height: calc(100svh - 145px); }
.app-footer { padding: 20px; text-align: center; font-size: 12px; color: var(--text-3); }
.app-footer span { padding: 0 5px; }
.skip-link { position: fixed; top: -60px; z-index: 60; background: var(--card); padding: 12px; color: var(--accent); }
.skip-link:focus { top: 5px; }
.loading-screen { min-height: 55vh; display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center; color: var(--text-3); }
.spinner { display: inline-block; width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pairing-shell, .motoboy-panel, .access-card { animation: panel-in .24s ease-out; }
.pairing-shell { max-width: 550px; margin: 5px auto 0; }
.connection-steps { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 2px 0 24px; color: var(--text-3); font-size: 12px; font-weight: 500; }
.connection-steps > span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.connection-steps b { border: 1px solid var(--border); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; }
.connection-steps .current { color: var(--blue); }
.connection-steps .current b { background: var(--accent); border-color: var(--accent); color: #fff; }
.connection-steps .step-line { height: 1px; width: 36px; background: var(--border); }
.pair-card { overflow: hidden; border-radius: 24px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); }
.pair-heading { padding: 24px 28px; background: linear-gradient(120deg, #0ea5e9, #0284c7); color: #fff; }
.pair-heading .eyebrow { color: #e0f2fe; letter-spacing: 1.3px; font-size: 11px; }
.pair-heading h1 { color: #fff; font-size: 23px; margin: 6px 0 8px; letter-spacing: -.55px; }
.pair-heading p { color: #e0f2fe; font-size: 13px; }
.pair-body { padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.qr-frame { background: #fff; border: 1px solid #e2e8f0; padding: 12px; border-radius: 18px; box-shadow: 0 2px 12px #0f172a06; }
.pair-qr { width: 240px; height: 240px; display: block; image-rendering: pixelated; }
.qr-placeholder { width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-direction: column; color: #64748b; font-size: 13px; }
.pair-wait { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.live-dot { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 4px var(--soft-blue); }
.pair-steps { margin: 0; padding: 0; list-style: none; width: 100%; display: grid; gap: 14px; color: var(--text-2); font-size: 13px; }
.pair-steps li { display: flex; gap: 12px; align-items: flex-start; }
.pair-steps li > span { width: 22px; height: 22px; border-radius: 50%; background: var(--soft-blue); color: var(--blue); display: grid; place-items: center; flex-shrink: 0; font-size: 11px; font-weight: 700; }
.pair-footer { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11px; color: var(--text-3); margin-top: 18px; }
.phone-option { width: 100%; border-top: 1px solid var(--border); padding-top: 18px; }
.phone-option summary { min-height: 30px; cursor: pointer; font-size: 13px; color: var(--blue); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; }
.phone-option summary::after { content: '+'; margin-left: auto; font-size: 20px; }
.phone-option[open] summary::after { content: '−'; }
.phone-form { margin-top: 18px; display: grid; gap: 10px; }
.phone-code-box { border-radius: 12px; padding: 14px; background: var(--bg); }
.pair-code { font: 700 27px/1.6 ui-monospace, monospace; letter-spacing: 4px; text-align: center; margin: 10px 0; }
.notice { width: 100%; border: 1px solid var(--border); padding: 14px 16px; border-radius: 12px; font-size: 13px; }
.notice p { margin-top: 6px; }
.notice.warning { color: var(--warn); background: var(--soft-warn); }
.sync-error { background: var(--soft-warn); color: var(--warn); text-align: center; padding: 10px 18px; font-size: 12px; }
.connection-message, .access-card { max-width: 520px; margin: 30px auto; padding: 32px !important; text-align: center; display: flex; align-items: center; flex-direction: column; gap: 18px; }
.connection-message h1, .access-card h1 { font-size: 23px; }
.connection-symbol { width: 60px; height: 60px; display: grid; place-items: center; background: var(--soft-blue); color: var(--blue); border-radius: 18px; }
.connection-symbol.danger { color: var(--danger); background: var(--soft-danger); }
.access-form { display: grid; gap: 12px; text-align: left; width: 100%; margin-top: 6px; }
.form-error { color: var(--danger); font-size: 13px; }
.form-error:empty { display: none; }
.card, .panel-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }
.bot-hero { padding: 28px; border-radius: 24px; border: 1px solid var(--border); background: linear-gradient(115deg, var(--card) 50%, var(--soft-blue)); display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: var(--shadow); }
.bot-summary h1 { margin: 14px 0 8px; font-size: 30px; }
.bot-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 235px; max-width: 260px; text-align: center; }
.bot-toggle { min-height: 52px; border-radius: 15px; font-size: 15px; }
.bot-toggle.pause { background: var(--soft-danger); color: var(--danger); border-color: var(--border); }
.bot-toggle.pause:hover { background: var(--soft-danger); filter: brightness(.97); }
.pill { color: var(--text-3); background: var(--bg-2); border: 1px solid var(--border); font-size: 11px; letter-spacing: 0; text-transform: none; }
.pill.live { color: var(--green); background: var(--soft-green); border-color: transparent; }
.pill.warn { color: var(--warn); background: var(--soft-warn); border-color: transparent; }
.pill.danger { color: var(--danger); background: var(--soft-danger); border-color: transparent; }
.panel-metrics { display: grid; grid-template-columns: repeat(3, 1fr); padding: 22px 8px; margin-bottom: 3px; }
.panel-metric { padding: 0 22px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.panel-metric:last-child { border: 0; }
.panel-metric strong { font-size: 24px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.panel-card { padding: 21px; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.panel-card-heading { display: flex; align-items: flex-start; gap: 12px; }
.panel-card-heading h2 { margin-top: 1px; }
.panel-card-heading p { margin-top: 3px; }
.panel-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--blue); background: var(--soft-blue); flex-shrink: 0; }
.panel-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.group-name { font-size: 14px; flex: 1; min-width: 130px; overflow-wrap: anywhere; }
.field-footer { margin-top: -3px; }
.text-list { display: grid; gap: 12px; }
.text-item { display: grid; gap: 6px; }
.switch { width: 50px; height: 30px; min-height: 30px; border-radius: 100px; padding: 3px; background: var(--line); border: 1px solid var(--border); position: relative; flex-shrink: 0; }
.switch > span { width: 22px; height: 22px; background: #fff; border-radius: 50%; position: absolute; left: 3px; transition: transform .18s; box-shadow: 0 1px 3px #0002; }
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"] > span { transform: translateX(20px); }
.switch:disabled { background: var(--line); opacity: .5; }
.reaction-setting { padding: 6px 0; }
.keep-active { justify-content: space-between; gap: 10px; text-align: left; font-size: 14px; }
.keep-note { display: block; margin-top: 2px; color: var(--text-3); font-size: 12px; font-weight: 400; }
.card-lockable { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card-locked { opacity: .5; }
.activity-grid .card { margin: 0; box-shadow: none; }
.eyebrow { color: var(--text-3); }
.modal-sheet, .confirm-sheet, .modal-header { background: var(--card); color: var(--text); border-color: var(--border); }
.modal-sheet { box-shadow: 0 15px 80px #0003; }
.modal-backdrop { background: #0f172a80; }
.recent-row { border-color: var(--border); }
.toggle { background: var(--line); border-color: var(--border); min-height: 30px; padding: 0; flex-shrink: 0; }
.toggle.on { background: var(--accent); border-color: var(--accent); box-shadow: none; }
.toggle::after { background: #fff; }
.toggle.on::after { background: #fff; }
.confirm-btn-ok { color: #fff; }
.toast { background: var(--card); border-color: var(--border); color: var(--text); box-shadow: var(--shadow); }
.toast.ok { border-color: var(--green); }
.toast.error { border-color: var(--danger); }
.lat-badge.tier-fast { color: var(--green); background: var(--soft-green); }
.lat-badge.tier-mid { color: var(--warn); background: var(--soft-warn); }
.lat-badge.tier-slow { color: var(--danger); background: var(--soft-danger); }
@media (max-width: 640px) {
  .header-inner { padding: 11px 16px; min-height: 62px; }
  .status { max-width: 145px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
  .app-main { padding: 19px 16px 10px; }
  .pairing-shell { margin-top: 0; }
  .connection-steps { gap: 9px; font-size: 10px; margin-bottom: 18px; }
  .connection-steps .step-line { width: 18px; }
  .pair-heading { padding: 22px; }
  .pair-heading h1 { font-size: 22px; max-width: 275px; }
  .pair-heading p { font-size: 12px; }
  .pair-body { padding: 24px 20px; }
  .pair-qr, .qr-placeholder { width: min(240px, calc(100vw - 108px)); height: min(240px, calc(100vw - 108px)); }
  .bot-hero { flex-direction: column; align-items: stretch; padding: 22px; gap: 20px; }
  .bot-summary h1 { font-size: 26px; }
  .bot-actions { max-width: none; min-width: 0; }
  .bot-actions > .ghost { min-height: 40px; }
  .panel-grid { grid-template-columns: 1fr; gap: 12px; }
  .panel-card { padding: 19px; }
  .panel-metrics { padding: 21px 0; }
  .panel-metric { padding: 0 12px; }
  .panel-metric:first-child { padding-left: 4px; }
  .panel-metric strong { font-size: 22px; }
  .panel-metric .small-muted { font-size: 10px; }
  .connection-message, .access-card { margin: 12px auto; padding: 25px !important; }
  input, textarea, select { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.latency-details { margin-top: 14px; font-size: 13px; }
.latency-details summary { cursor: pointer; font-weight: 600; }
.latency-details table { width: 100%; border-collapse: collapse; font-size: 12px; }
.latency-details caption { text-align: left; margin: 8px 0; color: var(--muted); }
.latency-details td, .latency-details th { padding: 7px 3px; text-align: right; }
.latency-details td:first-child, .latency-details th:first-child { text-align: left; }
.latency-details td:not(:first-child) { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Página única (2026-09-26) */
.motoboy-panel { display: grid; gap: 16px; }
.card-wide { grid-column: 1 / -1; }
.card-flash { outline: 3px solid var(--warn); outline-offset: 4px; }
.hero-prontidao { margin-top: 8px; }
.react-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.react-fields label { display: grid; gap: 6px; }
.discreet-fields.is-off { opacity: .45; }
.delete-fields.is-off { opacity: .45; }
.placar { display: grid; gap: 2px; margin-bottom: 14px; }
.disconnect-row { display: flex; justify-content: center; margin: 12px 0 4px; }
@media (max-width: 1023px) { .panel-grid { grid-template-columns: 1fr; } }
.pick-list { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.pick-row { justify-content: flex-start; text-align: left; width: 100%; background: var(--card); color: var(--text); border: 1px solid var(--border); font-weight: 500; }
.pick-row:hover { background: var(--bg-2); }
.pick-row[aria-checked="true"] { border-color: var(--accent); background: var(--soft-blue); }
.pick-row[disabled] { opacity: .5; cursor: not-allowed; }
.pick-tag { margin-left: 8px; color: var(--text-3); font-size: 12px; font-weight: 600; }
.command-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.command-list li { display: grid; gap: 2px; }
.command-list code { font: 600 14px/1.4 ui-monospace, monospace; overflow-wrap: anywhere; }
.command-list span { color: var(--text-3); font-size: 13px; }
.person-tools { gap: 8px; }
.person-tools input { flex: 1; min-width: 0; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; }
.segmented button { min-height: 40px; padding: 6px 10px; background: transparent; color: var(--muted); border: 0; border-radius: 9px; font-size: 13.5px; font-weight: 600; box-shadow: none; }
.segmented button[aria-pressed="true"] { background: var(--soft-blue); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
.person-list, .person-others { display: grid; gap: 6px; max-height: 420px; overflow-y: auto; }
.person-others { border-top: 1px solid var(--border); padding-top: 10px; }
.person-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.person-pick { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; color: var(--text); font-size: 14px; font-weight: 500; }
.person-pick input { width: 20px; height: 20px; min-height: 0; padding: 0; flex-shrink: 0; accent-color: var(--accent); }
.person-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.person-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-meta .pill { align-self: flex-start; }
.avatar-initials, .avatar-photo { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.avatar-initials { display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; background: linear-gradient(135deg, oklch(0.65 0.17 var(--hue)), oklch(0.5 0.15 var(--hue))); }
.avatar-photo { object-fit: cover; }
.sheet-title { font-size: 18px; font-weight: 700; }
.sheet-body { display: grid; gap: 12px; padding: 16px 20px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sheet-actions { flex-wrap: wrap; gap: 8px; }
.sheet-footer { display: flex; justify-content: flex-end; padding: 12px 20px 20px; }
.person-action { min-height: 36px; padding: 6px 10px; font-size: 13px; }
@media (max-width: 640px) {
  .person-row { flex-wrap: wrap; }
  .person-pick { flex-basis: 100%; }
  .person-action { margin-left: 30px; }
  .react-fields { grid-template-columns: 1fr; }
}