:root {
  color-scheme: dark;
  --bg: #050814;
  --panel: rgba(11, 17, 32, 0.82);
  --panel-strong: rgba(14, 22, 42, 0.96);
  --line: rgba(148, 163, 184, 0.18);
  --text: #edf7ff;
  --muted: #9fb0c7;
  --cyan: #22d3ee;
  --violet: #8b5cf6;
  --pink: #ec4899;
  --green: #34d399;
  --danger: #fb7185;
  font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 16%, rgba(34, 211, 238, 0.2), transparent 26rem),
    radial-gradient(circle at 78% 20%, rgba(236, 72, 153, 0.16), transparent 26rem),
    linear-gradient(180deg, #070916, #03050d 72%);
}
a { color: inherit; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.page { min-height: 100vh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px clamp(18px, 4vw, 52px);
  border-bottom: 1px solid var(--line);
  background: rgba(5, 8, 20, 0.76);
  backdrop-filter: blur(18px);
}
.brand, .app-nav, .top-actions { display: flex; align-items: center; gap: 12px; }
.brand { text-decoration: none; font-family: Orbitron, sans-serif; font-weight: 800; letter-spacing: 0; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #051018;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
}
.app-nav { flex: 1; justify-content: center; flex-wrap: wrap; }
.app-nav a, .ghost {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 13px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
}
.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  color: #041018;
  font-weight: 800;
  text-decoration: none;
  background: linear-gradient(135deg, var(--cyan), var(--green));
}
.small { padding: 9px 13px; }
.user-pill { color: var(--muted); font-size: 13px; }
.landing, .app-main { width: min(1180px, calc(100vw - 36px)); margin: 0 auto; padding: 46px 0 80px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr); gap: 38px; align-items: center; min-height: calc(100vh - 90px); }
.eyebrow { color: var(--cyan); font-family: Orbitron, sans-serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
h1 { margin: 0 0 14px; font-size: clamp(36px, 7vw, 86px); line-height: 1.02; letter-spacing: 0; }
h2 { margin: 0 0 16px; font-size: 26px; }
h3 { margin: 0 0 8px; }
.lead { max-width: 680px; color: #c6d3e5; font-size: clamp(17px, 2vw, 22px); line-height: 1.75; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.hero-visual { display: grid; gap: 14px; }
.body-preview, .panel, .section-grid article, .body-card, .auth-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.28);
}
.body-preview { display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: center; padding: 12px; }
.body-preview img { width: 128px; height: 86px; object-fit: cover; border-radius: 8px; }
.body-preview span, .muted { color: var(--muted); }
.section-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.section-grid article, .panel { padding: 22px; }
.auth-screen { min-height: calc(100vh - 90px); display: grid; place-items: center; padding: 42px 18px; }
.auth-card { width: min(520px, 100%); padding: 28px; }
.auth-card h1, .form-panel h1, .hero-panel h1 { font-size: clamp(30px, 5vw, 52px); }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 7px; color: #d9e7f7; font-weight: 700; }
input, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 14px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  resize: vertical;
}
.voice-field {
  display: grid;
  gap: 10px;
  margin: 0;
  border: 0;
  padding: 0;
}
.voice-field legend {
  padding: 0;
  color: #d9e7f7;
  font-weight: 800;
}
.voice-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.voice-option {
  position: relative;
  display: grid;
  min-height: 94px;
  align-items: stretch;
}
.voice-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.voice-option span {
  display: grid;
  align-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.05);
}
.voice-option strong { color: var(--text); }
.voice-option em {
  color: var(--muted);
  font-style: normal;
  line-height: 1.5;
}
.voice-option input:checked + span {
  border-color: rgba(34, 211, 238, 0.68);
  background: rgba(34, 211, 238, 0.14);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
}
.app-main { display: grid; gap: 18px; }
.hero-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.body-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.body-card { overflow: hidden; }
.body-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.body-card-content { padding: 16px; }
.body-card.disabled { opacity: 0.62; }
.body-card button {
  width: 100%;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}
