* {
  box-sizing: border-box;
}

:root {
  --font-text: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei",
    "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-brand: "SF Pro Display", "Avenir Next", "PingFang SC", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Arial, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --bg-base: #eef1f8;
  --bg-gradient: linear-gradient(160deg, #f7f8ff 0%, #eef1f8 48%, #e9edf6 100%);
  --bg-panel: rgba(255, 255, 255, 0.82);
  --bg-card: rgba(255, 255, 255, 0.94);
  --bg-soft: #f4f6fb;

  --text-strong: #1f2740;
  --text-primary: #2a3452;
  --text-secondary: #63708c;
  --text-tertiary: #8a95ad;

  --line-soft: #e4e9f4;
  --line-medium: #d6deef;

  --accent-600: #4d5fd5;
  --accent-500: #6578f2;
  --accent-100: #ecf0ff;

  --success-600: #2b7f54;
  --success-100: #e9f7ef;
  --warning-600: #946313;
  --warning-100: #fff4dd;
  --danger-600: #b63c4f;
  --danger-100: #ffedf1;
  --muted-chip-text: #5f6b86;
  --muted-chip-bg: #edf1f8;

  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-xs: 10px;

  --shadow-sm: 0 8px 20px rgba(42, 58, 94, 0.08);
  --shadow-md: 0 14px 30px rgba(30, 46, 84, 0.11);
  --shadow-lg: 0 30px 55px rgba(28, 37, 70, 0.16);

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-text);
  color: var(--text-primary);
  background: var(--bg-gradient);
  background-attachment: fixed;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(113, 132, 255, 0.16), transparent 34%),
    radial-gradient(circle at 84% 16%, rgba(166, 143, 255, 0.12), transparent 30%);
  z-index: -1;
}

body.is-page-ready {
  opacity: 1;
  transform: translateY(0);
}

body.is-page-leaving {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

body.auth-page {
  background: radial-gradient(circle at 16% 6%, #7b89ff 0%, #4f5ac6 30%, #262f67 62%, #171f49 100%);
  color: #eff3ff;
}

body.auth-page::before {
  background:
    radial-gradient(circle at 12% 12%, rgba(230, 236, 255, 0.2), transparent 36%),
    radial-gradient(circle at 88% 10%, rgba(171, 189, 255, 0.18), transparent 28%);
}

.auth-bg {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.auth-bg__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-bg__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(148deg, rgba(14, 20, 48, 0.46), rgba(14, 20, 52, 0.64)),
    radial-gradient(circle at 16% 10%, rgba(181, 198, 255, 0.17), transparent 38%);
}

.auth-bg__content {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

header {
  position: sticky;
  top: 0;
  z-index: 12;
  padding: calc(18px + var(--safe-top)) max(22px, calc(22px + var(--safe-right))) 14px
    max(22px, calc(22px + var(--safe-left)));
  background: rgba(245, 248, 255, 0.8);
  border-bottom: 1px solid rgba(208, 218, 236, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.auth-page header {
  background: rgba(8, 12, 34, 0.18);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

main {
  max-width: 1024px;
  margin: var(--space-5) auto;
  padding: 0 22px calc(48px + var(--safe-bottom));
}

body.auth-page main {
  margin: 0 auto;
  padding-top: 28px;
}

.page-hero {
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(212, 222, 240, 0.72);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(242, 246, 255, 0.85)),
    var(--bg-panel);
  box-shadow: var(--shadow-sm);
}

.hero-title {
  margin: 0;
  font-size: clamp(24px, 4.2vw, 32px);
  line-height: 1.2;
  font-family: var(--font-brand);
  color: var(--text-strong);
  letter-spacing: 0.2px;
}

.hero-subtitle {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
}

.card h2 {
  margin: 0 0 var(--space-4);
  font-size: 19px;
  line-height: 1.35;
  color: var(--text-strong);
  font-family: var(--font-brand);
}

.card .toolbar h2 {
  margin: 0;
}

.glass-card {
  background: rgba(15, 22, 56, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.row > div {
  min-width: 0;
}

label {
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

body.auth-page label {
  color: rgba(235, 241, 255, 0.94);
}

h1 {
  margin: 0;
  font-family: var(--font-brand);
  color: var(--text-strong);
  letter-spacing: 0.3px;
  font-weight: 700;
}

body.auth-page h1 {
  color: #f5f7ff;
}

h2,
h3 {
  font-family: var(--font-brand);
}

input,
select,
textarea,
button {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.45;
}

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-medium);
  background: #fff;
  color: var(--text-primary);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(101, 120, 242, 0.6);
  box-shadow: 0 0 0 4px rgba(101, 120, 242, 0.14);
}

body.auth-page input,
body.auth-page select,
body.auth-page textarea {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  color: #f6f8ff;
}

body.auth-page input:focus,
body.auth-page select:focus,
body.auth-page textarea:focus {
  border-color: rgba(216, 225, 255, 0.86);
  box-shadow: 0 0 0 4px rgba(228, 235, 255, 0.16);
}

body.auth-page input::placeholder,
body.auth-page textarea::placeholder {
  color: rgba(236, 242, 255, 0.78);
}

textarea {
  min-height: 130px;
  resize: vertical;
}

input[type="range"] {
  min-height: auto;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  accent-color: var(--accent-600);
}

button {
  border: 1px solid transparent;
  min-height: 46px;
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg, var(--accent-500), var(--accent-600));
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(77, 95, 213, 0.26);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

button:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

button:active {
  transform: translateY(0);
}

button:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

button.secondary {
  background: var(--bg-soft);
  color: var(--text-primary);
  border-color: var(--line-medium);
  box-shadow: none;
}

button.secondary:hover {
  background: #e8edf8;
}

button.ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--line-medium);
  box-shadow: none;
}

.friend-delete-btn {
  color: var(--danger-600) !important;
  border-color: #f0c8d1 !important;
  background: #fff7f9 !important;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.toolbar h1 {
  min-width: 0;
  flex: 1 1 auto;
}

.toolbar > .row {
  margin-left: auto;
}

.nav-link {
  color: var(--accent-600);
  text-decoration: none;
  font-weight: 500;
  padding: 6px 0;
}

.nav-link:hover {
  color: #4154ce;
}

body.auth-page .nav-link {
  color: #dce4ff;
}

.chip,
.network-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(236, 241, 252, 0.95);
  border: 1px solid #d8e0f2;
}

body.auth-page .lang-switcher {
  background: rgba(221, 230, 255, 0.18);
  border-color: rgba(221, 230, 255, 0.44);
}

.lang-switcher__btn {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  box-shadow: none;
}

body.auth-page .lang-switcher__btn {
  color: rgba(232, 238, 255, 0.9);
}

.lang-switcher__btn.is-active {
  background: linear-gradient(140deg, var(--accent-500), var(--accent-600));
  color: #fff;
  box-shadow: 0 4px 12px rgba(77, 95, 213, 0.28);
}

.chip {
  color: var(--muted-chip-text);
  background: var(--muted-chip-bg);
  border-color: #dce3f3;
}

.network-chip.online {
  color: var(--success-600);
  background: var(--success-100);
  border-color: #c7ead8;
}

.network-chip.offline {
  color: var(--danger-600);
  background: var(--danger-100);
  border-color: #f2c6cf;
}

.source-chip {
  color: #4b5880;
  background: #eef2ff;
  border-color: #d9e0f8;
}

.muted {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

body.auth-page .muted {
  color: rgba(218, 226, 250, 0.9);
}

.form-feedback {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  min-height: 20px;
  line-height: 1.5;
  padding: 2px 0;
}

.list {
  display: grid;
  gap: 12px;
}

.list.loading {
  opacity: 0.74;
}

.list-placeholder {
  padding: 14px;
  border: 1px dashed #d3dcef;
  border-radius: var(--radius-xs);
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, 0.66);
}

.list-item {
  padding: 14px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, #fdfdff, #f5f7fd);
}

.list-item strong {
  color: var(--text-strong);
}

#sync-now-btn {
  min-height: 38px;
  padding: 7px 12px;
  font-size: 13px;
}

.status {
  flex: 1 1 180px;
  padding: 12px 14px;
  border-radius: var(--radius-xs);
  background: linear-gradient(165deg, #f8faff, #edf2ff);
  border: 1px solid #dee6f6;
  color: #344166;
  font-weight: 500;
}

.status-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.code {
  display: inline-block;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid #313c64;
  background: linear-gradient(145deg, #212b50, #16203f);
  color: #ecf2ff;
  letter-spacing: 1px;
  font-weight: 600;
}

.setting-list {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  background: #f8faff;
}

.setting-item span {
  color: var(--text-primary);
  font-weight: 500;
}

.setting-item input[type="checkbox"] {
  width: 42px;
  height: 24px;
  appearance: none;
  border-radius: 999px;
  background: #d7dfef;
  border: 1px solid #c8d2e9;
  position: relative;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.setting-item input[type="checkbox"]::after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 2px 6px rgba(23, 32, 61, 0.2);
  transition: transform 160ms ease;
}

.setting-item input[type="checkbox"]:checked {
  background: linear-gradient(145deg, var(--accent-500), var(--accent-600));
  border-color: var(--accent-600);
}

.setting-item input[type="checkbox"]:checked::after {
  transform: translateX(18px);
}

.auth-subtitle {
  margin-top: var(--space-1);
  margin-bottom: var(--space-4);
}

.auth-container {
  max-width: 450px;
  margin: 26px auto;
}

.auth-container .card {
  padding: 26px;
}

.auth-footer-link {
  margin-top: var(--space-3);
  display: block;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.report-opening {
  padding: 15px;
  border: 1px solid #dce4f6;
  border-radius: var(--radius-xs);
  background: linear-gradient(150deg, #f9fafe, #eef3ff);
  color: #364264;
  font-size: 15px;
  line-height: 1.65;
}

#report-sections ul {
  margin: 0;
}

#report-sections li {
  margin-bottom: 8px;
}

#history-list .list-item {
  position: relative;
  padding-left: 16px;
}

#history-list .list-item::before {
  content: "";
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-500), #8c7cff);
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
}

#friends-list .list-item .toolbar {
  align-items: flex-start;
}

#overview-list .list-item .muted {
  white-space: pre-line;
}

@media (max-width: 768px) {
  header {
    padding: calc(14px + var(--safe-top)) max(14px, calc(14px + var(--safe-right))) 12px
      max(14px, calc(14px + var(--safe-left)));
  }

  main {
    margin: 12px auto;
    padding: 0 12px calc(24px + var(--safe-bottom));
  }

  .page-hero {
    padding: 18px 16px;
    border-radius: 16px;
  }

  .hero-title {
    font-size: 24px;
  }

  .toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .toolbar > .row {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: 0;
  }

  .toolbar h1 {
    width: 100%;
  }

  .card {
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
  }

  .row {
    gap: 10px;
  }

  .status {
    flex-basis: 100%;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .auth-container {
    margin: 12px auto;
  }

  .auth-container .card {
    padding: 22px 18px;
  }

  .list-item {
    padding: 11px;
  }

  #history-list .list-item {
    padding-left: 14px;
  }
}


/* =========================================================
   MoodFlow UI Upgrade v2 — Polished Companion Planet System
   Visual-only refinement layer. Keep business logic unchanged.
   ========================================================= */

:root {
  --mf-shell-max: 1180px;
  --mf-bg-start: #f9fcff;
  --mf-bg-mid: #eef7ff;
  --mf-bg-end: #f4efff;
  --mf-planet-blue: #73ddf0;
  --mf-planet-indigo: #6f8cff;
  --mf-planet-violet: #a78cff;
  --mf-sun: #ffd37a;
  --mf-card-alpha: rgba(255, 255, 255, 0.78);
  --mf-card-solid: #ffffff;
  --mf-border: rgba(156, 176, 220, 0.36);
  --mf-hairline: rgba(215, 225, 243, 0.72);
  --mf-text: #22304f;
  --mf-subtle: #6f7894;
  --mf-soft-shadow: 0 18px 55px rgba(45, 62, 120, 0.12);
  --mf-glow-shadow: 0 22px 60px rgba(111, 140, 255, 0.18);
}

body:not(.auth-page) {
  background:
    radial-gradient(circle at 8% 8%, rgba(115, 221, 240, 0.22), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(167, 140, 255, 0.2), transparent 30%),
    radial-gradient(circle at 48% 96%, rgba(255, 211, 122, 0.16), transparent 28%),
    linear-gradient(145deg, var(--mf-bg-start), var(--mf-bg-mid) 48%, var(--mf-bg-end));
}

body:not(.auth-page)::after {
  opacity: 0.42;
  background-image:
    radial-gradient(circle, rgba(111, 140, 255, 0.18) 0 1px, transparent 1px),
    radial-gradient(circle, rgba(115, 221, 240, 0.16) 0 1px, transparent 1px),
    radial-gradient(circle, rgba(167, 140, 255, 0.14) 0 1px, transparent 1px);
  background-size: 44px 44px, 78px 78px, 118px 118px;
  background-position: 0 0, 22px 26px, 9px 52px;
}

.app-header,
header {
  box-shadow: 0 10px 32px rgba(45, 62, 120, 0.05);
}

.app-toolbar,
.toolbar {
  max-width: var(--mf-shell-max);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.brand-copy {
  min-width: 0;
}

.brand-copy h1,
.toolbar h1 {
  font-size: clamp(30px, 4.7vw, 46px);
  line-height: 0.98;
  color: var(--mf-text);
}

.brand-copy .muted {
  margin-top: 8px;
}

.app-nav {
  align-items: center;
}

.nav-link,
button.secondary,
.secondary--soft,
.lang-switcher {
  box-shadow: 0 8px 22px rgba(50, 69, 130, 0.08);
}

.nav-link,
.lang-switcher,
.network-chip,
.chip,
.source-chip {
  white-space: nowrap;
}

.page-hero,
.card {
  background:
    linear-gradient(148deg, rgba(255, 255, 255, 0.82), rgba(250, 252, 255, 0.66)),
    rgba(255, 255, 255, 0.62);
  border-color: var(--mf-border);
  box-shadow: var(--mf-soft-shadow);
}

.page-hero {
  isolation: isolate;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 24px 18px auto;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.95), transparent 18%),
    linear-gradient(145deg, rgba(115, 221, 240, 0.62), rgba(111, 140, 255, 0.52), rgba(167, 140, 255, 0.48));
  opacity: 0.32;
  filter: blur(0.2px);
  z-index: 0;
}

.planet-hero {
  min-height: 260px;
}

.hero-title {
  max-width: 760px;
  color: var(--mf-text);
}

.hero-subtitle {
  font-size: 16px;
}

.hero-planet-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 22px 58px rgba(85, 105, 175, 0.13);
}

.planet-large {
  animation: mf-float-planet 4.8s ease-in-out infinite;
}

.star-a,
.star-b,
.star-c,
.city-one,
.city-two,
.city-three {
  animation: mf-twinkle 2.6s ease-in-out infinite;
}

.star-b,
.city-two {
  animation-delay: 0.4s;
}

.star-c,
.city-three {
  animation-delay: 0.9s;
}

@keyframes mf-float-planet {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes mf-twinkle {
  0%, 100% { transform: scale(1); opacity: 0.72; }
  50% { transform: scale(1.28); opacity: 1; }
}

.dashboard-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
}

.mood-card,
.history-card,
.companion-card {
  border-radius: 30px;
}

.mood-card {
  box-shadow: var(--mf-glow-shadow);
}

.companion-card {
  overflow: hidden;
}

.companion-card::after {
  content: "";
  position: absolute;
  right: -52px;
  bottom: -58px;
  width: 172px;
  height: 172px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.9), transparent 18%),
    linear-gradient(145deg, rgba(115, 221, 240, 0.42), rgba(167, 140, 255, 0.34));
  opacity: 0.42;
}

.metric-card,
.list-item,
.setting-item,
.status,
.report-opening {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.metric-card:hover,
.list-item:hover,
.setting-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(80, 96, 146, 0.13);
}

input,
select,
textarea {
  border-radius: 18px;
}

input[type="range"] {
  accent-color: var(--mf-planet-indigo);
}

button,
.nav-link,
.lang-switcher__btn,
.metric-card,
.list-item,
.setting-item {
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease,
    border-color 150ms ease,
    opacity 150ms ease;
}

.primary-action,
button:not(.secondary):not(.ghost):not(.lang-switcher__btn) {
  position: relative;
  overflow: hidden;
}

.primary-action::after,
button:not(.secondary):not(.ghost):not(.lang-switcher__btn)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: translateX(-120%);
  transition: transform 420ms ease;
}

.primary-action:hover::after,
button:not(.secondary):not(.ghost):not(.lang-switcher__btn):hover::after {
  transform: translateX(120%);
}

.report-opening,
#report-sections li,
.report-suggestion,
#report-suggestions li {
  font-size: 15px;
  line-height: 1.75;
}

#report-suggestions,
#report-sections ul {
  padding-left: 0;
  list-style: none;
}

#report-suggestions li::before,
#report-sections li::before {
  content: "✦";
  color: var(--mf-planet-indigo);
  margin-right: 8px;
}

.setting-list {
  gap: 14px;
}

.setting-item {
  min-height: 64px;
}

#friends-list .list-item::after {
  pointer-events: none;
}

body.auth-page .auth-bg__content::before {
  content: "";
  position: fixed;
  width: 210px;
  height: 210px;
  right: 7vw;
  top: 12vh;
  border-radius: 50%;
  opacity: 0.58;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.95), transparent 18%),
    radial-gradient(circle at 72% 64%, rgba(139, 226, 176, 0.86), transparent 18%),
    linear-gradient(145deg, #73ddf0, #6f8cff 58%, #a78cff);
  box-shadow:
    0 0 0 18px rgba(255, 255, 255, 0.05),
    0 34px 90px rgba(6, 13, 42, 0.32);
  animation: mf-float-planet 5.4s ease-in-out infinite;
}

body.auth-page .auth-bg__content::after {
  content: "";
  position: fixed;
  width: 270px;
  height: 92px;
  right: 3vw;
  top: 19vh;
  border: 2px solid rgba(220, 231, 255, 0.32);
  border-radius: 50%;
  transform: rotate(-18deg);
  pointer-events: none;
}

body.auth-page .auth-container .card {
  max-width: 460px;
  margin-inline: auto;
}

@media (max-width: 860px) {
  body.auth-page .auth-bg__content::before,
  body.auth-page .auth-bg__content::after {
    opacity: 0.22;
  }

  .page-hero {
    min-height: auto;
  }
}

@media (max-width: 768px) {
  .app-header,
  header {
    position: sticky;
  }

  .brand-copy h1,
  .toolbar h1 {
    font-size: 34px;
  }

  .page-hero,
  .card {
    border-radius: 24px;
  }

  .hero-planet-card {
    min-height: 142px;
  }

  .mini-galaxy,
  .companion-orbit {
    width: 142px;
    height: 142px;
  }

  .planet-large,
  .tiny-planet,
  .empty-planet span {
    inset: 34px;
  }
}

/* Homepage layout recovery: companion planet dashboard structure */
.app-main {
  max-width: var(--mf-shell-max);
  margin-inline: auto;
}

.app-toolbar {
  width: 100%;
  margin-inline: auto;
}

.planet-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 22px;
  align-items: center;
  padding: clamp(22px, 3vw, 34px);
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.hero-planet-card {
  position: relative;
  min-height: 178px;
  border-radius: 24px;
  border: 1px solid var(--mf-hairline);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(239, 246, 255, 0.55));
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mini-galaxy,
.companion-orbit {
  position: relative;
  width: 176px;
  height: 176px;
}

.planet-large,
.tiny-planet,
.empty-planet span {
  position: absolute;
  inset: 40px;
  border-radius: 50%;
}

.companion-orbit .tiny-planet {
  inset: 50px;
}

.companion-orbit .empty-planet span {
  inset: 34px;
}

.tiny-planet {
  background: linear-gradient(150deg, #7de4f4, #7f9cff 58%, #b894ff);
  box-shadow:
    inset -8px -14px 24px rgba(58, 86, 170, 0.2),
    0 18px 30px rgba(88, 108, 180, 0.24);
}

.empty-planet {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.empty-planet span {
  border: 1px dashed rgba(147, 167, 218, 0.52);
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.5), rgba(232, 240, 255, 0.24));
}

.orbit,
.orbit-two {
  position: absolute;
  border: 1px solid rgba(152, 172, 223, 0.5);
  border-radius: 50%;
}

.orbit {
  inset: 10px;
}

.orbit-two {
  inset: 24px;
  transform: rotate(-18deg);
}

.star {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 10px rgba(138, 166, 255, 0.85);
}

.star-a {
  left: 20px;
  top: 36px;
}

.star-b {
  right: 26px;
  top: 20px;
}

.star-c {
  right: 18px;
  bottom: 34px;
}

.city-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 217, 132, 0.92);
  box-shadow: 0 0 14px rgba(255, 211, 122, 0.65);
}

.city-one {
  left: 62px;
  bottom: 48px;
}

.city-two {
  left: 84px;
  bottom: 62px;
}

.city-three {
  left: 102px;
  bottom: 50px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  gap: 18px;
  align-items: start;
}

.section-heading,
.section-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.mood-form {
  display: grid;
  gap: 16px;
}

.form-grid {
  display: grid;
  gap: 14px;
}

.form-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.metric-card {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--mf-hairline);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.8), rgba(241, 246, 255, 0.66));
}

.metric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.metric-head label {
  margin-bottom: 0;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sync-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.companion-card {
  position: relative;
  display: grid;
  gap: 10px;
}

.soft-link {
  color: var(--accent-600);
  text-decoration: none;
  font-weight: 600;
}

.soft-link:hover {
  color: #4557cf;
}

.empty-state {
  text-align: center;
}

@media (max-width: 960px) {
  .planet-hero {
    grid-template-columns: 1fr;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .form-grid--two,
  .metric-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .app-main {
    padding-inline: 2px;
  }

  .app-toolbar {
    gap: 10px;
  }

  .planet-hero {
    padding: 18px;
    gap: 14px;
  }

  .hero-planet-card {
    min-height: 154px;
    border-radius: 20px;
  }

  .mini-galaxy,
  .companion-orbit {
    width: 142px;
    height: 142px;
  }

  .planet-large,
  .tiny-planet,
  .empty-planet span {
    inset: 34px;
  }

  .companion-orbit .tiny-planet {
    inset: 40px;
  }

  .companion-orbit .empty-planet span {
    inset: 28px;
  }

  .section-heading,
  .section-toolbar,
  .sync-strip {
    align-items: flex-start;
  }

  .form-actions {
    align-items: stretch;
  }

  .form-actions button {
    width: 100%;
  }
}

/* =========================================================
   MoodFlow Planet UI Round 1 - Unified App Look
   ========================================================= */
:root {
  --mf-bg: linear-gradient(150deg, #f6fbff 0%, #edf5ff 48%, #f3efff 100%);
  --mf-surface: rgba(255, 255, 255, 0.9);
  --mf-surface-glass: rgba(255, 255, 255, 0.72);
  --mf-text: #243453;
  --mf-muted: #667699;
  --mf-primary: #637dff;
  --mf-primary-2: #62cadf;
  --mf-accent: #ffd98d;
  --mf-success: #49a87f;
  --mf-warning: #bb8a2c;
  --mf-danger: #c95c72;
  --mf-radius-card: 24px;
  --mf-radius-control: 16px;
  --mf-shadow-soft: 0 16px 38px rgba(55, 73, 128, 0.13);
  --mf-shadow-glow: 0 20px 55px rgba(103, 126, 245, 0.2);
}

body.app-shell {
  color: var(--mf-text);
  background: var(--mf-bg);
}

body.app-shell .app-header {
  background: rgba(247, 251, 255, 0.76);
  border-bottom: 1px solid rgba(199, 215, 242, 0.68);
}

body.app-shell .app-main {
  max-width: 1160px;
  margin: 20px auto;
  padding-bottom: calc(32px + var(--safe-bottom));
}

.app-nav {
  gap: 8px;
  flex-wrap: wrap;
}

.app-nav .nav-link,
.app-nav button.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(191, 205, 236, 0.82);
  background: rgba(255, 255, 255, 0.85);
  color: var(--mf-text);
}

.app-nav .nav-link:hover,
.app-nav button.secondary:hover {
  background: #fff;
  border-color: rgba(117, 142, 217, 0.6);
}

.card {
  border-radius: var(--mf-radius-card);
  background: var(--mf-surface);
  border: 1px solid rgba(182, 202, 236, 0.4);
  box-shadow: var(--mf-shadow-soft);
}

.planet-hero {
  overflow: hidden;
}

.hero-title,
.card h2 {
  color: var(--mf-text);
}

.muted,
.hero-subtitle {
  color: var(--mf-muted);
}

.hero-planet-card {
  position: relative;
}

.hero-image-fallback {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.62), transparent 32%),
    radial-gradient(circle at 74% 76%, rgba(104, 131, 248, 0.24), transparent 36%),
    linear-gradient(152deg, rgba(228, 240, 255, 0.74), rgba(241, 236, 255, 0.55));
}

.hero-planet-media .hero-image-fallback {
  background:
    radial-gradient(circle at 38% 34%, rgba(255, 255, 255, 0.68), transparent 18%),
    radial-gradient(circle at 62% 58%, rgba(86, 110, 180, 0.32), transparent 30%),
    linear-gradient(145deg, rgba(152, 174, 222, 0.58), rgba(92, 105, 164, 0.42));
  background-size: cover;
  background-position: center;
}

.report-planet-media .hero-image-fallback {
  background:
    radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.52), transparent 16%),
    radial-gradient(circle at 70% 68%, rgba(125, 91, 224, 0.28), transparent 34%),
    linear-gradient(145deg, rgba(118, 124, 194, 0.5), rgba(46, 42, 96, 0.44));
  background-size: cover;
  background-position: center;
}

.friends-planet-media .hero-image-fallback {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.56), transparent 16%),
    radial-gradient(circle at 68% 70%, rgba(104, 193, 198, 0.24), transparent 34%),
    linear-gradient(145deg, rgba(112, 145, 196, 0.52), rgba(56, 60, 119, 0.44));
  background-size: cover;
  background-position: center;
}

.settings-planet-media .hero-image-fallback {
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.58), transparent 17%),
    radial-gradient(circle at 67% 72%, rgba(165, 120, 238, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(126, 122, 188, 0.5), rgba(55, 44, 105, 0.44));
  background-size: cover;
  background-position: center;
}

.mood-card {
  box-shadow: var(--mf-shadow-glow);
}

.metric-card {
  border-radius: 18px;
  border-color: rgba(188, 206, 241, 0.75);
  background: linear-gradient(152deg, rgba(255, 255, 255, 0.84), rgba(241, 248, 255, 0.68));
}

.metric-head strong {
  color: var(--mf-primary);
  font-size: 18px;
}

input,
select,
textarea {
  border-radius: var(--mf-radius-control);
  border-color: rgba(184, 203, 238, 0.9);
  background: rgba(255, 255, 255, 0.96);
}

input[type="range"] {
  height: 4px;
}

input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(89, 110, 184, 0.3);
}

.form-feedback {
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(244, 248, 255, 0.9);
  border: 1px solid rgba(198, 213, 243, 0.72);
}

.sync-strip {
  margin-top: -2px;
}

.sync-strip #sync-now-btn {
  margin-left: auto;
}

.status,
.setting-item,
.list-item {
  border: 1px solid rgba(191, 207, 239, 0.72);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.84), rgba(241, 247, 255, 0.62));
}

#friends-list .list-item,
#permission-list .list-item,
#overview-list .list-item {
  position: relative;
  overflow: hidden;
}

#friends-list .list-item::after,
#permission-list .list-item::after,
#overview-list .list-item::after {
  content: "";
  position: absolute;
  width: 86px;
  height: 86px;
  right: -30px;
  bottom: -28px;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.86), transparent 22%),
    linear-gradient(145deg, rgba(114, 198, 244, 0.38), rgba(145, 160, 249, 0.44));
  opacity: 0.72;
}

#history-list .list-item {
  padding-left: 18px;
}

#history-list .list-item::before {
  background: linear-gradient(180deg, #62cadf, #7b8eff);
  opacity: 0.95;
}

.companion-card .hero-planet-card {
  min-height: 210px;
}

.invite-card .code {
  border-radius: 14px;
  border-color: rgba(156, 176, 220, 0.72);
}

.report-opening {
  border-radius: 16px;
  border-color: rgba(197, 210, 238, 0.74);
  background: linear-gradient(152deg, rgba(255, 255, 255, 0.85), rgba(243, 248, 255, 0.68));
}

.report-suggestions ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.report-suggestions li {
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(196, 212, 243, 0.7);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.86), rgba(244, 248, 255, 0.66));
}

.report-suggestions li::before {
  content: "✦";
  color: #7d95ff;
  margin-right: 8px;
}

.auth-page .glass-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(215, 227, 249, 0.8);
}

.auth-page .auth-header {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}

.auth-page .app-nav .nav-link,
.auth-page .network-chip,
.auth-page .lang-switcher {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.34);
  color: #eff4ff;
}

.auth-page .brand-copy h1,
.auth-page .auth-card h2 {
  color: #f5f8ff;
}

.auth-page .auth-card .muted {
  color: rgba(236, 242, 255, 0.92);
}

