/* Account, personality, tarot, and readability layer. Loaded after the base theme. */
:root {
  --ui-text-size: 18px;
  --ui-small-size: 16px;
  --ui-control-size: 17px;
  --ui-soft: #f4f8f6;
  --ui-soft-blue: #eff6f7;
  --ui-soft-sand: #fbf6e9;
  --ui-border: #dfe9e6;
  --ui-green: #386f64;
  --ui-green-dark: #284f49;
  --ui-ink: #2b424a;
  --ui-muted: #687e83;
}

html {
  scroll-padding-top: 92px;
}

body {
  font-family: "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  font-size: var(--ui-text-size);
  line-height: 1.75;
}

.hero-copy {
  font-size: 17px;
}

.hero {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.74) 48%, rgba(255, 255, 255, 0.48) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.34)),
    url("./sea-breeze-hero.svg") center / cover no-repeat,
    #f6faf8;
}

.hero::before {
  opacity: 0.42;
}

.hero-copy,
.section-note,
.card-text,
.privacy-note,
.quick-copy,
.profile-card-head .card-text,
.fortune-tone,
.fortune-subtone,
.star-overview,
.star-point p,
.personality-intro .card-text,
.lot-card .card-text,
.tarot-copy,
.tarot-reading,
.login-help,
.field-hint {
  font-size: 17px;
  line-height: 1.75;
}

.metric-label,
.metric-foot,
.card-label,
.section-kicker,
.quick-label,
.privacy-note,
.status-dot,
.live-clock,
.fortune-kicker,
.star-kicker,
.star-meta,
.star-date,
.personality-progress-label,
.lot-ritual-status {
  font-size: 16px;
}

.hero-meta > span,
.pill,
.index-core-label,
.index-caption,
.profile-form label,
.bazi-card .pillar-label,
.bazi-card .pillar-meta,
.bazi-card .summary-label,
.bazi-card .summary-value,
.bazi-card .element-name,
.star-card .star-point > span,
.star-card .star-foot span,
.personality-card .personality-formula span,
.personality-card .personality-progress > span,
.lot-card .lot-intent-group > span,
.lot-card .lot-number,
.lot-card .lot-verse,
.corner-card .mini-feature-label,
.corner-card .mini-feature p,
.classroom-tip,
.hex-name {
  font-size: 16px;
  line-height: 1.65;
}

.topnav a {
  font-size: 16px;
}

.hero-metric small,
.bazi-card p[style],
.bazi-card span[style],
.star-card .star-reading-head p,
.personality-card .personality-formula strong,
.personality-card .personality-formula i {
  font-size: 16px;
}

.sound-card .sound-name span,
.sound-card .sound-name small,
.sound-card .volume-value,
.sound-card .sound-note,
.notes-card .note-item p,
.notes-card .note-item span,
.wallpaper-name,
.footer .disclaimer,
.footer > div,
.footer-right div,
.footer strong,
.footer p {
  font-size: 16px;
  line-height: 1.7;
}

.fortune-card .fortune-date,
.fortune-card .fortune-kicker,
.fortune-card .fortune-subtone,
.fortune-card .module-label,
.fortune-card .module-label span:last-child,
.fortune-card .color-name,
.fortune-card .travel-copy,
.fortune-card .fortune-mini-list li,
.fortune-card .fortune-number small,
.fortune-card .privacy-note,
.fortune-card small,
.star-card small,
.star-card .star-meta,
.star-card .star-kicker,
.bazi-card small,
.lot-card small,
.profile-card small {
  font-size: 16px;
  line-height: 1.65;
}

.fortune-card .yi-ji-title,
.fortune-card .travel-title,
.fortune-card .color-name,
.fortune-card .module-label {
  font-size: 17px;
}

.fortune-card .yi-ji-items {
  font-size: 16px;
  line-height: 1.75;
}

.btn,
button:not(.quick-card):not(.wallpaper-option),
input,
select,
textarea {
  font-size: var(--ui-control-size);
}