.body-card button:disabled { cursor: not-allowed; color: var(--muted); }
.status-chip { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; color: var(--muted); font-size: 12px; }
.status-chip.ok { color: var(--green); border-color: rgba(52, 211, 153, 0.35); }
.memory-list { display: grid; gap: 10px; }
.memory-item { border-top: 1px solid var(--line); padding-top: 12px; }
.memory-item p { color: var(--muted); }
.distill-card { display: grid; gap: 14px; margin: 8px 0; border: 1px solid rgba(34,211,238,.24); border-radius: 8px; padding: 16px; background: rgba(34,211,238,.06); }
.distill-card-head { display:flex; justify-content:space-between; gap:16px; }
.distill-card h2 { margin-bottom: 8px; font-size: 22px; }
.upload-zone { display:grid; gap:6px; place-items:center; min-height:112px; border:1px dashed rgba(148,163,184,.45); border-radius:8px; padding:16px; text-align:center; color:var(--muted); background:rgba(255,255,255,.04); }
.upload-zone.compact { min-height: 92px; }
.upload-zone.is-dragover { border-color: var(--cyan); background: rgba(34,211,238,.12); }
.file-list { display:grid; gap:8px; }
.file-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:10px; align-items:center; border:1px solid var(--line); border-radius:8px; padding:9px 10px; background:rgba(0,0,0,.14); }
.file-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-item em { color:var(--muted); font-style:normal; font-size:12px; }
.file-item button { border:1px solid var(--line); border-radius:999px; padding:5px 9px; color:var(--muted); background:rgba(255,255,255,.04); }
.distill-progress { display:grid; gap:8px; border:1px solid rgba(52,211,153,.28); border-radius:8px; padding:12px; color:#d9fcef; background:rgba(52,211,153,.08); }
.distill-progress p { margin:0; color:#bde9db; }
.distill-progress ol { margin:0; padding-left:20px; color:var(--muted); }
.distill-progress li.done { color:var(--green); }
.distill-progress li.active { color:var(--cyan); }
.profile-archive { display:grid; gap:16px; }
.profile-archive-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.profile-archive-metrics article { border:1px solid var(--line); border-radius:8px; padding:14px; background:rgba(255,255,255,.04); }
.profile-archive-metrics strong { display:block; font-size:26px; color:var(--cyan); }
.profile-archive-metrics span { color:var(--muted); font-size:13px; }
.archive-two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.profile-distribution-row { display:grid; grid-template-columns:80px 1fr 42px; gap:10px; align-items:center; margin:9px 0; color:var(--muted); font-size:13px; }
.profile-distribution-row div { height:8px; border-radius:999px; background:rgba(148,163,184,.18); overflow:hidden; }
.profile-distribution-row i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--cyan),#8b5cf6); }
.distill-flow-panel { display:grid; gap:10px; border:1px solid rgba(34,211,238,.18); border-radius:8px; padding:12px; background:rgba(34,211,238,.05); }
.distill-flow-chart { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.distill-flow-chart.compact { grid-template-columns:repeat(6,minmax(0,1fr)); }
.distill-flow-step { display:grid; gap:5px; border:1px solid var(--line); border-radius:8px; padding:10px; background:rgba(0,0,0,.14); }
.distill-flow-step span { width:22px; height:22px; display:grid; place-items:center; border-radius:999px; background:rgba(34,211,238,.2); color:var(--cyan); font-weight:800; font-size:12px; }
.distill-flow-step strong { color:var(--text); font-size:13px; }
.distill-flow-step em { color:var(--muted); font-style:normal; font-size:12px; line-height:1.45; }
.distill-flow-step.done { border-color:rgba(52,211,153,.36); background:rgba(52,211,153,.08); }
.distill-flow-step.active { border-color:rgba(34,211,238,.5); background:rgba(34,211,238,.1); }
.distill-report { display:grid; gap:12px; margin-top:12px; border:1px solid rgba(52,211,153,.35); border-radius:8px; padding:14px; background:rgba(52,211,153,.08); }
.report-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.report-grid article,.distill-report-section,.report-confirm { border:1px solid var(--line); border-radius:8px; padding:10px; background:rgba(0,0,0,.16); }
.report-grid span { display:block; color:var(--muted); font-size:12px; }
.report-sections { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.distill-report details { color:var(--muted); }
.chat-screen { min-height: calc(100vh - 86px); display: grid; place-items: center; padding: 26px; }
.chat-stage {
  width: min(760px, 100%);
  min-height: 78vh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(4, 8, 18, 0.7);
  padding: clamp(18px, 4vw, 42px);
  position: relative;
  overflow: hidden;
}
.chat-stage::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 50% 45%, rgba(34, 211, 238, .13), transparent 22%),
    radial-gradient(circle at 70% 30%, rgba(139, 92, 246, .10), transparent 28%);
  animation: stage-breathe 5.4s ease-in-out infinite;
  pointer-events: none;
}
.eyes { display: flex; align-items: center; justify-content: center; gap: 28px; position: relative; z-index: 1; width: min(420px, 90vw); height: 190px; }
.eye { width: 142px; height: 142px; border-radius: 28px; background: linear-gradient(180deg, #67e8f9, #0891b2); box-shadow: 0 0 34px rgba(34, 211, 238, 0.55); transition: transform .2s; animation: idle-blink 4.8s infinite; }
.eyes[data-state="listening"] .eye { animation: listen-eye 1.05s ease-in-out infinite; }
.eyes[data-state="thinking"] .eye { animation: think-eye 1.2s ease-in-out infinite; }
.eyes[data-state="speaking"] .eye { animation: speak-eye .55s infinite alternate; }
.mouth { position: absolute; bottom: 12px; width: 62px; height: 12px; border-radius: 999px; background: rgba(103, 232, 249, 0.72); }
@keyframes stage-breathe { 50% { transform: scale(1.05); opacity: .82; } }
@keyframes idle-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
@keyframes listen-eye { 0%, 100% { transform: scaleY(.76); box-shadow: 0 0 30px rgba(34,211,238,.48); } 50% { transform: scaleY(.92); box-shadow: 0 0 54px rgba(34,211,238,.72); } }
@keyframes think-eye { 0%, 100% { transform: scaleY(.28); } 50% { transform: scaleY(.44); } }
@keyframes speak-eye { from { transform: scaleY(.85); } to { transform: scaleY(1.05); } }
.chat-meta { text-align: center; position: relative; z-index: 1; }
.chat-meta h1 { font-size: 42px; }
.chat-log { width: 100%; max-height: 240px; overflow: auto; display: grid; gap: 10px; padding: 4px; position: relative; z-index: 1; }
.chat-bubble { max-width: 78%; padding: 11px 14px; border-radius: 8px; line-height: 1.65; }
.chat-bubble.user { justify-self: end; background: rgba(139, 92, 246, 0.28); border: 1px solid rgba(139, 92, 246, 0.35); }
.chat-bubble.assistant { justify-self: start; background: rgba(34, 211, 238, 0.18); border: 1px solid rgba(34, 211, 238, 0.32); }
.chat-camera-video { display:none; position:relative; z-index:1; width:min(520px,100%); max-height:280px; border:1px solid rgba(34,211,238,.35); border-radius:8px; object-fit:cover; background:rgba(0,0,0,.3); box-shadow:0 18px 70px rgba(0,0,0,.34); }
.chat-camera-video.is-active { display:block; }
.chat-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 28px; position: relative; z-index: 1; }
.chat-controls .primary.is-active { box-shadow: 0 0 0 4px rgba(34,211,238,.16), 0 0 36px rgba(34,211,238,.42); }
.emoji-panel { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; width:min(560px,100%); position:relative; z-index:1; border:1px solid var(--line); border-radius:8px; padding:10px; background:rgba(5,8,20,.72); }
.emoji-panel button { width:38px; height:38px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.06); font-size:20px; }
.text-form { display: flex; gap: 10px; width: min(560px, 100%); position: relative; z-index: 1; }
.hidden { display: none !important; }
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  max-width: min(420px, calc(100vw - 40px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--panel-strong);
  box-shadow: 0 16px 60px rgba(0,0,0,.35);
}
.toast--success { border-color: rgba(52, 211, 153, .45); }
.toast--error { border-color: rgba(251, 113, 133, .55); }
.skeleton { height: 180px; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.13), rgba(255,255,255,.06)); animation: pulse 1.1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

@media (max-width: 920px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .app-nav { justify-content: flex-start; }
  .hero, .section-grid, .body-grid, .profile-archive-metrics, .archive-two-col, .distill-flow-chart, .distill-flow-chart.compact, .report-grid, .report-sections { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: 36px; }
  .hero-panel { align-items: flex-start; flex-direction: column; }
  .eye { width: 112px; height: 112px; }
  .voice-options { grid-template-columns: 1fr; }
  .file-item { grid-template-columns:auto minmax(0,1fr); }
}