.auth-page .auth-feedback {
  color: rgba(23, 38, 79, 0.92);
}

.empty-state,
.list > .muted:only-child {
  position: relative;
  display: grid;
  place-items: center;
  gap: 10px;
  text-align: center;
  min-height: 144px;
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed rgba(185, 204, 240, 0.86);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.82), rgba(243, 248, 255, 0.68));
}

.empty-state::before,
.list > .muted:only-child::before {
  content: "";
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.76), transparent 22%),
    radial-gradient(circle at 66% 70%, rgba(102, 118, 180, 0.38), transparent 34%),
    linear-gradient(145deg, rgba(136, 228, 226, 0.5), rgba(130, 149, 247, 0.55), rgba(182, 160, 255, 0.48));
  background-size: cover;
  background-position: center;
  box-shadow: 0 12px 30px rgba(99, 125, 220, 0.26);
}

.page-friend-detail #overview-list .list-item .muted,
.page-friend-detail #permission-list .list-item .muted {
  white-space: pre-line;
}

.page-friend-detail #permission-list .list-item .muted {
  color: #58709c;
}

@media (max-width: 960px) {
  .app-nav .nav-link,
  .app-nav button.secondary {
    min-height: 32px;
    padding: 6px 10px;
  }
}

@media (max-width: 768px) {
  body.app-shell .app-main {
    margin-top: 12px;
  }

  .app-nav {
    gap: 6px;
  }

  .app-nav .nav-link,
  .app-nav button.secondary {
    font-size: 13px;
  }

  .planet-hero {
    grid-template-columns: 1fr;
  }

  .hero-planet-media,
  .report-planet-media,
  .friends-planet-media,
  .settings-planet-media {
    min-height: 148px;
  }

  .form-grid--two,
  .metric-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .auth-page .auth-card {
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

@keyframes mf-card-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


#record-mood.is-mood-glow {
  box-shadow: 0 0 0 4px rgba(99, 125, 255, 0.18), 0 10px 24px rgba(99, 125, 255, 0.24);
}

/* =========================================================
   MoodFlow Planet Gameplay v1 — Interactive Mood Planet
   Canvas-based planet/city layer for homepage.
   ========================================================= */

.mood-planet-panel {
  display: grid;
  grid-template-columns: minmax(240px, 0.42fr) minmax(320px, 0.58fr);
  gap: 24px;
  align-items: center;
  overflow: hidden;
  margin-bottom: 18px;
  min-height: 420px;
  background:
    radial-gradient(circle at 78% 12%, rgba(122, 97, 255, 0.26), transparent 32%),
    radial-gradient(circle at 22% 88%, rgba(255, 130, 214, 0.12), transparent 30%),
    linear-gradient(145deg, rgba(27, 12, 58, 0.94), rgba(43, 19, 86, 0.9) 50%, rgba(84, 34, 124, 0.84));
  border-color: rgba(225, 200, 255, 0.25);
  color: #f8efff;
}

.mood-planet-panel::before {
  opacity: 0.32;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.66) 0 1px, transparent 1px),
    radial-gradient(circle, rgba(198, 160, 255, 0.48) 0 1px, transparent 1px);
  background-size: 42px 42px, 86px 86px;
}

.mood-planet-panel h2,
.mood-planet-panel .eyebrow {
  color: #fff7ff;
}

.mood-planet-panel .muted {
  color: rgba(238, 222, 255, 0.78);
}

.mood-planet-copy {
  position: relative;
  z-index: 2;
  padding: 8px 4px 8px 10px;
}

.mood-planet-copy h2 {
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin: 8px 0 14px;
}

.mood-planet-copy p {
  max-width: 420px;
  font-size: 15px;
  line-height: 1.8;
}

.mood-planet-stage {
  position: relative;
  min-height: 360px;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(225, 200, 255, 0.22);
  background:
    radial-gradient(circle at 50% 45%, rgba(143, 111, 255, 0.18), transparent 48%),
    rgba(11, 5, 31, 0.36);
  box-shadow:
    0 24px 70px rgba(5, 2, 20, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

#mood-planet-canvas {
  display: block;
  width: 100%;
  height: min(52vw, 520px);
  min-height: 360px;
  cursor: grab;
  touch-action: none;
}

#mood-planet-canvas:active {
  cursor: grabbing;
}

.mood-planet-tooltip {
  position: absolute;
  z-index: 4;
  width: min(220px, calc(100% - 24px));
  padding: 12px 13px;
  border-radius: 16px;
  background: rgba(28, 12, 58, 0.84);
  border: 1px solid rgba(232, 207, 255, 0.3);
  color: #fff7ff;
  box-shadow: 0 18px 42px rgba(5, 2, 20, 0.34);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}

.mood-planet-tooltip strong {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
}

.mood-planet-tooltip span,
.mood-planet-tooltip p {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(239, 222, 255, 0.82);
}

.mood-planet-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 4px;
  position: relative;
  z-index: 2;
}

.planet-legend {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.planet-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(248, 239, 255, 0.86);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(232, 207, 255, 0.16);
  font-size: 12px;
  font-weight: 700;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
}

.legend-happy { background: #ffd36e; color: #ffd36e; }
.legend-calm { background: #76dbe8; color: #76dbe8; }
.legend-tired { background: #91a0c8; color: #91a0c8; }
.legend-anxious { background: #a178ff; color: #a178ff; }

.planet-hint {
  margin: 0;
  font-size: 12px;
}

@media (max-width: 920px) {
  .mood-planet-panel {
    grid-template-columns: 1fr;
  }

  .mood-planet-stage {
    min-height: 320px;
  }

  #mood-planet-canvas {
    min-height: 320px;
    height: 420px;
  }
}

@media (max-width: 640px) {
  .mood-planet-panel {
    padding: 18px;
    border-radius: 24px;
  }

  .mood-planet-copy h2 {
    font-size: 32px;
  }

  #mood-planet-canvas {
    min-height: 300px;
    height: 340px;
  }
}
/* =========================================================
   MoodFlow Global Deep Purple Theme v4
   FINAL visual override for non-auth pages only.
   Keeps index.html untouched.
   ========================================================= */

   :root {
    --deep-bg-0: #100626;
    --deep-bg-1: #190a38;
    --deep-bg-2: #281052;
    --deep-bg-3: #3c176c;
    --deep-surface-1: rgba(28, 12, 58, 0.84);
    --deep-surface-2: rgba(39, 16, 76, 0.82);
    --deep-border: rgba(232, 204, 255, 0.22);
    --deep-text: #fff7ff;
    --deep-muted: rgba(236, 220, 255, 0.76);
    --deep-muted-2: rgba(236, 220, 255, 0.58);
    --deep-primary: #c369ff;
    --deep-primary-2: #745cff;
    --deep-shadow: 0 26px 80px rgba(7, 2, 24, 0.34);
    --deep-shadow-soft: 0 16px 44px rgba(7, 2, 24, 0.24);
  }
  
  html,
  body:not(.auth-page),
  body.app-shell:not(.auth-page) {
    background-color: var(--deep-bg-0) !important;
  }
  
  body:not(.auth-page),
  body.app-shell:not(.auth-page) {
    color: var(--deep-text) !important;
    background:
      radial-gradient(circle at 82% 8%, rgba(126, 83, 255, 0.32), transparent 31%),
      radial-gradient(circle at 14% 18%, rgba(205, 95, 255, 0.2), transparent 29%),
      radial-gradient(circle at 52% 96%, rgba(255, 125, 219, 0.13), transparent 35%),
      linear-gradient(145deg, var(--deep-bg-0) 0%, var(--deep-bg-1) 36%, var(--deep-bg-2) 68%, var(--deep-bg-3) 100%) !important;
    background-attachment: fixed !important;
  }
  
  body:not(.auth-page)::before {
    background:
      radial-gradient(circle at 18% 18%, rgba(179, 112, 255, 0.16), transparent 30%),
      radial-gradient(circle at 78% 20%, rgba(126, 232, 255, 0.08), transparent 26%),
      radial-gradient(circle at 60% 72%, rgba(255, 125, 219, 0.1), transparent 34%) !important;
  }
  
  body:not(.auth-page)::after {
    opacity: 0.42 !important;
    background-image:
      radial-gradient(circle, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px),
      radial-gradient(circle, rgba(196, 151, 255, 0.2) 0 1px, transparent 1px),
      radial-gradient(circle, rgba(255, 139, 220, 0.13) 0 1px, transparent 1px) !important;
    background-size: 46px 46px, 86px 86px, 126px 126px !important;
  }
  
  body:not(.auth-page) header,
  body:not(.auth-page) .app-header {
    background: rgba(16, 6, 38, 0.88) !important;
    border-bottom: 1px solid rgba(232, 204, 255, 0.16) !important;
    box-shadow: 0 18px 50px rgba(6, 2, 20, 0.26) !important;
    backdrop-filter: blur(20px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
  }
  
  body:not(.auth-page) .app-main,
  body:not(.auth-page) main {
    color: var(--deep-text) !important;
  }
  
  body:not(.auth-page) h1,
  body:not(.auth-page) h2,
  body:not(.auth-page) h3,
  body:not(.auth-page) label,
  body:not(.auth-page) .toolbar h1,
  body:not(.auth-page) .brand-copy h1,
  body:not(.auth-page) .card h1,
  body:not(.auth-page) .card h2,
  body:not(.auth-page) .card h3,
  body:not(.auth-page) .page-hero h1,
  body:not(.auth-page) .page-hero h2,
  body:not(.auth-page) .section-heading h2,
  body:not(.auth-page) .section-toolbar h2 {
    color: var(--deep-text) !important;
  }
  
  body:not(.auth-page) .muted,
  body:not(.auth-page) p,
  body:not(.auth-page) small,
  body:not(.auth-page) .form-feedback,
  body:not(.auth-page) .list-placeholder,
  body:not(.auth-page) .toolbar .muted,
  body:not(.auth-page) .brand-copy .muted {
    color: var(--deep-muted) !important;
  }
  
  body:not(.auth-page) .card,
  body:not(.auth-page) .page-hero,
  body:not(.auth-page) .mood-card,
  body:not(.auth-page) .history-card,
  body:not(.auth-page) .companion-card,
  body:not(.auth-page) section.card,
  body:not(.auth-page) aside.card,
  body:not(.auth-page) article.card,
  body:not(.auth-page) .status {
    color: var(--deep-text) !important;
    background:
      radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.08), transparent 28%),
      linear-gradient(145deg, var(--deep-surface-1), var(--deep-surface-2)) !important;
    border-color: var(--deep-border) !important;
    box-shadow:
      var(--deep-shadow),
      0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
  }
  
  body:not(.auth-page) .mood-planet-panel {
    color: var(--deep-text) !important;
    background:
      radial-gradient(circle at 78% 12%, rgba(122, 97, 255, 0.32), transparent 32%),
      radial-gradient(circle at 22% 88%, rgba(255, 130, 214, 0.16), transparent 30%),
      linear-gradient(145deg, rgba(16, 6, 39, 0.98), rgba(39, 15, 82, 0.94) 50%, rgba(82, 31, 122, 0.88)) !important;
    border-color: rgba(232, 204, 255, 0.25) !important;
    box-shadow: var(--deep-shadow) !important;
  }
  
  body:not(.auth-page) .mood-planet-stage {
    background:
      radial-gradient(circle at 50% 45%, rgba(143, 111, 255, 0.2), transparent 48%),
      rgba(10, 4, 31, 0.48) !important;
    border-color: rgba(232, 204, 255, 0.2) !important;
  }
  
  body:not(.auth-page) .metric-card,
  body:not(.auth-page) .list-item,
  body:not(.auth-page) .setting-item,
  body:not(.auth-page) .report-opening,
  body:not(.auth-page) #report-suggestions li,
  body:not(.auth-page) #report-sections li,
  body:not(.auth-page) .code,
  body:not(.auth-page) .empty-state,
  body:not(.auth-page) .list > .muted:only-child {
    color: var(--deep-text) !important;
    background:
      radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.07), transparent 26%),
      rgba(16, 6, 39, 0.58) !important;
    border-color: rgba(232, 204, 255, 0.22) !important;
    box-shadow: var(--deep-shadow-soft) !important;
  }
  
  body:not(.auth-page) .metric-head strong,
  body:not(.auth-page) .soft-link,
  body:not(.auth-page) a {
    color: #dabdff !important;
  }
  
  body:not(.auth-page) .nav-link,
  body:not(.auth-page) .chip,
  body:not(.auth-page) .network-chip,
  body:not(.auth-page) .lang-switcher,
  body:not(.auth-page) .secondary,
  body:not(.auth-page) .secondary--soft,
  body:not(.auth-page) .source-chip {
    color: rgba(255, 247, 255, 0.92) !important;
    background: rgba(47, 19, 86, 0.66) !important;
    border-color: rgba(232, 204, 255, 0.25) !important;
    box-shadow: 0 12px 28px rgba(5, 2, 18, 0.18) !important;
  }
  
  body:not(.auth-page) .nav-link--primary,
  body:not(.auth-page) .nav-link[href*="report"],
  body:not(.auth-page) button:not(.secondary):not(.ghost):not(.lang-switcher__btn),
  body:not(.auth-page) .primary-action {
    color: #fff !important;
    background:
      radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.22), transparent 28%),
      linear-gradient(135deg, var(--deep-primary), var(--deep-primary-2)) !important;
    border-color: transparent !important;
    box-shadow: 0 16px 38px rgba(116, 92, 255, 0.34) !important;
  }
  
  body:not(.auth-page) input,
  body:not(.auth-page) select,
  body:not(.auth-page) textarea {
    color: var(--deep-text) !important;
    background: rgba(12, 5, 31, 0.62) !important;
    border-color: rgba(232, 204, 255, 0.28) !important;
  }
  
  body:not(.auth-page) input::placeholder,
  body:not(.auth-page) textarea::placeholder {
    color: var(--deep-muted-2) !important;
  }
  
  body:not(.auth-page) input[type="range"] {
    accent-color: var(--deep-primary) !important;
  }
  
  body:not(.auth-page) .list-item::before,
  body:not(.auth-page) #history-list .list-item::before {
    background: linear-gradient(180deg, var(--deep-primary), var(--deep-primary-2)) !important;
  }
  
  body:not(.auth-page) .setting-item span {
    color: var(--deep-text) !important;
  }
  
  body:not(.auth-page) .page-hero::after,
  body:not(.auth-page) .card::before,
  body:not(.auth-page) .companion-card::after {
    opacity: 0.22 !important;
  }

/* =========================================================
   MoodFlow Planet Phase 2 — City lighting feedback
   Makes saving a mood feel like lighting a city on the planet.
   ========================================================= */

.mood-planet-panel {
  position: relative;
}

.mood-planet-panel.is-saving-city .mood-planet-stage {
  box-shadow:
    0 24px 70px rgba(5, 2, 20, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 38px rgba(195, 105, 255, 0.22) !important;
}

.mood-planet-panel.is-city-lighting .mood-planet-stage {
  animation: planet-stage-city-light 980ms cubic-bezier(0.2, 0.9, 0.22, 1) both;
}

.mood-planet-panel.is-city-lighting::after {
  content: "";
  position: absolute;
  right: 19%;
  top: 36%;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(circle, rgba(255, 229, 143, 0.62), rgba(195, 105, 255, 0.22) 42%, transparent 72%);
  animation: planet-city-burst 980ms cubic-bezier(0.2, 0.9, 0.22, 1) both;
}

.mood-planet-panel.is-planet-touching .mood-planet-stage {
  transform: scale(0.996);
}

.planet-city-toast {
  position: absolute;
  z-index: 5;
  right: clamp(14px, 4vw, 28px);
  top: clamp(14px, 4vw, 28px);
  max-width: min(280px, calc(100% - 28px));
  padding: 10px 13px;
  border-radius: 999px;
  color: #fff7ff;
  background: rgba(35, 13, 70, 0.72);
  border: 1px solid rgba(255, 226, 255, 0.24);
  box-shadow: 0 18px 42px rgba(5, 2, 20, 0.26);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.planet-city-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes planet-stage-city-light {
  0% {
    filter: saturate(1) brightness(1);
  }

  42% {
    filter: saturate(1.26) brightness(1.16);
  }

  100% {
    filter: saturate(1) brightness(1);
  }
}

@keyframes planet-city-burst {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }

  42% {
    opacity: 1;
    transform: scale(1.18);
  }

  100% {
    opacity: 0;
    transform: scale(1.65);
  }
}

@media (max-width: 640px) {
  .mood-planet-panel.is-city-lighting::after {
    right: 12%;
    top: 42%;
    width: 68px;
    height: 68px;
  }

  .planet-city-toast {
    left: 14px;
    right: 14px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mood-planet-panel.is-city-lighting .mood-planet-stage,
  .mood-planet-panel.is-city-lighting::after {
    animation: none !important;
  }

  .planet-city-toast {
    transition: none !important;
  }
}

/* =========================================================
   Mood Planet v2 stage polish (visual only)
   ========================================================= */

.mood-planet-stage {
  background:
    radial-gradient(circle at 18% 16%, rgba(130, 204, 255, 0.18), transparent 34%),
    radial-gradient(circle at 83% 22%, rgba(203, 123, 255, 0.24), transparent 36%),
    radial-gradient(circle at 56% 78%, rgba(255, 142, 217, 0.12), transparent 32%),
    linear-gradient(150deg, rgba(9, 3, 30, 0.88), rgba(24, 9, 55, 0.84) 52%, rgba(46, 17, 78, 0.8)) !important;
  border: 1px solid rgba(236, 214, 255, 0.26);
  box-shadow:
    0 24px 70px rgba(5, 2, 20, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.09) inset,
    inset 0 14px 38px rgba(185, 150, 255, 0.1);
}

#mood-planet-canvas {
  width: 100%;
  min-height: 360px;
  height: min(56vw, 560px);
  cursor: grab;
  touch-action: none;
}

#mood-planet-canvas:active {
  cursor: grabbing;
}

.mood-planet-tooltip {
  width: min(210px, calc(100% - 22px));
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(25, 11, 55, 0.84);
  border: 1px solid rgba(234, 210, 255, 0.28);
  box-shadow: 0 16px 34px rgba(5, 2, 20, 0.3);
}

.mood-planet-tooltip strong {
  font-size: 12px;
}

.mood-planet-tooltip span,
.mood-planet-tooltip p {
  font-size: 11px;
}

@media (max-width: 920px) {
  #mood-planet-canvas {
    min-height: 330px;
    height: 430px;
  }
}

/* =========================================================
   Mood Planet Phase 3 — city detail sheet + stats strip
   ========================================================= */

.planet-stats-strip {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -2px;
  margin-bottom: 4px;
}

.planet-stats-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(233, 209, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(247, 236, 255, 0.9);
  font-size: 12px;
  font-weight: 700;
}

.planet-city-sheet {
  position: absolute;
  right: clamp(14px, 3.4vw, 26px);
  bottom: clamp(14px, 3.4vw, 24px);
  z-index: 6;
  width: min(320px, calc(100% - 28px));
  padding: 14px 14px 13px;
  border-radius: 18px;
  border: 1px solid rgba(240, 220, 255, 0.26);
  background: rgba(24, 10, 52, 0.8);
  box-shadow: 0 20px 42px rgba(5, 2, 20, 0.34);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff7ff;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.planet-city-sheet.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.planet-city-sheet__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  min-height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(239, 222, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 247, 255, 0.92);
  font-size: 18px;
  line-height: 1;
  box-shadow: none;
  padding: 0;
}

.planet-city-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(236, 218, 255, 0.7);
}

.planet-city-title {
  margin: 4px 0 8px;
  font-size: 18px;
  line-height: 1.2;
  color: #fff8ff;
}

.planet-city-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.planet-city-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(233, 209, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(248, 237, 255, 0.92);
  font-size: 11px;
  font-weight: 700;
}

.planet-city-weather {
  margin: 0 0 8px;
  color: rgba(236, 219, 255, 0.86);
  font-size: 12px;
}

