:root {
  --v4-web-ink: #302c39;
  --v4-web-soft: #726d77;
  --v4-web-night: #171323;
  --v4-web-violet: #675b98;
  --v4-web-blue: #607fba;
  --v4-web-mint: #75b9ab;
  --v4-web-gold: #efd37f;
  --v4-web-paper: #fcfbf8;
  --v4-web-mist: #f2f3f2;
  --v4-web-line: rgba(48, 44, 57, 0.11);
}

body.v4-web {
  color: var(--v4-web-ink);
  background: var(--v4-web-paper);
  font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei UI", "Segoe UI", system-ui, sans-serif;
}

.v4-web .app-shell,
.v4-web .main-column {
  background: var(--v4-web-paper);
}

.v4-web .sidebar {
  background: linear-gradient(180deg, #171323 0%, #211a34 100%);
}

.v4-web .brand-mark {
  background: var(--v4-web-gold);
  box-shadow: inset 15px 0 0 #2b243c, 0 0 19px rgba(239, 211, 127, 0.3);
}

.v4-web .side-nav button {
  color: #aaa2b7;
}

.v4-web .side-nav button.active {
  color: #f1d983;
}

.v4-web .topbar {
  background: rgba(252, 251, 248, 0.95);
  border-bottom-color: var(--v4-web-line);
}

.v4-web .desktop-brand strong {
  font-weight: 580;
}

.v4-web .desktop-brand small {
  color: #827c87;
}

.v4-web .ghost-button {
  border-radius: 7px;
  font-weight: 520;
}

.v4-web .lunar-panel {
  min-height: 272px;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(112, 96, 157, 0.24), transparent 44%),
    linear-gradient(145deg, #171323 0%, #251c38 62%, #2f365b 100%);
}

.v4-web .desktop-moon::after {
  background: #251c38;
}

.v4-web .hero-copy h1 {
  font-weight: 560;
}

.v4-web .hero-copy p {
  font-weight: 400;
}

.v4-web .workspace-grid {
  gap: 44px;
}

.v4-web .input-panel,
.v4-web .reflection-panel {
  background: transparent;
}

.v4-web .section-head h2 {
  color: var(--v4-web-ink);
  font-weight: 560;
}

.v4-web .voice-entry {
  background: #f5f4f2;
  border: 1px solid var(--v4-web-line);
  border-radius: 7px;
}

.v4-web .voice-text-field textarea {
  color: #35313a;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.78;
}

.v4-web .dictation-card {
  border-left-color: var(--v4-web-line);
  background: #eeeff1;
}

.v4-web .dictation-button {
  background: linear-gradient(125deg, #5e5da5 0%, #5e7db4 54%, #6eb1a4 100%);
  border: 0;
  box-shadow: 0 12px 28px rgba(78, 80, 139, 0.17);
}

.v4-web .primary-button {
  background: #51426e;
  border: 0;
  border-radius: 7px;
  font-weight: 560;
  box-shadow: 0 10px 24px rgba(54, 41, 76, 0.13);
}

.v4-web .desktop-trust {
  border-left-color: #74b7aa;
  background: linear-gradient(180deg, #edf5f2 0%, #f5f5f3 100%);
}

.v4-web .desktop-trust h2 {
  color: #38333d;
  font-weight: 560;
}

.v4-web .echo-primary {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.86;
}

.v4-web .continuity-line {
  border-left-color: rgba(90, 164, 150, 0.72);
}

.v4-web .daily-review-panel {
  background: linear-gradient(180deg, rgba(241, 240, 246, 0.65), rgba(246, 248, 246, 0.7));
}

.v4-web .daily-review-heading h2 {
  font-weight: 560;
}

.v4-web .journal-item,
.v4-web .support-tool {
  border-radius: 7px;
  box-shadow: none;
}

.v4-web .web-scope {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 13px;
  width: min(100%, 1240px);
  margin: 54px auto 0;
  padding: 22px 0 0;
  color: #7b7580;
  border-top: 1px solid var(--v4-web-line);
}

.v4-web .web-scope svg {
  width: 22px;
  height: 22px;
  color: #6e6194;
}

.v4-web .web-scope p {
  display: grid;
  gap: 5px;
  margin: 0;
}

.v4-web .web-scope strong {
  color: #4e4854;
  font-size: 12px;
  font-weight: 560;
}

.v4-web .web-scope span {
  font-size: 11px;
  line-height: 1.65;
}

body.v4-web[data-dictation-visual="listening"] .lunar-panel,
body.v4-web[data-dictation-visual="listening"] .voice-entry {
  background:
    radial-gradient(ellipse at 68% 58%, rgba(111, 210, 192, 0.44), transparent 30%),
    radial-gradient(ellipse at 45% 43%, rgba(105, 114, 226, 0.6), transparent 46%),
    linear-gradient(150deg, #211938 0%, #303c6a 55%, #3c7778 100%);
  animation: v4-web-listening-breathe 10s ease-in-out infinite;
}

body.v4-web[data-dictation-visual="listening"] .dictation-button {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.36);
  box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.05), 0 0 44px rgba(118, 220, 201, 0.3);
}

@keyframes v4-web-listening-breathe {
  0%, 100% { background-size: 100% 100%, 100% 100%, 100% 100%; }
  40% { background-size: 136% 136%, 124% 124%, 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  body.v4-web[data-dictation-visual="listening"] .lunar-panel,
  body.v4-web[data-dictation-visual="listening"] .voice-entry {
    animation: none;
  }
}