:root {
  --bg: #0b1020;
  --bg-soft: rgba(18, 25, 48, 0.78);
  --panel: rgba(14, 20, 38, 0.82);
  --line: rgba(255, 255, 255, 0.12);
  --text: #f5f7ff;
  --muted: #a6b0cf;
  --accent: #7cf2c8;
  --accent-2: #87a8ff;
  --danger: #ff8da1;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'Manrope', sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(124, 242, 200, 0.18), transparent 32%),
    radial-gradient(circle at top right, rgba(135, 168, 255, 0.18), transparent 28%),
    linear-gradient(135deg, #070b16 0%, #101933 48%, #0a1122 100%);
}
.grain { position: fixed; inset: 0; pointer-events: none; opacity: 0.12; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='12' cy='18' r='1'/%3E%3Ccircle cx='48' cy='40' r='1'/%3E%3Ccircle cx='86' cy='20' r='1'/%3E%3Ccircle cx='124' cy='70' r='1'/%3E%3Ccircle cx='32' cy='88' r='1'/%3E%3Ccircle cx='100' cy='110' r='1'/%3E%3Ccircle cx='142' cy='130' r='1'/%3E%3Ccircle cx='64' cy='144' r='1'/%3E%3C/g%3E%3C/svg%3E"); }
.app-shell { width: min(1180px, calc(100% - 32px)); margin: 32px auto; position: relative; z-index: 1; }
.hero-card, .panel { background: var(--bg-soft); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.hero-card { border-radius: 28px; padding: 32px; margin-bottom: 20px; position: relative; overflow: hidden; }
.hero-card::after { content: ''; position: absolute; inset: auto -40px -60px auto; width: 220px; height: 220px; background: radial-gradient(circle, rgba(124, 242, 200, 0.35), transparent 68%); filter: blur(8px); }
.eyebrow { letter-spacing: 0.3em; color: var(--accent); font-size: 12px; margin: 0 0 14px; }
h1, h2 { font-family: 'Noto Serif TC', serif; margin: 0; }
h1 { font-size: clamp(34px, 5vw, 62px); line-height: 1.02; max-width: 8em; }
.hero-copy, .panel-head p, .browser-hint { color: var(--muted); }
.hero-copy { font-size: 17px; max-width: 640px; margin: 16px 0 24px; line-height: 1.8; }
.controls, .status-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
button { border: 0; cursor: pointer; transition: transform .18s ease, opacity .18s ease, background .18s ease; }
button:hover { transform: translateY(-1px); }
.mic-button, .send-button { background: linear-gradient(135deg, var(--accent), #8be4ff); color: #04101a; font-weight: 800; }
.mic-button { padding: 16px 22px; border-radius: 999px; font-size: 16px; }
.ghost-button { padding: 13px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--text); border: 1px solid var(--line); }
.status-row { margin-top: 18px; }
.status-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; font-size: 13px; border: 1px solid var(--line); }
.status-badge.idle { color: var(--accent-2); }
.status-badge.listening { color: var(--accent); }
.status-badge.thinking { color: #ffd27f; }
.status-badge.error { color: var(--danger); }
.panel-grid { display: grid; grid-template-columns: 1.35fr 0.9fr; gap: 20px; }
.panel { border-radius: 24px; padding: 24px; }
.panel-head { margin-bottom: 16px; }
.panel-head h2 { font-size: 28px; }
.panel-head p { margin: 8px 0 0; }
.messages { display: flex; flex-direction: column; gap: 14px; min-height: 420px; max-height: 60vh; overflow: auto; padding-right: 4px; }
.message { padding: 14px 16px; border-radius: 18px; line-height: 1.7; border: 1px solid transparent; }
.message.user { background: rgba(135, 168, 255, 0.14); border-color: rgba(135, 168, 255, 0.22); }
.message.assistant { background: rgba(124, 242, 200, 0.11); border-color: rgba(124, 242, 200, 0.18); }
.message.system { background: rgba(255, 255, 255, 0.05); color: var(--muted); border-color: var(--line); }
.message-label { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.76; margin-bottom: 6px; }
.chat-form { display: flex; flex-direction: column; gap: 14px; }
textarea { width: 100%; min-height: 240px; resize: vertical; border-radius: 20px; padding: 18px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; line-height: 1.7; }
textarea:focus { outline: 2px solid rgba(124, 242, 200, 0.35); border-color: rgba(124, 242, 200, 0.25); }
.send-button { align-self: flex-start; padding: 14px 24px; border-radius: 999px; }
@media (max-width: 920px) { .panel-grid { grid-template-columns: 1fr; } .messages { max-height: none; } }