/* Components are opt-in. Existing application event handlers own behavior. */
.tiki-ui .tiki-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 16px;border:1px solid var(--tiki-border);border-radius:var(--tiki-radius-control);background:var(--tiki-surface);color:var(--tiki-ink);font:600 1rem/1.4 var(--tiki-font);text-decoration:none;cursor:pointer;transition:background var(--tiki-duration),box-shadow var(--tiki-duration)}
.tiki-ui .tiki-button:hover:not(:disabled){background:var(--tiki-accent-soft);border-color:var(--tiki-accent)}
.tiki-ui .tiki-button--primary{background:var(--tiki-brand);border-color:var(--tiki-brand);color:white}
.tiki-ui .tiki-button--primary:hover:not(:disabled){background:var(--tiki-brand-hover);border-color:var(--tiki-brand-hover)}
.tiki-ui .tiki-button--danger,.tiki-ui .tiki-button[data-state=recording]{background:var(--tiki-error);border-color:var(--tiki-error);color:white}
.tiki-ui .tiki-button--hint{background:var(--tiki-warning-soft);border-color:var(--tiki-warning);color:var(--tiki-warning)}
.tiki-ui .tiki-button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.tiki-ui :where(button,a,input,select,textarea,summary):focus-visible{outline:3px solid var(--tiki-focus);outline-offset:3px}
.tiki-ui .tiki-card,.tiki-ui .tiki-panel{background:var(--tiki-surface);border:1px solid var(--tiki-border);border-radius:var(--tiki-radius-card);padding:var(--tiki-space-6);box-shadow:var(--tiki-shadow);min-width:0;overflow-wrap:anywhere}
.tiki-ui .tiki-card{border-top:4px solid var(--tiki-accent)}
.tiki-ui .tiki-card__icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--tiki-accent-soft);color:var(--tiki-accent);font-size:24px}
.tiki-ui .tiki-card h3{margin:16px 0 8px;font-size:1.25rem;line-height:1.35}
.tiki-ui .tiki-card p{margin:0 0 16px;color:var(--tiki-muted)}
.tiki-ui .tiki-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:var(--tiki-accent-soft);color:var(--tiki-accent);padding:4px 10px;font-size:var(--tiki-text-xs);font-weight:650}
.tiki-ui .tiki-badge--success{color:var(--tiki-success);background:var(--tiki-success-soft)}
.tiki-ui .tiki-badge--premium{color:var(--tiki-premium);background:var(--tiki-premium-soft)}
.tiki-ui .tiki-feedback{padding:18px 20px;border:1px solid var(--tiki-info);border-inline-start:4px solid var(--tiki-info);background:var(--tiki-info-soft);border-radius:14px;color:var(--tiki-ink)}
.tiki-ui .tiki-feedback h3{color:var(--tiki-info);margin:0 0 8px;font-size:1rem}
.tiki-ui .tiki-feedback p{margin:0;line-height:1.65}
.tiki-ui .tiki-feedback[data-state=correct]{background:var(--tiki-success-soft);border-color:var(--tiki-success)}
.tiki-ui .tiki-feedback[data-state=correct] h3{color:var(--tiki-success)}
.tiki-ui .tiki-feedback[data-state=partial],.tiki-ui .tiki-feedback[data-state=hint]{background:var(--tiki-warning-soft);border-color:var(--tiki-warning)}
.tiki-ui .tiki-feedback[data-state=partial] h3,.tiki-ui .tiki-feedback[data-state=hint] h3{color:var(--tiki-warning)}
.tiki-ui .tiki-feedback[data-state=incorrect],.tiki-ui .tiki-feedback[data-state=error]{background:var(--tiki-error-soft);border-color:var(--tiki-error)}
.tiki-ui .tiki-feedback[data-state=incorrect] h3,.tiki-ui .tiki-feedback[data-state=error] h3{color:var(--tiki-error)}
.tiki-ui .tiki-feedback[data-state=suggestion]{border-color:var(--tiki-speaking);background:var(--tiki-speaking-soft)}
.tiki-ui .tiki-feedback[data-state=suggestion] h3{color:var(--tiki-speaking)}
.tiki-ui .tiki-field{display:grid;gap:8px;font-weight:600;margin:16px 0}
.tiki-ui .tiki-field :where(input,select,textarea){width:100%;min-height:46px;border:1px solid var(--tiki-border);border-radius:12px;padding:12px;font:400 1rem/1.5 var(--tiki-font);color:var(--tiki-ink);background:white}
.tiki-ui .tiki-tabs{display:flex;flex-wrap:wrap;gap:8px}
.tiki-ui .tiki-tabs button[aria-pressed=true]{background:var(--tiki-accent-soft);border-color:var(--tiki-accent);color:var(--tiki-accent);box-shadow:inset 0 -3px var(--tiki-accent)}
.tiki-ui .tiki-progress{width:100%;height:10px;accent-color:var(--tiki-brand)}
.tiki-ui .tiki-transcript{padding:14px 16px;border-radius:12px;border:1px solid var(--tiki-border);line-height:1.85}
.tiki-ui .tiki-transcript[data-state=active]{border-color:var(--tiki-accent);background:var(--tiki-accent-soft)}
.tiki-ui .tiki-transcript mark{background:#FDE68A;color:#192A3A;border-radius:4px;padding:2px 4px}
.tiki-ui .tiki-translation{color:var(--tiki-muted);margin-top:8px}
.tiki-ui .tiki-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tiki-ui .tiki-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}
.tiki-ui .tiki-caption{color:var(--tiki-muted);font-size:var(--tiki-text-sm)}
.tiki-ui dialog{max-width:min(560px,calc(100% - 32px));border:1px solid var(--tiki-border);border-radius:24px;padding:24px;color:var(--tiki-ink);box-shadow:var(--tiki-shadow-raised)}
.tiki-ui dialog::backdrop{background:rgba(25,42,58,.5)}
@media(prefers-reduced-motion:reduce){.tiki-ui *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.tiki-ui :where(button,.tiki-card,.tiki-feedback){border:1px solid ButtonText}.tiki-ui :where(button,a,input,select,textarea):focus-visible{outline-color:Highlight}}