.quick-title {
  font-size: 22px;
  line-height: 1.4;
}

.quick-strip {
  grid-template-columns: 1.2fr repeat(4, minmax(0, 0.8fr));
}

.index-orbit {
  height: 252px;
}

.index-orbit::before {
  bottom: 18px;
}

.index-core {
  top: 54px;
}

.quick-label,
.card-label,
.section-kicker {
  letter-spacing: 0.08em;
}

.account-entry {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid #dbe8e4;
  border-radius: 999px;
  background: #fff;
  color: var(--ui-green-dark);
  font-size: 16px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition: 160ms ease;
}

.account-entry:hover {
  border-color: #bdd8d0;
  background: #f2f8f5;
  transform: translateY(-1px);
}

.account-entry.is-signed-in {
  background: #eaf5f1;
}

.account-dialog {
  width: min(780px, calc(100vw - 32px));
  max-height: min(90vh, 860px);
  padding: 0;
  overflow: auto;
  border: 1px solid #dce8e5;
  border-radius: 28px;
  background: #fdfefd;
  color: var(--ui-ink);
  box-shadow: 0 30px 90px rgba(36, 67, 66, 0.24);
}

.account-dialog::backdrop {
  background: rgba(24, 47, 50, 0.38);
  backdrop-filter: blur(5px);
}

.account-dialog-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px 16px;
  border-bottom: 1px solid #edf2f0;
  background: rgba(253, 254, 253, 0.96);
  backdrop-filter: blur(12px);
}

.account-dialog-title {
  margin: 0;
  color: #29474b;
  font-size: 26px;
  font-weight: 650;
}

.dialog-close {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #e3ebe8;
  border-radius: 50%;
  background: #fff;
  color: #587175;
  font-size: 24px;
  cursor: pointer;
}

.account-body {
  padding: 22px 26px 30px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  padding: 6px;
  border-radius: 16px;
  background: #edf4f2;
}

.auth-tab {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #668085;
  font-weight: 650;
  cursor: pointer;
}

.auth-tab[aria-selected="true"] {
  background: #fff;
  color: #285e55;
  box-shadow: 0 5px 18px rgba(43, 76, 72, 0.08);
}

.auth-panel[hidden] {
  display: none;
}

.auth-panel {
  padding-top: 22px;
}

.auth-panel h3 {
  margin-bottom: 7px;
  color: #2c4b4e;
  font-size: 24px;
}

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

.login-field {
  display: grid;
  gap: 7px;
}

.login-field.full {
  grid-column: 1 / -1;
}

.login-field > span,
.login-field > label {
  color: #51696e;
  font-size: 16px;
  font-weight: 650;
}

.login-field input,
.login-field select {
  width: 100%;
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid #dce7e4;
  border-radius: 12px;
  background: #fff;
  color: #294047;
}

.inline-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.btn-code {
  min-height: 48px;
  padding: 9px 14px;
  border: 1px solid #c9ded8;
  border-radius: 12px;
  background: #edf7f3;
  color: #32695f;
  font-weight: 650;
  cursor: pointer;
}

.calendar-switch {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: #eef4f2;
}

.calendar-switch button {
  min-width: 76px;
  min-height: 38px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #667d80;
  cursor: pointer;
}

.calendar-switch button[aria-selected="true"] {
  background: #fff;
  color: #2e6b60;
  box-shadow: 0 4px 12px rgba(37, 74, 68, 0.08);
}

.lunar-fields[hidden],
.solar-fields[hidden] {
  display: none;
}

.lunar-date-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 10px;
}

.shichen-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.shichen-chip {
  min-height: 38px;
  padding: 6px 11px;
  border: 1px solid #dde8e5;
  border-radius: 999px;
  background: #f8fbfa;
  color: #5f777b;
  cursor: pointer;
}

.shichen-chip.active {
  border-color: #b8d7cf;
  background: #e8f5f0;
  color: #2e685d;
  font-weight: 650;
}

