:root {
  color-scheme: light;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --brand-red: #ff4f4f;
  --action-orange: #ff713d;
  --warm-pink: #fff0ed;
  --soft-purple: #8d7cff;
  --coin-gold: #ffc84a;
  --ink: #2b2525;
  --muted: #8f7c7a;
  --surface: #fffaf7;
  --line: rgba(94, 52, 45, 0.1);
  --shadow: 0 16px 40px rgba(119, 48, 39, 0.16);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.9), transparent 25%),
    linear-gradient(135deg, #ffe6df 0%, #ffd4d5 46%, #d9d4ff 100%);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.prototype-stage {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(230px, 270px) minmax(360px, 406px) minmax(300px, 360px);
  align-items: start;
  justify-content: center;
  gap: 18px;
  padding: 20px;
}

.phone-shell {
  position: relative;
  width: min(100%, 406px);
  height: min(860px, calc(100vh - 40px));
  min-height: 700px;
  overflow: hidden;
  border: 9px solid #241c1d;
  border-radius: 42px;
  background: var(--warm-pink);
  box-shadow: 0 36px 90px rgba(55, 24, 32, 0.32);
}

.phone-shell::before {
  content: "";
  position: absolute;
  z-index: 20;
  top: 8px;
  left: 50%;
  width: 104px;
  height: 25px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #241c1d;
  pointer-events: none;
}

.app-view {
  position: absolute;
  inset: 0 0 72px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: var(--warm-pink);
}

.app-view::-webkit-scrollbar {
  display: none;
}

.bottom-nav {
  position: absolute;
  z-index: 12;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px 14px 10px;
  border-top: 1px solid var(--line);
  background: rgba(255, 252, 249, 0.97);
  backdrop-filter: blur(16px);
}

.nav-item {
  border: 0;
  color: #a48f8c;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
}

.nav-item.active {
  color: var(--brand-red);
  font-weight: 700;
}

.nav-icon {
  width: 28px;
  height: 25px;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
}

.prototype-notes {
  align-self: center;
  max-width: 440px;
}

.notes-badge,
.eyebrow {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-red), var(--action-orange));
  box-shadow: 0 8px 18px rgba(255, 79, 79, 0.24);
  font-size: 12px;
  font-weight: 700;
}

.prototype-notes h1 {
  margin: 18px 0 10px;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
}

.prototype-notes > p {
  margin: 0;
  color: #6f5857;
  font-size: 18px;
  line-height: 1.7;
}

.note-list {
  margin-top: 28px;
  display: grid;
  gap: 12px;
}

.note-list div {
  display: grid;
  gap: 4px;
  padding: 15px 18px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.48);
}

.note-list b {
  color: var(--brand-red);
}

.note-list span {
  color: #6f5857;
}

.prototype-demo-controls {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.62);
}

.prototype-demo-controls b,
.prototype-demo-controls > span {
  display: block;
}

