:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; background: #f4f5f6; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.shell { width: min(680px, 100%); margin: 0 auto; padding: 24px 16px 48px; }
.brand { text-align: center; padding: 12px 0 22px; }
.brand img { width: min(300px, 72vw); height: auto; }
.card { background: #fff; border-radius: 18px; padding: 22px; margin-bottom: 16px; box-shadow: 0 5px 22px rgba(0,0,0,.07); }
.center { text-align: center; }
h1 { font-size: 1.45rem; margin: 0 0 8px; }
h2 { font-size: 1.05rem; margin: 0; }
h3 { font-size: 1rem; margin: 18px 0 6px; }
.muted,.hint { color: #6d7278; }
.hint { font-size: .84rem; margin-bottom: 0; }
label { display: block; font-size: .9rem; margin: 14px 0; }
input { width: 100%; margin-top: 6px; padding: 14px; border: 1px solid #d9dce0; border-radius: 12px; font-size: 16px; }
button { font: inherit; cursor: pointer; }
.primary { width: 100%; border: 0; border-radius: 12px; background: #262626; color: #fff; padding: 14px 16px; font-weight: 700; }
.primary.small { width: auto; min-width: 90px; }
.secondary { width: 100%; border: 1px solid #cfd3d7; border-radius: 12px; background: #fff; color: #222; padding: 13px 16px; font-weight: 700; margin-top: 10px; }
.linkBtn { border: 0; background: transparent; text-decoration: underline; padding: 4px; }
.linkAction { width: 100%; border: 0; background: transparent; text-decoration: underline; padding: 12px 4px 2px; color: #333; }
.topActions { display: flex; align-items: center; gap: 12px; }
.mic { width: 116px; height: 116px; border-radius: 999px; border: 0; font-size: 48px; background: #262626; color: #fff; margin: 16px 0 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.mic.listening { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(0,0,0,.08); }
.commandRow { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-top: 18px; }
.commandRow input { margin: 0; }
.hidden { display: none !important; }
.error { color: #a00000; }
.success { border-left: 5px solid #218c4a; }
.failure { border-left: 5px solid #a00000; }
.resultMain { font-size: 1.25rem; font-weight: 800; margin: 4px 0; }
.topline,.sectionTitle { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 12px; }
.historyItem { padding: 11px 0; border-bottom: 1px solid #eceef0; }
.historyItem:last-child { border-bottom: 0; }
.historyMeta { font-size: .78rem; color: #777; margin-top: 4px; }
.helpDialog { width: min(520px, calc(100vw - 28px)); border: 0; border-radius: 18px; padding: 22px; box-shadow: 0 16px 60px rgba(0,0,0,.28); }
.helpDialog::backdrop { background: rgba(0,0,0,.45); }
.compactDialog { width: min(430px, calc(100vw - 28px)); }
.dialogHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.closeBtn { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f0f1f2; font-size: 24px; line-height: 1; }
.commandHelp { display: grid; gap: 10px; }
.commandHelp > div { display: grid; gap: 3px; padding: 11px 12px; border-radius: 12px; background: #f5f6f7; }
.commandHelp code { font-size: .96rem; font-weight: 800; white-space: normal; }
.commandHelp span { color: #6d7278; font-size: .88rem; }
.helpDialog hr { border: 0; border-top: 1px solid #eceef0; margin: 20px 0 0; }
@media (max-width: 480px) { .shell { padding-top: 12px; } .card { padding: 18px; border-radius: 16px; } .commandRow { grid-template-columns: 1fr; } .primary.small { width: 100%; } }