.auth-submit {
  width: 100%;
  min-height: 50px;
  margin-top: 5px;
}

.auth-secondary {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #4f7c73;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.auth-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ui-soft-sand);
  color: #756c55;
  font-size: 16px;
}

.auth-message {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 10px;
  color: #35655d;
  background: #edf7f2;
  font-size: 16px;
}

.auth-message.error {
  color: #8b453b;
  background: #fff1ed;
}

.account-panel-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.account-avatar {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg, #dcefe9, #f7ead0);
  color: #315f58;
  font-size: 26px;
  font-weight: 700;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.soul-seal-card {
  grid-column: span 12;
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(circle at 92% 12%, rgba(240, 210, 144, 0.28), transparent 24%),
    linear-gradient(145deg, #ffffff, #f3faf7);
}

.soul-seal-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 24px;
  padding: 26px;
}

.soul-seal-card h3 {
  margin: 4px 0 8px;
  color: #284c4e;
  font-size: 28px;
}

.seal-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.seal-pillar {
  padding: 14px 10px;
  border: 1px solid #e0eae6;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.76);
  text-align: center;
}

.seal-pillar small {
  display: block;
  color: #798d8e;
  font-size: 16px;
}

.seal-pillar strong {
  display: block;
  margin-top: 3px;
  color: #315e56;
  font-size: 24px;
}

.seal-stamp {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 210px;
  border: 1px solid rgba(168, 113, 61, 0.28);
  border-radius: 22px;
  background:
    linear-gradient(rgba(176, 103, 65, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176, 103, 65, 0.06) 1px, transparent 1px),
    #fffaf1;
  background-size: 20px 20px;
  color: #9b5e43;
  text-align: center;
}

.seal-stamp-mark {
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  border: 2px solid rgba(162, 86, 55, 0.62);
  border-radius: 18px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transform: rotate(-4deg);
}

.seal-stamp small {
  font-size: 16px;
}

.bazi-card [style*="Consolas"] {
  font-size: 16px !important;
}

.seal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.seal-meta span,
.result-badge {
  padding: 6px 11px;
  border: 1px solid #dae7e3;
  border-radius: 999px;
  background: #f7fbf9;
  color: #577176;
  font-size: 16px;
}

.personality-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.personality-choice {
  min-height: 164px;
  padding: 20px;
  border: 1px solid #dfe9e6;
  border-radius: 18px;
  background: #fbfdfc;
  color: #304d50;
  text-align: left;
  cursor: pointer;
  transition: 160ms ease;
}

.personality-choice:hover {
  border-color: #bcd8d0;
  background: #f1f8f5;
  transform: translateY(-2px);
}

.personality-choice strong {
  display: block;
  margin-bottom: 8px;
  font-size: 22px;
}

.personality-choice span {
  color: #6a8082;
  font-size: 16px;
}

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

.personality-guided-head h4 {
  margin: 0;
  font-size: 22px;
}

.mbti-standard-subtitle {
  margin: 7px 0 0;
  color: #647e80;
  font-size: 16px;
  line-height: 1.7;
}

.mbti-picker {
  display: grid;
  gap: 14px;
}

.mbti-group {
  --mbti-accent: #77609f;
  --mbti-soft: #f3eef9;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--mbti-accent) 22%, white);
  border-radius: 18px;
  background: color-mix(in srgb, var(--mbti-soft) 72%, white);
}

.mbti-group-diplomats {
  --mbti-accent: #4e956b;
  --mbti-soft: #ecf7f0;
}

.mbti-group-sentinels {
  --mbti-accent: #4c8aa1;
  --mbti-soft: #edf6f9;
}

.mbti-group-explorers {
  --mbti-accent: #b3872f;
  --mbti-soft: #fbf5e7;
}

.mbti-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.mbti-group-head h5 {
  margin: 0;
  color: #29474c;
  font-size: 20px;
}

.mbti-group-head p {
  max-width: 620px;
  margin: 5px 0 0;
  color: #61797c;
  font-size: 16px;
  line-height: 1.65;
}

.mbti-group-head > span {
  flex: none;
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff;
  color: var(--mbti-accent);
  font-size: 15px;
  font-weight: 700;
}

.mbti-group-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.mbti-type-option {
  display: grid;
  min-height: 72px;
  place-content: center;
  gap: 4px;
  padding: 10px 8px;
  border: 1px solid color-mix(in srgb, var(--mbti-accent) 22%, white);
  border-radius: 13px;
  background: #fff;
  color: #38555a;
  text-align: center;
  cursor: pointer;
  transition: 160ms ease;
}

.mbti-type-option:hover {
  border-color: color-mix(in srgb, var(--mbti-accent) 55%, white);
  transform: translateY(-2px);
}

.mbti-type-option.selected {
  border-color: var(--mbti-accent);
  background: var(--mbti-accent);
  color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--mbti-accent) 22%, transparent);
}