.prototype-demo-controls b { color: #6b4f95; font-size: 13px; }
.prototype-demo-controls > span { margin-top: 3px; color: #806c72; font-size: 11px; }
.prototype-demo-controls div { display: flex; gap: 8px; margin-top: 10px; }

.prototype-demo-controls button {
  padding: 8px 13px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #ff6d5f, #8d72dc);
  font-size: 11px;
  font-weight: 800;
}

.prototype-center {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 14px;
}

.doc-panel,
.doc-state-panel {
  border: 1px solid rgba(255,255,255,.82);
  background: rgba(255,255,255,.82);
  box-shadow: 0 20px 55px rgba(78,40,68,.12);
  backdrop-filter: blur(18px);
}

.doc-panel {
  position: sticky;
  top: 20px;
  height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 18px;
  border-radius: 24px;
  scrollbar-width: thin;
}

.doc-panel-header > span,
.doc-state-head span {
  color: #ef6457;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.doc-panel-header h1,
.doc-panel-header h2 {
  margin: 6px 0 8px;
  font-size: 21px;
  line-height: 1.2;
}

.doc-panel-header p,
.doc-state-head p {
  margin: 0;
  color: #887579;
  font-size: 10px;
  line-height: 1.65;
}

.doc-flow-group-title {
  margin: 18px 2px 8px;
  color: #9a8689;
  font-size: 10px;
  font-weight: 800;
}

.doc-flow-group {
  display: grid;
  gap: 7px;
}

.doc-flow-item {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  align-items: start;
  gap: 9px;
  padding: 10px;
  border: 1px solid #eee4e6;
  border-radius: 14px;
  color: #493d40;
  text-align: left;
  background: #fff;
}

.doc-flow-item.child { margin-left: 15px; width: calc(100% - 15px); }
.doc-flow-item.child::before { content: ""; position: absolute; left: -10px; top: -8px; width: 9px; height: 25px; border-left: 1px solid #d7c9ce; border-bottom: 1px solid #d7c9ce; border-radius: 0 0 0 4px; }
.doc-flow-item:hover,
.doc-flow-item.active { border-color: #ff9d86; background: #fff2ed; }
.doc-flow-index { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #e85f4d; background: #fff0e9; font-size: 10px; font-weight: 900; }
.doc-flow-item.active .doc-flow-index { color: #fff; background: linear-gradient(145deg,#ff7559,#ff4f5d); }
.doc-flow-item strong,
.doc-flow-item small { display: block; }
.doc-flow-item strong { font-size: 11px; line-height: 1.35; }
.doc-flow-item small { margin-top: 3px; color: #a08f93; font-size: 8px; line-height: 1.45; }

.doc-state-panel {
  width: 100%;
  padding: 14px;
  border-radius: 21px;
}

.doc-state-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.doc-state-head h2 { margin: 3px 0 2px; font-size: 15px; }
.doc-state-head b { max-width: 145px; padding: 6px 8px; border: 1px solid #ffd3c4; border-radius: 999px; color: #e96851; background: #fff6f1; font-size: 8px; text-align: center; }
.doc-state-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.doc-state-button { min-height: 48px; padding: 8px 9px; border: 1px solid #eee3e5; border-radius: 12px; color: #55474a; text-align: left; background: #fff; }
.doc-state-button.active { border-color: #ff9a82; background: #fff0ea; box-shadow: inset 3px 0 #ff6e55; }
.doc-state-button strong,
.doc-state-button small { display: block; }
.doc-state-button strong { font-size: 10px; }
.doc-state-button small { margin-top: 3px; color: #9d898e; font-size: 8px; line-height: 1.35; }

.spec-doc section { margin-top: 16px; padding-top: 15px; border-top: 1px solid #eee4e7; }
.spec-doc section h3 { margin: 0 0 9px; font-size: 12px; }
.doc-spec-basic { display: grid; }
.doc-spec-row { display: grid; grid-template-columns: 62px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid #f2eaec; }
.doc-spec-row:last-child { border-bottom: 0; }
.doc-spec-row span { color: #e56351; font-size: 9px; font-weight: 800; }
.doc-spec-row strong { font-size: 9px; line-height: 1.5; }
.spec-doc ul { margin: 0; padding-left: 17px; }
.spec-doc li { color: #77666b; font-size: 9px; line-height: 1.55; }
.spec-doc li + li { margin-top: 5px; }

.screen {
  min-height: 100%;
  padding: 36px 16px 28px;
}

.screen-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  margin-bottom: 12px;
}

.screen-header h2 {
  margin: 0;
  font-size: 19px;
}

.header-button,
.icon-button {
  min-width: 38px;
  min-height: 38px;
  border: 0;
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.68);
}

.header-actions {
  display: flex;
  gap: 8px;
}

.home-screen {
  padding: 0 0 28px;
  overflow: hidden;
  background: linear-gradient(180deg, #ff7072 0%, #ff9e8f 35%, #8e7de4 78%, #6556bd 100%);
}

.home-topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 38px 18px 8px;
  color: #fff;
}

.home-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.home-shortcut {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  color: #fff;
  background: rgba(82, 47, 102, 0.24);
  backdrop-filter: blur(8px);
  font-weight: 900;
}

.user-level {
  display: flex;
  align-items: center;
  gap: 9px;
}

.level-orb {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  background: linear-gradient(145deg, #ffe574, #ff995a);
  color: #7b3a1e;
  font-size: 12px;
  font-weight: 900;
}

.level-copy {
  display: grid;
  gap: 4px;
  font-size: 12px;
}

.level-copy strong {
  font-size: 13px;
}

.xp-track {
  width: 112px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
}

.xp-fill {
  height: 100%;
  border-radius: inherit;
  background: #fff1a5;
  transition: width 0.5s ease;
}

.coin-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 999px;
  color: #7c3f17;
  background: linear-gradient(135deg, #fff9c9, #ffc95a);
  box-shadow: 0 8px 24px rgba(113, 49, 37, 0.18);
  font-size: 13px;
  font-weight: 800;
}

.base-scene {
  position: relative;
  min-height: 428px;
  padding: 18px 20px 0;
  text-align: center;
}

.base-scene::before,
.base-scene::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0.7;
}

.base-scene::before {
  width: 220px;
  height: 220px;
  top: 52px;
  left: -55px;
  background: radial-gradient(circle, rgba(255,255,255,.32), transparent 66%);
}

.base-scene::after {
  width: 290px;
  height: 110px;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(80, 59, 162, 0.24);
}

.scene-sunrise {
  background: linear-gradient(180deg, rgba(255,210,162,.2), transparent 70%);
}

.scene-night {
  background: radial-gradient(circle at 70% 20%, rgba(170,160,255,.5), transparent 28%), linear-gradient(180deg, rgba(54,45,127,.18), transparent 70%);
}

.scene-plan {
  background: radial-gradient(circle at 50% 32%, rgba(77,224,255,.38), transparent 26%);
}

.scene-lab {
  background: radial-gradient(circle at 22% 30%, rgba(123,255,215,.25), transparent 22%), radial-gradient(circle at 80% 35%, rgba(148,123,255,.35), transparent 25%);
}

.scene-launch {
  background: radial-gradient(circle at 50% 40%, rgba(255,240,136,.48), transparent 35%);
}

.scene-command {
  background: radial-gradient(circle at 50% 28%, rgba(255,255,255,.52), transparent 30%);
}

.scene-title {
  position: relative;
  z-index: 2;
  margin: 4px 0 2px;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 3px 12px rgba(74, 26, 48, 0.18);
}

.scene-subtitle {
  position: relative;
  z-index: 2;
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 12px;
}

.commander-badge {
  position: relative;
  z-index: 3;
  display: inline-flex;
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  color: #fff8ad;
  background: rgba(71, 45, 112, .42);
  font-size: 10px;
  font-weight: 900;
}

.avatar-stage {
  position: relative;
  z-index: 2;
  width: 248px;
  height: 270px;
  margin: 8px auto 0;
  display: grid;
  place-items: center;
}

.avatar-stage::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 150px;
  height: 24px;
  border-radius: 50%;
  background: rgba(64, 44, 125, 0.25);
  filter: blur(5px);
}

.avatar-image {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 230px;
  max-height: 258px;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(74, 28, 57, 0.2));
  animation: avatarFloat 3.2s ease-in-out infinite;
}

.avatar-image.skin-tall {
  max-height: 252px;
}

.effect-sparkle::before,
.effect-coins::before,
.effect-data::before,
.effect-research::before,
.effect-fire::before,
.effect-trail::before,
.effect-rainbow::before {
  position: absolute;
  z-index: 1;
  inset: 28px 0 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-size: 24px;
  letter-spacing: 26px;
  animation: pulse 2s ease-in-out infinite;
}

.effect-sparkle::before { content: "✦ ✧ ✦"; color: #fff5a7; }
.effect-coins::before { content: "● ● ●"; color: var(--coin-gold); }
.effect-data::before { content: "010 101"; color: #77f1ff; font-size: 14px; }
.effect-research::before { content: "◎ ◇ ◎"; color: #bfffe8; text-shadow: 0 0 14px #6fffd4; }
.effect-fire::before { content: "▲ ▲ ▲"; color: #ff8b57; }
.effect-trail::before { content: "↝ ↝ ↝"; color: #9ff3ff; }
.effect-rainbow::before { content: "◜ ◝ ◞"; color: #fff; text-shadow: -8px 0 #ff8a8a, 8px 0 #77e9ff; }

.streak-bubble {
  position: absolute;
  z-index: 4;
  right: 14px;
  bottom: 40px;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  color: #744321;
  background: linear-gradient(145deg, #fff4b2, #ffbd51);
  box-shadow: 0 12px 26px rgba(93, 47, 32, 0.2);
  font-size: 11px;
}

.streak-bubble strong {
  display: block;
  font-size: 22px;
  line-height: 1;
}

.mission-dock {
  position: relative;
  z-index: 4;
  margin: -30px 12px 0;
  padding: 20px 16px 16px;
  border-radius: 28px;
  background: rgba(255, 250, 247, 0.97);
  box-shadow: 0 -8px 34px rgba(72, 39, 103, 0.16);
}

.dock-handle {
  display: block;
  width: 42px;
  height: 5px;
  margin: -10px auto 12px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #e6d7d2;
}

.status-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.status-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 45px;
  padding: 9px 10px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(95, 52, 45, 0.07);
  font-size: 11px;
}

.status-chip strong {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
}

.status-dot {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  border-radius: 50%;
  color: #fff;
  background: #cdbfbc;
  font-weight: 900;
}

.status-chip.done .status-dot {
  background: linear-gradient(135deg, var(--brand-red), var(--action-orange));
}

.mission-card {
  padding: 14px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #ff5958, #ff7c43);
  box-shadow: 0 12px 22px rgba(255, 90, 79, 0.22);
}

.mission-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  opacity: 0.9;
}

.mission-card h3 {
  margin: 8px 0 4px;
  font-size: 18px;
}

.mission-card p {
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 11px;
}

.reward-line {
  display: flex;
  gap: 10px;
  margin: 10px 0 12px;
  font-size: 12px;
  font-weight: 700;
}

.primary-button,
.secondary-button,
.small-button,
.danger-button {
  border: 0;
  border-radius: 999px;
  font-weight: 800;
}

.primary-button {
  width: 100%;
  min-height: 46px;
  color: #c44923;
  background: #fff5bc;
  box-shadow: inset 0 -2px rgba(230, 149, 57, 0.12);
}

.secondary-button {
  min-height: 42px;
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-red), var(--action-orange));
}

.small-button {
  min-height: 34px;
  padding: 0 14px;
  color: #fff;
  background: var(--action-orange);
  font-size: 12px;
}

.small-button.ghost,
.secondary-button.ghost {
  color: var(--action-orange);
  background: #fff0e9;
}

.small-button:disabled,
.secondary-button:disabled,
.primary-button:disabled {
  color: #ab9d99;
  background: #eee7e4;
  cursor: default;
}

.milestone-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 13px;
}

.milestone-track::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 12%;
  right: 12%;
  height: 3px;
  border-radius: 999px;
  background: #f1d7d0;
}

.milestone {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #aa9691;
  font-size: 10px;
}

.milestone i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 3px solid #fffaf7;
  border-radius: 50%;
  background: #eadbd7;
  font-style: normal;
}

.milestone.reached {
  color: var(--action-orange);
  font-weight: 800;
}

.milestone.reached i {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-red), var(--action-orange));
}

.section-card {
  padding: 15px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 24px rgba(111, 63, 52, 0.09);
}

.section-card + .section-card {
  margin-top: 12px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.section-title h3 {
  margin: 0;
  font-size: 16px;
}

.section-title span,
.muted {
  color: var(--muted);
  font-size: 11px;
}

.tab-strip {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.58);
}

.tab-button {
  flex: 1;
  min-height: 36px;
  border: 0;
  border-radius: 11px;
  color: #9c8884;
  background: transparent;
  font-size: 12px;
}

.tab-button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-red), var(--action-orange));
  box-shadow: 0 6px 14px rgba(255, 95, 69, 0.2);
  font-weight: 800;
}

.task-list {
  display: grid;
  gap: 9px;
}

.task-item {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 10px;
  border: 1px solid rgba(255, 115, 78, 0.1);
  border-radius: 17px;
  background: #fff;
}

.task-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #c85f3d;
  background: #fff0e9;
  font-size: 21px;
}

.task-copy h4 {
  margin: 0 0 4px;
  font-size: 13px;
}

.task-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.task-reward {
  margin-top: 4px;
  color: #d9902f;
  font-size: 10px;
  font-weight: 800;
}

.task-item.completed {
  opacity: 0.65;
}

.share-task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 13px 14px;
  border-radius: 18px;
  color: #70423c;
  background: linear-gradient(135deg, #fff4c7, #ffe2d4);
}

.share-task strong,
.share-task span {
  display: block;
}

.share-task strong { font-size: 12px; }
.share-task span { margin-top: 3px; color: var(--muted); font-size: 10px; }

.weekly-unlocks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.weekly-unlocks span {
  padding: 7px 9px;
  border-radius: 999px;
  color: #5f4aa7;
  background: #f1edff;
  font-size: 10px;
  font-weight: 800;
}

.campaign-hero {
  position: relative;
  overflow: hidden;
  min-height: 214px;
  padding: 20px;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(145deg, #ff5c4f, #ff8d50 58%, #7461c9);
  box-shadow: var(--shadow);
}

.campaign-hero h3 {
  width: 60%;
  margin: 4px 0 8px;
  font-size: 28px;
  line-height: 1.08;
}

.campaign-hero p {
  width: 58%;
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 11px;
  line-height: 1.5;
}

.campaign-hero img {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 165px;
  height: 190px;
  object-fit: contain;
  filter: drop-shadow(0 16px 16px rgba(91, 39, 38, 0.22));
}

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

.challenge-card {
  min-height: 138px;
  padding: 14px;
  border: 2px solid transparent;
  border-radius: 20px;
  background: #fff;
  text-align: left;
}

.challenge-card.selected {
  border-color: var(--action-orange);
  background: #fff6ee;
}

.challenge-card strong {
  display: block;
  margin: 8px 0 5px;
  font-size: 14px;
}

.challenge-card span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.challenge-emoji {
  font-size: 26px;
}

.growth-hero {
  display: grid;
  grid-template-columns: 1fr 112px;
  min-height: 150px;
  overflow: hidden;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, #ff625b, #9a7af0);
}

.growth-copy {
  padding: 18px;
}

.growth-copy h3 {
  margin: 4px 0 6px;
  font-size: 23px;
}

.growth-copy p {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 11px;
  line-height: 1.5;
}

.growth-hero img {
  width: 126px;
  height: 150px;
  object-fit: contain;
  align-self: end;
}

.level-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.level-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 16px;
  background: #fff;
}

.level-row.current {
  color: #b5482f;
  background: #fff0e8;
  box-shadow: inset 0 0 0 1px #ffb19a;
}

.level-row.locked {
  opacity: .52;
}

.level-row b {
  color: var(--action-orange);
  font-size: 12px;
}

.level-row strong {
  display: block;
  font-size: 13px;
}

.level-row small {
  color: var(--muted);
  font-size: 10px;
}

.level-xp {
  font-size: 10px;
  color: var(--muted);
}

.wardrobe-preview {
  position: relative;
  min-height: 318px;
  overflow: hidden;
  margin: -48px -16px 12px;
  padding: 76px 20px 0;
  text-align: center;
  background: linear-gradient(180deg, #ff7a79, #fac6b7 55%, #8f7bd9);
}

.wardrobe-preview .avatar-stage {
  height: 230px;
}

.wardrobe-preview .avatar-image {
  max-height: 220px;
}

.wardrobe-status {
  position: absolute;
  left: 18px;
  bottom: 16px;
  padding: 8px 12px;
  border-radius: 14px;
  color: #fff;
  background: rgba(64, 39, 88, 0.44);
  font-size: 11px;
  backdrop-filter: blur(10px);
}

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

.cosmetic-card,
.product-card {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  padding: 10px;
  border: 2px solid transparent;
  border-radius: 20px;
  background: #fff;
}

.cosmetic-card.equipped {
  border-color: var(--action-orange);
}

.cosmetic-card.locked {
  opacity: .58;
}

.cosmetic-thumb,
.product-thumb {
  height: 104px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 15px;
  background: linear-gradient(145deg, #fff4e8, #f4eaff);
}

.cosmetic-thumb img {
  max-width: 96px;
  max-height: 100px;
  object-fit: contain;
}

.background-swatch,
.effect-swatch {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 28px;
}

.title-swatch {
  color: #fff7be;
  background: linear-gradient(145deg, #ff785d, #745ac1);
  font-size: 34px;
  text-shadow: 0 5px 16px rgba(50, 27, 86, .34);
}

.cosmetic-card h4,
.product-card h4 {
  margin: 9px 0 4px;
  font-size: 12px;
}

.item-meta {
  min-height: 18px;
  color: var(--muted);
  font-size: 10px;
}

.item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 8px;
}

.price {
  color: #dc8a27;
  font-size: 12px;
  font-weight: 900;
}

.item-footer .small-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 10px;
}

.lock-label {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #fff;
  background: rgba(53, 42, 53, 0.68);
  font-size: 9px;
}

.store-screen {
  background: linear-gradient(180deg, #ffe1d7, #fff3ed 32%, #fff8f4);
}

.store-banner {
  position: relative;
  min-height: 142px;
  overflow: hidden;
  padding: 18px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, #ff6157, #ff9a54);
  box-shadow: var(--shadow);
}

.store-banner h3 {
  margin: 8px 0 5px;
  font-size: 24px;
}

.store-banner p {
  width: 58%;
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 11px;
}

.store-banner img {
  position: absolute;
  right: -4px;
  bottom: -18px;
  width: 145px;
  height: 150px;
  object-fit: contain;
}

.store-balance {
  margin-top: 11px;
  font-size: 12px;
}

.store-balance strong {
  display: block;
  margin-top: 2px;
  font-size: 23px;
}

.store-goal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 26px rgba(123, 66, 54, .08);
}

.store-goal span,
.store-goal strong {
  display: block;
}

.store-goal span { color: var(--muted); font-size: 9px; }
.store-goal strong { margin-top: 3px; font-size: 10px; line-height: 1.4; }

.goal-progress {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #f0e7e3;
}

.goal-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff765f, #ffbd57);
}

.reward-choice-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 2px;
}

.reward-choice {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #ffd0bf;
  border-radius: 15px;
  color: var(--ink);
  text-align: left;
  background: #fff8f4;
}

.reward-choice span { color: var(--action-orange); font-size: 18px; font-weight: 900; }
.reward-choice strong { font-size: 12px; }
.reward-choice small { color: var(--action-orange); font-size: 10px; }

.product-thumb {
  font-size: 42px;
}

.profile-hero {
  display: grid;
  grid-template-columns: 1fr 118px;
  overflow: hidden;
  min-height: 160px;
  margin-bottom: 12px;
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(135deg, #ff625c, #8d74dd);
}

.profile-copy {
  padding: 20px 8px 18px 18px;
}

.profile-copy h3 {
  margin: 8px 0 4px;
  font-size: 22px;
}

.profile-copy p {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 11px;
}

.profile-badge {
  display: inline-flex;
  margin-top: 8px;
  padding: 6px 9px;
  border-radius: 999px;
  color: #fff4a6;
  background: rgba(54, 38, 101, .36);
  font-size: 9px;
  font-weight: 900;
}

.profile-hero img {
  width: 132px;
  height: 160px;
  object-fit: contain;
  align-self: end;
}

.menu-list {
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
}

.menu-item {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
}

.menu-item:last-child {
  border-bottom: 0;
}

.menu-item .menu-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #fff0e9;
}

.menu-item strong {
  display: block;
  font-size: 13px;
}

.menu-item small {
  color: var(--muted);
  font-size: 10px;
}

.ledger-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.ledger-summary div {
  padding: 12px 8px;
  border-radius: 16px;
  background: #fff;
  text-align: center;
}

.ledger-summary span {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.ledger-summary strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
}

.ledger-list {
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
}

.ledger-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.ledger-row:last-child { border-bottom: 0; }
.ledger-row strong { display: block; font-size: 12px; }
.ledger-row small { color: var(--muted); font-size: 10px; }
.ledger-value { color: #35a56a; font-weight: 900; }
.ledger-value.negative { color: var(--action-orange); }

.ledger-rule-button {
  padding: 0 10px;
  border-radius: 999px;
  color: #ff694e;
  background: #fff0e9;
  font-size: 10px;
  font-weight: 800;
}

.coin-balance-card {
  min-height: 136px;
  display: grid;
  grid-template-columns: 1fr 104px;
  overflow: hidden;
  padding: 18px 12px 14px 18px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, #ff6657, #ff9b62);
  box-shadow: 0 12px 28px rgba(255,97,72,.18);
}

.coin-balance-card span,
.coin-balance-card strong,
.coin-balance-card small { display: block; }
.coin-balance-card span { font-size: 10px; opacity: .8; }
.coin-balance-card strong { margin-top: 7px; font-size: 28px; }
.coin-balance-card small { margin-top: 8px; font-size: 8px; opacity: .76; }
.coin-balance-card img { width: 104px; height: 112px; align-self: end; object-fit: contain; }

.coin-expiry-banner {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 9px;
  margin-top: 11px;
  padding: 12px;
  border: 1px solid #ffe0ad;
  border-radius: 17px;
  color: #704b31;
  text-align: left;
  background: #fff7dc;
}

.coin-expiry-banner > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; background: #ffe8a5; font-size: 17px; }
.coin-expiry-banner strong,
.coin-expiry-banner small { display: block; }
.coin-expiry-banner strong { font-size: 11px; }
.coin-expiry-banner small { margin-top: 3px; color: #a78769; font-size: 8px; line-height: 1.4; }
.coin-expiry-banner b { color: #d69b55; font-size: 18px; }

.coin-ledger-tabs {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 5px;
  margin: 12px 0;
  padding: 4px;
  border-radius: 15px;
  background: #eee6e5;
}

.coin-ledger-tabs button {
  height: 36px;
  border: 0;
  border-radius: 11px;
  color: #978481;
  background: transparent;
  font-size: 11px;
}

.coin-ledger-tabs button.active {
  color: #ff664d;
  background: #fff;
  box-shadow: 0 5px 14px rgba(86,52,47,.08);
  font-weight: 900;
}

.coin-ledger-section { min-height: 224px; }
.coin-ledger-section .section-title span { max-width: 145px; text-align: right; }
.coin-ledger-empty { min-height: 172px; display: grid; justify-items: center; align-content: center; padding: 16px; text-align: center; }
.coin-ledger-empty img { width: 92px; height: 88px; object-fit: contain; }
.coin-ledger-empty strong { margin-top: 2px; font-size: 12px; }
.coin-ledger-empty p { max-width: 230px; margin: 5px 0 0; color: #9b8987; font-size: 9px; line-height: 1.55; }

.coin-rule-hero {
  padding: 18px;
  border-radius: 22px;
  color: #6f4a32;
  background: linear-gradient(135deg,#fff0b8,#ffe1cc);
}

.coin-rule-hero span,
.coin-rule-hero strong { display: block; }
.coin-rule-hero span { font-size: 9px; font-weight: 800; }
.coin-rule-hero strong { margin-top: 5px; color: #dc6b3b; font-size: 23px; }
.coin-rule-hero p { margin: 7px 0 0; font-size: 9px; line-height: 1.55; }

.coin-rule-card {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 11px;
  margin-top: 11px;
  padding: 15px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(73,43,42,.05);
}

.coin-rule-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg,#ff805e,#ff5c57); font-size: 18px; font-weight: 900; }
.coin-rule-card h3 { margin: 2px 0 5px; font-size: 13px; }
.coin-rule-card p { margin: 0; color: #8f7c7a; font-size: 9px; line-height: 1.55; }
.coin-rule-card ul { margin: 9px 0 0; padding-left: 16px; color: #796865; }
.coin-rule-card li { font-size: 8px; line-height: 1.55; }
.coin-rule-back { width: 100%; margin-top: 13px; }

.modal-backdrop {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  align-items: end;
  padding: 14px;
  background: rgba(35, 19, 31, 0.68);
  backdrop-filter: blur(5px);
}

.modal-card {
  position: relative;
  overflow: hidden;
  max-height: 90%;
  overflow-y: auto;
  padding: 22px 18px 18px;
  border-radius: 28px;
  background: #fffaf7;
  box-shadow: 0 28px 70px rgba(35, 19, 31, 0.32);
  text-align: center;
}

.modal-card.level-up {
  color: #fff;
  background: linear-gradient(155deg, #4b2c5d, #7d4f8d 42%, #ff704e);
}

.modal-card h3 {
  margin: 8px 0 6px;
  font-size: 24px;
}

.modal-card p {
  margin: 0 auto 16px;
  max-width: 270px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.modal-card.level-up p {
  color: rgba(255,255,255,.78);
}

.modal-avatar {
  width: 180px;
  height: 180px;
  margin: -4px auto 0;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.18));
}

.unlock-box {
  margin: 14px 0;
  padding: 12px;
  border-radius: 18px;
  color: #8c4229;
  background: #fff3d0;
  font-size: 12px;
  font-weight: 800;
}

.modal-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.modal-actions.one {
  grid-template-columns: 1fr;
}

.modal-actions .secondary-button {
  width: 100%;
}

.modal-actions .secondary-button.ghost {
  color: #fff;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26);
}

.confirm-product {
  font-size: 54px;
  margin: 8px 0;
}

.membership-use-modal {
  max-height: min(620px, calc(100vh - 48px));
  overflow-y: auto;
}

.membership-pass-list {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.membership-pass {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  align-items: center;
  width: 100%;
  padding: 13px 14px;
  text-align: left;
  border: 1px solid rgba(255, 113, 61, 0.18);
  border-radius: 16px;
  background: #fff8f4;
  color: var(--ink);
}

.membership-pass strong {
  font-size: 14px;
}

.membership-pass small {
  color: var(--muted);
  font-size: 11px;
}

.membership-pass span {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--action-orange);
  color: #fff;
  font-size: 12px;
}

.membership-pass.used {
  opacity: 0.7;
}

.membership-pass.used span {
  background: #ddd4d1;
  color: #756866;
}

.empty-inline {
  padding: 24px 12px;
  border-radius: 14px;
  background: #fff8f4;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.store-main-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.exchange-stage {
  margin-top: 14px;
}

.exchange-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff8f3, #fff0e8);
  border: 1px solid rgba(255, 113, 61, 0.13);
}

.exchange-stage-head span {
  color: var(--action-orange);
  font-size: 10px;
  font-weight: 800;
}

.exchange-stage-head h3 {
  margin: 3px 0;
  font-size: 15px;
}

.exchange-stage-head p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.exchange-stage-head b {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: #ff7048;
  color: #fff;
  font-size: 10px;
}

.exchange-stage.locked .exchange-stage-head {
  background: #f4efed;
}

.exchange-stage.locked .exchange-stage-head b {
  background: #c9bfbc;
}

.product-card {
  position: relative;
}

.product-card-badges {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  min-height: 18px;
  margin-bottom: 5px;
}

.product-card-badges span,
.product-card-badges em {
  padding: 3px 6px;
  border-radius: 999px;
  background: #fff0e8;
  color: #ff633d;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.product-card-badges em {
  background: #f5f0ee;
  color: #8f7c7a;
}

.product-locked {
  filter: grayscale(0.35);
  opacity: 0.72;
}

.product-used {
  border-color: rgba(58, 176, 116, 0.22);
  background: #fbfffc;
}

.benefit-success-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a53, #ff4f4f);
  color: #fff;
  font-size: 28px;
  box-shadow: 0 12px 28px rgba(255, 89, 64, 0.25);
}

.toast-region {
  position: absolute;
  z-index: 50;
  top: 44px;
  left: 14px;
  right: 14px;
  display: grid;
  justify-items: center;
  pointer-events: none;
}

.toast {
  padding: 11px 15px;
  border-radius: 999px;
  color: #fff;
  background: rgba(47, 30, 42, 0.88);
  box-shadow: 0 12px 30px rgba(35, 19, 31, 0.22);
  font-size: 12px;
  animation: toastIn .25s ease both;
}

.coin-burst {
  position: absolute;
  z-index: 40;
  top: 110px;
  left: 50%;
  color: var(--coin-gold);
  font-size: 26px;
  font-weight: 900;
  animation: coinFly .8s ease-out forwards;
  pointer-events: none;
}

.empty-state {
  padding: 34px 20px;
  text-align: center;
  color: var(--muted);
}

.empty-state strong {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
}

/* 上岸仓首页模拟页 */
.app-home-screen {
  min-height: 100%;
  padding: 22px 16px 0;
  background: #f4f4f4;
}

.feature-guide-banner {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr 26px;
  align-items: center;
  gap: 8px;
  margin: 2px 16px 10px;
  padding: 10px 11px;
  border-radius: 16px;
  color: #7d3d32;
  background: #fff4cf;
  box-shadow: 0 8px 20px rgba(116,61,43,.12);
}
.feature-guide-banner span { padding: 4px 7px; border-radius: 999px; color: #fff; background: #ff6b52; font-size: 8px; font-weight: 900; }
.feature-guide-banner strong { font-size: 9px; line-height: 1.45; }
.feature-guide-banner button { width: 26px; height: 26px; border: 0; border-radius: 50%; color: #9b6b58; background: rgba(255,255,255,.7); }
.guide-target, .guide-panel { position: relative; z-index: 2; animation: guideTargetPulse 1.5s ease-in-out infinite; }
.guide-target { box-shadow: 0 0 0 4px #ffe45c, 0 14px 28px rgba(94,56,48,.2); }
.guide-panel { border: 3px solid #ffcb42 !important; box-shadow: 0 0 0 4px rgba(255,225,91,.26), 0 14px 28px rgba(94,56,48,.12); }
.training-panel h3 button { float: right; padding: 7px 10px; border: 0; border-radius: 999px; color: #fff; background: #ff654f; font-size: 9px; font-weight: 800; }
.module-placeholder .small-button { margin-top: 10px; }
@keyframes guideTargetPulse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.plan-screen { background: #f5f5f5; }
.plan-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 4px auto 18px; padding: 4px; border-radius: 999px; background: #f5e9e4; }
.plan-tabs button { padding: 10px; border: 0; border-radius: 999px; color: #765b55; background: transparent; font-size: 14px; }
.plan-tabs button.active { color: #2d2928; background: #fff; box-shadow: 0 5px 14px rgba(90,62,52,.08); font-weight: 900; }
.plan-hero { position: relative; min-height: 178px; overflow: hidden; padding: 26px 18px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, #ff5c4f, #ff7c5e); box-shadow: 0 14px 30px rgba(191,77,58,.18); }
.plan-hero > div { position: relative; z-index: 2; }
.plan-hero span { font-size: 17px; }
.plan-hero h3 { width: 190px; margin: 8px 0 22px; font-size: 25px; line-height: 1.2; }
.plan-hero button { padding: 11px 16px; border: 0; border-radius: 999px; color: #fff; background: #181512; box-shadow: inset 0 -3px rgba(255,255,255,.08); font-size: 11px; font-weight: 900; }
.plan-hero img { position: absolute; right: -8px; bottom: -13px; width: 168px; height: 180px; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(108,36,29,.18)); }
.peer-plan-section { margin-top: 24px; }
.peer-plan-section > h3 { margin: 0 0 13px; font-size: 20px; }
.peer-plan-section > h3 span { color: #ff5f4e; border-bottom: 3px solid #ff5f4e; }
.peer-plan-section article { display: grid; grid-template-columns: 44px 1fr 24px; align-items: center; gap: 11px; margin-bottom: 11px; padding: 17px 14px; border-radius: 20px; background: #fff; }
.peer-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 14px; font-weight: 900; }
.avatar-1 { background: #ffec58; }.avatar-2 { background: #aee8ff; }.avatar-3 { background: #bfe6ff; }
.peer-plan-section article strong { display: block; font-size: 11px; }
.peer-plan-section article p { margin: 7px 0; color: #777; font-size: 9px; }
.peer-plan-section article p i { display: inline-block; height: 10px; margin: 0 7px; border-left: 1px solid #ddd; vertical-align: middle; }
.peer-plan-section article span, .peer-plan-section article em { display: inline-block; margin-right: 5px; padding: 4px 7px; border: 1px solid #e6e1df; border-radius: 4px; color: #777; font-size: 8px; font-style: normal; }
.peer-plan-section article em { color: #f35f57; border-color: #f5aaa5; }
.peer-plan-section article > b { color: #ddd; font-size: 25px; }

.optional-task-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 6px; }
.optional-task-head strong, .optional-task-head span { display: block; }
.optional-task-head strong { font-size: 12px; }
.optional-task-head span { margin-top: 3px; color: #9a8b95; font-size: 8px; }
.optional-task-head button { padding: 7px 10px; border: 0; border-radius: 999px; color: #ff684f; background: #fff0e9; font-size: 9px; font-weight: 900; }
.optional-task-options { display: grid; gap: 8px; margin: 14px 0; }
.optional-task-options > button { display: grid; grid-template-columns: 36px 1fr 24px; align-items: center; gap: 9px; padding: 10px; border: 1px solid #eee2de; border-radius: 15px; text-align: left; background: #fffaf8; }
.optional-task-options > button.selected { border-color: #ff8a70; background: #fff0ea; }
.optional-task-options > button.member-locked{border-style:dashed;background:#faf8f6;opacity:.82}
.optional-task-options > button.member-locked>b{font-size:12px;filter:grayscale(1)}
.optional-task-options > button > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: #ff765e; }
.optional-task-options strong, .optional-task-options small { display: block; }
.optional-task-options strong { font-size: 10px; }
.optional-task-options small { margin-top: 3px; color: #9c8982; font-size: 8px; }
.optional-task-options strong i{margin-left:5px;padding:2px 5px;border-radius:999px;color:#b76a24;background:#fff0c9;font-size:7px;font-style:normal}
.optional-task-options div em{display:block;margin-top:4px;color:#f58a25;font-size:8px;font-style:normal;font-weight:800}
.optional-task-options b { color: #ff684f; font-size: 17px; }

.practice-screen.question-home-screen{background:linear-gradient(180deg,#edfaff 0,#f8f8f8 31%,#f6f6f6 100%)}
.question-hero{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 0 18px}
.question-hero button{min-height:92px;padding:18px 14px;border:0;border-radius:18px;text-align:left;background:linear-gradient(145deg,#fff,#f1f4ff);box-shadow:0 8px 24px rgba(72,99,126,.08)}
.question-hero button:last-child{background:linear-gradient(145deg,#fff,#fff0ef)}
.question-hero strong,.question-hero small{display:block}.question-hero strong{font-size:17px}.question-hero small{margin-top:10px;color:#91949b;font-size:10px}
.question-category-panel{margin:0 -12px;padding:18px 16px 28px;border-radius:22px 22px 0 0;background:#fff}
.question-category-panel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.question-category-panel header h3{font-size:18px}.question-category-panel header button{padding:9px 12px;border:0;border-radius:999px;color:#777;background:#f4f5f7;font-size:10px}
.question-category-row{width:100%;display:grid;grid-template-columns:30px 1fr 18px;align-items:center;gap:8px;padding:14px 0;border:0;border-bottom:1px solid #f1f1f1;text-align:left;background:transparent}
.question-category-row>span{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#ff5962}.question-category-row strong,.question-category-row small{display:block}.question-category-row strong{font-size:15px}.question-category-row strong em{margin-left:5px;padding:3px 5px;border-radius:5px;color:#f45e62;background:#fff0f1;font-size:8px;font-style:normal}.question-category-row small{margin-top:7px;color:#8e8e93;font-size:10px}.question-category-row>b{color:#aaa;font-size:20px}
.answer-grid button.selected{border-color:#ff765e;color:#ff5e47;background:#fff0eb}.learning-complete-button:disabled{color:#aaa;background:#ececec;box-shadow:none}

.fm-learning-screen.fm-channel-screen{padding:0;background:#fff}.fm-channel-hero{min-height:220px;padding:0 14px 30px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:linear-gradient(0deg,rgba(20,18,20,.68),rgba(105,36,38,.38)),radial-gradient(circle at 20% 15%,#ff8076,#853a3f 65%,#472b2d)}
.fm-channel-hero .screen-header{color:#fff;background:transparent}.fm-channel-hero>div{padding:0 8px}.fm-channel-hero h2{margin:0 0 7px;font-size:24px}.fm-channel-hero p{margin:0;color:#ddd;font-size:12px}
.fm-channel-tabs{display:grid;grid-template-columns:repeat(3,1fr) auto;align-items:center;padding:0 16px;border-radius:20px 20px 0 0;border-bottom:1px solid #eee;background:#fff}.fm-channel-tabs button{height:54px;border:0;color:#999;background:transparent;font-size:13px}.fm-channel-tabs button.active{position:relative;color:#222;font-weight:800}.fm-channel-tabs button.active:after{content:"";position:absolute;left:34%;right:34%;bottom:0;height:3px;border-radius:3px;background:#ff5860}.fm-channel-tabs b{font-size:12px}
.fm-track-list{padding:0 18px}.fm-track-list article{display:grid;grid-template-columns:1fr 42px;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid #eee}.fm-track-list em{display:inline-block;padding:3px 6px;border:1px solid #ff7a7f;border-radius:4px;color:#ff666d;font-size:8px;font-style:normal}.fm-track-list em.vip{border:0;color:#8d622e;background:#fff2ce}.fm-track-list h3{margin:9px 0;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fm-track-list p{margin:0;color:#aaa;font-size:9px}.fm-track-list article>button{width:40px;height:40px;border:1px solid #e5e5e5;border-radius:50%;color:#999;background:#fff}
.fm-player-card{padding:24px;border-radius:22px;color:#fff;text-align:center;background:linear-gradient(145deg,#ff705e,#d64f72)}.fm-player-card>span{padding:4px 7px;border-radius:4px;color:#d64f5e;background:#fff;font-size:8px}.fm-player-card h3{margin:18px 0 8px;font-size:18px;line-height:1.5}.fm-player-card p{font-size:9px}.fm-player-card>button{margin-top:18px;padding:11px 18px;border:0;border-radius:999px;color:#e35a5d;background:#fff;font-weight:800}.fm-progress{margin-top:25px}.fm-progress i{height:5px;display:block;border-radius:999px;background:rgba(255,255,255,.35)}.fm-progress i b{height:100%;display:block;border-radius:inherit;background:#fff}.fm-progress small{display:block;margin-top:8px;color:#ffe7e7}
.fm-quiz-card{margin-top:12px;padding:17px;border-radius:20px;background:#fff}.fm-quiz-card>span{color:#ff624f;font-size:9px;font-weight:800}.fm-quiz-card h3{font-size:13px}.fm-quiz-card div{display:grid;gap:8px}.fm-quiz-card button{padding:11px;border:1px solid #eee;border-radius:12px;text-align:left;background:#fafafa}.fm-quiz-card button.selected{border-color:#ff765e;color:#ff6049;background:#fff0eb}

.plan-study-screen { padding-top: 0; background: linear-gradient(180deg, #f78e8c 0 190px, #f5f6f8 420px); }
.plan-study-top { padding-top: 34px; color: #fff; }
.plan-study-top .screen-header { margin-bottom: 0; }
.plan-study-top .header-button { color: #fff; background: rgba(255,255,255,.18); }
.history-pill { margin: 0 0 12px; padding: 5px 10px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; color: #fff; background: transparent; font-size: 9px; }
.plan-user-card { overflow: hidden; border-radius: 24px; background: rgba(255,255,255,.95); box-shadow: 0 15px 32px rgba(121,56,59,.12); }
.plan-user-head { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 10px; padding: 16px; }
.plan-user-head > span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; color: #774b32; background: #b9e7ff; font-weight: 900; }
.plan-user-head strong, .plan-user-head small { display: block; }
.plan-user-head strong { font-size: 16px; }.plan-user-head small { margin-top: 5px; color: #888; font-size: 10px; }
.plan-user-head button { border: 0; color: #8d7e7a; background: transparent; font-size: 10px; }
.plan-study-stats { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; padding: 18px 10px 22px; text-align: center; background: #fff; }
.plan-study-stats i { height: 58px; background: #eee; }
.plan-study-stats span, .plan-study-stats strong { display: block; }.plan-study-stats span { color: #777; font-size: 11px; }.plan-study-stats strong { margin-top: 8px; font-size: 28px; }.plan-study-stats small { font-size: 11px; font-weight: 500; }
.plan-coach-tip { display: grid; grid-template-columns: 45px 1fr; gap: 9px; margin: 15px 0 20px; padding: 13px; border-radius: 18px; background: rgba(255,255,255,.85); }
.plan-coach-tip img { width: 45px; height: 45px; object-fit: contain; }.plan-coach-tip p { margin: 0; color: #675d5b; font-size: 10px; line-height: 1.65; }
.study-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }.study-section-title strong { font-size: 18px; }.study-section-title span { color: #888; font-size: 10px; }.study-section-title button { margin-left: auto; padding: 7px; border: 0; border-radius: 9px; color: #999; background: #fff; font-size: 9px; }
.mainline-study-card { display: grid; grid-template-columns: 86px 1fr; gap: 12px; padding: 15px; border-radius: 22px; background: #fff; box-shadow: 0 12px 28px rgba(79,69,69,.06); }
.mainline-cover { height: 105px; display: grid; place-items: center; border-radius: 16px; color: #47382f; background: linear-gradient(145deg,#ffd8a8,#fff0d9); font-size: 20px; font-weight: 900; }
.mainline-content small { color: #999; font-size: 8px; }.mainline-content small b { color: #d78f56; }.mainline-content h3 { margin: 9px 0; font-size: 13px; line-height: 1.45; }.mainline-content p { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }.mainline-content em,.mainline-content p span { padding: 4px 6px; border: 1px solid #e7dedb; border-radius: 5px; color: #888; font-size: 7px; font-style: normal; }.mainline-content em { color: #e56462; border-color: #efaaa6; }
.mainline-progress { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 36px; align-items: center; gap: 8px; }.mainline-progress::before { content:""; grid-column:1; grid-row:1; height:6px; border-radius:999px; background:#eee; }.mainline-progress i { grid-column:1; grid-row:1; height:6px; border-radius:999px; background:#51ae8a; }.mainline-progress span { font-size:10px; }
.mainline-study-card footer { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; }.mainline-study-card footer span { font-size:9px; }.mainline-study-card footer button { min-width:190px; padding:11px; border:1px solid #e98d8d; border-radius:999px; color:#df5757; background:#fff; font-weight:900; }
.today-branch { margin-top:24px; }.today-branch article { padding:15px; border-radius:18px; background:#fff; }.today-branch article b,.today-branch article span { margin-right:7px; font-size:9px; }.today-branch article p { margin:10px 0 0; font-size:12px; }

.wrong-training-screen { padding-bottom: 92px; background:#f6f6f6; }
.wrong-overview { padding:14px; border-radius:22px; background:#fff; }.wrong-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.wrong-metrics article { padding:18px 5px; border-radius:12px; text-align:center; background:linear-gradient(180deg,#fff0ef,#fff); }.wrong-metrics article:nth-child(2){background:linear-gradient(180deg,#eef3ff,#fff)}.wrong-metrics article:nth-child(3){background:linear-gradient(180deg,#edfff9,#fff)}.wrong-metrics strong,.wrong-metrics span { display:block; }.wrong-metrics strong { font-size:27px; }.wrong-metrics strong small { font-size:10px; }.wrong-metrics span { margin-top:10px; color:#888; font-size:9px; }
.wrong-distribution { display:grid; grid-template-columns:1fr 130px; align-items:center; gap:10px; margin-top:16px; padding-top:16px; border-top:1px dashed #aaa; }.wrong-distribution h3 { font-size:14px; }.wrong-distribution p { color:#777; font-size:9px; }.wrong-distribution p i { width:9px; height:9px; display:inline-block; margin-right:7px; }.wrong-distribution i.red{background:#ff5058}.wrong-distribution i.orange{background:#ff9256}.wrong-distribution i.blue{background:#538ee8}.wrong-distribution p b{color:#ff5c5c}.wrong-donut { width:112px; height:112px; border-radius:50%; background:conic-gradient(#ff5058 0 31%,#ff9256 31% 95%,#538ee8 95%); position:relative; }.wrong-donut::after{content:"";position:absolute;inset:25px;border-radius:50%;background:#fff}
.wrong-filters { display:grid; grid-template-columns:repeat(3,1fr); margin:12px -16px 0; padding:14px 16px; background:#fff; }.wrong-filters button{border:0;background:transparent;font-size:10px}.wrong-category-list{margin:0 -16px;background:#fff}.wrong-category-list article{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:16px;border-top:1px solid #eee}.wrong-category-list article>span{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#343a46}.wrong-category-list strong,.wrong-category-list small{display:block}.wrong-category-list strong{font-size:14px}.wrong-category-list small{margin-top:7px;color:#777;font-size:9px}.wrong-category-list article>b{color:#bbb;font-size:22px}.wrong-bottom-actions{position:sticky;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 -16px;padding:12px 16px;background:#fff}.wrong-bottom-actions button{padding:13px;border:1px solid #bbb;border-radius:999px;background:#fff;font-weight:900}.wrong-bottom-actions button:last-child{color:#fff;border-color:#222;background:#222}

.practice-screen,.fm-learning-screen,.optional-learning-screen{background:#f8f6f5}.practice-progress{padding:16px;border-radius:20px;background:#fff}.practice-progress span,.practice-progress strong{display:block}.practice-progress strong{margin:7px 0;font-size:22px}.practice-progress i{height:7px;display:block;border-radius:999px;background:#eee}.practice-progress i b{display:block;width:10%;height:100%;border-radius:inherit;background:#ff6c54}.question-card{margin-top:12px;padding:18px;border-radius:22px;background:#fff}.question-card>span{color:#ff674f;font-size:9px}.question-card h3{font-size:13px;line-height:1.65}.question-visual{margin:16px 0;padding:25px;border-radius:16px;text-align:center;background:#f5f1ef;font-size:25px}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.answer-grid button{padding:12px;border:1px solid #eadfdb;border-radius:12px;background:#fff}.learning-complete-button{width:100%;margin-top:16px}.fm-cover{padding:22px;border-radius:24px;color:#fff;text-align:center;background:linear-gradient(145deg,#ff6b52,#ef4f79)}.fm-cover span{font-size:9px}.fm-cover h3{margin:12px 0 5px;font-size:20px}.fm-cover p{font-size:9px}.fm-wave{margin:25px 0;font-size:20px;letter-spacing:5px}.fm-cover button{width:52px;height:52px;border:0;border-radius:50%;color:#ff5f5a;background:#fff;font-size:20px}.fm-notes{margin-top:12px;padding:16px;border-radius:20px;background:#fff}.fm-notes h3{font-size:14px}.fm-notes p{color:#777;font-size:10px;line-height:1.6}.fm-notes div{display:flex;justify-content:space-between;gap:8px;color:#999;font-size:8px}.member-experience-card{padding:24px;border-radius:24px;text-align:center;background:linear-gradient(160deg,#fff0e8,#fff)}.member-experience-card>span{padding:5px 9px;border-radius:999px;color:#fff;background:#ff684f;font-size:8px}.member-experience-card img{width:150px;height:150px;display:block;margin:10px auto;object-fit:contain}.member-experience-card h3{font-size:18px}.member-experience-card p{color:#7e6f69;font-size:10px;line-height:1.6}.member-experience-card div{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:13px;background:#fff}.member-experience-card div b{color:#ff713d}.member-experience-card div span{font-size:9px}

.app-native-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 4px 2px 14px;
}

.app-native-header span { font-size: 12px; font-weight: 800; }
.app-native-header h2 { margin: 20px 0 0; font-size: 21px; font-weight: 700; }
.app-native-header > button { border: 0; background: transparent; font-size: 26px; }

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

.app-feature-card {
  position: relative;
  min-height: 164px;
  overflow: hidden;
  padding: 24px 18px;
  border: 0;
  border-radius: 22px;
  color: #fff;
  text-align: left;
}

.app-feature-card.blue { background: linear-gradient(180deg, #1384f6, #72c9ff); }
.app-feature-card.red { background: linear-gradient(180deg, #ff625e, #ffa088); }
.app-feature-card span { display: block; font-size: 23px; font-weight: 700; }
.app-feature-card small { display: block; margin-top: 7px; color: rgba(255,255,255,.76); font-size: 12px; }
.app-feature-card i { position: absolute; left: 18px; bottom: 26px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.34); font-size: 25px; font-style: normal; }
.app-feature-card b { position: absolute; right: 14px; bottom: -6px; color: rgba(255,255,255,.92); font-size: 68px; transform: rotate(-8deg); }

.utility-panel {
  margin-top: 14px;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
}

.utility-scroll {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 18px 12px 16px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.utility-scroll::-webkit-scrollbar { display: none; }
.utility-item { position: relative; flex: 0 0 78px; display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: transparent; scroll-snap-align: start; }
.utility-item strong { white-space: nowrap; font-size: 12px; font-weight: 500; }
.utility-icon { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.24), 0 7px 16px rgba(61,61,85,.12); font-size: 22px; font-weight: 900; }
.utility-icon.purple { background: linear-gradient(145deg, #9b70f7, #6851df); }
.utility-icon.coral { background: linear-gradient(145deg, #ff8f76, #ff5a6a); }
.utility-icon.green { background: linear-gradient(145deg, #5cdda0, #27b97d); }
.utility-icon.blue { background: linear-gradient(145deg, #75cffb, #4c94ef); }
.utility-icon.checkin { background: linear-gradient(145deg, #ff9a5a, #ff5d53); }
.utility-icon i { position: absolute; top: -4px; right: -3px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #ff403e; }
.utility-icon em { position: absolute; right: -6px; bottom: -4px; width: 18px; height: 18px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #a85b16; background: #ffd65d; font-size: 8px; font-style: normal; }
.checkin-entry > b { position: absolute; z-index: 2; top: -8px; right: -5px; padding: 3px 6px; border: 2px solid #fff; border-radius: 999px; color: #fff; background: #ff4f4f; white-space: nowrap; font-size: 8px; }

.training-panel,
.module-preview { margin-top: 14px; padding: 18px; border-radius: 22px; background: #fff; }
.training-panel h3 { margin: 0 0 10px; font-size: 17px; }
.training-panel h3 span { margin-right: 3px; color: #ff4f4f; }
.training-panel article { display: grid; grid-template-columns: 74px 1fr; gap: 12px; padding: 12px 0; }
.training-panel article + article { border-top: 1px dashed #eee; }
.training-cover { height: 74px; display: grid; place-items: center; border-radius: 12px; color: #fff; text-align: center; font-size: 18px; font-weight: 900; line-height: 1.05; }
.training-cover.orange { background: linear-gradient(145deg, #ff6b3d, #ffc94f); }
.training-cover.blue { background: linear-gradient(145deg, #2178f2, #75d5ff); }
.training-panel article strong { display: block; font-size: 13px; line-height: 1.45; }
.training-panel article p { margin: 5px 0; color: #999; font-size: 10px; }
.training-panel article span { color: #ff6864; font-size: 10px; }
.module-preview { margin-bottom: 12px; }
.module-tabs { display: flex; gap: 18px; overflow: hidden; white-space: nowrap; color: #999; font-size: 11px; }
.module-tabs b { color: #222; }
.module-placeholder { margin-top: 18px; padding: 16px; border-radius: 15px; background: #fff6f1; }
.module-placeholder i { display: inline-block; padding: 4px 9px; border: 1px solid #ff746b; border-radius: 999px; color: #ff5e56; font-size: 9px; font-style: normal; }
.module-placeholder strong { display: block; margin-top: 9px; font-size: 13px; }
.module-placeholder p { margin: 5px 0 0; color: #999; font-size: 10px; }
.app-native-nav { position: sticky; z-index: 10; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); height: 68px; margin: 0 -16px; border-top: 1px solid #eee; background: rgba(255,255,255,.98); }
.app-native-nav button { display: grid; place-items: center; align-content: center; gap: 4px; border: 0; color: #555; background: transparent; font-size: 19px; }
.app-native-nav button span { font-size: 10px; }
.app-native-nav button.active { color: #111; font-weight: 800; }

/* 单页纵向 H5 */
.h5-screen { min-height: 100%; background: #f5f5f5; }
.h5-sticky-header { position: sticky; z-index: 16; top: 0; display: grid; grid-template-columns: 48px 1fr 72px; align-items: center; height: 58px; padding: 8px 12px; border-bottom: 1px solid #eee; background: rgba(255,255,255,.96); backdrop-filter: blur(16px); }
.h5-sticky-header > button:first-child { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f5f5f5; font-size: 25px; }
.h5-sticky-header h2 { margin: 0; text-align: center; font-size: 17px; }
.h5-coin { justify-self: end; padding: 7px 10px; border: 0; border-radius: 999px; color: #874d17; background: #fff0b1; font-size: 11px; font-weight: 800; }
.h5-content { display: grid; gap: 12px; padding: 12px 14px 28px; }
.compact-growth-card { position: relative; min-height: 136px; display: grid; grid-template-columns: 1fr 88px; overflow: hidden; padding: 18px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #ff6e5d, #ff9e6d); box-shadow: 0 12px 28px rgba(255,91,76,.16); }
.compact-growth-copy { position: relative; z-index: 2; min-width: 0; }
.compact-growth-copy > span { font-size: 10px; opacity: .84; }
.compact-growth-copy h3 { margin: 5px 0 3px; font-size: 19px; }
.compact-growth-copy p { margin: 0; font-size: 9px; opacity: .84; }
.compact-xp { width: 100%; height: 6px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.3); }
.compact-xp i { display: block; height: 100%; border-radius: inherit; background: #fff2a2; }
.compact-growth-copy small { display: block; margin-top: 3px; font-size: 8px; opacity: .75; }
.compact-growth-copy > div:last-child { display: flex; gap: 8px; margin-top: 8px; }
.compact-growth-copy button { padding: 5px 9px; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; color: #fff; background: rgba(255,255,255,.14); font-size: 9px; }
.compact-growth-card > img { width: 88px; height: 118px; align-self: end; object-fit: contain; filter: drop-shadow(0 9px 14px rgba(95,37,42,.18)); }
.arrival-strip { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 18px; background: #fff; }
.arrival-strip > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #ff6859; font-weight: 900; }
.arrival-strip strong,.arrival-strip small { display: block; }
.arrival-strip strong { font-size: 11px; }
.arrival-strip small { margin-top: 2px; color: #999; font-size: 8px; }
.arrival-strip > b { color: #ff6d55; font-size: 9px; }
.h5-card { padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(55,38,35,.04); }
.newbie-gift { position: relative; display: grid; grid-template-columns: 1fr 74px; overflow: hidden; padding-bottom: 58px; color: #613b35; background: linear-gradient(135deg, #fff4cf, #ffe0d7); }
.newbie-gift > div > span { color: #ff6a55; font-size: 9px; font-weight: 900; }
.newbie-gift h3 { margin: 5px 0; font-size: 17px; }
.newbie-gift p { margin: 0; color: #8d756e; font-size: 9px; line-height: 1.5; }
.newbie-gift div div { display: flex; gap: 8px; margin-top: 10px; }
.newbie-gift div div b { color: #e26337; font-size: 10px; }
.newbie-gift img { width: 76px; height: 94px; object-fit: contain; }
.newbie-gift > button { position: absolute; left: 16px; right: 16px; bottom: 14px; height: 36px; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(90deg, #ff6c56, #ff8d4e); font-size: 12px; font-weight: 800; }
.h5-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.h5-section-title span { color: #ff6654; font-size: 9px; font-weight: 900; }
.h5-section-title h3 { margin: 3px 0 0; font-size: 15px; }
.h5-section-title > b { color: #a58d88; font-size: 10px; }
.h5-section-title .text-button { border: 0; color: #ff6654; background: transparent; font-size: 10px; }
.h5-task-section .task-item { border: 1px solid #f1e8e5; box-shadow: none; }
.h5-task-section .task-item + .task-item { margin-top: 8px; }
.section-desc { margin: -4px 0 14px; color: #97817d; font-size: 9px; line-height: 1.5; }
.campaign-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 13px; padding: 10px 11px; border-radius: 13px; background: #fff4ee; }
.campaign-status span { color: #b47a6e; font-size: 9px; }
.campaign-status span.done { color: #3ea77b; }
.campaign-status button { border: 0; color: #ff6654; background: transparent; font-size: 9px; }
.makeup-link { width: 100%; margin-top: 10px; padding: 9px; border: 1px dashed #efc8bd; border-radius: 12px; color: #9f776f; background: transparent; font-size: 9px; }
.h5-gateway-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.h5-gateway-grid > button { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 14px 12px; border: 0; border-radius: 18px; text-align: left; background: #fff; }
.h5-gateway-grid > button > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #ff7a5c, #8c72db); }
.h5-gateway-grid strong,.h5-gateway-grid small { display: block; }
.h5-gateway-grid strong { font-size: 10px; }
.h5-gateway-grid small { margin-top: 3px; color: #999; font-size: 7px; line-height: 1.3; }
.h5-gateway-grid b { color: #bbb; }
.h5-rules { padding: 16px; border-radius: 18px; background: #ececec; }
.h5-rules h3 { margin: 0 0 6px; font-size: 12px; }
.h5-rules p { margin: 0; color: #888; font-size: 9px; line-height: 1.6; }
.h5-rules button { margin-top: 9px; padding: 0; border: 0; color: #666; background: transparent; font-size: 9px; }

.arrival-backdrop { align-items: flex-start; padding-top: 112px; background: rgba(35,28,28,.22); }
.arrival-modal { position: relative; width: calc(100% - 40px); min-height: 116px; display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 12px; padding: 15px 18px 15px 10px; border-radius: 22px; color: #5f3832; background: #fff; box-shadow: 0 22px 60px rgba(66,35,31,.2); animation: toastIn .25s ease both; }
.arrival-modal img { width: 72px; height: 84px; object-fit: contain; }
.arrival-modal span,.arrival-modal strong { display: block; }
.arrival-modal span { font-size: 11px; }
.arrival-modal strong { margin-top: 3px; color: #ff624c; font-size: 23px; }
.arrival-modal p { margin: 3px 0 0; color: #9a817c; font-size: 9px; }
.arrival-modal > button { position: absolute; top: 8px; right: 10px; border: 0; color: #b8aaa7; background: transparent; font-size: 18px; }
.challenge-choice-list { display: grid; gap: 8px; margin: 13px 0; }
.challenge-choice-list button { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 10px; border: 1px solid #f2dbd3; border-radius: 14px; text-align: left; background: #fff8f4; }
.challenge-choice-list span { grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #ff6e53; background: #ffe7dc; }
.challenge-choice-list strong { font-size: 11px; }
.challenge-choice-list small { color: #999; font-size: 8px; }

/* 乐刻式岸仔场景与横向任务面板 */
.mascot-h5-screen {
  min-height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #ff526b 0, #ff817d 24%, #b88be5 61%, #f6f1fa 61%);
}

.mascot-h5-header {
  position: relative;
  z-index: 8;
  height: 66px;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  padding: 12px 14px 6px;
  color: #fff;
}

.mascot-h5-header h2 {
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}

.mascot-h5-header button {
  width: 40px;
  height: 40px;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 30px;
}

.mascot-h5-header button:last-child {
  justify-self: end;
  font-size: 23px;
}

.mascot-scene {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 17% 24%, rgba(255,255,255,.38) 0 4%, transparent 4.5%),
    radial-gradient(circle at 83% 28%, rgba(255,255,255,.24) 0 5%, transparent 5.5%),
    linear-gradient(180deg, rgba(255,93,111,.36), rgba(168,126,221,.92));
}

.mascot-scene::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: -8%;
  right: -8%;
  bottom: 0;
  height: 45%;
  background:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(180deg, #d8b5ef, #aa77dc);
  background-size: 100% 32px, 48px 100%, 100% 100%;
  transform: perspective(230px) rotateX(24deg);
  transform-origin: bottom;
}

.scene-entry-row {
  position: absolute;
  z-index: 5;
  top: 12px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.scene-coin-entry,
.scene-dress-entry,
.scene-store-entry,
.scene-level {
  border: 0;
}

.scene-coin-entry {
  min-width: 122px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 7px 10px 7px 7px;
  border-radius: 999px;
  color: #8e525a;
  text-align: left;
  background: rgba(255,255,255,.76);
  box-shadow: 0 8px 22px rgba(111,42,86,.12);
  backdrop-filter: blur(8px);
}

.scene-coin-entry > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 3px solid #fff1a1;
  border-radius: 50%;
  color: #9b5c13;
  background: linear-gradient(145deg, #ffe777, #ffb62e);
  box-shadow: inset 0 -3px rgba(185,111,12,.15);
  font-size: 16px;
  font-weight: 900;
}

.scene-coin-entry small,
.scene-coin-entry strong { display: block; }
.scene-coin-entry small { font-size: 9px; }
.scene-coin-entry strong { margin-top: 1px; font-size: 13px; }
.scene-coin-entry b { color: #d06e70; font-size: 20px; }

.scene-dress-entry {
  display: grid;
  justify-items: center;
  gap: 2px;
  color: #fff;
  background: transparent;
  font-size: 11px;
}

.scene-dress-entry span {
  width: 48px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #ff7d54;
  background: linear-gradient(145deg, #fff3b2, #fff);
  box-shadow: 0 8px 20px rgba(95,50,95,.15);
  font-size: 23px;
}

.scene-building {
  position: absolute;
  z-index: -1;
  top: 92px;
  left: 50%;
  width: 286px;
  height: 170px;
  transform: translateX(-50%);
  border: 7px solid rgba(255,255,255,.55);
  border-radius: 28px 28px 8px 8px;
  background:
    linear-gradient(90deg, transparent 0 61%, #ff7b62 61% 63%, #ffe7da 63% 84%, #ff7b62 84% 86%, transparent 86%),
    linear-gradient(180deg, #fff4dd 0 38%, #ffd8bb 38% 43%, #fff2e2 43%);
  box-shadow: 0 20px 35px rgba(101,52,95,.16);
}

.scene-building::before {
  content: "";
  position: absolute;
  left: -15px;
  right: -15px;
  top: 33px;
  height: 36px;
  border: 6px solid #ffb747;
  border-radius: 9px;
  background: repeating-linear-gradient(90deg, #ff6d52 0 24px, #ff9d48 24px 48px);
  box-shadow: 0 6px 0 rgba(181,76,55,.14);
}

.scene-building > span {
  position: absolute;
  z-index: 2;
  top: 42px;
  left: 50%;
  width: 150px;
  padding: 8px 9px;
  transform: translateX(-50%);
  border-radius: 6px;
  color: #fff;
  text-align: center;
  background: #f1584e;
  box-shadow: 0 0 0 4px #ffcc4e;
  font-size: 14px;
  font-weight: 900;
}

.scene-building i {
  position: absolute;
  left: 38px;
  bottom: 0;
  width: 82px;
  height: 72px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(90deg, #ffd88d 0 30%, #fff0b9 30% 65%, #ffc76e 65%);
}

.scene-building b {
  position: absolute;
  right: 28px;
  bottom: 0;
  width: 56px;
  height: 88px;
  border-radius: 7px 7px 0 0;
  background: #f36b51;
  box-shadow: inset 0 0 0 7px rgba(202,65,50,.18);
}

.scene-mascot {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 72px;
  width: 184px;
  height: 226px;
  transform: translateX(-50%);
  object-fit: contain;
  filter: drop-shadow(0 18px 16px rgba(80,45,94,.26));
  animation: sceneMascotFloat 3.6s ease-in-out infinite;
}

.scene-store-entry {
  position: absolute;
  z-index: 5;
  right: 17px;
  bottom: 113px;
  display: grid;
  justify-items: center;
  gap: 2px;
  color: #fff;
  background: transparent;
  font-size: 10px;
}

.scene-store-entry span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffdb5c, #ff7955);
  box-shadow: 0 8px 18px rgba(96,43,97,.2), inset 0 0 0 3px rgba(255,255,255,.55);
  font-size: 20px;
}

.scene-store-entry em {
  position: absolute;
  top: -24px;
  right: -8px;
  min-width: 52px;
  padding: 5px 8px;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 999px 999px 999px 4px;
  color: #fff;
  background: #ff4f49;
  box-shadow: 0 7px 16px rgba(132,47,62,.2);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  animation: rewardReminderPulse 1.8s ease-in-out infinite;
}
.scene-store-entry.reminder-shipped em { background: #2fad77; }
.scene-store-entry.reminder-address em { background: #f29b38; }
.scene-store-entry.reminder-expiry em { background: #8b68d8; }

@keyframes rewardReminderPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.store-order-entry {
  position: relative;
  width: auto;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 800;
}

.store-order-entry em {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #ff514b;
  font-size: 8px;
  font-style: normal;
}

.fulfillment-reminder {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 11px 12px;
  border: 0;
  border-radius: 17px;
  text-align: left;
}

.fulfillment-reminder.warning { color: #9a551c; background: #fff0cd; }
.fulfillment-reminder.shipped { color: #257655; background: #dcf7e9; }
.fulfillment-reminder > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 900; }
.fulfillment-reminder.warning > span { background: #f1a33b; }
.fulfillment-reminder.shipped > span { background: #35b77e; }
.fulfillment-reminder strong, .fulfillment-reminder small { display: block; }
.fulfillment-reminder strong { font-size: 11px; }
.fulfillment-reminder small { margin-top: 3px; color: currentColor; opacity: .72; font-size: 9px; }
.fulfillment-reminder b { font-size: 9px; }

.redemption-screen,
.address-screen { background: linear-gradient(180deg, #fff1ec, #fffaf7); }

.redemption-tabs { margin-bottom: 12px; }
.redemption-list { display: grid; gap: 10px; }
.redemption-order-card { padding: 14px; border: 1px solid #f1e0da; border-radius: 20px; background: #fff; box-shadow: 0 10px 24px rgba(109,64,53,.06); }
.redemption-order-head { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 9px; }
.redemption-order-head > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: #fff0ec; font-size: 20px; }
.redemption-order-head strong, .redemption-order-head small { display: block; }
.redemption-order-head strong { font-size: 12px; }
.redemption-order-head small { margin-top: 3px; color: #a0908a; font-size: 8px; }
.redemption-order-head em { padding: 4px 7px; border-radius: 999px; color: #ff654f; background: #fff0eb; font-size: 8px; font-style: normal; font-weight: 900; }
.redemption-order-card > p { margin: 10px 0; color: #88766f; font-size: 10px; }
.redemption-order-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px dashed #eee0dc; }
.redemption-order-foot > span { color: #9b8982; font-size: 8px; }
.redemption-empty { display: grid; justify-items: center; padding: 36px 18px; border-radius: 22px; text-align: center; background: #fff; }
.redemption-empty img { width: 112px; height: 112px; object-fit: contain; }
.redemption-empty strong { font-size: 15px; }
.redemption-empty p { margin: 7px 0 18px; color: #978680; font-size: 10px; }

.header-placeholder { width: 38px; }
.address-order-summary { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: #fff; }
.address-order-summary > span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: #fff0ec; font-size: 25px; }
.address-order-summary strong, .address-order-summary small { display: block; }
.address-order-summary strong { font-size: 13px; }
.address-order-summary small { margin-top: 5px; color: #9d8a83; font-size: 9px; }
.address-form { display: grid; gap: 11px; margin-top: 12px; padding: 16px; border-radius: 22px; background: #fff; }
.address-form label { color: #665652; font-size: 10px; font-weight: 800; }
.address-form input:not([type="checkbox"]), .address-form textarea { width: 100%; margin-top: 6px; padding: 12px; border: 1px solid #eaded9; border-radius: 13px; color: #443835; background: #fffaf8; font: inherit; font-weight: 500; outline: none; }
.address-form textarea { min-height: 72px; resize: none; }
.address-form input:focus, .address-form textarea:focus { border-color: #ff826a; box-shadow: 0 0 0 3px #fff0eb; }
.address-default { display: flex; align-items: center; gap: 7px; }
.address-success { display: grid; justify-items: center; padding: 30px 18px; border-radius: 24px; text-align: center; background: #fff; }
.address-success > div { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #35bd82; font-size: 28px; font-weight: 900; }
.address-success h3 { margin: 14px 0 5px; }
.address-success p { margin: 0; color: #8c7a74; font-size: 10px; line-height: 1.6; }
.address-success article { width: 100%; margin: 17px 0; padding: 13px; border-radius: 15px; text-align: left; background: #fff5f1; }
.address-success article strong, .address-success article span { display: block; font-size: 10px; }
.address-success article span { margin-top: 5px; color: #8d7a74; line-height: 1.5; }

.shipment-track { display: grid; gap: 0; margin: 16px 0; text-align: left; }
.shipment-track > div { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 9px; min-height: 58px; }
.shipment-track > div:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 25px; bottom: 0; width: 2px; background: #eadfdc; }
.shipment-track i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #a99b96; background: #f2ebe8; font-size: 10px; font-style: normal; font-weight: 900; }
.shipment-track .done i, .shipment-track .active i { color: #fff; background: #ff6c55; }
.shipment-track strong, .shipment-track small { display: block; }
.shipment-track strong { font-size: 11px; }
.shipment-track small { margin-top: 4px; color: #9b8c87; font-size: 9px; }

.scene-level {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 45px;
  width: 230px;
  height: 30px;
  display: grid;
  grid-template-columns: 1fr 30px;
  align-items: center;
  gap: 3px;
  padding: 3px 4px 3px 7px;
  transform: translateX(-50%);
  border: 3px solid rgba(255,247,170,.78);
  border-radius: 999px;
  color: #884c34;
  background: rgba(255,185,67,.9);
  box-shadow: 0 8px 18px rgba(80,40,94,.18);
  font-size: 9px;
}

.scene-level-main {
  min-width: 0;
  height: 20px;
  display: grid;
  grid-template-columns: 43px 1fr;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  color: #884c34;
  background: transparent;
  font-size: 9px;
}

.scene-level-main > span { font-weight: 900; }
.scene-level-main > div { position: relative; height: 14px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.55); }
.scene-level-main > div i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff6f42, #ff9842); }
.scene-level-main > div b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; text-shadow: 0 1px 2px rgba(130,68,42,.35); font-size: 8px; }
.scene-level-gift { width: 26px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: #fff1a8; font-size: 16px; }

.scene-message {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 12px;
  width: 90%;
  margin: 0;
  transform: translateX(-50%);
  color: rgba(255,255,255,.92);
  text-align: center;
  text-shadow: 0 2px 6px rgba(89,49,107,.2);
  font-size: 12px;
}

.leke-task-dock {
  position: relative;
  z-index: 6;
  margin-top: -2px;
  padding: 16px 14px 30px;
  border-radius: 28px 28px 0 0;
  background: #f6f2f8;
  box-shadow: 0 -8px 24px rgba(89,46,103,.1);
}

.checkin-calendar,
.switch-task-panel {
  border-radius: 21px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(83,54,83,.07);
}

.checkin-calendar { padding: 14px 12px 12px; }
.calendar-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.calendar-title strong,
.calendar-title span { display: block; }
.calendar-title strong { font-size: 14px; }
.calendar-title span { margin-top: 3px; color: #9a8b98; font-size: 9px; }
.calendar-title small { color: #ff694d; font-size: 10px; font-weight: 800; }

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin-top: 12px;
}

.calendar-days > div {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 7px 2px;
  border-radius: 11px;
  color: #a1919d;
  background: #f7f3f7;
}

.calendar-days > div > small { display: block; margin-bottom: 4px; color: #9a8c97; font-size: 7px; font-weight: 700; }

.calendar-days > div.active {
  color: #e66141;
  background: #fff0e7;
  box-shadow: inset 0 0 0 1px #ffd3bd;
}

.calendar-days span { font-size: 14px; }
.calendar-days b { overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; font-size: 8px; }

.switch-task-panel { margin-top: 12px; overflow: hidden; }
.task-switcher { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #f0e8ed; }
.task-switcher button {
  position: relative;
  height: 52px;
  border: 0;
  color: #9d8d99;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}

.task-switcher button.active { color: #ff654c; }
.task-switcher button.active::after {
  content: "";
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, #ff6b4f, #ff9770);
}

.task-switcher i {
  position: absolute;
  top: 7px;
  right: 8px;
  padding: 2px 4px;
  border-radius: 6px 6px 6px 0;
  color: #fff;
  background: #ff4d56;
  font-size: 7px;
  font-style: normal;
}

.switch-task-content { min-height: 190px; padding: 6px 14px 14px; }
.leke-task-list { display: grid; }
.leke-task-row {
  position: relative;
  min-height: 82px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #f2ebef;
}

.leke-task-row:last-child { border-bottom: 0; }
.leke-task-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #ff9a62, #ff5e57);
  box-shadow: 0 6px 12px rgba(255,99,75,.18);
  font-size: 17px;
  font-weight: 900;
}

.leke-task-row strong,
.leke-task-row p,
.leke-task-row b { display: block; }
.leke-task-row strong { font-size: 12px; }
.leke-task-row p { margin: 4px 0 0; color: #9b8b97; font-size: 9px; line-height: 1.45; }
.leke-task-row b { margin-top: 4px; color: #ef8a37; font-size: 9px; }
.leke-task-row > button:not(.row-link) {
  min-width: 60px;
  height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(90deg, #ff6a4d, #ff8f5d);
  font-size: 10px;
  font-weight: 800;
}

.leke-task-row > button:disabled { color: #aaa; background: #eee8eb; }
.newbie-task-list .leke-task-row.claimed { opacity: .58; }
.newbie-task-list .leke-task-row > div { min-width: 0; }
.row-link {
  position: absolute;
  right: 4px;
  bottom: 3px;
  padding: 3px 0;
  border: 0;
  color: #a88c9a;
  background: transparent;
  font-size: 8px;
}

.task-empty {
  min-height: 184px;
  display: grid;
  justify-items: center;
  align-content: center;
  padding: 22px;
  text-align: center;
}

.task-empty > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #ff9a62, #ff5e57);
  font-size: 21px;
}

.task-empty strong { margin-top: 9px; font-size: 13px; }
.task-empty p { margin: 5px 0 12px; color: #9d8c98; font-size: 9px; }
.task-empty button {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  color: #ff674e;
  background: #fff0e9;
  font-size: 10px;
  font-weight: 800;
}

.leke-daily-list { gap: 0; }
.leke-daily-list .task-item {
  min-height: 78px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #f2ebef;
  border-radius: 0;
  box-shadow: none;
}

.leke-daily-list .task-item:last-child { border-bottom: 0; }
.leke-daily-list .task-icon { width: 44px; height: 44px; }
.leke-daily-list .small-button { min-width: 60px; min-height: 30px; padding: 0 10px; font-size: 10px; }
.switch-task-content .share-task { margin-top: 8px; padding: 11px 12px; }
.switch-task-content .share-task strong { font-size: 11px; }
.switch-task-content .share-task span { font-size: 8px; }

.share-channel-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 16px 0;
}

.share-channel-list button {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 13px 6px;
  border: 1px solid #f3dcd5;
  border-radius: 16px;
  color: #5e4848;
  background: #fff8f5;
  font-size: 10px;
}

.share-channel-list span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #ff7a57, #ff5263);
  font-size: 16px;
  font-weight: 900;
}

.share-cancel { width: 100%; }

@keyframes sceneMascotFloat {
  0%, 100% { transform: translate(-50%, 0) rotate(-1deg); }
  50% { transform: translate(-50%, -7px) rotate(1deg); }
}

@media (max-width: 360px) {
  .mascot-scene { min-height: 448px; }
  .scene-building { width: 260px; }
  .scene-mascot { width: 158px; height: 190px; }
  .scene-level { width: 212px; }
  .switch-task-content { padding-inline: 11px; }
  .task-copy p { max-width: 135px; }
}

@keyframes avatarFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes pulse {
  0%, 100% { opacity: .55; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px) scale(.96); }
}

@keyframes coinFly {
  0% { opacity: 0; transform: translate(-50%, 40px) scale(.6); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(108px, -72px) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 1180px) and (min-width: 861px) {
  .prototype-stage { grid-template-columns: 210px minmax(360px,390px) 300px; gap: 12px; padding: 12px; }
  .doc-panel { top: 12px; height: calc(100vh - 24px); padding: 14px; }
  .doc-flow-item { padding: 8px; }
}

@media (max-width: 860px) {
  body { background: var(--warm-pink); }
  .prototype-stage { display: block; min-height: 100vh; padding: 0; }
  .phone-shell {
    width: 100%;
    height: 100vh;
    min-height: 620px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .phone-shell::before { display: none; }
  .prototype-notes,
  .doc-panel,
  .doc-state-panel { display: none; }
  .prototype-center { display: block; }
}

@media (max-height: 760px) and (min-width: 861px) {
  .phone-shell { height: calc(100vh - 20px); min-height: 650px; }
  .prototype-stage { padding: 10px 24px; }
  .prototype-notes > p { font-size: 16px; }
}