.planet-city-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.planet-city-metrics span {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 48px;
  padding: 5px;
  border-radius: 10px;
  border: 1px solid rgba(230, 202, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  font-size: 11px;
  color: rgba(248, 237, 255, 0.9);
}

.planet-city-diary {
  margin: 0 0 8px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(232, 206, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

.planet-city-diary strong {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  color: rgba(233, 214, 255, 0.78);
}

.planet-city-diary p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(246, 235, 255, 0.88);
}

.planet-city-action {
  margin: 0;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(232, 206, 255, 0.2);
  background: rgba(160, 117, 255, 0.14);
  color: rgba(252, 245, 255, 0.95);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .planet-city-sheet {
    left: 14px;
    right: 14px;
    bottom: 14px;
    width: auto;
  }

  .planet-city-metrics {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Mood Planet Phase 4 — climate event card
   ========================================================= */

.planet-event-card {
  position: relative;
  z-index: 3;
  width: min(360px, 100%);
  margin: 8px 0 10px;
  padding: 11px 13px 12px;
  border-radius: 14px;
  border: 1px solid rgba(236, 214, 255, 0.2);
  background: rgba(27, 11, 58, 0.68);
  color: rgba(248, 238, 255, 0.93);
  box-shadow: 0 14px 30px rgba(5, 2, 20, 0.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.planet-event-card__kicker {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(231, 210, 255, 0.68);
  font-weight: 700;
  margin-bottom: 2px;
}

.planet-event-card h3 {
  margin: 0 0 5px;
  font-size: 16px;
  line-height: 1.25;
  color: #fff8ff;
}

.planet-event-card p {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(242, 229, 255, 0.84);
}

.planet-event-card strong {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 246, 255, 0.96);
  font-weight: 700;
}

.mood-planet-panel.planet-event-storm .mood-planet-stage {
  box-shadow:
    0 24px 70px rgba(5, 2, 20, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.09) inset,
    0 0 42px rgba(173, 146, 255, 0.24);
}

.mood-planet-panel.planet-event-lowlight .mood-planet-stage {
  filter: saturate(0.9) brightness(0.95);
}

.mood-planet-panel.planet-event-festival .mood-planet-stage {
  box-shadow:
    0 24px 70px rgba(5, 2, 20, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.09) inset,
    0 0 44px rgba(255, 216, 127, 0.28);
}

.mood-planet-panel.planet-event-unstable .mood-planet-stage {
  animation: planet-event-unstable-glow 2.8s ease-in-out infinite;
}

@keyframes planet-event-unstable-glow {
  0%,
  100% {
    box-shadow:
      0 24px 70px rgba(5, 2, 20, 0.38),
      0 0 0 1px rgba(255, 255, 255, 0.09) inset,
      0 0 18px rgba(171, 138, 255, 0.16);
  }
  50% {
    box-shadow:
      0 24px 70px rgba(5, 2, 20, 0.38),
      0 0 0 1px rgba(255, 255, 255, 0.09) inset,
      0 0 42px rgba(255, 152, 232, 0.28);
  }
}

@media (max-width: 900px) {
  .planet-event-card {
    width: 100%;
    margin-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mood-planet-panel.planet-event-unstable .mood-planet-stage {
    animation: none !important;
  }
}

/* =========================================================
   Mood Planet Phase 5 — emotion nation board + level
   ========================================================= */

.planet-nation-board {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  margin: 8px 0 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(236, 214, 255, 0.2);
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(145deg, rgba(25, 10, 54, 0.72), rgba(41, 16, 80, 0.68));
  box-shadow: 0 16px 34px rgba(5, 2, 20, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.planet-nation-board__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.planet-nation-board__kicker {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(231, 210, 255, 0.68);
  font-weight: 700;
}

.planet-nation-board__head h3 {
  margin: 3px 0 0;
  font-size: 18px;
  line-height: 1.2;
  color: #fff8ff;
}

.planet-level-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(233, 209, 255, 0.24);
  background: rgba(162, 116, 255, 0.2);
  color: rgba(251, 243, 255, 0.95);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.planet-progress-shell {
  position: relative;
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(233, 209, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.planet-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(113, 231, 255, 0.85), rgba(190, 121, 255, 0.92));
  box-shadow: 0 0 18px rgba(189, 121, 255, 0.34);
  transition: width 280ms ease;
}

.planet-nation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.planet-nation-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 4px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(233, 209, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(248, 237, 255, 0.9);
}

.planet-nation-card:nth-child(4n + 1) {
  background: linear-gradient(145deg, rgba(126, 206, 255, 0.1), rgba(255, 255, 255, 0.05));
}

.planet-nation-card:nth-child(4n + 2) {
  background: linear-gradient(145deg, rgba(139, 228, 166, 0.1), rgba(255, 255, 255, 0.05));
}

.planet-nation-card:nth-child(4n + 3) {
  background: linear-gradient(145deg, rgba(196, 147, 255, 0.13), rgba(255, 255, 255, 0.05));
}

.planet-nation-card:nth-child(4n + 4) {
  background: linear-gradient(145deg, rgba(255, 161, 208, 0.12), rgba(255, 255, 255, 0.05));
}

.planet-nation-card strong {
  color: #fff9ff;
  font-size: 14px;
  line-height: 1.2;
}

.planet-nation-card p {
  margin: 0;
  font-size: 12px;
  color: rgba(237, 220, 255, 0.76);
}

.planet-nation-card > span {
  grid-column: 1 / -1;
  font-size: 12px;
  color: rgba(246, 234, 255, 0.88);
}

.planet-nation-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(231, 205, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  font-size: 17px;
}

@media (max-width: 760px) {
  .planet-nation-grid {
    grid-template-columns: 1fr;
  }

  .planet-nation-board__head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* QA14 particle dock base styles — terminal overrides at the end lock the final cascade. */
@property --dock-orbit {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

html body.page-dashboard .mood-planet-panel,
html body.page-dashboard .mood-planet-panel:hover,
html body.page-dashboard .mood-planet-stage,
html body.page-dashboard .mood-planet-stage:hover,
html body.page-dashboard .mood-planet-stage:focus,
html body.page-dashboard .mood-planet-stage:focus-within,
html body.page-dashboard .mood-planet-stage.is-planet-touching,
html body.page-dashboard .mood-planet-stage.is-3d-ready,
html body.page-dashboard .mood-planet-stage.has-external-planet-model,
html body.page-dashboard #mood-planet-canvas,
html body.page-dashboard #mood-planet-canvas:hover,
html body.page-dashboard #mood-planet-canvas:focus,
html body.page-dashboard #mood-planet-canvas:active {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body.page-dashboard #mood-planet-canvas {
  display: block !important;
  contain: layout size paint !important;
}

html body.page-dashboard .planet-city-sheet__close,
html body.page-dashboard .planet-city-sheet__close:hover,
html body.page-dashboard .planet-city-sheet__close:focus-visible {
  top: 14px !important;
  right: 14px !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.22), transparent 32%),
    linear-gradient(145deg, rgba(151, 98, 255, 0.94), rgba(101, 83, 224, 0.9)) !important;
  color: rgba(255, 252, 255, 0.96) !important;
  box-shadow:
    0 10px 28px rgba(90, 64, 218, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

html body.page-dashboard .planet-city-sheet__close::before {
  content: "" !important;
  position: absolute !important;
  inset: -7px !important;
  border-radius: 18px !important;
}

html body.page-dashboard .app-dock,
html body:not(.auth-page) .app-dock {
  --dock-surface: rgba(7, 5, 20, 0.78);
  --dock-line: rgba(218, 199, 255, 0.18);
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(14px + var(--safe-bottom)) !important;
  width: min(690px, calc(100vw - 32px)) !important;
  min-height: 68px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 7px !important;
  border: 0 !important;
  border-radius: 26px !important;
  outline: 0 !important;
  overflow: visible !important;
  isolation: isolate !important;
  background:
    linear-gradient(180deg, rgba(17, 10, 39, 0.88), rgba(7, 5, 20, 0.88)),
    radial-gradient(circle at 18% 0%, rgba(134, 96, 255, 0.2), transparent 42%) !important;
  box-shadow:
    0 26px 90px rgba(0, 0, 0, 0.5),
    0 16px 54px rgba(82, 54, 180, 0.2) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.08) !important;
  backdrop-filter: blur(24px) saturate(1.08) !important;
  transform: translate3d(-50%, 0, 0) !important;
}

html body.page-dashboard .app-dock::before,
html body:not(.auth-page) .app-dock::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: -1 !important;
  padding: 1px !important;
  border-radius: 27px !important;
  background:
    conic-gradient(
      from var(--dock-orbit),
      transparent 0deg,
      transparent 38deg,
      rgba(155, 118, 255, 0.18) 58deg,
      rgba(238, 225, 255, 0.82) 76deg,
      rgba(124, 108, 255, 0.38) 96deg,
      transparent 128deg,
      transparent 206deg,
      rgba(100, 215, 255, 0.16) 232deg,
      rgba(194, 148, 255, 0.62) 250deg,
      transparent 286deg,
      transparent 360deg
    ) !important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.94 !important;
  pointer-events: none !important;
  animation: moodDockOrbit 7.5s linear infinite !important;
}

html body.page-dashboard .app-dock::after,
html body:not(.auth-page) .app-dock::after {
  content: "" !important;
  position: absolute !important;
  inset: -10px !important;
  z-index: -2 !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 9% 42%, rgba(232, 218, 255, 0.7) 0 1.4px, transparent 2px),
    radial-gradient(circle at 27% 101%, rgba(112, 215, 255, 0.56) 0 1.2px, transparent 2px),
    radial-gradient(circle at 49% -2%, rgba(177, 119, 255, 0.62) 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 72% 104%, rgba(234, 222, 255, 0.62) 0 1.2px, transparent 2px),
    radial-gradient(circle at 91% 36%, rgba(145, 123, 255, 0.7) 0 1.5px, transparent 2.4px),
    radial-gradient(ellipse at 50% 50%, rgba(130, 96, 255, 0.2), transparent 62%) !important;
  opacity: 0.76 !important;
  filter: blur(0.2px) !important;
  pointer-events: none !important;
  animation: moodDockParticles 4.8s ease-in-out infinite alternate !important;
}

html body.page-dashboard .dock-item,
html body:not(.auth-page) .dock-item {
  position: relative !important;
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 18px !important;
  outline: 0 !important;
  background: transparent !important;
  color: rgba(232, 225, 255, 0.7) !important;
  box-shadow: none !important;
  font-size: clamp(0.86rem, 1.35vw, 0.98rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  overflow: hidden !important;
  transform: none !important;
  transition: color 160ms ease, background 160ms ease, text-shadow 160ms ease !important;
}

html body.page-dashboard .dock-item:not(:first-child)::before,
html body:not(.auth-page) .dock-item:not(:first-child)::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 1px !important;
  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(234, 222, 255, 0.14),
      rgba(139, 112, 255, 0.26),
      rgba(234, 222, 255, 0.12),
      transparent
    ) !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
}

html body.page-dashboard .dock-item:hover,
html body.page-dashboard .dock-item:focus-visible,
html body.page-dashboard .dock-item.is-active,
html body:not(.auth-page) .dock-item:hover,
html body:not(.auth-page) .dock-item:focus-visible,
html body:not(.auth-page) .dock-item.is-active {
  color: rgba(255, 252, 255, 0.98) !important;
  background:
    radial-gradient(circle at 50% 15%, rgba(185, 137, 255, 0.22), transparent 58%),
    linear-gradient(180deg, rgba(126, 92, 255, 0.18), rgba(126, 92, 255, 0.08)) !important;
  text-shadow: 0 0 18px rgba(180, 142, 255, 0.4) !important;
}

html body.page-dashboard .dock-item:focus-visible,
html body:not(.auth-page) .dock-item:focus-visible {
  box-shadow: 0 0 0 2px rgba(232, 218, 255, 0.14) inset !important;
}

html body.page-dashboard .dock-logout,
html body:not(.auth-page) .dock-logout {
  color: rgba(255, 228, 244, 0.78) !important;
}

@keyframes moodDockOrbit {
  to {
    --dock-orbit: 360deg;
  }
}

@keyframes moodDockParticles {
  0% {
    transform: translate3d(-2px, 1px, 0) scale(0.996);
    opacity: 0.56;
  }

  100% {
    transform: translate3d(2px, -1px, 0) scale(1.004);
    opacity: 0.86;
  }
}

@media (max-width: 760px) {
  html body.page-dashboard .app-dock,
  html body:not(.auth-page) .app-dock {
    width: calc(100vw - 18px) !important;
    min-height: 62px !important;
    padding: 6px !important;
    border-radius: 22px !important;
  }

  html body.page-dashboard .app-dock::before,
  html body:not(.auth-page) .app-dock::before {
    border-radius: 23px !important;
  }

  html body.page-dashboard .dock-item,
  html body:not(.auth-page) .dock-item {
    min-height: 50px !important;
    border-radius: 15px !important;
    padding-inline: 6px !important;
    font-size: 0.82rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.page-dashboard .app-dock::before,
  html body.page-dashboard .app-dock::after,
  html body:not(.auth-page) .app-dock::before,
  html body:not(.auth-page) .app-dock::after {
    animation: none !important;
  }
}

/* QA14 strict hover cleanup — outrank earlier high-specificity model filters. */
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage:hover,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage:focus,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage:focus-within,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage.is-3d-ready,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage.has-external-planet-model,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage.is-planet-touching,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage.is-3d-ready.has-external-planet-model {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage #mood-planet-canvas#mood-planet-canvas,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage:hover #mood-planet-canvas#mood-planet-canvas,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage:focus-within #mood-planet-canvas#mood-planet-canvas,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage.is-3d-ready #mood-planet-canvas#mood-planet-canvas,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage.has-external-planet-model #mood-planet-canvas#mood-planet-canvas,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage.is-planet-touching #mood-planet-canvas#mood-planet-canvas,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage.is-3d-ready.has-external-planet-model #mood-planet-canvas#mood-planet-canvas {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* =========================================================
   Mood Planet Phase 6 — daily mission card
   ========================================================= */

.planet-mission-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 4px 0 10px;
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid rgba(236, 214, 255, 0.22);
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(145deg, rgba(24, 10, 52, 0.76), rgba(39, 16, 78, 0.72));
  box-shadow: 0 16px 34px rgba(5, 2, 20, 0.24);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
}

.planet-mission-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(231, 205, 255, 0.22);
  background: linear-gradient(145deg, rgba(129, 222, 255, 0.5), rgba(187, 126, 255, 0.56));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.planet-mission-card__body {
  min-width: 0;
}

.planet-mission-card__kicker {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(231, 210, 255, 0.68);
  font-weight: 700;
}

.planet-mission-card__body h3 {
  margin: 4px 0 6px;
  font-size: 17px;
  line-height: 1.25;
  color: #fff8ff;
}

.planet-mission-card__body p {
  margin: 0;
  font-size: 12px;
  line-height: 1.52;
  color: rgba(242, 229, 255, 0.84);
}

.planet-mission-card__button {
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(240, 222, 255, 0.26);
  background: linear-gradient(135deg, rgba(195, 105, 255, 0.88), rgba(116, 92, 255, 0.88));
  color: #fff8ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 22px rgba(116, 92, 255, 0.24);
}

.planet-mission-card__button:hover {
  filter: brightness(1.04);
}

.planet-mission-card[data-mission-type="empty"] .planet-mission-card__icon {
  background: linear-gradient(145deg, rgba(132, 223, 255, 0.56), rgba(132, 147, 255, 0.56));
}

.planet-mission-card[data-mission-type="highPressure"] .planet-mission-card__icon {
  background: linear-gradient(145deg, rgba(189, 166, 255, 0.58), rgba(140, 112, 255, 0.58));
}

.planet-mission-card[data-mission-type="lowEnergy"] .planet-mission-card__icon {
  background: linear-gradient(145deg, rgba(128, 171, 255, 0.58), rgba(117, 134, 242, 0.58));
}

.planet-mission-card[data-mission-type="positive"] .planet-mission-card__icon {
  background: linear-gradient(145deg, rgba(255, 210, 136, 0.62), rgba(205, 132, 255, 0.62));
}

.planet-mission-card[data-mission-type="unstable"] .planet-mission-card__icon {
  background: linear-gradient(145deg, rgba(255, 153, 223, 0.58), rgba(166, 131, 255, 0.58));
}

.planet-mission-card[data-mission-type="default"] .planet-mission-card__icon {
  background: linear-gradient(145deg, rgba(145, 226, 196, 0.56), rgba(132, 152, 255, 0.56));
}

@media (max-width: 760px) {
  .planet-mission-card {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .planet-mission-card__button {
    width: 100%;
  }
}

/* =========================================================
   Mood Planet Phase 7 — constellation memory orbit
   ========================================================= */

.planet-constellation-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 11px;
  margin: 2px 0 10px;
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid rgba(236, 214, 255, 0.22);
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 255, 255, 0.07), transparent 28%),
    linear-gradient(145deg, rgba(23, 9, 50, 0.74), rgba(39, 15, 78, 0.7));
  box-shadow: 0 16px 34px rgba(5, 2, 20, 0.22);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
}

.planet-constellation-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.planet-constellation-card__kicker {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(231, 210, 255, 0.68);
  font-weight: 700;
}

.planet-constellation-card__head h3 {
  margin: 3px 0 0;
  font-size: 17px;
  line-height: 1.25;
  color: #fff8ff;
}

.planet-constellation-stars {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-top: 2px;
}

.planet-constellation-stars span {
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 10px;
  color: rgba(226, 205, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(232, 204, 255, 0.18);
  transition: all 180ms ease;
}

.planet-constellation-stars span.is-lit {
  color: rgba(255, 246, 189, 0.96);
  background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.9), rgba(255, 220, 137, 0.42));
  border-color: rgba(255, 222, 154, 0.5);
  box-shadow: 0 0 13px rgba(255, 216, 127, 0.55);
}

.planet-constellation-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.planet-constellation-metrics span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(233, 209, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(247, 236, 255, 0.9);
  font-size: 12px;
  font-weight: 650;
}

.planet-constellation-progress {
  position: relative;
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(233, 209, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.planet-constellation-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(190, 121, 255, 0.94), rgba(111, 231, 255, 0.9), rgba(255, 216, 127, 0.92));
  box-shadow: 0 0 18px rgba(189, 121, 255, 0.28);
  transition: width 280ms ease;
}

.planet-constellation-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.52;
  color: rgba(242, 229, 255, 0.84);
}

@media (max-width: 760px) {
  .planet-constellation-card__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .planet-constellation-metrics {
    grid-template-columns: 1fr;
  }
}

body:not(.auth-page) .app-header [data-lang-switcher],
body:not(.auth-page) header [data-lang-switcher],
body.auth-page header [data-lang-switcher] {
  display: none !important;
}

.settings-language-card {
  position: relative;
  overflow: hidden;
}

.settings-language-card::after {
  content: "";
  position: absolute;
  right: -48px;
  top: -58px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.12;
  background: radial-gradient(circle, rgba(195, 105, 255, 0.85), transparent 68%);
}

.setting-item--language {
  align-items: center !important;
}

.settings-lang-control {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.settings-lang-control .lang-switcher {
  display: inline-flex !important;
  background: rgba(47, 19, 86, 0.72) !important;
  border-color: rgba(232, 207, 255, 0.28) !important;
}

.settings-lang-control .lang-switcher__btn {
  min-width: 54px;
}

@media (max-width: 760px) {
  .setting-item--language {
    align-items: stretch !important;
    flex-direction: column;
  }

  .settings-lang-control .lang-switcher {
    width: 100%;
  }

  .settings-lang-control .lang-switcher__btn {
    flex: 1 1 0;
  }
}
/* =========================================================
   Mood Planet Phase 8 — Command Center Layout Polish
   Makes the planet system feel like one cohesive game panel.
   CSS-only refinement. No logic changes.
   ========================================================= */

.mood-planet-panel {
  grid-template-columns: minmax(260px, 0.36fr) minmax(360px, 0.64fr) !important;
  align-items: stretch !important;
  gap: 18px !important;
  padding: clamp(18px, 2.6vw, 28px) !important;
}

.mood-planet-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 220px;
  padding: 18px !important;
  border-radius: 24px;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.08), transparent 28%),
    rgba(17, 7, 42, 0.38);
  border: 1px solid rgba(232, 207, 255, 0.14);
}

.mood-planet-copy .eyebrow {
  margin-bottom: 10px;
  color: rgba(236, 220, 255, 0.78) !important;
}

.mood-planet-copy h2 {
  margin-bottom: 12px !important;
  font-size: clamp(34px, 5vw, 58px) !important;
  text-shadow: 0 14px 34px rgba(5, 2, 20, 0.34);
}

.mood-planet-copy p {
  max-width: 460px !important;
  color: rgba(236, 220, 255, 0.8) !important;
}

.mood-planet-stage {
  min-height: clamp(380px, 50vw, 560px) !important;
  border-radius: 34px !important;
}

#mood-planet-canvas {
  min-height: clamp(380px, 50vw, 560px) !important;
  height: clamp(380px, 50vw, 560px) !important;
}

.planet-stats-strip,
.planet-event-card,
.planet-mission-card,
.planet-constellation-card,
.planet-nation-board,
.mood-planet-footer {
  grid-column: 1 / -1 !important;
}

.planet-stats-strip {
  order: 3;
  margin-top: 0 !important;
}

.planet-event-card {
  order: 4;
}

.planet-mission-card {
  order: 5;
}

.planet-constellation-card {
  order: 6;
}

.planet-nation-board {
  order: 7;
}

.mood-planet-footer {
  order: 8;
}

.planet-stats-strip,
.planet-event-card,
.planet-mission-card,
.planet-constellation-card,
.planet-nation-board {
  width: 100%;
}

.planet-event-card,
.planet-mission-card,
.planet-constellation-card,
.planet-nation-board {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.planet-event-card,
.planet-mission-card,
.planet-constellation-card {
  min-height: 86px;
}

.planet-mission-card,
.planet-constellation-card,
.planet-nation-board,
.planet-event-card {
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.075), transparent 30%),
    linear-gradient(145deg, rgba(20, 8, 49, 0.72), rgba(42, 16, 82, 0.64)) !important;
  border-color: rgba(232, 207, 255, 0.18) !important;
  box-shadow: 0 18px 44px rgba(5, 2, 20, 0.22) !important;
}

.planet-stats-chip,
.planet-stats-strip span,
.planet-level-pill,
.planet-constellation-metrics span,
.planet-nation-card,
.planet-city-tags span {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(232, 207, 255, 0.15) !important;
}

.planet-legend {
  gap: 8px !important;
}

.planet-legend span {
  min-height: 32px !important;
  padding: 7px 11px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(232, 207, 255, 0.16) !important;
}

.planet-event-card__kicker,
.planet-mission-card__kicker,
.planet-constellation-card__kicker,
.planet-nation-board__kicker {
  color: rgba(231, 210, 255, 0.7) !important;
}

.planet-progress-fill,
.planet-constellation-progress i {
  background: linear-gradient(90deg, #c369ff, #7ee8ff, #ffd36e) !important;
}

.planet-mission-card__button {
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.planet-mission-card__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(116, 92, 255, 0.34) !important;
}

.mood-planet-panel::after {
  content: "";
  position: absolute;
  inset: auto 10% 10% auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.12;
  background: radial-gradient(circle, rgba(195, 105, 255, 0.7), transparent 65%);
  filter: blur(4px);
}

@media (max-width: 980px) {
  .mood-planet-panel {
    grid-template-columns: 1fr !important;
  }

  .mood-planet-copy {
    min-height: auto;
  }

  .mood-planet-stage,
  #mood-planet-canvas {
    min-height: 360px !important;
    height: 420px !important;
  }
}

@media (max-width: 640px) {
  .mood-planet-panel {
    padding: 16px !important;
    gap: 14px !important;
  }

  .mood-planet-copy {
    padding: 14px !important;
    border-radius: 20px;
  }

  .mood-planet-copy h2 {
    font-size: 32px !important;
  }

  .mood-planet-stage,
  #mood-planet-canvas {
    min-height: 310px !important;
    height: 340px !important;
    border-radius: 24px !important;
  }

  .planet-event-card,
  .planet-mission-card,
  .planet-constellation-card,
  .planet-nation-board {
    border-radius: 18px !important;
  }
}
/* =========================================================
   Mood Planet Phase 9 — Mood Control Console Polish
   Turns the daily mood form, side universe card, and history list
   into a cohesive game-like control center.
   CSS-only refinement. No logic changes.
   ========================================================= */

.mood-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.08), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(195, 105, 255, 0.14), transparent 30%),
    linear-gradient(145deg, rgba(23, 9, 50, 0.86), rgba(43, 16, 80, 0.8)) !important;
  border-color: rgba(232, 207, 255, 0.2) !important;
}

.mood-card::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.11;
  background: radial-gradient(circle, rgba(126, 232, 255, 0.86), transparent 68%);
  filter: blur(3px);
}

.mood-card .section-heading {
  align-items: flex-start;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(232, 207, 255, 0.14);
}

.mood-card .section-heading h2::before {
  content: "✦";
  display: inline-flex;
  margin-right: 8px;
  color: #ffd36e;
  text-shadow: 0 0 14px rgba(255, 211, 110, 0.4);
}

.mood-form {
  position: relative;
  z-index: 1;
}

.mood-form label {
  color: rgba(255, 247, 255, 0.9) !important;
  font-weight: 760;
  letter-spacing: 0.01em;
}

.form-grid > div,
.form-grid--two > div {
  position: relative;
}

.mood-card input,
.mood-card select,
.mood-card textarea {
  min-height: 50px;
  color: #fff7ff !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.06), transparent 28%),
    rgba(11, 4, 30, 0.62) !important;
  border-color: rgba(232, 207, 255, 0.28) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 12px 26px rgba(5, 2, 20, 0.16) !important;
}

.mood-card textarea {
  min-height: 154px;
}

.mood-card input:focus,
.mood-card select:focus,
.mood-card textarea:focus {
  background: rgba(20, 8, 49, 0.78) !important;
  border-color: rgba(220, 182, 255, 0.82) !important;
  box-shadow:
    0 0 0 4px rgba(190, 116, 255, 0.22),
    0 16px 38px rgba(5, 2, 20, 0.22) !important;
}

.metric-grid {
  gap: 14px !important;
}

.metric-card {
  position: relative;
  overflow: hidden;
  padding: 15px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.07), transparent 30%),
    rgba(18, 7, 42, 0.6) !important;
  border-color: rgba(232, 207, 255, 0.2) !important;
}

.metric-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -36px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  opacity: 0.14;
  pointer-events: none;
  background: radial-gradient(circle, rgba(195, 105, 255, 0.76), transparent 68%);
}

.metric-head strong {
  color: #ffd8ff !important;
  font-size: 19px !important;
  text-shadow: 0 0 18px rgba(195, 105, 255, 0.28);
}

.metric-card .muted {
  margin: 8px 0 0;
  font-size: 12px !important;
  color: rgba(236, 220, 255, 0.62) !important;
}

.mood-card input[type="range"] {
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1) !important;
  accent-color: #c369ff !important;
}

.mood-card input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(126, 232, 255, 0.45), rgba(195, 105, 255, 0.72));
}

.mood-card input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid rgba(255, 247, 255, 0.88);
  background: linear-gradient(145deg, #ffd8ff, #c369ff);
  box-shadow: 0 0 20px rgba(195, 105, 255, 0.45);
}

#record-mood {
  font-weight: 750;
}

#record-mood option {
  color: #211047;
  background: #f8efff;
}

.form-actions {
  margin-top: 2px;
}

.form-actions button[type="submit"],
.mood-card button[type="submit"] {
  min-height: 52px;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(135deg, #c369ff, #745cff) !important;
  box-shadow: 0 18px 42px rgba(116, 92, 255, 0.36) !important;
  font-weight: 850;
}

.form-actions button[type="submit"]::before,
.mood-card button[type="submit"]::before {
  content: "✦ ";
}

.sync-strip {
  padding: 10px 12px !important;
  margin-top: 0 !important;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(232, 207, 255, 0.14);
}

#sync-status:empty,
#save-message:empty {
  display: none !important;
}

.companion-card {
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.07), transparent 30%),
    radial-gradient(circle at 84% 80%, rgba(126, 232, 255, 0.1), transparent 32%),
    linear-gradient(145deg, rgba(23, 9, 50, 0.82), rgba(39, 16, 76, 0.74)) !important;
  border-color: rgba(232, 207, 255, 0.18) !important;
}

.companion-card .section-heading {
  border-bottom: 1px solid rgba(232, 207, 255, 0.12);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.companion-card .hero-planet-card {
  background:
    radial-gradient(circle at 50% 45%, rgba(143, 111, 255, 0.18), transparent 48%),
    rgba(10, 4, 31, 0.4) !important;
  border-color: rgba(232, 207, 255, 0.18) !important;
  min-height: 190px;
}

.history-card {
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 255, 255, 0.07), transparent 30%),
    linear-gradient(145deg, rgba(23, 9, 50, 0.82), rgba(39, 16, 76, 0.74)) !important;
  border-color: rgba(232, 207, 255, 0.18) !important;
}

.history-card .section-toolbar {
  border-bottom: 1px solid rgba(232, 207, 255, 0.12);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

#history-list .list-item {
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.06), transparent 26%),
    rgba(15, 6, 38, 0.58) !important;
  border-color: rgba(232, 207, 255, 0.16) !important;
}

#history-list .list-item strong {
  color: #fff7ff !important;
}

#history-count {
  background: rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 768px) {
  .mood-card textarea {
    min-height: 132px;
  }

  .sync-strip {
    align-items: stretch !important;
  }

  #sync-now-btn {
    width: 100%;
  }
}
/* =========================================================
   Mood Planet Phase 10 — Secondary Pages Cosmic Polish
   Unifies report, settings, friends, and detail pages with the
   deep-purple game world. CSS-only refinement. No logic changes.
   ========================================================= */

/* Shared page hero polish */
.page-hero:not(.mood-planet-panel) {
  position: relative;
  overflow: hidden;
  min-height: 168px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.08), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(195, 105, 255, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(23, 9, 50, 0.88), rgba(42, 16, 82, 0.78)) !important;
  border-color: rgba(232, 207, 255, 0.2) !important;
}

.page-hero:not(.mood-planet-panel)::before {
  content: "";
  position: absolute;
  right: clamp(18px, 6vw, 70px);
  top: 50%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.22;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.85), transparent 18%),
    radial-gradient(circle at 70% 66%, rgba(126, 232, 255, 0.46), transparent 18%),
    linear-gradient(145deg, rgba(195, 105, 255, 0.68), rgba(116, 92, 255, 0.58));
  box-shadow:
    0 0 0 18px rgba(255, 255, 255, 0.025),
    0 24px 70px rgba(5, 2, 20, 0.28);
}

.page-hero:not(.mood-planet-panel)::after {
  content: "";
  position: absolute;
  right: clamp(4px, 5vw, 54px);
  top: 50%;
  width: 170px;
  height: 48px;
  border-radius: 50%;
  transform: translateY(-50%) rotate(-18deg);
  pointer-events: none;
  opacity: 0.2 !important;
  border: 1px solid rgba(232, 207, 255, 0.34);
  background: transparent !important;
}

.page-hero:not(.mood-planet-panel) .hero-title,
.page-hero:not(.mood-planet-panel) h1,
.page-hero:not(.mood-planet-panel) h2 {
  color: #fff7ff !important;
  text-shadow: 0 12px 34px rgba(5, 2, 20, 0.32);
}

.page-hero:not(.mood-planet-panel) .hero-subtitle,
.page-hero:not(.mood-planet-panel) .muted {
  max-width: 620px;
  color: rgba(236, 220, 255, 0.78) !important;
}

/* Report page: make insight output feel like a star system briefing */
.report-opening,
#report-opening,
.report-summary,
.report-card .report-opening {
  position: relative;
  overflow: hidden;
  padding: 16px 18px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(145deg, rgba(18, 7, 42, 0.72), rgba(42, 16, 82, 0.62)) !important;
  border-color: rgba(232, 207, 255, 0.2) !important;
  color: rgba(255, 247, 255, 0.92) !important;
}

.report-opening::before,
#report-opening::before {
  content: "✦";
  display: inline-flex;
  margin-right: 8px;
  color: #ffd36e;
  text-shadow: 0 0 14px rgba(255, 211, 110, 0.4);
}

#report-suggestions,
.report-suggestions,
#report-sections {
  display: grid;
  gap: 12px;
}

#report-suggestions li,
.report-suggestions li,
#report-sections li,
.report-suggestion {
  position: relative;
  overflow: hidden;
  border-radius: 18px !important;
  padding: 13px 15px 13px 38px !important;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.07), transparent 28%),
    rgba(15, 6, 38, 0.58) !important;
  border-color: rgba(232, 207, 255, 0.16) !important;
  color: rgba(255, 247, 255, 0.9) !important;
}

#report-suggestions li::before,
.report-suggestions li::before,
#report-sections li::before,
.report-suggestion::before {
  content: "✦" !important;
  position: absolute;
  left: 15px;
  top: 13px;
  color: #c369ff !important;
  margin: 0 !important;
  text-shadow: 0 0 12px rgba(195, 105, 255, 0.4);
}

.source-chip,
#report-source,
.report-source {
  color: rgba(255, 247, 255, 0.9) !important;
  background: rgba(54, 24, 93, 0.64) !important;
  border-color: rgba(232, 207, 255, 0.22) !important;
}

/* Settings page: make privacy controls feel like app settings cells */
.setting-list {
  gap: 13px !important;
}

.setting-item {
  min-height: 66px;
  padding: 14px 15px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.06), transparent 28%),
    rgba(15, 6, 38, 0.58) !important;
  border-color: rgba(232, 207, 255, 0.16) !important;
}

.setting-item span,
.setting-item strong {
  color: #fff7ff !important;
}

.setting-item .muted,
.setting-item small {
  color: rgba(236, 220, 255, 0.66) !important;
}

.setting-item input[type="checkbox"] {
  width: 46px !important;
  height: 26px !important;
  background: rgba(12, 5, 31, 0.72) !important;
  border-color: rgba(232, 207, 255, 0.28) !important;
  box-shadow: inset 0 2px 6px rgba(5, 2, 20, 0.28) !important;
}

.setting-item input[type="checkbox"]::after {
  top: 3px !important;
  left: 3px !important;
  width: 18px !important;
  height: 18px !important;
  background: #fff7ff !important;
  box-shadow: 0 4px 12px rgba(5, 2, 20, 0.28) !important;
}

.setting-item input[type="checkbox"]:checked {
  background: linear-gradient(145deg, #c369ff, #745cff) !important;
  border-color: rgba(232, 207, 255, 0.38) !important;
}

.setting-item input[type="checkbox"]:checked::after {
  transform: translateX(20px) !important;
}

.code,
.invite-code,
#invitation-code {
  color: #fff7ff !important;
  background:
    radial-gradient(circle at 16% 16%, rgba(255, 255, 255, 0.12), transparent 28%),
    linear-gradient(135deg, rgba(195, 105, 255, 0.76), rgba(116, 92, 255, 0.68)) !important;
  border-color: rgba(232, 207, 255, 0.28) !important;
  box-shadow: 0 18px 40px rgba(116, 92, 255, 0.24) !important;
}

/* Friends pages: make friend cards feel like connected planets */
#friends-list,
#overview-list,
#permission-list {
  gap: 13px !important;
}

#friends-list .list-item,
#overview-list .list-item,
#permission-list .list-item {
  position: relative;
  overflow: hidden;
  min-height: 76px;
  border-radius: 20px !important;
  padding: 14px 16px !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.07), transparent 28%),
    rgba(15, 6, 38, 0.58) !important;
  border-color: rgba(232, 207, 255, 0.16) !important;
}

#friends-list .list-item::after,
#overview-list .list-item::after,
#permission-list .list-item::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -26px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.22;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.78), transparent 18%),
    linear-gradient(145deg, rgba(126, 232, 255, 0.42), rgba(195, 105, 255, 0.5));
}

#friends-list .list-item strong,
#overview-list .list-item strong,
#permission-list .list-item strong {
  color: #fff7ff !important;
}

#friends-list .list-item .muted,
#overview-list .list-item .muted,
#permission-list .list-item .muted {
  color: rgba(236, 220, 255, 0.68) !important;
}

.friend-delete-btn,
button.danger,
.danger-button {
  color: #ffd6e1 !important;
  background: rgba(118, 35, 77, 0.52) !important;
  border-color: rgba(255, 156, 196, 0.3) !important;
  box-shadow: none !important;
}

/* Status and empty states */
.empty-state,
.list > .muted:only-child,
.list-placeholder {
  color: rgba(236, 220, 255, 0.7) !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.07), transparent 30%),
    rgba(15, 6, 38, 0.46) !important;
  border-color: rgba(232, 207, 255, 0.14) !important;
}

.empty-state::before,
.list > .muted:only-child::before {
  opacity: 0.62;
  box-shadow: 0 18px 42px rgba(116, 92, 255, 0.22) !important;
}

.status {
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.07), transparent 28%),
    rgba(15, 6, 38, 0.58) !important;
  border-color: rgba(232, 207, 255, 0.16) !important;
  color: rgba(255, 247, 255, 0.9) !important;
}

/* Top navigation final pass */
.app-nav .nav-link,
.app-nav button.secondary,
.lang-switcher,
.network-chip {
  border-radius: 999px !important;
  min-height: 34px !important;
}

