:root {
  color-scheme: light;
  --background: #faf9f6;
  --surface: #fff;
  --stage: #eeede9;
  --ink: #242320;
  --muted: #717069;
  --line: #e2e0d9;
  --hover: #f2f1ed;
  --accent: #f6df80;
  --accent-ink: #332c13;
  --danger: #a6382b;
  --focus: #8d7228;
  --success: #216b49;
}
* { box-sizing: border-box; }
/* AI connection wizard: one step at a time, like the KakaoTalk setup card. */
.ai-setup { margin: 20px 0 0; padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--background); scroll-margin-top: 20px; }
.ai-setup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ai-setup-head h3 { font-size: 16px; }
.ai-step { margin-top: 18px; max-width: 640px; }
.ai-step h4 { margin: 0 0 12px; font-size: 15px; }
.ai-step p { margin: 8px 0; font-size: 13px; }
.ai-step label:not(.check) { margin-top: 12px; font-size: 13px; }
.ai-step details { margin-top: 12px; font-size: 12px; color: var(--muted); }
.ai-step summary { cursor: pointer; }
.ai-setup fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ai-choices { display: grid; gap: 8px; }
.ai-choices button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; text-align: left; }
.ai-choices span { font-size: 12px; font-weight: 400; color: var(--muted); }
.ai-methods { display: grid; gap: 8px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ai-methods label { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 13px; color: var(--muted); cursor: pointer; }
.ai-methods strong { margin-right: 6px; color: var(--ink); }
.ai-setup-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ai-job { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--focus); border-radius: 8px; }
.ai-job p { margin: 0 0 4px; color: var(--ink); }
.ai-job .ai-setup-actions { margin-top: 10px; }
.ai-copy-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 12px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.ai-copy-row strong { font-size: 12px; font-weight: 500; color: var(--muted); }
.ai-copy-row .endpoint { flex: 1; min-width: 0; margin: 0; }
.ai-copy-block { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 ui-monospace, monospace; padding: 14px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); }
.ai-step .ai-verify { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
#ai-check-result[data-state="failed"] { color: var(--danger); }
a.button { display: inline-block; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; font-weight: 500; }
a.button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--background); color: var(--ink); font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); cursor: pointer; font-weight: 500; }
button:hover { background: var(--hover); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
button.primary:hover { filter: brightness(.97); }
button.quiet { border-color: transparent; background: transparent; padding: 5px 7px; font-size: 12px; }
button.quiet:hover { background: var(--hover); }
button.danger { color: var(--danger); margin-top: 18px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 25px; font-weight: 650; letter-spacing: -.7px; line-height: 1.4; }
h2 { font-size: 15px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
p { color: var(--muted); }
code { font: .9em ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
label { display: block; margin-bottom: 6px; }
input:not([type="checkbox"], [type="radio"]) { min-width: 0; width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--surface); }
input:is([type="checkbox"], [type="radio"]) { flex-shrink: 0; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--focus); }
.wide { width: 100%; }
.hint { font-size: 12px; color: var(--muted); }
.check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; margin: 10px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-header { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; padding: 12px max(24px, calc((100vw - 1120px) / 2)); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; font-size: 16px; white-space: nowrap; }
.brand img { flex-shrink: 0; }
.brand span { color: var(--muted); font-size: 13px; font-weight: 400; margin-left: 2px; }
.header-actions { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--muted); }
main { max-width: 1168px; padding: 32px 24px 48px; margin: auto; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.collector-state { font-size: 13px; color: var(--muted); }
.collector-state::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--muted); }
.collector-state[data-state="collecting_partial"]::before { background: #51825c; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 332px; grid-template-rows: auto 1fr; grid-template-areas: "tablet card" "tablet side"; column-gap: 40px; align-items: start; }
.workspace > aside { grid-area: side; }
.device-panel { grid-area: tablet; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); position: sticky; top: 20px; }
.screen-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; gap: 8px; color: var(--muted); font-size: 12px; }
.toolbar-actions { display: flex; }
.screen-stage { min-height: 380px; padding: 20px; display: flex; align-items: center; justify-content: center; background: var(--stage); }
#screen { display: block; max-width: 100%; max-height: 65vh; width: auto; height: auto; border: 0; border-radius: 2px; touch-action: none; user-select: none; cursor: crosshair; }
#screen-placeholder { max-width: 270px; text-align: center; }
#screen-placeholder p { font-size: 13px; margin-top: 8px; }
.device-keys { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 12px 12px 8px; }
.device-keys button { font-size: 12px; }
.screen-help { padding: 0 18px 14px; font-size: 11px; text-align: center; }
aside { min-width: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; }
.status-section > .hint { margin: 4px 0 14px; }
.status-list { margin: 0 0 20px; font-size: 13px; }
.status-list > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; padding: 10px 0; }
.status-list dt { color: var(--muted); }
.status-list dd { margin: 0; }
.status-list small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
.settings-section { border-top: 1px solid var(--line); }
.settings-section summary { padding: 15px 0; font-size: 14px; font-weight: 550; cursor: pointer; list-style-position: inside; }
.settings-section summary::marker { color: var(--muted); font-size: 11px; }
.settings-section summary span { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 7px; }
.section-body { padding: 0 0 20px; }
.section-body > p { margin-bottom: 12px; font-size: 13px; }
.section-body > .hint { font-size: 12px; }
.input-row { display: flex; gap: 7px; }
.input-row button { flex-shrink: 0; }
.input-tools { display: flex; align-items: center; justify-content: space-between; margin: 0 -7px; }
.job { padding: 12px 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.job[data-state="failed"] { color: var(--danger); }
.login-panel { max-width: 360px; margin: 10vh auto; }
.login-panel > p { margin: 10px 0 28px; }
.login-panel .hint { margin-top: 8px; }
.login-panel button { margin-top: 24px; }
#feedback { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); background: var(--ink); color: var(--surface); padding: 12px 18px; border-radius: 6px; z-index: 10; font-size: 13px; }
dialog { width: min(440px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); }
dialog::backdrop { background: #0005; }
dialog p { margin: 12px 0 24px; font-size: 13px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 850px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 24px; }
  .screen-stage { padding: 12px; }
}
@media (max-width: 680px) {
  .app-header { padding: 12px 18px; }
  .brand span, #connection { display: none; }
  main { padding: 24px 18px 40px; }
  .workspace { grid-template-columns: 1fr; grid-template-areas: "card" "tablet" "side"; }
  .device-panel { position: static; margin-bottom: 28px; }
  .screen-stage { min-height: 250px; }
  #screen { max-height: 54vh; }
  .page-heading { margin-bottom: 18px; }
  .collector-state { font-size: 12px; }
}

/* Setup mode: one step beside the tablet. Everything else waits until collection is approved. */
#console[data-mode="setup"] { display: flex; flex-direction: column; }
#console[data-mode="setup"] > .page-heading { order: -2; }
#console[data-mode="setup"] > #tablet-workspace { order: -1; }
#console[data-mode="setup"] :is(.overview, .section-nav, #collector-status, .status-section, #phone-panel, #test-panel, #job),
#console[data-mode="setup"] > #tablet-workspace > summary,
#console[data-mode="setup"]:not([data-step="login"]) #text-panel,
#console:not([data-mode="setup"]) #setup-card { display: none; }
#console[data-mode="setup"] > #tablet-workspace > .workspace { padding-top: 22px; }
.setup-card { grid-area: card; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.setup-card h2 { font-size: 18px; letter-spacing: -.3px; margin: 18px 0 8px; }
.setup-card p { font-size: 13px; margin: 8px 0; }
.setup-card .hint { font-size: 12px; }
.setup-card details { margin-top: 12px; font-size: 12px; color: var(--muted); }
.setup-card summary { cursor: pointer; }
.setup-progress { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; counter-reset: setup; font-size: 12px; color: var(--muted); }
.setup-progress li { flex: 1; counter-increment: setup; padding-top: 7px; border-top: 3px solid var(--line); }
.setup-progress li::before { content: counter(setup) ". "; }
.setup-progress li[data-state="done"] { color: var(--success); border-color: var(--success); }
.setup-progress li[data-state="done"]::before { content: "✓ "; }
.setup-progress li[data-state="current"] { color: var(--ink); border-color: var(--focus); font-weight: 600; }
.setup-steps { padding-left: 20px; margin: 12px 0; }
.setup-steps li { margin: 9px 0; font-size: 14px; }
.setup-steps li::marker { color: var(--muted); }
.setup-detected { display: block; margin-top: 4px; font-size: 12px; }
.setup-detected[data-state="ok"] { color: var(--success); }
.setup-detected[data-state="missing"] { color: var(--danger); font-weight: 600; }
.setup-card .setup-warning, .setup-error { color: var(--danger); }
.setup-reason { margin: 16px 0 0 !important; padding: 10px 12px; border-radius: 6px; background: var(--hover); color: var(--ink); }
.setup-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; }
.setup-card > .setup-actions { margin-top: 4px; }
.setup-wait::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px; border: 2px solid var(--line); border-top-color: var(--focus); border-radius: 50%; animation: setup-spin 1s linear infinite; }
.setup-card[data-stalled="true"] .setup-wait { display: none; }
@keyframes setup-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .setup-wait::before { animation: none; } }
/* Access management uses the same compact controls as the tablet. */
.connection-card { padding: 16px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.connection-card button { margin: 6px 8px 0 0; }
.endpoint { display: block; overflow-wrap: anywhere; margin: 12px 0; font-size: .85rem; }
.recovery { margin-top: 24px; }
#owner-form .check { margin: 16px 0; }
#pair-help { overflow-wrap: anywhere; }
.event-room { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.event-room-info { flex: 1; min-width: 0; }
.event-room p { margin: 3px 0; overflow-wrap: anywhere; }
.event-room code { display: block; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.event-switch { min-width: 56px; flex-shrink: 0; }
.event-switch[aria-checked="true"] { background: var(--accent); color: #24231d; border-color: var(--accent); }
#event-search-form { margin: 18px 0 6px; }
.overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 18px; }
.overview article { border: 1px solid var(--line); background: var(--surface); padding: 20px; border-radius: 10px; }
.overview h2 { color: var(--muted); font-size: 12px; font-weight: 500; margin-bottom: 10px; }
.overview strong { display: block; font-size: 17px; line-height: 1.4; margin-bottom: 8px; }
.overview button { margin: 10px 0 0 -7px; }
.section-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.management-panel { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 16px; background: var(--surface); scroll-margin-top: 18px; }
.management-panel > summary { padding: 18px 22px; cursor: pointer; font-size: 16px; font-weight: 600; }
.management-panel > summary span { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 12px; }
.management-panel > .section-body { padding: 0 22px 22px; }
.management-panel > .workspace { padding: 4px 22px 22px; }
#connections-list .connection-card > p:first-child { color: var(--ink); }
.event-room details { color: var(--muted); font-size: 11px; }
@media (max-width: 680px) {
  .overview { grid-template-columns: 1fr; gap: 10px; }
  .overview article { padding: 16px; }
  .overview h2 { margin-bottom: 5px; }
  .overview strong { font-size: 16px; }
  .management-panel > summary { padding: 16px; }
  .management-panel > summary span { display: block; margin: 4px 0 0 16px; }
  .management-panel > .section-body, .management-panel > .workspace { padding: 0 16px 16px; }
  .ai-setup { padding: 16px; }
  .ai-copy-row .endpoint { flex-basis: 100%; }
}