.mbti-type-option strong {
  font-size: 17px;
}

.mbti-type-option span {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.mbti-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
}

.mbti-status-row > span {
  color: #587175;
  font-size: 16px;
}

.mbti-result-name {
  display: block;
  margin-top: 3px;
  color: #5e7477;
  font-size: 17px;
}

.personality-step-label {
  color: #647e80;
  font-size: 16px;
}

.personality-new-options {
  display: grid;
  gap: 9px;
}

.personality-new-option {
  padding: 14px 16px;
  border: 1px solid #dce7e4;
  border-radius: 13px;
  background: #fff;
  color: #3b575c;
  text-align: left;
  cursor: pointer;
}

.personality-new-option:hover {
  border-color: #b9d7ce;
  background: #f5faf8;
}

.personality-dual-result {
  display: grid;
  gap: 16px;
}

.personality-result-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(120deg, #edf7f3, #faf5e8);
}

.personality-result-hero strong {
  font-size: 30px;
}

.personality-result-copy {
  color: #566f73;
  font-size: 17px;
  line-height: 1.8;
}

.tarot-card {
  grid-column: span 12;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 8%, rgba(234, 210, 152, 0.34), transparent 25%),
    linear-gradient(145deg, #ffffff, #f2f8f6);
}

.tarot-layout {
  display: grid;
  grid-template-columns: minmax(230px, 0.58fr) minmax(0, 1.42fr);
  gap: 24px;
  align-items: center;
}

.tarot-intro h3 {
  margin: 5px 0 9px;
  color: #294b50;
  font-size: 28px;
}

.tarot-intro {
  min-width: 0;
}

.tarot-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  width: 100%;
  min-width: 0;
}

.tarot-note > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tarot-theme-list,
.tarot-actions,
.shuffle-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tarot-theme,
.shuffle-dot {
  min-height: 40px;
  padding: 7px 13px;
  border: 1px solid #dce7e4;
  border-radius: 999px;
  background: #fff;
  color: #607a7d;
  cursor: pointer;
}

.tarot-theme.active {
  border-color: #b9d7ce;
  background: #e9f5f0;
  color: #2d675d;
  font-weight: 650;
}

.tarot-deck {
  position: relative;
  display: grid;
  min-height: 265px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e2e9e6;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 50%, rgba(218, 239, 232, 0.65), transparent 40%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 17px, rgba(75, 119, 112, 0.05) 18px 19px),
    #fbfdfc;
}

.tarot-deck::before,
.tarot-deck::after {
  position: absolute;
  width: 112px;
  height: 174px;
  border: 1px solid #c8ded7;
  border-radius: 15px;
  background:
    linear-gradient(45deg, transparent 46%, rgba(83, 127, 119, 0.16) 47% 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, rgba(83, 127, 119, 0.12) 47% 53%, transparent 54%),
    #eef7f3;
  content: "";
  transition: 550ms ease;
}

.tarot-deck::before {
  transform: translateX(-22px) rotate(-7deg);
}