.lang-switcher__btn.is-active {
  background: linear-gradient(135deg, #c369ff, #745cff) !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  .page-hero:not(.mood-planet-panel)::before,
  .page-hero:not(.mood-planet-panel)::after {
    opacity: 0.12 !important;
  }

  .setting-item {
    align-items: flex-start;
  }
}
/* =========================================================
   Mood Planet Phase 11 — App Feel & Microinteraction Polish
   Makes the whole app feel more responsive and less static.
   CSS-only refinement. No logic changes.
   ========================================================= */

body:not(.auth-page) .card,
body:not(.auth-page) .page-hero,
body:not(.auth-page) .mood-planet-stage,
body:not(.auth-page) .metric-card,
body:not(.auth-page) .list-item,
body:not(.auth-page) .setting-item,
body:not(.auth-page) .planet-event-card,
body:not(.auth-page) .planet-mission-card,
body:not(.auth-page) .planet-constellation-card,
body:not(.auth-page) .planet-nation-board {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    filter 180ms ease;
}

body:not(.auth-page) .card:hover,
body:not(.auth-page) .metric-card:hover,
body:not(.auth-page) .list-item:hover,
body:not(.auth-page) .setting-item:hover {
  border-color: rgba(232, 207, 255, 0.28) !important;
  box-shadow:
    0 28px 82px rgba(7, 2, 24, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.075) inset !important;
}

body:not(.auth-page) .mood-planet-panel:hover .mood-planet-stage {
  border-color: rgba(232, 207, 255, 0.32) !important;
  box-shadow:
    0 26px 82px rgba(5, 2, 20, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 44px rgba(195, 105, 255, 0.14) !important;
}

/* Buttons feel more like game controls */
body:not(.auth-page) button,
body:not(.auth-page) .nav-link,
body:not(.auth-page) .soft-link,
body:not(.auth-page) .lang-switcher__btn,
body:not(.auth-page) .planet-mission-card__button,
body:not(.auth-page) .planet-city-sheet__close {
  transition:
    transform 140ms ease,
    filter 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease,
    background 140ms ease,
    border-color 140ms ease;
}

body:not(.auth-page) button:hover,
body:not(.auth-page) .nav-link:hover,
body:not(.auth-page) .soft-link:hover,
body:not(.auth-page) .planet-mission-card__button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

body:not(.auth-page) button:active,
body:not(.auth-page) .nav-link:active,
body:not(.auth-page) .planet-mission-card__button:active {
  transform: translateY(0) scale(0.985);
}

/* Better keyboard accessibility without breaking the visual style */
body:not(.auth-page) :focus-visible {
  outline: 2px solid rgba(255, 216, 255, 0.72);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(195, 105, 255, 0.2) !important;
}

/* Make the top navigation read as a compact command bar */
body:not(.auth-page) .app-nav {
  padding: 5px;
  border-radius: 999px;
  background: rgba(10, 4, 31, 0.28);
  border: 1px solid rgba(232, 207, 255, 0.12);
}

body:not(.auth-page) .app-nav .nav-link,
body:not(.auth-page) .app-nav button.secondary,
body:not(.auth-page) .network-chip,
body:not(.auth-page) .lang-switcher {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body:not(.auth-page) .app-nav .nav-link[href*="index"],
body:not(.auth-page) .app-nav .nav-link.is-active {
  background: rgba(195, 105, 255, 0.16) !important;
  border-color: rgba(232, 207, 255, 0.26) !important;
}

/* Give forms a clearer control-panel rhythm */
body:not(.auth-page) .mood-form,
body:not(.auth-page) form {
  gap: 16px;
}

body:not(.auth-page) label::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 6px;
  border-radius: 50%;
  background: rgba(195, 105, 255, 0.54);
  box-shadow: 0 0 10px rgba(195, 105, 255, 0.3);
  vertical-align: middle;
}

body:not(.auth-page) .metric-card label::after,
body:not(.auth-page) .setting-item label::after {
  display: none;
}

/* Improve range slider visibility across browsers */
body:not(.auth-page) input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(126, 232, 255, 0.45), rgba(195, 105, 255, 0.72));
}

body:not(.auth-page) input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 247, 255, 0.88);
  background: linear-gradient(145deg, #ffd8ff, #c369ff);
  box-shadow: 0 0 20px rgba(195, 105, 255, 0.45);
}

/* Subtle loading/empty-state ambience */
body:not(.auth-page) .list.loading,
body:not(.auth-page) .empty-state,
body:not(.auth-page) .list-placeholder {
  position: relative;
  overflow: hidden;
}

body:not(.auth-page) .list.loading::after,
body:not(.auth-page) .empty-state::after,
body:not(.auth-page) .list-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: translateX(-120%);
  animation: mf-soft-scan 2.8s ease-in-out infinite;
}

@keyframes mf-soft-scan {
  0% {
    transform: translateX(-120%);
  }
  45%, 100% {
    transform: translateX(120%);
  }
}

/* Prevent the visual system from feeling too crowded on mobile */
@media (max-width: 768px) {
  body:not(.auth-page) .app-nav {
    width: 100%;
    border-radius: 20px;
    justify-content: flex-start;
  }

  body:not(.auth-page) .app-nav .nav-link,
  body:not(.auth-page) .app-nav button.secondary,
  body:not(.auth-page) .network-chip,
  body:not(.auth-page) .lang-switcher {
    flex: 0 0 auto;
  }

  body:not(.auth-page) .card:hover,
  body:not(.auth-page) .metric-card:hover,
  body:not(.auth-page) .list-item:hover,
  body:not(.auth-page) .setting-item:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.auth-page) .card,
  body:not(.auth-page) .page-hero,
  body:not(.auth-page) .mood-planet-stage,
  body:not(.auth-page) .metric-card,
  body:not(.auth-page) .list-item,
  body:not(.auth-page) .setting-item,
  body:not(.auth-page) button,
  body:not(.auth-page) .nav-link,
  body:not(.auth-page) .soft-link,
  body:not(.auth-page) .lang-switcher__btn,
  body:not(.auth-page) .planet-mission-card__button,
  body:not(.auth-page) .planet-city-sheet__close {
    transition: none !important;
    transform: none !important;
  }

  body:not(.auth-page) .list.loading::after,
  body:not(.auth-page) .empty-state::after,
  body:not(.auth-page) .list-placeholder::after {
    animation: none !important;
  }
}
/* =========================================================
   Mood Planet Phase 12 — Functional UI Refinement
   Makes core functions clearer: forms, states, reports, friends,
   settings, disabled/loading states, and mobile controls.
   CSS-only. No logic changes.
   ========================================================= */

/* Functional section rhythm */
body:not(.auth-page) .section-heading,
body:not(.auth-page) .section-toolbar {
  align-items: center !important;
  gap: 14px !important;
}

body:not(.auth-page) .section-heading h2,
body:not(.auth-page) .section-toolbar h2 {
  margin-bottom: 0 !important;
}

body:not(.auth-page) .card > .muted:first-child,
body:not(.auth-page) .card > p.muted:first-child {
  margin-top: 0 !important;
}

/* Make important functional cards read as panels, not plain boxes */
body:not(.auth-page) .mood-card,
body:not(.auth-page) .history-card,
body:not(.auth-page) .companion-card,
body:not(.auth-page) .report-card,
body:not(.auth-page) .settings-card,
body:not(.auth-page) .friends-card,
body:not(.auth-page) .invite-card {
  position: relative;
  overflow: hidden;
}

body:not(.auth-page) .mood-card::before,
body:not(.auth-page) .history-card::before,
body:not(.auth-page) .companion-card::before,
body:not(.auth-page) .report-card::before,
body:not(.auth-page) .settings-card::before,
body:not(.auth-page) .friends-card::before,
body:not(.auth-page) .invite-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 238, 255, 0.24), transparent);
}

/* More obvious form grouping */
body:not(.auth-page) .form-grid,
body:not(.auth-page) .metric-grid {
  position: relative;
  z-index: 1;
}

body:not(.auth-page) .form-grid > div,
body:not(.auth-page) .form-grid--two > div,
body:not(.auth-page) .field {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(232, 207, 255, 0.12);
}

body:not(.auth-page) .field label,
body:not(.auth-page) .form-grid label {
  margin-bottom: 9px !important;
}

/* Inputs: stronger readability and clearer affordance */
body:not(.auth-page) input,
body:not(.auth-page) select,
body:not(.auth-page) textarea {
  caret-color: #ffd8ff;
}

body:not(.auth-page) select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255, 247, 255, 0.86) 50%),
    linear-gradient(135deg, rgba(255, 247, 255, 0.86) 50%, transparent 50%),
    radial-gradient(circle at 92% 50%, rgba(195, 105, 255, 0.12), transparent 30%) !important;
  background-position:
    calc(100% - 20px) 52%,
    calc(100% - 14px) 52%,
    right center !important;
  background-size: 6px 6px, 6px 6px, 72px 100% !important;
  background-repeat: no-repeat !important;
  padding-right: 42px !important;
}

body:not(.auth-page) textarea {
  line-height: 1.65;
}

/* Save / sync feedback should feel intentional */
body:not(.auth-page) .form-feedback:not(:empty) {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  color: rgba(255, 247, 255, 0.88) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(232, 207, 255, 0.16) !important;
}

body:not(.auth-page) .form-feedback:not(:empty)::before {
  content: "✦";
  color: #ffd36e;
  text-shadow: 0 0 12px rgba(255, 211, 110, 0.42);
}

body:not(.auth-page) button:disabled,
body:not(.auth-page) .nav-link[aria-disabled="true"] {
  filter: grayscale(0.2) brightness(0.82) !important;
  opacity: 0.58 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Report controls and stats */
body:not(.auth-page) .stats-grid {
  gap: 12px !important;
}

body:not(.auth-page) .stats-grid > *,
body:not(.auth-page) .stat-card,
body:not(.auth-page) [class*="stat"]:not(.status):not(.stats-grid) {
  border-radius: 18px;
}

body:not(.auth-page) .report-controls,
body:not(.auth-page) .report-filter,
body:not(.auth-page) .report-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(232, 207, 255, 0.12);
}

body:not(.auth-page) #report-source:not(:empty),
body:not(.auth-page) .source-chip:not(:empty) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

body:not(.auth-page) #report-source:not(:empty)::before,
body:not(.auth-page) .source-chip:not(:empty)::before {
  content: "●";
  font-size: 9px;
  color: #7ee8ff;
  text-shadow: 0 0 12px rgba(126, 232, 255, 0.5);
}

/* Settings: stronger toggle layout */
body:not(.auth-page) .setting-item {
  position: relative;
}

body:not(.auth-page) .setting-item:hover {
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.075), transparent 28%),
    rgba(20, 8, 49, 0.66) !important;
}

body:not(.auth-page) .setting-item input[type="checkbox"] {
  flex: 0 0 auto;
}

body:not(.auth-page) .setting-item input[type="checkbox"]:focus-visible {
  outline-offset: 4px;
}

/* Friends: clearer action rows */
body:not(.auth-page) #friends-list .toolbar,
body:not(.auth-page) #overview-list .toolbar,
body:not(.auth-page) #permission-list .toolbar,
body:not(.auth-page) .friend-actions {
  position: relative;
  z-index: 1;
}

body:not(.auth-page) #friends-list .list-item button,
body:not(.auth-page) #overview-list .list-item button,
body:not(.auth-page) #permission-list .list-item button {
  min-height: 36px;
  padding: 7px 11px;
  font-size: 13px;
  border-radius: 999px;
}

body:not(.auth-page) .friend-delete-btn:hover,
body:not(.auth-page) button.danger:hover,
body:not(.auth-page) .danger-button:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 12px 26px rgba(118, 35, 77, 0.22) !important;
}

/* Empty/loading cards become more helpful */
body:not(.auth-page) .empty-state,
body:not(.auth-page) .list-placeholder {
  min-height: 120px;
  display: grid;
  place-items: center;
  text-align: center;
  border-style: solid !important;
}

body:not(.auth-page) .list.loading {
  min-height: 86px;
}

body:not(.auth-page) .list.loading .list-placeholder {
  animation: mf-empty-pulse 2.4s ease-in-out infinite;
}

@keyframes mf-empty-pulse {
  0%, 100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}

/* App-wide scrollbars for desktop */
@supports selector(::-webkit-scrollbar) {
  body:not(.auth-page) ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  body:not(.auth-page) ::-webkit-scrollbar-track {
    background: rgba(10, 4, 31, 0.36);
    border-radius: 999px;
  }

  body:not(.auth-page) ::-webkit-scrollbar-thumb {
    background: rgba(195, 105, 255, 0.42);
    border-radius: 999px;
    border: 2px solid rgba(10, 4, 31, 0.36);
  }

  body:not(.auth-page) ::-webkit-scrollbar-thumb:hover {
    background: rgba(195, 105, 255, 0.62);
  }
}

/* Mobile: stronger functional spacing */
@media (max-width: 768px) {
  body:not(.auth-page) .form-grid > div,
  body:not(.auth-page) .form-grid--two > div,
  body:not(.auth-page) .field {
    padding: 10px;
  }

  body:not(.auth-page) .report-controls,
  body:not(.auth-page) .report-filter,
  body:not(.auth-page) .report-toolbar {
    align-items: stretch;
  }

  body:not(.auth-page) .report-controls button,
  body:not(.auth-page) .report-filter button,
  body:not(.auth-page) .report-toolbar button,
  body:not(.auth-page) .report-controls select,
  body:not(.auth-page) .report-filter select,
  body:not(.auth-page) .report-toolbar select {
    width: 100%;
  }

  body:not(.auth-page) #friends-list .list-item .toolbar,
  body:not(.auth-page) #overview-list .list-item .toolbar,
  body:not(.auth-page) #permission-list .list-item .toolbar {
    gap: 8px;
  }

  body:not(.auth-page) #friends-list .list-item button,
  body:not(.auth-page) #overview-list .list-item button,
  body:not(.auth-page) #permission-list .list-item button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.auth-page) .list.loading .list-placeholder {
    animation: none !important;
  }
}
/* =========================================================
   Mood Planet Phase 13 — Visual Stability & Density Pass
   Fixes over-stacking from earlier visual layers, reduces clutter,
   and makes the app feel cleaner while preserving the purple theme.
   CSS-only. No logic changes.
   ========================================================= */

/* Prevent accumulated pseudo-elements from making panels too noisy */
body:not(.auth-page) .card::before,
body:not(.auth-page) .card::after,
body:not(.auth-page) .page-hero::before,
body:not(.auth-page) .page-hero::after {
  pointer-events: none !important;
}

body:not(.auth-page) .card:not(.mood-planet-panel)::before {
  opacity: 0.22 !important;
}

body:not(.auth-page) .card:not(.mood-planet-panel)::after {
  opacity: 0.1 !important;
}

/* Keep the Mood Planet as the main visual focus */
.mood-planet-panel {
  margin-top: 18px !important;
  margin-bottom: 22px !important;
  box-shadow:
    0 30px 90px rgba(5, 2, 20, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.07) inset !important;
}

.mood-planet-copy,
.mood-planet-stage,
.planet-event-card,
.planet-mission-card,
.planet-constellation-card,
.planet-nation-board,
.planet-stats-strip,
.mood-planet-footer {
  position: relative;
  z-index: 2;
}

/* Make dynamic Mood Planet sub-cards line up as a clean dashboard stack */
.planet-stats-strip,
.planet-event-card,
.planet-mission-card,
.planet-constellation-card,
.planet-nation-board {
  max-width: 100% !important;
}

.planet-stats-strip {
  align-items: center;
}

.planet-stats-strip span,
.planet-stats-chip {
  min-height: 34px !important;
  padding: 7px 12px !important;
}

.planet-event-card,
.planet-mission-card,
.planet-constellation-card,
.planet-nation-board {
  border-radius: 20px !important;
}

/* Reduce accidental huge empty gaps if a dynamic card has short text */
.planet-event-card,
.planet-mission-card,
.planet-constellation-card {
  min-height: unset !important;
}

.planet-mission-card {
  align-items: center !important;
}

.planet-mission-card__button {
  justify-self: end;
}

/* Make the form below the planet less heavy than the planet itself */
.dashboard-grid {
  gap: 18px !important;
}

.mood-card,
.companion-card,
.history-card {
  box-shadow:
    0 20px 58px rgba(5, 2, 20, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.045) inset !important;
}

.mood-card:hover,
.companion-card:hover,
.history-card:hover {
  transform: none !important;
}

/* Keep labels readable without turning every label into a decorative object */
body:not(.auth-page) label::after {
  opacity: 0.55;
}

body:not(.auth-page) .mood-card label::after,
body:not(.auth-page) .report-controls label::after,
body:not(.auth-page) .setting-item label::after {
  display: none !important;
}

/* Make dropdowns and date inputs less visually jarring */
body:not(.auth-page) input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.75);
  cursor: pointer;
}

body:not(.auth-page) select,
body:not(.auth-page) input[type="date"] {
  cursor: pointer;
}

/* History list should look like city logs, not raw cards */
#history-list .list-item {
  display: grid;
  gap: 5px;
  padding: 13px 14px 13px 18px !important;
}

#history-list .list-item::before {
  left: 0 !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 5px !important;
}

/* Friend and settings rows: avoid decorative planet overlapping action buttons */
#friends-list .list-item,
#overview-list .list-item,
#permission-list .list-item,
.setting-item {
  isolation: isolate;
}

#friends-list .list-item > *,
#overview-list .list-item > *,
#permission-list .list-item > *,
.setting-item > * {
  position: relative;
  z-index: 1;
}

/* Report output: avoid double bullets and overly dense list visuals */
#report-suggestions li::before,
.report-suggestions li::before,
#report-sections li::before,
.report-suggestion::before {
  line-height: 1;
}

#report-suggestions li,
.report-suggestions li,
#report-sections li,
.report-suggestion {
  min-height: 48px;
}

/* Header command bar: prevent wrapping from looking broken */
body:not(.auth-page) .app-nav {
  overflow-x: auto;
  scrollbar-width: none;
}

body:not(.auth-page) .app-nav::-webkit-scrollbar {
  display: none;
}

body:not(.auth-page) .app-nav .nav-link,
body:not(.auth-page) .app-nav button.secondary,
body:not(.auth-page) .network-chip,
body:not(.auth-page) .lang-switcher {
  flex-shrink: 0;
}

/* Overall page width and spacing refinement */
body:not(.auth-page) .app-main,
body:not(.auth-page) main {
  width: min(1180px, calc(100% - 28px)) !important;
}

body:not(.auth-page) .card {
  padding: clamp(16px, 2.2vw, 24px) !important;
}

/* Mobile cleanup: keep the game system readable */
@media (max-width: 900px) {
  .mood-planet-panel {
    margin-top: 12px !important;
  }

  .planet-mission-card,
  .planet-constellation-card,
  .planet-nation-board,
  .planet-event-card {
    padding: 13px !important;
  }
}

@media (max-width: 640px) {
  body:not(.auth-page) .app-main,
  body:not(.auth-page) main {
    width: min(100% - 18px, 1180px) !important;
  }

  body:not(.auth-page) .card {
    padding: 14px !important;
  }

  .mood-planet-panel {
    padding: 14px !important;
  }

  .planet-stats-strip {
    gap: 7px !important;
  }

  .planet-stats-strip span,
  .planet-stats-chip,
  .planet-legend span {
    font-size: 11px !important;
  }

  .planet-mission-card,
  .planet-constellation-card,
  .planet-nation-board,
  .planet-event-card {
    border-radius: 16px !important;
  }

  .planet-city-sheet {
    max-height: min(72vh, 520px);
    overflow: auto;
  }
}
/* =========================================================
   Mood Planet Phase 14 — Mobile & Usability Stabilization
   Finalizes the core functional UI so the app is usable on web,
   iOS, and Android without cramped controls or broken panels.
   CSS-only. No logic changes.
   ========================================================= */

/* Avoid accidental horizontal scrolling from decorative layers */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body:not(.auth-page) .app-main,
body:not(.auth-page) main {
  box-sizing: border-box;
}

/* Make the Mood Planet command center behave well on all widths */
.mood-planet-panel {
  min-width: 0 !important;
}

.mood-planet-copy,
.mood-planet-stage,
.planet-event-card,
.planet-mission-card,
.planet-constellation-card,
.planet-nation-board,
.planet-stats-strip,
.mood-planet-footer {
  min-width: 0 !important;
}

.mood-planet-copy p,
.planet-event-card p,
.planet-mission-card p,
.planet-constellation-note,
.planet-nation-card p,
.planet-city-diary p,
.planet-city-action,
.planet-hint {
  overflow-wrap: anywhere;
}

/* Keep the planet stage prominent, but not oversized on smaller laptops */
@media (min-width: 981px) and (max-height: 820px) {
  .mood-planet-stage,
  #mood-planet-canvas {
    min-height: 420px !important;
    height: 460px !important;
  }
}

@media (min-width: 981px) and (max-height: 720px) {
  .mood-planet-stage,
  #mood-planet-canvas {
    min-height: 360px !important;
    height: 390px !important;
  }
}

/* Make dynamic planet widgets read as one stack instead of random cards */
.planet-event-card + .planet-mission-card,
.planet-mission-card + .planet-constellation-card,
.planet-constellation-card + .planet-nation-board,
.planet-event-card + .planet-constellation-card,
.planet-mission-card + .planet-nation-board {
  margin-top: -4px !important;
}

.planet-event-card,
.planet-mission-card,
.planet-constellation-card,
.planet-nation-board {
  overflow: hidden;
}

.planet-event-card::before,
.planet-mission-card::before,
.planet-constellation-card::before,
.planet-nation-board::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 238, 255, 0.22), transparent);
}

/* Ensure mission button and nation board never dominate the planet */
.planet-mission-card__button {
  max-width: 260px;
}

.planet-nation-grid {
  align-items: stretch;
}

.planet-nation-card {
  min-width: 0;
}

/* Better city sheet usability */
.planet-city-sheet {
  max-height: min(72vh, 560px);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(195, 105, 255, 0.45) rgba(10, 4, 31, 0.25);
}

.planet-city-sheet::-webkit-scrollbar {
  width: 8px;
}

.planet-city-sheet::-webkit-scrollbar-track {
  background: rgba(10, 4, 31, 0.24);
  border-radius: 999px;
}

.planet-city-sheet::-webkit-scrollbar-thumb {
  background: rgba(195, 105, 255, 0.45);
  border-radius: 999px;
}

.planet-city-sheet__close {
  z-index: 3;
}

/* Core app controls: keep touch targets consistent */
body:not(.auth-page) button,
body:not(.auth-page) input,
body:not(.auth-page) select,
body:not(.auth-page) textarea,
body:not(.auth-page) .nav-link,
body:not(.auth-page) .lang-switcher__btn {
  min-height: 44px;
}

body:not(.auth-page) .chip,
body:not(.auth-page) .network-chip,
body:not(.auth-page) .source-chip,
body:not(.auth-page) .planet-stats-chip,
body:not(.auth-page) .planet-stats-strip span,
body:not(.auth-page) .planet-level-pill,
body:not(.auth-page) .planet-legend span {
  min-height: 32px;
}

/* Prevent date/select controls from looking broken in dark mode */
body:not(.auth-page) input[type="date"] {
  color-scheme: dark;
}

body:not(.auth-page) select option {
  color: #201045;
  background: #f8efff;
}

/* Action states: success/warning/danger still visible in purple theme */
body:not(.auth-page) .status.success,
body:not(.auth-page) .success,
body:not(.auth-page) .network-chip.online {
  color: #d9ffec !important;
  background: rgba(43, 127, 84, 0.24) !important;
  border-color: rgba(129, 236, 176, 0.28) !important;
}

body:not(.auth-page) .status.warning,
body:not(.auth-page) .warning {
  color: #fff0c7 !important;
  background: rgba(148, 99, 19, 0.24) !important;
  border-color: rgba(255, 211, 110, 0.28) !important;
}

body:not(.auth-page) .status.error,
body:not(.auth-page) .error,
body:not(.auth-page) .network-chip.offline {
  color: #ffd6e1 !important;
  background: rgba(182, 60, 79, 0.24) !important;
  border-color: rgba(255, 156, 196, 0.28) !important;
}

/* Header: keep command bar functional when many nav items exist */
body:not(.auth-page) .app-toolbar {
  align-items: center;
}

body:not(.auth-page) .app-nav {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body:not(.auth-page) .brand-lockup {
  min-width: min(240px, 100%);
}

/* Report page: keep long AI output readable */
body:not(.auth-page) #report-opening,
body:not(.auth-page) .report-opening,
body:not(.auth-page) #report-sections,
body:not(.auth-page) #report-suggestions {
  max-width: 100%;
}

body:not(.auth-page) #report-opening,
body:not(.auth-page) .report-opening {
  white-space: pre-wrap;
}

/* Friends and settings: prevent action buttons from being covered by decorative planets */
body:not(.auth-page) #friends-list .list-item::after,
body:not(.auth-page) #overview-list .list-item::after,
body:not(.auth-page) #permission-list .list-item::after {
  z-index: 0;
}

body:not(.auth-page) #friends-list .list-item .toolbar,
body:not(.auth-page) #overview-list .list-item .toolbar,
body:not(.auth-page) #permission-list .list-item .toolbar,
body:not(.auth-page) .setting-item > * {
  z-index: 2;
}

