.link { font-size: 14px; color: var(--accent); text-decoration: none; }
.card { background: var(--panel); border-radius: 16px; padding: 20px; }
.card h2 { margin: 0 0 8px; font-size: 20px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.small { font-size: 13px; color: var(--muted); margin: 6px 0; line-height: 1.5; }
.msg { min-height: 1.4em; margin: 8px 0 0; font-size: 14px; color: var(--warn); }
.notice { background: #2a2418; border: 1px solid #5a4a1e; color: #ffd98a; border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.5; margin: 0; }

#gateForm { display: flex; gap: 10px; margin-top: 12px; }
#gateForm input { flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 12px 14px; border-radius: 12px; border: 2px solid #333a52; background: var(--bg); color: var(--text); }
#gateForm .btn { flex: none; min-width: 84px; }

.orb { background: var(--panel); border-radius: 20px; padding: 22px 18px; text-align: center; border: 3px solid transparent; }
.orb-text { font-size: 26px; font-weight: 800; }
.orb.idle .orb-text { color: var(--muted); font-weight: 600; font-size: 20px; }
.orb.connecting { border-color: var(--warn); }
.orb.listening { border-color: var(--accent); }
.orb.speaking { border-color: var(--ok); }
.orb.listening .orb-text { color: var(--accent); }
.orb.speaking .orb-text { color: var(--ok); }
.meter { height: 8px; border-radius: 4px; background: #0e1018; margin-top: 14px; overflow: hidden; }
.meter-bar { height: 100%; width: 0; background: var(--accent); transition: width 60ms linear; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { background: var(--panel); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.stat .k { font-size: 12px; color: var(--muted); }
.stat .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

.h2 { font-size: 15px; margin: 8px 0 0; color: var(--muted); font-weight: 600; }
.log { background: var(--panel); border-radius: 14px; padding: 10px; min-height: 96px; max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.log .line { padding: 8px 12px; border-radius: 12px; font-size: 16px; line-height: 1.45; max-width: 92%; word-break: keep-all; }
.log .you { align-self: flex-end; background: #2b3350; }
.log .ai { align-self: flex-start; background: #1d3a2d; }
.log .sys { align-self: center; background: transparent; color: var(--muted); font-size: 13px; }
.tips { margin: 6px 0 0; padding-left: 20px; line-height: 1.7; }
.btn:disabled { opacity: .45; }