.tarot-deck::after {
  transform: translateX(22px) rotate(7deg);
}

.tarot-deck.shuffling::before {
  animation: tarot-shuffle-left 520ms ease;
}

.tarot-deck.shuffling::after {
  animation: tarot-shuffle-right 520ms ease;
}

@keyframes tarot-shuffle-left {
  50% { transform: translateX(-64px) rotate(-16deg); }
}

@keyframes tarot-shuffle-right {
  50% { transform: translateX(64px) rotate(16deg); }
}

.tarot-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.tarot-card-face {
  position: relative;
  min-height: 250px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid #d7e5e0;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(237, 247, 243, 0.94));
  box-shadow: 0 16px 30px rgba(42, 74, 73, 0.08);
  opacity: 0;
  transform: translateY(22px) rotateY(18deg);
}

.tarot-card-face.revealed {
  opacity: 1;
  transform: translateY(0) rotateY(0);
  transition: 520ms ease;
}

.tarot-card-face small {
  color: #7d908f;
  font-size: 16px;
}

.tarot-card-symbol {
  display: grid;
  width: 76px;
  height: 104px;
  margin: 14px auto;
  place-items: center;
  border: 1px solid #cfded9;
  border-radius: 13px;
  color: #3c7068;
  font-size: 26px;
  font-weight: 700;
}

.tarot-card-face h4 {
  margin: 0;
  color: #315257;
  font-size: 21px;
  text-align: center;
}

.tarot-orientation {
  display: block;
  margin-top: 3px;
  color: #a17342;
  font-size: 16px;
  text-align: center;
}

.tarot-card-face p {
  margin: 10px 0 0;
  color: #647b7e;
  font-size: 17px;
  line-height: 1.7;
}

.tarot-reading {
  margin-top: 18px;
  padding: 17px 18px;
  border: 1px solid #e5e7dc;
  border-radius: 16px;
  background: #fffbf2;
  color: #6b6655;
}

.daily-learning {
  position: relative;
  min-height: 344px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid #e5ebe8;
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 10%, rgba(239, 219, 164, 0.42), transparent 24%),
    linear-gradient(135deg, #fbfdfc 0%, #f4faf7 58%, #fffaf0 100%);
}