/* Dense mobile layout */
@media (max-width: 760px) {
  body:not(.auth-page) header,
  body:not(.auth-page) .app-header {
    padding-left: max(12px, calc(12px + var(--safe-left))) !important;
    padding-right: max(12px, calc(12px + var(--safe-right))) !important;
  }

  body:not(.auth-page) .app-toolbar {
    gap: 10px;
  }

  body:not(.auth-page) .brand-lockup {
    width: 100%;
  }

  body:not(.auth-page) .brand-copy h1,
  body:not(.auth-page) .toolbar h1 {
    font-size: 30px !important;
  }

  body:not(.auth-page) .app-nav {
    display: flex;
    flex-wrap: nowrap;
    padding: 6px;
    gap: 6px;
  }

  body:not(.auth-page) .app-nav .nav-link,
  body:not(.auth-page) .app-nav button.secondary,
  body:not(.auth-page) .network-chip,
  body:not(.auth-page) .lang-switcher {
    font-size: 12px;
    min-height: 34px;
  }

  .mood-planet-copy p {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  .planet-event-card,
  .planet-mission-card,
  .planet-constellation-card,
  .planet-nation-board,
  .planet-stats-strip,
  .mood-planet-footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .planet-mission-card {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .planet-mission-card__button {
    grid-column: 1 / -1;
    max-width: none;
    width: 100%;
  }

  .planet-constellation-metrics,
  .planet-nation-grid,
  .metric-grid,
  .stats-grid,
  .form-grid--two {
    grid-template-columns: 1fr !important;
  }

  body:not(.auth-page) .field,
  body:not(.auth-page) .form-grid > div,
  body:not(.auth-page) .form-grid--two > div {
    padding: 10px !important;
  }
}

@media (max-width: 420px) {
  body:not(.auth-page) .app-main,
  body:not(.auth-page) main {
    width: min(100% - 14px, 1180px) !important;
  }

  .mood-planet-copy h2 {
    font-size: 28px !important;
  }

  .planet-stats-strip,
  .planet-legend,
  .planet-constellation-metrics {
    gap: 6px !important;
  }

  .planet-stats-strip span,
  .planet-legend span,
  .planet-constellation-metrics span {
    width: 100%;
    justify-content: center;
  }
}
/* =========================================================
   Mood Planet Phase 15 — Final UI Consistency Cleanup
   Reduces accumulated visual noise from previous layers and makes
   the current purple game-app system feel cleaner and more stable.
   CSS-only. No logic changes.
   ========================================================= */

/* Global density cleanup */
body:not(.auth-page) .card,
body:not(.auth-page) .page-hero,
body:not(.auth-page) .status,
body:not(.auth-page) .list-item,
body:not(.auth-page) .setting-item,
body:not(.auth-page) .metric-card {
  border-width: 1px !important;
}

body:not(.auth-page) .card:not(.mood-planet-panel) {
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

/* Keep decorative planets from competing with real Mood Planet */
body:not(.auth-page) .hero-planet-card:not(.mood-planet-stage),
body:not(.auth-page) .companion-orbit,
body:not(.auth-page) .mini-galaxy {
  opacity: 0.82;
}

body:not(.auth-page) .companion-card .hero-planet-card {
  min-height: 160px !important;
  opacity: 0.82;
}

body:not(.auth-page) .companion-card .mini-galaxy,
body:not(.auth-page) .companion-card .companion-orbit {
  transform: scale(0.9);
}

/* Make Mood Planet hierarchy clearer: planet first, systems second */
.mood-planet-panel > .mood-planet-copy {
  order: 1;
}

.mood-planet-panel > .mood-planet-stage {
  order: 2;
}

.mood-planet-panel > .planet-stats-strip {
  order: 3;
}

.mood-planet-panel > .planet-event-card {
  order: 4;
}

.mood-planet-panel > .planet-mission-card {
  order: 5;
}

.mood-planet-panel > .planet-constellation-card {
  order: 6;
}

.mood-planet-panel > .planet-nation-board {
  order: 7;
}

.mood-planet-panel > .mood-planet-footer {
  order: 8;
}

/* Make system cards less tall and easier to scan */
.planet-event-card,
.planet-mission-card,
.planet-constellation-card,
.planet-nation-board {
  padding: 13px 14px !important;
  gap: 10px !important;
}

.planet-event-card h3,
.planet-mission-card h3,
.planet-constellation-card h3,
.planet-nation-board h3,
.planet-mission-card__body h3,
.planet-constellation-card__head h3,
.planet-nation-board__head h3 {
  font-size: 16px !important;
  line-height: 1.25 !important;
}

.planet-event-card p,
.planet-mission-card p,
.planet-constellation-note,
.planet-nation-card p,
.planet-mission-card__body p {
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.planet-event-card__kicker,
.planet-mission-card__kicker,
.planet-constellation-card__kicker,
.planet-nation-board__kicker {
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
}

/* Make the daily mission/action button feel important but not oversized */
.planet-mission-card__button {
  min-height: 38px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
}

/* Report and generated content readability */
body:not(.auth-page) #report-opening,
body:not(.auth-page) .report-opening,
body:not(.auth-page) #report-sections,
body:not(.auth-page) #report-suggestions,
body:not(.auth-page) .report-suggestions {
  line-height: 1.68 !important;
}

body:not(.auth-page) #report-suggestions li,
body:not(.auth-page) .report-suggestions li,
body:not(.auth-page) #report-sections li,
body:not(.auth-page) .report-suggestion {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* Controls: make rows cleaner and less boxed-in */
body:not(.auth-page) .form-grid > div,
body:not(.auth-page) .form-grid--two > div,
body:not(.auth-page) .field {
  background: rgba(255, 255, 255, 0.028) !important;
  border-color: rgba(232, 207, 255, 0.1) !important;
}

body:not(.auth-page) .mood-card input,
body:not(.auth-page) .mood-card select,
body:not(.auth-page) .mood-card textarea {
  background: rgba(10, 4, 31, 0.58) !important;
}

/* Make top app nav less bulky after many pages/features */
body:not(.auth-page) .app-nav {
  padding: 4px !important;
  gap: 5px !important;
}

body:not(.auth-page) .app-nav .nav-link,
body:not(.auth-page) .app-nav button.secondary,
body:not(.auth-page) .network-chip,
body:not(.auth-page) .lang-switcher {
  min-height: 32px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Friend/settings/report pages: avoid excessive decorative overlap */
#friends-list .list-item::after,
#overview-list .list-item::after,
#permission-list .list-item::after,
.page-hero:not(.mood-planet-panel)::before,
.page-hero:not(.mood-planet-panel)::after {
  opacity: 0.14 !important;
}

/* Better visual grouping for lists */
body:not(.auth-page) .list {
  gap: 10px !important;
}

body:not(.auth-page) .list-item {
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

body:not(.auth-page) .list-item:hover {
  transform: translateY(-1px);
}

/* Avoid washed-out disabled text */
body:not(.auth-page) button:disabled,
body:not(.auth-page) input:disabled,
body:not(.auth-page) select:disabled,
body:not(.auth-page) textarea:disabled {
  opacity: 0.58 !important;
}

/* Tighten mobile information density without harming touch targets */
@media (max-width: 760px) {
  .planet-event-card,
  .planet-mission-card,
  .planet-constellation-card,
  .planet-nation-board {
    padding: 12px !important;
  }

  .planet-mission-card__icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
  }

  .planet-stats-strip span,
  .planet-stats-chip,
  .planet-legend span,
  .planet-constellation-metrics span {
    min-height: 30px !important;
  }

  body:not(.auth-page) .app-nav {
    padding: 5px !important;
  }

  body:not(.auth-page) .app-nav .nav-link,
  body:not(.auth-page) .app-nav button.secondary,
  body:not(.auth-page) .network-chip,
  body:not(.auth-page) .lang-switcher {
    min-height: 32px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 420px) {
  .planet-event-card h3,
  .planet-mission-card h3,
  .planet-constellation-card h3,
  .planet-nation-board h3,
  .planet-mission-card__body h3,
  .planet-constellation-card__head h3,
  .planet-nation-board__head h3 {
    font-size: 15px !important;
  }

  .mood-planet-stage,
  #mood-planet-canvas {
    height: 320px !important;
    min-height: 300px !important;
  }
}
/* =========================================================
   Mood Planet Phase 16 — Desktop QA Cleanup
   Based on current screenshots: remove stray dots, unify nav,
   calm down pale hero media, and make reports/settings/friends cleaner.
   CSS-only. No logic changes.
   ========================================================= */

/* 1) Remove stray white dots caused by over-broad decorative label/status rules */
body:not(.auth-page) label::after,
body:not(.auth-page) .field label::after,
body:not(.auth-page) .form-grid label::after,
body:not(.auth-page) .report-controls label::after,
body:not(.auth-page) .setting-item label::after,
body:not(.auth-page) .mood-card label::after {
  display: none !important;
  content: none !important;
}

body:not(.auth-page) .form-feedback:empty,
body:not(.auth-page) .status:empty,
body:not(.auth-page) .list-placeholder:empty,
body:not(.auth-page) #save-message:empty,
body:not(.auth-page) #sync-status:empty,
body:not(.auth-page) #settings-message:empty,
body:not(.auth-page) #friends-message:empty,
body:not(.auth-page) #add-friend-message:empty,
body:not(.auth-page) #report-status:empty {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

/* 2) Make top navigation consistent on every page */
body:not(.auth-page) .app-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: rgba(10, 4, 31, 0.34) !important;
  border: 1px solid rgba(232, 207, 255, 0.14) !important;
  box-shadow: 0 18px 46px rgba(5, 2, 20, 0.22) !important;
  overflow-x: auto !important;
}

body:not(.auth-page) .app-nav .nav-link,
body:not(.auth-page) .app-nav button.secondary,
body:not(.auth-page) .app-nav .network-chip,
body:not(.auth-page) .app-nav .lang-switcher,
body:not(.auth-page) .network-chip,
body:not(.auth-page) .lang-switcher {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-height: 38px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  color: rgba(255, 247, 255, 0.92) !important;
  background: rgba(47, 19, 86, 0.66) !important;
  border: 1px solid rgba(232, 207, 255, 0.24) !important;
  box-shadow: 0 10px 24px rgba(5, 2, 18, 0.18) !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

body:not(.auth-page) .app-nav .nav-link:hover,
body:not(.auth-page) .app-nav button.secondary:hover {
  background: rgba(71, 27, 122, 0.76) !important;
  border-color: rgba(232, 207, 255, 0.34) !important;
  transform: translateY(-1px);
}

body:not(.auth-page) .app-nav .nav-link[href*="report"],
body:not(.auth-page) .app-nav .nav-link.is-active {
  background: linear-gradient(135deg, rgba(195, 105, 255, 0.9), rgba(116, 92, 255, 0.86)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* 3) Pale page hero image blocks were too gray; make them part of the purple world */
body:not(.auth-page) .hero-planet-card,
body:not(.auth-page) .hero-planet-media,
body:not(.auth-page) .report-planet-media,
body:not(.auth-page) .friends-planet-media,
body:not(.auth-page) .settings-planet-media {
  background:
    radial-gradient(circle at 72% 46%, rgba(195, 105, 255, 0.2), transparent 32%),
    radial-gradient(circle at 36% 40%, rgba(126, 232, 255, 0.12), transparent 32%),
    rgba(15, 6, 38, 0.42) !important;
  border-color: rgba(232, 207, 255, 0.18) !important;
  opacity: 1 !important;
}

body:not(.auth-page) .hero-image-fallback {
  opacity: 0.42 !important;
  filter: saturate(1.22) brightness(0.76) contrast(1.05) !important;
  mix-blend-mode: screen;
}

body:not(.auth-page) .page-hero:not(.mood-planet-panel)::before {
  opacity: 0.18 !important;
}

body:not(.auth-page) .page-hero:not(.mood-planet-panel)::after {
  opacity: 0.13 !important;
}

/* 4) Report page: remove the huge empty poster feeling and make suggestions readable */
body:not(.auth-page) .report-suggestions,
body:not(.auth-page) #report-suggestions,
body:not(.auth-page) #report-sections {
  display: grid !important;
  gap: 12px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body:not(.auth-page) .report-suggestions ul,
body:not(.auth-page) #report-suggestions ul,
body:not(.auth-page) #report-sections ul {
  display: grid !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

body:not(.auth-page) #report-suggestions li,
body:not(.auth-page) .report-suggestions li,
body:not(.auth-page) #report-sections li,
body:not(.auth-page) .report-suggestion {
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  text-align: left !important;
  padding: 14px 16px 14px 42px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.07), transparent 28%),
    rgba(15, 6, 38, 0.58) !important;
  border: 1px solid rgba(232, 207, 255, 0.16) !important;
  box-shadow: 0 14px 30px rgba(5, 2, 20, 0.18) !important;
}

body:not(.auth-page) .report-opening,
body:not(.auth-page) #report-opening {
  text-align: left !important;
  max-width: none !important;
}

body:not(.auth-page) .report-card {
  overflow: hidden;
}

body:not(.auth-page) .report-card .empty-state,
body:not(.auth-page) .report-suggestions.empty-state,
body:not(.auth-page) #report-suggestions.empty-state {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* 5) Settings and friends: clean odd empty feedback row under invite/add panels */
body:not(.auth-page) .invite-card .form-feedback:empty,
body:not(.auth-page) .friends-card .form-feedback:empty,
body:not(.auth-page) .settings-card .form-feedback:empty,
body:not(.auth-page) .invite-card .status:empty,
body:not(.auth-page) .friends-card .status:empty,
body:not(.auth-page) .settings-card .status:empty {
  display: none !important;
}

body:not(.auth-page) .invite-card,
body:not(.auth-page) .friends-card,
body:not(.auth-page) .settings-card {
  overflow: hidden;
}

body:not(.auth-page) .invite-card .row,
body:not(.auth-page) .friends-card .row,
body:not(.auth-page) .settings-card .row {
  align-items: center !important;
}

/* 6) Desktop spacing cleanup */
@media (min-width: 900px) {
  body:not(.auth-page) .page-hero:not(.mood-planet-panel) {
    padding: 28px 32px !important;
  }

  body:not(.auth-page) .app-main,
  body:not(.auth-page) main {
    margin-top: 24px !important;
  }

  body:not(.auth-page) .card {
    margin-bottom: 18px !important;
  }
}
/* =========================================================
   Mood Planet Phase 17 — Desktop QA Pass 2
   Fixes remaining desktop issues from screenshots: secondary-page
   nav buttons, oversized empty control shells, gray hero media,
   and overly heavy decorative elements. CSS-only. No logic changes.
   ========================================================= */

/* 1) Force all top navigation links/buttons into the same pill style */
body:not(.auth-page) header .row.app-nav,
body:not(.auth-page) header .app-nav,
body:not(.auth-page) .app-header .row.app-nav,
body:not(.auth-page) .app-header .app-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: rgba(10, 4, 31, 0.34) !important;
  border: 1px solid rgba(232, 207, 255, 0.14) !important;
  box-shadow: 0 18px 46px rgba(5, 2, 20, 0.22) !important;
}

body:not(.auth-page) header .app-nav > a,
body:not(.auth-page) header .app-nav > button,
body:not(.auth-page) header .app-nav > span,
body:not(.auth-page) .app-header .app-nav > a,
body:not(.auth-page) .app-header .app-nav > button,
body:not(.auth-page) .app-header .app-nav > span,
body:not(.auth-page) .app-header .nav-link,
body:not(.auth-page) .app-header button.secondary,
body:not(.auth-page) .app-header .network-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: auto !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  color: rgba(255, 247, 255, 0.92) !important;
  background: rgba(47, 19, 86, 0.66) !important;
  border: 1px solid rgba(232, 207, 255, 0.24) !important;
  box-shadow: 0 10px 24px rgba(5, 2, 18, 0.18) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body:not(.auth-page) .app-header .nav-link[href*="report"],
body:not(.auth-page) .app-header .nav-link.is-active,
body:not(.auth-page) .app-header .lang-switcher__btn.is-active {
  background: linear-gradient(135deg, rgba(195, 105, 255, 0.94), rgba(116, 92, 255, 0.9)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

body:not(.auth-page) .app-header .lang-switcher {
  height: 46px !important;
  min-height: 46px !important;
  padding: 4px !important;
  border-radius: 999px !important;
  background: rgba(47, 19, 86, 0.66) !important;
}

body:not(.auth-page) .app-header .lang-switcher__btn {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* 2) Tone down secondary hero illustration cards so they do not look like gray placeholders */
body:not(.auth-page) .page-hero:not(.mood-planet-panel) .hero-planet-card,
body:not(.auth-page) .page-hero:not(.mood-planet-panel) .hero-planet-media,
body:not(.auth-page) .page-hero:not(.mood-planet-panel) .report-planet-media,
body:not(.auth-page) .page-hero:not(.mood-planet-panel) .friends-planet-media,
body:not(.auth-page) .page-hero:not(.mood-planet-panel) .settings-planet-media {
  background:
    radial-gradient(circle at 70% 46%, rgba(195, 105, 255, 0.28), transparent 34%),
    radial-gradient(circle at 35% 38%, rgba(126, 232, 255, 0.16), transparent 34%),
    rgba(11, 4, 31, 0.58) !important;
  border-color: rgba(232, 207, 255, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 38px rgba(5, 2, 20, 0.22) !important;
}

body:not(.auth-page) .page-hero:not(.mood-planet-panel) .hero-image-fallback {
  opacity: 0.55 !important;
  filter: saturate(1.35) brightness(0.82) contrast(1.08) !important;
}

/* 3) Report controls: make range selector and update button feel like one toolbar */
body:not(.auth-page) .report-controls,
body:not(.auth-page) .report-filter,
body:not(.auth-page) .report-toolbar,
body:not(.auth-page) .report-card .form-grid,
body:not(.auth-page) .report-card .form-grid--two {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) auto !important;
  align-items: end !important;
  gap: 14px !important;
}

body:not(.auth-page) .report-card .form-grid > div,
body:not(.auth-page) .report-card .form-grid--two > div,
body:not(.auth-page) .report-controls > div,
body:not(.auth-page) .report-filter > div,
body:not(.auth-page) .report-toolbar > div {
  min-height: auto !important;
  padding: 12px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(232, 207, 255, 0.12) !important;
}

body:not(.auth-page) .report-card button,
body:not(.auth-page) .report-controls button,
body:not(.auth-page) .report-filter button,
body:not(.auth-page) .report-toolbar button {
  min-width: 126px !important;
  height: 52px !important;
  align-self: end !important;
}

/* 4) Report output: remove poster-like empty box feel and align suggestions as clean cards */
body:not(.auth-page) .report-suggestions,
body:not(.auth-page) #report-suggestions {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body:not(.auth-page) #report-suggestions li,
body:not(.auth-page) .report-suggestions li,
body:not(.auth-page) .report-suggestion {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* 5) Friend/settings panels: make action buttons and rows align better */
body:not(.auth-page) .invite-card .row,
body:not(.auth-page) .friends-card .row,
body:not(.auth-page) .settings-card .row,
body:not(.auth-page) #friends-list .list-item .toolbar,
body:not(.auth-page) #overview-list .list-item .toolbar,
body:not(.auth-page) #permission-list .list-item .toolbar {
  align-items: center !important;
}

body:not(.auth-page) #friends-list .list-item,
body:not(.auth-page) #overview-list .list-item,
body:not(.auth-page) #permission-list .list-item {
  padding-right: 18px !important;
}

body:not(.auth-page) #friends-list .list-item::after,
body:not(.auth-page) #overview-list .list-item::after,
body:not(.auth-page) #permission-list .list-item::after {
  opacity: 0.12 !important;
}

/* 6) Clean up the large page top spacing and make sections look intentional */
@media (min-width: 900px) {
  body:not(.auth-page) .app-main,
  body:not(.auth-page) main {
    margin-top: 20px !important;
  }

  body:not(.auth-page) .page-hero:not(.mood-planet-panel) {
    margin-bottom: 20px !important;
  }

  body:not(.auth-page) .card {
    margin-bottom: 18px !important;
  }
}

@media (max-width: 760px) {
  body:not(.auth-page) .report-controls,
  body:not(.auth-page) .report-filter,
  body:not(.auth-page) .report-toolbar,
  body:not(.auth-page) .report-card .form-grid,
  body:not(.auth-page) .report-card .form-grid--two {
    grid-template-columns: 1fr !important;
  }

  body:not(.auth-page) .report-card button,
  body:not(.auth-page) .report-controls button,
  body:not(.auth-page) .report-filter button,
  body:not(.auth-page) .report-toolbar button {
    width: 100% !important;
  }
}
/* =========================================================
   Mood Planet Phase 18 — Screenshot QA Fixes
   Focus: Report / Settings / Friends desktop cleanup.
   Remove gray placeholder hero art, compact report controls,
   tighten settings rows, and make secondary pages cleaner.
   CSS-only. No logic changes.
   ========================================================= */

/* Remove washed-out gray hero illustration cards on secondary pages */
body:not(.auth-page) .page-hero:not(.mood-planet-panel) {
  display: block !important;
  min-height: auto !important;
  padding: 28px 34px !important;
}

body:not(.auth-page) .page-hero:not(.mood-planet-panel) .hero-planet-card,
body:not(.auth-page) .page-hero:not(.mood-planet-panel) .hero-planet-media,
body:not(.auth-page) .page-hero:not(.mood-planet-panel) .report-planet-media,
body:not(.auth-page) .page-hero:not(.mood-planet-panel) .friends-planet-media,
body:not(.auth-page) .page-hero:not(.mood-planet-panel) .settings-planet-media,
body:not(.auth-page) .page-hero:not(.mood-planet-panel) .mini-galaxy,
body:not(.auth-page) .page-hero:not(.mood-planet-panel) .companion-orbit {
  display: none !important;
}

body:not(.auth-page) .page-hero:not(.mood-planet-panel)::before,
body:not(.auth-page) .page-hero:not(.mood-planet-panel)::after {
  opacity: 0.08 !important;
}

body:not(.auth-page) .page-hero:not(.mood-planet-panel) h1,
body:not(.auth-page) .page-hero:not(.mood-planet-panel) h2,
body:not(.auth-page) .page-hero:not(.mood-planet-panel) .hero-title {
  max-width: 760px !important;
}

body:not(.auth-page) .page-hero:not(.mood-planet-panel) p,
body:not(.auth-page) .page-hero:not(.mood-planet-panel) .muted,
body:not(.auth-page) .page-hero:not(.mood-planet-panel) .hero-subtitle {
  max-width: 760px !important;
}

/* Report page: make the range + update button control area feel intentional, not like two empty boxes */
body:not(.auth-page) .report-card .form-grid,
body:not(.auth-page) .report-card .form-grid--two,
body:not(.auth-page) .report-controls,
body:not(.auth-page) .report-filter,
body:not(.auth-page) .report-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: end !important;
  padding: 14px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.06), transparent 28%),
    rgba(12, 5, 31, 0.36) !important;
  border: 1px solid rgba(232, 207, 255, 0.14) !important;
}

body:not(.auth-page) .report-card .form-grid > div,
body:not(.auth-page) .report-card .form-grid--two > div,
body:not(.auth-page) .report-controls > div,
body:not(.auth-page) .report-filter > div,
body:not(.auth-page) .report-toolbar > div {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.auth-page) .report-card button,
body:not(.auth-page) .report-controls button,
body:not(.auth-page) .report-filter button,
body:not(.auth-page) .report-toolbar button {
  height: 52px !important;
  min-height: 52px !important;
  min-width: 118px !important;
  justify-self: start !important;
  align-self: end !important;
}

body:not(.auth-page) .report-card select,
body:not(.auth-page) .report-controls select,
body:not(.auth-page) .report-filter select,
body:not(.auth-page) .report-toolbar select {
  height: 52px !important;
  min-height: 52px !important;
}

/* Report output: keep AI suggestions as simple left-aligned cards */
body:not(.auth-page) #report-suggestions,
body:not(.auth-page) .report-suggestions,
body:not(.auth-page) #report-sections {
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

body:not(.auth-page) #report-suggestions li,
body:not(.auth-page) .report-suggestions li,
body:not(.auth-page) #report-sections li,
body:not(.auth-page) .report-suggestion {
  text-align: left !important;
  max-width: none !important;
  width: 100% !important;
  justify-self: stretch !important;
}

/* Settings page: reduce overly tall privacy rows and make toggles cleaner */
body:not(.auth-page) .setting-list {
  gap: 12px !important;
}

body:not(.auth-page) .setting-item {
  min-height: 58px !important;
  padding: 12px 15px !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.045), transparent 28%),
    rgba(12, 5, 31, 0.48) !important;
}

body:not(.auth-page) .setting-item input[type="checkbox"] {
  width: 42px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
}

body:not(.auth-page) .setting-item input[type="checkbox"]::after {
  top: 2px !important;
  left: 2px !important;
  width: 18px !important;
  height: 18px !important;
}

body:not(.auth-page) .setting-item input[type="checkbox"]:checked::after {
  transform: translateX(18px) !important;
}

body:not(.auth-page) .settings-card .row,
body:not(.auth-page) .invite-card .row {
  gap: 10px !important;
}

/* Friends page: make add friend row and friend list cleaner */
body:not(.auth-page) .friends-card .form-grid,
body:not(.auth-page) .friends-card .form-grid--two,
body:not(.auth-page) .invite-card .form-grid,
body:not(.auth-page) .invite-card .form-grid--two {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: end !important;
}

body:not(.auth-page) .friends-card .form-grid > div,
body:not(.auth-page) .friends-card .form-grid--two > div,
body:not(.auth-page) .invite-card .form-grid > div,
body:not(.auth-page) .invite-card .form-grid--two > div {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.auth-page) .friends-card button,
body:not(.auth-page) .invite-card button {
  height: 52px !important;
  min-height: 52px !important;
  align-self: end !important;
}

body:not(.auth-page) #friends-list .list-item {
  min-height: 66px !important;
  padding: 14px 16px !important;
}

body:not(.auth-page) #friends-list .list-item::after {
  opacity: 0.08 !important;
}

body:not(.auth-page) #friends-list .list-item .toolbar {
  align-items: center !important;
}

/* Top app bar: keep current page button prominent, but do not let buttons become rectangles */
body:not(.auth-page) .app-header .app-nav > a,
body:not(.auth-page) .app-header .app-nav > button,
body:not(.auth-page) .app-header .app-nav > span,
body:not(.auth-page) .app-header .nav-link,
body:not(.auth-page) .app-header button.secondary,
body:not(.auth-page) .app-header .network-chip {
  border-radius: 999px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 13px !important;
}

body:not(.auth-page) .app-header .lang-switcher {
  height: 44px !important;
  min-height: 44px !important;
}

body:not(.auth-page) .app-header .lang-switcher__btn {
  height: 34px !important;
  min-height: 34px !important;
}

/* Desktop width refinement: keep secondary pages centered and less stretched */
@media (min-width: 900px) {
  body:not(.auth-page) .app-main,
  body:not(.auth-page) main {
    width: min(1120px, calc(100% - 32px)) !important;
  }

  body:not(.auth-page) .page-hero:not(.mood-planet-panel) {
    margin-top: 20px !important;
  }
}

@media (max-width: 760px) {
  body:not(.auth-page) .report-card .form-grid,
  body:not(.auth-page) .report-card .form-grid--two,
  body:not(.auth-page) .report-controls,
  body:not(.auth-page) .report-filter,
  body:not(.auth-page) .report-toolbar,
  body:not(.auth-page) .friends-card .form-grid,
  body:not(.auth-page) .friends-card .form-grid--two,
  body:not(.auth-page) .invite-card .form-grid,
  body:not(.auth-page) .invite-card .form-grid--two {
    grid-template-columns: 1fr !important;
  }

  body:not(.auth-page) .report-card button,
  body:not(.auth-page) .report-controls button,
  body:not(.auth-page) .report-filter button,
  body:not(.auth-page) .report-toolbar button,
  body:not(.auth-page) .friends-card button,
  body:not(.auth-page) .invite-card button {
    width: 100% !important;
  }
}

/* =========================================================
   MoodFlow Homepage Redesign v1 — Calm Planet Dashboard
   Reduces vertical feature stacking and makes the homepage feel
   spacious, simple, and app-like.
   ========================================================= */

body.page-dashboard:not(.auth-page) .app-main {
  width: min(1160px, calc(100% - 36px)) !important;
  margin-top: 22px !important;
}

/* Make the planet hero clean and dominant */
body.page-dashboard .mood-planet-panel {
  grid-template-columns: minmax(250px, 0.32fr) minmax(460px, 0.68fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
  padding: clamp(18px, 2.4vw, 28px) !important;
  margin-bottom: 20px !important;
}

body.page-dashboard .mood-planet-copy {
  min-height: auto !important;
  justify-content: center !important;
  padding: 18px !important;
}

body.page-dashboard .mood-planet-copy h2 {
  font-size: clamp(34px, 4.5vw, 52px) !important;
  line-height: 1.02 !important;
  margin: 8px 0 10px !important;
}

body.page-dashboard .mood-planet-copy p {
  max-width: 390px !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: rgba(236, 220, 255, 0.72) !important;
}

body.page-dashboard .mood-planet-stage {
  min-height: clamp(420px, 48vw, 560px) !important;
  height: auto !important;
}

body.page-dashboard #mood-planet-canvas {
  min-height: clamp(420px, 48vw, 560px) !important;
  height: clamp(420px, 48vw, 560px) !important;
}

/* Toggle advanced systems */
.planet-system-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 38px;
  margin-top: 16px;
  padding: 8px 13px;
  border-radius: 999px;
  color: rgba(255, 247, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(232, 207, 255, 0.18) !important;
  box-shadow: 0 12px 28px rgba(5, 2, 20, 0.18) !important;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.planet-system-toggle::before {
  content: "✦";
  margin-right: 7px;
  color: #ffd36e;
  text-shadow: 0 0 12px rgba(255, 211, 110, 0.42);
}

.planet-system-toggle:hover {
  transform: translateY(-1px);
  background: rgba(195, 105, 255, 0.16) !important;
  border-color: rgba(232, 207, 255, 0.28) !important;
}

/* Default: hide advanced system cards */
body.page-dashboard .mood-planet-panel.is-systems-collapsed .planet-event-card,
body.page-dashboard .mood-planet-panel.is-systems-collapsed .planet-constellation-card,
body.page-dashboard .mood-planet-panel.is-systems-collapsed .planet-nation-board {
  display: none !important;
}

/* Keep only compact stats and daily mission visible */
body.page-dashboard .mood-planet-panel.is-systems-collapsed .planet-stats-strip {
  display: flex !important;
  order: 3 !important;
}

body.page-dashboard .mood-planet-panel.is-systems-collapsed .planet-mission-card {
  display: grid !important;
  order: 4 !important;
}

/* Compact stats */
body.page-dashboard .planet-stats-strip {
  margin-top: 0 !important;
  gap: 8px !important;
}

body.page-dashboard .planet-stats-strip span,
body.page-dashboard .planet-stats-chip {
  min-height: 30px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
}

/* Compact mission card */
body.page-dashboard .planet-mission-card {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  min-height: auto !important;
  padding: 12px 14px !important;
}

body.page-dashboard .planet-mission-card__icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
}

body.page-dashboard .planet-mission-card h3 {
  font-size: 15px !important;
  margin-bottom: 2px !important;
}

body.page-dashboard .planet-mission-card p {
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: rgba(236, 220, 255, 0.68) !important;
}

body.page-dashboard .planet-mission-card__button {
  min-height: 34px !important;
  padding: 7px 11px !important;
  font-size: 11px !important;
}

/* Subtle legend */
body.page-dashboard .mood-planet-footer {
  padding-top: 0 !important;
  opacity: 0.8;
}

body.page-dashboard .planet-legend span {
  min-height: 28px !important;
  padding: 5px 9px !important;
  font-size: 11px !important;
}

body.page-dashboard .planet-hint {
  font-size: 11px !important;
}

/* Lower homepage: remove duplicate planet card */
body.page-dashboard .dashboard-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.75fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

body.page-dashboard .side-column {
  display: grid !important;
  gap: 18px !important;
}

body.page-dashboard .companion-card {
  display: none !important;
}

/* Mood form should be clean and not overboxed */
body.page-dashboard .mood-card {
  padding: 22px !important;
}

body.page-dashboard .mood-card .section-heading {
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
}

body.page-dashboard .mood-card .form-grid > div,
body.page-dashboard .mood-card .form-grid--two > div,
body.page-dashboard .mood-card .field {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.page-dashboard .mood-card .form-grid,
body.page-dashboard .mood-card .form-grid--two {
  gap: 14px !important;
}

body.page-dashboard .metric-card {
  padding: 13px !important;
}

body.page-dashboard .mood-card textarea {
  min-height: 130px !important;
}

/* History as compact city log */
body.page-dashboard .history-card {
  padding: 20px !important;
  margin-top: 0 !important;
}

body.page-dashboard #history-list .list-item {
  min-height: auto !important;
  padding: 12px 14px 12px 18px !important;
}

body.page-dashboard #history-list .list-placeholder,
body.page-dashboard .history-card .empty-state {
  min-height: 96px !important;
}

/* Expanded system state still organized */
body.page-dashboard .mood-planet-panel:not(.is-systems-collapsed) .planet-event-card,
body.page-dashboard .mood-planet-panel:not(.is-systems-collapsed) .planet-constellation-card,
body.page-dashboard .mood-planet-panel:not(.is-systems-collapsed) .planet-nation-board {
  display: grid !important;
}

body.page-dashboard .mood-planet-panel:not(.is-systems-collapsed) .planet-event-card,
body.page-dashboard .mood-planet-panel:not(.is-systems-collapsed) .planet-mission-card,
body.page-dashboard .mood-planet-panel:not(.is-systems-collapsed) .planet-constellation-card,
body.page-dashboard .mood-planet-panel:not(.is-systems-collapsed) .planet-nation-board {
  padding: 12px 14px !important;
}

@media (max-width: 980px) {
  body.page-dashboard .mood-planet-panel {
    grid-template-columns: 1fr !important;
  }

  body.page-dashboard .dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  body.page-dashboard .planet-mission-card {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  body.page-dashboard .planet-mission-card__button {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 640px) {
  body.page-dashboard:not(.auth-page) .app-main {
    width: min(100% - 18px, 1160px) !important;
  }

  body.page-dashboard .mood-planet-copy h2 {
    font-size: 30px !important;
  }

  body.page-dashboard .mood-planet-stage,
  body.page-dashboard #mood-planet-canvas {
    height: 330px !important;
    min-height: 310px !important;
  }
}

/* =========================================================
   Mood Planet 3D engine layer
   ========================================================= */
body.page-dashboard .mood-planet-stage.is-3d-ready {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  touch-action: none;
}

body.page-dashboard .mood-planet-stage.is-3d-ready #mood-planet-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

body.page-dashboard .mood-planet-stage.is-3d-ready #mood-planet-canvas:active {
  cursor: grabbing;
}

body.page-dashboard .mood-planet-stage.is-3d-ready::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(122, 188, 255, 0.16), transparent 45%),
    radial-gradient(circle at 82% 74%, rgba(255, 138, 221, 0.14), transparent 44%);
  pointer-events: none;
  z-index: 0;
}

body.page-dashboard .mood-planet-stage.is-3d-ready #mood-planet-canvas,
body.page-dashboard .mood-planet-stage.is-3d-ready .mood-planet-tooltip {
  position: relative;
  z-index: 1;
}

body.page-dashboard .mood-planet-stage.is-3d-fallback::after {
  content: "3D engine unavailable, switched to legacy mode";
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 247, 255, 0.9);
  background: rgba(28, 13, 54, 0.66);
  border: 1px solid rgba(226, 198, 255, 0.24);
  pointer-events: none;
  z-index: 2;
}

/* =========================================================
   Mood Planet 3D QA Patch 1
   - Fix homepage title wrapping
   - Make stage cleaner and more cartoon-3D friendly
   ========================================================= */
body.page-dashboard .mood-planet-panel {
  grid-template-columns: minmax(300px, 0.34fr) minmax(520px, 0.66fr) !important;
}

body.page-dashboard .mood-planet-copy h2,
.mood-planet-copy h2 {
  max-width: 360px !important;
  font-size: clamp(32px, 3.9vw, 50px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.055em !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

body.page-dashboard .mood-planet-copy p,
.mood-planet-copy p {
  max-width: 360px !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
}

body.page-dashboard .mood-planet-stage,
.mood-planet-stage {
  min-height: clamp(460px, 48vw, 590px) !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(126, 232, 255, 0.13), transparent 36%),
    radial-gradient(circle at 78% 26%, rgba(195, 105, 255, 0.2), transparent 34%),
    radial-gradient(circle at 18% 78%, rgba(255, 125, 219, 0.08), transparent 34%),
    linear-gradient(150deg, rgba(7, 2, 24, 0.94), rgba(22, 8, 52, 0.88) 52%, rgba(48, 16, 82, 0.84)) !important;
}

body.page-dashboard #mood-planet-canvas,
#mood-planet-canvas {
  min-height: clamp(460px, 48vw, 590px) !important;
  height: clamp(460px, 48vw, 590px) !important;
}

/* Mood Planet 3D QA Patch 3 — miniature planet scale */
body.page-dashboard #mood-planet-canvas,
#mood-planet-canvas {
  transform: scale(0.9) !important;
  transform-origin: center center !important;
}

body.page-dashboard .mood-planet-stage,
.mood-planet-stage {
  background:
    radial-gradient(circle at 50% 44%, rgba(126, 232, 255, 0.09), transparent 35%),
    radial-gradient(circle at 76% 28%, rgba(195, 105, 255, 0.17), transparent 35%),
    linear-gradient(150deg, rgba(7, 2, 24, 0.95), rgba(22, 8, 52, 0.9) 54%, rgba(48, 16, 82, 0.82)) !important;
}

/* Mood Planet 3D QA Patch 4 — richer miniature world */
body.page-dashboard #mood-planet-canvas,
#mood-planet-canvas {
  transform: scale(0.94) !important;
  transform-origin: center center !important;
}

body.page-dashboard .mood-planet-stage,
.mood-planet-stage {
  background:
    radial-gradient(circle at 50% 43%, rgba(126, 232, 255, 0.1), transparent 34%),
    radial-gradient(circle at 74% 28%, rgba(195, 105, 255, 0.19), transparent 35%),
    radial-gradient(circle at 20% 76%, rgba(255, 145, 218, 0.08), transparent 34%),
    linear-gradient(150deg, rgba(7, 2, 24, 0.96), rgba(20, 7, 50, 0.9) 54%, rgba(48, 16, 82, 0.82)) !important;
}

/* Mood Planet 3D QA Patch 5 — free rotation + richer world */
body.page-dashboard #mood-planet-canvas,
#mood-planet-canvas {
  transform: scale(0.96) !important;
  transform-origin: center center !important;
}

/* Homepage button comfort pass v2 — must stay after 3D polish layers. */
body.page-dashboard:not(.auth-page) .planet-system-toggle,
body.page-dashboard:not(.auth-page) .mood-planet-panel .planet-system-toggle {
  min-height: 38px !important;
  padding: 8px 14px !important;
  background: rgba(255, 255, 255, 0.075) !important;
  background-image: none !important;
  border: 1px solid rgba(232, 207, 255, 0.22) !important;
  box-shadow: 0 10px 22px rgba(5, 2, 20, 0.16) !important;
  color: rgba(255, 247, 255, 0.88) !important;
}

body.page-dashboard:not(.auth-page) .planet-system-toggle:hover,
body.page-dashboard:not(.auth-page) .mood-planet-panel .planet-system-toggle:hover {
  background: rgba(195, 105, 255, 0.16) !important;
  box-shadow: 0 12px 26px rgba(116, 92, 255, 0.2) !important;
}

.planet-model-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.planet-model-option {
  min-width: 132px;
  border: 1px solid rgba(232, 207, 255, 0.18);
  border-radius: 18px;
  padding: 10px 13px;
  background: rgba(255, 255, 255, 0.065);
  color: rgba(255, 247, 255, 0.86);
  box-shadow: 0 12px 24px rgba(5, 2, 20, 0.14);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.planet-model-option:hover,
.planet-model-option:focus-visible {
  border-color: rgba(255, 214, 128, 0.42);
  background: rgba(255, 255, 255, 0.095);
  box-shadow: 0 14px 28px rgba(116, 92, 255, 0.18);
  transform: translateY(-1px);
  outline: none;
}

.planet-model-option.is-selected {
  border-color: rgba(255, 214, 128, 0.62);
  background:
    linear-gradient(135deg, rgba(255, 214, 128, 0.16), rgba(154, 112, 255, 0.14)),
    rgba(255, 255, 255, 0.075);
}

.planet-model-option-name,
.planet-model-option-status {
  display: block;
}

.planet-model-option-name {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.planet-model-option-status {
  margin-top: 3px;
  color: rgba(222, 211, 240, 0.66);
  font-size: 0.72rem;
  font-weight: 700;
}

.mood-planet-stage.has-city-kit-models::after,
.mood-planet-stage.is-city-kit-missing::after,
.mood-planet-stage.is-planet-model-missing::after {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  border: 1px solid rgba(232, 207, 255, 0.16);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(12, 8, 33, 0.5);
  color: rgba(236, 226, 255, 0.62);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.mood-planet-stage.has-city-kit-models::after {
  content: "CITY KIT";
}

.mood-planet-stage.is-city-kit-missing::after,
.mood-planet-stage.is-planet-model-missing::after {
  content: "FALLBACK";
}

/* Game planet depth pass v2 — final cascade override for model readability. */
body.page-dashboard .mood-planet-stage,
body.page-dashboard #mood-planet-canvas,
.mood-planet-stage,
#mood-planet-canvas {
  height: clamp(470px, 44vw, 620px) !important;
  min-height: clamp(470px, 44vw, 620px) !important;
}

body.page-dashboard #mood-planet-canvas,
#mood-planet-canvas {
  transform: scale(1.03) !important;
  transform-origin: center center !important;
  filter: drop-shadow(0 28px 46px rgba(5, 2, 20, 0.34)) !important;
}

@media (max-width: 760px) {
  body.page-dashboard .mood-planet-stage,
  body.page-dashboard #mood-planet-canvas,
  .mood-planet-stage,
  #mood-planet-canvas {
    height: 318px !important;
    min-height: 318px !important;
  }
}

@media (max-width: 420px) {
  body.page-dashboard .mood-planet-stage,
  body.page-dashboard #mood-planet-canvas,
  .mood-planet-stage,
  #mood-planet-canvas {
    height: 296px !important;
    min-height: 296px !important;
  }
}

/* Mood Planet Render System v2 — final clean stage override. */
body.page-dashboard .mood-planet-stage.is-3d-ready,
.mood-planet-stage.is-3d-ready,
body.page-dashboard .mood-planet-stage,
.mood-planet-stage {
  background:
    radial-gradient(circle at 50% 46%, rgba(95, 138, 184, 0.14), transparent 36%),
    radial-gradient(circle at 78% 74%, rgba(80, 41, 126, 0.18), transparent 40%),
    linear-gradient(150deg, rgba(5, 3, 18, 0.98), rgba(13, 9, 40, 0.95) 56%, rgba(27, 13, 58, 0.9)) !important;
}

body.page-dashboard .mood-planet-stage.is-3d-ready #mood-planet-canvas,
.mood-planet-stage.is-3d-ready #mood-planet-canvas,
body.page-dashboard #mood-planet-canvas,
#mood-planet-canvas {
  filter: saturate(0.92) contrast(1.04) brightness(0.98) drop-shadow(0 28px 46px rgba(5, 2, 20, 0.34)) !important;
}

/* Mood Planet Render System v2 — final clean stage override. */
body.page-dashboard .mood-planet-stage.is-3d-ready,
.mood-planet-stage.is-3d-ready,
body.page-dashboard .mood-planet-stage,
.mood-planet-stage {
  background:
    radial-gradient(circle at 50% 46%, rgba(95, 138, 184, 0.14), transparent 36%),
    radial-gradient(circle at 78% 74%, rgba(80, 41, 126, 0.18), transparent 40%),
    linear-gradient(150deg, rgba(5, 3, 18, 0.98), rgba(13, 9, 40, 0.95) 56%, rgba(27, 13, 58, 0.9)) !important;
}

body.page-dashboard .mood-planet-stage.is-3d-ready #mood-planet-canvas,
.mood-planet-stage.is-3d-ready #mood-planet-canvas,
body.page-dashboard #mood-planet-canvas,
#mood-planet-canvas {
  filter: saturate(0.92) contrast(1.04) brightness(0.98) drop-shadow(0 28px 46px rgba(5, 2, 20, 0.34)) !important;
}

/* Mood Planet Render System v2 — cleaner deep-space stage. */
body.page-dashboard .mood-planet-stage.is-3d-ready,
.mood-planet-stage.is-3d-ready,
body.page-dashboard .mood-planet-stage,
.mood-planet-stage {
  background:
    radial-gradient(circle at 50% 46%, rgba(95, 138, 184, 0.14), transparent 36%),
    radial-gradient(circle at 78% 74%, rgba(80, 41, 126, 0.18), transparent 40%),
    linear-gradient(150deg, rgba(5, 3, 18, 0.98), rgba(13, 9, 40, 0.95) 56%, rgba(27, 13, 58, 0.9)) !important;
}

body.page-dashboard .mood-planet-stage.is-3d-ready #mood-planet-canvas,
.mood-planet-stage.is-3d-ready #mood-planet-canvas,
body.page-dashboard #mood-planet-canvas,
#mood-planet-canvas {
  filter: saturate(0.92) contrast(1.04) brightness(0.98) drop-shadow(0 28px 46px rgba(5, 2, 20, 0.34)) !important;
}

/* Game planet depth pass — give the 3D model room to read as a planet. */
body.page-dashboard .mood-planet-stage,
body.page-dashboard #mood-planet-canvas,
.mood-planet-stage,
#mood-planet-canvas {
  height: clamp(430px, 42vw, 560px) !important;
  min-height: clamp(430px, 42vw, 560px) !important;
}

body.page-dashboard #mood-planet-canvas,
#mood-planet-canvas {
  transform: scale(1.04) !important;
  transform-origin: center center !important;
}

@media (max-width: 760px) {
  body.page-dashboard .mood-planet-stage,
  body.page-dashboard #mood-planet-canvas,
  .mood-planet-stage,
  #mood-planet-canvas {
    height: 280px !important;
    min-height: 280px !important;
  }
}

@media (max-width: 420px) {
  body.page-dashboard .mood-planet-stage,
  body.page-dashboard #mood-planet-canvas,
  .mood-planet-stage,
  #mood-planet-canvas {
    height: 260px !important;
    min-height: 260px !important;
  }
}

/* Homepage hero breathing room — keep copy away from the glass edge. */
body.page-dashboard:not(.auth-page) .mood-planet-panel {
  padding: clamp(24px, 3vw, 36px) !important;
}

body.page-dashboard:not(.auth-page) .mood-planet-copy {
  padding: clamp(8px, 1.6vw, 18px) clamp(10px, 2vw, 24px) !important;
}

@media (max-width: 760px) {
  body.page-dashboard:not(.auth-page) .mood-planet-panel {
    padding: 22px !important;
  }

  body.page-dashboard:not(.auth-page) .mood-planet-copy {
    padding: 8px 10px 2px !important;
  }
}

html body.page-dashboard.app-shell:not(.auth-page) section.mood-planet-panel button.planet-system-toggle {
  background-color: rgba(255, 255, 255, 0.075) !important;
  background-image: none !important;
  box-shadow: 0 10px 22px rgba(5, 2, 20, 0.16) !important;
}

/* Homepage button comfort pass — calmer hierarchy and correct active state. */
body.page-dashboard:not(.auth-page) .app-header .nav-link[href*="report"] {
  background: rgba(47, 19, 86, 0.58) !important;
  border-color: rgba(232, 207, 255, 0.22) !important;
  box-shadow: 0 8px 18px rgba(5, 2, 18, 0.14) !important;
  color: rgba(255, 247, 255, 0.86) !important;
}

body.page-dashboard:not(.auth-page) .app-header .app-nav > a,
body.page-dashboard:not(.auth-page) .app-header .app-nav > button,
body.page-dashboard:not(.auth-page) .app-header .app-nav > span,
body.page-dashboard:not(.auth-page) .app-header .nav-link,
body.page-dashboard:not(.auth-page) .app-header button.secondary,
body.page-dashboard:not(.auth-page) .app-header .network-chip {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  box-shadow: 0 8px 18px rgba(5, 2, 18, 0.14) !important;
}

body.page-dashboard:not(.auth-page) .planet-system-toggle {
  min-height: 38px !important;
  padding: 8px 14px !important;
  background: rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(232, 207, 255, 0.22) !important;
  box-shadow: 0 10px 22px rgba(5, 2, 20, 0.16) !important;
  color: rgba(255, 247, 255, 0.88) !important;
}

body.page-dashboard:not(.auth-page) .planet-system-toggle:hover {
  background: rgba(195, 105, 255, 0.16) !important;
  box-shadow: 0 12px 26px rgba(116, 92, 255, 0.2) !important;
}

body.page-dashboard:not(.auth-page) .form-actions button[type="submit"],
body.page-dashboard:not(.auth-page) .mood-card button[type="submit"] {
  min-height: 50px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #b65cff, #6f5cff) !important;
  box-shadow: 0 12px 28px rgba(116, 92, 255, 0.26) !important;
}

body.page-dashboard:not(.auth-page) .sync-strip {
  align-items: center !important;
  padding: 8px 10px !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

body.page-dashboard:not(.auth-page) #sync-now-btn {
  width: auto !important;
  min-width: 128px !important;
  min-height: 36px !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  body.page-dashboard:not(.auth-page) .app-header .app-nav > a,
  body.page-dashboard:not(.auth-page) .app-header .app-nav > button,
  body.page-dashboard:not(.auth-page) .app-header .app-nav > span,
  body.page-dashboard:not(.auth-page) .app-header .nav-link,
  body.page-dashboard:not(.auth-page) .app-header button.secondary,
  body.page-dashboard:not(.auth-page) .app-header .network-chip {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
  }

  body.page-dashboard:not(.auth-page) #sync-now-btn {
    width: 100% !important;
  }
}

/* =========================================================
   MoodFlow Design Consolidation v2 — mature purple app shell
   CSS-first visual cleanup. Keeps existing product logic intact.
   ========================================================= */
:root {
  --mf-v2-card-radius: 22px;
  --mf-v2-inner-radius: 16px;
  --mf-v2-border: rgba(232, 207, 255, 0.16);
  --mf-v2-border-strong: rgba(232, 207, 255, 0.24);
  --mf-v2-surface: rgba(18, 7, 43, 0.72);
  --mf-v2-surface-soft: rgba(23, 9, 52, 0.54);
  --mf-v2-text: rgba(255, 249, 255, 0.94);
  --mf-v2-muted: rgba(232, 220, 255, 0.68);
  --mf-v2-shadow: 0 18px 42px rgba(4, 1, 18, 0.28);
  --mf-v2-gradient: linear-gradient(135deg, #c56aff 0%, #735cff 100%);
}

body:not(.auth-page) {
  color: var(--mf-v2-text);
  background:
    radial-gradient(circle at 10% 0%, rgba(170, 73, 255, 0.18), transparent 32%),
    radial-gradient(circle at 90% 12%, rgba(106, 86, 255, 0.14), transparent 30%),
    linear-gradient(180deg, #0c0625 0%, #160934 48%, #2b0f52 100%) !important;
}

body:not(.auth-page) .app-header,
body:not(.auth-page) header {
  background: rgba(8, 3, 25, 0.72) !important;
  border-bottom: 1px solid rgba(232, 207, 255, 0.12) !important;
  box-shadow: 0 14px 36px rgba(4, 1, 18, 0.22) !important;
}

body:not(.auth-page) .app-toolbar {
  width: min(1120px, 100%) !important;
  margin: 0 auto !important;
}

body:not(.auth-page) .brand-copy h1,
body:not(.auth-page) .toolbar h1,
body:not(.auth-page) .app-header h1 {
  color: #fff !important;
  letter-spacing: -0.035em !important;
}

body:not(.auth-page) .brand-copy .muted,
body:not(.auth-page) .app-header .muted {
  color: var(--mf-v2-muted) !important;
}

body:not(.auth-page) .app-nav {
  scrollbar-width: none;
}

body:not(.auth-page) .app-nav::-webkit-scrollbar {
  display: none;
}

body:not(.auth-page) .app-main,
body:not(.auth-page) main {
  width: min(1120px, calc(100% - 32px)) !important;
  max-width: none !important;
}

body:not(.auth-page) .card,
body:not(.auth-page) .page-hero,
body:not(.auth-page) .mood-planet-panel,
body:not(.auth-page) .mood-planet-stage {
  border-radius: var(--mf-v2-card-radius) !important;
  border-color: var(--mf-v2-border) !important;
  box-shadow: var(--mf-v2-shadow) !important;
}

body:not(.auth-page) .card,
body:not(.auth-page) .page-hero {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.055), transparent 34%),
    linear-gradient(150deg, rgba(24, 8, 54, 0.82), rgba(13, 5, 34, 0.72)) !important;
}

body:not(.auth-page) .card h2,
body:not(.auth-page) .page-hero h2,
body:not(.auth-page) .hero-title {
  color: #fff !important;
  letter-spacing: -0.025em !important;
}

body:not(.auth-page) .muted,
body:not(.auth-page) .hero-subtitle {
  color: var(--mf-v2-muted) !important;
}

body:not(.auth-page) input,
body:not(.auth-page) select,
body:not(.auth-page) textarea {
  min-height: 50px !important;
  border-radius: var(--mf-v2-inner-radius) !important;
  color: #fff !important;
  background: rgba(8, 3, 26, 0.58) !important;
  border-color: rgba(232, 207, 255, 0.16) !important;
}

body:not(.auth-page) input:focus,
body:not(.auth-page) select:focus,
body:not(.auth-page) textarea:focus {
  border-color: rgba(199, 114, 255, 0.68) !important;
  box-shadow: 0 0 0 4px rgba(195, 105, 255, 0.14) !important;
}

body:not(.auth-page) label {
  color: rgba(255, 249, 255, 0.9) !important;
}

body:not(.auth-page) button:not(.secondary),
body:not(.auth-page) .lang-switcher__btn.is-active {
  background: var(--mf-v2-gradient) !important;
  box-shadow: 0 14px 28px rgba(116, 92, 255, 0.26) !important;
}

body:not(.auth-page) button.secondary,
body:not(.auth-page) .nav-link,
body:not(.auth-page) .network-chip,
body:not(.auth-page) .chip {
  border-color: var(--mf-v2-border-strong) !important;
  background: rgba(45, 18, 82, 0.62) !important;
  color: rgba(255, 247, 255, 0.9) !important;
}

body:not(.auth-page) .form-feedback:not(:empty),
body:not(.auth-page) .status,
body:not(.auth-page) .list-item,
body:not(.auth-page) .report-opening,
body:not(.auth-page) .setting-item,
body:not(.auth-page) .metric-card {
  border-radius: var(--mf-v2-inner-radius) !important;
  border-color: rgba(232, 207, 255, 0.14) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.045), transparent 30%),
    rgba(10, 4, 31, 0.54) !important;
  color: rgba(255, 249, 255, 0.9) !important;
}

body:not(.auth-page) .form-feedback:not(:empty) {
  min-height: 34px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(232, 207, 255, 0.16) !important;
  border-radius: 999px !important;
}

body:not(.auth-page) .list-placeholder,
body:not(.auth-page) .empty-state {
  min-height: 118px !important;
  display: grid !important;
  place-items: center !important;
  gap: 8px !important;
  text-align: center !important;
  border-radius: var(--mf-v2-card-radius) !important;
  border: 1px dashed rgba(232, 207, 255, 0.2) !important;
  color: var(--mf-v2-muted) !important;
  background: rgba(10, 4, 31, 0.42) !important;
}

body:not(.auth-page) .empty-state::before,
body:not(.auth-page) .list-placeholder::before {
  content: "";
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.8), transparent 18%),
    linear-gradient(145deg, rgba(132, 122, 255, 0.88), rgba(98, 208, 225, 0.42));
  box-shadow: 0 0 28px rgba(126, 232, 255, 0.18);
}

body:not(.auth-page) .page-hero:not(.mood-planet-panel) {
  min-height: 138px !important;
  padding: 24px 28px !important;
  margin-bottom: 16px !important;
}

body:not(.auth-page) .page-hero:not(.mood-planet-panel)::before,
body:not(.auth-page) .page-hero:not(.mood-planet-panel)::after {
  opacity: 0.06 !important;
}

body.page-dashboard .mood-planet-panel {
  gap: 16px !important;
  margin-bottom: 16px !important;
}

body.page-dashboard .mood-planet-copy {
  padding: 16px !important;
}

body.page-dashboard .mood-planet-copy h2,
.mood-planet-copy h2 {
  max-width: 420px !important;
  letter-spacing: -0.06em !important;
}

body.page-dashboard .mood-planet-stage,
.mood-planet-stage {
  min-height: clamp(380px, 38vw, 520px) !important;
}

body.page-dashboard #mood-planet-canvas,
#mood-planet-canvas {
  height: clamp(380px, 38vw, 520px) !important;
  min-height: clamp(380px, 38vw, 520px) !important;
}

body.page-dashboard .dashboard-grid {
  gap: 16px !important;
}

body.page-dashboard .mood-card,
body.page-dashboard .history-card {
  padding: 20px !important;
}

body.page-dashboard .mood-card textarea {
  min-height: 112px !important;
}

body.page-report .stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.page-report .status {
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  font-weight: 800 !important;
}

body.page-report .report-control-card .form-grid,
body.page-report .report-control-card .form-grid--two {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: end !important;
}

body.page-report .report-control-card .form-grid > div,
body.page-report .report-control-card .form-grid--two > div,
body.page-friends .friends-card .row > div {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.page-settings .settings-lang-control .lang-switcher {
  width: 100% !important;
}

body.page-settings .setting-item--language {
  align-items: stretch !important;
}

body.page-friends .friends-card .row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
}

body.page-friends .friends-card #add-friend-btn,
body.page-report #refresh-report-btn {
  height: 50px !important;
  min-height: 50px !important;
}

@media (max-width: 760px) {
  body:not(.auth-page) .app-header,
  body:not(.auth-page) header {
    padding-top: calc(12px + var(--safe-top)) !important;
    padding-bottom: 10px !important;
  }

  body:not(.auth-page) .app-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body:not(.auth-page) .brand-copy h1,
  body:not(.auth-page) .toolbar h1,
  body:not(.auth-page) .app-header h1 {
    font-size: 28px !important;
    line-height: 1 !important;
  }

  body:not(.auth-page) .brand-copy .muted,
  body:not(.auth-page) .app-header .muted {
    margin-top: 4px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body:not(.auth-page) .app-nav {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding: 4px !important;
    gap: 5px !important;
  }

  body:not(.auth-page) .app-header .app-nav > a,
  body:not(.auth-page) .app-header .app-nav > button,
  body:not(.auth-page) .app-header .app-nav > span,
  body:not(.auth-page) .app-header .nav-link,
  body:not(.auth-page) .app-header button.secondary,
  body:not(.auth-page) .app-header .network-chip {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  body:not(.auth-page) .app-main,
  body:not(.auth-page) main {
    width: min(100% - 18px, 1120px) !important;
    margin-top: 12px !important;
  }

  body:not(.auth-page) .card,
  body:not(.auth-page) .page-hero {
    padding: 15px !important;
    margin-bottom: 12px !important;
    border-radius: 18px !important;
  }

  body:not(.auth-page) .page-hero:not(.mood-planet-panel) {
    min-height: auto !important;
    padding: 18px !important;
  }

  body.page-dashboard .mood-planet-panel {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  body.page-dashboard .mood-planet-copy {
    padding: 4px 4px 0 !important;
  }

  body.page-dashboard .mood-planet-copy h2,
  .mood-planet-copy h2 {
    max-width: none !important;
    font-size: 28px !important;
    margin: 5px 0 6px !important;
  }

  body.page-dashboard .mood-planet-copy p,
  .mood-planet-copy p {
    max-width: none !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  body.page-dashboard .mood-planet-stage,
  body.page-dashboard #mood-planet-canvas,
  .mood-planet-stage,
  #mood-planet-canvas {
    height: 260px !important;
    min-height: 260px !important;
  }

  body.page-dashboard .mood-planet-footer,
  body.page-dashboard .planet-mission-card {
    display: none !important;
  }

  body.page-dashboard .planet-stats-strip {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  body.page-dashboard .planet-stats-strip span,
  body.page-dashboard .planet-stats-chip {
    flex: 0 0 auto !important;
  }

  body.page-dashboard .dashboard-grid,
  body.page-friends .friends-card .row,
  body.page-report .report-control-card .form-grid,
  body.page-report .report-control-card .form-grid--two {
    grid-template-columns: 1fr !important;
  }

  body.page-dashboard .mood-card textarea {
    min-height: 96px !important;
  }

  body.page-report .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.page-report .status {
    min-height: 54px !important;
    padding: 10px !important;
    font-size: 13px !important;
  }

  body.page-friends .friends-card #add-friend-btn,
  body.page-report #refresh-report-btn {
    width: 100% !important;
  }

  body.page-settings .setting-item--language {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  body:not(.auth-page) .brand-copy .muted,
  body:not(.auth-page) .app-header .muted {
    display: none !important;
  }

  body.page-dashboard .mood-planet-stage,
  body.page-dashboard #mood-planet-canvas,
  .mood-planet-stage,
  #mood-planet-canvas {
    height: 230px !important;
    min-height: 230px !important;
  }

  body.page-report .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.page-report .status {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
}

/* Mobile first-screen correction: keep the record form visible sooner. */
body.page-dashboard .mood-planet-panel.is-systems-collapsed .planet-mission-card {
  display: none !important;
}

@media (min-width: 761px) {
  body.page-dashboard .mood-planet-stage,
  body.page-dashboard #mood-planet-canvas,
  .mood-planet-stage,
  #mood-planet-canvas {
    height: clamp(360px, 34vw, 440px) !important;
    min-height: clamp(360px, 34vw, 440px) !important;
  }
}

@media (max-width: 760px) {
  body.page-dashboard .mood-planet-panel.is-systems-collapsed .planet-mission-card,
  body.page-dashboard .mood-planet-panel:not(.is-systems-collapsed) .planet-mission-card,
  body.page-dashboard .mood-planet-panel .planet-mission-card {
    display: none !important;
  }

  body.page-dashboard .mood-planet-stage,
  body.page-dashboard #mood-planet-canvas,
  .mood-planet-stage,
  #mood-planet-canvas {
    height: 230px !important;
    min-height: 230px !important;
  }
}

@media (max-width: 420px) {
  body.page-dashboard .mood-planet-stage,
  body.page-dashboard #mood-planet-canvas,
  .mood-planet-stage,
  #mood-planet-canvas {
    height: 210px !important;
    min-height: 210px !important;
  }
}

/* Mood Planet 3D Polish Stage — Starfield + Hover Finish */
body.page-dashboard .mood-planet-stage.is-3d-ready,
.mood-planet-stage.is-3d-ready {
  background:
    radial-gradient(circle at 50% 43%, rgba(126, 232, 255, 0.055), transparent 34%),
    radial-gradient(circle at 76% 28%, rgba(195, 105, 255, 0.13), transparent 35%),
    radial-gradient(circle at 18% 78%, rgba(255, 145, 218, 0.05), transparent 34%),
    linear-gradient(150deg, rgba(5, 2, 20, 0.99), rgba(15, 5, 40, 0.95) 54%, rgba(36, 12, 68, 0.87)) !important;
}

body.page-dashboard .mood-planet-stage.is-3d-ready #mood-planet-canvas,
.mood-planet-stage.is-3d-ready #mood-planet-canvas {
  filter: saturate(0.98) contrast(1.03) brightness(0.98);
}