.daily-learning::after {
  position: absolute;
  right: -72px;
  bottom: -112px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(77, 139, 124, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(77, 139, 124, 0.035);
  content: "";
  pointer-events: none;
}

.daily-learning-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.daily-learning-kicker {
  color: #4f8274;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.daily-learning h3 {
  max-width: 760px;
  margin: 8px 0 0;
  color: #29484e;
  font-size: 30px;
  line-height: 1.35;
}

.daily-learning-count {
  flex: none;
  padding: 7px 12px;
  border: 1px solid #e2e8e5;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #8b7b58;
  font-size: 15px;
  font-weight: 700;
}

.daily-learning-lead {
  max-width: 860px;
  margin: 18px 0 22px;
  color: #566f73;
  font-size: 18px;
  line-height: 1.8;
}

.daily-learning-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.daily-learning-grid > div {
  padding: 18px;
  border: 1px solid #e4ebe8;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.daily-learning-grid span {
  color: #a17e39;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.daily-learning-grid p {
  margin: 8px 0 0;
  color: #5b7477;
  font-size: 17px;
  line-height: 1.8;
}

.daily-learning .privacy-note {
  position: relative;
  z-index: 1;
  margin-top: 18px;
}

  .classroom-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .segment-tabs {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }

  .segment-tab {
    width: 100%;
    min-height: 42px;
    padding: 9px 8px;
    text-align: center;
  }

  .classroom-tip {
    margin: 0 2px;
  }

.breeze-explanation {
  margin: 15px 3px 0;
  color: #627a7b;
  font-size: 16px;
  line-height: 1.7;
}

.toast {
  font-size: 16px;
}

@media (max-width: 960px) {
  .topbar-status {
    gap: 8px;
  }

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

  .soul-seal-inner,
  .tarot-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  :root {
    --ui-text-size: 17px;
    --ui-small-size: 15px;
    --ui-control-size: 16px;
  }

  body {
    line-height: 1.68;
  }

  .topbar-inner {
    gap: 10px;
  }

  .topbar-status {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .account-entry {
    min-height: 38px;
    padding: 6px 11px;
  }

  .live-clock {
    display: none;
  }

  .app-layout {
    width: calc(100% - 24px);
    padding-top: 14px;
  }

  .sidebar {
    width: 100%;
    margin-bottom: 14px;
    overflow: visible;
  }

  .side-nav {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .side-link {
    width: auto;
    min-width: 0;
    height: 54px;
    flex-direction: column;
    gap: 2px;
    border-color: #e4ebe9;
    background: rgba(255, 255, 255, 0.68);
    font-size: 12px;
    line-height: 1.2;
  }

  .side-icon {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }

  .hero {
    min-height: auto;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.54) 64%, rgba(247, 250, 247, 0.76) 100%),
      url("./sea-breeze-hero.svg") 64% center / cover no-repeat,
      #f6faf8;
  }

  .hero::before {
    width: 96px;
    height: 96px;
  }

  .hero-main {
    padding: 22px 16px 16px;
  }

  .hero h1 {
    margin-bottom: 12px;
    font-size: clamp(33px, 10.5vw, 42px);
    line-height: 1.14;
    letter-spacing: -0.045em;
  }

  .hero h1 em {
    display: block;
    width: max-content;
    max-width: 100%;
  }

  .hero h1 br {
    display: none;
  }

  .hero-copy {
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.72;
  }

  .hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-metric,
  .hero-metric + .hero-metric {
    min-height: 96px;
    padding: 12px 10px;
    border-right: 1px solid #e8edec;
    border-bottom: 0;
  }

  .hero-metric:first-child {
    padding-left: 0;
  }

  .hero-metric:last-child {
    grid-column: auto;
    padding-left: 10px;
    border-right: 0;
  }

  .hero-aside {
    padding: 0 16px 18px;
  }

  .index-orbit {
    height: 176px;
    min-height: 176px;
  }

  .index-core {
    top: 34px;
  }

  .index-score {
    font-size: 44px;
  }

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

  .quick-card {
    min-height: 126px;
    padding: 15px;
  }

  .quick-card:first-child {
    grid-column: 1 / -1;
  }

  .quick-title {
    font-size: 19px;
  }

  .quick-copy {
    font-size: 15px;
    line-height: 1.62;
  }

  .login-field-grid,
  .personality-choice-grid,
  .tarot-cards {
    grid-template-columns: 1fr;
  }

  .mbti-group {
    padding: 13px;
  }

  .personality-guided-head {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .mbti-status-row {
    align-items: stretch;
    flex-direction: column;
  }

  .daily-learning {
    min-height: 0;
    padding: 19px;
  }

  .daily-learning-head {
    gap: 14px;
  }

  .daily-learning h3 {
    font-size: 24px;
  }

  .daily-learning-count {
    padding: 5px 9px;
    font-size: 13px;
  }

  .daily-learning-lead {
    margin: 14px 0 17px;
    font-size: 16px;
  }

  .daily-learning-grid {
    grid-template-columns: 1fr;
  }

  .daily-learning-grid > div {
    padding: 15px;
  }

  .daily-learning-grid p {
    font-size: 16px;
  }

  .lunar-date-grid {
    grid-template-columns: 1fr;
  }

  .seal-pillars {
    grid-template-columns: repeat(2, 1fr);
  }

  .account-dialog-head,
  .account-body {
    padding-right: 18px;
    padding-left: 18px;
  }

  .account-dialog-title {
    font-size: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tarot-deck.shuffling::before,
  .tarot-deck.shuffling::after {
    animation: none;
  }

  .tarot-card-face,
  .tarot-card-face.revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}