/* Mood Planet 3D Polish — subtle WebGL scene finishing */
body.page-dashboard .mood-planet-stage.is-3d-ready,
.mood-planet-stage.is-3d-ready {
  background:
    radial-gradient(circle at 50% 43%, rgba(126, 232, 255, 0.06), transparent 34%),
    radial-gradient(circle at 76% 28%, rgba(195, 105, 255, 0.14), transparent 35%),
    radial-gradient(circle at 18% 78%, rgba(255, 145, 218, 0.055), transparent 34%),
    linear-gradient(150deg, rgba(6, 2, 22, 0.98), rgba(17, 6, 44, 0.94) 54%, rgba(40, 13, 72, 0.86)) !important;
}

body.page-dashboard .mood-planet-stage.is-3d-ready #mood-planet-canvas,
.mood-planet-stage.is-3d-ready #mood-planet-canvas {
  filter: saturate(0.98) contrast(1.02);
}

/* Mood Planet Asset QA Patch 1 — calmer product-grade texture */
body.page-dashboard #mood-planet-canvas,
#mood-planet-canvas {
  transform: scale(0.93) !important;
  transform-origin: center center !important;
}

body.page-dashboard .mood-planet-stage.is-3d-ready,
.mood-planet-stage.is-3d-ready {
  background:
    radial-gradient(circle at 50% 43%, rgba(126, 232, 255, 0.075), transparent 34%),
    radial-gradient(circle at 74% 28%, rgba(195, 105, 255, 0.16), transparent 35%),
    radial-gradient(circle at 18% 78%, rgba(255, 145, 218, 0.07), transparent 34%),
    linear-gradient(150deg, rgba(7, 2, 24, 0.98), rgba(18, 7, 48, 0.93) 54%, rgba(46, 15, 80, 0.84)) !important;
}

body.page-dashboard .mood-planet-stage,
.mood-planet-stage {
  background:
    radial-gradient(circle at 50% 43%, rgba(126, 232, 255, 0.1), transparent 34%),
    radial-gradient(circle at 74% 28%, rgba(195, 105, 255, 0.2), transparent 35%),
    radial-gradient(circle at 18% 78%, rgba(255, 145, 218, 0.09), transparent 34%),
    linear-gradient(150deg, rgba(7, 2, 24, 0.98), rgba(18, 7, 48, 0.92) 54%, rgba(48, 16, 82, 0.84)) !important;
}

/* Mood Planet 3D Asset Pipeline v1 */
body.page-dashboard .mood-planet-stage.is-3d-ready,
.mood-planet-stage.is-3d-ready {
  background:
    radial-gradient(circle at 50% 43%, rgba(126, 232, 255, 0.08), transparent 34%),
    radial-gradient(circle at 74% 28%, rgba(195, 105, 255, 0.18), transparent 35%),
    radial-gradient(circle at 18% 78%, rgba(255, 145, 218, 0.08), transparent 34%),
    linear-gradient(150deg, rgba(7, 2, 24, 0.98), rgba(18, 7, 48, 0.92) 54%, rgba(48, 16, 82, 0.84)) !important;
}

body.page-dashboard #mood-planet-canvas,
#mood-planet-canvas {
  transform: scale(0.96) !important;
  transform-origin: center center !important;
}

/* Homepage button comfort pass v3 — final cascade override. */
body.page-dashboard:not(.auth-page) .mood-planet-panel .planet-system-toggle {
  background: rgba(255, 255, 255, 0.075) !important;
  background-image: none !important;
  border: 1px solid rgba(232, 207, 255, 0.22) !important;
  box-shadow: 0 10px 22px rgba(5, 2, 20, 0.16) !important;
  color: rgba(255, 247, 255, 0.88) !important;
}

body.page-dashboard:not(.auth-page) .mood-planet-panel .planet-system-toggle:hover {
  background: rgba(195, 105, 255, 0.16) !important;
  box-shadow: 0 12px 26px rgba(116, 92, 255, 0.2) !important;
}

/* Game planet depth pass v2 — final cascade override for model readability. */
body.page-dashboard .mood-planet-stage,
body.page-dashboard #mood-planet-canvas,
.mood-planet-stage,
#mood-planet-canvas {
  height: clamp(470px, 44vw, 620px) !important;
  min-height: clamp(470px, 44vw, 620px) !important;
}

body.page-dashboard #mood-planet-canvas,
#mood-planet-canvas {
  transform: scale(1.03) !important;
  transform-origin: center center !important;
  filter: drop-shadow(0 28px 46px rgba(5, 2, 20, 0.34)) !important;
}

@media (max-width: 760px) {
  body.page-dashboard .mood-planet-stage,
  body.page-dashboard #mood-planet-canvas,
  .mood-planet-stage,
  #mood-planet-canvas {
    height: 318px !important;
    min-height: 318px !important;
  }
}

@media (max-width: 420px) {
  body.page-dashboard .mood-planet-stage,
  body.page-dashboard #mood-planet-canvas,
  .mood-planet-stage,
  #mood-planet-canvas {
    height: 296px !important;
    min-height: 296px !important;
  }
}

/* Mood Planet Render System v2 — final clean stage override. */
body.page-dashboard .mood-planet-stage.is-3d-ready,
.mood-planet-stage.is-3d-ready,
body.page-dashboard .mood-planet-stage,
.mood-planet-stage {
  background:
    radial-gradient(circle at 50% 46%, rgba(95, 138, 184, 0.14), transparent 36%),
    radial-gradient(circle at 78% 74%, rgba(80, 41, 126, 0.18), transparent 40%),
    linear-gradient(150deg, rgba(5, 3, 18, 0.98), rgba(13, 9, 40, 0.95) 56%, rgba(27, 13, 58, 0.9)) !important;
}

body.page-dashboard .mood-planet-stage.is-3d-ready #mood-planet-canvas,
.mood-planet-stage.is-3d-ready #mood-planet-canvas,
body.page-dashboard #mood-planet-canvas,
#mood-planet-canvas {
  filter: saturate(0.92) contrast(1.04) brightness(0.98) drop-shadow(0 28px 46px rgba(5, 2, 20, 0.34)) !important;
}

/* Mood Planet Render System v3 — GLB model stage readiness. */
body.page-dashboard .mood-planet-stage.has-external-planet-model,
.mood-planet-stage.has-external-planet-model {
  background:
    radial-gradient(circle at 48% 45%, rgba(106, 151, 194, 0.16), transparent 35%),
    radial-gradient(circle at 74% 70%, rgba(69, 37, 117, 0.16), transparent 40%),
    linear-gradient(150deg, rgba(4, 3, 17, 0.99), rgba(12, 9, 38, 0.96) 56%, rgba(26, 13, 55, 0.91)) !important;
}

body.page-dashboard .mood-planet-stage.has-external-planet-model #mood-planet-canvas,
.mood-planet-stage.has-external-planet-model #mood-planet-canvas {
  transform: scale(1) !important;
  filter: saturate(0.88) contrast(1.06) brightness(0.97) drop-shadow(0 30px 52px rgba(3, 2, 14, 0.38)) !important;
}

@media (max-width: 760px) {
  .planet-model-picker {
    gap: 8px;
    margin-top: 14px;
  }

  .planet-model-option {
    flex: 1 1 128px;
    min-width: 0;
    padding: 9px 11px;
  }

  .mood-planet-stage.has-city-kit-models::after,
  .mood-planet-stage.is-city-kit-missing::after,
  .mood-planet-stage.is-planet-model-missing::after {
    right: 12px;
    bottom: 10px;
    padding: 5px 8px;
  }
}

/* Mood Planet zoom mode. */
.planet-zoom-toggle {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 6 !important;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid rgba(232, 207, 255, 0.2);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(13, 9, 34, 0.64);
  color: rgba(250, 246, 255, 0.88);
  box-shadow: 0 12px 26px rgba(3, 2, 14, 0.22);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.planet-zoom-toggle:hover,
.planet-zoom-toggle:focus-visible {
  border-color: rgba(255, 214, 128, 0.44);
  background: rgba(35, 22, 72, 0.72);
  box-shadow: 0 16px 34px rgba(91, 63, 194, 0.24);
  transform: translateY(-1px);
  outline: none;
}

.planet-zoom-toggle[aria-pressed="true"] {
  border-color: rgba(255, 214, 128, 0.52);
  background: rgba(57, 34, 96, 0.76);
}

.planet-zoom-icon {
  font-size: 0.94rem;
  line-height: 1;
}

.planet-zoom-controls {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 7;
  display: none;
  align-items: center;
  gap: 10px;
  width: min(440px, calc(100% - 36px));
  border: 1px solid rgba(232, 207, 255, 0.18);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(13, 9, 34, 0.66);
  box-shadow: 0 16px 34px rgba(3, 2, 14, 0.28);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
}

.planet-zoom-slider-label,
.planet-zoom-value,
.planet-zoom-help {
  flex: 0 0 auto;
  color: rgba(250, 246, 255, 0.82);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.planet-zoom-value {
  min-width: 42px;
  text-align: right;
  color: rgba(255, 214, 128, 0.9);
}

.planet-zoom-help {
  color: rgba(222, 211, 240, 0.58);
  font-size: 0.7rem;
  white-space: nowrap;
}

.planet-zoom-range {
  flex: 1 1 auto;
  width: auto !important;
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  accent-color: #b965ff;
  cursor: pointer;
}

.planet-zoom-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(177, 174, 255, 0.62), rgba(195, 105, 255, 0.82));
}

.planet-zoom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border: 2px solid rgba(255, 247, 255, 0.9);
  border-radius: 999px;
  background: #c369ff;
  box-shadow: 0 0 0 5px rgba(195, 105, 255, 0.18), 0 8px 16px rgba(5, 2, 20, 0.24);
}

.planet-zoom-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(177, 174, 255, 0.62), rgba(195, 105, 255, 0.82));
}

.planet-zoom-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 247, 255, 0.9);
  border-radius: 999px;
  background: #c369ff;
  box-shadow: 0 0 0 5px rgba(195, 105, 255, 0.18), 0 8px 16px rgba(5, 2, 20, 0.24);
}

body.is-planet-zoom-open {
  overflow: hidden;
  transform: none !important;
}

body.is-planet-zoom-open .mood-planet-stage.is-planet-zoomed {
  position: fixed !important;
  inset: max(12px, var(--safe-top)) 12px max(12px, var(--safe-bottom)) 12px !important;
  z-index: 9999 !important;
  width: auto !important;
  height: calc(100dvh - max(12px, var(--safe-top)) - max(12px, var(--safe-bottom))) !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: clamp(22px, 3.4vw, 34px) !important;
  border-color: rgba(232, 207, 255, 0.24) !important;
  background:
    radial-gradient(circle at 48% 45%, rgba(106, 151, 194, 0.12), transparent 34%),
    radial-gradient(circle at 74% 70%, rgba(69, 37, 117, 0.18), transparent 40%),
    linear-gradient(150deg, rgba(4, 3, 17, 0.99), rgba(10, 8, 31, 0.97) 56%, rgba(24, 12, 52, 0.94)) !important;
  box-shadow: 0 28px 92px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
}

body.is-planet-zoom-open .mood-planet-stage.is-planet-zoomed::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(4, 2, 14, 0.74);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body.is-planet-zoom-open .mood-planet-stage.is-planet-zoomed::after {
  display: none !important;
}

body.is-planet-zoom-open .mood-planet-stage.is-planet-zoomed #mood-planet-canvas {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  transform: none !important;
  filter: saturate(0.9) contrast(1.08) brightness(0.98) drop-shadow(0 42px 72px rgba(3, 2, 14, 0.52)) !important;
  cursor: grab;
}

body.is-planet-zoom-open .mood-planet-stage.is-planet-zoomed #mood-planet-canvas:active {
  cursor: grabbing;
}

body.is-planet-zoom-open .mood-planet-stage.is-planet-zoomed .planet-zoom-toggle {
  top: 18px !important;
  right: 18px !important;
}

body.is-planet-zoom-open .mood-planet-stage.is-planet-zoomed .planet-zoom-controls {
  display: flex;
}

@media (max-width: 760px) {
  .planet-zoom-toggle {
    top: 10px !important;
    right: 10px !important;
    min-height: 34px;
    padding: 7px 10px;
  }

  body.is-planet-zoom-open .mood-planet-stage.is-planet-zoomed {
    inset: max(8px, var(--safe-top)) 8px max(8px, var(--safe-bottom)) 8px !important;
    height: calc(100dvh - max(8px, var(--safe-top)) - max(8px, var(--safe-bottom))) !important;
    border-radius: 22px !important;
  }

  body.is-planet-zoom-open .mood-planet-stage.is-planet-zoomed #mood-planet-canvas {
    transform: none !important;
  }

  body.is-planet-zoom-open .mood-planet-stage.is-planet-zoomed .planet-zoom-controls {
    bottom: 12px;
    width: calc(100% - 24px);
    gap: 8px;
    padding: 9px 11px;
  }

  .planet-zoom-slider-label {
    display: none;
  }

  .planet-zoom-help {
    display: none;
  }
}

/* Mood Planet harmony pass — keep model, cities, and mood light in one restrained art direction. */
body.page-dashboard .mood-planet-stage.has-external-planet-model,
.mood-planet-stage.has-external-planet-model {
  background:
    radial-gradient(circle at 48% 44%, rgba(92, 118, 164, 0.1), transparent 38%),
    radial-gradient(circle at 76% 76%, rgba(82, 43, 130, 0.1), transparent 42%),
    linear-gradient(150deg, rgba(3, 3, 14, 0.995), rgba(9, 8, 31, 0.985) 58%, rgba(19, 11, 45, 0.95)) !important;
}

body.page-dashboard .mood-planet-stage.has-external-planet-model #mood-planet-canvas,
.mood-planet-stage.has-external-planet-model #mood-planet-canvas {
  filter: saturate(0.8) contrast(1.03) brightness(0.96) drop-shadow(0 30px 58px rgba(1, 1, 10, 0.46)) !important;
}

body.is-planet-zoom-open .mood-planet-stage.has-external-planet-model.is-planet-zoomed {
  background:
    radial-gradient(circle at 50% 45%, rgba(85, 112, 158, 0.08), transparent 39%),
    radial-gradient(circle at 77% 78%, rgba(71, 39, 120, 0.1), transparent 43%),
    linear-gradient(150deg, rgba(3, 3, 13, 0.998), rgba(8, 7, 28, 0.99) 58%, rgba(17, 10, 42, 0.96)) !important;
}

body.is-planet-zoom-open .mood-planet-stage.has-external-planet-model.is-planet-zoomed #mood-planet-canvas {
  filter: saturate(0.78) contrast(1.04) brightness(0.95) drop-shadow(0 34px 64px rgba(1, 1, 10, 0.56)) !important;
}

body.is-planet-zoom-open .mood-planet-stage.is-planet-zoomed::before {
  background: rgba(3, 2, 12, 0.82) !important;
}

/* Minimal Planet Shell — star-first home and app dock navigation. */
html {
  scroll-behavior: smooth;
}

body:not(.auth-page) {
  min-height: 100svh !important;
  padding-bottom: calc(96px + var(--safe-bottom)) !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(76, 59, 145, 0.1), transparent 34%),
    linear-gradient(180deg, #05040f 0%, #09071c 58%, #120a2a 100%) !important;
  transform: none !important;
}

body:not(.auth-page).is-page-ready,
body:not(.auth-page).is-page-leaving {
  transform: none !important;
}

body:not(.auth-page) .app-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 80 !important;
  padding: calc(10px + var(--safe-top)) 16px 8px !important;
  border: 0 !important;
  background: linear-gradient(180deg, rgba(5, 4, 15, 0.86), rgba(5, 4, 15, 0)) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body:not(.auth-page) .app-toolbar {
  width: min(1120px, 100%) !important;
  min-height: 36px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body:not(.auth-page) .brand-lockup,
body:not(.auth-page) .app-toolbar > div:first-child {
  min-width: 0 !important;
  text-decoration: none !important;
}

body:not(.auth-page) .brand-copy h1,
body:not(.auth-page) .app-header h1 {
  margin: 0 !important;
  color: rgba(255, 251, 255, 0.9) !important;
  font-size: clamp(17px, 2.2vw, 22px) !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
}

body:not(.auth-page) .brand-copy .muted,
body:not(.auth-page) .app-header .muted,
body:not(.auth-page) .app-header .app-nav .nav-link,
body:not(.auth-page) .app-header .app-nav button.secondary {
  display: none !important;
}

body:not(.auth-page) .app-header .app-nav {
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body:not(.auth-page) .app-header .network-chip {
  min-width: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(232, 207, 255, 0.14) !important;
  background: rgba(11, 8, 28, 0.5) !important;
  color: rgba(236, 228, 255, 0.68) !important;
  box-shadow: none !important;
}

body:not(.auth-page) .app-main {
  width: min(940px, calc(100% - 32px)) !important;
  padding-top: calc(72px + var(--safe-top)) !important;
  margin: 0 auto !important;
}

body:not(.auth-page) .page-hero:not(.mood-planet-panel) {
  display: none !important;
}

.app-dock {
  position: fixed;
  left: 50%;
  bottom: calc(14px + var(--safe-bottom));
  z-index: 9000;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  width: min(520px, calc(100% - 28px));
  padding: 7px;
  border: 1px solid rgba(232, 207, 255, 0.14);
  border-radius: 999px;
  background: rgba(7, 5, 18, 0.72);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.035) inset;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  transform: translateX(-50%);
}

.dock-item {
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  background: transparent;
  color: rgba(235, 229, 255, 0.68);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none !important;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.dock-item:hover,
.dock-item:focus-visible,
.dock-item.is-active {
  color: rgba(255, 252, 255, 0.96);
  background: rgba(136, 95, 255, 0.2);
  outline: none;
}

.dock-item.is-active {
  box-shadow: 0 10px 26px rgba(91, 66, 196, 0.2) inset !important;
}

.dock-logout {
  color: rgba(255, 221, 235, 0.76);
}

body.page-dashboard:not(.auth-page) .app-main {
  width: 100% !important;
  padding: 0 0 calc(112px + var(--safe-bottom)) !important;
  overflow-x: hidden !important;
}

body.page-dashboard .mood-planet-panel {
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: 100svh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.page-dashboard .mood-planet-copy,
body.page-dashboard .mood-planet-footer,
body.page-dashboard .planet-model-picker,
body.page-dashboard .planet-stats-strip,
body.page-dashboard .mood-planet-panel.is-systems-collapsed .planet-stats-strip,
body.page-dashboard .mood-planet-panel.is-systems-collapsed .planet-mission-card,
body.page-dashboard .mood-planet-panel:not(.is-systems-collapsed) .planet-stats-strip,
body.page-dashboard .planet-system-toggle,
body.page-dashboard .mood-planet-stage.has-city-kit-models::after,
body.page-dashboard .mood-planet-stage.is-city-kit-missing::after,
body.page-dashboard .mood-planet-stage.is-planet-model-missing::after {
  display: none !important;
}

body.page-dashboard .mood-planet-stage,
body.page-dashboard .mood-planet-stage.is-3d-ready,
body.page-dashboard .mood-planet-stage.has-external-planet-model {
  width: min(100vw, 1060px) !important;
  height: calc(100svh - 86px - var(--safe-top) - var(--safe-bottom)) !important;
  min-height: 520px !important;
  max-height: 820px !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.page-dashboard #mood-planet-canvas {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  transform: scale(1.08) !important;
  filter: saturate(0.82) contrast(1.02) brightness(0.96) drop-shadow(0 40px 78px rgba(0, 0, 0, 0.54)) !important;
}

body.page-dashboard .planet-zoom-toggle {
  position: fixed !important;
  top: calc(82px + var(--safe-top)) !important;
  right: 16px !important;
  background: rgba(8, 6, 22, 0.56) !important;
  border-color: rgba(232, 207, 255, 0.12) !important;
}

body.page-dashboard .dashboard-grid {
  width: min(760px, calc(100% - 32px)) !important;
  margin: 0 auto !important;
  padding: 10px 0 26px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

body.page-dashboard #record-panel {
  scroll-margin-top: 86px;
}

body.page-dashboard .mood-card,
body.page-dashboard .history-card,
body:not(.auth-page) .card {
  border-color: rgba(232, 207, 255, 0.1) !important;
  background: rgba(9, 7, 24, 0.58) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body.page-dashboard .companion-card {
  display: none !important;
}

body.page-dashboard .side-column {
  display: block !important;
}

body.page-dashboard .side-column .history-card {
  margin-top: 0 !important;
}

body.page-report .report-card,
body.page-friends .friends-card,
body.page-settings .settings-language-card,
body.page-settings .invite-card,
body.page-settings .settings-card,
body.page-friend-detail .card {
  margin-bottom: 14px !important;
}

body.is-planet-zoom-open .app-dock {
  display: none;
}

@media (max-width: 760px) {
  body:not(.auth-page) {
    padding-bottom: calc(88px + var(--safe-bottom)) !important;
  }

  body:not(.auth-page) .app-header {
    padding: calc(8px + var(--safe-top)) 12px 6px !important;
  }

  body:not(.auth-page) .app-main {
    width: min(100% - 22px, 940px) !important;
    padding-top: calc(58px + var(--safe-top)) !important;
  }

  body.page-dashboard:not(.auth-page) .app-main {
    width: 100% !important;
    padding-top: 0 !important;
  }

  body.page-dashboard .mood-planet-stage,
  body.page-dashboard .mood-planet-stage.is-3d-ready,
  body.page-dashboard .mood-planet-stage.has-external-planet-model {
    width: 100vw !important;
    height: calc(100svh - 78px - var(--safe-top) - var(--safe-bottom)) !important;
    min-height: 420px !important;
    max-height: none !important;
  }

  body.page-dashboard #mood-planet-canvas {
    transform: scale(1.12) !important;
  }

  body.page-dashboard .dashboard-grid {
    width: min(100% - 22px, 760px) !important;
    padding-top: 4px !important;
  }

  .app-dock {
    width: min(500px, calc(100% - 18px));
    bottom: calc(9px + var(--safe-bottom));
    padding: 6px;
  }

  .dock-item {
    min-height: 40px;
    padding: 0 6px;
    font-size: 0.78rem;
  }
}

@media (max-width: 420px) {
  body.page-dashboard .mood-planet-stage,
  body.page-dashboard .mood-planet-stage.is-3d-ready,
  body.page-dashboard .mood-planet-stage.has-external-planet-model {
    height: calc(100svh - 76px - var(--safe-top) - var(--safe-bottom)) !important;
    min-height: 390px !important;
  }

  body.page-dashboard #mood-planet-canvas {
    transform: scale(1.16) !important;
  }

  .dock-item {
    font-size: 0.74rem;
  }
}

/* Minimal Planet Shell desktop fill patch — remove right dead space and enlarge planet. */
body.page-dashboard:not(.auth-page) .app-main,
body.page-dashboard:not(.auth-page) main {
  width: 100vw !important;
  max-width: none !important;
  overflow-x: hidden !important;
}

body.page-dashboard .mood-planet-panel,
body.page-dashboard section.mood-planet-panel.card {
  width: 100vw !important;
  max-width: none !important;
}

body.page-dashboard .mood-planet-stage,
body.page-dashboard .mood-planet-stage.is-3d-ready,
body.page-dashboard .mood-planet-stage.has-external-planet-model {
  width: 100vw !important;
  max-width: none !important;
  min-width: 100vw !important;
}

body.page-dashboard .mood-planet-stage #mood-planet-canvas,
body.page-dashboard .mood-planet-stage.is-3d-ready #mood-planet-canvas,
body.page-dashboard .mood-planet-stage.has-external-planet-model #mood-planet-canvas {
  width: 100vw !important;
  max-width: none !important;
  transform: scale(1.2) !important;
  transform-origin: center center !important;
}

@media (min-width: 900px) {
  body.page-dashboard .mood-planet-stage,
  body.page-dashboard .mood-planet-stage.is-3d-ready,
  body.page-dashboard .mood-planet-stage.has-external-planet-model {
    height: calc(100svh - 88px - var(--safe-top) - var(--safe-bottom)) !important;
    min-height: 680px !important;
  }

  body.page-dashboard .mood-planet-stage #mood-planet-canvas,
  body.page-dashboard .mood-planet-stage.is-3d-ready #mood-planet-canvas,
  body.page-dashboard .mood-planet-stage.has-external-planet-model #mood-planet-canvas {
    transform: scale(1.28) !important;
  }

  body.page-dashboard .planet-zoom-toggle {
    top: calc(92px + var(--safe-top)) !important;
    right: clamp(26px, 3.2vw, 60px) !important;
  }
}

@media (max-width: 760px) {
  body.page-dashboard .mood-planet-stage #mood-planet-canvas,
  body.page-dashboard .mood-planet-stage.is-3d-ready #mood-planet-canvas,
  body.page-dashboard .mood-planet-stage.has-external-planet-model #mood-planet-canvas {
    transform: scale(1.16) !important;
  }
}

@media (max-width: 420px) {
  body.page-dashboard .mood-planet-stage #mood-planet-canvas,
  body.page-dashboard .mood-planet-stage.is-3d-ready #mood-planet-canvas,
  body.page-dashboard .mood-planet-stage.has-external-planet-model #mood-planet-canvas {
    transform: scale(1.2) !important;
  }
}

/* Product home finish — no stage frame, stable zoom key, stronger brand. */
body.page-dashboard:not(.auth-page) .app-header {
  padding: calc(20px + var(--safe-top)) clamp(22px, 3.8vw, 58px) 0 !important;
  background: linear-gradient(180deg, rgba(5, 4, 15, 0.92), rgba(5, 4, 15, 0)) !important;
}

body.page-dashboard:not(.auth-page) .app-toolbar {
  width: min(1500px, 100%) !important;
}

body.page-dashboard:not(.auth-page) .brand-copy h1,
body.page-dashboard:not(.auth-page) .app-header h1 {
  font-size: clamp(30px, 2.45vw, 46px) !important;
  font-weight: 950 !important;
  letter-spacing: -0.055em !important;
  color: rgba(255, 252, 255, 0.96) !important;
  text-shadow: 0 10px 34px rgba(0, 0, 0, 0.38) !important;
}

body.page-dashboard .mood-planet-panel,
body.page-dashboard section.mood-planet-panel.card,
body.page-dashboard .mood-planet-stage,
body.page-dashboard .mood-planet-stage.is-3d-ready,
body.page-dashboard .mood-planet-stage.has-external-planet-model {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.page-dashboard .mood-planet-panel::before,
body.page-dashboard .mood-planet-panel::after,
body.page-dashboard .mood-planet-stage::before,
body.page-dashboard .mood-planet-stage::after,
body.page-dashboard .mood-planet-stage.is-3d-ready::before,
body.page-dashboard .mood-planet-stage.is-3d-ready::after {
  display: none !important;
  content: none !important;
}

body.page-dashboard .planet-zoom-toggle,
body.page-dashboard .planet-zoom-toggle:hover,
body.page-dashboard .planet-zoom-toggle:focus-visible,
body.page-dashboard .planet-zoom-toggle[aria-pressed="true"] {
  position: fixed !important;
  top: calc(138px + var(--safe-top)) !important;
  right: clamp(22px, 3vw, 54px) !important;
  z-index: 9100 !important;
  min-height: 58px !important;
  min-width: 118px !important;
  padding: 0 22px !important;
  gap: 9px !important;
  border: 1px solid rgba(232, 207, 255, 0.18) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(185, 102, 255, 0.96), rgba(111, 92, 255, 0.94)) !important;
  color: rgba(255, 252, 255, 0.96) !important;
  box-shadow: 0 18px 48px rgba(111, 92, 255, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  transform: none !important;
  will-change: auto !important;
}

body.page-dashboard .planet-zoom-toggle:hover,
body.page-dashboard .planet-zoom-toggle:focus-visible {
  background:
    linear-gradient(135deg, rgba(201, 122, 255, 0.98), rgba(126, 107, 255, 0.96)) !important;
  box-shadow: 0 22px 56px rgba(132, 95, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.12) inset !important;
}

body.page-dashboard .planet-zoom-icon {
  font-size: 1.05rem !important;
}

body.page-dashboard .planet-zoom-label {
  line-height: 1 !important;
}

@media (min-width: 900px) {
  body.page-dashboard .mood-planet-stage #mood-planet-canvas,
  body.page-dashboard .mood-planet-stage.is-3d-ready #mood-planet-canvas,
  body.page-dashboard .mood-planet-stage.has-external-planet-model #mood-planet-canvas {
    transform: scale(1.34) !important;
  }
}

@media (max-width: 760px) {
  body.page-dashboard:not(.auth-page) .app-header {
    padding: calc(14px + var(--safe-top)) 14px 0 !important;
  }

  body.page-dashboard:not(.auth-page) .brand-copy h1,
  body.page-dashboard:not(.auth-page) .app-header h1 {
    font-size: 23px !important;
  }

  body.page-dashboard .planet-zoom-toggle,
  body.page-dashboard .planet-zoom-toggle:hover,
  body.page-dashboard .planet-zoom-toggle:focus-visible,
  body.page-dashboard .planet-zoom-toggle[aria-pressed="true"] {
    top: calc(104px + var(--safe-top)) !important;
    right: 14px !important;
    min-width: 82px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 0.82rem !important;
  }
}

/* Product zoom control v2 — detached from planet stage, no hover frame. */
body.page-dashboard .mood-planet-panel,
body.page-dashboard section.mood-planet-panel.card,
body.page-dashboard .mood-planet-panel:hover,
body.page-dashboard section.mood-planet-panel.card:hover,
body.page-dashboard .mood-planet-panel:focus-within,
body.page-dashboard .mood-planet-stage,
body.page-dashboard .mood-planet-stage:hover,
body.page-dashboard .mood-planet-stage:focus-within,
body.page-dashboard .mood-planet-stage.is-3d-ready,
body.page-dashboard .mood-planet-stage.has-external-planet-model {
  border: 0 !important;
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body.page-dashboard .mood-planet-panel::before,
body.page-dashboard .mood-planet-panel::after,
body.page-dashboard section.mood-planet-panel.card::before,
body.page-dashboard section.mood-planet-panel.card::after,
body.page-dashboard .mood-planet-stage::before,
body.page-dashboard .mood-planet-stage::after,
body.page-dashboard .mood-planet-stage.is-3d-ready::before,
body.page-dashboard .mood-planet-stage.is-3d-ready::after,
body.page-dashboard .mood-planet-stage.has-external-planet-model::before,
body.page-dashboard .mood-planet-stage.has-external-planet-model::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

body.page-dashboard .mood-planet-panel.is-planet-touching .mood-planet-stage,
body.page-dashboard .mood-planet-stage.is-planet-touching {
  transform: none !important;
}

.planet-zoom-ui {
  position: fixed;
  inset: 0;
  z-index: 10060;
  pointer-events: none;
}

body.page-dashboard .planet-zoom-ui .planet-zoom-toggle,
body.page-dashboard .planet-zoom-ui .planet-zoom-toggle:hover,
body.page-dashboard .planet-zoom-ui .planet-zoom-toggle:focus-visible,
body.page-dashboard .planet-zoom-ui .planet-zoom-toggle[aria-pressed="true"] {
  position: fixed !important;
  top: calc(132px + var(--safe-top)) !important;
  right: clamp(28px, 4vw, 72px) !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 126px !important;
  min-height: 62px !important;
  padding: 0 24px !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  outline: 0 !important;
  background:
    linear-gradient(135deg, rgba(168, 96, 255, 0.96), rgba(107, 92, 255, 0.96)) !important;
  color: rgba(255, 252, 255, 0.98) !important;
  box-shadow:
    0 22px 58px rgba(110, 84, 255, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 -14px 30px rgba(70, 39, 160, 0.22) inset !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
  backdrop-filter: blur(20px) saturate(1.08) !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
  transition: background 180ms ease, box-shadow 180ms ease, filter 180ms ease !important;
  will-change: auto !important;
  contain: layout style paint !important;
}

body.page-dashboard .planet-zoom-ui .planet-zoom-toggle:hover,
body.page-dashboard .planet-zoom-ui .planet-zoom-toggle:focus-visible {
  background:
    linear-gradient(135deg, rgba(183, 112, 255, 0.98), rgba(121, 104, 255, 0.98)) !important;
  box-shadow:
    0 26px 68px rgba(124, 95, 255, 0.44),
    0 1px 0 rgba(255, 255, 255, 0.24) inset,
    0 -14px 30px rgba(70, 39, 160, 0.18) inset !important;
  filter: brightness(1.03) !important;
}

body.page-dashboard .planet-zoom-ui .planet-zoom-icon {
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.13) !important;
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: 0.94rem !important;
  line-height: 1 !important;
}

body.page-dashboard .planet-zoom-ui .planet-zoom-label {
  white-space: nowrap !important;
  line-height: 1 !important;
}

body.page-dashboard .planet-zoom-ui .planet-zoom-controls {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(112px + var(--safe-bottom)) !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: min(520px, calc(100vw - 44px)) !important;
  min-height: 58px !important;
  padding: 10px 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(8, 5, 22, 0.72) !important;
  box-shadow:
    0 26px 72px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.07) inset !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
  backdrop-filter: blur(22px) saturate(1.08) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(-50%, 16px, 0) scale(0.98) !important;
  transition: opacity 180ms ease, transform 180ms ease !important;
}

body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-controls,
body.page-dashboard .planet-zoom-ui.is-active .planet-zoom-controls {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate3d(-50%, 0, 0) scale(1) !important;
}

body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-toggle,
body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-toggle:hover,
body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-toggle:focus-visible,
body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-toggle[aria-pressed="true"] {
  top: calc(22px + var(--safe-top)) !important;
  right: clamp(18px, 2vw, 30px) !important;
}

body.is-planet-zoom-open .mood-planet-stage.is-planet-zoomed #mood-planet-canvas,
body.page-dashboard.is-planet-zoom-open .mood-planet-stage.is-planet-zoomed #mood-planet-canvas {
  transform: none !important;
}

body.page-dashboard .planet-zoom-ui .planet-zoom-slider-label,
body.page-dashboard .planet-zoom-ui .planet-zoom-value,
body.page-dashboard .planet-zoom-ui .planet-zoom-help {
  color: rgba(250, 246, 255, 0.78) !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
}

body.page-dashboard .planet-zoom-ui .planet-zoom-value {
  min-width: 46px !important;
  color: rgba(239, 214, 255, 0.96) !important;
}

body.page-dashboard .planet-zoom-ui .planet-zoom-help {
  color: rgba(222, 211, 240, 0.5) !important;
}

body.page-dashboard .planet-zoom-ui .planet-zoom-range::-webkit-slider-runnable-track {
  height: 7px !important;
  background: linear-gradient(90deg, rgba(128, 120, 255, 0.44), rgba(187, 105, 255, 0.92)) !important;
}

body.page-dashboard .planet-zoom-ui .planet-zoom-range::-webkit-slider-thumb {
  width: 20px !important;
  height: 20px !important;
  margin-top: -6.5px !important;
  border: 2px solid rgba(255, 247, 255, 0.96) !important;
  background: linear-gradient(135deg, #f5dcff, #a867ff) !important;
  box-shadow: 0 0 0 6px rgba(184, 102, 255, 0.18), 0 10px 20px rgba(5, 2, 20, 0.28) !important;
}

@media (min-width: 900px) {
  body.page-dashboard:not(.auth-page) .brand-copy h1,
  body.page-dashboard:not(.auth-page) .app-header h1 {
    font-size: clamp(42px, 3.2vw, 64px) !important;
  }
}

@media (max-width: 760px) {
  body.page-dashboard .planet-zoom-ui .planet-zoom-toggle,
  body.page-dashboard .planet-zoom-ui .planet-zoom-toggle:hover,
  body.page-dashboard .planet-zoom-ui .planet-zoom-toggle:focus-visible,
  body.page-dashboard .planet-zoom-ui .planet-zoom-toggle[aria-pressed="true"] {
    top: calc(104px + var(--safe-top)) !important;
    right: 14px !important;
    min-width: 88px !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    gap: 8px !important;
    font-size: 0.84rem !important;
  }

  body.page-dashboard .planet-zoom-ui .planet-zoom-icon {
    width: 19px !important;
    height: 19px !important;
    border-radius: 7px !important;
    font-size: 0.82rem !important;
  }

  body.page-dashboard .planet-zoom-ui .planet-zoom-controls {
    bottom: calc(92px + var(--safe-bottom)) !important;
    width: calc(100vw - 22px) !important;
    min-height: 52px !important;
    gap: 10px !important;
    padding: 9px 12px !important;
  }

  body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-toggle,
  body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-toggle:hover,
  body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-toggle:focus-visible,
  body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-toggle[aria-pressed="true"] {
    top: calc(18px + var(--safe-top)) !important;
    right: 14px !important;
  }
}

/* Product shell hard cleanup — no legacy frame, no online badge. */
body.page-dashboard:not(.auth-page),
body.page-dashboard:not(.auth-page) .app-shell,
body.page-dashboard:not(.auth-page) .app-main,
body.page-dashboard:not(.auth-page) main {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body.page-dashboard:not(.auth-page)::before,
body.page-dashboard:not(.auth-page)::after,
body.page-dashboard:not(.auth-page) .app-main::before,
body.page-dashboard:not(.auth-page) .app-main::after,
body.page-dashboard:not(.auth-page) main::before,
body.page-dashboard:not(.auth-page) main::after {
  display: none !important;
  content: none !important;
}

body:not(.auth-page) .app-header,
body:not(.auth-page) header,
body.page-dashboard:not(.auth-page) .app-header,
body.page-dashboard:not(.auth-page) header {
  border: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body:not(.auth-page) .app-header .app-nav,
body:not(.auth-page) .app-header .network-chip,
body:not(.auth-page) [data-network-status] {
  display: none !important;
}

body.page-dashboard .mood-planet-panel,
body.page-dashboard section.mood-planet-panel.card,
body.page-dashboard .mood-planet-stage,
body.page-dashboard .mood-planet-stage.is-3d-ready,
body.page-dashboard .mood-planet-stage.has-external-planet-model,
body.page-dashboard #mood-planet-canvas {
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body.page-dashboard .mood-planet-panel *,
body.page-dashboard .mood-planet-stage *,
body.page-dashboard #mood-planet-canvas {
  outline: 0 !important;
}

body.page-dashboard .planet-city-sheet {
  border: 0 !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34) !important;
}

body.page-dashboard .app-dock {
  border: 0 !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42) !important;
  background: rgba(7, 5, 18, 0.78) !important;
}

body.page-dashboard .dock-item,
body.page-dashboard .dock-item:hover,
body.page-dashboard .dock-item:focus-visible,
body.page-dashboard .dock-item.is-active {
  outline: 0 !important;
  box-shadow: none !important;
}

body.page-dashboard .dock-item.is-active {
  background: rgba(136, 95, 255, 0.24) !important;
}

body.page-dashboard .planet-zoom-ui .planet-zoom-toggle,
body.page-dashboard .planet-zoom-ui .planet-zoom-toggle:hover,
body.page-dashboard .planet-zoom-ui .planet-zoom-toggle:focus-visible,
body.page-dashboard .planet-zoom-ui .planet-zoom-toggle[aria-pressed="true"],
body.page-dashboard .planet-zoom-ui .planet-zoom-controls {
  border: 0 !important;
  outline: 0 !important;
}

body.page-dashboard .planet-zoom-ui .planet-zoom-controls {
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.48) !important;
}

html body:not(.auth-page) header.app-header div.row.app-nav,
html body:not(.auth-page) header.app-header .app-toolbar > div.row.app-nav,
html body:not(.auth-page) header.app-header .app-nav,
html body:not(.auth-page) header.app-header .app-nav > span.network-chip[data-network-status],
html body:not(.auth-page) header.app-header span.network-chip[data-network-status],
html body:not(.auth-page) span.network-chip[data-network-status] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

body.is-planet-zoom-open .app-header,
body.is-planet-zoom-open .dashboard-grid,
body.is-planet-zoom-open .app-dock {
  display: none !important;
}

body.is-planet-zoom-open .mood-planet-stage.is-planet-zoomed,
body.page-dashboard.is-planet-zoom-open .mood-planet-stage.is-planet-zoomed {
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body.is-planet-zoom-open .mood-planet-stage.is-planet-zoomed::before,
body.is-planet-zoom-open .mood-planet-stage.is-planet-zoomed::after {
  display: none !important;
  content: none !important;
}

body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-controls {
  bottom: calc(24px + var(--safe-bottom)) !important;
}

/* Planet shell final cleanup v3 — remove all stage frames and stabilize zoom UI. */
html body.page-dashboard .mood-planet-panel,
html body.page-dashboard .mood-planet-panel.card,
html body.page-dashboard section.mood-planet-panel,
html body.page-dashboard section.mood-planet-panel.card,
html body.page-dashboard .mood-planet-panel:hover,
html body.page-dashboard .mood-planet-panel:focus,
html body.page-dashboard .mood-planet-panel:focus-within,
html body.page-dashboard section.mood-planet-panel.card:hover,
html body.page-dashboard section.mood-planet-panel.card:focus-within,
html body.page-dashboard .mood-planet-stage,
html body.page-dashboard .mood-planet-stage:hover,
html body.page-dashboard .mood-planet-stage:focus,
html body.page-dashboard .mood-planet-stage:focus-within,
html body.page-dashboard .mood-planet-stage.is-3d-ready,
html body.page-dashboard .mood-planet-stage.has-external-planet-model,
html body.page-dashboard .mood-planet-stage.is-planet-touching,
html body.page-dashboard #mood-planet-canvas,
html body.page-dashboard #mood-planet-canvas:hover,
html body.page-dashboard #mood-planet-canvas:focus {
  background: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.page-dashboard .mood-planet-panel::before,
html body.page-dashboard .mood-planet-panel::after,
html body.page-dashboard section.mood-planet-panel::before,
html body.page-dashboard section.mood-planet-panel::after,
html body.page-dashboard .mood-planet-stage::before,
html body.page-dashboard .mood-planet-stage::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.page-dashboard .planet-zoom-ui {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10080 !important;
  pointer-events: none !important;
  transform: none !important;
  contain: none !important;
}

html body.page-dashboard .planet-zoom-ui .planet-zoom-toggle,
html body.page-dashboard .planet-zoom-ui .planet-zoom-toggle:hover,
html body.page-dashboard .planet-zoom-ui .planet-zoom-toggle:focus,
html body.page-dashboard .planet-zoom-ui .planet-zoom-toggle:focus-visible,
html body.page-dashboard .planet-zoom-ui .planet-zoom-toggle:active,
html body.page-dashboard .planet-zoom-ui .planet-zoom-toggle.is-pressing,
html body.page-dashboard .planet-zoom-ui .planet-zoom-toggle[aria-pressed],
html body.page-dashboard:not(.is-planet-zoom-open) .planet-zoom-ui .planet-zoom-toggle {
  position: fixed !important;
  top: calc(122px + var(--safe-top)) !important;
  right: clamp(22px, 3.2vw, 56px) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 10081 !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  outline: 0 !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.26), transparent 30%),
    linear-gradient(145deg, rgba(142, 96, 255, 0.92), rgba(99, 82, 220, 0.88)) !important;
  color: rgba(255, 252, 255, 0.98) !important;
  box-shadow:
    0 18px 52px rgba(86, 62, 218, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  filter: none !important;
  transform: translate3d(0, 0, 0) !important;
  transition: background 160ms ease, box-shadow 160ms ease, opacity 160ms ease !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  user-select: none !important;
  contain: paint !important;
}

html body.page-dashboard .planet-zoom-ui .planet-zoom-toggle:hover,
html body.page-dashboard .planet-zoom-ui .planet-zoom-toggle:focus-visible {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.32), transparent 30%),
    linear-gradient(145deg, rgba(158, 108, 255, 0.96), rgba(109, 90, 232, 0.92)) !important;
  box-shadow:
    0 20px 58px rgba(93, 67, 230, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
  transform: translate3d(0, 0, 0) !important;
}

html body.page-dashboard .planet-zoom-ui .planet-zoom-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1rem !important;
}

html body.page-dashboard:not(.is-planet-zoom-open) .planet-zoom-ui .planet-zoom-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
}

html body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-toggle,
html body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-toggle:hover,
html body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-toggle:focus-visible,
html body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-toggle:active,
html body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-toggle[aria-pressed="true"] {
  top: calc(22px + var(--safe-top)) !important;
  right: clamp(18px, 2.2vw, 32px) !important;
  width: auto !important;
  min-width: 112px !important;
  max-width: none !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 17px !important;
  gap: 8px !important;
  border-radius: 999px !important;
  transform: translate3d(0, 0, 0) !important;
}

html body.page-dashboard .planet-zoom-ui .planet-zoom-controls,
html body.page-dashboard .planet-zoom-ui .planet-zoom-controls:hover,
html body.page-dashboard .planet-zoom-ui .planet-zoom-controls:focus-within {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(104px + var(--safe-bottom)) !important;
  z-index: 10081 !important;
  width: min(460px, calc(100vw - 32px)) !important;
  min-height: 54px !important;
  padding: 9px 14px !important;
  border: 0 !important;
  border-radius: 28px !important;
  outline: 0 !important;
  background: rgba(8, 5, 22, 0.74) !important;
  box-shadow:
    0 22px 68px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
  transform: translate3d(-50%, 14px, 0) scale(0.98) !important;
  pointer-events: none !important;
}

html body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-controls,
html body.page-dashboard .planet-zoom-ui.is-active .planet-zoom-controls {
  opacity: 1 !important;
  transform: translate3d(-50%, 0, 0) scale(1) !important;
  pointer-events: auto !important;
}

@media (max-width: 760px) {
  html body.page-dashboard .planet-zoom-ui .planet-zoom-toggle,
  html body.page-dashboard .planet-zoom-ui .planet-zoom-toggle:hover,
  html body.page-dashboard .planet-zoom-ui .planet-zoom-toggle:focus-visible,
  html body.page-dashboard .planet-zoom-ui .planet-zoom-toggle[aria-pressed],
  html body.page-dashboard:not(.is-planet-zoom-open) .planet-zoom-ui .planet-zoom-toggle {
    top: calc(94px + var(--safe-top)) !important;
    right: 14px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
  }

  html body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-toggle,
  html body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-toggle:hover,
  html body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-toggle:focus-visible,
  html body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-toggle[aria-pressed="true"] {
    top: calc(16px + var(--safe-top)) !important;
    right: 14px !important;
    width: auto !important;
    min-width: 106px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
  }

  html body.page-dashboard .planet-zoom-ui .planet-zoom-controls {
    bottom: calc(88px + var(--safe-bottom)) !important;
    width: calc(100vw - 24px) !important;
  }
}

/* Planet zoom open-state lock — final rule must stay last. */
html body.page-dashboard.is-planet-zoom-open .planet-zoom-ui .planet-zoom-controls,
html body.page-dashboard.is-planet-zoom-open .planet-zoom-ui.is-active .planet-zoom-controls,
html body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-controls,
html body.is-planet-zoom-open .planet-zoom-ui.is-active .planet-zoom-controls {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate3d(-50%, 0, 0) scale(1) !important;
}

/* Full-page QA fixes — keep overlays above the planet and clear the bottom dock. */
html body.page-dashboard .planet-zoom-ui,
html body.page-dashboard.is-planet-zoom-open .planet-zoom-ui,
html body.is-planet-zoom-open .planet-zoom-ui {
  z-index: 2147483000 !important;
  pointer-events: none !important;
  isolation: isolate !important;
}

html body.page-dashboard .planet-zoom-ui .planet-zoom-toggle,
html body.page-dashboard .planet-zoom-ui .planet-zoom-controls,
html body.page-dashboard.is-planet-zoom-open .planet-zoom-ui .planet-zoom-toggle,
html body.page-dashboard.is-planet-zoom-open .planet-zoom-ui .planet-zoom-controls,
html body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-toggle,
html body.is-planet-zoom-open .planet-zoom-ui .planet-zoom-controls {
  z-index: 2147483001 !important;
  pointer-events: auto !important;
}

html body.page-dashboard .planet-city-sheet,
html body.page-dashboard .planet-city-sheet.is-visible {
  z-index: 2147482998 !important;
}

html body.page-dashboard .planet-city-sheet__close {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 2147482999 !important;
}

html body.page-dashboard.is-planet-zoom-open .planet-city-sheet,
html body.is-planet-zoom-open .planet-city-sheet,
html body.page-dashboard.is-planet-zoom-open .planet-city-sheet.is-visible,
html body.is-planet-zoom-open .planet-city-sheet.is-visible {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body.page-settings .app-main {
  padding-bottom: calc(128px + var(--safe-bottom)) !important;
}

html body.page-settings .settings-card {
  margin-bottom: calc(96px + var(--safe-bottom)) !important;
}

html body.page-settings .setting-item {
  position: relative !important;
  z-index: 9010 !important;
  scroll-margin-bottom: calc(130px + var(--safe-bottom)) !important;
}

html body.page-settings .setting-item input[type="checkbox"] {
  position: relative !important;
  z-index: 9011 !important;
  min-width: 52px !important;
  width: 52px !important;
  min-height: 32px !important;
  height: 32px !important;
}

html body.page-settings .setting-item input[type="checkbox"]::after {
  top: 4px !important;
  left: 4px !important;
  width: 24px !important;
  height: 24px !important;
}

html body.page-settings .setting-item input[type="checkbox"]:checked::after {
  transform: translateX(20px) !important;
}

/* QA viewport lock — keep the planet stage inside the visible page, not the padded panel. */
html body.page-dashboard,
html body.page-dashboard:not(.auth-page),
html body.page-dashboard .app-shell,
html body.page-dashboard .app-main,
html body.page-dashboard main {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

html body.page-dashboard .mood-planet-panel,
html body.page-dashboard .mood-planet-panel.card,
html body.page-dashboard section.mood-planet-panel,
html body.page-dashboard section.mood-planet-panel.card {
  width: 100% !important;
  max-width: 100% !important;
  padding-inline: 0 !important;
  overflow: hidden !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
}

html body.page-dashboard .mood-planet-stage,
html body.page-dashboard .mood-planet-stage.is-3d-ready,
html body.page-dashboard .mood-planet-stage.has-external-planet-model {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  width: 100vw !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  transform: none !important;
}

html body.page-dashboard #mood-planet-canvas,
html body.page-dashboard .mood-planet-stage #mood-planet-canvas,
html body.page-dashboard .mood-planet-stage.is-3d-ready #mood-planet-canvas,
html body.page-dashboard .mood-planet-stage.has-external-planet-model #mood-planet-canvas {
  width: 100vw !important;
  max-width: none !important;
  height: 100% !important;
  transform: none !important;
  transform-origin: center center !important;
}

html body:not(.page-dashboard) .planet-city-sheet,
html body:not(.page-dashboard) .planet-zoom-ui {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body.page-dashboard .planet-city-sheet {
  position: fixed !important;
  right: clamp(16px, 3vw, 34px) !important;
  bottom: calc(116px + var(--safe-bottom)) !important;
  width: min(430px, calc(100vw - 32px)) !important;
  max-height: min(48vh, 430px) !important;
  border-radius: 24px !important;
}

html body:not(.auth-page) .brand-lockup {
  min-height: 44px !important;
  align-items: center !important;
}

html body.auth-page .auth-footer-link .soft-link {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 36px !important;
  padding-inline: 4px !important;
}

@media (max-width: 760px) {
  html body.page-settings .settings-language-card,
  html body.page-settings .invite-card,
  html body.page-settings .settings-card {
    padding: 12px !important;
    margin-bottom: 10px !important;
  }

  html body.page-settings .settings-language-card .section-heading,
  html body.page-settings .settings-card > h2,
  html body.page-settings .invite-card > h2 {
    margin-bottom: 10px !important;
  }

  html body.page-settings .settings-language-card .chip,
  html body.page-settings .setting-item--language .muted {
    display: none !important;
  }

  html body.page-settings .setting-item--language {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 52px !important;
  }

  html body.page-settings .settings-lang-control {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  html body.page-settings .settings-lang-control button {
    min-height: 36px !important;
    padding-inline: 12px !important;
  }

  html body.page-settings .invite-card .status-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 44px !important;
  }

  html body.page-settings .invite-card .code {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    font-size: 0.88rem !important;
  }

  html body.page-settings .invite-card .secondary,
  html body.page-settings #copy-code-btn {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    padding-inline: 12px !important;
  }

  html body.page-settings .setting-list {
    gap: 6px !important;
  }

  html body.page-settings .setting-item {
    min-height: 44px !important;
    padding: 6px 10px !important;
    margin-bottom: 3px !important;
  }
}

/* QA14 terminal overrides — these rules must be last in the file. */
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage:hover,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage:focus,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage:focus-within,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage.is-3d-ready,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage.has-external-planet-model,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage.is-planet-touching,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage.is-3d-ready.has-external-planet-model {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage #mood-planet-canvas#mood-planet-canvas,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage:hover #mood-planet-canvas#mood-planet-canvas,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage:focus-within #mood-planet-canvas#mood-planet-canvas,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage.is-3d-ready #mood-planet-canvas#mood-planet-canvas,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage.has-external-planet-model #mood-planet-canvas#mood-planet-canvas,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage.is-planet-touching #mood-planet-canvas#mood-planet-canvas,
html body.page-dashboard section.mood-planet-panel.card .mood-planet-stage.mood-planet-stage.is-3d-ready.has-external-planet-model #mood-planet-canvas#mood-planet-canvas {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

html body.page-dashboard .planet-city-sheet.planet-city-sheet .planet-city-sheet__close,
html body.page-dashboard .planet-city-sheet.planet-city-sheet .planet-city-sheet__close:hover,
html body.page-dashboard .planet-city-sheet.planet-city-sheet .planet-city-sheet__close:focus-visible {
  position: absolute !important;
  display: grid !important;
  place-items: center !important;
  top: 14px !important;
  right: 14px !important;
  bottom: auto !important;
  left: auto !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.22), transparent 32%),
    linear-gradient(145deg, rgba(151, 98, 255, 0.94), rgba(101, 83, 224, 0.9)) !important;
  color: rgba(255, 252, 255, 0.96) !important;
  box-shadow:
    0 10px 28px rgba(90, 64, 218, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

html body.page-dashboard .planet-city-sheet.planet-city-sheet .planet-city-sheet__close::before {
  content: "" !important;
  position: absolute !important;
  inset: -7px !important;
  border-radius: 18px !important;
}

html body:not(.auth-page) .app-dock.app-dock {
  --dock-surface: rgba(7, 5, 20, 0.78);
  --dock-line: rgba(218, 199, 255, 0.18);
  left: 50% !important;
  right: auto !important;
  bottom: calc(14px + var(--safe-bottom)) !important;
  width: min(690px, calc(100vw - 32px)) !important;
  min-height: 68px !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 7px !important;
  border: 0 !important;
  border-radius: 26px !important;
  outline: 0 !important;
  overflow: visible !important;
  isolation: isolate !important;
  background:
    linear-gradient(180deg, rgba(17, 10, 39, 0.88), rgba(7, 5, 20, 0.88)),
    radial-gradient(circle at 18% 0%, rgba(134, 96, 255, 0.2), transparent 42%) !important;
  box-shadow:
    0 26px 90px rgba(0, 0, 0, 0.5),
    0 16px 54px rgba(82, 54, 180, 0.2) !important;
  transform: translate3d(-50%, 0, 0) !important;
}

html body:not(.auth-page) .app-dock.app-dock::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: -1 !important;
  padding: 1px !important;
  border-radius: 27px !important;
  background:
    conic-gradient(from var(--dock-orbit), transparent 0deg, transparent 38deg, rgba(155, 118, 255, 0.18) 58deg, rgba(238, 225, 255, 0.82) 76deg, rgba(124, 108, 255, 0.38) 96deg, transparent 128deg, transparent 206deg, rgba(100, 215, 255, 0.16) 232deg, rgba(194, 148, 255, 0.62) 250deg, transparent 286deg, transparent 360deg) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.94 !important;
  pointer-events: none !important;
  animation: moodDockOrbit 7.5s linear infinite !important;
}

html body:not(.auth-page) .app-dock.app-dock::after {
  content: "" !important;
  position: absolute !important;
  inset: -10px !important;
  z-index: -2 !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 9% 42%, rgba(232, 218, 255, 0.7) 0 1.4px, transparent 2px),
    radial-gradient(circle at 27% 101%, rgba(112, 215, 255, 0.56) 0 1.2px, transparent 2px),
    radial-gradient(circle at 49% -2%, rgba(177, 119, 255, 0.62) 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 72% 104%, rgba(234, 222, 255, 0.62) 0 1.2px, transparent 2px),
    radial-gradient(circle at 91% 36%, rgba(145, 123, 255, 0.7) 0 1.5px, transparent 2.4px),
    radial-gradient(ellipse at 50% 50%, rgba(130, 96, 255, 0.2), transparent 62%) !important;
  opacity: 0.76 !important;
  pointer-events: none !important;
  animation: moodDockParticles 4.8s ease-in-out infinite alternate !important;
}

html body:not(.auth-page) .app-dock.app-dock .dock-item {
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:not(.auth-page) .app-dock.app-dock .dock-item:not(:first-child)::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 1px !important;
  background: linear-gradient(180deg, transparent, rgba(234, 222, 255, 0.14), rgba(139, 112, 255, 0.26), rgba(234, 222, 255, 0.12), transparent) !important;
  pointer-events: none !important;
}