* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

@font-face {
  font-family: "YoreMeng";
  src: url("https://drive-cdn.mujian.me/19/%E5%AD%97%E4%BD%93/f9925bde-98eb-4d0d-a907-6a5f1819ae96_%E5%A4%A9%E7%94%9F%E8%90%8C%E7%89%A9%E5%AD%97%E4%BD%93.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
  size-adjust: 132%;
}

@font-face {
  font-family: "YoreXiaolai";
  src: url("https://drive-cdn.mujian.me/19/%E5%AD%97%E4%BD%93/0e559c03-72c2-4f61-aa02-c7b3d6c3dd39_Xiaolai-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "YorePudding";
  src: url("https://drive-cdn.mujian.me/19/%E5%AD%97%E4%BD%93/b8465668-dd25-4af7-a340-659b549bb019_Xiaoxiongbuding-Bold-2.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
  size-adjust: 124%;
}

@font-face {
  font-family: "兔兔子90";
  src: url("https://drive-cdn.mujian.me/19/%E5%AD%97%E4%BD%93/4d91962b-2e6d-4418-851c-eab95033d00c_%E4%B8%B9%E3%81%AE%E5%85%94%E5%85%94%E5%AD%9090.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "蓝莓90";
  src: url("https://drive-cdn.mujian.me/19/%E5%AD%97%E4%BD%93/c591cb27-86c2-4f1a-8a06-1d358a9c9b89_%E4%B8%B9%E3%81%AE%E8%93%9D%E8%8E%9390.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "绒毛90";
  src: url("https://drive-cdn.mujian.me/19/%E5%AD%97%E4%BD%93/cb7aab32-eee7-40bd-916c-884376b24ddd_%E4%B8%B9%E3%81%AE%E7%BB%92%E6%AF%9B90.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "茉莉90";
  src: url("https://drive-cdn.mujian.me/19/%E5%AD%97%E4%BD%93/bcc0bacf-5639-42b0-9e88-68dbb504bacc_%E4%B8%B9%E3%81%AE%E8%8C%89%E8%8E%8990.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "银杏树90";
  src: url("https://drive-cdn.mujian.me/19/%E5%AD%97%E4%BD%93/d4c40edd-425d-48aa-bdd5-bfdf92ce1755_%E4%B8%B9%E3%81%AE%E9%93%B6%E6%9D%8F%E6%A0%9190.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "方块90";
  src: url("https://drive-cdn.mujian.me/19/%E5%AD%97%E4%BD%93/2f787bc3-496e-4b1e-a905-6b1b3744761f_%E4%B8%B9%E3%81%AE%E6%96%B9%E5%9D%9790.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "恋爱番100";
  src: url("https://drive-cdn.mujian.me/19/%E5%AD%97%E4%BD%93/4aae0bd7-91ae-47d6-a3d7-addea4162a98_%E4%B8%B9%E3%81%AE%E6%81%8B%E7%88%B1%E7%95%AA100.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "春天90";
  src: url("https://drive-cdn.mujian.me/19/%E5%AD%97%E4%BD%93/34bddef0-9a89-4693-9be3-42a9801a6241_%E4%B8%B9%E3%81%AE%E6%98%A5%E5%A4%A990.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "奶冻 90";
  src: url("https://drive-cdn.mujian.me/19/%E5%AD%97%E4%BD%93/1e265e34-0359-43d8-94e9-37516a7d19f9_%E4%B8%B9%E3%81%AE%E5%A5%B6%E5%86%BB%2090.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

html {
  --font-ui: "Nunito", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "Cormorant Garamond", serif;
  --font-scale: 1;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

html[lang="ja"] {
  --font-ui: "Nunito", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "PingFang SC", sans-serif;
}

html[lang="ko"] {
  --font-ui: "Nunito", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "PingFang SC", sans-serif;
}

html,
body {
  margin: 0;
  height: 100%;
  font-family: var(--font-ui);
  background: #2a1d1f;
  color: var(--ink);
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

img {
  max-width: 100%;
}

.stage {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(60% 50% at 20% 10%, rgba(255, 220, 220, 0.18), transparent),
    #211618;
}

.phone {
  width: min(420px, 100%);
  height: min(860px, 96vh);
  height: min(860px, 96dvh);
  border-radius: 42px;
  overflow: hidden;
  position: relative;
  font-size: calc(16px * var(--font-scale));
  background: var(--bg);
  box-shadow:
    0 0 0 10px #1a1113,
    0 0 0 12px #4a3234,
    0 30px 80px rgba(0, 0, 0, 0.45);
}

.status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: none;
  height: 44px;
  padding: 12px 22px 0;
  justify-content: space-between;
  align-items: center;
  color: var(--ink);
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  pointer-events: none;
}

.status-bar .pills {
  display: flex;
  gap: 6px;
  align-items: center;
}

.status-logo {
  height: 20px;
  width: auto;
  max-width: 72px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 0.4px color-mix(in srgb, var(--ink) 55%, transparent));
}

.battery {
  width: 22px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  position: relative;
  opacity: 0.85;
}

.battery::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 3px;
  width: 2px;
  height: 5px;
  background: currentColor;
  border-radius: 1px;
}

.battery i {
  display: block;
  height: 100%;
  width: var(--bat-level, 72%);
  background: currentColor;
}

.battery.is-charging {
  opacity: 1;
}

.battery.is-charging::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 7px;
  transform: translate(-50%, -50%);
  background: currentColor;
  clip-path: polygon(55% 0, 20% 52%, 48% 52%, 40% 100%, 80% 46%, 52% 46%);
  filter: drop-shadow(0 0 1px color-mix(in srgb, var(--paper, white) 80%, transparent));
}

.battery.is-low i {
  width: var(--bat-level, 20%);
}

.screens {
  height: 100%;
  position: relative;
}

.screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.screen.active {
  display: flex;
}

.screen.lock.is-dragging,
.screen.lock.is-unlocking,
.screen.home.is-revealing {
  display: flex;
}

.screen.lock.is-dragging,
.screen.lock.is-unlocking {
  z-index: 6;
}

.screen.home.is-revealing {
  z-index: 1;
}

.lock {
  background: var(--wallpaper);
  color: var(--ink);
  justify-content: space-between;
  padding: calc(var(--sat, 0px) + 36px) 28px 46px;
  user-select: none;
  touch-action: none;
}

.lock.is-dragging {
  transition: none;
}

.lock.is-unlocking {
  pointer-events: none;
  transition:
    transform 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.48s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.48s ease;
  transform: translate3d(0, -110%, 0) scale(1.04);
  opacity: 0;
  filter: blur(14px);
}

html.native-lite .lock.is-unlocking {
  filter: none;
  transition-duration: 0.32s, 0.28s, 0s;
}

.home.is-revealing {
  transform-origin: center center;
  animation: home-unlock 0.68s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.native-lite .home-pages {
  scroll-behavior: auto;
}

/* Android WebView 在剪裁层里叠十几层毛玻璃时会耗尽图块内存，图标和文字整片不绘制 */
html.native-lite .home-pages-clip,
html.native-lite .home-page {
  clip-path: none;
}

html.native-lite .home-pages-clip *,
html.native-lite .home-dock,
html.native-lite .home-dock * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.native-lite .home .glass-ico {
  background-color: color-mix(in srgb, white 18%, transparent);
}

html.native-lite .home-dock {
  background-color: color-mix(in srgb, #fff 34%, transparent);
}

/* Android WebView 在剪裁层里叠十几层毛玻璃时会耗尽图块内存，图标和文字整片不绘制 */
html.native-lite .home-pages-clip,
html.native-lite .home-page {
  clip-path: none;
}

html.native-lite .home-pages-clip *,
html.native-lite .home-dock,
html.native-lite .home-dock * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.native-lite .home .glass-ico {
  background-color: color-mix(in srgb, white 18%, transparent);
}

html.native-lite .home-dock {
  background-color: color-mix(in srgb, #fff 34%, transparent);
}

html.native-lite .home.is-revealing {
  animation-name: home-unlock-lite;
  animation-duration: 0.32s;
}

@keyframes home-unlock-lite {
  0% {
    transform: scale(1.04);
    opacity: 0.86;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes home-unlock {
  0% {
    transform: scale(1.14);
    filter: blur(22px) saturate(1.15);
    opacity: 0.72;
  }
  55% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    filter: blur(0) saturate(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lock.is-unlocking {
    transition-duration: 0.01ms;
  }

  .home.is-revealing {
    animation: none;
  }
}

.lock.has-paper,
.home.has-paper {
  background-image: var(--paper);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.lock.has-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(48, 28, 34, 0.08), rgba(48, 28, 34, 0.22));
  pointer-events: none;
}

.lock.has-paper > * {
  position: relative;
  z-index: 1;
}

.lock-clock {
  text-align: center;
}

.lock-clock .time {
  font-family: "Cormorant Garamond", serif;
  font-size: 84px;
  line-height: 0.9;
  font-weight: 500;
  letter-spacing: -2px;
}

.lock-clock .date {
  margin-top: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}

.lock-brand {
  display: grid;
  place-items: center;
  gap: 10px;
  opacity: 0.95;
}

.lock-brand img {
  box-shadow: 0 12px 30px var(--glow);
}

.lock-brand p {
  margin: 0;
  font-size: calc(13px * var(--font-scale));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.boot-gate {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: #f3c9d2;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.boot-gate.is-hold {
  display: none;
}

.boot-gate img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.boot-gate.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.unlock-hint {
  text-align: center;
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
  animation: float 2.4s ease-in-out infinite;
}

@keyframes float {
  50% {
    transform: translateY(-6px);
    opacity: 0.7;
  }
}

.pin-pad {
  display: none;
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 88%, black 12%);
  z-index: 20;
  flex-direction: column;
  justify-content: center;
  padding: 40px 32px;
  gap: 18px;
}

.pin-pad.show {
  display: flex;
}

.pin-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.pin-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--accent);
}

.pin-dots span.on {
  background: var(--strong);
}

.pin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.pin-grid button {
  border: 0;
  background: var(--surface);
  height: 58px;
  border-radius: 18px;
  font-size: calc(20px * var(--font-scale));
}

.home {
  background: var(--wallpaper);
}

.home-pages-clip {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  clip-path: inset(0);
  z-index: 0;
}

.home-pages {
  height: 100%;
  display: flex;
  overflow-x: auto;
  overflow-y: clip;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  touch-action: pan-y;
  scrollbar-width: none;
}

.home-pages::-webkit-scrollbar {
  display: none;
}

.home-page {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  clip-path: inset(0);
}

.home-scroll {
  height: 100%;
  min-height: 0;
  overflow-x: clip;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: calc(var(--sat, 0px) + 16px) 18px 12px;
}

.home-scroll::-webkit-scrollbar {
  width: 0;
}

.home-dots {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 4px 0 10px;
}

.home-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}

.home-dots span.on {
  background: color-mix(in srgb, var(--ink) 72%, transparent);
}

.home-dock {
  position: relative;
  z-index: 2;
  flex: none;
  margin: 0 16px 16px;
  padding: 11px 10px 10px;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  border-radius: 34px;
  background: color-mix(in srgb, #fff 22%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid color-mix(in srgb, #fff 42%, transparent);
  box-shadow:
    0 8px 22px rgba(70, 24, 36, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.home-dock .app-icon {
  flex: 1;
  min-width: 0;
}

.home-dock .app-icon img:not(.glass-art) {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 4px 8px rgba(70, 24, 36, 0.16));
}

.home-page-hint {
  margin: 28px 8px 0;
  text-align: center;
  font-size: calc(13px * var(--font-scale));
  color: var(--ink-soft);
}

.music-widget {
  position: relative;
  container-type: inline-size;
  margin-top: 4px;
  padding: 4px 4px 8px;
  border-radius: 28px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.music-edit {
  position: absolute;
  z-index: 6;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--strong);
  background: color-mix(in srgb, #fff 72%, var(--accent));
}

.music-edit svg {
  width: 16px;
  height: 16px;
  display: block;
}

.music-scene {
  position: relative;
  height: 198px;
  margin-bottom: 2px;
}

.music-ghost {
  position: absolute;
  z-index: 1;
  left: 12px;
  top: 16px;
  width: 46%;
  height: 168px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, #fff);
  border-radius: 12px;
  transform: rotate(3deg);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.music-photo {
  position: absolute;
  z-index: 3;
  left: 8px;
  top: 8px;
  width: 46%;
  height: 174px;
  margin: 0;
  padding: 5px 5px 22px;
  border: 0;
  text-align: left;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff4f6, color-mix(in srgb, var(--accent) 55%, #fff));
  box-shadow: 4px 8px 16px color-mix(in srgb, var(--strong) 18%, transparent);
  transform: rotate(-5deg);
}

.music-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  border-radius: 7px;
  filter: saturate(0.86) contrast(0.98);
}

.music-photo-cap {
  position: absolute;
  bottom: 5px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  font-size: calc(9px * var(--font-scale));
  letter-spacing: 1.4px;
  color: var(--ink-soft);
}

.music-clip {
  position: absolute;
  z-index: 5;
  left: 28px;
  top: 0;
  width: 16px;
  height: 38px;
  border: 2px solid color-mix(in srgb, var(--strong) 45%, #fff);
  border-radius: 11px;
  transform: rotate(-19deg);
}

.music-record-wrap {
  position: absolute;
  z-index: 2;
  right: 6px;
  top: 14px;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 5px 8px 20px color-mix(in srgb, var(--strong) 16%, transparent);
}

.music-record {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, #fff);
  background:
    repeating-radial-gradient(circle at center, transparent 0 3px, color-mix(in srgb, var(--strong) 18%, transparent) 3.4px 4px, transparent 4.4px 6px),
    conic-gradient(from 20deg, color-mix(in srgb, var(--accent) 70%, white), color-mix(in srgb, var(--surface) 85%, white) 16%, var(--strong) 24%, color-mix(in srgb, var(--accent) 25%, white) 39%, color-mix(in srgb, var(--accent) 80%, white) 53%, #fff 68%, color-mix(in srgb, var(--strong) 80%, var(--ink)) 79%, color-mix(in srgb, var(--accent) 40%, white) 90%, color-mix(in srgb, var(--accent) 70%, white));
  animation: music-spin 26s linear infinite;
  animation-play-state: paused;
}

.music-record:before {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #fff 55%, var(--accent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--strong) 22%, transparent);
}

.music-record:after {
  content: "";
  position: absolute;
  inset: 41%;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent) 22%, white);
  background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--accent) 50%, white), var(--strong));
}

.music-arm {
  position: absolute;
  right: 8px;
  top: 12px;
  z-index: 4;
  width: 18px;
  height: 74px;
  border-right: 2px solid color-mix(in srgb, var(--strong) 35%, #fff);
  border-bottom: 2px solid color-mix(in srgb, var(--strong) 35%, #fff);
  border-radius: 0 0 8px 0;
  transform: rotate(14deg);
  transform-origin: 16px 3px;
  transition: transform 0.7s;
}

.music-arm:before {
  content: "";
  position: absolute;
  right: -6px;
  top: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--strong);
  border: 2px solid #fff0f3;
}

.music-heading {
  position: absolute;
  z-index: 4;
  left: 48%;
  right: 0;
  top: 104px;
  pointer-events: none;
  transform: rotate(-5deg);
}

.music-heading span,
.music-heading strong {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: calc(34px * var(--font-scale));
  line-height: 0.78;
  letter-spacing: -1.5px;
}

.music-heading span {
  color: rgba(255, 248, 246, 0.92);
  text-shadow: 0 1px 10px color-mix(in srgb, var(--strong) 35%, transparent);
}

.music-heading strong {
  margin: 6px 0 0 16px;
  color: var(--strong);
}

.music-heading small {
  display: block;
  margin: 10px 0 0 18px;
  font-size: calc(9px * var(--font-scale));
  letter-spacing: 2px;
  color: color-mix(in srgb, var(--strong) 70%, #fff);
}

.music-note {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 4px 0 8px;
  min-width: 0;
  padding: 0 12px;
  font-size: calc(12px * var(--font-scale));
  letter-spacing: 1.5px;
  color: var(--ink-soft);
}

.music-note span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-note.is-lyric {
  letter-spacing: 0.04em;
  color: var(--ink);
}

.music-note.is-lyric span {
  animation: music-lyric-in 0.32s ease;
}

@keyframes music-lyric-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .music-note.is-lyric span {
    animation: none;
  }
}

.music-note:before,
.music-note:after {
  content: "";
  width: 16px;
  height: 1px;
  background: color-mix(in srgb, var(--strong) 28%, transparent);
}

.music-deck {
  position: relative;
  padding: 6px 8px 2px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.music-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.music-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.music-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  color: var(--strong);
}

.music-bars i {
  display: block;
  width: 2px;
  height: 7px;
  background: currentColor;
  border-radius: 2px;
  animation: music-bars 1.15s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.music-bars i:nth-child(2) { height: 16px; animation-delay: -0.8s; }
.music-bars i:nth-child(3) { height: 10px; animation-delay: -0.4s; }
.music-bars i:nth-child(4) { height: 18px; animation-delay: -0.2s; }

.music-title {
  margin: 0;
  font-size: calc(13px * var(--font-scale));
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 148px;
}

.music-caption {
  margin-top: 2px;
  font-size: calc(9px * var(--font-scale));
  letter-spacing: 1.5px;
  color: var(--ink-soft);
}

.music-list-wrap {
  position: relative;
  flex: none;
}

.music-list-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--strong);
}

.music-list-btn svg {
  width: 18px;
  height: 18px;
}

.music-playlist {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  z-index: 8;
  width: 270px;
  width: 76cqw;
  max-height: 320px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  box-shadow: 0 18px 40px rgba(90, 36, 48, 0.16);
  transform-origin: right bottom;
  animation: music-pl-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.music-playlist[hidden] {
  display: none;
}

.music-playlist button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: calc(15px * var(--font-scale));
  font-weight: 500;
  color: #4e3a3e;
}

.music-playlist button span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-playlist button[aria-current="true"] {
  background: rgba(235, 156, 169, 0.32);
  color: #6d4248;
  font-weight: 600;
}

.music-pl-mark,
.music-pl-eq,
.music-pl-tri {
  width: 14px;
  flex: none;
}

.music-pl-eq {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 14px;
  color: #e08b9b;
}

.music-pl-eq i {
  display: block;
  width: 2px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center bottom;
  animation: music-bars 0.85s ease-in-out infinite alternate;
}

.music-pl-eq i:nth-child(2) { height: 12px; animation-delay: -0.55s; }
.music-pl-eq i:nth-child(3) { height: 8px; animation-delay: -0.25s; }

.music-pl-tri {
  height: 14px;
  display: grid;
  place-items: center;
}

.music-pl-tri::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #e08b9b;
}

@keyframes music-pl-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .music-playlist {
    animation: none;
  }
}

.music-seek-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: calc(10px * var(--font-scale));
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.music-seek-row time {
  min-width: 32px;
  text-align: center;
}

.music-seek {
  --fill: 0%;
  flex: 1;
  min-width: 0;
  height: 22px;
  margin: 0;
  appearance: none;
  background: transparent;
}

.music-seek::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--strong) var(--fill), color-mix(in srgb, var(--strong) 22%, #fff) var(--fill));
}

.music-seek::-webkit-slider-thumb {
  appearance: none;
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border: 0;
  border-radius: 50%;
  background: var(--strong);
}

.music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 2px;
  position: relative;
}

.music-controls button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
}

.music-controls button svg {
  width: 16px;
  height: 16px;
}

.music-controls .music-play {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--strong));
  color: #fff8f6;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--strong) 28%, transparent);
}

.music-repeat[aria-pressed="true"] {
  color: var(--strong);
}

.music-pause-icon {
  display: none;
}

.music-widget.is-playing .music-record,
.music-widget.is-playing .music-bars i {
  animation-play-state: running;
}

.music-widget.is-playing .music-arm {
  transform: rotate(31deg);
}

.music-widget.is-playing .music-play-icon {
  display: none;
}

.music-widget.is-playing .music-pause-icon {
  display: block;
}

.music-status {
  margin: 8px 8px 0;
  text-align: center;
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}

@keyframes music-spin {
  to { transform: rotate(360deg); }
}

@keyframes music-bars {
  to { transform: scaleY(0.35); }
}

.shop-sheet {
  z-index: 48;
}

.shop-card {
  position: relative;
  width: min(100%, 332px);
  height: min(78%, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 42%, #fff) 0%, #fff8f6 38%, #fff 100%);
  box-shadow: 0 18px 44px rgba(90, 30, 50, 0.22);
  color: var(--ink);
}

.shop-head {
  flex: none;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  padding: 8px 8px 4px;
}

.shop-head h3 {
  margin: 0;
  text-align: center;
  font-size: calc(16px * var(--font-scale));
  color: var(--strong);
}

.shop-tabs {
  flex: none;
  display: flex;
  justify-content: space-around;
  padding: 0 6px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}

.shop-tabs button {
  position: relative;
  border: 0;
  background: transparent;
  padding: 8px 4px;
  font-size: calc(13px * var(--font-scale));
  color: var(--ink-soft);
}

.shop-tabs button.on {
  color: var(--strong);
  font-weight: 700;
}

.shop-tabs button.on:after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--strong);
}

.shop-badge {
  margin-left: 4px;
  min-width: 14px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: calc(10px * var(--font-scale));
  color: #fff;
  background: var(--strong);
}

.shop-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px 12px 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.shop-mode {
  margin: 4px 12px 0;
  padding: 3px;
  gap: 3px;
  border: 0;
  border-radius: 12px;
  background: #ffffff75;
}

.shop-mode button {
  flex: 1;
  border-radius: 9px;
}

.shop-mode button.on {
  background: #fff;
  color: var(--ink);
}

.shop-mode button.on::after { content: none; }

.shop-nav {
  padding: 3px 8px 6px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 35%, #fff);
  border-bottom: 0;
  background: #fffbfa;
}

.shop-item .shop-thumb {
  position: relative;
  height: auto;
  aspect-ratio: 1.25;
  overflow: hidden;
}

.shop-item .shop-thumb img {
  position: absolute;
  inset: 0;
}

.shop-item .shop-name { font-weight: 600; }
.shop-item .shop-price { color: #a03f57; }

.takeout-banner {
  padding: 14px;
  margin: 0 0 10px;
  border-radius: 15px;
  background: linear-gradient(125deg, #f8dbe1, #ffece0);
  color: #653743;
}

.takeout-banner h4 {
  margin: 4px 0 6px;
  font-size: calc(19px * var(--font-scale));
}

.takeout-banner span { font-size: calc(12px * var(--font-scale)); }
.takeout-banner .ghost-btn { display: block; margin-top: 6px; }

.takeout-row, .takeout-order {
  width: 100%;
  border: 1px solid #f1dfe0;
  border-radius: 13px;
  background: #fffaf8;
  color: var(--ink);
  padding: 8px;
  margin: 6px 0;
  text-align: left;
}

.takeout-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.takeout-store .shop-thumb { width: 62px; height: 62px; }
.takeout-row .shop-thumb img { min-height: 0; }

.takeout-meta {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
  font-size: calc(13px * var(--font-scale));
}

.takeout-meta span {
  font-size: calc(11px * var(--font-scale));
  color: var(--ink-soft);
}

.takeout-form label {
  display: grid;
  gap: 4px;
  margin-top: 9px;
  font-size: calc(12px * var(--font-scale));
}

.takeout-form input, .takeout-form select {
  min-width: 0;
  padding: 5px;
  border: 1px solid #edcfd6;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.takeout-stepper {
  display: flex;
  align-items: center;
  gap: 3px;
}
.takeout-stepper button {
  width: 28px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #f7e1e5;
  color: #83394c;
  font-size: 17px;
}
.takeout-stepper input[type="number"] {
  width: 2.2em;
  text-align: center;
  appearance: textfield;
}
.takeout-stepper input::-webkit-inner-spin-button { appearance: none; }
.takeout-form > button { width: 100%; }
.takeout-total, .takeout-order p { font-size: calc(12px * var(--font-scale)); }
.takeout-order header, .takeout-order footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}
.takeout-status { color: #963b52; font-size: calc(12px * var(--font-scale)); }

.shop-view {
  display: none;
}

.shop-view.on {
  display: block;
}

.shop-search {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.shop-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: color-mix(in srgb, #fff 70%, var(--accent));
}

.shop-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.shop-cats button {
  border: 0;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: calc(11px * var(--font-scale));
  color: var(--ink-soft);
  background: color-mix(in srgb, #fff 55%, var(--accent));
}

.shop-cats button.on {
  color: #fff8f6;
  background: var(--strong);
}

.shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.shop-item {
  border: 0;
  padding: 0 0 8px;
  text-align: left;
  border-radius: 14px;
  background: color-mix(in srgb, #fff 80%, var(--accent));
  overflow: hidden;
}

.shop-thumb {
  height: 92px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 55%, #fff), color-mix(in srgb, var(--strong) 35%, #fff));
  color: var(--strong);
  font-size: calc(28px * var(--font-scale));
  font-family: var(--font-display);
}

.shop-thumb img,
.shop-detail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop-thumb.sm {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 10px;
  overflow: hidden;
  font-size: calc(18px * var(--font-scale));
}

.shop-name,
.shop-cart-meta p {
  margin: 8px 8px 0;
  font-size: calc(12px * var(--font-scale));
  color: var(--ink);
}

.shop-price {
  margin: 4px 8px 0;
  font-size: calc(13px * var(--font-scale));
  color: var(--strong);
  font-weight: 700;
}

.shop-empty,
.shop-time,
.shop-status {
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}

.shop-cart-row,
.shop-order {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.shop-cart-meta {
  flex: 1;
  min-width: 0;
}

.shop-qty {
  display: flex;
  align-items: center;
  gap: 4px;
}

.shop-qty button,
.shop-del {
  border: 0;
  background: transparent;
  color: var(--strong);
  width: 22px;
  height: 22px;
}

.shop-checkout {
  position: sticky;
  bottom: 0;
  margin-top: 8px;
  padding: 10px 0 2px;
  background: linear-gradient(#fff0, #fff8f6 30%);
}

.shop-checkout-acts {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.shop-checkout-acts button {
  flex: 1;
  min-width: 0;
  font-size: calc(12px * var(--font-scale));
}

.shop-wallet-lab {
  margin: 20px 0 0;
  text-align: center;
  color: var(--ink-soft);
}

#shop-wallet {
  margin: 4px 0 16px;
  text-align: center;
  font-size: calc(32px * var(--font-scale));
  color: var(--strong);
}

.shop-topup {
  display: flex;
  gap: 8px;
}

.shop-overlay {
  position: absolute;
  inset: 48px 0 0;
  z-index: 2;
  padding: 14px;
  overflow: auto;
  background: color-mix(in srgb, #fff 92%, var(--accent));
}

.shop-overlay[hidden] {
  display: none;
}

.shop-overlay h3 {
  margin: 0 0 8px;
}

.shop-overlay label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}

.shop-edit-pic {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.shop-edit-preview {
  width: 92px;
  height: 92px;
  flex: none;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 55%, #fff), #fff);
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
}

.shop-edit-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop-detail-img,
.shop-detail-img.ph {
  height: 170px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 55%, #fff), #fff);
  font-size: calc(48px * var(--font-scale));
  color: var(--strong);
}

.shop-overlay-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 10px;
  border: 0;
  border-radius: 999px;
  padding: 5px 12px;
  background: color-mix(in srgb, #fff 62%, var(--accent));
  color: var(--strong);
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.shop-detail-acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 8px;
  margin-top: 14px;
}

.shop-detail-acts button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  white-space: nowrap;
  border-radius: 16px;
  padding: 0 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.shop-detail-acts .shop-detail-cart,
.shop-detail-acts .shop-del {
  grid-column: 1 / -1;
}

.shop-pay-line {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
}

.shop-pay-line b {
  color: var(--strong);
}

.wallet-stack {
  position: relative;
  height: 198px;
  margin: 10px 16px 12px;
  perspective: 900px;
  perspective-origin: 50% 0;
  flex-shrink: 0;
}

.wallet-stack.is-open {
  height: 430px;
}

.wallet-card {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 132px;
  margin: 0;
  padding: 16px 18px 14px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 22px;
  color: var(--ink);
  text-align: left;
  transform-style: preserve-3d;
  transform-origin: center top;
  transition: transform 0.48s cubic-bezier(0.22, 0.8, 0.24, 1);
  cursor: pointer;
  overflow: visible;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 0 -6px rgba(80, 40, 50, 0.16),
    0 18px 28px rgba(60, 30, 40, 0.14);
}

.wallet-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.55), transparent 46%, rgba(255, 255, 255, 0.12));
  pointer-events: none;
}

.wallet-card[data-slot="spend"] {
  z-index: 3;
  background: linear-gradient(165deg, rgba(255, 248, 246, 0.78), rgba(243, 196, 196, 0.46));
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  transform: rotateX(16deg) translateY(46px) translateZ(28px);
}

.wallet-card[data-slot="save"] {
  z-index: 2;
  background: linear-gradient(165deg, rgba(246, 250, 252, 0.72), rgba(186, 210, 224, 0.42));
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  transform: rotateX(16deg) translateY(22px) translateZ(0);
}

.wallet-card[data-slot="sand"] {
  z-index: 1;
  background: linear-gradient(165deg, rgba(255, 248, 236, 0.74), rgba(224, 186, 132, 0.42));
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  transform: rotateX(16deg) translateY(0) translateZ(-28px);
}

.wallet-stack.is-open .wallet-card[data-slot="spend"] {
  transform: rotateX(11deg) translateY(0) translateZ(12px);
}

.wallet-stack.is-open .wallet-card[data-slot="save"] {
  transform: rotateX(11deg) translateY(142px) translateZ(0);
}

.wallet-stack.is-open .wallet-card[data-slot="sand"] {
  transform: rotateX(11deg) translateY(284px) translateZ(-8px);
}

.wallet-thick {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 1px;
  height: 14px;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, rgba(120, 72, 78, 0.28), rgba(62, 32, 40, 0.55));
  transform: rotateX(-72deg);
  transform-origin: top center;
  pointer-events: none;
}

.wallet-card span,
.wallet-card strong,
.wallet-card em {
  position: relative;
  z-index: 1;
  display: block;
}

.wallet-card span {
  font-family: var(--font-ui);
  font-size: calc(13px * var(--font-scale));
  font-weight: 750;
  letter-spacing: 0.04em;
}

.wallet-card strong {
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: calc(32px * var(--font-scale));
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.wallet-card em {
  margin-top: 8px;
  color: var(--ink-soft);
  font-style: normal;
  font-size: calc(12px * var(--font-scale));
}

.alipay-tabs {
  display: flex;
  gap: 8px;
  margin: 8px 16px 10px;
}

.alipay-tabs button {
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  background: color-mix(in srgb, #fff 55%, var(--accent));
  color: var(--ink-soft);
  font-weight: 700;
  cursor: pointer;
}

.alipay-tabs button.on {
  background: var(--strong);
  color: #fff8f6;
}

.screen[data-screen="alipay"] > .nav-header,
.screen[data-screen="alipay"] > .wallet-stack,
.screen[data-screen="alipay"] > .alipay-tabs {
  flex-shrink: 0;
}

.alipay-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 24px;
}

.alipay-bill,
.alipay-friend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 12px;
  border-radius: 16px;
  background: color-mix(in srgb, #fff 78%, var(--accent));
}

.alipay-bill div,
.alipay-friend div {
  flex: 1;
  min-width: 0;
}

.alipay-bill b,
.alipay-friend b {
  display: block;
  font-size: calc(14px * var(--font-scale));
}

.alipay-bill span,
.alipay-friend span {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
}

.alipay-bill em {
  font-style: normal;
  font-weight: 700;
}

.alipay-bill em.out {
  color: var(--strong);
}

.alipay-bill em.in {
  color: #2f7d4a;
}

.bill-line {
  list-style: none;
  margin: 0;
  padding: 6px 0 12px;
}

.bill-row {
  display: grid;
  grid-template-columns: 52px 36px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  min-height: 68px;
}

.bill-when {
  text-align: right;
}

.bill-when b,
.bill-when span {
  display: block;
}

.bill-when b {
  font-family: var(--font-ui);
  font-size: calc(13px * var(--font-scale));
  font-weight: 750;
  letter-spacing: -0.02em;
}

.bill-when span {
  margin-top: 2px;
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: calc(11px * var(--font-scale));
}

.bill-rail {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
}

.bill-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  transform: translateX(-50%);
}

.bill-row:first-child .bill-rail::before {
  top: 50%;
}

.bill-row:last-child .bill-rail::before {
  bottom: 50%;
}

.bill-ico {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fffaf8;
  color: var(--ink-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg, #fff6f4) 86%, #fff);
}

.bill-ico svg {
  width: 15px;
  height: 15px;
  display: block;
}

.bill-ico[data-kind="packet-out"],
.bill-tag[data-kind="packet-out"] { color: #c4474e; }
.bill-ico[data-kind="packet-in"],
.bill-tag[data-kind="packet-in"] { color: #b84d62; }
.bill-ico[data-kind="shop"],
.bill-tag[data-kind="shop"] { color: #c56a28; }
.bill-ico[data-kind="waimai"],
.bill-tag[data-kind="waimai"] { color: #a8841c; }
.bill-ico[data-kind="transfer-out"],
.bill-ico[data-kind="transfer-in"],
.bill-tag[data-kind="transfer-out"],
.bill-tag[data-kind="transfer-in"] { color: #3f67b8; }
.bill-ico[data-kind="job"],
.bill-tag[data-kind="job"] { color: #2f7d4a; }
.bill-ico[data-kind="live"],
.bill-tag[data-kind="live"] { color: #b44e86; }
.bill-ico[data-kind="xhs"],
.bill-tag[data-kind="xhs"] { color: #d4536a; }
.bill-ico[data-kind="sand"],
.bill-tag[data-kind="sand"] { color: #a4843a; }

.bill-main {
  min-width: 0;
}

.bill-tag {
  display: inline-block;
  margin-bottom: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, #fff);
  font-style: normal;
  font-family: var(--font-ui);
  font-size: calc(11px * var(--font-scale));
  font-weight: 750;
  line-height: 1.6;
}

.bill-main b {
  display: block;
  overflow: hidden;
  font-size: calc(13px * var(--font-scale));
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bill-row > em {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: calc(15px * var(--font-scale));
  font-weight: 750;
  white-space: nowrap;
}

.bill-row > em.out {
  color: var(--strong);
}

.bill-row > em.in {
  color: #2f7d4a;
}

.slip-board {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background-color: #efe4d2;
  background-image:
    linear-gradient(rgba(92, 70, 48, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 70, 48, 0.22) 1px, transparent 1px);
  background-size: 18px 18px;
}

.slip-board[hidden] {
  display: none !important;
}

.slip-track {
  width: 100%;
  min-width: 0;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: none;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.slip-track.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.slip-row {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
  padding: 8px 11% 16px;
  box-sizing: border-box;
}

.slip-track::-webkit-scrollbar {
  display: none;
}

.slip {
  position: relative;
  flex: 0 0 78%;
  scroll-snap-align: center;
  transform: rotate(var(--tilt, 0deg));
  filter: drop-shadow(0 10px 12px rgba(70, 48, 28, 0.18));
}

.slip-paper {
  position: relative;
  padding: 14px 14px 8px;
  color: #3a3128;
  font-family: "Courier New", "American Typewriter", "SimSun", monospace;
  background: linear-gradient(#f7f1e6, #f3e7d4);
  -webkit-mask-image:
    linear-gradient(#000, #000),
    radial-gradient(circle at 12px 0, transparent 10px, #000 10.5px),
    radial-gradient(circle at 12px 12px, transparent 10px, #000 10.5px);
  -webkit-mask-repeat: no-repeat, repeat-x, repeat-x;
  -webkit-mask-size: 100% calc(100% - 24px), 24px 12px, 24px 12px;
  -webkit-mask-position: center, left top, left bottom;
  mask-image:
    linear-gradient(#000, #000),
    radial-gradient(circle at 12px 0, transparent 10px, #000 10.5px),
    radial-gradient(circle at 12px 12px, transparent 10px, #000 10.5px);
  mask-repeat: no-repeat, repeat-x, repeat-x;
  mask-size: 100% calc(100% - 24px), 24px 12px, 24px 12px;
  mask-position: center, left top, left bottom;
}

.slip-mark {
  position: absolute;
  top: 16px;
  right: 4px;
  z-index: 1;
  width: 32%;
  height: auto;
  margin: 0;
  pointer-events: none;
  transform: rotate(12deg);
  transform-origin: 70% 30%;
  opacity: 0.72;
}

.slip-paper p {
  position: relative;
  z-index: 2;
  margin: 0;
  text-align: center;
}

.slip-shop {
  font-size: 15px;
  letter-spacing: 0.18em;
}

.slip-rule {
  margin-top: 3px !important;
  color: rgba(58, 49, 40, 0.55);
  letter-spacing: 0.18em;
  font-size: 11px;
}

.slip-kind {
  margin-top: 6px !important;
  font-size: 13px;
  letter-spacing: 0.12em;
}

.slip-title {
  margin-top: 3px !important;
  font-size: 14px;
  line-height: 1.35;
}

.slip-time {
  margin-top: 4px !important;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.slip-amt {
  margin-top: 2px !important;
  font-size: 22px;
  letter-spacing: 0.04em;
}

.slip-no {
  margin-top: 4px !important;
  font-size: 11px;
  letter-spacing: 0.14em;
}

.slip-code {
  position: relative;
  z-index: 2;
  display: block;
  width: 78%;
  height: 26px;
  margin: 6px auto 2px;
}

.slip-tape {
  position: absolute;
  z-index: 3;
  top: 2px;
  left: 50%;
  width: 86px;
  height: 24px;
  transform: translateX(-50%) rotate(-4deg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) 40%, rgba(210, 190, 140, 0.16)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 2px, transparent 2px 7px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 2px rgba(70, 50, 30, 0.16);
  pointer-events: none;
}

.slip-empty {
  margin: auto;
  color: rgba(70, 50, 30, 0.7);
  font-family: "Courier New", "SimSun", monospace;
  letter-spacing: 0.08em;
}

.alipay-friend strong {
  font-size: calc(14px * var(--font-scale));
}

.alipay-face {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 45%, #fff);
  color: var(--strong);
  font-weight: 700;
}

.alipay-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

button.alipay-friend {
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.alipay-friend .alipay-face {
  flex: 0 0 36px;
}

#alipay-friends.vip-deck {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px 16px 18px;
  touch-action: none;
  perspective: 1100px;
}

#alipay-friends.vip-deck[hidden] {
  display: none !important;
}

.vip-stage {
  position: relative;
  width: min(100%, 340px);
  height: 100%;
  min-height: 240px;
}

.vip-card {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 168px;
  margin-top: -84px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 18px 14px;
  border: 1px solid rgba(255, 226, 176, 0.72);
  border-radius: 22px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  color: #6d4d28;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.62), rgba(255, 244, 224, 0.28) 48%, rgba(92, 64, 36, 0.1));
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -20px 28px rgba(120, 82, 32, 0.06),
    0 18px 32px rgba(70, 36, 24, 0.14);
  transform: translateY(calc(var(--slot) * 148px)) scale(0.72) rotateX(calc(var(--slot) * -16deg));
  transform-origin: center center;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.42s ease;
}

.vip-card.is-near {
  transform: translateY(calc(var(--slot) * 58px)) scale(0.8) rotateX(calc(var(--slot) * -8deg));
  opacity: 0.5;
  pointer-events: auto;
}

.vip-card.is-current {
  transform: translateY(0) scale(1) rotateX(0deg);
  opacity: 1;
  pointer-events: auto;
}

.vip-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, transparent 28%, rgba(255, 255, 255, 0.46) 46%, transparent 64%);
  pointer-events: none;
}

.vip-kicker,
.vip-who,
.vip-card strong {
  position: relative;
  z-index: 1;
}

.vip-kicker {
  margin: 0;
  font-family: "Cormorant Garamond", "Songti SC", serif;
  font-size: 13px;
  letter-spacing: 0.32em;
  color: #b8893d;
}

.vip-who {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.vip-who div {
  min-width: 0;
}

.vip-card .alipay-face {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(214, 170, 78, 0.7);
}

.vip-gold {
  background-image: linear-gradient(180deg, #f6e2a8 0%, #d7a441 24%, #8a5a16 46%, #f0d48a 64%, #6e4714 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vip-who b {
  display: block;
  font-family: "Cormorant Garamond", "Songti SC", "STSong", serif;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1.15;
}

.vip-who span {
  display: block;
  margin-top: 4px;
  color: rgba(112, 80, 40, 0.78);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vip-card strong {
  font-family: var(--font-ui);
  font-size: 26px;
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 1;
}

.alipay-detail {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: var(--bg);
  padding-top: calc(var(--sat, 0px) + 8px);
}

.alipay-detail[hidden] {
  display: none !important;
}

.alipay-detail-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 4px;
  font-weight: 700;
}

#alipay-detail-back {
  margin: 0;
}

.alipay-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 16px 12px;
  padding: 14px;
  border-radius: 18px;
  background: color-mix(in srgb, #fff 78%, var(--accent));
}

.alipay-detail-head h3 {
  margin: 0;
  font-size: calc(18px * var(--font-scale));
}

.alipay-detail-head p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
}

.alipay-detail-head strong {
  margin-left: auto;
  font-size: calc(16px * var(--font-scale));
  white-space: nowrap;
}

.alipay-face.lg {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 18px;
  font-size: calc(22px * var(--font-scale));
}

.shop-detail-acts .ghost-btn {
  background: color-mix(in srgb, #fff 48%, var(--accent));
}

.shop-detail-acts .shop-del {
  width: auto;
  justify-self: start;
  min-height: 36px;
  padding: 0 16px;
  color: #a33b4a;
  background: color-mix(in srgb, #a33b4a 12%, #fff);
}

.shop-pick-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 14px;
}

.shop-pick-list button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, #fff 70%, var(--accent));
}

.shop-card-msg {
  width: 196px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff8f6;
  color: #4a2a32;
}

.shop-card-msg img {
  width: 100%;
  height: 92px;
  object-fit: cover;
  background: color-mix(in srgb, var(--accent) 40%, #fff);
}

.shop-card-msg .ph {
  height: 72px;
  display: grid;
  place-items: center;
  font-size: calc(28px * var(--font-scale));
  color: var(--strong);
}

.shop-card-msg .body {
  padding: 8px 10px 10px;
}

.shop-card-msg h4 {
  margin: 0;
  font-size: calc(13px * var(--font-scale));
}

.shop-card-msg .amt {
  margin: 4px 0 0;
  color: var(--strong);
  font-weight: 700;
}

.shop-card-msg .acts {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.shop-card-msg .acts button {
  flex: 1;
  border: 0;
  border-radius: 8px;
  padding: 6px 0;
  font-size: calc(12px * var(--font-scale));
}

.shop-card-msg .acts .yes {
  background: var(--strong);
  color: #fff8f6;
}

.shop-card-msg .foot {
  margin: 6px 0 0;
  font-size: calc(11px * var(--font-scale));
  color: #8a5a66;
}

.hero-card,
.widget,
.app-card {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 10px 30px rgba(90, 50, 55, 0.08);
}

.profile-widget {
  position: relative;
  margin-bottom: 4px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(90, 50, 55, 0.1);
}

.profile-banner {
  display: block;
  width: 100%;
  height: 168px;
  padding: 0;
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  background:
    radial-gradient(120px 80px at 20% 30%, color-mix(in srgb, var(--accent) 55%, white), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--strong) 70%, #f6d5d8), color-mix(in srgb, var(--accent) 55%, #fff));
}

.profile-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-banner-dot {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 1px rgba(40, 12, 20, 0.16);
  cursor: pointer;
}

.profile-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px 14px 14px;
  background: transparent;
  pointer-events: none;
}

.profile-avatar-btn {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  flex: none;
  width: 58px;
  height: 58px;
  padding: 2px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 6px 16px rgba(40, 12, 20, 0.28);
  cursor: pointer;
  pointer-events: auto;
}

.profile-avatar-btn img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.profile-info {
  margin: 0;
  padding: 0;
  min-width: 0;
  flex: 1;
  text-align: left;
  background: none;
  border: 0;
  box-shadow: none;
  pointer-events: auto;
}

.profile-name,
.profile-handle,
.profile-bio,
.profile-loc {
  cursor: pointer;
}

.profile-name {
  margin: 0 0 1px;
  font-family: var(--font-display);
  font-size: calc(20px * var(--font-scale));
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 8px rgba(20, 8, 12, 0.45);
}

.profile-handle {
  margin: 0 0 4px;
  font-size: calc(12px * var(--font-scale));
  color: rgba(255, 248, 246, 0.82);
}

.profile-bio {
  margin: 0 0 6px;
  font-size: calc(12px * var(--font-scale));
  line-height: 1.35;
  color: rgba(255, 248, 246, 0.94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-loc {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: calc(11px * var(--font-scale));
  color: #fff8f6;
  background: rgba(255, 255, 255, 0.18);
  padding: 3px 8px;
  border-radius: 999px;
}

.hero-card {
  padding: 18px 18px 16px;
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 14px;
  align-items: center;
}

.hero-card img.logo,
.lock-brand img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  border-radius: 24px;
  background: color-mix(in srgb, var(--strong) 42%, #4a2b30);
  padding: 8px;
}

.lock-brand img {
  width: 86px;
  height: 86px;
  background: transparent;
  box-shadow: none;
}

.eyebrow {
  margin: 0;
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hero-card h1 {
  margin: 4px 0 2px;
  font-family: var(--font-display);
  font-size: calc(28px * var(--font-scale));
  font-weight: 600;
}

.hero-card .author {
  margin: 0;
  font-size: calc(13px * var(--font-scale));
  color: var(--ink-soft);
}

.clock-widget {
  margin-top: 14px;
  padding: 12px 14px 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
}

.home-time {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 88px;
  padding-top: 2px;
}

.clock-widget b {
  font-family: "Cormorant Garamond", serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  color: var(--look-time, var(--ink));
}

.home-time .eyebrow {
  margin-top: 6px;
  letter-spacing: 0.04em;
  text-transform: none;
  max-width: 92px;
  line-height: 1.35;
  color: var(--look-date, var(--ink-soft));
}

.home-cal {
  flex: 1;
  min-width: 0;
}

.cal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
  font-size: calc(11px * var(--font-scale));
  color: var(--look-date, var(--ink-soft));
}

.cal-head strong {
  font-size: calc(12px * var(--font-scale));
  font-weight: 600;
  color: var(--ink);
}

.cal-week,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  align-content: start;
}

.cal-week span {
  text-align: center;
  font-size: calc(9px * var(--font-scale));
  color: var(--look-date, var(--ink-soft));
  line-height: 1.6;
  white-space: nowrap;
}

.cal-day {
  width: 22px;
  height: 22px;
  justify-self: center;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 70%, white);
  color: var(--look-date, var(--ink));
  font-size: calc(9px * var(--font-scale));
  line-height: 22px;
  text-align: center;
  padding: 0;
}

.cal-day.cal-pad {
  background: transparent;
  visibility: hidden;
}

.cal-day.today {
  background: color-mix(in srgb, var(--strong) 42%, white);
  color: #6a2a38;
  font-weight: 700;
}

.app-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 8px;
}

.home-widget-slot {
  grid-column: 3 / span 2;
  grid-row: 1 / span 2;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.bond-widget {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: 6px 4px 8px;
  border: 0;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  color: #fff8f4;
  background: transparent;
  box-shadow: none;
  font-family: "Ginza Otome", serif;
}

.bond-widget.is-clear {
  color: var(--ink);
  overflow: visible;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.bond-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.bond-widget:not(.is-clear)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(40, 18, 24, 0.08), rgba(40, 18, 24, 0.42));
  pointer-events: none;
}

.bond-fold {
  position: absolute;
  left: 8%;
  right: 6%;
  top: 46%;
  bottom: 8%;
  border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-right: 1px dashed color-mix(in srgb, currentColor 28%, transparent);
  border-bottom: 1px solid color-mix(in srgb, #ffd1dc 55%, currentColor);
  border-left: 1px dashed color-mix(in srgb, currentColor 28%, transparent);
  transform: skewX(-12deg);
  pointer-events: none;
  z-index: 0;
}

.bond-fold::after {
  content: "";
  position: absolute;
  inset: 6px -8px -6px 6px;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.bond-faces {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 44px;
  padding: 0 2px;
  gap: 2px;
}

.bond-faces img {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 0;
  box-shadow: none;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}

.bond-link {
  flex: 1;
  position: relative;
  height: 16px;
  min-width: 22px;
}

.bond-link::before {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 50%;
  border-top: 1.4px dashed currentColor;
  opacity: 0.5;
}

.bond-link i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-style: normal;
  font-size: 9px;
  line-height: 1;
  padding: 0 3px;
  background: color-mix(in srgb, var(--wallpaper, #f3d5d8) 88%, transparent);
  opacity: 0.95;
}

.bond-widget:not(.is-clear) .bond-link i {
  background: color-mix(in srgb, #4a2a32 55%, transparent);
}

.bond-title,
.bond-days,
.bond-note,
.bond-names {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  max-width: 100%;
}

html[lang="en"] .bond-days,
html[lang="ja"] .bond-days,
html[lang="ko"] .bond-days {
  font-size: calc(13px * var(--font-scale));
  letter-spacing: 0.02em;
  color: #e7a0b4;
}

.bond-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.16em;
  color: color-mix(in srgb, #ffd1dc 40%, currentColor);
  text-shadow: 0 0 6px color-mix(in srgb, #ffd1dc 35%, transparent);
}

.bond-title::before,
.bond-title::after {
  content: "˚⋆";
  font-size: 8px;
  letter-spacing: 0;
  margin: 0 3px;
  opacity: 0.7;
}

.bond-days,
.bond-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  overflow: visible;
  white-space: normal;
  line-height: 1;
  gap: 0 1px;
}

.bond-days {
  min-height: 24px;
  margin-top: 4px;
}

.bond-note {
  min-height: 22px;
  margin-top: 8px;
}

.bond-ch {
  display: inline-block;
  position: relative;
  margin: 0 1px;
  font-family: "Ginza Otome", serif;
  font-size: calc(13px * var(--font-scale));
  line-height: 1.1;
}

.bond-ch.space {
  width: 4px;
}

.bond-ch.up-1 {
  transform: translateY(-3px);
}

.bond-ch.down-1 {
  transform: translateY(3px);
}

.bond-ch.highlight {
  font-size: calc(18px * var(--font-scale));
  color: #e8a8b4;
  font-weight: 600;
}

.bond-widget.is-clear .bond-ch.highlight {
  color: #c98a96;
}

.bond-ch.art-frame {
  padding: 2px 3px;
}

.bond-ch.art-frame::before,
.bond-ch.art-frame::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
}

.bond-ch.art-frame::before {
  top: 0;
  left: 0;
  border-top: 1px solid #ffd1dc;
  border-left: 1px solid #ffd1dc;
}

.bond-ch.art-frame::after {
  right: 0;
  bottom: 0;
  border-right: 1px solid #ffd1dc;
  border-bottom: 1px solid #ffd1dc;
}

.bond-ch.hollow {
  color: transparent;
  -webkit-text-stroke: 0.85px currentColor;
  text-shadow: none;
  opacity: 0.92;
}

.bond-widget.is-clear .bond-ch.hollow {
  -webkit-text-stroke: 0.7px var(--ink);
}

.bond-widget:not(.is-clear) .bond-ch.hollow {
  -webkit-text-stroke: 0.7px #fff8f4;
}

.bond-ch.blur {
  filter: blur(0.45px);
  opacity: 0.78;
}

.bond-ch.gradient {
  background: linear-gradient(to bottom, currentColor, #ffb7c5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bond-names {
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.08em;
  opacity: 0.78;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bond-classic {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: relative;
}

.bond-skin {
  display: none;
  flex: 1;
  width: 100%;
  min-height: 0;
  height: 100%;
}

.bond-widget.is-skin {
  padding: 0;
  gap: 0;
  overflow: hidden;
  color: #5c4046;
  font-family: var(--font-ui);
  border-radius: 26px;
}

.bond-widget.is-skin.is-clear {
  overflow: hidden;
}

.bond-widget.is-skin .bond-classic {
  display: none;
}

.bond-widget.is-skin .bond-skin {
  display: flex;
}

.bw {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.bw img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bw-faces {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(180deg, #f8d7de, #f4e7ea);
}

.bw-faces img {
  width: 38%;
  height: 62%;
  border-radius: 18%;
  border: 2px solid #fff;
  box-shadow: 0 6px 14px rgba(90, 36, 48, 0.16);
}

.bw-faces.is-round img {
  border-radius: 50%;
  height: 54%;
}

.bw-listen .bw-faces,
.bw-listen > img {
  position: absolute;
  inset: 0;
}

.bw-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: 0;
  padding: 18px 6px 7px;
  background: linear-gradient(transparent, rgba(255, 248, 246, 0.94));
  text-align: center;
  color: #6d4248;
}

.bw-cap b,
.bw-cap span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bw-cap b {
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
}

.bw-cap span {
  margin-top: 1px;
  font-size: calc(9px * var(--font-scale));
  color: #8d6a6e;
}

.bw-folder {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.bw-tab {
  width: 46%;
  height: 13%;
  margin-left: 10%;
  border-radius: 10px 12px 0 0;
  background: #d9d3d0;
}

.bw-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: -1px;
  padding: 7px 7px 6px;
  border-radius: 14px;
  background: #ece7e4;
}

.bw-window {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(70, 40, 48, 0.08);
}

.bw-window .bw-faces,
.bw-window > img {
  width: 100%;
  height: 100%;
}

.bw-days,
.bw-line {
  margin: 0;
  text-align: center;
  font-size: calc(10px * var(--font-scale));
  line-height: 1.2;
  color: #7c6568;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bw-folder.v-1 .bw-tab { background: #f7f4f2; }
.bw-folder.v-1 .bw-body {
  background-color: #fff;
  background-image: radial-gradient(#ddd4d2 1.1px, transparent 1.2px);
  background-size: 9px 9px;
}

.bw-folder.v-2 .bw-tab { background: #f8d5de; }
.bw-folder.v-2 .bw-body {
  background-color: #fff6f8;
  background-image: radial-gradient(#f0b7c4 1.15px, transparent 1.25px);
  background-size: 9px 9px;
  box-shadow: inset 0 0 0 1px rgba(235, 156, 169, 0.45);
}

.bw-folder.v-2 .bw-window {
  transform: rotate(-2.5deg);
  margin: 2px 2px 0;
}

.bw-mono .bw-tab { background: #dedede; }
.bw-mono .bw-body { background: rgba(255, 255, 255, 0.82); }
.bw-mono .bw-window img,
.bw-mono .bw-faces img { filter: grayscale(1) contrast(1.05); }
.bw-mono .bw-line { color: #3c3c3c; font-weight: 600; }

.bond-widget.is-skin[data-style="ins"] {
  background: rgba(255, 255, 255, 0.82);
  border-radius: 34px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

.bw-ins {
  position: relative;
  height: 100%;
  container-type: size;
  box-sizing: border-box;
  padding-top: 16px;
  font-family: var(--font-ui), "Nunito", sans-serif;
}

.bw-board {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 3.5cqh;
  padding: 5cqh 4.5cqw 3.5cqh;
  border: 2px dashed #d1d5db;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.bw-clip {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 50%;
  width: 52%;
  height: 34px;
  transform: translateX(-50%);
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.16));
}

.bw-clip-wire {
  position: absolute;
  top: 0;
  width: 22px;
  height: 20px;
  box-sizing: border-box;
  border: 2.5px solid #9aa3b4;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(214, 219, 228, 0.2));
  box-shadow: inset 1px 1px 0 #fff, 0 1px 0 rgba(90, 98, 112, 0.25);
}

.bw-clip-wire.is-left {
  left: 16%;
  transform: rotate(-18deg);
  transform-origin: 50% 100%;
}

.bw-clip-wire.is-right {
  right: 16%;
  transform: rotate(18deg);
  transform-origin: 50% 100%;
}

.bw-clip-jaw {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 13px;
  border-radius: 3px 3px 6px 6px;
  background: linear-gradient(180deg, #ffffff 0%, #e8edf4 16%, #8e98ab 46%, #f7f8fb 62%, #aeb6c4 100%);
  box-shadow:
    0 5px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 #fff;
}

.bw-clip-jaw::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  width: 7px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff 0 22%, #9aa3b3 70%, #e8ebf1 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.bw-top {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 0;
  padding-top: 2px;
}

.bw-board .bw-ava {
  width: 32cqh;
  height: 32cqh;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(40, 40, 55, 0.12);
  background: #efeef2;
}

.bw-who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.bw-who small {
  color: #9aa0aa;
  font-size: 5cqh;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
}

.bw-who b {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.6cqh 2.4cqw;
  border-radius: 999px;
  background: rgba(229, 231, 235, 0.55);
  color: #4b5563;
  font-family: var(--font-ui), "Nunito", sans-serif;
  font-size: 8cqh;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bw-hi {
  position: relative;
  z-index: 2;
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
  transform: rotate(6deg);
}

.bw-pin {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 28%, #d5dae3 62%, #8f97a6 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
}

.bw-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 2px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 1px;
  background: linear-gradient(#d7dbe4, #8d94a3);
}

.bw-hi span {
  color: #9aa0aa;
  font-family: var(--font-ui), "Nunito", sans-serif;
  font-size: 9cqh;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.bw-board .bw-hi img {
  width: 16cqh;
  height: 16cqh;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(40, 40, 55, 0.12);
  background: #f3e4ea;
}

.bw-slip {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 30cqh minmax(0, 1fr);
  align-items: center;
  gap: 3cqw;
  padding: 5cqh 7cqw 5cqh 4cqw;
  border-radius: 22px;
  background: #f0f2f5;
}

.bw-deco {
  width: 30cqh;
  height: 30cqh;
  border-radius: 14px;
  overflow: hidden;
  background: #f8d5e2;
  box-shadow: 0 4px 10px rgba(80, 90, 110, 0.08);
  cursor: pointer;
}

.bw-board .bw-deco svg,
.bw-board .bw-deco img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.bw-copy {
  min-width: 0;
  text-align: center;
}

.bw-copy p {
  margin: 0;
  color: #8b919c;
  font-family: var(--font-ui), "Nunito", sans-serif;
  font-size: 5.2cqh;
  line-height: 1.5;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bw-copy .is-title {
  color: #5c6370;
  font-size: 6.8cqh;
  font-weight: 700;
}

.bw-spark,
.bw-spark::before,
.bw-spark::after {
  position: absolute;
  background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95)) drop-shadow(0 1px 1px rgba(120, 132, 156, 0.35));
  pointer-events: none;
}

.bw-spark {
  right: 10px;
  bottom: 9px;
  width: 12px;
  height: 12px;
}

.bw-spark::before {
  content: "";
  right: 11px;
  bottom: 12px;
  width: 8px;
  height: 8px;
}

.bw-spark::after {
  content: "";
  right: 1px;
  bottom: 16px;
  width: 5px;
  height: 5px;
}

.bond-widget.is-skin[data-style="bubble"] {
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.bw-bubble {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 12px 2px 6px;
  background: transparent;
  --jelly: rgba(203, 213, 225, 0.6);
  --glow: rgba(148, 176, 210, 0.38);
  --ink: #4a5568;
  --bw-font: var(--font-ui);
}

.bw-bubble.v-1 {
  --jelly: rgba(255, 214, 226, 0.64);
  --glow: rgba(255, 170, 196, 0.34);
  --ink: #7a4b5a;
}

.bw-bubble.v-2 {
  --jelly: rgba(210, 242, 224, 0.64);
  --glow: rgba(140, 200, 170, 0.32);
  --ink: #3d5c4a;
}

.bw-bubble.v-3 {
  --jelly: rgba(226, 220, 245, 0.64);
  --glow: rgba(176, 166, 214, 0.32);
  --ink: #4c4568;
}

.bw-float {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-width: 0;
}

.bw-float.is-me { justify-content: flex-end; }
.bw-float.is-them { justify-content: flex-start; }

.bw-cloud {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 18px;
  background: var(--jelly);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 20px var(--glow);
}

.bw-float.is-me .bw-cloud { border-radius: 28px 42px 16px 42px; }
.bw-float.is-them .bw-cloud { border-radius: 42px 28px 42px 16px; }

.bw-cloud p {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  min-width: 0;
  color: var(--ink);
  font-family: var(--bw-font), "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

.bw-cloud p b {
  min-width: 0;
  font-weight: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bw-mark {
  flex: none;
  font-size: 10px;
  font-weight: 400;
  opacity: 0.62;
}

.bw-wing,
.bw-star {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}

.bw-wing {
  top: -13px;
  width: 34px;
  height: 26px;
  filter: drop-shadow(0 0 0.6px #fff) drop-shadow(0 0 0.6px #fff);
}

.bw-wing.is-left { left: -12px; }
.bw-wing.is-right { right: -12px; }

.bw-star { opacity: 0.92; }
.bw-star.is-a { width: 7px; height: 7px; top: -2px; left: 46px; }
.bw-star.is-b { width: 6px; height: 6px; bottom: 1px; left: 40px; }
.bw-star.is-c { width: 9px; height: 9px; top: -4px; right: 46px; }

.bw-bubble .bw-sticker {
  width: 42px;
  height: 42px;
  flex: none;
  box-sizing: border-box;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 3px 8px rgba(70, 90, 120, 0.18);
  background: transparent;
}

.bw-classic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff8f4;
  text-shadow: 0 1px 6px rgba(70, 30, 40, 0.35);
}

.bw-classic p {
  margin: 0;
  font-size: calc(11px * var(--font-scale));
}

.bond-pick {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.bond-pick button,
.bond-vars button {
  flex: none;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #f6f0f1;
  color: #6d4248;
  padding: 5px 4px 4px;
  cursor: pointer;
}

.bond-pick button {
  width: 58px;
}

.bond-pick button.on,
.bond-vars button.on {
  border-color: #e07d90;
  background: #fff;
  box-shadow: 0 0 0 1px #e07d90;
}

.bond-pick i {
  display: block;
  height: 32px;
  border-radius: 8px;
  background: #f8d7de center / cover no-repeat;
}

.bond-pick span,
.bond-vars button {
  font-size: calc(10px * var(--font-scale));
  font-weight: 600;
}

.bp-listen { background: linear-gradient(#f7c9d3, #fff), linear-gradient(#fff, #fff); }
.bp-folder { background: linear-gradient(#f8d5de 0 8px, #fff6f8 8px); }
.bp-ins { background: #fff; box-shadow: inset 0 0 0 1px #f0d5da; }
.bp-mono { background: linear-gradient(#dedede 0 8px, #f4f4f4 8px); }
.bp-bubble { background: linear-gradient(#d7ebf8, #eef7fb); }
.bp-classic { background: linear-gradient(160deg, #e7b7c2, #f6d5dc); }

.bond-vars {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

.bond-vars[hidden] {
  display: none;
}

.bond-vars button {
  min-width: 40px;
  padding: 6px 8px;
}

.bond-fonts {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.bond-fonts[hidden] { display: none; }

.bond-fonts button {
  flex: none;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #f6f0f1;
  color: #6d4248;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}

.bond-fonts button.on {
  border-color: #e07d90;
  background: #fff;
}

.bond-preview {
  flex-shrink: 0;
  height: 148px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.45), transparent 42%),
    linear-gradient(160deg, #f6d5dc, #e7b7c2);
}

.bond-preview:has(.bw-ins) {
  height: 228px;
  background: #eef1f6;
}

.bond-preview:has(.bw-bubble) {
  height: 200px;
  background: #f3f6fb;
}

.bond-deco-row {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.bond-deco-row[hidden] {
  display: none;
}

.bond-deco-row .ghost-btn {
  flex: 1;
}

.app-icon {
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  gap: 7px;
  cursor: pointer;
}

.app-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
}

.app-icon img.custom {
  object-fit: cover;
  border-radius: 16px;
}

.glass-ico {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  color: var(--look-glyph, color-mix(in srgb, var(--strong) 58%, var(--ink)));
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, white 34%, transparent) 0%,
      color-mix(in srgb, var(--strong) 14%, transparent) 100%
    );
  border: 1px solid color-mix(in srgb, white 46%, var(--strong));
  box-shadow:
    0 8px 16px color-mix(in srgb, var(--strong) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 55%, transparent);
  backdrop-filter: blur(22px) saturate(1.65);
  -webkit-backdrop-filter: blur(22px) saturate(1.65);
}

.glass-ico[hidden] {
  display: none !important;
}

.glass-ico::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 1px;
  height: 28%;
  border-radius: 40%;
  background: linear-gradient(180deg, color-mix(in srgb, white 42%, transparent), transparent);
  pointer-events: none;
}

.glass-ico svg {
  width: 22px;
  height: 22px;
  position: relative;
  z-index: 1;
  display: block;
}

.glass-ico:has(.glass-art) {
  background:
    radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--ink) 22%, transparent) 0%, transparent 70%),
    linear-gradient(
      165deg,
      color-mix(in srgb, white 22%, transparent),
      color-mix(in srgb, var(--strong) 36%, transparent)
    );
}

.glass-ico:has(.glass-art)::after {
  opacity: 0.28;
}

.glass-ico .glass-art {
  width: 92%;
  height: 92%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  display: block;
  pointer-events: none;
  filter:
    drop-shadow(0 0 0.6px color-mix(in srgb, var(--ink) 78%, transparent))
    drop-shadow(0 1px 1.4px color-mix(in srgb, var(--ink) 42%, transparent));
}

.glass-ico .ginza-art {
  width: 70%;
  height: 70%;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: contrast(1.06) saturate(1.1);
}

.glass-ico .accent {
  fill: var(--strong);
  stroke: none;
}

.home-dock .app-icon .glass-ico,
.home-dock .app-icon img {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}

.home-dock .app-icon .glass-ico svg {
  width: 18px;
  height: 18px;
}

.home-dock .app-icon .glass-art {
  width: 92%;
  height: 92%;
  border-radius: 0;
  filter:
    drop-shadow(0 0 0.6px color-mix(in srgb, var(--ink) 78%, transparent))
    drop-shadow(0 1px 1.4px color-mix(in srgb, var(--ink) 42%, transparent));
}

.plus-item .glass-ico {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.plus-item .glass-ico svg {
  width: 20px;
  height: 20px;
  overflow: visible;
}

.look-app .glass-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.look-app .glass-ico svg {
  width: 20px;
  height: 20px;
}

.look-paper {
  height: 88px;
  border-radius: 16px;
  border: 1px dashed var(--line);
  background: color-mix(in srgb, var(--surface) 80%, white);
  background-size: cover;
  background-position: center;
}

.look-paper.on {
  border-style: solid;
}

.look-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}

.seg-bar {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 0;
  padding: 4px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.seg-bar > .ghost-btn,
.seg-bar > button,
.seg-bar > a,
.seg-bar > label {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px 6px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.seg-bar > .ghost-btn:active,
.seg-bar > button:active,
.seg-bar > a:active,
.seg-bar > label:active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(70, 24, 36, 0.08);
}

.app-look-list {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
}

.look-app {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.look-app img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--surface);
}

.look-app label {
  margin: 0;
}

.look-app-acts {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.app-icon > span:not(.glass-ico) {
  font-size: calc(10px * var(--font-scale));
  max-width: 100%;
  line-height: 1.25;
  text-align: center;
  color: var(--look-app, var(--ink));
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.72);
}

.theme-row {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.theme-chip {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: calc(12px * var(--font-scale));
  white-space: nowrap;
  cursor: pointer;
}

.theme-chip.active {
  background: var(--strong);
  color: #fff8f6;
  border-color: transparent;
}

#font-scale {
  width: 100%;
  margin: 0;
  padding: 6px 0 2px;
  border: 0;
  background: transparent;
  border-radius: 0;
  accent-color: var(--strong);
}

.nav-header {
  padding: calc(var(--sat, 0px) + 12px) 16px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--bg) 70%, white 30%);
  border-bottom: 1px solid var(--line);
}

.nav-header h2 {
  margin: 0;
  flex: 1;
  font-family: var(--font-display);
  font-size: calc(26px * var(--font-scale));
  font-weight: 600;
}

.icon-btn,
.ghost-btn,
.primary-btn {
  border: 0;
  cursor: pointer;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--ink);
}

.nav-header .icon-btn svg {
  width: 22px;
  height: 22px;
  display: block;
}

#save-chat-settings {
  color: var(--strong);
}

.cs-stage {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  grid-template-rows: auto auto;
  gap: 8px;
  align-items: end;
  min-height: 132px;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, white 48%, transparent);
  background-color: var(--bg);
  background-image: var(--wallpaper);
  background-size: cover;
  background-position: center;
}

.cs-stage-face {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  object-fit: cover;
  background: color-mix(in srgb, white 46%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 50%, transparent);
}

.cs-stage-face:not(.me) {
  grid-column: 1;
  grid-row: 1;
}

.cs-stage .bubble.assistant {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
}

.cs-stage .bubble.user {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
}

.cs-stage-face.me {
  grid-column: 3;
  grid-row: 2;
}

.cs-face {
  display: grid;
  justify-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, white 46%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, white 34%, transparent);
  color: var(--ink);
  padding: 12px 8px 10px;
  cursor: pointer;
  font: inherit;
}

.cs-face span {
  display: grid;
  gap: 2px;
  justify-items: center;
}

.cs-face b {
  font-size: calc(12px * var(--font-scale));
  font-weight: 650;
}

.cs-face small {
  color: var(--ink-soft);
  font-size: calc(10px * var(--font-scale));
}

#cs-look .cs-paper-acts {
  grid-template-columns: 1.2fr 0.8fr;
}

#cs-look .look-paper {
  height: 112px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, white 50%, transparent);
  background-color: var(--bg);
  background-image: var(--wallpaper);
  background-size: cover;
  background-position: center;
}

#cs-bubble {
  display: none;
}

#cs-font {
  width: 100%;
  margin: 0;
  padding: 6px 0 2px;
  border: 0;
  background: transparent;
  border-radius: 0;
  accent-color: var(--strong);
}

.ghost-btn {
  background: transparent;
  color: var(--strong);
  font-weight: 700;
}

a.tts-guide {
  display: block;
  text-align: center;
  text-decoration: none;
}

.primary-btn {
  background: var(--strong);
  color: #fff8f6;
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 700;
}

.list {
  flex: 1;
  overflow: auto;
  padding: 12px 14px 24px;
}

.row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: var(--surface);
  border-radius: 20px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  cursor: pointer;
  overflow: hidden;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  object-fit: cover;
  background: var(--muted);
  flex: none;
}

.row .meta {
  min-width: 0;
  flex: 1;
}

.row h3,
.row p {
  margin: 0;
}

.row h3 {
  font-size: calc(15px * var(--font-scale));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row p {
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 48px 20px;
}

.list-head {
  margin: 16px 4px 8px;
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.list-head:first-child {
  margin-top: 2px;
}

.screen[data-screen="worldbook"] {
  --letter-scene: url("https://drive-cdn.mujian.me/19/Y4Y%E5%B0%8F%E6%89%8B%E6%9C%BA/d406c232-5948-4236-971d-7ccef9068774_%E4%B8%8B%E8%BD%BD%20%281%29.jfif");
  background-color: #f4eeec;
  background-image: var(--letter-scene);
  background-size: cover;
  background-position: center;
  color: #4a3b39;
}

.screen[data-screen="worldbook"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(185deg, rgba(255, 255, 255, 0.46), rgba(253, 252, 247, 0.16) 46%, rgba(206, 184, 184, 0.22));
  -webkit-backdrop-filter: blur(3px) saturate(1.12) brightness(1.05);
  backdrop-filter: blur(3px) saturate(1.12) brightness(1.05);
}

.screen[data-screen="worldbook"] > * {
  position: relative;
  z-index: 1;
}

.screen[data-screen="worldbook"] .nav-header {
  background: transparent;
  border-bottom: 0;
  color: #4a3b39;
}

.wb-organizer {
  background: transparent;
}

.letter-desk {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 12px 36px;
}

.letter-sheet,
.letter {
  --letter-paper: #fdfcf7;
  border-radius: 0;
}

.letter-sheet {
  position: relative;
  background: var(--letter-paper);
  color: #4a3b39;
  overflow: hidden;
  filter: drop-shadow(0 8px 16px rgba(180, 150, 155, 0.22));
  -webkit-mask:
    radial-gradient(circle at 4.5px 0, transparent 4px, #000 4.4px) top / 9px 7px repeat-x,
    radial-gradient(circle at 4.5px 100%, transparent 4px, #000 4.4px) bottom / 9px 7px repeat-x,
    linear-gradient(#000, #000) center / 100% calc(100% - 12px) no-repeat;
  mask:
    radial-gradient(circle at 4.5px 0, transparent 4px, #000 4.4px) top / 9px 7px repeat-x,
    radial-gradient(circle at 4.5px 100%, transparent 4px, #000 4.4px) bottom / 9px 7px repeat-x,
    linear-gradient(#000, #000) center / 100% calc(100% - 12px) no-repeat;
}

.letter-sheet::after,
.letter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

.letter-sheet > * {
  position: relative;
  z-index: 1;
}

.letter-cover {
  position: relative;
  width: 100%;
  display: block;
  margin: 0;
  padding: 8px 4px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.letter-cover-back {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 7px;
  background: #f3eee8;
  box-shadow: 0 5px 10px -4px rgba(180, 150, 155, 0.28);
}

.letter-cover-back.alt {
  left: 26px;
  right: 26px;
  bottom: 2px;
  height: 6px;
  background: #efe6e2;
}

.letter-cover-face {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 108px;
  padding: 18px 16px 16px;
}

.letter-count {
  justify-self: end;
  color: #9e8e8c;
  font-family: "Cormorant Garamond", "Songti SC", serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.letter-stack-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-in-out;
}

.letter-pile.open .letter-stack-wrap {
  grid-template-rows: 1fr;
}

.letter-stack {
  min-height: 0;
  overflow: hidden;
  padding: 8px 12px 18px 22px;
}

.letter {
  position: relative;
  z-index: calc(var(--letter-i, 0) + 1);
  box-sizing: border-box;
  max-height: 100px;
  margin-top: -56px;
  overflow: hidden;
  background: var(--letter-paper);
  color: #4a3b39;
  filter: drop-shadow(0 6px 7px rgba(180, 150, 155, 0.24));
  -webkit-mask:
    radial-gradient(circle at 4.5px 0, transparent 4px, #000 4.4px) top / 9px 7px repeat-x,
    radial-gradient(circle at 4.5px 100%, transparent 4px, #000 4.4px) bottom / 9px 7px repeat-x,
    linear-gradient(#000, #000) center / 100% calc(100% - 12px) no-repeat;
  mask:
    radial-gradient(circle at 4.5px 0, transparent 4px, #000 4.4px) top / 9px 7px repeat-x,
    radial-gradient(circle at 4.5px 100%, transparent 4px, #000 4.4px) bottom / 9px 7px repeat-x,
    linear-gradient(#000, #000) center / 100% calc(100% - 12px) no-repeat;
  transition:
    max-height 0.3s ease-in-out,
    margin-top 0.3s ease-in-out,
    transform 0.3s ease-in-out,
    filter 0.3s ease-in-out;
}

.letter:first-of-type {
  margin-top: 0;
}

.letter.is-open {
  z-index: 30;
  max-height: 540px;
  transform: translateY(-3px);
  filter: drop-shadow(0 16px 22px rgba(180, 150, 155, 0.32));
}

.letter.is-open + .letter {
  margin-top: 14px;
}

.letter .letter-sheet {
  position: relative;
  z-index: 1;
  padding: 0 12px 4px;
  background: transparent;
  filter: none;
  overflow: visible;
  -webkit-mask: none;
  mask: none;
}

.letter .letter-sheet::after {
  content: none;
}

.letter + .letter::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 12px;
  right: 12px;
  top: 8px;
  border-top: 1px solid rgba(181, 158, 158, 0.55);
  pointer-events: none;
}

.letter .letter-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: 30px 32px;
  height: 100px;
  box-sizing: border-box;
  padding: 14px 4px 24px;
  overflow: hidden;
}

.letter .letter-date {
  grid-area: 1 / 1 / 2 / 2;
}

.letter .letter-sign {
  grid-area: 2 / 1 / 3 / 3;
}

.letter .letter-stamp {
  grid-area: 2 / 3 / 3 / 4;
}

.letter-head,
.letter-cover-face {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
}

.letter-head {
  width: 100%;
  margin: 0;
  padding: 2px 2px 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.letter-date b {
  display: block;
  font-family: "Cormorant Garamond", "Times New Roman", "Songti SC", serif;
  font-size: 42px;
  font-weight: 500;
  font-variant-numeric: lining-nums;
  line-height: 0.8;
  color: #4a3b39;
}

.letter-date small {
  display: block;
  margin-top: 6px;
  font-family: "Nunito", "PingFang SC", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #9e8e8c;
}

.letter-cover-face > .letter-sign,
.letter .letter-sign {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  min-width: 0;
}

.letter-sign em {
  flex: none;
  font-family: "Dancing Script", "Cormorant Garamond", serif;
  font-style: normal;
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  color: #4a3b39;
}

.letter-sign b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Songti SC", "STSong", "SimSun", "NSimSun", serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.14em;
  line-height: 1.2;
  color: #4a3b39;
}

.letter-sign span,
.letter-sign i {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.letter-sign span {
  margin-top: 4px;
  font-family: "Cormorant Garamond", "Songti SC", serif;
  font-size: 16px;
  color: #4a3b39;
}

.letter-sign i {
  margin-top: 2px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #9e8e8c;
}

.letter-stamp {
  width: 108px;
  height: 46px;
  color: #b59e9e;
  mix-blend-mode: multiply;
}

.letter-stamp text {
  fill: currentColor;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 9px;
  letter-spacing: 0.14em;
}

.letter-rule {
  margin: 10px 2px 0;
  border-top: 1px dashed #d8c7c5;
}

.letter .letter-date b {
  font-size: 26px;
  line-height: 1;
}

.letter .letter-sign em {
  font-size: 22px;
}

.letter .letter-sign b {
  font-size: 16px;
  letter-spacing: 0.12em;
}

.letter .letter-stamp {
  width: 96px;
  height: 32px;
}

.letter-title {
  margin: 2px 2px 0;
  font-family: "Cormorant Garamond", "Songti SC", serif;
  font-size: 18px;
  color: #4a3b39;
}

.letter-meta {
  margin: 2px 2px 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #9e8e8c;
}

.letter-prose {
  margin: 12px 2px 0;
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: 0.06em;
  color: #4a3b39;
}

.letter-more {
  flex: none;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid rgba(184, 155, 152, 0.9);
  border-radius: 2px;
  background: transparent;
  color: #b89b98;
  font-family: "Cormorant Garamond", "Songti SC", serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.letter-rest .letter-more {
  display: block;
  margin: 14px 2px 8px auto;
}

@media (prefers-reduced-motion: reduce) {
  .letter,
  .letter-stack-wrap {
    transition: none;
  }
}


.form {
  flex: 1;
  overflow: auto;
  padding: 14px 16px 28px;
  display: grid;
  gap: 12px;
  align-content: start;
}

label {
  display: grid;
  gap: 6px;
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 14px;
  padding: 11px 12px;
  outline: none;
}

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

.screen[data-screen="chat"] {
  background: var(--wallpaper) center / cover no-repeat;
  background-color: var(--bg);
  color: var(--ink);
}

.screen[data-screen="chat"] .nav-header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  background: transparent;
  border-bottom: 0;
  position: relative;
  z-index: 2;
}

.screen[data-screen="chat"] #chat-avatar {
  display: none;
}

.screen[data-screen="chat"] .chat-head-text,
.screen[data-screen="chat"] .chat-head-text h2,
.screen[data-screen="chat"] #typing-indicator {
  text-align: center;
}

.screen[data-screen="chat"] .nav-header .icon-btn {
  background: transparent;
  color: var(--ink);
  text-shadow: 0 1px 8px color-mix(in srgb, white 70%, transparent);
}

.chat-set-btn {
  display: grid;
  place-items: center;
  padding: 0;
}

.chat-set-btn .glass-ico {
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

.chat-set-btn .glass-ico::after {
  display: none;
}

.chat-set-btn .glass-ico svg {
  width: 22px;
  height: 22px;
  overflow: visible;
}

.chat-set-btn img.custom {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: cover;
}

.screen[data-screen="chat"] .chat-log {
  background: transparent;
}

.screen[data-screen="chat"] .composer,
.screen[data-screen="chat"] .quote-bar {
  background: transparent;
  border-top: 0;
  position: relative;
  z-index: 2;
}

.screen[data-screen="chat"] .composer textarea {
  background: color-mix(in srgb, white 42%, transparent);
  border: 1px solid color-mix(in srgb, white 58%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 8px 22px rgba(40, 24, 32, 0.06);
}

.screen[data-screen="chat"] .circle-btn {
  background: color-mix(in srgb, white 40%, transparent);
  border-color: color-mix(in srgb, white 52%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.chat-log {
  flex: 1;
  overflow: auto;
  padding: 12px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background-color: color-mix(in srgb, var(--bg) 92%, white);
  background-size: cover;
  background-position: center;
}

.msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 6px 0;
}

.msg.pop {
  animation: bubble-in 0.32s ease;
}

@keyframes bubble-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.msg.user {
  justify-content: flex-end;
}

.msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  object-fit: cover;
  flex: none;
  background: var(--muted);
}

.msg-col {
  max-width: 74%;
  display: flex;
  flex-direction: column;
}

.msg.user .msg-col {
  align-items: flex-end;
}

.quoted-message {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border-left: 2px solid var(--strong);
  border-radius: 8px;
  padding: 6px 8px;
  margin-bottom: 6px;
  font-size: calc(12px * var(--font-scale));
}

.quoted-sender {
  margin: 0 0 2px;
  color: var(--ink-soft);
  font-size: calc(11px * var(--font-scale));
}

.quoted-content {
  margin: 0;
  opacity: 0.88;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bubble.recalled {
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
  padding: 4px 0;
}

.pat-line {
  align-self: center;
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
  margin: 6px 0;
}

.quote-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 0;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--bg) 80%, white);
}

.msg,
.bubble,
.game-report-msg {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.bubble,
.game-report-msg {
  touch-action: manipulation;
}

.msg-avatar {
  cursor: pointer;
}

.quote-bar[hidden] {
  display: none;
}

.quote-bar .quoted-sender,
.quote-bar .quoted-content {
  margin: 0;
}

.msg-actions {
  position: absolute;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  max-width: calc(100% - 12px);
  gap: 2px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgb(0 0 0 / 18%);
  white-space: nowrap;
}

.msg-actions[hidden] {
  display: none;
}

.msg-actions button {
  border: 0;
  background: transparent;
  color: var(--ink);
  border-radius: 11px;
  min-height: 40px;
  padding: 0 10px;
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
}
.msg-actions button:is(:hover, :focus-visible),
.msg-actions button[data-act="select"] {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}
.msg-actions button[data-act="delete"],
#chat-selection-delete {
  color: color-mix(in srgb, #b13b50 70%, var(--ink));
  background: color-mix(in srgb, #da6072 13%, var(--surface));
}

.chat-selection {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
  background: var(--surface);
  color: var(--ink);
  border-top: 1px solid var(--line);
  font-size: calc(13px * var(--font-scale));
}

.chat-selection[hidden],
.chat-selection:not([hidden]) ~ :is(.composer, .quote-bar) {
  display: none;
}

.chat-selection button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  cursor: pointer;
}

#chat-selection-delete:disabled {
  opacity: .45;
  cursor: default;
}

.is-selecting :is(.msg, .game-report-msg):has([data-msg-select]) {
  position: relative;
  padding-inline-start: 38px;
  cursor: pointer;
}

.is-selecting [data-msg-select] {
  position: absolute;
  inset-inline-start: 5px;
  top: 9px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

.is-selecting [data-msg-select][aria-pressed="true"] {
  background: var(--strong);
  color: var(--surface);
}

.phone.pat-shake .screens {
  animation: pat-shake 0.45s ease;
}

@keyframes pat-shake {
  0%,
  100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.msg.system-line {
  justify-content: center;
  margin: 8px 0;
}

.picker-row {
  cursor: pointer;
}

.picker-row input {
  width: auto;
}

.date-chip {
  align-self: center;
  font-size: calc(11px * var(--font-scale));
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
  margin: 8px 0;
}

.bubble {
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 16px;
  font-size: calc(var(--chat-font, 14px) * var(--font-scale));
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: pointer;
}

.bubble.assistant,
.bubble.user {
  border: 1px solid color-mix(in srgb, white 62%, transparent);
  color: var(--look-chat, var(--ink));
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: 0 8px 18px rgba(40, 24, 32, 0.05);
}

.bubble.assistant {
  align-self: flex-start;
  background: color-mix(in srgb, white 46%, transparent);
}

.bubble.user {
  align-self: flex-end;
  background: color-mix(in srgb, white 34%, transparent);
}

.bubble[data-media]:not([data-media=""]):not([data-media="voice_message"]) {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.bubble[data-media="location"] {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.chat-head-text {
  flex: 1;
  min-width: 0;
}

.chat-head-text h2 {
  margin: 0;
  flex: none;
  font-size: calc(18px * var(--font-scale));
  line-height: 1.2;
}

#typing-indicator {
  display: none;
  margin: 2px 0 0;
  font-size: calc(11px * var(--font-scale));
  color: var(--strong);
}

#typing-indicator.show {
  display: block;
}

.wait-btn,
.send-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: color-mix(in srgb, var(--strong) 62%, var(--ink));
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  padding: 0;
  align-self: center;
}

.wait-btn.stop svg {
  display: none;
}

.wait-btn.stop::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: currentColor;
}

.wait-btn svg,
.send-btn svg {
  width: 22px;
  height: 22px;
  display: block;
  overflow: visible;
}

.icon-glass stop[data-glass-11="on"] {
  stop-color: currentColor;
}

.icon-glass stop[data-glass-12="on"] {
  stop-color: color-mix(in srgb, currentColor 52%, var(--ink));
}

.icon-glass stop[data-glass-21="on"] {
  stop-color: color-mix(in srgb, var(--surface) 78%, white);
  stop-opacity: 0.72;
}

.icon-glass stop[data-glass-22="on"] {
  stop-color: color-mix(in srgb, currentColor 32%, var(--surface));
  stop-opacity: 0.58;
}

.icon-glass stop[data-glass-light="on"] {
  stop-color: #fff;
}

.circle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, white);
  color: var(--ink);
  cursor: pointer;
  flex: none;
  padding: 0;
  display: grid;
  place-items: center;
  align-self: center;
}

.circle-btn svg {
  display: block;
  overflow: visible;
}

.plus-btn {
  font-size: calc(22px * var(--font-scale));
  font-weight: 400;
  line-height: 1;
  transition: transform 0.18s ease;
}

.plus-btn.open {
  transform: rotate(45deg);
}

.plus-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 10px;
  padding: 14px 18px 22px;
  background: color-mix(in srgb, var(--bg) 88%, #ececec);
  flex-shrink: 0;
}

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

.plus-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
}

.plus-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
  display: grid;
  place-items: center;
  font-size: calc(20px * var(--font-scale));
}

.plus-icon-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

.pay-sheet {
  position: absolute;
  inset: 0;
  z-index: 46;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 14px;
  background: rgba(40, 18, 24, 0.38);
}

.pay-sheet[hidden] {
  display: none;
}

.pay-card {
  width: min(100%, 300px);
  max-height: 78%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  color: #3a2428;
}

.pay-card h3 {
  margin: 0;
  font-size: calc(16px * var(--font-scale));
}

.pay-card .hint {
  margin: 0;
  font-size: calc(12px * var(--font-scale));
  color: #8a6a70;
}

.music-sheet.pay-sheet {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  background: transparent;
}

.music-page {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
  font-family: "Nunito", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  background:
    radial-gradient(90% 42% at 50% 0%, rgba(255, 255, 255, 0.92), transparent 62%),
    linear-gradient(180deg, #fff7f8 0%, #f7e4e7 46%, #f3d7dc 100%);
}

.music-nav {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: calc(var(--sat, 0px) + 52px);
  padding: calc(var(--sat, 0px) + 6px) 12px 6px;
  background: transparent;
  transition: background 0.28s ease;
}

.music-nav.is-solid {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

.music-nav strong {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  font-size: calc(15px * var(--font-scale));
  font-weight: 600;
  letter-spacing: 0.18em;
  transition: opacity 0.28s ease;
}

.music-nav.is-solid strong {
  opacity: 1;
}

.music-nav-back,
.music-nav-gear {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  padding: 0;
}

.music-nav-gear {
  margin-left: auto;
}

.music-page-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: calc(var(--sat, 0px) + 48px) 22px calc(var(--sab, 0px) + 28px);
  -webkit-overflow-scrolling: touch;
}

.music-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.music-disc {
  width: min(68%, 248px);
  aspect-ratio: 1;
  margin-top: 12px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(145deg, #fff 0%, #f6c3cc 46%, #e08b9b 100%);
  box-shadow:
    0 22px 44px rgba(90, 36, 48, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.65);
}

.music-disc img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music-disc img:not([src]),
.music-disc img[src=""] {
  opacity: 0;
}

.music-pl-title {
  margin: 22px 0 0;
  max-width: 100%;
  font-size: calc(22px * var(--font-scale));
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}

.music-pl-by {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  max-width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: calc(12px * var(--font-scale));
  cursor: pointer;
  align-self: center;
}

.music-pl-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #f0d0d6;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
}

.music-pl-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music-pl-avatar svg {
  width: 14px;
  height: 14px;
}

.music-pl-avatar.is-guest {
  margin-left: -12px;
  box-shadow: 0 0 0 2px #fff;
}

.music-pl-avatar[hidden] {
  display: none;
}

#music-pl-with[hidden] {
  display: none;
}

#music-pl-with::before {
  content: "·";
  margin-right: 8px;
  color: #c9b4b6;
}

.music-listen[hidden] {
  display: none;
}

.music-listen {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.music-listen-mask {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(40, 18, 24, 0.16);
}

.music-listen-card {
  position: relative;
  z-index: 1;
  max-height: 70%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px calc(var(--sab, 0px) + 18px);
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 246, 248, 0.26));
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-bottom: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 -18px 40px rgba(80, 30, 40, 0.1);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  backdrop-filter: blur(28px) saturate(1.7);
}

.music-listen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.music-listen-head strong {
  font-size: calc(16px * var(--font-scale));
}

.music-listen-head button {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.music-listen-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
  line-height: 1.5;
}

.music-listen-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.music-listen-one {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.music-listen-one.is-on {
  border-color: rgba(232, 150, 168, 0.85);
  background: rgba(255, 236, 240, 0.48);
}

.music-listen-one img,
.music-listen-one i {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

.music-listen-one i {
  display: grid;
  place-items: center;
  background: #f0d0d6;
  color: var(--ink);
  font-style: normal;
  font-size: 14px;
}

.music-listen-one span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.music-listen-one small,
.music-listen-empty {
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
}

#music-pl-count::before {
  content: "·";
  margin-right: 8px;
  color: #c9b4b6;
}

.music-pl-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 22px 0 6px;
}

.music-playall {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0 0 0 3px;
  color: #fff;
  background: linear-gradient(145deg, #f8c9d1, #ee8fa0 52%, #e07b90);
  box-shadow: 0 12px 24px rgba(196, 100, 120, 0.34);
  cursor: pointer;
}

.music-playall.is-on {
  padding: 0;
}

.music-song-list {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.music-track-row {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.42);
}

.music-track {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
}

.music-track-no {
  font-variant-numeric: tabular-nums;
  font-size: calc(13px * var(--font-scale));
  color: #b3a0a3;
}

.music-track[aria-current="true"] .music-track-no,
.music-track[aria-current="true"] strong {
  color: #c86d80;
}

.music-track-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.music-track-main strong {
  font-size: calc(15px * var(--font-scale));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-track-main small {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #b7a8aa;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.music-track-more,
.music-track-del {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #b3a0a3;
  padding: 0;
}

.music-track-del {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  color: #c86d80;
}

@media (hover: hover) {
  .music-track-row:hover .music-track-del,
  .music-track-row:focus-within .music-track-del {
    opacity: 1;
    pointer-events: auto;
  }

  .music-track-row:hover .music-track-more,
  .music-track-row:focus-within .music-track-more {
    opacity: 0;
  }
}

.music-track-row.is-menu .music-track-del {
  opacity: 1;
  pointer-events: auto;
}

.music-track-row.is-menu .music-track-more {
  opacity: 0;
}

.music-drawer[hidden] {
  display: none;
}

.music-drawer {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.music-drawer-mask {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(40, 18, 24, 0.16);
}

.music-drawer-card {
  position: relative;
  z-index: 1;
  max-height: 86%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 14px 20px calc(var(--sab, 0px) + 22px);
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 246, 248, 0.26));
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-bottom: 0;
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  backdrop-filter: blur(28px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 -18px 40px rgba(80, 30, 40, 0.1);
  animation: music-drawer-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes music-drawer-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.music-drawer-head {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 8px;
}

.music-drawer-head strong {
  font-size: calc(15px * var(--font-scale));
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: center;
}

.music-drawer-x,
.music-drawer-head #music-sheet-ok,
.music-upload {
  border: 0;
  background: transparent;
  color: #a85d6c;
  padding: 6px 0;
  font-weight: 500;
}

.music-drawer-x {
  width: 36px;
  height: 36px;
  font-size: 22px;
  line-height: 1;
}

.music-drawer input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(138, 106, 112, 0.28);
  border-radius: 0;
  background: transparent;
  padding: 10px 2px 8px;
  font-weight: 400;
  box-shadow: none;
}

.music-drawer input:hover,
.music-drawer input:focus {
  background: rgba(255, 255, 255, 0.55);
  border-bottom-color: #c48b96;
}

.music-upload {
  justify-self: start;
  width: auto;
  text-align: left;
}

.music-edit-list {
  display: flex;
  flex-direction: column;
}

.music-edit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 2px 8px;
  align-items: center;
  padding: 6px 0 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}

.music-edit-row button {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #c9b4b6;
  font-size: 18px;
  padding: 0;
}

.music-add-line {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  align-self: flex-start;
  border: 0;
  background: transparent;
  color: #b7a4a6;
  padding: 4px 0 0;
  font-weight: 500;
}

.music-add-line span {
  font-size: 18px;
  line-height: 1;
}

.music-cloud {
  display: grid;
  gap: 12px;
}

.music-cloud-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.music-ne-mark {
  width: 22px;
  height: 22px;
  display: block;
  flex: none;
}

.music-cloud-state {
  flex: 1;
  min-width: 0;
  font-size: calc(14px * var(--font-scale));
  font-weight: 600;
}

.music-cloud-state span {
  margin-left: 8px;
  font-weight: 500;
  color: #8a6a70;
}

.music-switch {
  position: relative;
  width: 42px;
  height: 26px;
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  background: rgba(138, 106, 112, 0.28);
}

.music-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}

.music-switch.is-on {
  background: linear-gradient(145deg, #f3b4c0, #e07d90);
}

.music-switch.is-on::after {
  transform: translateX(16px);
}

.music-cloud-status {
  margin: 0;
  color: #8a6a70;
  font-size: calc(12px * var(--font-scale));
}

.music-cloud-status:empty {
  display: none;
}

.music-cloud-qr {
  display: grid;
  justify-items: center;
}

.music-cloud-qr img {
  width: 168px;
  height: 168px;
  background: #fff;
  border-radius: 12px;
  image-rendering: pixelated;
}

.music-cloud-lists {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

.music-cloud-lists button {
  flex: none;
  border: 0;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: calc(12px * var(--font-scale));
}

#backup-sheet-hint {
  white-space: pre-line;
}

.groups-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow: auto;
}

.groups-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, #fff 70%, var(--accent));
}

.groups-row b {
  flex: 1;
  min-width: 0;
  font-size: calc(14px * var(--font-scale));
}

.groups-row button {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--strong);
  font-size: calc(12px * var(--font-scale));
  padding: 4px 6px;
}

.pay-card label {
  color: #6b4d53;
}

.pay-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.loc-stop {
  margin-bottom: 6px;
}

.location-card,
.waimai-card {
  width: 210px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  white-space: normal;
}

.location-card {
  width: 228px;
  border-radius: 8px;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  color: #191919;
}

.location-copy {
  padding: 8px 10px 7px;
}

.location-map {
  height: 104px;
  background: #e6ebef;
}

.location-map svg {
  display: block;
  width: 100%;
  height: 100%;
}

.location-info,
.waimai-main {
  padding: 8px 10px 10px;
  font-size: calc(12px * var(--font-scale));
}

.location-place {
  margin: 0;
  font-size: calc(15px * var(--font-scale));
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-sub,
.location-who,
.location-dist {
  margin: 2px 0 0;
  font-size: calc(12px * var(--font-scale));
  line-height: 1.3;
  color: #8a8a8a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.waimai-card {
  background: #fff7f2;
}

.waimai-head {
  padding: 8px 10px 0;
  font-size: calc(11px * var(--font-scale));
  color: #c45c3e;
  font-weight: 700;
}

.waimai-title {
  margin: 0 0 6px;
  font-weight: 700;
}

.waimai-amt {
  font-size: calc(22px * var(--font-scale));
  font-weight: 800;
  margin: 0 0 8px;
}

.waimai-acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.waimai-acts button {
  border: 0;
  border-radius: 10px;
  padding: 7px 6px;
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
}

.waimai-acts .no {
  background: #f3e7e4;
}

.waimai-acts .yes {
  background: var(--strong);
  color: #fff8f6;
}

.waimai-status {
  margin: 0;
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}

.pay-tabs {
  display: flex;
  gap: 8px;
}

.pay-tabs button {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 12px;
  padding: 8px 6px;
  font-weight: 700;
  cursor: pointer;
}

.pay-tabs button.active {
  background: var(--strong);
  color: #fff8f6;
  border-color: transparent;
}

#wm-who-field[hidden] {
  display: none;
}

.wm-balance,
.wm-note {
  margin: 8px 0 0;
  font-size: calc(12px * var(--font-scale));
  line-height: 1.45;
  color: var(--ink-soft);
}

.wm-note {
  margin-bottom: 4px;
}

.pay-greet {
  text-align: center;
  font-size: calc(18px * var(--font-scale));
  margin: 8px 0;
}

.rp-list {
  display: grid;
  gap: 8px;
}

.rp-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: calc(13px * var(--font-scale));
}

.bubble.money {
  padding: 0;
  background: transparent;
  border: 0;
  max-width: 230px;
}

.red-packet-card {
  width: 210px;
  border-radius: 12px;
  background: linear-gradient(160deg, #f96259, #e44d44);
  color: #ffe7a3;
  padding: 12px;
  cursor: pointer;
}

.red-packet-card.opened {
  background: linear-gradient(160deg, #d3c4a0, #c4b693);
}

.rp-greeting {
  font-size: calc(15px * var(--font-scale));
  font-weight: 700;
  margin: 0 0 8px;
}

.rp-type,
.rp-claimed-info {
  margin: 0;
  font-size: calc(11px * var(--font-scale));
  color: #fff;
  opacity: 0.88;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 8px;
}

.rp-claimed-info {
  margin-top: 8px;
}

.transfer-card {
  width: 200px;
  border-radius: 12px;
  padding: 12px;
  color: #fff8f6;
  cursor: pointer;
  background: radial-gradient(circle at top left, #ffc5d5, #ff85b3);
}

.msg.ai .transfer-card {
  background: radial-gradient(circle at top left, #a1c4fd, #7aa8f5);
}

.tf-claim-preview {
  width: 100%;
  box-sizing: border-box;
  background: radial-gradient(circle at top left, #a1c4fd, #7aa8f5);
}

.transfer-title {
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  margin: 0 0 6px;
}

.transfer-amount {
  font-size: calc(24px * var(--font-scale));
  font-weight: 800;
  margin: 0 0 6px;
}

.transfer-note {
  margin: 0;
  font-size: calc(12px * var(--font-scale));
  opacity: 0.9;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: 8px;
}

.photo-preview {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 14px;
}

.bubble.sticker {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
}

.sticker-image-wrap {
  display: block;
  position: relative;
  width: 132px;
  height: 132px;
  overflow: hidden;
  border-radius: 10px;
}

.sticker-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

#sticker-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--bg) 86%, white);
  border-top: 1px solid var(--line);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 30px rgba(60, 20, 30, 0.12);
}

#sticker-panel[hidden] {
  display: none;
}

.sticker-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.sticker-head strong {
  flex: 1;
  text-align: center;
  font-size: calc(14px * var(--font-scale));
}

.sticker-head-actions {
  display: flex;
  gap: 4px;
}

.sticker-grid {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}

.sticker-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.sticker-thumb {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 80%, white);
}

.sticker-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.sticker-cell .sticker-name {
  font-size: calc(11px * var(--font-scale));
  color: var(--ink-soft);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sticker-cell .del {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: #c45c63;
  color: #fff;
  font-size: calc(12px * var(--font-scale));
  line-height: 18px;
  display: none;
}

#sticker-panel.editing .sticker-cell .del {
  display: block;
}

.sticker-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
  padding: 28px 12px;
}

.sticker-grid.emoji-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.emoji-cell {
  border: 0;
  background: transparent;
  font-size: calc(24px * var(--font-scale));
  line-height: 1.2;
  padding: 6px 0;
  cursor: pointer;
  border-radius: 8px;
}

.emoji-cell:active {
  background: color-mix(in srgb, var(--strong) 16%, transparent);
}

.sticker-tabs {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 8px 12px 10px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  scrollbar-width: none;
}

.sticker-tabs::-webkit-scrollbar {
  display: none;
}

.sticker-tab {
  position: relative;
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: calc(13px * var(--font-scale));
  background: color-mix(in srgb, var(--surface) 80%, white);
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}

.sticker-tab.active {
  background: var(--strong);
  color: #fff8f6;
}

.sticker-tab.add {
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent);
}

.sticker-tab .tab-del {
  display: none;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: #c45c63;
  color: #fff;
  font-size: calc(11px * var(--font-scale));
  line-height: 16px;
  padding: 0;
}

#sticker-panel.editing .sticker-tab .tab-del {
  display: block;
}

.chat-photo {
  max-width: 200px;
}

.chat-photo img,
.sticker-image {
  cursor: zoom-in;
}

.chat-photo img,
.photo-fallback {
  display: block;
  width: 168px;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 8%, var(--surface));
}

.photo-fallback {
  display: grid;
  place-items: center;
  font-size: calc(42px * var(--font-scale));
}

.photo-fallback.failed {
  font-size: calc(13px * var(--font-scale));
  padding: 12px;
  text-align: center;
}

.photo-cap {
  margin: 6px 0 0;
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}

.photo-view {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--sat, 0px) + 16px) 14px 28px;
  background: rgba(18, 10, 12, 0.9);
}

.photo-view[hidden] {
  display: none;
}

.photo-view img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  cursor: zoom-out;
}

.photo-save {
  position: absolute;
  right: 16px;
  bottom: 22px;
  z-index: 1;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  background: #fff;
  color: #1c1416;
  font-weight: 700;
  cursor: pointer;
}

.fold.nest > summary {
  padding: 10px 12px;
  font-size: calc(15px * var(--font-scale));
}

.template-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.template-pick {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: calc(13px * var(--font-scale));
  cursor: pointer;
}

.template-pick.on {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

.member-voices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.member-voices label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: calc(12px * var(--font-scale));
}

.voice-card {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 92px;
  max-width: 180px;
  cursor: pointer;
}
.voice-card.playing .voice-wave i {
  animation-duration: 0.55s;
}

.voice-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 18px;
  flex: 1;
}

.voice-wave i {
  display: block;
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
  animation: wave-quiet 1.4s ease-in-out infinite;
}

.voice-wave i:nth-child(2) { animation-delay: 0.15s; height: 12px; }
.voice-wave i:nth-child(3) { animation-delay: 0.3s; height: 16px; }
.voice-wave i:nth-child(4) { animation-delay: 0.45s; height: 10px; }
.voice-wave i:nth-child(5) { animation-delay: 0.6s; height: 14px; }

@keyframes wave-quiet {
  0%,
  100% { transform: scaleY(0.45); }
  50% { transform: scaleY(1); }
}

.voice-dur {
  font-size: calc(12px * var(--font-scale));
  opacity: 0.8;
}

.voice-text {
  margin: 6px 0 0;
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}

.msg.user .voice-card {
  flex-direction: row-reverse;
}

.composer {
  padding: 8px 10px 16px;
  background: color-mix(in srgb, var(--bg) 72%, white);
  border-top: 1px solid var(--line);
}

.composer-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.composer textarea {
  flex: 1;
  min-height: 36px;
  max-height: 120px;
  height: 36px;
  padding: 7px 14px;
  line-height: 22px;
  resize: none;
  overflow-y: hidden;
  scrollbar-width: none;
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 92%, white);
}

.composer textarea::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 12px;
}

.switch input {
  width: auto;
  accent-color: var(--strong);
}

.switch.capsule {
  position: relative;
}

.switch.capsule input {
  position: absolute;
  right: 12px;
  width: 46px;
  height: 28px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.switch.capsule input:disabled {
  cursor: not-allowed;
}

.capsule-knob {
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 75%, white);
  position: relative;
  flex: 0 0 auto;
  transition: background 0.2s ease;
}

.capsule-knob::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(40, 16, 24, 0.22);
  transition: transform 0.2s ease;
}

.switch.capsule input:checked + .capsule-knob {
  background: var(--strong);
}

.switch.capsule input:checked + .capsule-knob::after {
  transform: translateX(18px);
}

.switch.capsule input:disabled + .capsule-knob {
  opacity: 0.45;
}

.toast {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: calc(12px * var(--font-scale));
  opacity: 0;
  pointer-events: none;
  transition: 0.25s ease;
  z-index: 50;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hint-bar,
.hint,
.form > .hint,
.card > .hint {
  margin: 0 16px 8px;
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}

.form > .hint,
.card > .hint {
  margin: -4px 0 4px;
}

.settings-scroll {
  padding-bottom: 28px;
}

.screen[data-screen="settings"],
.screen[data-screen="moments-settings"],
.screen[data-screen="weibo-settings"] {
  background: var(--wallpaper) center / cover no-repeat;
  background-color: var(--bg);
  color: var(--ink);
}

.screen[data-screen="settings"] .nav-header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  background: transparent;
  border-bottom: 0;
}

.screen[data-screen="settings"] .nav-header h2 {
  text-align: center;
  font-size: calc(17px * var(--font-scale));
}

.screen[data-screen="chat-settings"] .nav-header h2 {
  text-align: center;
  font-family: inherit;
  font-size: calc(17px * var(--font-scale));
  font-weight: 650;
}

.screen[data-screen="settings"] .nav-header .icon-btn,
.screen[data-screen="settings"] .save-link {
  background: color-mix(in srgb, white 40%, transparent);
  border: 1px solid color-mix(in srgb, white 55%, transparent);
  color: var(--ink);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

.screen[data-screen="settings"] .save-link {
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 650;
}

.screen[data-screen="settings"] .settings-scroll {
  background: transparent;
  gap: 12px;
}

.screen[data-screen="settings"] .fold {
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  border: 1px solid color-mix(in srgb, white 52%, transparent);
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(40, 24, 32, 0.05);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  overflow: hidden;
}

.screen[data-screen="settings"] .fold > summary,
.screen[data-screen="chat-settings"] .fold > summary {
  font-family: inherit;
  font-size: calc(15px * var(--font-scale));
  font-weight: 650;
  letter-spacing: 0.04em;
}

.screen[data-screen="settings"] .fold-body {
  border-top-color: color-mix(in srgb, white 38%, transparent);
}

.screen[data-screen="settings"] .meta-line {
  margin: 6px 0 0;
  letter-spacing: 0.12em;
  font-size: calc(11px * var(--font-scale));
}

.screen[data-screen="settings"] input,
.screen[data-screen="settings"] textarea,
.screen[data-screen="settings"] select,
.screen[data-screen="settings"] .switch {
  background: color-mix(in srgb, white 46%, transparent);
  border-color: color-mix(in srgb, white 50%, transparent);
}

.screen[data-screen="settings"] .theme-chip {
  background: color-mix(in srgb, white 36%, transparent);
  border-color: color-mix(in srgb, white 48%, transparent);
  color: var(--ink);
}

.screen[data-screen="settings"] .theme-chip.active {
  background: color-mix(in srgb, var(--strong) 78%, var(--ink));
  color: #fff8f6;
  border-color: transparent;
}

.screen[data-screen="settings"] .look-paper {
  height: 112px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, white 50%, transparent);
  background-color: color-mix(in srgb, white 28%, transparent);
}

.screen[data-screen="settings"] .seg-bar {
  background: color-mix(in srgb, white 46%, transparent);
}

.screen[data-screen="settings"] .look-app {
  border-bottom-color: color-mix(in srgb, white 36%, transparent);
}

.screen[data-screen="settings"] .api-switch button,
.screen[data-screen="settings"] .api-switch-acts button {
  background: color-mix(in srgb, white 36%, transparent);
  border-color: color-mix(in srgb, white 48%, transparent);
  color: var(--ink);
}

.screen[data-screen="settings"] .api-switch button.on {
  background: color-mix(in srgb, var(--strong) 78%, var(--ink));
  color: #fff8f6;
  border-color: transparent;
}

.phone.look-icon-solid .glass-ico,
.phone.look-icon-solid .glass-ico:has(.glass-art) {
  background: var(--look-tile, color-mix(in srgb, var(--surface) 88%, white));
  border-color: color-mix(in srgb, white 46%, var(--line));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.phone.look-tile:not(.look-icon-solid) .glass-ico {
  background:
    linear-gradient(165deg, color-mix(in srgb, white 34%, transparent), color-mix(in srgb, var(--look-tile) 42%, transparent));
}

.phone.look-widget-solid .home .widget,
.phone.look-widget-solid .home-dock {
  background: color-mix(in srgb, var(--surface) 92%, white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.beauty {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.beauty-stage {
  display: grid;
  grid-template-columns: 1.05fr 1.35fr 0.72fr;
  gap: 8px;
  padding: 8px;
  border-radius: 22px;
  background: color-mix(in srgb, white 34%, transparent);
  border: 1px solid color-mix(in srgb, white 48%, transparent);
}

.beauty-clock,
.beauty-icons,
.beauty-dock {
  min-height: 108px;
  border-radius: 18px;
  background: color-mix(in srgb, white 46%, transparent);
  border: 1px solid color-mix(in srgb, white 40%, transparent);
}

.beauty-clock {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px;
}

.beauty-clock b {
  font-family: "Cormorant Garamond", serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  color: var(--look-time, var(--ink));
}

.beauty-clock span {
  margin-top: 4px;
  font-size: 10px;
  color: var(--look-date, var(--ink-soft));
}

.beauty-icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 2px;
  align-content: center;
  padding: 8px 4px;
}

.beauty-icons span {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
}

.beauty-icons .glass-ico {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

.beauty-icons .glass-ico svg {
  width: 14px;
  height: 14px;
}

.beauty-icons b {
  max-width: 46px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 650;
  color: var(--look-app, var(--ink));
}

.beauty-dock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.beauty-dock i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--look-tile, var(--surface)) 70%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 50%, transparent);
}

.beauty-acts {
  display: grid;
  grid-template-columns: 1.3fr 1fr 0.9fr;
  gap: 8px;
}

.beauty-acts button {
  border: 0;
  border-radius: 999px;
  min-height: 40px;
  padding: 0 10px;
  cursor: pointer;
  font-size: calc(12px * var(--font-scale));
  font-weight: 650;
}

.beauty-save {
  background: var(--ink);
  color: #fff8f6;
}

.beauty-reset,
.beauty-count {
  background: color-mix(in srgb, white 42%, transparent);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, white 50%, transparent) !important;
}

.beauty-saved {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.beauty-saved[hidden] {
  display: none !important;
}

.beauty-saved button {
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, white 40%, transparent);
  color: var(--ink);
  padding: 6px 10px;
  cursor: pointer;
  font-size: calc(12px * var(--font-scale));
}

.beauty-pages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 18px;
  background: color-mix(in srgb, white 28%, transparent);
}

.beauty-pages button {
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink-soft);
  padding: 7px 0 6px;
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 1px;
  font-size: calc(12px * var(--font-scale));
  font-weight: 650;
}

.beauty-pages small {
  font-size: 8px;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.beauty-pages button.on {
  background: color-mix(in srgb, white 72%, transparent);
  color: var(--ink);
}

.beauty-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.beauty-pane[hidden] {
  display: none !important;
}

.beauty-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.beauty-modes button {
  border: 1px solid color-mix(in srgb, white 48%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, white 30%, transparent);
  color: var(--ink);
  min-height: 64px;
  cursor: pointer;
  font-size: calc(14px * var(--font-scale));
  font-weight: 650;
}

.beauty-modes button.on {
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  color: #fff8f6;
  border-color: transparent;
}

.beauty-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.beauty-target {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  border: 1px solid color-mix(in srgb, white 46%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, white 34%, transparent);
  color: var(--ink);
  padding: 10px;
  cursor: pointer;
}

.beauty-target > span {
  display: grid;
  min-width: 0;
}

.beauty-target.on {
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.beauty-target i {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 40%, transparent);
}

.beauty-target i.is-clear {
  background:
    linear-gradient(135deg, var(--ink) 0 50%, color-mix(in srgb, var(--surface) 80%, white) 50% 100%);
}

.beauty-target b {
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
}

.beauty-target small {
  color: var(--ink-soft);
  font-size: calc(10px * var(--font-scale));
}

.beauty-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.beauty-follow,
.beauty-dot {
  border: 0;
  cursor: pointer;
}

.beauty-follow {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, white 40%, transparent);
  color: var(--ink);
  font-size: calc(11px * var(--font-scale));
}

.beauty-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 30%, transparent);
}

.beauty-picker {
  position: fixed;
  left: -40px;
  top: 0;
  width: 28px;
  height: 28px;
  opacity: 0;
}

.save-link {
  font-weight: 800;
  color: var(--strong);
}

.form.fold-list,
.fold-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.fold {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: visible;
}

.fold > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: calc(18px * var(--font-scale));
  color: var(--ink);
  user-select: none;
  border-radius: 18px;
}

.fold[open] > summary {
  border-radius: 18px 18px 0 0;
}

.fold > summary::-webkit-details-marker,
.fold > summary::marker {
  display: none;
  content: "";
}

.fold > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-soft);
  border-bottom: 1.5px solid var(--ink-soft);
  transform: rotate(45deg);
  opacity: 0.55;
  flex-shrink: 0;
  transition: transform 0.16s ease;
}

.fold[open] > summary::after {
  transform: rotate(225deg);
  margin-top: 4px;
}

.fold-body {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

.fold-body > .hint {
  margin: -4px 0 4px;
}

.fold-body.backup-layout {
  gap: 16px;
}

.backup-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}

.backup-card h3 {
  margin: 0;
  font-size: calc(16px * var(--font-scale));
  color: var(--strong);
}

.backup-card .backup-action {
  width: 100%;
  min-height: 52px;
  margin: 0;
  border-radius: 16px;
  font: inherit;
  font-weight: 700;
}

.backup-card .backup-restore {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  color: var(--strong);
}

.backup-help,
.backup-status,
.backup-notes {
  margin: 0;
  color: var(--muted);
  font-size: calc(12px * var(--font-scale));
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.backup-status {
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.backup-notes {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.backup-notes summary {
  color: var(--ink);
  cursor: pointer;
}

.backup-notes p {
  margin: 6px 0 0;
}

.spark-opts {
  display: grid;
  gap: 10px;
}

.spark-opts[hidden] {
  display: none !important;
}

.hint-fold {
  margin: -4px 0;
}

.hint-fold > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  cursor: pointer;
  color: var(--ink-soft);
  user-select: none;
}

.hint-fold > summary::-webkit-details-marker,
.hint-fold > summary::marker {
  display: none;
  content: "";
}

.hint-fold > summary svg {
  width: 16px;
  height: 16px;
  display: block;
}

.hint-fold[open] > summary {
  color: var(--ink);
}

.hint-fold:not([open]) > .hint {
  display: none;
}

.hint-fold > .hint {
  margin: 4px 0 0;
}
.api-switch-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.api-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.api-switch button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.api-switch button.on {
  background: var(--strong, #c45c5c);
  color: #fff;
  border-color: transparent;
  font-weight: 700;
}
.api-switch-acts {
  display: flex;
  gap: 6px;
  flex: none;
}
.api-switch-acts button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--strong);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.api-switch-acts svg {
  width: 16px;
  height: 16px;
  display: block;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(20px * var(--font-scale));
}

.inline-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.inline-row select,
.inline-row input {
  flex: 1;
}

.avatar-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  text-align: center;
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}

.avatar.lg {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  margin: 8px auto;
  display: block;
}

.mini-btn {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: calc(12px * var(--font-scale));
  cursor: pointer;
}

.mini-btn.danger {
  color: #9a3b45;
  border-color: #e4b4b8;
}

.check-list {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  background: var(--bg);
  border-radius: 12px;
  padding: 8px;
}

.check-list .list-head {
  margin: 8px 0 0;
}

.check-list .list-head:first-child {
  margin-top: 0;
}

.check-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(13px * var(--font-scale));
  color: var(--ink);
}

.check-list input {
  width: auto;
}

.mask-list {
  display: grid;
  gap: 8px;
}

.mask-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mask-card span {
  font-weight: 700;
}

.mask-card small {
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
}

.mask-editor {
  display: grid;
  gap: 8px;
}

.mask-editor[hidden] {
  display: none !important;
}

.mask-using {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--strong);
  color: #fff;
  font-style: normal;
  font-size: calc(10px * var(--font-scale));
  font-weight: 700;
  vertical-align: 1px;
}

.mask-bind {
  border-radius: 14px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}

.mask-bind summary {
  padding: 10px 12px;
  cursor: pointer;
  color: var(--ink);
  font-size: calc(13px * var(--font-scale));
}

.mask-bind summary::-webkit-details-marker {
  display: none;
}

.mask-bind .check-list {
  max-height: 168px;
  border-radius: 0 0 14px 14px;
  box-shadow: inset 0 1px 0 var(--line);
}

.mask-bind small {
  color: var(--ink-soft);
}

.mask-preview {
  margin: 0;
  font-size: calc(12px * var(--font-scale));
  line-height: 1.45;
  color: var(--ink-soft);
}

.date-chapter-pop .date-mask-preview {
  margin: 0 10px 6px;
  font-size: calc(11px * var(--font-scale));
  line-height: 1.45;
  color: #a1848e;
}

.btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-grid > .mini-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.2;
  text-align: center;
}

.btn-grid > .mini-btn input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.msg.hit .bubble {
  outline: 2px solid var(--strong);
  outline-offset: 2px;
}

.preview-chat {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preview-chat .bubble.user {
  align-self: flex-end;
}

.preview-chat .bubble.assistant {
  align-self: flex-start;
}

.meta-line {
  margin: 0;
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}

.chat-log {
  background-size: cover;
  background-position: center;
}

.date-ballet {
  --ballet-pink: #f5e3e8;
  --ballet-pink-light: #fffafb;
  --dusty-rose: #e5c5cb;
  --border-grey: #e6dde0;
  --ballet-text: #6e5c64;
  --font-ballet: "gkai00mp", "Cormorant Garamond", serif;
  --inn-font: var(--font-ballet);
  --inn-scale: 1;
  --frame: url("https://drive-cdn.mujian.me/19/Y4Y%E5%B0%8F%E6%89%8B%E6%9C%BA/91a363aa-f2e6-4129-936c-fd7c11c4f5cc_%E5%9B%BE%E7%89%87-1%20%2817%29%285%29.png");
  --ribbon-pink: url("https://drive-cdn.mujian.me/19/Y4Y%E5%B0%8F%E6%89%8B%E6%9C%BA/85036eca-1a71-4dd3-9912-9ffbcaf162e9_%E7%B2%89%E8%89%B2%E8%9D%B4%E8%9D%B6%E7%BB%93.png");
  --ribbon-gray: url("https://drive-cdn.mujian.me/19/Y4Y%E5%B0%8F%E6%89%8B%E6%9C%BA/9307c34d-3dc0-46ad-8bf4-f01ea286f9c6_%E5%9B%BE%E7%89%87-1%20%2817%29%281%29.png");
  --ico-menu: url("https://drive-cdn.mujian.me/19/Y4Y%E5%B0%8F%E6%89%8B%E6%9C%BA/967aedb3-7ba9-496f-9bd8-42277ce0aead_%E5%9B%BE%E7%89%87-1%20%2817%29%284%29.png");
  --ico-send: url("https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDcHto8JPKpVo5gCDNtmtCdfaU6Y4yeQAC7RwAAqpXgVdcGk8w2C7CsDYE.png");
  background: linear-gradient(180deg, #fff9fa 0%, #f5e3e8 100%);
  color: var(--ballet-text);
  font-family: var(--inn-font);
}

.date-pick-head {
  flex: none;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  padding: calc(var(--sat, 0px) + 12px) 16px 10px;
}

.date-play-head {
  position: relative;
  z-index: 5;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0;
  margin: calc(var(--sat, env(safe-area-inset-top, 0px)) + 8px) 16px 4px;
  padding: 2px 4px 2px 0;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.45);
  backdrop-filter: blur(16px) saturate(1.45);
  box-shadow:
    0 14px 34px rgba(110, 50, 70, 0.12),
    0 2px 8px rgba(110, 50, 70, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.date-play-head .icon-btn {
  width: 36px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  color: rgba(136, 19, 55, 0.72);
  line-height: 1;
}

.date-inn-nav {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.date-inn-nav button {
  position: relative;
  z-index: 0;
  flex: 1 1 0;
  display: grid;
  place-items: center;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(136, 19, 55, 0.5);
  line-height: 0;
  cursor: pointer;
}

.date-inn-nav button svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
}

.date-inn-nav button svg path {
  fill: currentColor;
}

.date-inn-nav button.on {
  color: #881337;
}

.date-inn-nav button.on svg {
  width: 26px;
  height: 26px;
}

.date-inn-nav button.on::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 2px;
  width: 16px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(236, 154, 170, 0.75);
  filter: blur(1.2px);
  pointer-events: none;
}

.date-inn-float {
  position: absolute;
  z-index: 12;
  left: 12px;
  right: 12px;
  top: calc(var(--sat, env(safe-area-inset-top, 0px)) + 56px);
  max-height: min(640px, 74%);
  overflow: auto;
  padding: 10px 8px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(181, 109, 130, 0.65) transparent;
  border-radius: 20px;
  background: rgba(255, 248, 246, 0.94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 16px 36px rgba(80, 40, 52, 0.14);
}

.date-inn-float[hidden] {
  display: none;
}

.date-inn-pane[hidden] {
  display: none;
}

.date-inn-float::-webkit-scrollbar {
  width: 4px;
  height: 0;
}

.date-inn-float::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.date-inn-float::-webkit-scrollbar-thumb {
  background: rgba(181, 109, 130, 0.65);
  border-radius: 99px;
}

.date-face-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 8px;
  overflow: visible;
  padding: 8px 4px 2px;
}

.date-face-btn {
  flex: none;
  width: 68px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8d6a74;
  font-family: inherit;
  display: grid;
  justify-items: center;
  gap: 4px;
  cursor: pointer;
}

.date-face-btn .date-play-frame {
  width: 56px;
}

.date-face-btn strong {
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(11px * var(--font-scale));
  font-weight: 500;
}

.date-face-btn.on strong {
  color: #6e3d4c;
}

.date-face-btn.on .date-play-frame {
  filter: drop-shadow(0 0 0.4px #6e3d4c);
}

.date-face-slot {
  flex: none;
  width: 68px;
  display: grid;
  justify-items: center;
  gap: 1px;
}

.date-face-slot .date-face-btn {
  width: 68px;
}

.date-face-edit {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8d3d52;
  font-family: inherit;
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.14em;
  line-height: 1.2;
  cursor: pointer;
}

.date-font-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
}

.date-font-row button {
  margin: 0;
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #8d6a74;
  box-shadow: inset 0 0 0 1px rgba(214, 168, 180, 0.6);
  font-size: calc(12px * var(--font-scale));
  cursor: pointer;
}

.date-font-row button.on {
  background: #8d3d52;
  color: #fff8f6;
  box-shadow: none;
}

#date-font-size {
  width: 100%;
  margin-top: 8px;
  accent-color: #8d3d52;
}

#date-font-size-label {
  font-style: normal;
  font-weight: 500;
  color: #b08996;
}

.date-chapter-pop .date-skin-field {
  align-items: stretch;
}

.date-skin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.date-skin-head .ghost-btn {
  flex: none;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: #8d3d52;
  font: inherit;
  font-size: calc(12px * var(--font-scale));
  cursor: pointer;
}

.date-skin-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.date-skin-list[hidden],
.date-skin-edit[hidden] {
  display: none;
}

.date-skin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(214, 168, 180, 0.45);
}

.date-skin-row strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(13px * var(--font-scale));
  font-weight: 500;
}

.date-skin-tools {
  display: flex;
  align-items: center;
  flex: none;
  gap: 8px;
}

.date-skin-row .date-regex-switch {
  position: relative;
  width: 36px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d5cfd2;
  cursor: pointer;
}

.date-skin-row .date-regex-switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(80, 40, 50, 0.25);
  transition: left 0.15s ease;
}

.date-skin-row .date-regex-switch.on {
  background: #ef4b5c;
}

.date-skin-row .date-regex-switch.on i {
  left: 18px;
}

.date-skin-row .date-regex-icon {
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6f656b;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.date-skin-row .date-regex-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.date-skin-edit {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.date-skin-edit label {
  display: grid;
  gap: 4px;
  color: #8d6a74;
  font-size: calc(12px * var(--font-scale));
}

.date-skin-edit input,
.date-skin-edit textarea {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(214, 168, 180, 0.55);
  color: #5c4650;
  font: inherit;
  font-size: calc(13px * var(--font-scale));
  padding: 8px 10px;
}

.date-skin-edit textarea {
  min-height: 180px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre;
}

.date-inn-line,
.date-inn-preset-bar button {
  font-family: inherit;
}

.date-inn-line {
  display: block;
  width: 100%;
  margin: 4px 0 0;
  padding: 8px 4px 2px;
  border: 0;
  background: transparent;
  color: #b08996;
  letter-spacing: 0.12em;
  font-size: calc(13px * var(--font-scale));
  cursor: pointer;
}

.date-inn-preset-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 8px;
}

.date-inn-preset-bar #date-preset-name {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6e3d4c;
  text-align: left;
  font-size: calc(14px * var(--font-scale));
  cursor: pointer;
}

.date-inn-preset-bar .ghost-btn {
  flex: none;
  padding: 4px 8px;
  font-size: calc(12px * var(--font-scale));
}

.date-inn-note {
  margin: 8px 4px 0;
  color: #a1848e;
  font-size: calc(12px * var(--font-scale));
  line-height: 1.45;
}

.date-regex-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.date-regex-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.date-regex-row strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(13px * var(--font-scale));
  font-weight: 500;
}

.date-regex-row button {
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8d6a74;
  font: inherit;
  font-size: calc(12px * var(--font-scale));
  cursor: pointer;
}

.date-regex-tools {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  flex: none;
}

.date-regex-row .date-regex-switch {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #d5cfd2;
}

.date-regex-row .date-regex-switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(80, 40, 50, 0.25);
  transition: left 0.15s ease;
}

.date-regex-row .date-regex-switch.on {
  background: #ef4b5c;
}

.date-regex-row .date-regex-switch.on i {
  left: 18px;
}

.date-regex-row .date-regex-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #6f656b;
}

.date-regex-row .date-regex-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.date-regex-edit {
  display: grid;
  gap: 10px;
}

.date-regex-edit[hidden],
#date-regex-home[hidden] {
  display: none;
}

.date-regex-edit label {
  display: grid;
  gap: 4px;
  color: #8d6a74;
  font-size: calc(12px * var(--font-scale));
}

.date-regex-edit input,
.date-regex-edit textarea {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #5c4650;
  font: inherit;
  font-size: calc(13px * var(--font-scale));
  padding: 8px 10px;
}

.date-regex-label {
  margin: 0;
  color: #8d6a74;
  font-size: calc(12px * var(--font-scale));
}

.date-regex-checks {
  display: flex;
  gap: 14px;
}

.date-regex-checks label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #5c4650;
  white-space: nowrap;
}

.date-regex-depth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.date-regex-acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.date-regex-acts button {
  border: 0;
  border-radius: 999px;
  background: #8d3d52;
  color: #fff8f6;
  font: inherit;
  font-size: calc(13px * var(--font-scale));
  padding: 8px 10px;
  cursor: pointer;
}

.date-regex-acts .ghost-btn {
  background: #fff;
  color: #8d6a74;
}

#date-regex-who {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #6e3d4c;
  font-size: calc(13px * var(--font-scale));
}

.date-inn-float .date-chapter-pop {
  position: static;
  width: auto;
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.date-stage-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 2px 12px 4px 18px;
}

.date-stage-face {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  padding: 0;
}

.date-stage-face h2 {
  margin: 0;
  flex: none;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(13px * var(--font-scale));
  font-weight: 500;
  line-height: 1.3;
}

.date-stage-face #date-play-sub {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(12px * var(--font-scale));
  color: #b08996;
}

.date-stage-face #date-play-sub:not([hidden])::before {
  content: "·";
  margin: 0 6px;
  color: #c4a0aa;
}

.date-pick-logo {
  display: block;
  justify-self: center;
  height: 68px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.date-play-head h2 {
  margin: 0;
  font-size: calc(10px * var(--font-scale));
  line-height: 1.25;
  font-weight: 500;
}

.date-pick-preset {
  justify-self: end;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b08996;
  font-size: calc(13px * var(--font-scale));
  font-weight: 500;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.date-pick-head .icon-btn {
  background: #fff8f6;
  box-shadow: 0 1px 0 rgba(176, 137, 150, 0.12);
}

.date-save-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 16px 8px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 248, 246, 0.9);
  color: #8d6a74;
  font-size: calc(13px * var(--font-scale));
  cursor: pointer;
}

.date-save-bar em {
  font-style: normal;
  letter-spacing: 0.14em;
  color: #b08996;
}

.date-mode-bar {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin: 0 16px 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 248, 246, 0.9);
}

.date-mode-side {
  border: 0;
  background: transparent;
  color: #8d6a74;
  font-size: calc(13px * var(--font-scale));
  padding: 4px 2px;
  text-align: left;
}

.date-mode-save {
  text-align: right;
  letter-spacing: 0.14em;
}

.date-modes {
  display: flex;
  gap: 4px;
}

.date-mode {
  border: 0;
  background: transparent;
  color: #b08996;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: calc(13px * var(--font-scale));
}

.date-mode.on {
  background: #fff;
  color: #8d3d52;
}

.world-card {
  position: relative;
}

.world-open {
  border: 0;
  background: transparent;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: inherit;
  font: inherit;
  padding: 0;
}

.world-edit {
  border: 0;
  background: transparent;
  color: #b08996;
  font-size: calc(12px * var(--font-scale));
  letter-spacing: 0.12em;
}

.world-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px 16px 28px;
}

.world-name,
.world-adv label {
  display: grid;
  gap: 6px;
  margin: 8px 0;
  font-size: calc(13px * var(--font-scale));
  color: #8d6a74;
}

.world-cover {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 12px;
}

.world-cover img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  background: #e7cfc8;
}

.world-cover-acts {
  display: flex;
  gap: 8px;
}

.cover-crop {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--sat, 0px) + 16px) 18px 24px;
  background: rgba(42, 24, 32, 0.46);
}

.cover-crop[hidden] {
  display: none;
}

.world-leave {
  position: absolute;
  inset: 0;
  z-index: 14;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(42, 24, 32, 0.46);
}

.world-leave[hidden] {
  display: none;
}

.world-leave-card {
  width: min(100%, 260px);
  padding: 18px 16px 14px;
  border-radius: 22px;
  background: #fff8f6;
  color: #6e5c64;
  text-align: center;
  box-shadow: 0 16px 36px rgba(90, 30, 50, 0.18);
}

.world-leave-card p {
  margin: 0 0 14px;
  font-size: calc(15px * var(--font-scale));
}

.world-leave-acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.world-leave-keep {
  background: #8d3d52;
  color: #fff8f6;
}

.cover-crop-card {
  width: min(100%, 300px);
  padding: 16px 16px 14px;
  border-radius: 22px;
  background: #fffafb;
  color: #6e5c64;
  text-align: center;
}

.cover-crop-card p {
  margin: 0;
  font-size: calc(14px * var(--font-scale));
}

.cover-crop-stage {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 14px auto 12px;
  border-radius: 50%;
  overflow: hidden;
  background: #e7cfc8;
  touch-action: none;
  cursor: grab;
  box-shadow:
    0 0 0 6px #fff,
    0 0 0 7px #e5c5cb;
}

.cover-crop-stage img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.cover-crop-zoom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 4px 14px;
  font-size: calc(13px * var(--font-scale));
  color: #8d6a74;
}

.cover-crop-zoom input {
  flex: 1;
  accent-color: #8d3d52;
}

.cover-crop-acts {
  display: flex;
  justify-content: center;
  gap: 8px;
}

#cover-crop-ok {
  border: 0;
  background: #8d3d52;
  color: #fffafb;
}

.world-tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

.world-tabs button {
  flex: 1;
  border: 0;
  border-radius: 999px;
  padding: 8px 0;
  background: rgba(255, 248, 246, 0.7);
  color: #b08996;
}

.world-tabs button.on {
  background: #fff;
  color: #8d3d52;
}

.world-entry {
  margin: 10px 0;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 248, 246, 0.92);
}

.world-entry-h {
  display: flex;
  align-items: center;
  gap: 8px;
}

.world-entry-h input[data-went-name] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: calc(15px * var(--font-scale));
}

.world-entry-h [data-went-tokens] {
  flex: none;
  font-size: calc(12px * var(--font-scale));
  color: #b08996;
}

.world-entry-h [data-went-del] {
  border: 0;
  background: transparent;
  color: #b08996;
  padding: 0 2px;
}

.world-entry textarea {
  min-height: 88px;
  margin-top: 8px;
}

.world-adv {
  margin-top: 8px;
}

.world-adv summary {
  cursor: pointer;
  color: #8d6a74;
  font-size: calc(13px * var(--font-scale));
}

.world-adv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.world-add,
.world-delete {
  width: 100%;
  margin-top: 8px;
}

.world-delete {
  color: #a45b68;
}

.date-save-modes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.save-row {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.save-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.save-row-main b {
  flex: none;
}

.save-row-main span {
  font-size: calc(11px * var(--font-scale));
  line-height: 1.4;
  color: #9a7d84;
}

.save-row-main .save-hearts {
  white-space: pre-line;
  word-break: keep-all;
}

.save-row-acts {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

.date-preset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.groups-row.on {
  outline: 1px solid rgba(214, 168, 176, 0.8);
}

.date-pick-grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 8px;
  padding: 8px 10px 24px;
  align-content: start;
}

.date-pick-card {
  border: 0;
  background: transparent;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--ballet-text);
  overflow: visible;
}

.date-pick-frame,
.date-play-frame,
.date-avatar {
  position: relative;
  display: block;
  overflow: visible;
  aspect-ratio: 735 / 803;
}

.date-pick-frame {
  width: 150px;
  height: auto;
}

.date-pick-frame img,
.date-play-frame img,
.date-avatar img {
  position: absolute;
  left: 4.2%;
  top: 11.8%;
  width: 78%;
  height: 71.5%;
  object-fit: cover;
  border-radius: 50%;
}

.date-pick-frame::after,
.date-play-frame::after,
.date-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--frame);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
}

.date-pick-card strong {
  font-size: calc(14px * var(--font-scale));
  font-weight: 500;
}

.date-pick-card em {
  font-size: calc(11px * var(--font-scale));
  font-style: italic;
  color: #b08996;
}

.date-play-who {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-play-frame {
  width: 52px;
  height: auto;
  flex: none;
}

#date-play-sub {
  margin: 0;
  font-size: calc(8px * var(--font-scale));
  line-height: 1.2;
  color: #b08996;
}

.date-play-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.date-play-tool[hidden] {
  display: none;
}

.date-play-tool {
  margin: 0;
  padding: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #b08996;
  cursor: pointer;
}
.date-play-tool svg {
  width: 18px;
  height: 18px;
  display: block;
}

.date-play-tool[aria-expanded="true"] {
  color: #6e5c64;
}

.date-chapter-pop {
  position: absolute;
  top: calc(100% - 4px);
  right: 8px;
  width: min(292px, calc(100% - 16px));
  max-height: min(520px, 70vh);
  overflow: auto;
  padding: 4px 4px 8px;
  border-radius: 22px;
  background: rgba(255, 250, 248, 0.98);
  border: 1px solid rgba(214, 168, 180, 0.38);
  box-shadow: 0 16px 40px rgba(80, 40, 52, 0.16);
  color: #5c4650;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.date-chapter-pop[hidden] {
  display: none;
}

.date-chapter-pop .date-menu-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin: 0;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(214, 168, 180, 0.22);
  font-size: calc(13px * var(--font-scale));
  color: #5c4650;
}

.date-chapter-pop .date-menu-field > span {
  font-weight: 600;
}

.date-chapter-pop .date-menu-field small,
.date-chapter-pop .date-menu-label small,
.date-chapter-pop .date-menu-line small {
  display: block;
  font-size: calc(11px * var(--font-scale));
  line-height: 1.4;
  font-weight: 400;
  color: #a1848e;
}

.date-chapter-pop .date-menu-field small {
  flex: 1;
  display: inline;
}

.date-chapter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}

.date-chapter-pop .date-chapter-row select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin-top: 0;
}

.date-chapter-del {
  flex: none;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(214, 168, 180, 0.55);
  color: #c47d90;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.date-chapter-del svg {
  width: 16px;
  height: 16px;
}

.date-chapter-del:disabled {
  opacity: 0.35;
  cursor: default;
}

.date-chapter-pop select {
  flex: 1 0 100%;
  width: 100%;
  margin-top: 6px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(214, 168, 180, 0.55);
  color: #5c4650;
  font: inherit;
  font-size: calc(13px * var(--font-scale));
  padding: 8px 10px;
}

.date-chapter-pop .date-menu-line {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid rgba(214, 168, 180, 0.22);
  border-radius: 0;
  background: transparent;
  color: #5c4650;
  font: inherit;
  font-size: calc(13px * var(--font-scale));
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.date-chapter-pop .date-menu-line > span {
  flex: 1;
  min-width: 0;
}

.date-chapter-pop .date-menu-line:hover {
  background: rgba(255, 255, 255, 0.8);
}

.date-chapter-pop .date-menu-sec {
  margin: 2px 10px 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(214, 168, 180, 0.35);
}

.date-chapter-pop .date-menu-label {
  margin: 8px 0 6px;
  font-size: calc(13px * var(--font-scale));
  font-weight: 600;
  color: #5c4650;
}

.date-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.date-chapter-pop .date-chip {
  position: relative;
  display: inline-flex;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.date-chapter-pop .date-chip span {
  display: block;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(214, 168, 180, 0.7);
  color: #8d6a74;
  font-size: calc(13px * var(--font-scale));
  font-weight: 500;
}

.date-chapter-pop .date-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.date-chapter-pop .date-chip:has(input:checked) span {
  background: #d9899b;
  box-shadow: none;
  color: #fff;
}

.date-chip-empty {
  margin: 0;
  padding: 4px 4px 8px;
  font-size: calc(12px * var(--font-scale));
  line-height: 1.4;
  color: #a1848e;
}

.date-fold {
  border-bottom: 1px solid rgba(214, 168, 180, 0.22);
}

.date-fold summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  font-size: calc(13px * var(--font-scale));
  font-weight: 600;
  color: #5c4650;
}

.date-fold summary::-webkit-details-marker {
  display: none;
}

.date-fold summary em {
  margin-left: auto;
  max-width: 52%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-weight: 400;
  font-size: calc(12px * var(--font-scale));
  color: #a1848e;
}

.date-fold summary::after {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-right: 1.5px solid #c4a8b0;
  border-bottom: 1.5px solid #c4a8b0;
  transform: rotate(45deg) translateY(-2px);
}

.date-fold[open] summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.date-fold-list {
  display: grid;
  gap: 1px;
  max-height: 148px;
  overflow: auto;
  margin: 0 8px 8px;
  padding: 4px;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(214, 168, 180, 0.4);
}

.date-fold-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 8px;
  border-radius: 10px;
  font-size: calc(13px * var(--font-scale));
  font-weight: 500;
  color: #5c4650;
}

.date-fold-list input {
  width: 15px;
  height: 15px;
  margin: 0;
  flex: none;
  accent-color: #c47d90;
}

.date-chapter-pop .date-remember {
  position: relative;
}

.date-chapter-pop .date-remember[hidden] {
  display: none;
}

.date-chapter-pop .date-remember input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
}

.date-chapter-pop .date-remember i {
  flex: none;
  width: 42px;
  height: 26px;
  border-radius: 999px;
  background: #ead8de;
  position: relative;
}

.date-chapter-pop .date-remember i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(90, 50, 60, 0.18);
  transition: transform 0.15s ease;
}

.date-chapter-pop .date-remember:has(input:checked) i {
  background: #d9899b;
}

.date-chapter-pop .date-remember:has(input:checked) i::after {
  transform: translateX(16px);
}

.date-summary-body {
  margin: 0 8px 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(214, 168, 180, 0.4);
  overflow: hidden;
}

.date-summary-body .date-menu-field,
.date-summary-body .date-menu-line {
  border-bottom: 1px solid rgba(214, 168, 180, 0.18);
  background: transparent;
}

.date-summary-body .date-memory-box {
  margin: 0;
  padding: 8px 8px 10px;
}

.date-summary-body .date-memory-log {
  max-height: 148px;
}

.date-summary-body:not(.is-auto) .date-summary-every {
  opacity: 0.45;
}

.date-chapter-pop .date-menu-line:disabled {
  opacity: 0.55;
  cursor: default;
}

.date-round-count {
  margin: 0;
  padding: 8px 12px 0;
  font-size: calc(12px * var(--font-scale));
  line-height: 1.4;
  color: #a1848e;
}

.date-round-range {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 4px;
  font-size: calc(13px * var(--font-scale));
  font-weight: 600;
  color: #5c4650;
}

.date-round-range[hidden] {
  display: none;
}

.date-chapter-pop .date-round-range select {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  margin-top: 0;
  padding: 6px 8px;
}

.date-memory-box .date-memory-log b span {
  min-width: 0;
}

.date-memory-box .date-memory-log button {
  border: 0;
  background: transparent;
  color: #c47d90;
  font: inherit;
  font-size: calc(12px * var(--font-scale));
  font-weight: 500;
  padding: 0;
  cursor: pointer;
}

.date-chapter-pop .date-summary-every {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 10px;
}

.date-chapter-pop .date-summary-every > span {
  grid-column: 1;
}

.date-chapter-pop .date-summary-every input {
  grid-column: 2;
  width: 64px;
  margin: 0;
  border: 1px solid rgba(214, 168, 180, 0.7);
  border-radius: 10px;
  background: #fff;
  color: #5c4650;
  font: inherit;
  padding: 4px 8px;
}

.date-chapter-pop .date-summary-every small {
  grid-column: 1 / -1;
  display: block;
  flex: none;
  margin-top: 4px;
}

.date-memory-box {
  margin: 0 8px 8px;
}

.date-memory-box .date-menu-label {
  margin: 0 0 6px;
}

.date-memory-box .date-menu-label small {
  display: inline;
  margin-left: 6px;
  font-weight: 400;
}

.date-memory-box .date-menu-hint,
.date-memory-empty {
  margin: 6px 0 0;
  font-size: calc(12px * var(--font-scale));
  line-height: 1.45;
  color: #8d6a74;
}

.date-memory-box .date-memory-log {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 220px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.date-memory-box .date-memory-log li {
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(214, 168, 180, 0.45);
  font-size: calc(12px * var(--font-scale));
  line-height: 1.45;
  color: #8d6a74;
}

.date-memory-box .date-memory-log b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
  color: #8d3d52;
  font-weight: 600;
}

.date-menu-hint {
  margin: 0 10px 4px;
  font-size: calc(12px * var(--font-scale));
  line-height: 1.45;
  color: #8d6a74;
}

.date-menu-hint:empty {
  display: none;
}

.date-chapter-io {
  display: flex;
  gap: 8px;
  padding: 4px 8px 8px;
  border-top: 1px solid rgba(214, 168, 180, 0.35);
}

.date-chapter-pop .date-chapter-io button {
  flex: 1;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(214, 168, 180, 0.55);
  color: #8d6a74;
  font: inherit;
  font-size: calc(12px * var(--font-scale));
  padding: 7px 8px;
  cursor: pointer;
}

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

.date-log {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px 10px 18px;
}

.date-empty {
  text-align: center;
  color: #9a7d86;
  font-size: calc(13px * var(--font-scale));
  padding: 36px 16px;
}

.date-mes {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 28px;
}

.date-mes-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.date-avatar {
  width: 96px;
  height: auto;
}

.date-name {
  margin: 2px 0 0;
  font-size: calc(15px * var(--font-scale) * var(--inn-scale));
  font-weight: 600;
}

.date-time {
  margin: 0;
  font-size: calc(11px * var(--font-scale));
  opacity: 0.7;
}

.date-block {
  position: relative;
  width: 92%;
  margin: 10px 0 8px;
  padding: 18px 16px 26px;
  min-height: 88px;
  background: linear-gradient(180deg, #fff9fa, #fff);
  border: 1px solid rgba(229, 197, 203, 0.65);
  border-radius: 20px;
  box-shadow: 0 6px 14px rgba(230, 200, 205, 0.25);
  overflow: visible;
}

.date-block::before,
.date-block::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 2;
}

.date-block::before {
  width: 54px;
  height: 54px;
  top: -14px;
  background-image: var(--ribbon-pink);
}

.date-block::after {
  width: 48px;
  height: 48px;
  bottom: -22px;
  background-image: var(--ribbon-gray);
}

.date-mes[data-user="false"] .date-block::before {
  left: -18px;
  transform: rotate(5deg);
}

.date-mes[data-user="false"] .date-block::after {
  right: -16px;
  transform: rotate(1deg);
}

.date-mes[data-user="true"] .date-block::before {
  right: -18px;
  left: auto;
  transform: rotate(5deg) scaleX(-1);
}

.date-mes[data-user="true"] .date-block::after {
  left: -16px;
  right: auto;
  transform: rotate(-1deg);
}

.date-mes-html {
  margin: 0;
  width: 100%;
}

.date-ballet .date-mes.date-mes-html .date-mes-meta {
  display: none !important;
}

.date-log:has(.date-mes-html) {
  padding: 0 4px 8px;
}

.date-log:has(> .date-mes.date-mes-html:only-child) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.date-log:has(> .date-mes.date-mes-html:only-child) > .date-mes-html {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.date-log:has(> .date-mes.date-mes-html:only-child) .date-block {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.date-mes-html .date-block {
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.date-mes-html .date-block::before,
.date-mes-html .date-block::after {
  display: none;
}

.date-html-frame {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
  border-radius: 16px;
  background: #f4f1ea;
  overflow: auto;
}

.date-log:has(> .date-mes.date-mes-html:only-child) .date-html-frame {
  flex: 1 1 auto;
  height: 100% !important;
  min-height: 0;
  border-radius: 0;
  overflow: auto !important;
}

.date-mes:not(.date-mes-html) .date-html-frame {
  width: 100%;
  margin: 12px 0;
  background: transparent;
  border-radius: 12px;
}

.date-text {
  position: relative;
  z-index: 1;
  font-size: calc(14px * var(--font-scale) * var(--inn-scale));
  line-height: 1.9;
  text-align: justify;
  word-break: break-word;
}

.date-text p {
  margin: 0 0 0.9em;
}

.date-text p:last-child {
  margin-bottom: 0;
}

.date-text .date-quote {
  display: block;
  margin: 0.7em 0;
  padding: 0.12em 0 0.12em 0.75em;
  border-left: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
  text-align: left;
  line-height: 1.75;
}

.date-text strong {
  font-weight: 700;
  -webkit-text-stroke: 0.28px currentColor;
}

.date-text p.date-quote {
  margin: 0.7em 0;
}

.date-text p.date-quote:last-child {
  margin-bottom: 0;
}

.date-mes-menu {
  position: absolute;
  left: 8px;
  bottom: 6px;
  z-index: 4;
  width: 22px;
  min-width: 22px;
  height: 16px;
  padding: 0;
  border: 1px solid rgba(214, 168, 176, 0.75);
  border-radius: 999px;
  background: rgba(255, 246, 247, 0.95);
  color: #c4a0a8;
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0;
  line-height: 14px;
  cursor: pointer;
}

.date-mes[data-user="true"] .date-mes-menu {
  left: auto;
  right: 10px;
}

.date-form {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 10px 8px;
  background: #fff8f9;
  border: 1px solid var(--dusty-rose);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.date-form-ico {
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  background-color: transparent;
  background-image: var(--ico-menu);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.date-form-send {
  width: 42px;
  height: 42px;
  background-image: var(--ico-send);
}

.date-form-send.wait {
  opacity: 0.45;
}

button.date-form-send.stop {
  opacity: 1;
  background-image: none;
  display: grid;
  place-items: center;
}

button.date-form-send.stop::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: #6d4a52;
}

.date-field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.date-field textarea {
  display: block;
  width: 100%;
  min-height: 34px;
  max-height: 140px;
  resize: none;
  border: 1px solid var(--border-grey);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ballet-text);
  font: inherit;
  font-size: calc(14px * var(--font-scale) * var(--inn-scale));
  box-shadow: inset 0 1px 3px rgba(230, 200, 205, 0.15);
}

.date-field:has(textarea:placeholder-shown)::before {
  content: "⋅ ˚₊ 𓏵‧𐙚𝐵𝑎𝑙𝑙𝑒𝑡 ‧₊˚ ⋅";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #a0a0a3;
  font-size: calc(11px * var(--font-scale));
  font-style: oblique;
  pointer-events: none;
  white-space: nowrap;
}

.date-preset-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px 14px 20px;
}

.date-entry-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.date-fold {
  margin: 0;
}

.date-fold-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(230, 200, 205, 0.55);
  border-radius: 14px;
  background: #fff7f8;
  text-align: left;
  color: inherit;
}

.date-fold.open .date-fold-head {
  border-radius: 14px 14px 0 0;
}

.date-fold-caret {
  color: #c4a0a8;
  width: 1em;
}

.date-fold-title {
  flex: 1;
  font-size: calc(13px * var(--font-scale));
  font-weight: 600;
}

.date-fold-meta {
  font-size: calc(11px * var(--font-scale));
  color: #b08996;
}

.date-fold-hint {
  display: none;
  margin: 0;
  padding: 0 12px 8px;
  font-size: calc(11px * var(--font-scale));
  color: #b08996;
  background: #fff7f8;
  border-left: 1px solid rgba(230, 200, 205, 0.55);
  border-right: 1px solid rgba(230, 200, 205, 0.55);
}

.date-fold.open .date-fold-hint {
  display: block;
}

.date-fold-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 2px;
}

.date-fold-body[hidden] {
  display: none;
}

.date-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fffdfd;
  border: 1px solid rgba(230, 200, 205, 0.5);
}

.date-entry.secret {
  outline: 1px dashed rgba(214, 168, 176, 0.7);
}

.date-entry.secret .date-entry-name::after {
  content: "隐";
  margin-left: 6px;
  font-size: calc(10px * var(--font-scale));
  color: #c4a0a8;
}

.date-entry-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(13px * var(--font-scale));
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
}

.date-act-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px !important;
}

.date-act-card button {
  border: 1px solid rgba(229, 197, 203, 0.7);
  background: #fffdfd;
  color: #6e5c64;
  border-radius: 12px;
  padding: 10px 12px;
}

.date-act-card button.danger {
  background: #f8e8ea;
  color: #a45d6a;
}

#date-edit-text,
#date-entry-text {
  width: 100%;
  min-height: 160px;
  resize: vertical;
}

.date-entry-del {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: none;
  border: 0;
  background: transparent;
  color: #8d6d76;
  padding: 0;
}

.date-entry-del svg {
  width: 16px;
  height: 16px;
  display: block;
}

.date-switch {
  position: relative;
  width: 40px;
  height: 22px;
  flex: none;
  display: block;
}

.date-switch input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.date-switch i {
  display: block;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #d4c4c8;
  pointer-events: none;
  transition: background 0.18s ease;
}

.date-switch i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fbf6f6;
  box-shadow: 0 1px 2px rgba(50, 28, 34, 0.22);
  transition: left 0.18s ease;
}

.date-switch input:checked + i {
  background: #4e3a40;
}

.date-switch input:checked + i::after {
  left: 20px;
}

.date-switch input:focus-visible + i {
  outline: 2px solid #c4a0a8;
  outline-offset: 2px;
}

.weibo-tabs {
  display: flex;
  gap: 2px;
  margin: 2px 18px 14px;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.weibo-tabs button {
  flex: 1;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 7px 0;
  font-size: calc(14px * var(--font-scale));
  font-weight: 500;
  color: var(--ink-soft);
  box-shadow: none;
}
.weibo-tabs button.on {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-weight: 650;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(80, 40, 50, 0.08);
}
.weibo-feed,
.weibo-hot {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 12px 8px;
}
.weibo-hot {
  display: flex;
  flex-direction: column;
}
.weibo-hot[hidden] {
  display: none !important;
}
.wb-empty {
  text-align: center;
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
  padding: 36px 16px;
}
.wb-void {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 24px 32px 56px;
}
.wb-void svg {
  width: 108px;
  height: auto;
  margin-bottom: 14px;
  color: color-mix(in srgb, var(--strong) 48%, var(--ink));
}
.wb-void b {
  color: var(--ink);
  font-size: calc(18px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 0.06em;
}
.wb-void p {
  margin: 4px 0 0;
  max-width: 16em;
  color: #b3a8ab;
  font-size: calc(13px * var(--font-scale));
  line-height: 1.7;
}
.wb-post {
  display: flex;
  gap: 10px;
  margin: 4px 0 10px;
  padding: 14px 12px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--strong) 22%, transparent);
}
.wb-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface);
}
.wb-main {
  flex: 1;
  min-width: 0;
}
.wb-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.wb-head .wb-meta {
  flex: 1;
  min-width: 0;
  margin: 0 0 4px;
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}
.wb-del {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
  padding: 0;
  cursor: pointer;
}
.wb-del:active {
  color: var(--strong);
}
.wb-meta b {
  color: var(--ink);
  font-size: calc(13px * var(--font-scale));
  margin-right: 4px;
}
.wb-tag {
  display: inline-block;
  margin-left: 6px;
  font-style: normal;
  font-size: calc(10px * var(--font-scale));
  padding: 1px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--strong, #c45c5c) 16%, white);
  color: var(--strong, #c45c5c);
}
.wb-text {
  margin: 0;
  font-size: calc(14px * var(--font-scale));
  line-height: 1.75;
  white-space: pre-wrap;
}
.wb-topic {
  margin: 8px 0 0;
  font-size: calc(13px * var(--font-scale));
  font-weight: 600;
  color: color-mix(in srgb, var(--strong) 28%, var(--ink));
}
.wb-topic:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wb-acts {
  display: flex;
  gap: 18px;
  margin-top: 10px;
}
.wb-acts .wb-ico {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  padding: 0;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
  font-size: calc(12px * var(--font-scale));
  cursor: pointer;
  transition: color 0.15s ease;
}
.wb-acts .wb-ico svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.wb-acts .wb-ico circle {
  fill: currentColor;
}
.wb-acts .wb-ico:hover,
.wb-acts .wb-ico.on {
  color: var(--strong);
}
.wb-acts .wb-ico.on path {
  fill: color-mix(in srgb, var(--strong) 28%, transparent);
}
.wb-thread {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
}
.wb-cmt {
  position: relative;
  display: flex;
  gap: 8px;
  margin: 6px 0;
  padding-right: 18px;
}
.wb-cmt > div {
  flex: 1;
  min-width: 0;
}
.wb-cmt img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}
.wb-cmt b {
  display: block;
  color: var(--ink);
  font-size: calc(12px * var(--font-scale));
  font-weight: 650;
}
.wb-cmt p {
  margin: 2px 0 0;
  color: #4b5563;
  font-size: calc(11px * var(--font-scale));
  line-height: 1.6;
}
.wb-cmt-del {
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.wb-cmt-del svg {
  width: 13px;
  height: 13px;
}
.wb-cmt:hover .wb-cmt-del,
.wb-cmt:focus-within .wb-cmt-del {
  opacity: 0.7;
}
@media (hover: none) {
  .wb-cmt-del {
    opacity: 0.45;
  }
}
.wb-hot-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 12px 6px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.wb-hot-row em {
  font-style: normal;
  width: 22px;
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
}
.wb-hot-row:nth-child(-n+3) em {
  color: #c45c5c;
  font-weight: 800;
}
.wb-hot-row span {
  flex: 1;
}
.wb-hot-row i {
  font-style: normal;
  font-size: calc(10px * var(--font-scale));
  color: #fff;
  background: #c45c5c;
  border-radius: 4px;
  padding: 1px 5px;
}
.weibo-bar {
  display: block;
  padding: 6px 12px 14px;
  border-top: 0;
  background: transparent;
}
.weibo-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 6px 6px 8px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid color-mix(in srgb, white 72%, var(--line));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--strong) 14%, transparent);
}
#weibo-mask-pick {
  flex: none;
  align-self: center;
  width: auto;
  max-width: 34%;
  min-width: 0;
  border: 0;
  background: color-mix(in srgb, var(--strong) 12%, white);
  color: #4e3a40;
  border-radius: 999px;
  padding: 6px 8px;
  font-size: calc(12px * var(--font-scale));
}
.weibo-reply-cancel {
  flex: none;
  align-self: center;
  border: 0;
  background: transparent;
  color: #a45d6a;
  padding: 0;
  font-size: calc(12px * var(--font-scale));
}
.weibo-compose textarea {
  flex: 1;
  min-height: 36px;
  max-height: 88px;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 6px 2px;
  resize: none;
  overflow: hidden;
  scrollbar-width: none;
}
.weibo-compose textarea::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
#weibo-send {
  flex: none;
  border: 0;
  background: var(--strong, #c45c5c);
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: calc(13px * var(--font-scale));
  cursor: pointer;
}
#weibo-refresh.busy,
#peek-refresh.busy {
  opacity: 0.5;
}

.peek-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}
.screen.peek-screen > .nav-header {
  position: relative;
  z-index: 4;
  background: rgba(255, 246, 243, 0.46);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  border-bottom-color: rgba(255, 255, 255, 0.35);
}
.screen.peek-screen.peek-home > .nav-header h2 {
  display: none;
}
.screen.peek-screen.peek-home .peek-tools {
  margin-left: auto;
}
.screen.peek-screen > .nav-header .icon-btn {
  background: rgba(255, 255, 255, 0.9);
  color: #3a292c;
  box-shadow: 0 1px 2px rgba(50, 24, 28, 0.14);
}
.screen.peek-screen > .nav-header .peek-tools svg {
  stroke: #3a292c;
}
.phone:has(.screen.peek-screen.active) .status-bar {
  color: #2e2224;
}

.peek-tools .icon-btn {
  display: grid;
  place-items: center;
  color: var(--ink);
  padding: 0;
}

.peek-tools svg {
  width: 18px;
  height: 18px;
}

#peek-refresh.busy svg {
  animation: peek-spin 0.8s linear infinite;
}

@keyframes peek-spin {
  to { transform: rotate(360deg); }
}

.peek-old {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 14px 8px;
  padding: 8px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--strong) 12%, white);
  font-size: calc(13px * var(--font-scale));
}

.peek-old[hidden] {
  display: none;
}

.peek-old button {
  border: 0;
  background: transparent;
  color: var(--strong);
  font-weight: 700;
  cursor: pointer;
}

.peek-history {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: flex-end;
}

.peek-history[hidden] {
  display: none;
}

.peek-history-dim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(70, 24, 36, 0.28);
}

.peek-history-card {
  position: relative;
  width: calc(100% - 24px);
  max-height: 62%;
  overflow: auto;
  margin: 0 12px 18px;
  padding: 16px 14px 8px;
  border-radius: 22px;
  background: var(--bg);
  border: 1px solid var(--line);
}

.peek-history-card h3 {
  margin: 0 0 8px;
  font-size: calc(16px * var(--font-scale));
}

.peek-hist {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 12px 2px;
  color: var(--ink);
  cursor: pointer;
}

.peek-hist.on {
  color: var(--strong);
  font-weight: 700;
}

.peek-who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 14px 8px;
  padding: 10px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 248, 244, 0.72), rgba(236, 214, 208, 0.45));
  border: 1px solid var(--line);
}
.peek-who img {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  object-fit: cover;
  flex: none;
}
.peek-who .meta {
  min-width: 0;
  flex: 1;
}
.peek-who h3,
.peek-who p {
  margin: 0;
}
.peek-who h3 {
  font-size: calc(14px * var(--font-scale));
  font-weight: 800;
}
.peek-who p {
  font-size: calc(11px * var(--font-scale));
  color: var(--ink-soft);
  margin-top: 2px;
}
.screen[data-screen="peek-pick"] {
  background:
    radial-gradient(80% 48% at 50% 42%, rgba(255, 236, 214, 0.09), transparent 62%),
    #0c0b10;
  color: #f4efe6;
}
.phone:has(.screen[data-screen="peek-pick"].active) .status-bar {
  color: #f4efe6;
}
.screen[data-screen="peek-pick"] > .nav-header {
  background: linear-gradient(180deg, rgba(12, 11, 16, 0.35), rgba(12, 11, 16, 0));
  border-bottom: 0;
  color: #f4efe6;
}
.screen[data-screen="peek-pick"] > .nav-header h2 {
  color: #f4efe6;
  font-weight: 500;
  letter-spacing: 0.22em;
}
.screen[data-screen="peek-pick"] > .nav-header .icon-btn {
  background: rgba(244, 239, 230, 0.08);
  color: #f4efe6;
  border: 1px solid rgba(244, 239, 230, 0.22);
  border-radius: 50%;
}
.peek-field {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.peek-credit {
  margin: 0;
  padding: 2px 16px 16px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(244, 239, 230, 0.46);
  pointer-events: none;
}
.peek-field .empty {
  position: relative;
  z-index: 2;
  color: rgba(244, 239, 230, 0.72);
}
.peek-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  perspective: 900px;
  perspective-origin: 50% 46%;
}
.peek-arm {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 1;
  width: var(--d);
  aspect-ratio: 1;
  margin-left: calc(var(--d) * -0.5);
  margin-top: calc(var(--d) * -0.5);
  border-radius: 50%;
  border: 1px solid rgba(236, 228, 210, var(--op));
  box-shadow: 0 0 0 0.5px rgba(236, 228, 210, calc(var(--op) * 0.35));
  animation: peek-arm var(--dur) linear infinite;
  will-change: transform;
}
.peek-core {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 2;
  width: min(50%, 200px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.peek-core::before {
  content: "";
  position: absolute;
  inset: -32%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 224, 0.28) 0%, transparent 64%);
}
.peek-core-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url("../assets/moon-center.webp") center / cover no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 236, 0.28),
    0 0 42px rgba(255, 236, 210, 0.22);
  animation: peek-spin 240s linear infinite;
}
.peek-core-mark {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  color: rgba(255, 248, 236, 0.62);
  pointer-events: none;
}
@keyframes peek-spin {
  to { transform: rotate(360deg); }
}
@keyframes peek-arm {
  from { transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); }
  to { transform: rotateX(calc(var(--rx) + 360deg)) rotateY(calc(var(--ry) + 180deg)) rotateZ(var(--rz)); }
}
@media (prefers-reduced-motion: reduce) {
  .peek-core-face,
  .peek-arm { animation: none; }
}
.peek-orb {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(244, 239, 230, 0.72);
  border-radius: 50%;
  background: #16141a;
  box-shadow: 0 0 0 1px rgba(244, 239, 230, 0.12), 0 14px 28px rgba(0, 0, 0, 0.38), 0 0 22px rgba(255, 232, 204, 0.08);
  color: #fff;
  font: inherit;
  cursor: pointer;
  will-change: transform;
}
.peek-orb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.peek-phase {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(5, 4, 9, 0.7);
  transform: translateX(calc(var(--x) * 1%));
  filter: blur(0.6px);
}
.peek-orb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 52%, rgba(255, 246, 230, 0.14) 80%, rgba(255, 250, 242, 0.3));
  mix-blend-mode: screen;
}
.peek-orb-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 34% 12% 16%;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 6, 8, 0.28) 28%, rgba(10, 6, 8, 0.82) 100%);
}
.peek-orb b,
.peek-orb small {
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.55);
}
.peek-orb b {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.15;
}
.peek-orb small {
  font-size: 0.72em;
  color: rgba(255, 255, 255, 0.92);
}
.peek-orb.is-locked img {
  filter: saturate(0.8);
}
.peek-orb.is-bump {
  animation: peek-orb-pop 0.42s ease;
}
@keyframes peek-orb-pop {
  0% { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.38), 0 0 22px rgba(255, 232, 204, 0.08); }
  40% { box-shadow: 0 0 0 6px rgba(244, 239, 230, 0.45), 0 16px 30px rgba(0, 0, 0, 0.4); }
  100% { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.38), 0 0 22px rgba(255, 232, 204, 0.08); }
}
.peek-orb-you {
  margin-top: 3px;
  border-radius: 999px;
  padding: 1px 7px;
  background: rgba(255, 255, 255, 0.92);
  color: #2a2224;
  font-size: 0.62em;
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
  text-shadow: none;
}
.peek-desk {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 8px;
  row-gap: 14px;
  padding: 4px 10px 28px;
  align-items: start;
}
.peek-desk .peek-w-weather {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 0;
}
.peek-desk .peek-w-weather > span {
  margin-top: auto;
}
.peek-desk .peek-w-cal {
  grid-column: 3 / span 2;
  grid-row: 3 / span 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 0;
}
.peek-desk .peek-w-cal .peek-w-week {
  width: 100%;
  margin-top: auto;
}
.peek-desk [data-peek-app="album"] { grid-column: 3; grid-row: 1; }
.peek-desk [data-peek-app="trace"] { grid-column: 4; grid-row: 1; }
.peek-desk [data-peek-app="clock"] { grid-column: 3; grid-row: 2; }
.peek-desk [data-peek-app="browser"] { grid-column: 4; grid-row: 2; }
.peek-desk [data-peek-app="chats"] { grid-column: 1; grid-row: 3; }
.peek-desk [data-peek-app="notes"] { grid-column: 2; grid-row: 3; }
.peek-desk [data-peek-app="secret"] { grid-column: 1; grid-row: 4; }
.peek-desk [data-peek-app="music"] { grid-column: 2; grid-row: 4; }
.peek-desk [data-peek-app="camera"] { grid-column: 1; grid-row: 5; }
.peek-desk [data-peek-app="map"] { grid-column: 2; grid-row: 5; }
.peek-desk [data-peek-app="health"] { grid-column: 3; grid-row: 5; }
.peek-desk [data-peek-app="settings"] { grid-column: 4; grid-row: 5; }
.peek-desk .app-icon {
  color: #f4f4f5;
  font: inherit;
  min-width: 0;
  align-content: start;
  justify-items: center;
}
.peek-desk .app-icon > span:not(.glass-ico) {
  white-space: nowrap;
  color: #f7f7f8;
  font-weight: 600;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 7px rgba(0, 0, 0, 0.72);
}
.peek-desk .glass-ico {
  color: #f5f5f6;
  background: linear-gradient(160deg, rgba(86, 86, 90, 0.78) 0%, rgba(18, 18, 20, 0.86) 100%);
  border: 1px solid rgba(255, 255, 255, 0.46);
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(14px) saturate(0.15);
  -webkit-backdrop-filter: blur(14px) saturate(0.15);
}
.peek-desk .glass-ico::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), transparent);
  opacity: 1;
}
.peek-w {
  border: 1px solid color-mix(in srgb, white 55%, var(--line));
  border-radius: 22px;
  min-height: 118px;
  padding: 12px 12px 10px;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  background: color-mix(in srgb, white 66%, transparent);
  box-shadow: 0 10px 22px rgba(80, 40, 40, 0.06);
  backdrop-filter: blur(16px);
}
.peek-w small,
.peek-w span {
  display: block;
  font-size: calc(11px * var(--font-scale));
  color: var(--ink-soft);
}
.peek-w b {
  display: block;
  margin: 2px 0 4px;
  font-size: calc(32px * var(--font-scale));
  line-height: 1;
  font-weight: 700;
}
.peek-w-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-top: 8px;
}
.peek-w-week span {
  text-align: center;
  font-size: calc(9px * var(--font-scale));
  color: var(--ink-soft);
}
.peek-w-week b {
  display: block;
  margin: 2px 0 0;
  font-size: calc(11px * var(--font-scale));
  font-weight: 600;
}
.peek-w-week .on b {
  width: 18px;
  height: 18px;
  margin: 2px auto 0;
  border-radius: 50%;
  background: #1c1c1e;
  color: #fff;
  line-height: 18px;
}
.peek-sky,
.peek-clock,
.peek-month,
.peek-deco,
.peek-set {
  padding: 8px 4px 18px;
}
.peek-sky small,
.peek-clock span,
.peek-deco-note {
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
}
.peek-sky b,
.peek-clock b {
  display: block;
  margin: 6px 0;
  font-size: calc(64px * var(--font-scale));
  line-height: 0.95;
  font-weight: 700;
}
.peek-hours {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 22px;
}
.peek-hours div {
  text-align: center;
  padding: 10px 0;
  border-radius: 16px;
  background: color-mix(in srgb, white 70%, transparent);
}
.peek-hours b,
.peek-hours span {
  display: block;
  font-size: calc(12px * var(--font-scale));
}
.peek-month h3 {
  margin: 0 0 12px;
  font-size: calc(18px * var(--font-scale));
}
.peek-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px 0;
  text-align: center;
}
.peek-month-grid i {
  font-style: normal;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
}
.peek-month-grid span {
  height: 32px;
  line-height: 32px;
  font-size: calc(14px * var(--font-scale));
}
.peek-month-grid span.on {
  width: 32px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--strong, #b56a76);
  color: #fff;
}
.peek-now {
  text-align: center;
  padding: 12px 0 18px;
}
.peek-disc {
  width: 132px;
  height: 132px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #f4e4df 0 18%, transparent 19% 28%, #2a2428 29% 100%);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.35);
}
.peek-now h3,
.peek-now p {
  margin: 0;
}
.peek-now p {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
}
.peek-track,
.peek-url {
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  font-size: calc(14px * var(--font-scale));
}
.peek-track.on {
  font-weight: 700;
}
.peek-finder {
  height: 220px;
  margin: 8px 0 12px;
  border-radius: 28px;
  background: #1c1918;
  display: grid;
  place-items: center;
}
.peek-finder span {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.8);
}
.peek-deco-note {
  text-align: center;
}
.peek-paper-view {
  height: 148px;
  border-radius: 22px;
  margin-bottom: 14px;
  background: color-mix(in srgb, var(--bg) 80%, white) center / cover no-repeat;
  border: 1px solid var(--line);
}
.peek-set label {
  display: block;
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}
.peek-set input {
  width: 100%;
  margin-top: 6px;
  box-sizing: border-box;
}
.peek-set-acts,
.peek-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.peek-set-acts button,
.peek-preset {
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: color-mix(in srgb, white 72%, var(--accent, #ead3cf));
  color: inherit;
  font: inherit;
  font-size: calc(12px * var(--font-scale));
  cursor: pointer;
}
.peek-preset.on {
  outline: 2px solid var(--strong, #b56a76);
}
.peek-tone-mist { background: linear-gradient(165deg, #f7d7d2, #e7b7c8 55%, #c9a4b4); }
.peek-tone-night { background: linear-gradient(165deg, #2a3144, #1b2233 60%, #121722); }
.peek-tone-sand { background: linear-gradient(165deg, #f3e2cf, #e4c7a4 55%, #c9a27a); }
.peek-tone-mint { background: linear-gradient(165deg, #d7ebe4, #b7d5cc 55%, #8fb8ab); }
.screen.peek-screen.peek-home.has-peek-paper {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.peek-home.has-peek-paper .peek-desk .app-icon > span:not(.glass-ico),
.peek-home.peek-tone-night .peek-desk .app-icon > span:not(.glass-ico) {
  color: #f7f7f8;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 7px rgba(0, 0, 0, 0.72);
}
.row.is-locked { opacity: 0.58; }
.peek-mine {
  margin-left: auto;
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.62);
  color: inherit;
  font: inherit;
  font-size: 12px;
}
.peek-batt {
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}
.peek-tabs {
  display: flex;
  gap: 2px;
  padding: 0 10px 6px;
  overflow-x: auto;
}
.peek-tabs button {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 8px 4px;
  font-size: calc(13px * var(--font-scale));
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.peek-tabs button.on {
  color: var(--ink);
  font-weight: 800;
  border-bottom-color: var(--strong, #c45c5c);
}
.peek-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 12px 18px;
}
.peek-empty {
  text-align: center;
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
  padding: 40px 16px;
  line-height: 1.6;
}
.peek-chat {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.peek-chat img {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  object-fit: cover;
  flex: none;
}
.peek-chat .meta {
  min-width: 0;
  flex: 1;
}
.peek-chat h3,
.peek-chat p {
  margin: 0;
}
.peek-chat h3 {
  font-size: calc(14px * var(--font-scale));
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.peek-chat h3 span {
  font-weight: 400;
  font-size: calc(11px * var(--font-scale));
  color: var(--ink-soft);
}
.peek-chat p {
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.peek-unread {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: #c45c5c;
  color: #fff;
  font-size: calc(10px * var(--font-scale));
  line-height: 18px;
  text-align: center;
  flex: none;
}
.peek-note,
.peek-secret,
.peek-trace,
.peek-cart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.peek-note h4,
.peek-secret h4,
.peek-trace h4,
.peek-cart h4 {
  margin: 0 0 6px;
  font-size: calc(13px * var(--font-scale));
}
.peek-note p,
.peek-secret p,
.peek-trace p {
  margin: 0;
  font-size: calc(13px * var(--font-scale));
  line-height: 1.55;
  white-space: pre-wrap;
}
.peek-note time,
.peek-secret time,
.peek-trace time,
.peek-cart time {
  display: block;
  margin-top: 6px;
  font-size: calc(11px * var(--font-scale));
  color: var(--ink-soft);
}
.peek-album {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.peek-shot {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  text-align: left;
  color: #fff8f4;
  font: inherit;
  cursor: pointer;
  box-shadow: inset 0 -48px 50px rgba(30, 16, 18, 0.38);
}
.peek-shot b {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: calc(13px * var(--font-scale));
  font-weight: 600;
  line-height: 1.35;
}
.peek-shot span {
  font-size: calc(11px * var(--font-scale));
  opacity: 0.85;
}
.peek-photo {
  flex: 1;
  overflow: auto;
  padding: 16px 14px 24px;
}
.peek-photo-card {
  min-height: 240px;
  border-radius: 22px;
  padding: 22px 18px;
  color: #fff8f4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  box-shadow: inset 0 -80px 70px rgba(30, 16, 18, 0.28);
}
.peek-photo-card p {
  margin: 0;
  font-size: calc(16px * var(--font-scale));
  line-height: 1.65;
  white-space: pre-wrap;
}
.peek-photo-card time {
  font-size: calc(12px * var(--font-scale));
  opacity: 0.86;
}
.peek-search {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px dashed var(--line);
  font-size: calc(13px * var(--font-scale));
}
.peek-search i {
  font-style: normal;
  color: var(--ink-soft);
}
.peek-thread {
  position: absolute;
  inset: 56px 0 0;
  background: var(--bg, #f7efe9);
  z-index: 4;
  display: flex;
  flex-direction: column;
}
.peek-thread[hidden] {
  display: none !important;
}
.peek-thread-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.peek-thread-head button {
  border: 0;
  background: transparent;
  font-size: calc(20px * var(--font-scale));
  cursor: pointer;
}
.peek-thread-head h3 {
  margin: 0;
  font-size: calc(15px * var(--font-scale));
}
.peek-thread-log {
  flex: 1;
  overflow: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.peek-bubble {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: calc(13px * var(--font-scale));
  line-height: 1.5;
  white-space: pre-wrap;
}
.peek-bubble.them {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--line);
}
.peek-bubble.me {
  align-self: flex-end;
  background: #ead3cf;
}
.peek-bubble.sticker {
  padding: 0;
  background: transparent;
  border: 0;
  max-width: 132px;
}
.peek-bubble.sticker img {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.screen[data-screen="peach"],
.screen[data-screen="peach-read"] {
  background: var(--wallpaper) center / cover no-repeat;
  background-color: var(--bg);
  color: var(--ink);
}

.screen[data-screen="peach"] .nav-header,
.screen[data-screen="peach-read"] .nav-header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  background: transparent;
  border-bottom: 0;
  position: relative;
}

.screen[data-screen="peach"] .nav-header h2,
.screen[data-screen="peach-read"] .nav-header h2 {
  position: absolute;
  left: 64px;
  right: 64px;
  text-align: center;
  pointer-events: none;
  font-family: inherit;
  font-size: calc(17px * var(--font-scale));
  font-weight: 650;
  letter-spacing: 0.08em;
}

.screen[data-screen="peach"] .nav-header .icon-btn,
.screen[data-screen="peach-read"] .nav-header .icon-btn,
.peach-tool {
  background: color-mix(in srgb, white 42%, transparent);
  border: 1px solid color-mix(in srgb, white 58%, transparent);
  color: var(--ink);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

.screen[data-screen="peach"] .peach-tools,
.screen[data-screen="peach-read"] .peach-tools {
  grid-column: 3;
  justify-self: end;
}

.screen[data-screen="peach-read"] .nav-header {
  align-items: center;
  row-gap: 10px;
}

.screen[data-screen="peach-read"] .nav-header h2 {
  position: static;
  left: auto;
  right: auto;
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  width: 100%;
  padding: 0 8px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.04em;
  line-height: 1.3;
  font-size: calc(16px * var(--font-scale));
}

.peach-tools {
  display: flex;
  gap: 6px;
}

.peach-tool {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: calc(13px * var(--font-scale));
  font-weight: 650;
  cursor: pointer;
}

.peach-shelf {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 6px 18px 88px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 16px;
  align-content: start;
}

.peach-shelf:has(.peach-empty) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 96px;
}

.peach-empty {
  width: min(100%, 220px);
  margin: 0;
  padding: 28px 18px 24px;
  text-align: center;
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  border: 1px solid color-mix(in srgb, white 55%, transparent);
  box-shadow: 0 16px 36px rgba(40, 24, 32, 0.06);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  color: var(--ink);
}

.peach-empty i {
  display: block;
  width: 48px;
  height: 68px;
  margin: 0 auto 16px;
  border-radius: 3px 12px 12px 3px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 34%, transparent) 0 7px, transparent 7px),
    linear-gradient(165deg, color-mix(in srgb, var(--strong) 62%, white), color-mix(in srgb, var(--strong) 24%, #f4e4dc));
  box-shadow: 8px 12px 20px rgba(40, 24, 32, 0.14);
}

.peach-empty b {
  display: block;
  font-weight: 650;
  font-size: calc(15px * var(--font-scale));
  letter-spacing: 0.14em;
}

.peach-page .peach-empty {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-align: center;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.peach-dock:empty {
  display: none;
}

.peach-book {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.peach-cover {
  aspect-ratio: 3 / 4;
  height: auto;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 4px 16px 16px 4px;
  padding: 16px 14px 16px 18px;
  color: #fff8f4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow:
    10px 16px 28px rgba(40, 24, 32, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.peach-cover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 9px;
  background: linear-gradient(90deg, rgba(40, 16, 18, 0.28), rgba(255, 255, 255, 0.08) 70%, transparent);
}

.peach-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.peach-cover::before {
  z-index: 2;
}

.peach-cover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  background: linear-gradient(transparent, rgba(24, 12, 14, 0.42));
  opacity: 0;
  z-index: 1;
}

.peach-cover.has-face::after {
  opacity: 1;
}

.peach-cover b {
  position: relative;
  z-index: 2;
  font-size: calc(16px * var(--font-scale));
  line-height: 1.35;
  font-weight: 650;
  letter-spacing: 0.04em;
  font-family: var(--font-display);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.peach-cover em {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  font-style: normal;
  font-size: calc(10px * var(--font-scale));
  letter-spacing: 0.16em;
  opacity: 0.8;
}

.peach-book span {
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.peach-book > i {
  display: block;
  height: 2px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  position: relative;
}

.peach-book > i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--p, 0%);
  border-radius: inherit;
  background: var(--strong);
}

.peach-del {
  position: absolute;
  top: 8px;
  left: 14px;
  z-index: 3;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 248, 244, 0.28);
  color: #fff8f4;
  cursor: pointer;
  line-height: 22px;
  font-size: calc(13px * var(--font-scale));
  backdrop-filter: blur(8px);
}

.peach-page {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overflow-x: hidden;
  margin: 2px 16px 10px;
  padding: 26px 22px 32px;
  border-radius: 28px;
  background: color-mix(in srgb, #fffaf7 82%, transparent);
  border: 1px solid color-mix(in srgb, white 64%, transparent);
  box-shadow: 0 18px 40px rgba(40, 24, 32, 0.08);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  font-size: calc(16px * var(--font-scale));
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--ink);
  white-space: pre-wrap;
}

.peach-page h3 {
  margin: 0 0 18px;
  text-align: center;
  font-family: var(--font-display);
  font-size: calc(20px * var(--font-scale));
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1.45;
  text-wrap: balance;
}

.peach-page .peach-more {
  display: block;
  margin: 22px auto 0;
  border: 0;
  background: transparent;
  color: var(--strong);
  font-weight: 650;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.peach-nav {
  display: flex;
  gap: 8px;
  padding: 0 16px 8px;
}

.peach-nav button {
  flex: 1;
  border: 1px solid color-mix(in srgb, white 55%, transparent);
  background: color-mix(in srgb, white 42%, transparent);
  color: var(--ink);
  border-radius: 999px;
  padding: 9px;
  font-size: calc(13px * var(--font-scale));
  font-weight: 650;
  letter-spacing: 0.08em;
  cursor: pointer;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

.peach-nav button:disabled {
  opacity: 0.38;
}

.peach-dock {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 16px 8px;
  padding: 8px 12px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 46%, transparent);
  border: 1px solid color-mix(in srgb, white 55%, transparent);
  box-shadow: 0 10px 24px rgba(40, 24, 32, 0.05);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  min-height: 48px;
}

.peach-dock img {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  object-fit: cover;
  flex: none;
}

.peach-dock .meta {
  min-width: 0;
  flex: 1;
}

.peach-dock p {
  margin: 0;
  font-size: calc(13px * var(--font-scale));
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.peach-dock button {
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 650;
  letter-spacing: 0.06em;
  font-size: calc(13px * var(--font-scale));
  cursor: pointer;
  flex: none;
}

.peach-read-mask,
.game-mask-bar {
  flex: none;
  margin: 0 12px 8px;
  padding: 8px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 94%, white);
  border: 1px solid color-mix(in srgb, #fff 70%, var(--line));
}

.peach-bar {
  display: flex;
  gap: 8px;
  padding: 0 16px 14px;
  align-items: flex-end;
}

.peach-bar[hidden] {
  display: none !important;
}

.peach-bar textarea {
  flex: 1;
  resize: none;
  border: 1px solid color-mix(in srgb, white 55%, transparent);
  border-radius: 18px;
  padding: 9px 12px;
  min-height: 38px;
  max-height: 88px;
  background: color-mix(in srgb, white 62%, transparent);
  overflow: hidden;
}

.peach-bar textarea::-webkit-scrollbar {
  display: none;
}

.peach-bar button {
  border: 0;
  background: var(--ink);
  color: #fff8f6;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 650;
  cursor: pointer;
}

.peach-pop {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: rgba(28, 16, 18, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: end center;
  padding: 18px 14px 22px;
}

.peach-pop[hidden] {
  display: none !important;
}

.peach-card {
  width: 100%;
  max-height: 78%;
  overflow: auto;
  background: color-mix(in srgb, var(--surface) 88%, white);
  border: 1px solid color-mix(in srgb, white 62%, transparent);
  border-radius: 28px;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 18px 40px rgba(40, 24, 32, 0.16);
}

.peach-cover-box {
  display: grid;
  gap: 8px;
}

.peach-cover-box > span {
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}

.peach-cover-field {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.peach-cover-view {
  width: 54px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 18%, transparent) 0 6px, transparent 6px),
    color-mix(in srgb, var(--strong) 18%, var(--surface));
}

.peach-cover-view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.peach-cover-acts {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.peach-card h3 {
  margin: 2px 0 4px;
  text-align: center;
  font-size: calc(16px * var(--font-scale));
  font-weight: 650;
  letter-spacing: 0.12em;
}

.peach-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}

.peach-card input,
.peach-card textarea {
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 16px;
  padding: 11px 12px;
  background: color-mix(in srgb, white 70%, transparent);
  resize: none;
}

.peach-pop-acts {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.peach-card .ghost-btn,
.peach-card .primary-btn {
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 650;
}

.peach-card .ghost-btn {
  background: color-mix(in srgb, white 55%, transparent);
  border: 1px solid color-mix(in srgb, white 70%, transparent);
  color: var(--ink);
}

.peach-file-btn {
  align-self: flex-start;
}

.peach-toc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.peach-toc-list button {
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  cursor: pointer;
  letter-spacing: 0.04em;
}

.peach-toc-list button.on {
  color: var(--strong);
  font-weight: 650;
}

.peach-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.peach-say {
  margin: 0;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 16px 16px 16px 6px;
  background: color-mix(in srgb, var(--surface) 70%, white);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.peach-say.mine {
  align-self: flex-end;
  max-width: 88%;
  border-radius: 16px 16px 6px 16px;
  background: color-mix(in srgb, var(--accent, #e7b7c6) 28%, white);
}

#peach-gen-ok.busy,
#peach-import-ok.busy {
  opacity: 0.5;
}

.screen[data-screen="games"] {
  color-scheme: dark;
  background: #0f0e11;
  color: #f4ecee;
}
.screen[data-screen="games"]::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -140px;
  left: -90px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: rgba(244, 63, 94, 0.1);
  filter: blur(64px);
  pointer-events: none;
}
.screen[data-screen="games"] .nav-header,
.screen[data-screen="games"] .game-hall {
  position: relative;
  z-index: 1;
}
.phone:has(.screen[data-screen="games"].active) .status-bar {
  color: #f6ece8;
}
.screen[data-screen="games"] .nav-header {
  background: transparent;
  border-bottom: 0;
  color: #f6ece8;
}
.screen[data-screen="games"] .nav-header h2 {
  color: #f6ece8;
}
.screen[data-screen="games"] .icon-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #f6ece8;
}
.game-login {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 148px;
  min-width: 0;
  margin-left: auto;
  padding: 3px 3px 3px 10px;
  border: 1px solid rgba(236, 72, 153, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 16px rgba(236, 72, 153, 0.16);
  color: #fde4ea;
  font: inherit;
  cursor: pointer;
}
.game-login span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(13px * var(--font-scale));
}
.game-login img {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: #3a2228;
  border: 1px solid rgba(244, 114, 182, 0.7);
}
.game-accounts {
  position: absolute;
  z-index: 6;
  top: 64px;
  right: 12px;
  width: min(220px, calc(100% - 24px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(18, 12, 16, 0.94);
  border: 1px solid rgba(236, 72, 153, 0.28);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
}
.game-accounts[hidden] {
  display: none;
}
.game-account {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #fde4ea;
  padding: 8px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.game-account.on,
.game-account:active {
  background: rgba(236, 72, 153, 0.16);
}
.game-account img {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: #3a2228;
}
.game-account span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(14px * var(--font-scale));
}
.game-accounts-empty {
  margin: 0;
  padding: 10px 8px;
  color: rgba(253, 228, 234, 0.72);
  font-size: calc(13px * var(--font-scale));
}
.game-hall {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 16px 24px;
}
.game-hero {
  position: relative;
  display: block;
  width: 100%;
  height: 232px;
  flex: none;
  border: 0;
  padding: 0;
  border-radius: 28px;
  overflow: hidden;
  color: #fffaf6;
  text-align: left;
  cursor: pointer;
  background: #243044;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.38),
    inset 0 0 0 1px rgba(236, 72, 153, 0.22);
}
.game-hero-art,
.game-hero-shade {
  position: absolute;
  inset: 0;
}
.game-hero-art {
  background-size: cover;
  background-position: center;
}
.game-hero-shade {
  background: linear-gradient(180deg, transparent 36%, rgba(0, 0, 0, 0.45) 62%, #000 100%);
}
.game-hero-copy {
  position: absolute;
  left: 16px;
  right: 84px;
  bottom: 16px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.game-hero-copy small,
.game-row-copy small {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: calc(10px * var(--font-scale));
  letter-spacing: 0.06em;
  line-height: 1.3;
}
.game-hero-copy small {
  background: rgba(15, 14, 17, 0.42);
  border: 1px solid rgba(244, 63, 94, 0.28);
  color: #fda4af;
}
.game-hero-copy b {
  font-family: var(--font-display);
  font-size: calc(32px * var(--font-scale));
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.game-hero-copy span {
  font-size: calc(12px * var(--font-scale));
  line-height: 1.4;
  color: #fda4af;
  opacity: 1;
}
.game-hero em,
.game-row em {
  font-style: normal;
}
.game-hero em {
  position: absolute;
  right: 14px;
  bottom: 16px;
  z-index: 1;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #ec4899;
  background: rgba(8, 6, 10, 0.72);
  color: #f472b6;
  font-size: calc(13px * var(--font-scale));
  letter-spacing: 0.08em;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.5);
  transition: transform 0.16s ease;
}
.game-hero:active em {
  transform: scale(0.94);
}
.game-shelf {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.game-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 86px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(236, 72, 153, 0.2);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #f4ecee;
  text-align: left;
  cursor: pointer;
}
.game-row:active {
  transform: scale(0.985);
}
.game-row i {
  position: relative;
  display: block;
  height: 70px;
  border-radius: 16px;
  background: rgba(131, 24, 67, 0.4) center / cover no-repeat;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(244, 114, 182, 0.28);
}
.game-row i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(131, 24, 67, 0.42);
  mix-blend-mode: multiply;
}
.game-row-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.game-row-copy b {
  font-family: var(--font-display);
  font-size: calc(18px * var(--font-scale));
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
}
.game-row-copy small {
  background: rgba(131, 24, 67, 0.28);
  color: #fda4af;
}
.game-row-copy span {
  max-width: 100%;
  overflow: hidden;
  color: rgba(253, 164, 175, 0.62);
  font-size: calc(12px * var(--font-scale));
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.game-row em {
  color: rgba(236, 72, 153, 0.2);
  font-family: "Cormorant Garamond", serif;
  font-size: calc(42px * var(--font-scale));
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: 0.02em;
}
.game-hero.tone-wolf { background-color: #1a1016; }
.game-row.tone-soup i,
.game-row.tone-guess i,
.game-row.tone-spy i { background-color: rgba(131, 24, 67, 0.4); }
.game-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.phone.wolf-night .status-bar {
  color: #f6ece8;
}
.game-screen.wolf-night {
  color: #f6ece8;
  background:
    linear-gradient(180deg, rgba(8, 5, 16, 0.28) 0%, rgba(8, 5, 16, 0.04) 18%, rgba(8, 5, 16, 0.28) 62%, rgba(6, 4, 12, 0.9) 100%),
    url("https://drive-cdn.mujian.me/19/Y4Y%E5%B0%8F%E6%89%8B%E6%9C%BA/419e3c07-1eb7-48a8-9ae6-045aab7091a1_%E5%9B%BE%E7%89%87-1%20%2829%29.png") center top / cover no-repeat;
}
.game-screen.wolf-night .nav-header {
  background: linear-gradient(180deg, rgba(8, 5, 14, 0.62), rgba(8, 5, 14, 0));
  border-bottom: 0;
  color: #f7eee8;
}
.game-screen.wolf-night .nav-header h2 {
  color: #f7eee8;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.game-screen.wolf-night .icon-btn {
  background: rgba(12, 8, 18, 0.46);
  color: #f7eee8;
}
.game-screen.wolf-night .ghost-btn { color: #f0c2b4; }
.game-screen.wolf-night .g-rule,
.game-screen.wolf-night .g-wait,
.game-screen.wolf-night .g-sent,
.game-screen.wolf-night .g-empty,
.game-screen.wolf-night .wolf-hint,
.game-screen.wolf-night .g-dock > p,
.game-screen.wolf-night .g-report {
  color: #f3e4ea;
}
.game-screen.wolf-night .g-sizes button,
.game-screen.wolf-night .g-person,
.game-screen.wolf-night .g-picks button,
.game-screen.wolf-night .g-draft,
.game-screen.wolf-night .g-bar textarea {
  background: rgba(14, 9, 22, 0.62);
  color: #f6ece8;
  border-color: rgba(236, 206, 196, 0.2);
  backdrop-filter: blur(8px);
}
.game-screen.wolf-night .g-sizes button.on,
.game-screen.wolf-night .g-picks button.on {
  background: #8d2434;
  border-color: transparent;
  color: #fff8f4;
}
.game-screen.wolf-night .g-person.on {
  background: rgba(110, 24, 40, 0.72);
  border-color: rgba(255, 170, 150, 0.45);
}
.game-screen.wolf-night .g-go,
.game-screen.wolf-night .g-bar button {
  background: #8d2434;
  color: #fff8f4;
}
.game-screen.wolf-night .g-dock .g-go.g-back {
  background: transparent;
  color: #f6ece8;
  border-color: rgba(236, 206, 196, 0.35);
}
.game-screen.wolf-night .g-bar textarea::placeholder { color: rgba(236, 214, 214, 0.5); }
.game-screen.wolf-night .g-line.say,
.game-screen.wolf-night .g-line.dead {
  background: rgba(14, 10, 24, 0.66);
  border-color: rgba(236, 206, 196, 0.16);
  color: #f6ece8;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
}
.game-screen.wolf-night .g-line b { color: #e7b7ae; }
.game-screen.wolf-night .g-line.me {
  background: rgba(122, 28, 44, 0.8);
  border-color: rgba(255, 176, 160, 0.3);
}
.game-screen.wolf-night .g-line.me b { color: #ffd4ca; }
.game-screen.wolf-night .g-line.dead {
  background: rgba(52, 16, 24, 0.72);
  border-color: rgba(180, 64, 74, 0.38);
}
.game-screen.wolf-night .g-line.gm p {
  background: rgba(8, 6, 14, 0.58);
  color: #ead8de;
  border: 1px solid rgba(236, 206, 196, 0.14);
  backdrop-filter: blur(8px);
}
.game-screen.wolf-night .g-line.secret p { color: #f0c2b4; }
.game-screen.wolf-night .g-seats {
  background: linear-gradient(180deg, rgba(8, 6, 16, 0), rgba(8, 6, 16, 0.72));
}
.game-screen.wolf-night .g-seat {
  color: #f3e6ea;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}
.game-screen.wolf-night .g-seat img { box-shadow: 0 0 0 1px rgba(255, 214, 196, 0.28); }
.game-screen.wolf-night .seat-no { background: #9a2436; }
.game-screen.wolf-night .g-dock {
  background: linear-gradient(180deg, rgba(8, 5, 14, 0.2), rgba(8, 5, 14, 0.9));
}
.g-lobby {
  flex: 1;
  overflow: auto;
  padding: 4px 16px 20px;
}
.g-rule {
  margin: 0 0 12px;
  font-size: calc(13px * var(--font-scale));
  line-height: 1.5;
  color: var(--ink-soft);
}
.g-sizes { display: flex; gap: 8px; margin: 0 0 10px; }
.g-sizes button {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
}
.g-sizes button.on { background: #ead3cf; border-color: transparent; font-weight: 700; }
.g-person {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 16px;
  padding: 8px 10px;
  margin: 0 0 8px;
  cursor: pointer;
}
.g-person.on {
  border-color: var(--strong, #c45c5c);
  background: #fff;
}
.g-person img {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  object-fit: cover;
}
.g-person.sent {
  opacity: 0.55;
  cursor: default;
}
.g-mail-box {
  padding: 0 16px 4px;
  max-height: 42%;
  overflow: auto;
}
.g-dock .g-go.g-back {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.g-go {
  width: 100%;
  margin-top: 6px;
  border: 0;
  background: var(--strong, #c45c5c);
  color: #fff;
  border-radius: 16px;
  padding: 12px;
  font-weight: 800;
  cursor: pointer;
}
.g-log {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px 14px 6px;
}
.g-line { margin: 0 0 8px; }
.g-line p { margin: 0; font-size: calc(14px * var(--font-scale)); line-height: 1.5; white-space: pre-wrap; }
.g-line b { display: block; font-size: calc(11px * var(--font-scale)); margin-bottom: 2px; color: var(--ink-soft); }
.g-line.gm { text-align: center; }
.g-line.gm p {
  display: inline-block;
  max-width: 92%;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, #fff);
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}
.g-line.say,
.g-line.me,
.g-line.dead {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 8px 12px;
}
.g-line.me { margin-left: 36px; background: #ead3cf; }
.g-line.secret p { font-size: calc(12px * var(--font-scale)); color: #8a5348; }
.g-seats {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding: 4px 12px 8px;
}
.g-seat { position: relative; width: 58px; text-align: center; font-size: calc(10px * var(--font-scale)); color: var(--ink-soft); }
.seat-no {
  position: absolute;
  left: -2px;
  top: -2px;
  z-index: 2;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: #2a2428;
  color: #fffaf6;
  font-style: normal;
  font-size: calc(10px * var(--font-scale));
  line-height: 16px;
  font-weight: 700;
}
.seat-av { position: relative; display: block; width: 40px; margin: 0 auto 3px; }
.g-seat img { width: 40px; height: 40px; border-radius: 14px; object-fit: cover; display: block; }
.g-seat .seat-mark {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  right: -6px;
  top: -4px;
  border: 1px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.g-seat.me .seat-av { outline: 2px solid var(--strong, #c45c5c); outline-offset: 1px; border-radius: 16px; }
.g-seat.mate .seat-av { box-shadow: 0 0 0 2px #8d2a2a; border-radius: 16px; }
.g-seat.dead { opacity: 0.45; }
.g-boom {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  border: 0;
  border-radius: 12px;
  padding: 8px 12px;
  background: #6e2430;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.g-draft {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}
.wolf-deal { text-align: center; }
.wolf-deal img {
  width: min(210px, 70%);
  border-radius: 16px;
  display: block;
  margin: 0 auto 8px;
  box-shadow: 0 12px 28px rgba(40, 12, 24, 0.28);
}
.wolf-hint { color: var(--ink-soft); font-size: calc(12px * var(--font-scale)); line-height: 1.5; }
.wolf-flip {
  width: min(220px, 78%);
  margin: 8px auto;
  border-radius: 16px;
  overflow: hidden;
  background: #1c1422;
  color: #fffaf6;
  text-align: center;
  box-shadow: 0 12px 28px rgba(28, 10, 24, 0.28);
}
.wolf-flip .art { width: 100%; height: 180px; object-fit: cover; display: block; }
.wolf-flip .who { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 8px 0; }
.wolf-flip .who img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.wolf-flip p { margin: 0; padding: 6px 8px 10px; font-weight: 700; }
.g-dock { padding: 4px 12px 14px; }
.g-dock > p { margin: 0 0 8px; font-size: calc(13px * var(--font-scale)); }
.g-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.g-picks button {
  border: 0;
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  border: 1px solid var(--line);
}
.g-picks button.on { background: #ead3cf; }
.g-bar { display: flex; gap: 8px; align-items: flex-end; }
.g-bar textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 10px;
  min-height: 38px;
  background: #fff;
}
.g-bar button {
  border: 0;
  background: var(--strong, #c45c5c);
  color: #fff;
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}
.g-wait, .g-sent, .g-empty { text-align: center; color: var(--ink-soft); font-size: calc(13px * var(--font-scale)); }
.g-report {
  flex: 1;
  min-height: 0;
  overflow: auto;
  white-space: pre-wrap;
  padding: 8px 18px 12px;
  font-size: calc(14px * var(--font-scale));
  line-height: 1.65;
}
.g-history {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 14px 12px;
}
.g-hist-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.g-hist-row b { font-size: calc(15px * var(--font-scale)); }
.g-hist-row small { font-size: calc(11px * var(--font-scale)); color: var(--ink-soft); }
.g-hist-row span { font-size: calc(12px * var(--font-scale)); color: #8a5348; }
.g-hist-report {
  white-space: pre-wrap;
  padding: 4px 4px 8px;
  font-size: calc(13px * var(--font-scale));
  line-height: 1.6;
}
.game-report-msg {
  margin: 8px 16px;
  padding: 12px 14px;
  border-radius: 18px;
  white-space: pre-wrap;
  font-size: calc(13px * var(--font-scale));
  line-height: 1.55;
  background: linear-gradient(180deg, #fff, #f6e4dc);
  border: 1px solid var(--line);
  cursor: pointer;
}

@media (max-width: 480px) {
  .stage {
    padding: 0;
    background: #000;
  }
  .phone {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    padding-bottom: var(--sab, 0px);
  }
}

html.native-lite .stage {
  display: block;
  min-height: 0;
  height: 100%;
  padding: 0;
  background: #000;
}

html.native-lite .phone {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
  box-shadow: none;
  padding-bottom: var(--sab, 0px);
}

.studio-body {
  flex: 1;
  overflow: auto;
  padding: 32px 20px 36px;
}

.studio-sheet {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.studio-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.studio-hero b {
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 1px solid #c45d72;
  color: #4e3336;
  font-family: "Cormorant Garamond", "Songti SC", "STSong", "SimSun", serif;
  font-size: calc(34px * var(--font-scale));
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.15;
}

.studio-hero p,
.studio-picked p,
.studio-empty {
  margin: 10px 0 0;
  color: #8a6a66;
  font-size: calc(13px * var(--font-scale));
  line-height: 1.55;
}

.studio-search {
  display: flex;
  align-items: center;
  gap: 10px;
}

.studio-search input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(214, 160, 172, 0.5);
  border-radius: 3px 12px 10px 3px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  color: #5c3a3e;
}

.studio-rand {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: 8px 12px 8px 10px;
  background: color-mix(in srgb, var(--strong) 22%, transparent);
  backdrop-filter: blur(12px);
  color: var(--ink);
  font-size: calc(13px * var(--font-scale));
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: none;
  transform: none;
  transition: transform 0.15s ease;
}

.studio-rand svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: currentColor;
}

.studio-rand:active {
  transform: scale(0.96);
}

.studio-picked {
  padding: 12px 14px;
  border: 1px dashed rgba(214, 150, 166, 0.7);
  border-radius: 4px;
  background: rgba(255, 248, 246, 0.45);
}

.studio-picked-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: calc(13px * var(--font-scale));
  color: #6a4a4e;
}

.studio-picked-h button {
  border: 0;
  background: transparent;
  color: #c45d72;
  cursor: pointer;
}

.studio-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.studio-sec {
  margin: 0;
  text-align: left;
  color: #a85a6c;
  font-family: "Cormorant Garamond", "Songti SC", "STSong", "SimSun", serif;
  font-size: calc(18px * var(--font-scale));
  font-weight: 500;
  letter-spacing: 0.22em;
}

.studio-field {
  display: block;
  margin: 0;
  font-size: calc(13px * var(--font-scale));
  color: #8a6a66;
}

.studio-body .studio-field input,
.studio-body .studio-field textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  border: 0;
  border-radius: 0;
  border-bottom: 1.5px solid #c45d72;
  background: rgba(255, 241, 242, 0.5);
  box-shadow: none;
  color: #4e3336;
}

.studio-field textarea {
  min-height: 68px;
  resize: vertical;
  line-height: 1.45;
}

.studio-line {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.studio-line > span {
  font-size: calc(13px * var(--font-scale));
  color: #8a6a66;
}

.studio-genders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.studio-genders .studio-pill {
  border: 1px solid rgba(214, 150, 166, 0.5);
  border-radius: 6px;
  padding: 10px 0;
  background: #fbf6f2;
  color: #6a3e46;
  font: inherit;
  font-size: calc(14px * var(--font-scale));
  cursor: pointer;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 0 #e4cfc6;
}

.studio-genders .studio-pill.on {
  background: #f4e2e4;
  color: #8d3044;
  transform: translateY(2px);
  box-shadow: inset 0 4px 7px rgba(90, 30, 46, 0.16);
}

.studio-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 4px;
  border-top: 1px dashed rgba(196, 120, 136, 0.5);
}

.studio-split .studio-field {
  padding-top: 10px;
}

.studio-split .studio-field + .studio-field {
  padding-left: 12px;
  border-left: 1px dashed rgba(196, 120, 136, 0.5);
}

.studio-wrote {
  margin: 8px 0 0;
  font-size: calc(13px * var(--font-scale));
  line-height: 1.45;
  color: #5c3a3e;
}

.studio-wrote b {
  font-weight: 600;
}

.studio-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.studio-chip {
  border: 1px dashed rgba(214, 140, 158, 0.95);
  border-radius: 3px 9px 7px 3px;
  padding: 6px 10px;
  background: rgba(255, 248, 246, 0.72);
  color: #a8485c;
  font: inherit;
  font-size: calc(13px * var(--font-scale));
  cursor: pointer;
  box-shadow: 1px 2px 0 rgba(160, 80, 96, 0.08);
}

.studio-chip.on {
  border-style: solid;
  background: #f6c9d2;
  color: #8d3044;
}

.studio-chip.is-stamp {
  animation: studio-stamp 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes studio-stamp {
  0% { transform: scale(1) rotate(-1deg); }
  55% { transform: scale(1.05) rotate(1.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.studio-group {
  border-radius: 4px 16px 12px 4px;
  background: #f8f1ea;
  border: 1px solid rgba(226, 170, 182, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 7px 0 #eadfd8;
  overflow: hidden;
}

.studio-group-h {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 12px 12px;
  font: inherit;
  font-size: calc(15px * var(--font-scale));
  color: #5c3a3e;
  cursor: pointer;
  text-align: left;
}

.studio-group-h span:last-of-type {
  flex: 1;
}

.studio-group-ico {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: #fff8f4;
  box-shadow: 0 2px 0 rgba(180, 120, 130, 0.16);
}

.studio-fold {
  width: 18px;
  height: 22px;
  flex: none;
  border-radius: 2px 8px 3px 2px;
  background: linear-gradient(160deg, #f7d5dc, #e7a8b6);
  box-shadow: 2px 2px 0 rgba(140, 70, 84, 0.12);
  position: relative;
}

.studio-fold::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 7px 7px 0;
  border-style: solid;
  border-color: transparent #c97d8e #f8e4e8 transparent;
}

.studio-group.open .studio-fold {
  transform: rotate(90deg);
}

.studio-group .studio-chips {
  display: none;
  padding: 0 12px 14px;
}

.studio-group.open {
  background:
    radial-gradient(circle, rgba(196, 120, 136, 0.18) 1px, transparent 1.3px) 0 0 / 11px 11px,
    #f8eef0;
  color: #5c3a3e;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 8px 16px rgba(70, 24, 36, 0.08);
}

.studio-group.open .studio-chips {
  display: flex;
}

.studio-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(255, 228, 230, 0.3);
  box-shadow: none;
}

.studio-rail .studio-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border: 0;
  border-radius: 9px;
  padding: 7px 0 6px;
  background: transparent;
  color: #b5a4a6;
  font: inherit;
  cursor: pointer;
  transform: none;
  box-shadow: none;
  transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.studio-rail .studio-pill b {
  font-size: calc(12px * var(--font-scale));
  font-weight: 650;
}

.studio-rail .studio-pill small {
  font-size: calc(10px * var(--font-scale));
}

.studio-rail .studio-pill.on {
  background: #fff;
  color: #4a3336;
  transform: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(80, 40, 50, 0.08);
}

.studio-go {
  width: 100%;
  margin-top: 8px;
  border: 0;
  border-radius: 24px;
  padding: 15px 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--strong) 62%, var(--ink)), color-mix(in srgb, var(--strong) 88%, var(--ink)));
  color: #fff8f6;
  font: inherit;
  font-size: calc(16px * var(--font-scale));
  font-weight: 650;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 8px 20px var(--glow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.studio-go:hover {
  box-shadow: 0 8px 24px var(--glow);
}

.studio-go:active {
  transform: scale(0.95);
}

.studio-go:disabled {
  opacity: 0.6;
}

.studio-result-h {
  margin: 8px 0;
  font-size: calc(13px * var(--font-scale));
  color: var(--ink-soft);
}

.studio-result textarea {
  width: 100%;
  min-height: 320px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: calc(12px * var(--font-scale));
  line-height: 1.45;
  white-space: pre;
}

.studio-result-acts {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 8px;
  margin-top: 10px;
}

.greet-switch {
  display: flex;
  justify-content: flex-end;
  flex: none;
  padding: 0 12px 8px;
}

.greet-switch[hidden] {
  display: none;
}

.greet-editor {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
}

.greet-switch-pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #222;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.date-ballet .greet-switch-pill {
  background: #8d3d52;
  color: #fff8f6;
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(141, 61, 82, 0.22);
}

#date-greet.greet-switch {
  position: relative;
  z-index: 6;
  margin: 0;
  padding: 0;
}

.date-ballet:has(#date-chapter-pop:not([hidden])) #date-greet,
.date-ballet:has(#date-inn-float:not([hidden])) #date-greet {
  visibility: hidden;
  pointer-events: none;
}

#date-greet .greet-switch-pill {
  height: 20px;
  padding: 0;
  background: rgba(141, 61, 82, 0.46);
  box-shadow: none;
}

#date-greet .greet-switch-pill button {
  width: 16px;
  height: 20px;
  font-size: calc(12px * var(--font-scale));
}

#date-greet .greet-switch-pill span {
  min-width: 26px;
  font-size: calc(9px * var(--font-scale));
}

.greet-switch-pill button {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: calc(18px * var(--font-scale));
  line-height: 1;
  cursor: pointer;
}

.greet-switch-pill span {
  min-width: 42px;
  text-align: center;
  font-size: calc(12px * var(--font-scale));
  font-variant-numeric: tabular-nums;
}

.greet-editor .mini-btn:disabled {
  opacity: 0.4;
}

#world-greeting {
  min-height: 72px;
  resize: vertical;
}

.earn-root {
  flex: 1;
  overflow: auto;
  padding: 8px 16px 28px;
}

.earn-board {
  position: relative;
  margin: 4px 2px 0;
  padding: 16px 16px 12px;
  border-radius: 14px;
  background: #2b2321;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 236, 228, 0.08),
    0 0 0 2px #4a3c38,
    0 0 0 4px #2b2321,
    0 8px 0 #1a1412;
}

.earn-screw {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, #f3efe9 0 12%, #c4bbb2 28%, #6d6560 62%, #2c2624 80%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.18);
}

.earn-screw::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 3.5px;
  height: 1px;
  background: rgba(30, 24, 22, 0.7);
  transform: rotate(40deg);
}

.earn-screw.a { top: 6px; left: 6px; }
.earn-screw.b { top: 6px; right: 6px; }
.earn-screw.c { bottom: 6px; left: 6px; }
.earn-screw.d { bottom: 6px; right: 6px; }

.earn-board > span {
  display: block;
  margin: 0 0 8px 2px;
  color: #e7c3c8;
  font-size: calc(10px * var(--font-scale));
  letter-spacing: 0.32em;
}

.earn-digits {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  min-height: 42px;
}

.earn-digits i {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: 12px;
  height: 34px;
  color: #f6d5dc;
  font-family: ui-monospace, "Courier New", monospace;
  font-style: normal;
  font-weight: 700;
  font-size: calc(16px * var(--font-scale));
  line-height: 1;
  text-shadow: 0 0 6px rgba(255, 214, 206, 0.35);
}

.earn-flap {
  position: relative;
  width: 28px;
  height: 42px;
  overflow: hidden;
  border-radius: 4px;
  background: #1a1412;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 228, 0.16),
    0 1px 0 rgba(0, 0, 0, 0.45);
}

.earn-flap > span {
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  overflow: hidden;
}

.earn-flap > span:first-child {
  top: 0;
  background: linear-gradient(180deg, #51423e 0%, #2e2522 100%);
}

.earn-flap > span:last-child {
  bottom: 0;
  background: linear-gradient(180deg, #241c1a 0%, #161110 100%);
}

.earn-flap em {
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff6ee;
  font-family: ui-monospace, "Courier New", monospace;
  font-style: normal;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 6px rgba(255, 220, 200, 0.55);
}

.earn-flap > span:last-child em {
  top: -20px;
}

.earn-flap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

.earn-machine {
  margin-top: 14px;
  padding: 10px 6px 14px;
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  border: 1px solid color-mix(in srgb, white 58%, transparent);
  box-shadow: 0 16px 30px rgba(70, 24, 36, 0.06);
}

.earn-window {
  position: relative;
  height: 228px;
  margin: 0 4px;
  overflow: hidden;
  border-radius: 22px;
  perspective: 900px;
  background:
    radial-gradient(80% 70% at 50% 42%, rgba(255, 255, 255, 0.34), transparent 68%),
    color-mix(in srgb, var(--bg) 70%, #e4d0d2);
  box-shadow:
    inset 0 14px 22px rgba(120, 78, 86, 0.28),
    inset 0 -10px 16px rgba(92, 52, 62, 0.16),
    inset 0 0 0 10px rgba(176, 146, 150, 0.38);
}

.earn-window::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 40%);
}

.earn-reel {
  position: relative;
  height: 100%;
  touch-action: pan-y;
}

.earn-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 164px;
  height: 188px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 14px 12px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 244, 244, 0.55));
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transform: translate(-50%, -50%) translateX(calc(var(--slot) * 122px)) scale(0.9);
  opacity: 0.4;
  filter: blur(0.5px);
  z-index: 1;
  transition: transform 0.34s ease, opacity 0.34s ease, filter 0.34s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 10px 16px rgba(70, 24, 36, 0.1);
}

.earn-card.is-near {
  z-index: 2;
}

.earn-card.is-current {
  z-index: 4;
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%) scale(1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    inset 0 0 0 5px rgba(214, 186, 190, 0.72),
    inset 0 0 0 6px rgba(146, 108, 116, 0.38),
    0 16px 22px rgba(70, 24, 36, 0.16);
}

.earn-card.is-far {
  opacity: 0;
  pointer-events: none;
}

.earn-card strong {
  font-size: calc(20px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 0.04em;
}

.earn-no {
  color: color-mix(in srgb, var(--ink) 55%, var(--strong));
  font-family: var(--font-display);
  font-size: calc(13px * var(--font-scale));
  letter-spacing: 0.14em;
}

.earn-card em {
  margin-top: auto;
  color: var(--ink-soft);
  font-style: normal;
  font-size: calc(12px * var(--font-scale));
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.earn-mark {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  color: #a56b76;
}

.earn-sub {
  color: #9a7c80;
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.08em;
}

.earn-card:not(.is-current) em,
.earn-card:not(.is-current) .earn-foil,
.earn-card:not(.is-current) .earn-coin,
.earn-card:not(.is-current) .earn-sub,
.earn-card:not(.is-current) .earn-mark {
  display: none;
}

.earn-card.is-right:not(.is-current) {
  align-items: flex-end;
  text-align: right;
}

.earn-card.is-scratch.is-current {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 244, 246, 0.5));
  backdrop-filter: none;
}

.earn-foil {
  display: block;
  width: 100%;
  height: 52px;
  margin-top: 8px;
  border-radius: 10px;
  background:
    linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, 0.78) 40%, transparent 52%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #e4e6ec 0%, #b7bcc6 38%, #f5f6f8 62%, #8f959e 100%);
  box-shadow: inset 0 0 0 1px rgba(90, 94, 104, 0.35);
}

.earn-coin {
  position: absolute;
  right: 16px;
  bottom: 42px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #fff 0 10%, #e7e8ee 22%, #b4b8c1 58%, #f7f7f9 78%, #8c919a 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.55),
    inset 0 0 0 5px rgba(110, 114, 124, 0.45),
    0 4px 6px rgba(40, 28, 34, 0.22);
}

.earn-coin::after {
  content: "¥";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #5e646e;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 13px;
  font-weight: 700;
}

.earn-lever {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 36px);
  height: 56px;
  margin: 26px auto 10px;
  border: 0;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 32%),
    linear-gradient(180deg, #f7c9d1 0%, #e7a3b1 48%, #d4899a 100%);
  color: #6d3342;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
  cursor: pointer;
  box-shadow: 0 8px 0 #9e5b6b, 0 15px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(0);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.earn-lever i {
  position: absolute;
  top: -24px;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fff 0 8%, #e7e9ef 20%, #9aa0aa 48%, #f6f7fa 64%, #6d737d 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.45),
    inset 0 0 0 5px rgba(78, 84, 94, 0.55),
    0 3px 4px rgba(0, 0, 0, 0.28);
}

.earn-lever i::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #f7f8fb, #8d939c 70%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

.earn-lever:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 #9e5b6b, 0 6px 10px rgba(0, 0, 0, 0.16);
}

.earn-mouth {
  position: relative;
  margin: 4px 20px 0;
  padding: 0;
  background: transparent;
  text-align: center;
}

.earn-mouth span {
  display: block;
  margin-bottom: 5px;
  color: #8d7578;
  font-size: calc(10px * var(--font-scale));
  letter-spacing: 0.42em;
}

.earn-mouth i {
  display: block;
  height: 11px;
  border-radius: 3px;
  background: #14110f;
  box-shadow:
    inset 0 5px 7px rgba(0, 0, 0, 0.92),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.28);
}

.earn-slip {
  position: relative;
  z-index: 1;
  margin: -4px 22px 8px;
  padding: 12px 12px 18px;
  transform: rotate(-0.6deg);
  color: #3a3535;
  background: #fffdf2;
  font-family: "Courier New", ui-monospace, monospace;
  filter:
    drop-shadow(0 8px 6px rgba(70, 40, 28, 0.18))
    drop-shadow(0 1px 0 rgba(170, 150, 110, 0.28));
  clip-path: polygon(
    0 0, 100% 0, 100% 94%,
    97.5% 100%, 95% 94%, 92.5% 100%, 90% 94%, 87.5% 100%, 85% 94%,
    82.5% 100%, 80% 94%, 77.5% 100%, 75% 94%, 72.5% 100%, 70% 94%,
    67.5% 100%, 65% 94%, 62.5% 100%, 60% 94%, 57.5% 100%, 55% 94%,
    52.5% 100%, 50% 94%, 47.5% 100%, 45% 94%, 42.5% 100%, 40% 94%,
    37.5% 100%, 35% 94%, 32.5% 100%, 30% 94%, 27.5% 100%, 25% 94%,
    22.5% 100%, 20% 94%, 17.5% 100%, 15% 94%, 12.5% 100%, 10% 94%,
    7.5% 100%, 5% 94%, 2.5% 100%, 0 94%
  );
}

.earn-slip-top {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.earn-barcode {
  width: 72%;
  height: 28px;
  fill: #3a3535;
}

.earn-slip-top time,
.earn-slip-top p {
  margin: 0;
  color: #3a3535;
  font-size: calc(10px * var(--font-scale));
  letter-spacing: 0.08em;
}

.earn-slip-top p {
  letter-spacing: 0.14em;
}

.earn-slip h3 {
  margin: 0 0 8px;
  color: #3a3535;
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
}

.earn-slip ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.earn-slip li {
  padding: 4px 0 3px;
  font-size: calc(11px * var(--font-scale));
}

.earn-slip li > div {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.earn-lead {
  flex: 1;
  border-bottom: 1px dotted rgba(58, 53, 53, 0.55);
  transform: translateY(-3px);
}

.earn-slip li b {
  font-weight: 700;
}

.earn-slip small,
.earn-slip p {
  color: #5c5656;
}

.earn-slip small {
  display: block;
  margin-top: 1px;
}

.earn-slip p {
  margin: 8px 0 0;
  font-size: calc(11px * var(--font-scale));
  line-height: 1.45;
}

.earn-drops {
  margin: 18px 4px 0;
}

.earn-drops > span {
  display: block;
  margin-bottom: 10px;
  color: var(--ink-soft);
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.22em;
}

.earn-drops ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 10px;
  margin: 0;
  padding: 4px 2px 8px;
  list-style: none;
}

.earn-drop {
  width: calc(50% - 6px);
  min-height: 86px;
  padding: 8px 8px 10px;
  border-radius: 4px;
  background: #eeeae6;
  color: #8a827c;
  transform: rotate(var(--tilt));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 8px 0 rgba(90, 60, 66, 0.05),
    0 12px 16px rgba(70, 24, 36, 0.12);
}

.earn-drop i {
  display: block;
  height: 18px;
  margin-bottom: 8px;
  border-radius: 3px;
  background: linear-gradient(180deg, #d7d9e0, #a9aeb6 45%, #eeeef2);
}

.earn-drop span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: calc(10px * var(--font-scale));
}

.earn-drop b {
  display: block;
  margin-top: 4px;
  font-size: calc(14px * var(--font-scale));
}

.earn-drop.is-win {
  background: #f4e4e2;
  color: #8d2436;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65),
    0 8px 0 rgba(120, 32, 48, 0.08),
    0 12px 16px rgba(90, 24, 36, 0.16);
}

.earn-drop.is-miss {
  background: #eceae8;
  color: #8d8682;
}

.earn-apps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.earn-app {
  min-height: 72px;
  padding: 12px;
  border: 0;
  border-radius: 16px;
  text-align: left;
  background: color-mix(in srgb, #fff 72%, var(--accent));
  color: var(--ink-soft);
}

.earn-app b {
  display: block;
  color: var(--ink);
  font-size: calc(15px * var(--font-scale));
}

.earn-app span {
  display: block;
  margin-top: 4px;
  font-size: calc(12px * var(--font-scale));
}

.earn-app.on {
  background: var(--strong);
  color: rgba(255, 248, 246, 0.8);
}

.earn-app.on b {
  color: #fff8f6;
}

.earn-app:disabled {
  opacity: 0.72;
}

button.earn-app {
  font: inherit;
  cursor: pointer;
}

.earn-app.xhs {
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  border: 1px solid color-mix(in srgb, white 48%, transparent);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: 0 10px 24px rgba(70, 24, 36, 0.04);
}

.xhs-card {
  margin-bottom: 10px;
  padding: 14px 14px 16px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 44%, transparent);
  border: 1px solid color-mix(in srgb, white 48%, transparent);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: 0 10px 24px rgba(70, 24, 36, 0.04);
}

.xhs-card h3,
.xhs-card h4 {
  margin: 0 0 6px;
  font-size: calc(16px * var(--font-scale));
  font-weight: 700;
}

.xhs-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.55;
}

.xhs-card .xhs-kicker {
  margin-bottom: 4px;
  color: var(--strong);
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
}

.xhs-left {
  margin-top: 8px;
}

.xhs-box {
  width: 100%;
  margin: 8px 0 10px;
  padding: 12px;
  border: 0;
  border-radius: 16px;
  resize: vertical;
  background: color-mix(in srgb, #fff 70%, var(--accent));
  color: var(--ink);
  font: inherit;
  font-size: calc(14px * var(--font-scale));
  line-height: 1.55;
}

.xhs-go {
  width: 100%;
}

.xhs-go:disabled {
  opacity: 0.55;
}

.xhs-out {
  margin-top: 12px;
}

.xhs-card .xhs-label {
  margin: 10px 0 6px;
  color: var(--ink);
  font-weight: 700;
}

.xhs-titles {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.xhs-title {
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: color-mix(in srgb, #fff 64%, var(--accent));
  color: var(--ink);
  text-align: left;
  font: inherit;
  font-size: calc(13px * var(--font-scale));
}

.xhs-title.is-on {
  border-color: var(--strong);
  color: var(--strong);
}

.xhs-card .xhs-body {
  white-space: pre-wrap;
  color: var(--ink);
}

.xhs-card .xhs-tags {
  color: var(--strong);
  line-height: 1.7;
}

.xhs-card .xhs-count {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
}

.earn-odds,
.earn-history {
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: color-mix(in srgb, #fff 78%, var(--accent));
}

.earn-odds h3,
.earn-history h3 {
  margin: 0 0 6px;
  font-size: calc(16px * var(--font-scale));
}

.earn-odds p,
.earn-ev {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.55;
}

.earn-odds table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(13px * var(--font-scale));
  font-variant-numeric: tabular-nums;
}

.earn-odds th,
.earn-odds td {
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  text-align: left;
}

.earn-odds th {
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
  font-weight: 600;
}

.earn-odds td:nth-child(2),
.earn-odds th:nth-child(2) {
  text-align: right;
}

.earn-odds td:nth-child(3),
.earn-odds th:nth-child(3) {
  text-align: right;
  color: var(--ink-soft);
}

.earn-ev {
  margin: 10px 0 0;
}

.earn-buy {
  width: 100%;
  margin-top: 14px;
}

.earn-history ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.earn-history li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  font-size: calc(12px * var(--font-scale));
}

.earn-history span {
  color: var(--ink-soft);
}

.earn-history b.win {
  color: #2f7d4a;
}

.lotto {
  position: relative;
  padding: 14px 14px 12px;
  border-radius: 18px;
  color: #5c3438;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.75), transparent 36%),
    repeating-linear-gradient(118deg, rgba(141, 61, 82, 0.05) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #fff8f4 0%, #f6d7d0 48%, #fbe8e2 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    inset 0 0 0 5px rgba(166, 92, 104, 0.28),
    0 12px 28px rgba(80, 36, 44, 0.12);
}

.lotto-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lotto-logo {
  width: 92px;
  height: 58px;
  object-fit: contain;
  flex: 0 0 auto;
}

.lotto-head p {
  margin: 0;
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.14em;
}

.lotto-head h3 {
  margin: 1px 0 0;
  font-family: var(--font-display);
  font-size: calc(26px * var(--font-scale));
  font-weight: 600;
  letter-spacing: 0.04em;
}

.lotto-head strong {
  margin-left: auto;
  font-size: calc(20px * var(--font-scale));
}

.lotto-serial {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.04em;
  color: #8a5a60;
}

.lotto-play {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #fffdfb;
  box-shadow: inset 0 0 0 1px rgba(166, 92, 104, 0.28);
}

.lotto-under {
  padding: 10px;
}

.lotto-under p {
  margin: 8px 0 6px;
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.16em;
  color: #8a5a60;
}

.lotto-under p:first-child {
  margin-top: 0;
}

.lotto-lucky {
  display: flex;
  gap: 8px;
}

.lotto-lucky b {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #8d3d52;
  color: #fff8f4;
  font-size: calc(16px * var(--font-scale));
}

.lotto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.lotto-cell {
  padding: 8px 4px 6px;
  border-radius: 10px;
  text-align: center;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(166, 92, 104, 0.16);
}

.lotto-cell b {
  display: block;
  font-size: calc(16px * var(--font-scale));
}

.lotto-cell span {
  display: block;
  margin-top: 2px;
  color: #8a5a60;
  font-size: calc(11px * var(--font-scale));
}

.lotto-cell.hit {
  background: #fff1c9;
  box-shadow: inset 0 0 0 1.5px #c4923a;
}

.lotto-foil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: pointer;
}

.lotto-foil.is-done {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.lotto-how,
.lotto-ev {
  margin: 8px 0 0;
  font-size: calc(11px * var(--font-scale));
  line-height: 1.5;
  color: #7d5156;
}

.lotto-odds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
  margin-top: 8px;
  font-size: calc(10px * var(--font-scale));
  color: #8a5a60;
}

.lotto-foot {
  display: flex;
  gap: 3px;
  height: 28px;
  margin-top: 10px;
  align-items: stretch;
}

.lotto-foot i {
  flex: 1;
  background: repeating-linear-gradient(90deg, #5c3438 0 1px, transparent 1px 3px);
  opacity: 0.55;
}

.lotto-foot i:nth-child(odd) {
  opacity: 0.85;
}

.lotto-tip {
  margin: 10px 0 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
}

.lotto-result {
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  text-align: center;
}

.lotto-result b,
.lotto-result span {
  display: block;
}

.lotto-result span {
  margin-top: 4px;
  font-size: calc(12px * var(--font-scale));
}

.lotto-result.win {
  background: #e7f5ec;
  color: #1f6b3a;
}

.lotto-result.miss {
  background: color-mix(in srgb, #fff 70%, var(--accent));
  color: var(--ink-soft);
}

.lotto-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.lotto-actions .ghost-btn,
.lotto-actions .primary-btn {
  flex: 1;
}

.yorechat {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, white) 0%, var(--bg) 220px);
}

.yorechat [hidden] {
  display: none !important;
}

.yc-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 8px;
  padding: calc(var(--sat, 0px) + 12px) 16px 4px;
}

.yc-head h2 {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: calc(30px * var(--font-scale));
  font-weight: 600;
  letter-spacing: 0.01em;
}

.yc-add {
  font-size: calc(22px * var(--font-scale));
  line-height: 1;
}

.yc-menu {
  position: absolute;
  top: 96px;
  right: 14px;
  z-index: 6;
  min-width: 156px;
  padding: 6px;
  display: grid;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 88%, white);
  border: 1px solid color-mix(in srgb, #fff 70%, var(--line));
  box-shadow: 0 18px 40px rgba(70, 24, 36, 0.14);
  backdrop-filter: blur(16px);
}

.yc-menu button {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 11px 12px;
  border-radius: 12px;
  font-size: calc(14px * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
}

.yc-menu button:active {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.yc-me {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 12px;
}

.yc-me img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  box-shadow: 0 8px 18px rgba(70, 24, 36, 0.08);
}

.yc-me-copy {
  min-width: 0;
  flex: 1;
}

.yc-me-acts {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

#yc-moments svg {
  width: 20px;
  height: 20px;
}

.yc-me-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.yc-me-line strong {
  font-size: calc(16px * var(--font-scale));
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yc-me-line span {
  flex: none;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, var(--surface));
  color: var(--ink-soft);
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
}

.yc-me p {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yc-paper-btn {
  width: 28px;
  height: 28px;
  flex: none;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: color-mix(in srgb, var(--ink-soft) 72%, transparent);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.yc-paper-btn svg {
  width: 18px;
  height: 18px;
  overflow: visible;
}

.yc-paper-btn.on,
.yc-paper-btn:active {
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.yc-paper {
  margin: 0 16px 10px;
  padding: 10px;
  display: grid;
  gap: 8px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, #fff 64%, var(--line));
  backdrop-filter: blur(16px);
}

.yc-paper-preview {
  height: 72px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 76%, white) center / cover no-repeat;
}

.yc-paper input {
  padding: 8px 12px;
  border-radius: 12px;
}

.yc-paper-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.yc-paper-acts .ghost-btn {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  font-size: calc(12px * var(--font-scale));
  text-align: center;
  cursor: pointer;
}

.yorechat.has-paper .yc-head h2 {
  text-shadow: 0 1px 12px color-mix(in srgb, var(--bg) 80%, white);
}

.yorechat.has-paper .yc-me {
  margin: 0 12px 4px;
  padding: 8px 10px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  backdrop-filter: blur(10px);
}

.yc-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 16px 10px;
  padding: 4px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.yc-tabs button[data-yc-tab] {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: 14px;
  padding: 8px 4px;
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
}

.yc-tabs button[data-yc-tab].on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(70, 24, 36, 0.08);
}

.yc-find {
  width: 34px;
  height: 34px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.yc-find svg {
  width: 18px;
  height: 18px;
}

.yc-find.on {
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(70, 24, 36, 0.08);
}

.yc-search {
  margin: 0 16px 8px;
}

.yc-search input {
  border: 0;
  border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 5%, var(--surface));
  padding: 11px 14px;
}

.yc-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 14px 18px 6px;
  scrollbar-width: none;
}

.yc-rail::-webkit-scrollbar,
.yc-filters::-webkit-scrollbar {
  display: none;
}

.yc-rail button {
  width: 68px;
  flex: none;
  border: 0;
  background: transparent;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

.yc-rail img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 16px rgba(70, 24, 36, 0.08);
}

.yc-rail span {
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
}

.yc-filters {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 4px 22px 0;
  scrollbar-width: none;
}

.yc-filters button {
  flex: none;
  border: 0;
  border-bottom: 1.5px solid transparent;
  background: transparent;
  padding: 8px 0 6px;
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
}

.yc-filters button.on {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.yc-count {
  margin: 12px 22px 2px;
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}

.yc-scroll {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.yorechat .list {
  padding: 6px 0 24px;
  scrollbar-width: none;
}

.yorechat .list::-webkit-scrollbar {
  display: none;
}

.yc-sec {
  width: calc(100% - 36px);
  margin: 8px 18px 6px;
  padding: 2px 2px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.yc-sec i {
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

.yc-sec i.shut {
  transform: rotate(45deg);
  margin-top: -3px;
}

.yc-card {
  width: calc(100% - 32px);
  margin: 0 16px 10px;
  padding: 12px 12px 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 44%, transparent);
  border: 1px solid color-mix(in srgb, white 48%, transparent);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: 0 10px 24px rgba(70, 24, 36, 0.04);
  cursor: pointer;
}

.yc-card:active {
  opacity: 0.72;
}

.yc-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.yc-face {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
}

button.yc-face {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.call-mask {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 28px 18px 72px;
  background: transparent;
}

.call-sheet {
  position: relative;
  width: min(300px, 100%);
  padding: 24px;
  border: 2px solid #fff;
  border-radius: 32px;
  background: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(220, 180, 190, 0.15);
  font-family: "PingFang SC", "Hiragino Maru Gothic ProN", "Yuanti SC", "Nunito", sans-serif;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

.call-head {
  display: flex;
  align-items: center;
  flex: none;
  gap: 12px;
  margin: 28px 0 16px;
}

.call-face {
  width: 64px;
  height: 64px;
  flex: none;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #f3e4e8;
  box-shadow: 0 6px 16px rgba(220, 180, 190, 0.2);
}

.call-id {
  min-width: 0;
  padding-right: 8px;
}

.call-x {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(92, 75, 81, 0.06);
  color: #b7a4ab;
  cursor: pointer;
  font-size: 15px;
  line-height: 26px;
}

.call-clock {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(92, 75, 81, 0.08);
  color: #8d7b82;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.call-tag {
  margin: 0;
  color: #b7a8ae;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.call-sheet h3 {
  margin: 2px 0 0;
  color: #5c4b51;
  font-family: "PingFang SC", "Hiragino Maru Gothic ProN", "Yuanti SC", "Nunito", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
}

.call-line {
  flex: 0 1 auto;
  max-height: 240px;
  min-height: 0;
  margin: 0 0 16px;
  padding-right: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  white-space: pre-wrap;
  color: #8a7b82;
  font-size: 13px;
  line-height: 1.75;
}

.call-line::-webkit-scrollbar {
  width: 3px;
}

.call-line::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(212, 136, 154, 0.4);
}

.call-go {
  flex: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  min-height: 42px;
  padding: 0 16px;
  background: #fbebee;
  color: #d4889a;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.call-go span:last-child {
  margin-left: auto;
}

.call-go:hover {
  background: #f7e1e6;
}

.call-go:active {
  transform: scale(0.98);
}

.yc-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--muted);
}

.yc-unread {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--strong);
  color: #fff;
  font-size: calc(10px * var(--font-scale));
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.yc-card.has-unread .yc-meta p {
  color: var(--ink);
  font-weight: 700;
}

img[src*="e672752f-2ada-4589-92ef-d79a1291e646"] {
  object-position: center 6%;
}

img[src*="628fad77-1b82-4d8f-9c2e-2f739de552df"] {
  object-position: center 36%;
}

img[src*="99b5ac3c-634d-4d87-90fc-7ffd601d66fa"] {
  object-position: center 12%;
}

img[src*="08ec2bf8-17aa-4f6c-81b7-5b1ecd21dcf3"] {
  object-position: center 20%;
}

.yc-meta {
  min-width: 0;
  flex: 1;
}

.yc-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.yc-line h3,
.yc-meta p {
  margin: 0;
}

.yc-line h3 {
  flex: 1;
  min-width: 0;
  font-size: calc(15px * var(--font-scale));
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yc-line time {
  flex: none;
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
  color: var(--ink-soft);
}

.yc-meta p {
  margin-top: 3px;
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yc-more {
  width: 28px;
  height: 36px;
  flex: none;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--ink-soft) 80%, transparent);
  font-size: calc(22px * var(--font-scale));
  line-height: 1;
  cursor: pointer;
}

.moments {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, white) 0%, var(--bg) 220px);
}

.moments [hidden] {
  display: none !important;
}

.mm-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--sat, 0px) + 8px) 14px 0;
  pointer-events: none;
}

.mm-bar .icon-btn,
.mm-bar .yc-paper-btn,
.mm-bar-acts {
  pointer-events: auto;
}

.mm-bar-acts {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mm-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, white 50%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, white 46%, transparent);
  color: var(--ink);
  font-size: calc(15px * var(--font-scale));
}

.mm-switch input {
  appearance: none;
  width: 46px;
  height: 28px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: color-mix(in srgb, var(--ink) 16%, var(--surface));
  position: relative;
  cursor: pointer;
  flex: none;
}

.mm-switch input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(40, 20, 28, 0.18);
  transition: transform 0.16s ease;
}

.mm-switch input:checked {
  background: var(--strong);
}

.mm-switch input:checked::after {
  transform: translateX(18px);
}

.mm-cover-preview {
  height: 112px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, white 50%, transparent);
  background:
    radial-gradient(80% 70% at 80% 20%, color-mix(in srgb, var(--strong) 28%, white), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--strong) 24%, white), color-mix(in srgb, var(--bg) 78%, #f3e6e2));
  background-size: cover;
  background-position: center;
}

.screen[data-screen="moments-settings"] [hidden],
.screen[data-screen="weibo-settings"] [hidden] {
  display: none !important;
}

.screen[data-screen="moments-settings"] .nav-header,
.screen[data-screen="weibo-settings"] .nav-header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  background: transparent;
  border-bottom: 0;
}

.screen[data-screen="moments-settings"] .nav-header h2,
.screen[data-screen="weibo-settings"] .nav-header h2 {
  text-align: center;
  font-size: calc(17px * var(--font-scale));
}

.screen[data-screen="moments-settings"] .nav-header .icon-btn,
.screen[data-screen="weibo-settings"] .nav-header .icon-btn,
.screen[data-screen="moments-settings"] .save-link,
.screen[data-screen="weibo-settings"] .save-link {
  background: color-mix(in srgb, white 40%, transparent);
  border: 1px solid color-mix(in srgb, white 55%, transparent);
  color: var(--ink);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

.screen[data-screen="moments-settings"] .save-link,
.screen[data-screen="weibo-settings"] .save-link {
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 650;
}

.screen[data-screen="moments-settings"] .settings-scroll,
.screen[data-screen="weibo-settings"] .settings-scroll {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: transparent;
  gap: 12px;
}

.screen[data-screen="moments-settings"] .fold,
.screen[data-screen="weibo-settings"] .fold {
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  border: 1px solid color-mix(in srgb, white 52%, transparent);
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(40, 24, 32, 0.05);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  overflow: hidden;
}

.screen[data-screen="moments-settings"] .fold > summary,
.screen[data-screen="weibo-settings"] .fold > summary {
  font-family: inherit;
  font-size: calc(15px * var(--font-scale));
  font-weight: 650;
  letter-spacing: 0.04em;
}

.screen[data-screen="moments-settings"] .fold-body,
.screen[data-screen="weibo-settings"] .fold-body {
  border-top-color: color-mix(in srgb, white 38%, transparent);
}

.screen[data-screen="moments-settings"] select,
.screen[data-screen="weibo-settings"] select,
.screen[data-screen="moments-settings"] .seg-bar,
.screen[data-screen="weibo-settings"] .seg-bar {
  background: color-mix(in srgb, white 46%, transparent);
  border-color: color-mix(in srgb, white 50%, transparent);
}

.mm-chosen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mm-chosen:empty {
  display: none;
}

.mm-chip {
  border: 1px solid color-mix(in srgb, white 50%, transparent);
  background: color-mix(in srgb, white 46%, transparent);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: calc(13px * var(--font-scale));
  cursor: pointer;
}

.lib-grid {
  display: grid;
  gap: 8px;
}

.lib-grid:empty {
  display: none;
}

.lib-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.lib-item img {
  width: 54px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  background: color-mix(in srgb, var(--ink) 8%, var(--surface));
}

.lib-item p {
  margin: 0;
  color: var(--ink);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.4;
}

.lib-item button {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: calc(16px * var(--font-scale));
  cursor: pointer;
  padding: 0 4px;
}

.wb-tools {
  display: flex;
  align-items: center;
  gap: 2px;
}

.screen[data-screen="weibo"] .yc-paper-btn {
  width: 32px;
  height: 32px;
  color: var(--ink);
  background: none;
}

.screen[data-screen="weibo"] .yc-paper-btn svg {
  width: 22px;
  height: 22px;
}

.wb-pic {
  display: block;
  width: 168px;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  margin-top: 8px;
  border-radius: 12px;
  object-fit: cover;
  cursor: zoom-in;
  background: color-mix(in srgb, var(--ink) 8%, var(--surface));
}

.mm-bar .yc-paper-btn {
  width: 32px;
  height: 32px;
  border-radius: 0;
  color: #fff;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mm-bar .yc-paper-btn svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 1.5px rgba(20, 12, 16, 0.45));
}

#mm-refresh.busy svg,
#weibo-refresh.busy svg {
  animation: mm-spin 0.8s linear infinite;
}

@keyframes mm-spin {
  to { transform: rotate(-360deg); }
}

.mm-scroll {
  height: 100%;
  overflow: auto;
  padding-bottom: 72px;
}

.mm-cover {
  position: relative;
  height: 228px;
  margin-bottom: 42px;
  background:
    radial-gradient(80% 70% at 80% 20%, color-mix(in srgb, var(--strong) 28%, white), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--strong) 24%, white), color-mix(in srgb, var(--bg) 78%, #f3e6e2));
}

.mm-cover.has-banner {
  background-size: cover;
  background-position: center;
}

.mm-cover-me {
  position: absolute;
  right: 16px;
  bottom: -22px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

#mm-album .mm-cover-me {
  cursor: default;
}

.mm-cover-me span {
  min-width: 0;
  font-size: calc(16px * var(--font-scale));
  font-weight: 700;
  text-shadow: 0 1px 8px color-mix(in srgb, white 75%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mm-cover.has-banner .mm-cover-me span {
  color: #fff;
  text-shadow: 0 1px 2px rgba(20, 10, 14, 0.55), 0 0 12px rgba(20, 10, 14, 0.35);
}

.mm-cover-me img {
  width: 68px;
  height: 68px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bg);
  box-shadow: 0 8px 18px rgba(70, 24, 36, 0.12);
}

.mm-empty {
  margin: 8px 28px 0;
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.7;
  text-align: center;
}

.mm-post {
  margin: 0 14px 12px;
  padding: 14px 14px 12px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 92%, white);
  box-shadow: 0 10px 28px rgba(70, 24, 36, 0.06);
}

.mm-who {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.mm-who img {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

.mm-who strong {
  min-width: 0;
  color: var(--strong);
  font-size: calc(15px * var(--font-scale));
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mm-text,
.mm-pic,
.mm-photo,
.mm-meta,
.mm-thread {
  margin-left: 52px;
}

.mm-text {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: calc(15px * var(--font-scale));
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.mm-pic {
  display: block;
  width: 168px;
  max-width: calc(100% - 52px);
  aspect-ratio: 3 / 4;
  height: auto;
  margin-top: 8px;
  border-radius: 12px;
  object-fit: cover;
  cursor: zoom-in;
  background: color-mix(in srgb, var(--ink) 8%, var(--surface));
}

.mm-photo {
  display: grid;
  align-items: end;
  min-height: 92px;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--strong) 18%, white), color-mix(in srgb, var(--bg) 70%, white));
}

.mm-photo span {
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}

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

.mm-meta time {
  color: var(--ink-soft);
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
}

.mm-acts {
  display: flex;
  align-items: center;
  gap: 2px;
}

.mm-acts button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.mm-acts button:active,
.mm-acts button.on {
  color: var(--strong);
  background: color-mix(in srgb, var(--strong) 10%, transparent);
}

.mm-acts svg,
.mm-likes svg {
  width: 16px;
  height: 16px;
}

.mm-heart {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.mm-acts .on .mm-heart {
  fill: var(--strong);
  stroke: var(--strong);
}

.mm-thread {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}

.mm-likes {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 4px;
  color: var(--ink);
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  line-height: 1.45;
}

.mm-likes svg {
  width: 12px;
  height: 12px;
  flex: none;
  margin-top: 2px;
}

.mm-cmt {
  display: block;
  width: 100%;
  margin: 0;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

.mm-cmt b,
.mm-likes span {
  font-weight: 700;
}

.mm-cmt b {
  color: var(--strong);
}

.mm-composer,
.mm-reply {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  padding: 10px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, white);
  border: 1px solid color-mix(in srgb, #fff 70%, var(--line));
  box-shadow: 0 16px 36px rgba(70, 24, 36, 0.14);
}

.mm-composer textarea,
.mm-reply input {
  width: 100%;
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 6px 4px;
  resize: none;
}

.mm-composer textarea {
  min-height: 72px;
}

.mm-composer-acts,
.mm-reply {
  display: flex;
  align-items: center;
  gap: 8px;
}

form.mm-reply {
  flex-direction: column;
  align-items: stretch;
}

.mm-mask {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-bottom: 6px;
  color: #8a6e76;
  font-size: calc(12px * var(--font-scale));
  line-height: 1.3;
}

.mm-mask select {
  max-width: 46%;
  min-width: 0;
  border: 0;
  background: #f3e4e8;
  color: #4e3a40;
  border-radius: 999px;
  padding: 3px 8px;
  font: inherit;
}

.mm-mask-dock {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  z-index: 5;
  margin: 0;
  padding: 8px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 94%, white);
  border: 1px solid color-mix(in srgb, #fff 70%, var(--line));
  box-shadow: 0 10px 24px rgba(70, 24, 36, 0.1);
}

.mm-reply-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mm-reply-row input {
  flex: 1;
  width: auto;
}

.mm-composer-acts {
  justify-content: flex-end;
}

.mm-file {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-right: auto;
  color: var(--ink-soft);
  cursor: pointer;
}

.mm-file svg {
  width: 18px;
  height: 18px;
}

.mm-composer-acts button,
.mm-reply button {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
}

#mm-publish,
.mm-reply button[type="submit"] {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--strong);
  color: white;
}

.mm-composer-preview {
  position: relative;
  width: fit-content;
  margin: 0 4px 8px;
}

.mm-composer-preview img {
  display: block;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
}

#mm-preview-clear {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  cursor: pointer;
}

.mm-sub {
  margin: 18px 18px 8px;
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
}

.mm-mine-cmt {
  margin: 0 14px 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 92%, white);
  box-shadow: 0 10px 28px rgba(70, 24, 36, 0.06);
}

.mm-mine-cmt p {
  margin: 0;
  font-size: calc(14px * var(--font-scale));
  line-height: 1.5;
}

.mm-quote {
  margin-bottom: 4px !important;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale)) !important;
}

.mm-mine-cmt button {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
}

.mem-board {
  background:
    radial-gradient(80% 46% at 50% 0%, color-mix(in srgb, var(--strong) 16%, transparent), transparent 68%),
    var(--bg);
  color: var(--ink);
}

.mem-board[hidden],
.mem-board [hidden] {
  display: none !important;
}

.mem-top {
  padding: calc(var(--sat, 0px) + 12px) 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.mem-top .icon-btn,
.mem-icon {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 86%, white);
  color: var(--ink);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
  display: grid;
  place-items: center;
  flex: none;
  font-size: calc(22px * var(--font-scale));
  line-height: 1;
  cursor: pointer;
}

.mem-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.mem-hi {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mem-hi img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: color-mix(in srgb, var(--surface) 80%, white);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--strong) 35%, white);
  flex: none;
}

.mem-hi span {
  font-family: var(--font-display);
  font-size: calc(22px * var(--font-scale));
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.mem-stage {
  flex: 1;
  min-height: 0;
  position: relative;
}

.mem-stage.stack {
  overflow: hidden;
}

.mem-fan {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 0;
  height: 0;
}

.mem-stage.tile {
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-content: start;
  padding: 12px 16px 8px;
}

.mem-ticket {
  --paper: color-mix(in srgb, var(--surface) 70%, white);
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
  color: var(--ink);
  background:
    radial-gradient(circle at left 62%, transparent 8px, var(--paper) 8.6px) left center / 51% 100% no-repeat,
    radial-gradient(circle at right 62%, transparent 8px, var(--paper) 8.6px) right center / 51% 100% no-repeat;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--strong) 28%, transparent));
}

.mem-ticket::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  pointer-events: none;
  background: radial-gradient(circle at 6px 0, var(--bg) 3.4px, transparent 3.8px);
  background-size: 12px 8px;
  background-repeat: repeat-x;
}

.mem-ticket::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  pointer-events: none;
  background: radial-gradient(circle at 6px 7px, var(--bg) 3.2px, transparent 3.6px);
  background-size: 12px 7px;
  background-repeat: repeat-x;
}

.mem-stage.stack .mem-ticket {
  position: absolute;
  width: 158px;
  height: 214px;
  left: 0;
  top: 0;
  transform: translate(calc(-50% + var(--x, 0px)), calc(-62% + var(--y, 0px))) rotate(var(--rot, 0deg));
}

.mem-stage.stack .mem-ticket:not(:last-child) {
  height: 112px;
  background: var(--paper);
  overflow: hidden;
}

.mem-stage.stack .mem-ticket:not(:last-child) .mem-stub,
.mem-stage.stack .mem-ticket:not(:last-child) .mem-photo em {
  display: none;
}

.mem-stage.stack .mem-ticket:not(:last-child) .mem-photo {
  height: auto;
  flex: 1;
  margin: 12px 10px 10px;
}

.mem-stage.tile .mem-ticket {
  width: 100%;
  aspect-ratio: 3 / 4.05;
}

.mem-ticket.off {
  opacity: 0.55;
}

.mem-photo {
  height: calc(54% - 6px);
  margin: 14px 11px 0;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  position: relative;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, white);
}

.mem-photo em {
  position: absolute;
  left: 6px;
  bottom: 6px;
  max-width: calc(100% - 12px);
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  color: var(--ink);
  font-style: normal;
  font-size: calc(10px * var(--font-scale));
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mem-stub {
  height: 42%;
  margin: 8px 8px 0;
  padding: 10px 6px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 42%, transparent) 0.55px, transparent 0.8px);
  background-size: 5px 3px;
  background-repeat: repeat-x;
  background-position: left top;
}

.mem-stub em {
  font-family: var(--font-display);
  font-style: normal;
  font-size: calc(13px * var(--font-scale));
  letter-spacing: 0.04em;
}

.mem-stub strong {
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mem-stub small {
  color: var(--ink-soft);
  font-size: calc(11px * var(--font-scale));
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mem-empty,
.mem-more {
  margin: 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
}

.mem-stage.stack .mem-empty {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 46%;
  transform: translateY(-50%);
}

.mem-more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
}

.mem-cal {
  flex: none;
  padding: 0 14px 16px;
}

.mem-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.mem-cal-head b {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.16em;
  font-size: calc(18px * var(--font-scale));
}

.mem-cal-head button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: calc(18px * var(--font-scale));
}

.mem-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.mem-cal-grid .wk {
  font-size: calc(10px * var(--font-scale));
  opacity: 0.5;
  padding: 4px 0;
}

.mem-day {
  border: 0;
  background: transparent;
  height: 34px;
  padding: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1px;
  color: var(--ink);
  cursor: pointer;
}

.mem-day b {
  min-width: 20px;
  font-size: calc(12px * var(--font-scale));
  font-weight: 650;
  line-height: 20px;
  border-radius: 999px;
}

.mem-day i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #e7d3c4 center / cover no-repeat;
  display: none;
}

.mem-day.has i { display: block; }

.mem-day.today b {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--strong) 70%, white);
}

.mem-day.on b {
  background: var(--strong);
  color: white;
  box-shadow: none;
}

.mem-read {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: end center;
  padding: 18px;
}

.mem-read-bg {
  position: absolute;
  inset: 0;
  border: 0;
  background: color-mix(in srgb, var(--ink) 28%, transparent);
  cursor: pointer;
}

.mem-read article {
  position: relative;
  width: min(100%, 340px);
  max-height: 68%;
  overflow: auto;
  margin-bottom: 24px;
  padding: 18px 16px 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 78%, white);
  color: var(--ink);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--strong) 22%, transparent);
}

.mem-read em {
  font-family: var(--font-display);
  font-style: normal;
  font-size: calc(13px * var(--font-scale));
}

.mem-read h3 {
  margin: 4px 0 8px;
  font-size: calc(18px * var(--font-scale));
}

.mem-read p {
  margin: 0;
  white-space: pre-wrap;
  font-size: calc(14px * var(--font-scale));
  line-height: 1.55;
}

.ginza-screen {
  --gz-ink: #e8f4f4;
  --gz-muted: rgba(232, 244, 244, 0.62);
  --gz-accent: #97c2c5;
  --gz-lilac: #7f5da3;
  --gz-grape: #6d486c;
  --gz-indigo: #2f2c5e;
  --gz-night: #2a193d;
  color: var(--gz-ink);
  font-family: "Ginza Knive", var(--font-ui);
  background: url("https://drive-cdn.mujian.me/19/Y4Y%E5%B0%8F%E6%89%8B%E6%9C%BA/930843c5-e8fe-4935-8569-d6e2a51f5793_%E5%9B%BE%E7%89%87-1%20%2837%29.png") center / cover no-repeat;
  overflow: hidden;
}

.phone:has(.ginza-screen.active) .status-bar {
  color: #e8f4f4;
}

.ginza-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.ginza-sky i {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #f6edd4;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0.55;
  animation: ginza-twinkle 3.6s ease-in-out infinite;
}

.ginza-sky i:nth-child(1) { top: 10%; left: 14%; animation-delay: 0s; }
.ginza-sky i:nth-child(2) { top: 18%; right: 16%; width: 4px; height: 4px; animation-delay: .6s; }
.ginza-sky i:nth-child(3) { top: 42%; left: 8%; width: 5px; height: 5px; animation-delay: 1.2s; }
.ginza-sky i:nth-child(4) { top: 58%; right: 10%; animation-delay: 1.8s; }
.ginza-sky i:nth-child(5) { bottom: 22%; left: 22%; width: 4px; height: 4px; animation-delay: 2.2s; }
.ginza-sky i:nth-child(6) { top: 28%; left: 48%; width: 3px; height: 3px; animation-delay: .3s; }

@keyframes ginza-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 0.9; transform: scale(1.15) rotate(18deg); }
}

.ginza-moon {
  position: absolute;
  top: 78px;
  right: 28px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, #e7f6f6, #97c2c5 68%, #7f5da3);
  box-shadow: 0 0 36px rgba(151, 194, 197, 0.4);
  opacity: 0.9;
}

.ginza-moon::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -14px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #2a193d;
}

.ginza-beam {
  position: absolute;
  top: 0;
  right: 48px;
  width: 70px;
  height: 100%;
  background: linear-gradient(180deg, rgba(151, 194, 197, 0.16), transparent 42%);
  transform: rotate(12deg);
  transform-origin: top center;
}

.ginza-top,
.ginza-status,
.ginza-watch,
.ginza-stage {
  position: relative;
  z-index: 1;
}

.ginza-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(var(--sat, 0px) + 12px) 16px 8px;
}

.ginza-top .icon-btn {
  color: var(--gz-ink);
  background: rgba(47, 44, 94, 0.55);
}

.ginza-top p {
  margin: 0;
  letter-spacing: 0.28em;
  font-size: calc(10px * var(--font-scale));
  color: var(--gz-muted);
}

@font-face {
  font-family: "Ginza Knive";
  src: url("https://drive-cdn.mujian.me/19/%E5%AD%97%E4%BD%93/8b0fc139-11fb-4825-93bb-f3ef6459639b_Knive.otf") format("opentype");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Ginza Otome";
  src: url("https://drive-cdn.mujian.me/19/%E5%AD%97%E4%BD%93/a2c0a7c7-ca9c-4bdf-9dce-438bbdc2ba91_%E7%99%BD%E5%85%89%E4%B9%99%E5%A5%B3%E5%AD%97%E4%BD%93.ttf") format("truetype");
  font-display: swap;
}

.ginza-top h2 {
  flex: 1;
  margin: 0;
  font-family: "Ginza Otome", serif;
  font-size: calc(26px * var(--font-scale));
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.ginza-letter {
  flex: none;
  border: 1px solid rgba(212, 175, 55, 0.85);
  background: linear-gradient(180deg, #f7f0dc, #e8d7a8);
  color: #3a2a22;
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-family: "Ginza Otome", serif;
  font-size: calc(13px * var(--font-scale));
  letter-spacing: 0.18em;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.28);
}

.ginza-status[hidden],
.ginza-watch[hidden] {
  display: none;
}

.ginza-top-acts {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ginza-status {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  padding: 8px 16px 4px;
  align-items: stretch;
}

.ginza-status.is-collapsed {
  grid-template-columns: 1fr;
}

.ginza-status span {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(47, 44, 94, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.38);
  box-shadow: inset 0 0 0 1px rgba(246, 237, 212, 0.12);
  backdrop-filter: blur(10px);
  font-size: calc(13px * var(--font-scale));
}

.ginza-status small {
  color: var(--gz-muted);
  letter-spacing: 0.08em;
  font-size: calc(10px * var(--font-scale));
}

.ginza-status span.wide,
.ginza-fold-btn.wide {
  grid-column: 1 / -1;
}

.ginza-fold-btn {
  appearance: none;
  border: 1px solid rgba(151, 194, 197, 0.28);
  background: rgba(42, 25, 61, 0.55);
  color: var(--gz-muted);
  border-radius: 999px;
  padding: 6px 10px;
  font: inherit;
  font-size: calc(11px * var(--font-scale));
  cursor: pointer;
  white-space: nowrap;
}

.ginza-options .ginza-fold-btn {
  width: 100%;
  flex: 1 0 100%;
}

.ginza-watch {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 16px 6px;
  scrollbar-width: none;
}

.ginza-watch::-webkit-scrollbar {
  display: none;
}

.ginza-watch button {
  flex: none;
  border: 1px solid rgba(127, 93, 163, 0.55);
  background: rgba(47, 44, 94, 0.45);
  color: rgba(232, 244, 244, 0.78);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: calc(13px * var(--font-scale));
}

.ginza-watch button.on {
  color: #3a2a22;
  background: linear-gradient(180deg, #f7f0dc, #e4d4a4);
  border-color: rgba(212, 175, 55, 0.7);
}

.ginza-stage {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.ginza-stage::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.ginza-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 16px 18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ginza-row::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.ginza-card {
  flex: 0 0 78%;
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 210px;
  padding: 16px 14px 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(127, 93, 163, 0.38), rgba(42, 25, 61, 0.72));
  border: 1px solid rgba(212, 175, 55, 0.42);
  box-shadow: inset 0 0 0 1px rgba(246, 237, 212, 0.14), 0 16px 32px rgba(20, 8, 36, 0.35);
  color: var(--gz-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ginza-card:active {
  transform: translateY(1px);
}

.ginza-card header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.ginza-card b {
  font-size: calc(18px * var(--font-scale));
  font-weight: 650;
}

.ginza-card em {
  font-style: normal;
  color: #97c2c5;
  font-size: calc(12px * var(--font-scale));
}

.ginza-card small,
.ginza-card strong {
  font-weight: 500;
  line-height: 1.45;
}

.ginza-card small {
  color: var(--gz-muted);
}

.ginza-card p {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-size: calc(13px * var(--font-scale));
}

.ginza-card p span {
  flex: none;
  color: var(--gz-muted);
}

.ginza-looks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ginza-looks i {
  font-style: normal;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(127, 93, 163, 0.32);
  font-size: calc(12px * var(--font-scale));
}

.rank {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(127, 93, 163, 0.4);
}

.rank-UR { color: #2a193d; background: #97c2c5; }
.rank-SSR { color: #f4eefe; background: #7f5da3; }
.rank-SR { color: #f6eef4; background: #6d486c; }
.rank-R { color: #e8f4f4; background: rgba(151, 194, 197, 0.22); }
.rank-N { color: rgba(232, 244, 244, 0.7); background: rgba(47, 44, 94, 0.55); }

.ginza-tonight {
  padding: 12px 18px 28px;
}

.ginza-tonight blockquote {
  margin: 8px 0 16px;
  font-family: "Ginza Knive", var(--font-display);
  font-size: calc(28px * var(--font-scale));
  line-height: 1.35;
}

.ginza-dossier {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(47, 44, 94, 0.55);
  border: 1px solid rgba(151, 194, 197, 0.22);
}

.ginza-dossier p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}

.ginza-dossier span {
  color: var(--gz-muted);
}

.ginza-lead {
  margin: 16px 4px 0;
  color: rgba(232, 244, 244, 0.78);
  line-height: 1.6;
  font-size: calc(14px * var(--font-scale));
}

.ginza-empty {
  margin: 0;
  padding: 16px 18px;
  color: var(--gz-muted);
  line-height: 1.6;
  font-size: calc(14px * var(--font-scale));
}

.ginza-open {
  display: grid;
  gap: 10px;
  padding: 0 16px 18px;
}

.ginza-open-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(47, 44, 94, 0.55);
  border: 1px solid rgba(151, 194, 197, 0.22);
}

.ginza-open-card b {
  font-size: calc(16px * var(--font-scale));
}

.ginza-open-card small {
  color: var(--gz-muted);
  line-height: 1.45;
}

.ginza-open-card input,
.ginza-form textarea {
  width: 100%;
  border: 1px solid rgba(151, 194, 197, 0.28);
  background: rgba(42, 25, 61, 0.55);
  color: var(--gz-ink);
  border-radius: 12px;
  padding: 8px 10px;
  font: inherit;
  font-size: calc(14px * var(--font-scale));
  scrollbar-width: none;
}

.ginza-form textarea::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.ginza-open-card button,
.ginza-form button {
  justify-self: start;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: #97c2c5;
  color: #2a193d;
  font: inherit;
  font-size: calc(13px * var(--font-scale));
}

.ginza-log {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding: 8px 16px 18px;
}

.ginza-log blockquote {
  margin: 0;
  font-family: "Ginza Knive", var(--font-display);
  font-size: calc(26px * var(--font-scale));
  line-height: 1.35;
}

.ginza-log p,
.ginza-note,
.ginza-empty,
.ginza-lead,
.ginza-subs small {
  overflow-wrap: anywhere;
}

.ginza-log p {
  margin: 0;
  min-width: 0;
  line-height: 1.65;
  white-space: pre-wrap;
  font-size: calc(14px * var(--font-scale));
  padding: 10px 12px;
  border-radius: 14px;
  color: #f6edd4;
  background: linear-gradient(180deg, rgba(26, 14, 36, 0.92), rgba(42, 25, 61, 0.9));
  border: 1px solid rgba(212, 175, 55, 0.32);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.ginza-note {
  margin: 0;
  color: #97c2c5;
  line-height: 1.55;
  font-size: calc(13px * var(--font-scale));
}

.ginza-log p.mine {
  justify-self: end;
  max-width: 88%;
  padding: 8px 12px;
  border-radius: 16px 16px 4px 16px;
  color: #e8f4f4;
  background: linear-gradient(180deg, rgba(47, 44, 94, 0.94), rgba(42, 25, 61, 0.92));
  border-color: rgba(151, 194, 197, 0.45);
}

.ginza-log .live {
  color: var(--gz-muted);
}

.ginza-play[hidden] {
  display: none;
}

.ginza-play {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 12px 10px;
  background: linear-gradient(180deg, rgba(42, 25, 61, 0), rgba(26, 14, 36, 0.82) 46%);
  max-height: 46%;
}

.ginza-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: none;
  order: 3;
  position: relative;
  z-index: 8;
  pointer-events: auto;
}

.ginza-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  position: relative;
  z-index: 7;
}

.ginza-options > button {
  flex: 1;
  border-radius: 999px;
  border: 1px solid rgba(151, 194, 197, 0.28);
  background: transparent;
  color: var(--gz-ink);
  padding: 6px 0;
  font: inherit;
  font-size: calc(12px * var(--font-scale));
}

.ginza-options > button.on {
  background: linear-gradient(180deg, #f7f0dc, #e4d4a4);
  color: #3a2a22;
  border-color: rgba(212, 175, 55, 0.7);
}

.ginza-subs {
  flex: 1 0 100%;
  display: grid;
  gap: 6px;
  min-width: 0;
  max-height: 22vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ginza-subs button {
  text-align: left;
  border-radius: 12px;
  border: 1px solid rgba(151, 194, 197, 0.2);
  background: rgba(47, 44, 94, 0.55);
  color: var(--gz-ink);
  padding: 8px 10px;
  font: inherit;
  font-size: calc(13px * var(--font-scale));
}

.ginza-subs small {
  color: var(--gz-muted);
  padding: 2px 4px;
}

.ginza-form textarea {
  flex: 1;
  width: auto;
  resize: none;
  min-height: 44px;
}

.ginza-form button {
  flex: none;
  background: linear-gradient(180deg, #f7f0dc, #e4d4a4);
  color: #3a2a22;
}

.ginza-rite {
  position: relative;
  margin: 8px 14px 18px;
  padding: 26px 18px 20px;
  border: 1px solid rgba(180, 145, 86, 0.9);
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(255, 255, 255, 0.7), transparent 46%),
    linear-gradient(180deg, rgba(250, 245, 234, 0.96), rgba(232, 218, 190, 0.92));
  color: #3a2a22;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 0 0 6px rgba(255, 252, 244, 0.45);
}

.ginza-rite::before,
.ginza-rite::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid #b49156;
  pointer-events: none;
}

.ginza-rite::before {
  top: 6px;
  left: 6px;
  border-right: 0;
  border-bottom: 0;
}

.ginza-rite::after {
  right: 6px;
  bottom: 6px;
  border-left: 0;
  border-top: 0;
}

.ginza-invite {
  text-align: center;
  padding-top: 28px;
}

.ginza-star {
  display: block;
  margin: 0 auto 4px;
  color: #c9a24a;
  font-size: 18px;
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.7);
}

.ginza-invite-sub {
  letter-spacing: 0.28em;
  color: #8a6a32;
  font-size: calc(11px * var(--font-scale)) !important;
}

.love-script {
  display: block;
  margin: 4px 0 12px;
  font-family: "Ginza Knive", serif;
  font-size: calc(42px * var(--font-scale));
  font-weight: 400;
  color: #8a6a32;
  letter-spacing: 0.04em;
  line-height: 0.9;
}

.ginza-diamond {
  width: 168px;
  height: 168px;
  margin: 10px auto 18px;
  display: grid;
  place-items: center;
  text-align: center;
  transform: rotate(45deg);
  border: 1px solid rgba(180, 145, 86, 0.95);
  box-shadow: 0 0 0 8px rgba(255, 252, 244, 0.28), 0 0 28px rgba(212, 175, 55, 0.28);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.7), rgba(241, 228, 198, 0.92) 62%);
}

.ginza-diamond small,
.ginza-diamond strong,
.ginza-diamond em {
  transform: rotate(-45deg);
  display: block;
}

.ginza-diamond small {
  font-family: "Ginza Knive", serif;
  letter-spacing: 0.32em;
  font-size: 10px;
  color: #8a6a32;
}

.ginza-diamond strong {
  margin: 4px 0;
  font-family: "Ginza Otome", serif;
  font-size: calc(28px * var(--font-scale));
  font-weight: 400;
  background: linear-gradient(180deg, #fffdf6, #ead7a0);
  border: 1px solid rgba(180, 145, 86, 0.7);
  padding: 2px 14px;
}

.ginza-diamond em {
  font-family: "Ginza Knive", serif;
  font-style: italic;
  color: #8a6a32;
}

.ginza-invite em,
.ginza-rite .en {
  display: block;
  font-family: "Ginza Knive", serif;
  font-style: normal;
  letter-spacing: 0.22em;
  color: #8a6a32;
}

.ginza-invite h3,
.ginza-rite h3 {
  margin: 6px 0 10px;
  font-family: "Ginza Otome", serif;
  font-size: calc(28px * var(--font-scale));
  font-weight: 400;
  letter-spacing: 0.12em;
}

.ginza-classic-title {
  display: block;
  width: 100%;
  margin: 4px 0 8px;
  line-height: 1.25;
}

.ginza-rite-desc {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  color: var(--gz-muted);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.55;
  letter-spacing: 0.04em;
}

.ginza-prologue {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(20, 10, 30, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.28);
  color: rgba(232, 244, 244, 0.92);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.7;
  max-height: 36vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.ginza-saves {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(212, 175, 55, 0.28);
  text-align: left;
}

.ginza-save-list {
  display: grid;
  gap: 8px;
  margin: 8px 0 10px;
}

.ginza-save {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(180, 145, 86, 0.45);
  background: rgba(47, 44, 94, 0.45);
  color: #f6edd4;
  text-align: left;
  font: inherit;
  letter-spacing: 0;
}

.ginza-save.on {
  border-color: rgba(246, 237, 212, 0.7);
  background: linear-gradient(180deg, rgba(127, 93, 163, 0.55), rgba(42, 25, 61, 0.72));
}

.ginza-save b {
  font-size: calc(14px * var(--font-scale));
}

.ginza-save small {
  color: var(--gz-muted);
  font-size: calc(11px * var(--font-scale));
}

.ginza-save-acts {
  display: flex;
  gap: 8px;
}

.ginza-save-acts button.ghost {
  background: transparent;
  color: var(--gz-muted);
}

.ginza-invite p,
.ginza-rite p {
  margin: 0 0 8px;
  line-height: 1.65;
  font-size: calc(13px * var(--font-scale));
}

.ginza-invite button,
.ginza-rite > button[data-ginza-sign] {
  display: block;
  width: 100%;
  margin-top: 8px;
}

.ginza-rite button {
  border: 1px solid #b49156;
  background: linear-gradient(180deg, #6d1c1c, #3a0c0c);
  color: #f6edd4;
  border-radius: 999px;
  padding: 10px 16px;
  font: inherit;
  letter-spacing: 0.16em;
}

.ginza-rite button.ginza-rite-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: auto;
  margin: 0 0 10px;
  padding: 3px 12px 3px 8px;
  border: 1px solid rgba(180, 145, 86, 0.7);
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.96), rgba(236, 220, 176, 0.9));
  color: #6a4a22;
  font-family: "Ginza Otome", serif;
  font-size: calc(13px * var(--font-scale));
  letter-spacing: 0.28em;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.ginza-rite-back i {
  font-style: normal;
  font-family: inherit;
  letter-spacing: 0;
  font-size: 1.15em;
  line-height: 1;
}

.ginza-doors {
  display: grid;
  gap: 8px;
}

.ginza-doors button {
  text-align: left;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.45);
  color: #3a2a22;
  letter-spacing: 0.04em;
}

.ginza-doors b {
  display: block;
  font-size: calc(15px * var(--font-scale));
}

.ginza-doors small {
  color: rgba(58, 42, 34, 0.7);
}

.ginza-rite label {
  display: grid;
  gap: 4px;
  margin: 0 0 8px;
  font-size: calc(12px * var(--font-scale));
  color: #8a6a32;
}

.ginza-rite input,
.ginza-rite textarea,
.ginza-rite select {
  width: 100%;
  border: 1px solid rgba(180, 145, 86, 0.55);
  background: rgba(255, 255, 255, 0.55);
  color: #3a2a22;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: calc(13px * var(--font-scale));
}

.ginza-rite textarea {
  min-height: 72px;
  resize: none;
}

.ginza-rite-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ginza-clause {
  margin: 8px 0;
  padding: 10px;
  border: 1px dashed rgba(138, 11, 11, 0.45);
  font-size: calc(12px * var(--font-scale));
  line-height: 1.6;
}

.ginza-agree {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  color: #6d1c1c;
}

.ginza-agree input {
  width: auto;
}

.ginza-challenges {
  display: grid;
  gap: 6px;
  max-height: 240px;
  overflow: auto;
  scrollbar-width: none;
  margin: 8px 0 12px;
}

.ginza-challenges::-webkit-scrollbar {
  display: none;
}

.ginza-challenges button {
  text-align: left;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.4);
  color: #3a2a22;
  letter-spacing: 0;
  padding: 8px 10px;
}

.ginza-challenges button.on {
  background: #3a0c0c;
  color: #f6edd4;
}

.ginza-rite-warn {
  min-height: 1.2em;
  color: #8a0b0b;
  font-size: calc(12px * var(--font-scale));
}

.ginza-seal {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 148px;
  height: 148px;
  margin: -74px 0 0 -74px;
  border: 6px solid rgba(138, 11, 11, 0.85);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  color: rgba(138, 11, 11, 0.9);
  font-family: "Ginza Knive", serif;
  letter-spacing: 0.08em;
  text-align: center;
  background: radial-gradient(circle, rgba(138, 11, 11, 0.08), transparent 70%);
  pointer-events: none;
}

.ginza-seal.is-on {
  display: flex;
  animation: ginza-stamp 0.45s ease both;
}

.ginza-rite.is-shake {
  animation: ginza-shake 0.4s linear;
}

@keyframes ginza-stamp {
  from { transform: scale(2.2) rotate(-12deg); opacity: 0; }
  to { transform: scale(1) rotate(-8deg); opacity: 1; }
}

@keyframes ginza-shake {
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.ginza-watch button.fresh::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: #97c2c5;
  vertical-align: 2px;
}

.ginza-phone {
  position: relative;
  z-index: 3;
  width: 100%;
  flex: none;
  order: 2;
}

.ginza-phone[hidden] {
  display: none;
}

.ginza-phone.is-up {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 100%;
  margin-bottom: 4px;
  z-index: 5;
  width: auto;
  max-height: none;
  overflow: visible;
  pointer-events: none;
}

.ginza-phone.is-up .gz-watch-handle,
.ginza-phone.is-up .gz-watch-case {
  pointer-events: auto;
}

.ginza-phone.is-up .gz-watch-screen {
  max-height: none;
  overflow: visible;
}

.ginza-phone[hidden] {
  display: none;
}

.gz-watch-handle {
  display: block;
  width: 52px;
  height: 14px;
  margin: 0 auto -8px;
  border: 0;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #f8bbd9, #ec407a);
}

.gz-watch-handle i {
  display: block;
  width: 22px;
  height: 3px;
  margin: 5px auto 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.7);
}

.gz-watch-case {
  border-radius: 22px;
  padding: 7px;
  background: linear-gradient(145deg, #fce4ec, #f48fb1, #ec407a);
  box-shadow:
    0 0 0 2px #f8bbd9,
    0 8px 16px rgba(216, 27, 96, 0.28),
    inset 0 4px 8px rgba(255, 255, 255, 0.4);
}

.gz-watch-screen {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: linear-gradient(135deg, #0a0a1f 0%, #1a0a2e 50%, #0a0a1f 100%);
}

.ginza-phone.is-down .gz-watch-tiles,
.ginza-phone.is-down .gz-watch-apps {
  display: none;
}

.ginza-phone.is-up .gz-watch-tiles,
.ginza-phone.is-up .gz-watch-apps {
  display: flex;
}

.ginza-phone.is-up .gz-watch-tiles {
  display: grid;
}

.ginza-phone.is-up .gz-watch-apps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px 4px;
  overflow: visible;
}

.gz-watch-tiles {
  position: relative;
  z-index: 1;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.gz-watch-tiles button {
  min-width: 0;
  text-align: left;
  border-radius: 10px;
  border: 1px solid rgba(147, 112, 219, 0.28);
  background: rgba(45, 20, 60, 0.55);
  color: #e6d7f7;
  padding: 5px 7px;
  font: inherit;
  font-size: 10px;
}

.gz-watch-tiles small {
  display: block;
  color: #9b8bb4;
  letter-spacing: 0.06em;
  font-size: 9px;
  margin-bottom: 2px;
}

.gz-watch-apps {
  position: relative;
  z-index: 1;
  gap: 8px;
  overflow-x: auto;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(147, 112, 219, 0.25);
  background: rgba(20, 10, 30, 0.72);
  scrollbar-width: none;
}

.gz-watch-apps::-webkit-scrollbar {
  display: none;
}

.gz-app {
  flex: none;
  width: auto;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  border: 0;
  background: transparent;
  color: #f6edd4;
  font: inherit;
  font-size: 10px;
  position: relative;
}

.gz-app-ico {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(75, 0, 130, 0.45), rgba(138, 43, 226, 0.3));
}

.gz-app-ico img,
.gz-app img {
  width: 140%;
  height: 140%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.gz-app i {
  position: absolute;
  top: -2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  border-radius: 8px;
  background: #ff4d6d;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  line-height: 14px;
}

.gz-watch-mini {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  color: #f6edd4;
  font-family: "Ginza Otome", serif;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 15px;
  line-height: 1.2;
  padding: 4px 0 2px;
  cursor: pointer;
}

.ginza-sheet {
  position: absolute;
  inset: 44px 0 0;
  z-index: 20;
  background: rgba(8, 4, 16, 0.55);
  padding: 10px 12px 18px;
  overflow: auto;
}

.ginza-sheet[hidden] {
  display: none;
}

.gz-sheet-card {
  min-height: 70%;
  border-radius: 18px;
  border: 1px solid rgba(199, 21, 133, 0.35);
  background: linear-gradient(180deg, rgba(20, 8, 15, 0.96), rgba(10, 5, 8, 0.96));
  color: #f6edd4;
  overflow: hidden;
}

.gz-sheet-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(199, 21, 133, 0.25);
}

.gz-sheet-card h3 {
  margin: 0;
  font-size: 16px;
}

.gz-sheet-card header button {
  border: 0;
  background: transparent;
  color: #ff9ec8;
  font: inherit;
}

.gz-sheet-body {
  padding: 10px 8px 16px;
}

.gz-sheet-tabs {
  display: flex;
  gap: 6px;
  padding: 0 8px 8px;
  overflow-x: auto;
}

.gz-sheet-tabs button {
  flex: none;
  border-radius: 999px;
  border: 1px solid rgba(199, 21, 133, 0.35);
  background: rgba(199, 21, 133, 0.12);
  color: #f6edd4;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
}

.gz-sheet-tabs button.on {
  background: #ff1493;
  border-color: #ff1493;
}

.gz-sheet-list,
.gz-chal-list {
  display: grid;
  gap: 8px;
  padding: 0 8px;
}

.gz-sheet-list button,
.gz-chal {
  text-align: left;
  border-radius: 12px;
  border: 1px solid rgba(199, 21, 133, 0.3);
  background: rgba(199, 21, 133, 0.12);
  color: inherit;
  padding: 10px;
  font: inherit;
}

.gz-chal.on,
.gz-chal.got {
  border-color: #ffd700;
}

.gz-chal i,
.gz-chal em {
  display: inline-block;
  font-style: normal;
  font-size: 11px;
  color: #ffd700;
}

.gz-chal small {
  display: block;
  margin-top: 4px;
  color: rgba(246, 237, 212, 0.7);
}

.gz-title {
  display: inline-block;
  margin: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 215, 0, 0.16);
  color: #ffd700;
}

.gz-night-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 8px 12px;
}

.gz-night {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  border: 1px solid rgba(199, 21, 133, 0.3);
  background: rgba(199, 21, 133, 0.12);
  color: inherit;
  padding: 10px 8px;
  font: inherit;
}

.gz-night i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ff1493;
  font-style: normal;
  font-size: 11px;
  display: grid;
  place-items: center;
}

.gz-slot {
  margin: 8px;
  padding: 16px 12px;
  border-radius: 16px;
  border: 2px solid #c71585;
  text-align: center;
  background: linear-gradient(180deg, #1a0a12, #0a0508);
}

.gz-slot strong {
  display: block;
  margin: 8px 0 12px;
  font-family: "Ginza Knive", serif;
  font-size: 42px;
  color: #ff1493;
  text-shadow: 0 0 18px rgba(255, 20, 147, 0.7);
}

.gz-slot strong.spin {
  animation: ginza-shake 0.12s linear infinite;
}

.gz-slot button {
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  background: linear-gradient(180deg, #ff1493, #c71585);
  color: #fff;
  font: inherit;
}

.gz-slot button[disabled] {
  opacity: 0.6;
}

.nest-screen {
  background: var(--bg);
}

.nest-screen .nav-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 36px;
  align-items: center;
  background: transparent;
  border-bottom: 0;
  pointer-events: none;
}

.nest-screen .nav-header .icon-btn,
.nest-screen .nav-header h2,
.nest-screen .nest-title {
  pointer-events: auto;
}

.nest-screen .nav-header h2 {
  text-align: center;
}

.nest-screen .nav-header .icon-btn {
  background: transparent;
  color: var(--ink);
}

.nest-screen[data-sky="night"] .nav-header .icon-btn,
.nest-screen[data-sky="night"] .nest-title,
.nest-screen[data-sky="night"] .nest-gesture {
  color: #f4f7fb;
}

.nest-title {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: center;
  font-family: var(--font-display);
  font-size: calc(22px * var(--font-scale));
  font-weight: 600;
  letter-spacing: 0.08em;
}

.nest-title:focus {
  outline: none;
}

.nest-pack {
  display: grid;
  place-items: center;
  padding: 0;
}

.nest-pack svg {
  width: 24px;
  height: 24px;
  display: block;
}

.nest-pack.is-open {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.nest-now {
  position: absolute;
  top: 108px;
  left: 16px;
  right: 16px;
  z-index: 4;
  min-height: 108px;
  margin: 0;
  padding: 16px 18px 18px;
  border-radius: 18px;
  background: rgba(255, 252, 250, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 10px 28px rgba(80, 50, 50, 0.08);
  pointer-events: none;
}

.nest-now b {
  display: block;
  font-family: var(--font-ui);
  font-size: calc(15px * var(--font-scale));
  font-weight: 750;
}

.nest-now p {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: calc(16px * var(--font-scale));
  line-height: 1.55;
}

.nest-now[hidden] {
  display: none !important;
}

.nest-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  container-type: size;
  display: grid;
  place-items: stretch;
  padding: 0;
  background: transparent;
}

.nest-room {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  touch-action: none;
  user-select: none;
}

.nest-room svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.nest-room .floor { fill: #cfc7be; }
.nest-room .grid { stroke: #c0b6ac; stroke-width: 1; }
.nest-room .planks { display: none; stroke: #d7ae78; stroke-width: 1.4; }
.nest-room .stain { fill: #c4bbb2; opacity: 0.85; }
.nest-room .glow { display: none; fill: rgba(255, 206, 130, 0.28); }
.nest-room .wall.left { fill: #d9d2c9; }
.nest-room .wall.right { fill: #e6dfd6; }
.nest-room .patch { fill: #cfc6bc; }
.nest-room .base { fill: #c3bbb2; }
.nest-room .frame { fill: #efe8e1; }
.nest-room .glass { fill: #c5d5de; }
.nest-room .mullion { stroke: rgba(255, 255, 255, 0.72); stroke-width: 1.4; }
.nest-room .curtain { display: none; }
.nest-room .curtain polygon { fill: #f3c3cf; }
.nest-room .curtain .drape.deep { fill: #e7a8b8; }
.nest-room .lamp { display: none; }
.nest-room .lamp line { stroke: #8d7568; stroke-width: 1.4; }
.nest-room .lamp polygon { fill: #f6d98a; }
.nest-room .lamp circle { fill: #fff4c8; }
.nest-room .lights { display: none; }
.nest-room .lights polyline { fill: none; stroke: rgba(214, 176, 96, 0.7); stroke-width: 1; }
.nest-room .lights circle { fill: #ffe7a3; }

.nest-room.has-floor .floor { fill: #e8c59a; }
.nest-room.has-floor .grid,
.nest-room.has-floor .stain { display: none; }
.nest-room.has-floor .planks { display: block; }
.nest-room.has-wall .wall.left { fill: #f0e0d4; }
.nest-room.has-wall .wall.right { fill: #fbf4ee; }
.nest-room.has-wall .patch { display: none; }
.nest-room.has-wall .base { fill: #e7d3c4; }
.nest-room.has-wall .glass { fill: #d7e7ef; }
.nest-room.has-curtain .curtain { display: block; }
.nest-room.has-light .lamp,
.nest-room.has-light .glow { display: block; }
.nest-room.is-cozy .glass { fill: #f3d7c4; }
.nest-room.is-cozy .lights { display: block; }
.nest-room.is-cozy .glow { fill: rgba(255, 196, 120, 0.42); }

.nest-pieces { position: absolute; inset: 0; }

.nest-piece {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  transform: translate(-50%, -100%);
  cursor: grab;
  touch-action: none;
}

.nest-piece.is-rug { transform: translate(-50%, -58%); }
.nest-piece.is-art { transform: translate(-50%, -50%); cursor: pointer; }
.nest-piece:active { cursor: grabbing; }

.nest-piece.is-on .furn {
  outline: 1.5px dashed #c46b7a;
  outline-offset: 4px;
  border-radius: 8px;
}

.furn { position: relative; display: block; filter: drop-shadow(0 7px 3px rgba(80, 52, 42, 0.16)); }
.furn b { position: absolute; display: block; }

.furn.rug {
  width: 96px;
  height: 50px;
  border-radius: 46%;
  background: #f0c3cf;
  box-shadow: inset 0 0 0 7px #f7dbe3;
  transform: scaleY(0.72);
}

.furn.sofa { width: 78px; height: 48px; }
.furn.sofa .back {
  left: 8px; right: 16px; top: 4px; height: 26px;
  background: #c4897c;
  border-radius: 8px 8px 3px 3px;
  transform: skewX(-18deg);
}
.furn.sofa .seat {
  left: 14px; right: 12px; bottom: 6px; height: 16px;
  background: #f4e6de;
  border-radius: 5px;
  transform: skewX(-18deg);
}
.furn.sofa .arm {
  bottom: 4px; width: 12px; height: 22px;
  background: #b57b70;
  border-radius: 4px;
}
.furn.sofa .arm.l { left: 6px; transform: skewY(18deg); }
.furn.sofa .arm.r { right: 8px; transform: skewY(-12deg); }

.furn.bed { width: 86px; height: 52px; }
.furn.bed .head {
  left: 2px; top: 8px; width: 16px; height: 34px;
  background: #d08a84;
  border-radius: 4px;
  transform: skewY(-22deg);
}
.furn.bed .sheet {
  left: 16px; top: 16px; width: 62px; height: 28px;
  background: #f7f1ea;
  border-radius: 6px;
  transform: skewX(-20deg);
}
.furn.bed .quilt {
  left: 32px; top: 22px; width: 42px; height: 20px;
  background: linear-gradient(180deg, #f4c3ce, #e7a3b4);
  border-radius: 0 8px 8px 4px;
  transform: skewX(-20deg);
}
.furn.bed .pillow {
  left: 18px; top: 18px; width: 16px; height: 11px;
  background: #fff;
  border-radius: 4px;
  transform: skewX(-20deg);
  box-shadow: 0 10px 0 #fffdfb;
}

.furn.desk { width: 72px; height: 58px; }
.furn.desk .top {
  left: 8px; bottom: 12px; width: 56px; height: 14px;
  background: #e0b07a;
  border-radius: 3px;
  transform: skewX(-18deg);
}
.furn.desk .leg {
  left: 16px; bottom: 2px; width: 40px; height: 12px;
  background: #c49262;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  transform: skewX(-16deg);
}
.furn.desk .monitor {
  left: 30px; bottom: 24px; width: 26px; height: 18px;
  background: #3c4450;
  border-radius: 3px;
  transform: skewX(-10deg);
}
.furn.desk .monitor s {
  display: block;
  margin: 2px;
  height: 11px;
  border-radius: 2px;
  background: linear-gradient(180deg, #e7fbff, #8fd4ee);
}
.furn.desk .key {
  left: 16px; bottom: 15px; width: 20px; height: 5px;
  background: #f6f1ea;
  border-radius: 2px;
  transform: skewX(-18deg);
}

.furn.shelf { width: 40px; height: 58px; }
.furn.shelf .case {
  inset: 0;
  background: #d7b48a;
  border-radius: 3px;
  box-shadow: inset 0 0 0 3px #c9a27a;
}
.furn.shelf .books {
  left: 6px; right: 6px; top: 6px; height: 44px;
  background:
    linear-gradient(#c45d5d, #c45d5d) 0 0 / 6px 12px no-repeat,
    linear-gradient(#6f8f72, #6f8f72) 7px 0 / 5px 12px no-repeat,
    linear-gradient(#d4a24c, #d4a24c) 13px 0 / 6px 12px no-repeat,
    linear-gradient(#7f8eb5, #7f8eb5) 20px 0 / 5px 12px no-repeat,
    linear-gradient(#c45d5d, #c45d5d) 0 16px / 7px 12px no-repeat,
    linear-gradient(#7f8eb5, #7f8eb5) 8px 16px / 6px 12px no-repeat,
    linear-gradient(#d4a24c, #d4a24c) 15px 16px / 6px 12px no-repeat,
    linear-gradient(#6f8f72, #6f8f72) 2px 32px / 8px 12px no-repeat,
    linear-gradient(#c45d5d, #c45d5d) 12px 32px / 7px 12px no-repeat;
}

.furn.table { width: 48px; height: 28px; }
.furn.table .top {
  left: 2px; right: 2px; bottom: 4px; height: 14px;
  background: #e6c089;
  border-radius: 40%;
  transform: scaleY(0.7);
}
.furn.table .cup {
  left: 18px; bottom: 12px; width: 8px; height: 10px;
  background: #f7f4ef;
  border-radius: 2px 2px 3px 3px;
  box-shadow: inset 0 3px 0 #e7b7c3;
}

.furn.plant { width: 36px; height: 52px; }
.furn.plant .pot {
  left: 8px; bottom: 0; width: 18px; height: 14px;
  background: #d07a55;
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
}
.furn.plant .leaf {
  width: 16px; height: 18px; border-radius: 50% 50% 50% 0;
  background: #7da36a;
}
.furn.plant .leaf.a { left: 4px; top: 8px; transform: rotate(-20deg); }
.furn.plant .leaf.b { left: 14px; top: 2px; background: #8fb67a; transform: rotate(24deg); }
.furn.plant .leaf.c { left: 10px; top: 16px; width: 14px; height: 14px; background: #6d9460; }

.furn.art {
  width: 34px; height: 42px;
  background: #f7f1ea;
  border: 3px solid #c9847a;
  border-radius: 2px;
}
.furn.art b {
  left: 4px; right: 4px; top: 4px; height: 26px;
  border-radius: 2px;
  background: linear-gradient(160deg, #f6d7c2, #e7a0b0 42%, #8fb8c9);
}

.nest-piece.rot-1 .furn { transform: scaleX(-1); }
.nest-piece.rot-2 .furn { transform: rotate(8deg); }
.nest-piece.rot-3 .furn { transform: scaleX(-1) rotate(6deg); }
.nest-piece.is-rug.rot-1 .furn { transform: scaleX(-1) scaleY(0.72); }
.nest-piece.is-rug.rot-2 .furn { transform: rotate(8deg) scaleY(0.72); }
.nest-piece.is-rug.rot-3 .furn { transform: scaleX(-1) rotate(6deg) scaleY(0.72); }

.nest-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.nest-dock:has(.nest-sheet:not([hidden])) {
  pointer-events: auto;
  background: rgba(255, 252, 250, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  border-top: 1px solid rgba(255, 255, 255, 0.62);
}

.nest-edit:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 12px 0;
  background: transparent;
}

.nest-edit .ghost-btn {
  border: 0;
  border-radius: 14px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
}

.nest-size {
  min-width: 2.6em;
  text-align: center;
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  color: var(--ink-soft);
}

#nest-edit-name {
  flex: 1;
  min-width: 0;
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nest-sheet:not([hidden]) {
  display: block;
  max-height: 36vh;
  overflow: auto;
  padding: 8px 12px 12px;
  background: transparent;
  border-top: 0;
}

.nest-group { margin-bottom: 8px; }
.nest-finish { margin-bottom: 10px; }
.nest-group b {
  display: block;
  margin: 0 4px 6px;
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--ink-soft);
}

.nest-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.nest-dots::-webkit-scrollbar { display: none; }

.nest-dot {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(70, 40, 40, 0.18);
  cursor: pointer;
}

.nest-dot.is-on {
  box-shadow: 0 0 0 2px var(--strong), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.nest-dot-name {
  flex: none;
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
  color: var(--ink-soft);
}

.nest-light {
  border: 0;
  border-radius: 999px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font: inherit;
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
}

.nest-light.is-on {
  box-shadow: 0 0 0 2px var(--strong);
}

.nest-seg {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.nest-seg::-webkit-scrollbar,
.nest-preview::-webkit-scrollbar { display: none; }

.nest-seg button {
  flex: none;
  border: 0;
  background: transparent;
  border-radius: 14px;
  padding: 8px 14px;
  font: inherit;
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
  cursor: pointer;
}

.nest-seg button small {
  margin-left: 4px;
  font-size: 0.78em;
  font-weight: 700;
  opacity: 0.72;
}

.nest-seg button.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(70, 24, 36, 0.08);
}

.nest-seg button.is-in::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--strong);
  vertical-align: 2px;
}

.nest-preview {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 2px 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.nest-card {
  flex: none;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 0;
  padding: 8px 8px 10px;
  border-radius: 16px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  box-shadow: 0 8px 22px rgba(70, 24, 36, 0.06);
  cursor: pointer;
}

.nest-card span {
  font-size: calc(11px * var(--font-scale));
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
}

.nest-card i,
.nest-card .nest-thumb,
.nest-card .nest-swatch {
  width: 76px;
  height: 76px;
  border-radius: 14px;
  object-fit: contain;
  background: #f6f1ea;
  box-shadow: inset 0 0 0 1px rgba(90, 60, 50, 0.08);
  flex: none;
}

.nest-card[data-kind="wall"] i { background: #f6ebe3; }
.nest-card[data-kind="floor"] i { background: #e0b07a; }
.nest-card[data-kind="curtain"] i { background: #f3c3cf; }
.nest-card[data-kind="light"] i { background: #f6d98a; }
.nest-card[data-kind="rug"] i { background: #f0c3cf; }
.nest-card[data-kind="sofa"] i { background: #c4897c; }
.nest-card[data-kind="bed"] i { background: #f4c3ce; }
.nest-card[data-kind="desk"] i { background: #8fd4ee; }
.nest-card[data-kind="shelf"] i { background: #d7b48a; }
.nest-card[data-kind="table"] i { background: #e6c089; }
.nest-card[data-kind="plant"] i { background: #7da36a; }
.nest-card[data-kind="art"] i { background: #e7a0b0; }
.nest-card[data-kind="lamp"] i { background: #f6d98a; }
.nest-card[data-kind="vanity"] i { background: #9ec4d4; }
.nest-card[data-kind="fridge"] i { background: #f4efe8; }
.nest-card[data-kind="sideboard"] i { background: #e6d3b0; }
.nest-card[data-kind="toilet"] i { background: #f7f4ef; }
.nest-card[data-kind="cabinet"] i { background: #c9b79a; }
.nest-card[data-kind="blind"] i { background: #f4efe6; }
.nest-card[data-kind="kitchen"] i { background: #d8c4a4; }
.nest-card[data-kind="washer"] i { background: #e8eef2; }

.nest-card.is-on {
  box-shadow: 0 0 0 2px var(--strong), 0 8px 22px rgba(70, 24, 36, 0.06);
}

.nest-stage {
  position: relative;
  place-items: stretch;
}

.nest-room {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  max-height: none;
}

.nest-room canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.nest-invite {
  pointer-events: auto;
  border: 0;
  border-radius: 999px;
  margin-right: 4px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: calc(13px * var(--font-scale));
  font-weight: 750;
}

.nest-who {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -120%);
  display: grid;
  gap: 2px;
  max-width: 168px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 252, 250, 0.88);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 8px 24px rgba(80, 50, 50, 0.12);
}

.nest-who b,
.nest-cast-card b {
  font-weight: 750;
}

.nest-who b {
  font-size: calc(12px * var(--font-scale));
}

.nest-who span {
  font-size: calc(13px * var(--font-scale));
  line-height: 1.35;
}

.nest-cast {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 18px;
  z-index: 6;
}

.nest-cast-card {
  max-height: 280px;
  overflow: auto;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 252, 250, 0.9);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 32px rgba(80, 50, 50, 0.14);
}

.nest-cast-card p {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
}

.nest-cast-card button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-size: calc(14px * var(--font-scale));
}

.nest-cast-card button.is-on {
  background: color-mix(in srgb, var(--strong) 16%, white);
}

.nest-cast-card i {
  color: var(--ink-soft);
  font-style: normal;
  font-size: calc(12px * var(--font-scale));
}

.nest-who[hidden],
.nest-cast[hidden],
.nest-talk[hidden] {
  display: none !important;
}

.nest-talk {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 28px;
  z-index: 6;
}

.nest-talk-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 252, 250, 0.94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 32px rgba(80, 50, 50, 0.16);
}

.nest-talk-card b {
  font-family: var(--font-ui);
  font-size: calc(15px * var(--font-scale));
  font-weight: 750;
}

.nest-talk-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.45;
}

.nest-talk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nest-talk-chips button,
.nest-talk-row button {
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
}

.nest-talk-chips button {
  padding: 7px 12px;
}

.nest-talk-card input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: calc(14px * var(--font-scale));
}

.nest-talk-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.nest-talk-row button {
  padding: 8px 14px;
}

.nest-talk-row button[type="submit"] {
  background: var(--ink);
  color: #fffaf7;
}

.nest-gesture {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  margin: 0;
  text-align: center;
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  pointer-events: none;
}

.bond-veil[hidden],
.bond-island[hidden] {
  display: none !important;
}

.bond-veil {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.42s ease;
}

.phone.bond-open .bond-veil {
  opacity: 1;
  pointer-events: auto;
}

.bond-island {
  --bond-stroke: #fff7f5;
  --bond-track: rgba(255, 247, 245, 0.28);
  position: absolute;
  z-index: 46;
  top: calc(var(--sat, 0px) + 8px);
  left: 50%;
  width: 128px;
  height: auto;
  max-height: 32px;
  transform: translateX(-50%);
  border-radius: 18px;
  overflow: clip;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", "Segoe UI", sans-serif;
  color: #fff7f5;
  background: color-mix(in srgb, var(--ink) 90%, #140c0e);
  border: 1px solid transparent;
  box-shadow: 0 8px 18px rgba(28, 12, 16, 0.18);
  transition:
    width 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    max-height 0.56s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.4s ease,
    color 0.32s ease,
    border-color 0.4s ease,
    box-shadow 0.45s ease;
}

.phone.bond-open .bond-island {
  --bond-stroke: var(--strong);
  --bond-track: color-mix(in srgb, var(--ink) 28%, transparent);
  width: calc(100% - 28px);
  height: auto;
  min-height: min(520px, 68%);
  max-height: min(620px, 78%);
  border-radius: 30px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  border-color: color-mix(in srgb, white 72%, transparent);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 22px 48px rgba(48, 20, 28, 0.16);
}

.bond-face {
  height: 32px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0 12px;
  cursor: pointer;
}

.bond-face strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.bond-face em {
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.02em;
  opacity: 0.86;
}

.bond-ring {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: conic-gradient(var(--bond-stroke) calc(var(--p) * 1%), var(--bond-track) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.4px), #000 calc(100% - 2.2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.4px), #000 calc(100% - 2.2px));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent);
}

.bond-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 6px 20px 18px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  scrollbar-width: none;
  transition: opacity 0.32s ease, transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.bond-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.phone.bond-open .bond-body {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0.1s;
}

.bond-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.bond-kicker,
.bond-step,
.bond-mem-month {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}

.bond-step,
.bond-mem-month {
  font-variant-numeric: tabular-nums;
}

.bond-attitude {
  margin: 8px 0 0;
  max-width: 28em;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}

.bond-stages {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 14px;
}

.bond-stages span {
  min-width: 0;
  text-align: center;
  font-size: 10px;
  line-height: 1.2;
  color: color-mix(in srgb, var(--ink) 38%, transparent);
}

.bond-stages i {
  display: block;
  height: 2px;
  margin-bottom: 5px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.bond-stages .is-done {
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

.bond-stages .is-done i,
.bond-stages .is-on i {
  background: var(--strong);
}

.bond-stages .is-on {
  color: var(--ink);
  font-weight: 600;
}

.bond-meter {
  margin-top: 16px;
}

.bond-meter-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}

.bond-meter-top b {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--ink);
}

.bond-meter-bar {
  height: 2px;
  margin-top: 8px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  overflow: hidden;
}

.bond-meter-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--strong);
}

.bond-tune {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  cursor: pointer;
}

.bond-tune-box[hidden] {
  display: none !important;
}

.bond-island input[type="range"] {
  width: 100%;
  margin: 8px 0 0;
  accent-color: var(--strong);
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
}

.bond-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.bond-facts {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}

.bond-facts div {
  min-width: 0;
}

.bond-facts div:last-child {
  grid-column: 1 / -1;
}

.bond-facts span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.bond-facts b {
  display: block;
  margin-top: 3px;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
}

.bond-facts b.is-empty {
  font-weight: 400;
  color: color-mix(in srgb, var(--ink) 34%, transparent);
}

.bond-mem-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 20px 0 8px;
}

.bond-mem-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.bond-axis {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 2px 0 8px;
  scrollbar-width: none;
}

.bond-axis::-webkit-scrollbar {
  display: none;
}

.bond-day {
  flex: none;
  width: 36px;
  padding: 6px 0 7px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.bond-day b,
.bond-day small {
  display: block;
  font-weight: 500;
}

.bond-day b {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.bond-day small {
  margin-top: 1px;
  font-size: 9px;
}

.bond-day i {
  display: block;
  width: 4px;
  height: 4px;
  margin: 5px auto 0;
  border-radius: 50%;
  background: transparent;
}

.bond-day.has-note i {
  background: color-mix(in srgb, var(--strong) 80%, white);
}

.bond-day.is-on {
  background: color-mix(in srgb, white 62%, transparent);
}

.bond-mem-block {
  padding-top: 8px;
}

.bond-mem-block.is-on .bond-mem-date {
  color: var(--ink);
}

.bond-mem-date {
  margin: 0;
  padding: 6px 2px 0;
  font-size: 11px;
  color: var(--ink-soft);
}

.bond-empty {
  margin: 4px 0 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.bond-mem-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px;
  align-items: center;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.bond-mem-open {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 8px;
  align-items: baseline;
  width: 100%;
  margin: 0;
  padding: 9px 2px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.bond-mem-ops {
  display: flex;
  gap: 2px;
}

.bond-mem-ops button,
.bond-stub-tools button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.bond-mem-ops button:active,
.bond-stub-tools button:active {
  color: var(--ink);
  background: color-mix(in srgb, white 70%, transparent);
}

.bond-mem-item time {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.bond-mem-item strong {
  font-size: 13px;
  font-weight: 500;
}

.bond-mem-item em {
  font-style: normal;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, white 72%, transparent);
}

.bond-ticket[hidden] {
  display: none !important;
}

.bond-ticket {
  position: absolute;
  z-index: 3;
  left: 8px;
  right: 8px;
  top: 40px;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 10px 10px 12px;
  overflow: hidden;
  border-radius: 24px;
  background: rgba(246, 232, 230, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.bond-ticket-back {
  align-self: flex-start;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, white 55%, transparent);
  color: var(--ink-soft);
  font-size: 12px;
  cursor: pointer;
}

.bond-stub {
  position: relative;
  flex: none;
  max-height: 100%;
  overflow: auto;
  padding: 16px 18px 16px 26px;
  border-radius: 16px;
  color: var(--ink);
  background: #fffdfc;
  box-shadow: 0 14px 32px rgba(48, 20, 28, 0.08);
  animation: bond-stub-in 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}

.bond-stub::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 12px;
  background: radial-gradient(circle at 0 8px, rgba(246, 232, 230, 0.96) 6px, transparent 6.5px) 0 0 / 12px 22px repeat-y;
  pointer-events: none;
}

.bond-stub-tools {
  display: flex;
  gap: 2px;
}

.bond-edit-label {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}

.bond-edit-label input,
.bond-edit-label textarea {
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, white 72%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.bond-edit-label textarea {
  min-height: 140px;
  resize: vertical;
}

.bond-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.bond-edit-actions button {
  margin: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, white 70%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.bond-edit-actions [data-bond-save] {
  background: var(--ink);
  color: white;
}

.bond-stub-top,
.bond-stub-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}

.bond-stub-top {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: -16px -18px 0 -26px;
  padding: 14px 14px 8px 26px;
  background: #fffdfc;
}

.bond-stub-x {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.bond-stub-from {
  margin: 8px 0 0;
  font-size: 13px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-soft);
}

.bond-stub-from b {
  font-weight: 600;
  color: var(--ink);
}

.bond-stub h3 {
  margin: 10px 0 0;
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}

.bond-stub-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.8fr;
  gap: 8px;
  margin-top: 14px;
}

.bond-stub-grid span {
  display: block;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--ink) 46%, transparent);
}

.bond-stub-grid b {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.bond-stub-cut {
  margin: 12px 0 10px;
  border: 0;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent);
}

.bond-stub-body {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  white-space: pre-wrap;
}

.bond-stub-foot {
  margin-top: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
}

@keyframes bond-stub-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bond-island,
  .bond-body,
  .bond-veil,
  .bond-stub {
    transition: none;
    animation: none;
  }
}

.screen[data-screen="tube"],
.screen[data-screen="tube-room"] {
  color-scheme: dark;
  background: #0c0b10;
  color: #f6efe8;
}
.phone:has(.screen[data-screen="tube"].active) .status-bar,
.phone:has(.screen[data-screen="tube-room"].active) .status-bar {
  color: #f6ece8;
}
.tube-top {
  position: absolute;
  z-index: 4;
  top: calc(var(--sat, 0px) + 8px);
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.screen[data-screen="tube"] .icon-btn,
.screen[data-screen="tube-room"] .icon-btn {
  background: rgba(12, 10, 14, 0.45);
  color: #f6efe8;
}
.tube-tabs {
  display: flex;
  gap: 6px;
  overflow: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.tube-tabs::-webkit-scrollbar { display: none; }
.tube-tab {
  border: 0;
  background: transparent;
  color: rgba(246, 239, 232, 0.62);
  font: inherit;
  font-size: 14px;
  padding: 6px 2px;
}
.tube-tab.on { color: #fff; font-weight: 650; }
.tube-hall {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.tube-hall::-webkit-scrollbar,
.tube-log::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.tube-card,
.tube-pkcard {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border: 0;
  padding: 0;
  color: inherit;
  background: #16141c;
  overflow: hidden;
}
.tube-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.tube-card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 6, 12, 0.42), transparent 22%, transparent 40%, rgba(8, 6, 12, 0.9));
}
.tube-card.is-off img { filter: saturate(0.7) brightness(0.72); }
.tube-live {
  position: absolute;
  top: 78px;
  left: 16px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e23b4a;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.tube-live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #fff;
  vertical-align: 1px;
  animation: tube-pulse 1.4s ease infinite;
}
.tube-card.is-off .tube-live::before { animation: none; opacity: 0.5; }
@keyframes tube-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.tube-card.is-off .tube-live { background: rgba(255, 255, 255, 0.16); }
.tube-card-feed {
  position: absolute;
  left: 14px;
  right: 48px;
  bottom: 136px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  pointer-events: none;
}
.tube-card-say {
  display: block;
  padding: 8px 10px 9px;
  border-radius: 14px;
  background: rgba(16, 10, 22, 0.84);
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
}
.tube-card-say b {
  display: block;
  margin-bottom: 2px;
  color: #e7b4c0;
  font-size: 11px;
  font-weight: 600;
}
.tube-card-dm {
  display: flex;
  gap: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.tube-card-dm b { color: #d7c4de; font-weight: 500; flex: none; }
.tube-card-copy {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}
.tube-card-copy strong { font-size: 28px; font-weight: 650; }
.tube-card-copy em {
  font-style: normal;
  font-size: 15px;
  font-weight: 560;
  line-height: 1.35;
  opacity: 0.92;
  max-width: 18em;
}
.tube-card-copy small { opacity: 0.7; }
.tube-pkcard { display: grid; grid-template-columns: 1fr 1fr; }
.tube-pkcard span {
  background-size: cover;
  background-position: center 18%;
}
.tube-pkcard em,
.tube-pkcard small {
  position: absolute;
  left: 16px;
  color: #fff;
  font-style: normal;
}
.tube-pkcard em { bottom: 36px; font-size: 18px; }
.tube-pkcard small {
  top: 78px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e23b4a;
  font-size: 11px;
}
.tube-empty {
  margin: 40vh 20px 0;
  text-align: center;
  opacity: 0.7;
}
.screen[data-screen="tube"] .tube-dock,
.screen[data-screen="tube-room"] .tube-dock {
  background: rgba(16, 15, 22, 0.88);
  color: #f4efe9;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.screen[data-screen="tube"] .tube-dock select,
.screen[data-screen="tube-room"] .tube-dock select {
  background: rgba(255, 255, 255, 0.1);
  color: #f4efe9;
}
.tube-stage { position: absolute; inset: 0; }
.tube-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 18%;
}
.tube-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 6, 12, 0.35), transparent 24%, rgba(8, 6, 12, 0.2) 48%, rgba(8, 6, 12, 0.88));
}
.tube-head {
  position: absolute;
  z-index: 2;
  top: calc(var(--sat, 0px) + 8px);
  left: 8px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tube-head strong { display: block; font-size: 16px; }
.tube-head em { font-style: normal; font-size: 12px; opacity: 0.8; }
.tube-head div { flex: 1; min-width: 0; }
.tube-follow {
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  background: #e23b4a;
  color: #fff;
  font: inherit;
}
.tube-follow.on { background: rgba(255, 255, 255, 0.16); }
.tube-heat {
  position: absolute;
  z-index: 2;
  top: 86px;
  left: 16px;
  right: 16px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
}
.tube-heat i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #e7b4c0;
}
.tube-heat span {
  position: absolute;
  right: 0;
  top: 6px;
  font-size: 11px;
  opacity: 0.75;
}
.tube-crowd {
  position: absolute;
  z-index: 2;
  left: 12px;
  right: 12px;
  bottom: 62px;
  height: 132px;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16px);
  mask-image: linear-gradient(to bottom, transparent, #000 16px);
}
#tube-fx-slot {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}
.tube-fx b {
  position: absolute;
  left: 12px;
  top: 102px;
  max-width: 78%;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(196, 92, 120, 0.96), rgba(88, 42, 120, 0.94));
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  animation: tube-banner 2.6s ease forwards;
}
.tube-fx.high b {
  background: linear-gradient(90deg, rgba(212, 168, 74, 0.96), rgba(160, 64, 96, 0.94));
}
.tube-fx.high::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 62%, rgba(243, 212, 138, 0.42), transparent 58%);
  animation: tube-flash 1.3s ease forwards;
}
.tube-fx i {
  position: absolute;
  bottom: 16%;
  color: #f4c2ce;
  animation: tube-rise 2.3s ease-in forwards;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}
.tube-fx.mid i { color: #f0d2a8; }
.tube-fx.high i { color: #f6e2a8; }
@keyframes tube-rise {
  to { transform: translateY(-68vh) scale(1.25); opacity: 0; }
}
@keyframes tube-banner {
  0% { transform: translateX(-30px); opacity: 0; }
  14% { transform: none; opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes tube-flash {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}
.tube-say {
  position: absolute;
  z-index: 2;
  left: 12px;
  right: 12px;
  bottom: 206px;
  max-height: 34%;
  overflow: auto;
  scrollbar-width: none;
  padding: 8px 12px 10px;
}
.tube-say::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tube-say {
  border-radius: 16px;
  background: rgba(22, 14, 32, 0.88);
  backdrop-filter: blur(12px);
}
.tube-say b {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #e7b4c0;
}
.tube-say p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #fff;
}
.tube-line {
  margin: 0;
  display: flex;
  gap: 6px;
  font-size: 13px;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.tube-line b { color: #f0c7d0; font-weight: 600; }
.tube-line.crowd b { color: #d7c4de; font-weight: 500; }
.tube-line.crowd span { color: rgba(255, 255, 255, 0.84); }
.tube-line.sys { opacity: 0.72; justify-content: center; font-size: 12px; }
.tube-compose button.tube-gift-btn { background: #c45c78; }
.tube-compose {
  position: absolute;
  z-index: 3;
  left: 12px;
  right: 12px;
  bottom: 16px;
  display: flex;
  gap: 6px;
}
.tube-compose input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: inherit;
}
.tube-compose button {
  border: 0;
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font: inherit;
}
.tube-tray,
.tube-ask {
  position: absolute;
  z-index: 4;
  left: 12px;
  right: 12px;
  bottom: 64px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(14, 12, 18, 0.98);
}
.tube-tray {
  display: block;
  max-height: 46%;
  overflow: auto;
  scrollbar-width: none;
}
.tube-tray::-webkit-scrollbar { display: none; }
.tube-tray p { margin: 0; font-size: 12px; opacity: 0.75; }
.tube-tier {
  margin: 10px 0 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  opacity: 0.55;
}
.tube-gifts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tube-tray button,
.tube-ask button {
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  padding: 8px;
}
.tube-tray small { display: block; opacity: 0.7; }
.tube-ask strong { display: block; margin-bottom: 8px; }
.tube-ask div { display: flex; gap: 8px; }
.tube-ask button { flex: 1; }
.tube-chat {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 118px;
  border: 0;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font: inherit;
  font-size: 12px;
}
.tube-split {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.tube-side {
  border: 0;
  padding: 0;
  background-size: cover;
  background-position: center 18%;
  color: #fff;
  position: relative;
}
.tube-side.on { outline: 3px solid #e7b4c0; outline-offset: -3px; }
.tube-side b,
.tube-side small {
  position: absolute;
  left: 10px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.tube-side b { bottom: 88px; }
.tube-side small { bottom: 66px; }

.tube-gear {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 10, 14, 0.45);
  color: #f6efe8;
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
}
.tube-sheet {
  position: absolute;
  z-index: 6;
  top: 78px;
  right: 12px;
  width: 168px;
  padding: 12px 8px 8px;
  border-radius: 18px;
  background: rgba(16, 14, 20, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}
.tube-sheet p {
  margin: 0 8px 6px;
  font-size: 11px;
  letter-spacing: 0.16em;
  opacity: 0.5;
}
.tube-sheet button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #f6efe8;
  font: inherit;
  font-size: 14px;
  padding: 9px 10px;
  text-align: left;
}
.tube-sheet button.on { background: rgba(255, 255, 255, 0.1); }
.tube-sheet button i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e7b4c0;
  flex: none;
}
.tube-say p.is-prev {
  opacity: 0.55;
  font-size: 12px;
}
.tube-now {
  position: absolute;
  z-index: 2;
  top: 118px;
  left: 16px;
  right: 16px;
  display: flex;
  gap: 6px;
  align-items: baseline;
  color: #fff;
  font-size: 12px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}
.tube-now b {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(226, 59, 74, 0.9);
  font-size: 10px;
  font-weight: 700;
}
.tube-now-chip { flex: none; font-weight: 650; }
.tube-now-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.82;
}
#open-tube span:not(.glass-ico) {
  font-size: 11px;
  letter-spacing: -0.03em;
}

.earn-app.live,
.earn-app.jobs,
.earn-app.stock {
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  border: 1px solid color-mix(in srgb, white 48%, transparent);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: 0 10px 24px rgba(70, 24, 36, 0.04);
}

.earn-app.jobs {
  grid-column: 1 / -1;
  min-height: 64px;
}

.screen[data-screen="earn"].is-live > .nav-header,
.screen[data-screen="earn"].is-stage > .nav-header {
  display: none;
}

.screen[data-screen="earn"].is-live .earn-root,
.screen[data-screen="earn"].is-stage .earn-root {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.live-title {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border: 0;
  border-radius: 16px;
  background: color-mix(in srgb, #fff 70%, var(--accent));
  color: var(--ink);
  font: inherit;
  font-size: calc(15px * var(--font-scale));
}

.live-title:disabled,
.live-topic:disabled {
  opacity: 0.62;
}

.live-topics {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.live-topic {
  flex: 1;
  border: 0;
  border-radius: 999px;
  padding: 8px 4px;
  background: color-mix(in srgb, #fff 64%, var(--accent));
  color: var(--ink-soft);
  font: inherit;
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
}

.live-topic.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(70, 24, 36, 0.08);
}

.live-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.live-preset {
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 6px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--ink-soft);
  font: inherit;
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
}

.live-preset.on {
  border-color: var(--strong);
  color: var(--ink);
}

.live-preset i,
.live-stage {
  background:
    radial-gradient(120% 80% at 20% 0%, #fff8f7 0%, transparent 55%),
    radial-gradient(90% 70% at 100% 8%, var(--strong) 0%, transparent 52%),
    linear-gradient(165deg, var(--bg) 0%, var(--surface-2) 48%, var(--accent) 100%);
}

.live-preset i {
  display: block;
  height: 46px;
  margin-bottom: 6px;
  border-radius: 12px;
}

.live-preset .is-night,
.live-stage[data-preset="night"] {
  background:
    radial-gradient(90% 70% at 80% 0%, color-mix(in srgb, var(--strong) 48%, #2c2430) 0%, transparent 52%),
    radial-gradient(80% 60% at 0% 100%, #3a2a34 0%, transparent 48%),
    linear-gradient(180deg, #2c262e, #4d3642);
}

.live-preset .is-lamp,
.live-stage[data-preset="lamp"] {
  background:
    radial-gradient(80% 60% at 50% 0%, #fff6ea 0%, transparent 56%),
    radial-gradient(70% 50% at 100% 100%, #efcbb4 0%, transparent 50%),
    linear-gradient(165deg, #f7eee7, #ead2c6 62%, #ddb8ad);
}

.live-paper {
  margin: 10px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.live-paper-preview {
  height: 88px;
}

.live-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
}

.live-bg,
.live-scrim {
  position: absolute;
  inset: 0;
}

.live-bg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.live-scrim {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent) 0%, color-mix(in srgb, var(--bg) 64%, transparent) 42%, color-mix(in srgb, var(--bg) 88%, transparent));
  pointer-events: none;
}

.live-top,
.live-main,
.live-log,
.live-dock,
.live-result,
.live-sheet {
  position: relative;
  z-index: 1;
}

.live-top {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 8px;
  padding: calc(var(--sat, 0px) + 12px) 16px 0;
}

.live-top .icon-btn {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.live-air {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid color-mix(in srgb, #fff 64%, var(--line));
  backdrop-filter: blur(14px);
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.live-air i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e23b4a;
  box-shadow: 0 0 0 4px rgba(226, 59, 74, 0.16);
}

.live-air b {
  letter-spacing: 0.08em;
  font-size: calc(11px * var(--font-scale));
}

.live-sheet {
  position: absolute;
  z-index: 4;
  top: 100px;
  left: 16px;
  right: 16px;
  max-height: 68%;
  overflow: auto;
  padding: 14px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 92%, white);
  border: 1px solid color-mix(in srgb, #fff 70%, var(--line));
  box-shadow: 0 18px 40px rgba(70, 24, 36, 0.14);
}

.live-sheet[hidden] {
  display: none !important;
}

.live-sheet > p {
  margin: 0 0 8px;
  font-weight: 700;
}

.live-main {
  padding: 12px 22px 0;
}

.live-kicker {
  margin: 0;
  color: var(--strong);
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 0.14em;
}

.live-main h2,
.live-kicker {
  text-shadow: 0 1px 12px color-mix(in srgb, var(--bg) 75%, white);
}

.live-main h2 {
  margin: 4px 0 12px;
  font-family: var(--font-display);
  font-size: calc(32px * var(--font-scale));
  font-weight: 600;
  line-height: 1.15;
}

.live-meter {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.live-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--strong);
  transition: width 0.45s ease;
}

.live-log {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 12px 16px 8px;
}

.live-log p {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  border: 1px solid color-mix(in srgb, #fff 58%, transparent);
  box-shadow: 0 8px 20px rgba(70, 24, 36, 0.05);
  backdrop-filter: blur(14px);
  font-size: calc(13px * var(--font-scale));
}

.live-log b {
  flex: none;
  font-weight: 700;
}

.live-log span {
  min-width: 0;
  color: var(--ink-soft);
}

.live-log em {
  margin-left: auto;
  color: var(--strong);
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.live-log p.is-host {
  background: color-mix(in srgb, var(--strong) 16%, var(--surface));
}

.live-log p.is-new {
  animation: live-rise 0.35s ease;
}

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

.live-dock {
  margin: 0 16px 18px;
  padding: 10px;
  display: grid;
  gap: 8px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, #fff 66%, var(--line));
  box-shadow: 0 12px 28px rgba(70, 24, 36, 0.06);
  backdrop-filter: blur(16px);
}

.live-purse {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px;
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}

.live-purse strong {
  color: var(--ink);
  font-size: calc(20px * var(--font-scale));
  font-variant-numeric: tabular-nums;
}

#live-form {
  display: flex;
  gap: 8px;
}

#live-say {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: color-mix(in srgb, #fff 72%, var(--accent));
  color: var(--ink);
  font: inherit;
  font-size: calc(14px * var(--font-scale));
}

#live-form button {
  flex: none;
  border: 0;
  border-radius: 14px;
  padding: 0 14px;
  background: var(--strong);
  color: #fff8f6;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.live-end {
  padding: 4px 0 2px;
  font-size: calc(13px * var(--font-scale));
}

.live-result {
  margin: auto 22px;
  padding: 22px 18px 16px;
  border-radius: 28px;
  text-align: center;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border: 1px solid color-mix(in srgb, #fff 68%, var(--line));
  box-shadow: 0 18px 40px rgba(70, 24, 36, 0.1);
  backdrop-filter: blur(16px);
}

.live-result p {
  margin: 0;
  color: var(--strong);
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 0.14em;
}

.live-result h3 {
  margin: 8px 0;
  font-family: var(--font-display);
  font-size: calc(28px * var(--font-scale));
  font-weight: 600;
}

.live-result strong {
  display: block;
  font-size: calc(36px * var(--font-scale));
  font-variant-numeric: tabular-nums;
}

.live-result > span {
  display: block;
  margin: 4px 0 14px;
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
}

.live-result .primary-btn {
  width: 100%;
}

.job-board,
.job-detail {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 18px 28px;
}

.job-board h2 {
  margin: 4px 0 8px;
  font-family: var(--font-display);
  font-size: calc(32px * var(--font-scale));
  font-weight: 600;
  line-height: 1.2;
  text-shadow: 0 1px 12px color-mix(in srgb, var(--bg) 75%, white);
}

.job-detail h2 {
  margin: 4px 0 8px;
  font-family: var(--font-ui);
  font-size: calc(22px * var(--font-scale));
  font-weight: 750;
  line-height: 1.35;
  text-shadow: 0 1px 12px color-mix(in srgb, var(--bg) 75%, white);
}

.job-board > p,
.job-detail > p {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.55;
}

.job-list {
  display: grid;
  gap: 10px;
}

.job-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, #fff 62%, var(--line));
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: 0 10px 24px rgba(70, 24, 36, 0.05);
  backdrop-filter: blur(16px);
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}

.job-card span {
  color: var(--strong);
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 0.12em;
}

.job-card b {
  font-size: calc(15px * var(--font-scale));
  font-weight: 700;
  line-height: 1.35;
}

.job-card em {
  font-style: normal;
  font-weight: 700;
  font-size: calc(18px * var(--font-scale));
  font-variant-numeric: tabular-nums;
}

.job-card i {
  align-self: end;
  justify-self: end;
  color: var(--ink-soft);
  font-style: normal;
  font-size: calc(12px * var(--font-scale));
}

.job-card.is-done i {
  color: var(--strong);
}

.job-box {
  width: 100%;
  margin: 0 0 12px;
  padding: 12px;
  border: 0;
  border-radius: 16px;
  resize: none;
  background: color-mix(in srgb, #fff 72%, var(--accent));
  color: var(--ink);
  font: inherit;
  font-size: calc(15px * var(--font-scale));
  line-height: 1.55;
}

.job-box:disabled,
.job-good:disabled {
  opacity: 0.62;
}

.job-voice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, #fff 64%, var(--line));
}

.job-voice i {
  position: relative;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--strong);
}

.job-voice i::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #fff8f6;
}

.job-voice span {
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
}

.job-goods {
  display: grid;
  gap: 8px;
}

.job-good {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, #fff 62%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(14px);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}

.job-ask {
  padding: 12px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, #fff 64%, var(--line));
  color: var(--ink);
}

.job-good b {
  flex: 1;
  font-size: calc(15px * var(--font-scale));
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}

.job-good small {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.job-good.is-on {
  border-color: var(--strong);
}

.job-line {
  margin: 0 0 14px;
  font-size: calc(17px * var(--font-scale));
  font-weight: 650;
  line-height: 2.05;
}

.job-blank {
  display: inline-block;
  margin: 0;
  padding: 0 0.15em 1px;
  min-width: 2.6em;
  border: 0;
  border-bottom: 1.5px solid color-mix(in srgb, var(--strong) 72%, var(--line));
  border-radius: 0;
  background: color-mix(in srgb, var(--strong) 8%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: calc(17px * var(--font-scale));
  font-weight: 750;
  line-height: 1.35;
  vertical-align: baseline;
  cursor: pointer;
}

.job-blank.is-next:not(.is-on) {
  border-bottom-style: dashed;
  color: var(--ink-soft);
  font-weight: 600;
}

.job-blank.is-on {
  border-bottom-style: solid;
  background: color-mix(in srgb, var(--strong) 12%, transparent);
}

.job-meter {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, #fff 64%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.job-meter span {
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
}

.job-meter b {
  font-family: var(--font-ui);
  font-size: calc(22px * var(--font-scale));
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.job-meter.is-hot span,
.job-meter.is-hot b {
  color: var(--strong);
}

.job-tags {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}

.job-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.job-tag {
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, #fff 62%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
}

.job-tag:disabled,
.job-blank:disabled,
.job-detail .primary-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.job-tag.is-used {
  opacity: 0.35;
}

.job-detail .primary-btn {
  width: 100%;
}

.meme-beef {
  margin: 0 0 12px;
  padding: 14px 14px 12px;
  border: 1px solid color-mix(in srgb, var(--strong) 42%, white);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

.meme-beef > span {
  color: var(--strong);
  font-size: calc(12px * var(--font-scale));
  font-weight: 800;
}

.meme-beef p {
  margin: 6px 0 0;
  font-size: calc(15px * var(--font-scale));
  font-weight: 800;
  line-height: 1.45;
}

.meme-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.meme-side {
  padding: 10px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font: inherit;
  font-size: calc(14px * var(--font-scale));
  font-weight: 800;
  cursor: pointer;
}

.meme-side.is-win {
  background: var(--strong);
  color: #fff;
}

.meme-side.is-on:not(.is-win) {
  background: color-mix(in srgb, var(--surface) 82%, white);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line) 70%, white);
}

.meme-side:disabled {
  cursor: default;
}

.meme-beef small {
  display: block;
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
  line-height: 1.45;
}

.street-board {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px 16px 28px;
}

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

.street-card {
  min-width: 0;
  padding: 10px 8px 8px;
  border: 1px solid color-mix(in srgb, white 58%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

.street-card b,
.street-row b {
  display: block;
  font-size: calc(13px * var(--font-scale));
  font-weight: 800;
}

.street-card strong,
.street-row > strong {
  display: block;
  margin-top: 4px;
  font-size: calc(18px * var(--font-scale));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.street-card em,
.street-row i {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: calc(11px * var(--font-scale));
  font-style: normal;
  font-weight: 700;
}

.street-card.is-up strong,
.street-card.is-up em,
.street-row.is-up > strong,
.street-row.is-up i {
  color: var(--strong);
}

.street-card.is-down strong,
.street-row.is-down > strong {
  color: color-mix(in srgb, var(--ink) 72%, #8d5c4e);
}

.street-card .stock-spark {
  height: 28px;
  margin: 6px 0 0;
}

.stock-spark {
  display: block;
  width: 100%;
  height: 36px;
  margin: 0;
}

.stock-spark polygon {
  fill: color-mix(in srgb, var(--strong) 18%, transparent);
}

.stock-spark polyline {
  fill: none;
  stroke: var(--strong);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.stock-spark circle {
  fill: var(--strong);
}

.street-pocket {
  margin: 10px 2px 0;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
  line-height: 1.5;
}

.street-talk {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, white 55%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

.street-talk span,
.street-label {
  color: var(--strong);
  font-size: calc(12px * var(--font-scale));
  font-weight: 800;
}

.street-talk p {
  margin: 4px 0 0;
  font-size: calc(15px * var(--font-scale));
  line-height: 1.45;
}

.street-label {
  margin: 14px 2px 8px;
}

.street-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, white 58%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.street-row.is-mine {
  border-color: color-mix(in srgb, var(--strong) 55%, white);
}

.street-row span {
  display: block;
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
  line-height: 1.4;
}

.street-row i {
  display: inline;
  margin-top: 0;
}

.street-row > strong {
  margin-top: 0;
  font-size: calc(14px * var(--font-scale));
}

.street-row button {
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font: inherit;
  font-size: calc(13px * var(--font-scale));
  font-weight: 800;
  cursor: pointer;
}

.street-row.is-mine button {
  background: color-mix(in srgb, var(--surface) 80%, white);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line) 70%, white);
}

.street-row button:disabled {
  opacity: 0.35;
  cursor: default;
}

.stock-note {
  margin: 12px 2px 0;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
  line-height: 1.55;
}

.screen[data-screen="lean"] .nav-header h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#lean-side[hidden] {
  display: none !important;
}

#lean-side.is-stub {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 0;
  padding: 6px 12px 6px 8px;
  border-radius: 3px 11px 9px 4px;
  background: #f7f1e6;
  color: #6a3e46;
  font-family: "Cormorant Garamond", "Songti SC", "STSong", "SimSun", serif;
  font-size: calc(16px * var(--font-scale));
  font-weight: 500;
  letter-spacing: 0.08em;
  border: 1px solid rgba(226, 160, 176, 0.72);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75),
    1px 2px 0 rgba(196, 120, 136, 0.05),
    0 7px 12px rgba(70, 24, 36, 0.1);
  transform: rotate(6deg);
  transform-origin: 70% 60%;
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#lean-side.is-stub:hover {
  transform: rotate(6deg) scale(1.06);
}

#lean-side.is-stub::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background: url("lean-stub.svg?v=1") center / contain no-repeat;
}

.lean-root {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lean-root.is-play {
  overflow: hidden;
  padding-bottom: 12px;
}

.lean-root [hidden] {
  display: none !important;
}

.lean-hero,
.lean-card,
.lean-ticket {
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 88%, white);
  border: 1px solid color-mix(in srgb, white 62%, var(--line));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 6%, transparent);
}

.lean-hero {
  padding: 18px 16px 16px;
}

.lean-root.is-hall {
  padding-top: 16px;
}

.lean-root.is-hall .lean-hero {
  position: relative;
  margin: 6px 8px 4px;
  padding: 26px 22px 20px 28px;
  border-radius: 4px;
  color: #5c3a3e;
  background:
    repeating-linear-gradient(0deg, rgba(109, 66, 72, 0.018) 0 1px, transparent 1px 5px),
    #f4eee4;
  border: 1px dashed rgba(109, 66, 72, 0.38);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    3px 4px 0 rgba(120, 64, 74, 0.05),
    0 16px 24px rgba(70, 24, 36, 0.14);
  transform: rotate(-1.35deg);
}

.lean-root.is-hall .lean-hero::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 16px;
  bottom: 16px;
  border-left: 1px dashed rgba(109, 66, 72, 0.22);
}

.lean-hero h3 {
  margin: 4px 0 8px;
  font-family: var(--font-display);
  font-size: calc(28px * var(--font-scale));
  font-weight: 600;
  line-height: 1.25;
}

.lean-root.is-hall .lean-hero h3 {
  display: flex;
  flex-direction: column;
  gap: 0.16em;
  margin: 12px 0 18px;
  color: #4e3336;
  font-family: "Cormorant Garamond", "Songti SC", "STSong", "SimSun", serif;
  font-size: calc(40px * var(--font-scale));
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.03em;
}

.lean-root.is-hall .lean-kicker {
  letter-spacing: 0.28em;
}

.lean-root.is-hall .lean-hero p {
  max-width: 18em;
  color: #7a5a56;
}

.lean-root.is-hall .lean-go,
.lean-root.is-setup .lean-go {
  margin-top: 20px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #c86b7c 0%, #a8485c 100%);
  color: #fff8f6;
  letter-spacing: 0.14em;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.38),
    inset 0 -7px 0 rgba(92, 32, 46, 0.32),
    0 6px 0 #7d3a48;
  transform: translateY(0);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.lean-root.is-hall .lean-go:active,
.lean-root.is-setup .lean-go:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(92, 32, 46, 0.32),
    0 1px 0 #7d3a48;
}

.lean-root.is-hall .lean-card {
  border-radius: 16px;
  background: #f7f2ea;
  border: 1px dashed rgba(109, 66, 72, 0.28);
  box-shadow: 0 8px 16px rgba(70, 24, 36, 0.08);
}

.lean-root.is-setup {
  padding-top: 14px;
}

.lean-backside {
  padding: 18px 14px 16px;
  border-radius: 4px;
  color: #5c3a3e;
  background:
    repeating-linear-gradient(90deg, rgba(109, 66, 72, 0.025) 0 1px, transparent 1px 8px),
    #f6f0e6;
  border: 1px dashed rgba(214, 150, 166, 0.7);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75),
    0 16px 24px rgba(70, 24, 36, 0.12);
}

.lean-root.is-setup .lean-kicker {
  margin: 0;
  color: #a85a6c;
  letter-spacing: 0.14em;
  font-family: "Cormorant Garamond", "Songti SC", "STSong", "SimSun", serif;
}

.lean-kicker-late {
  margin-top: 14px !important;
}

.lean-lace {
  position: relative;
  height: 18px;
  margin: 16px 2px 14px;
}

.lean-lace::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  border-top: 1px dashed rgba(226, 156, 172, 0.95);
}

.lean-lace::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  width: 8px;
  height: 8px;
  background: #f6f0e6;
  border: 1px solid #e7a8b6;
  transform: translateX(-50%) rotate(45deg);
}

.lean-root.is-setup .lean-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  background: linear-gradient(180deg, #f8f4ef 0%, #efe6de 100%);
  color: #5c3a3e;
  cursor: pointer;
  box-shadow:
    inset 0 2px 5px rgba(90, 50, 60, 0.1),
    0 0 0 1px #fbf8f5,
    0 0 0 3px #d9d3cd,
    0 0 0 4px #b9b3ad,
    0 3px 0 #9c948e;
}

.lean-slot-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lean-slot-copy strong {
  color: #4e3336;
  font-size: calc(14px * var(--font-scale));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lean-slot-copy em {
  color: #8a6e6a;
  font-style: normal;
  font-size: calc(11px * var(--font-scale));
  line-height: 1.4;
}

.lean-tape,
.lean-cardlet {
  flex: none;
  border-radius: 3px;
  background: linear-gradient(180deg, #f2f4f6, #b7bdc4 55%, #8e949b);
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #4e5358;
}

.lean-tape {
  position: relative;
  width: 40px;
  height: 26px;
}

.lean-tape::before,
.lean-tape::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #4d5358;
  background: radial-gradient(circle, #2a2e31 2px, #9aa1a8 3px);
}

.lean-tape::before { left: 4px; }
.lean-tape::after { right: 4px; }

.lean-cardlet {
  width: 22px;
  height: 28px;
  background:
    linear-gradient(#f7f1e8, #f7f1e8) center 8px / 12px 1.5px no-repeat,
    linear-gradient(#f7f1e8, #f7f1e8) center 12px / 12px 1.5px no-repeat,
    linear-gradient(#f7f1e8, #f7f1e8) center 16px / 8px 1.5px no-repeat,
    linear-gradient(180deg, #f2f4f6, #b7bdc4 55%, #8e949b);
}

.lean-root.is-setup .lean-slot.is-ink {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  cursor: text;
  background: linear-gradient(180deg, #eef1f4, #c5ccd2);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px #f7f8f9,
    0 0 0 3px #c5cad0,
    0 3px 0 #6a7076;
}

.lean-root.is-setup .lean-slot.is-ink > span {
  color: #6d5552;
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.16em;
}

.lean-root.is-setup .lean-slot.is-ink input,
.lean-root.is-setup .lean-slot.is-ink select {
  width: 100%;
  border: 0;
  border-radius: 4px;
  padding: 8px 10px;
  background: #f7f1e8;
  color: #4e3336;
  font: inherit;
  font-size: calc(15px * var(--font-scale));
  box-shadow: inset 0 2px 4px rgba(70, 30, 40, 0.12);
  outline: none;
}

.lean-root.is-setup .lean-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.lean-root.is-setup .lean-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: auto;
  height: auto;
  padding: 8px 12px 8px;
  overflow: visible;
  border: 0;
  border-radius: 6px;
  background: #f4ece6;
  color: #5c3a3e;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 8px 14px rgba(70, 24, 36, 0.1);
}

.lean-root.is-setup .lean-frame::before,
.lean-root.is-setup .lean-frame::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 6px;
  background: radial-gradient(circle, rgba(176, 112, 124, 0.45) 1.2px, transparent 1.5px) center top / 6px 8px repeat-y;
}

.lean-root.is-setup .lean-frame::before { left: 3px; }
.lean-root.is-setup .lean-frame::after { right: 3px; }

.lean-root.is-setup .lean-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  max-height: 96px;
  object-fit: cover;
  border-radius: 4px;
  filter: none;
}

.lean-root.is-setup .lean-frame span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(12px * var(--font-scale));
  letter-spacing: 0.04em;
}

.lean-root.is-setup .lean-frame em {
  display: none;
}

.lean-root.is-setup .lean-frame.is-on {
  transform: translateY(-3px);
  background: #f8f1ea;
}

.lean-root.is-setup .lean-frame.is-on img {
  filter: none;
  animation: lean-spot 1.8s ease-in-out infinite;
}

.lean-root.is-setup .lean-frame.is-on em {
  display: block;
  position: absolute;
  top: 18px;
  right: 10px;
  padding: 2px 4px;
  border: 1.5px solid #e45d78;
  border-radius: 2px;
  background: rgba(255, 246, 248, 0.92);
  color: #d64566;
  font-style: normal;
  font-size: calc(10px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 0.12em;
  transform: rotate(12deg);
}

@keyframes lean-spot {
  0%, 100% { box-shadow: 0 0 0 2px #f3b7c4, 0 0 8px rgba(228, 93, 120, 0.35); }
  50% { box-shadow: 0 0 0 3px #ffd0da, 0 0 16px rgba(228, 93, 120, 0.9); }
}

.lean-root.is-setup .lean-picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.lean-root.is-setup .lean-pick {
  position: relative;
  border-radius: 8px;
  border: 1px dashed rgba(109, 66, 72, 0.28);
  background: #e6dcd3;
  color: #8d736e;
  padding: 14px 10px 12px;
  box-shadow: inset 0 5px 8px rgba(70, 30, 40, 0.16);
  transform: translateY(4px);
}

.lean-root.is-setup .lean-pick strong,
.lean-root.is-setup .lean-pick span {
  color: inherit;
}

.lean-root.is-setup .lean-pick.is-on {
  background: #f8f1e8;
  color: #5c3a3e;
  border-style: solid;
  border-color: rgba(196, 90, 112, 0.5);
  transform: translateY(0);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    inset 0 -6px 0 rgba(160, 70, 86, 0.16),
    0 6px 0 #c9a8ae;
}

.lean-root.is-setup .lean-pick.is-on::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 14px;
  height: 14px;
  border: 1.5px solid #e07a90;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(224, 122, 144, 0.28);
}

.lean-root.is-setup .lean-switch {
  width: 100%;
  border: 0;
  border-bottom: 1px dashed rgba(226, 156, 172, 0.7);
  border-radius: 0;
  background: transparent;
  padding: 10px 2px;
}

.lean-root.is-setup .lean-delay {
  border: 0;
  border-radius: 6px;
  background: #e6dcd3;
  color: #8d736e;
  box-shadow: inset 0 3px 5px rgba(70, 30, 40, 0.14);
  transform: translateY(2px);
}

.lean-root.is-setup .lean-delay.is-on {
  background: #f8f1e8;
  color: #5c3a3e;
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 3px 0 #c9a8ae;
}

.lean-hero p,
.lean-hint,
.lean-empty,
.lean-note {
  margin: 0;
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.55;
}

.lean-kicker {
  margin: 0 0 6px;
  color: var(--strong);
  font-size: calc(12px * var(--font-scale));
  letter-spacing: 0.12em;
}

.lean-go {
  width: 100%;
  margin-top: 14px;
}

.lean-go:disabled {
  opacity: 0.45;
}

.lean-card {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  color: inherit;
  font: inherit;
}

button.lean-card {
  cursor: pointer;
}

.lean-recent strong,
.lean-link strong,
.lean-ticket strong {
  display: block;
  font-size: calc(16px * var(--font-scale));
}

.lean-recent span,
.lean-link span,
.lean-ticket span,
.lean-ticket time {
  display: block;
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
}

.lean-file,
.lean-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 55%, white);
  border: 1px solid var(--line);
  color: inherit;
}

.lean-file strong,
.lean-field span,
.lean-pick strong,
.lean-switch strong {
  font-size: calc(14px * var(--font-scale));
}

.lean-file span,
.lean-pick span,
.lean-switch small {
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
  line-height: 1.45;
}

.lean-field input,
.lean-field select,
.lean-form input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: calc(15px * var(--font-scale));
  outline: none;
}

.lean-people,
.lean-delays,
.lean-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lean-chip,
.lean-delay,
.lean-pick,
.lean-switch {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 40%, white);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.lean-chip,
.lean-delay {
  border-radius: 999px;
}

.lean-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 4px;
}

.lean-chip img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.lean-delay {
  padding: 8px 12px;
}

.lean-pick {
  flex: 1 1 140px;
  text-align: left;
  border-radius: 16px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lean-switch {
  width: 100%;
  border-radius: 16px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.lean-switch span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lean-switch i {
  width: 42px;
  height: 26px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 70%, white);
  position: relative;
  flex: none;
}

.lean-switch i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  transition: transform 0.18s ease;
}

.lean-chip.is-on,
.lean-delay.is-on,
.lean-pick.is-on,
.lean-switch.is-on {
  border-color: color-mix(in srgb, var(--strong) 70%, white);
  background: color-mix(in srgb, var(--strong) 14%, white);
}

.lean-switch.is-on i {
  background: var(--strong);
}

.lean-switch.is-on i::after {
  transform: translateX(16px);
}

.lean-stage {
  position: relative;
  height: 210px;
  border-radius: 22px;
  overflow: hidden;
  background: #1c1618;
  flex: none;
}

.lean-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #1c1618;
}

.lean-danmaku-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.lean-fly {
  position: absolute;
  left: 0;
  white-space: nowrap;
  color: #fff8f6;
  font-size: calc(13px * var(--font-scale));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  animation: lean-fly 7.5s linear forwards;
}

@keyframes lean-fly {
  from { transform: translateX(108%); }
  to { transform: translateX(-120%); }
}

.lean-fear {
  position: absolute;
  right: 10px;
  bottom: 46px;
  z-index: 2;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: calc(12px * var(--font-scale));
}

.lean-cover {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  background: color-mix(in srgb, var(--bg) 90%, #2a1c22);
  color: var(--ink);
}

.lean-cover strong {
  font-family: var(--font-display);
  font-size: calc(26px * var(--font-scale));
}

.lean-cover p {
  margin: 0;
  color: var(--ink-soft);
}

.lean-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
  color: var(--ink-soft);
  font-size: calc(12px * var(--font-scale));
}

.lean-log {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 2px 8px;
}

.lean-empty,
.lean-wait,
.lean-note {
  text-align: center;
}

.lean-line {
  max-width: 88%;
  padding: 8px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 90%, white);
  border: 1px solid var(--line);
}

.lean-line b {
  display: block;
  margin-bottom: 2px;
  font-size: calc(11px * var(--font-scale));
  color: var(--ink-soft);
  font-weight: 650;
}

.lean-line span {
  white-space: pre-wrap;
  line-height: 1.5;
}

.lean-line.is-me {
  align-self: flex-end;
  background: color-mix(in srgb, var(--strong) 16%, white);
}

.lean-line.is-them {
  align-self: flex-start;
}

.lean-dock {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lean-form {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 6px 6px 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 90%, white);
  border: 1px solid var(--line);
}

.lean-form button,
.lean-dock > .ghost-btn {
  flex: none;
}

.lean-form button {
  border: 0;
  border-radius: 14px;
  padding: 8px 12px;
  background: var(--strong);
  color: #fff8f6;
  font: inherit;
  font-weight: 700;
}

.lean-ticket {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
}

.lean-ticket .lean-frame {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  overflow: hidden;
  background: color-mix(in srgb, var(--strong) 18%, white);
}

.lean-ticket .lean-frame img,
.lean-ticket .lean-frame i {
  display: block;
  width: 100%;
  height: 100%;
}

.lean-ticket .lean-frame img {
  object-fit: cover;
}

.lean-ticket button {
  border: 0;
  background: transparent;
  color: var(--strong);
  font: inherit;
  font-weight: 700;
}

.lean-root.is-folio {
  padding: 8px 16px 22px;
}

.lean-folio {
  position: relative;
  flex: 1;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lean-folio::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 250px;
  height: 250px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(214, 156, 214, 0.5) 0%, rgba(244, 176, 198, 0.22) 46%, transparent 72%);
  filter: blur(8px);
  pointer-events: none;
}

.lean-star {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #f0c6de;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  z-index: 2;
  pointer-events: none;
}

.lean-star.a { left: 6%; top: 10%; }
.lean-star.b { right: 8%; top: 18%; width: 6px; height: 6px; background: #e4c6f2; opacity: 0.8; }
.lean-star.c { left: 12%; bottom: 14%; width: 7px; height: 7px; opacity: 0.65; }
.lean-star.d { right: 10%; bottom: 16%; background: #f6d4e6; opacity: 0.75; }

.lean-folio-body {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 52px 14px 16px;
  border-radius: 10px 22px 20px 16px;
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.2), transparent 26%),
    linear-gradient(165deg, #a06a7a 0%, #7d4858 40%, #643848 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -16px 22px rgba(50, 16, 28, 0.2),
    0 18px 26px rgba(70, 24, 36, 0.16);
}

.lean-folio-body::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 6px 16px 14px 10px;
  border: 1px solid rgba(255, 226, 216, 0.28);
  pointer-events: none;
}

.lean-folio-flap {
  position: absolute;
  left: 18px;
  right: 26px;
  top: -14px;
  height: 54px;
  border-radius: 16px 18px 6px 8px;
  background: linear-gradient(180deg, #b68492, #8d5a68);
  transform: rotate(-7deg);
  transform-origin: 10% 100%;
  box-shadow: 0 8px 14px rgba(50, 16, 24, 0.16);
}

.lean-folio-flap::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f6e6cc, #c4a06a 55%, #8d6a40);
  box-shadow: 0 1px 2px rgba(50, 20, 24, 0.28);
}

.lean-folio-pocket {
  position: relative;
  min-height: 248px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 22px 26px 16px;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(109, 66, 72, 0.035) 0 1px, transparent 1px 5px),
    #f6ebe3;
  box-shadow: inset 0 12px 18px rgba(80, 30, 40, 0.12);
}

.lean-sprocket {
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: 8px;
  width: 10px;
  background: radial-gradient(circle, rgba(122, 69, 84, 0.32) 2.1px, transparent 2.4px) center top / 10px 14px repeat-y;
}

.lean-blank {
  position: relative;
  width: min(100%, 236px);
  margin-right: 8px;
  padding: 26px 18px 22px;
  text-align: center;
  color: #4e3336;
  background: #fbf6ee;
  transform: rotate(-3.2deg);
  box-shadow: 0 12px 18px rgba(70, 24, 36, 0.14);
  clip-path: polygon(
    0 7px, 5% 0, 10% 7px, 15% 0, 20% 7px, 25% 0, 30% 7px, 35% 0, 40% 7px, 45% 0, 50% 7px, 55% 0, 60% 7px, 65% 0, 70% 7px, 75% 0, 80% 7px, 85% 0, 90% 7px, 95% 0, 100% 7px,
    100% calc(100% - 7px), 95% 100%, 90% calc(100% - 7px), 85% 100%, 80% calc(100% - 7px), 75% 100%, 70% calc(100% - 7px), 65% 100%, 60% calc(100% - 7px), 55% 100%, 50% calc(100% - 7px), 45% 100%, 40% calc(100% - 7px), 35% 100%, 30% calc(100% - 7px), 25% 100%, 20% calc(100% - 7px), 15% 100%, 10% calc(100% - 7px), 5% 100%, 0 calc(100% - 7px)
  );
}

.lean-blank h3 {
  display: flex;
  flex-direction: column;
  gap: 0.12em;
  margin: 0 0 14px;
  font-family: "Cormorant Garamond", "Songti SC", "STSong", "SimSun", serif;
  font-size: calc(24px * var(--font-scale));
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.04em;
}

.lean-blank h3 span {
  white-space: nowrap;
}

.lean-blank p {
  margin: 0;
  color: #8a6a66;
  font-family: "Courier New", "SimSun", monospace;
  font-size: calc(12px * var(--font-scale));
  letter-spacing: 0.03em;
  line-height: 1.5;
}

.phone .screen .nav-header > h2:not(:has(.nest-title)),
.phone .yc-head > h2,
.phone .ginza-top > h2 {
  overflow: hidden;
  color: transparent;
  font-size: 0;
  line-height: 0;
}

.screen.is-nav-front,
.screen.is-nav-under {
  display: flex;
  backface-visibility: hidden;
}

.screen.is-nav-front {
  z-index: 25;
}

.screen.is-nav-under {
  z-index: 24;
}

.phone.is-nav-busy {
  pointer-events: none;
}

.phone.is-nav-busy .screen.is-nav-front,
.phone.is-nav-busy .screen.is-nav-under,
.phone.is-nav-drag .screen.is-nav-front,
.phone.is-nav-drag .screen.is-nav-under {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Keep desktop content together when available WebView height is limited. */
.home-fit-content {
  display: flow-root;
  transform-origin: top center;
}

/* Without backdrop blur, relationship details need an opaque reading surface. */
html.render-safe .phone.bond-open .bond-island {
  background: var(--surface, #fff8f5);
}

/* Opaque substitutes for stacked glass cards in compatibility mode. */
html.render-safe .wallet-card[data-slot="spend"] {
  background: linear-gradient(165deg, #fff8f6, #f3c4c4);
}
html.render-safe .wallet-card[data-slot="save"] {
  background: linear-gradient(165deg, #f6fafc, #bad2e0);
}
html.render-safe .wallet-card[data-slot="sand"] {
  background: linear-gradient(165deg, #fff8ec, #e0ba84);
}
html.render-safe .vip-card {
  background: linear-gradient(165deg, #fffdf8, #fff4e0 48%, #e6d9c8);
}
html.render-safe .earn-card,
html.render-safe .earn-card.is-scratch.is-current {
  background: linear-gradient(180deg, #fff, #fff4f4);
}

/* Contact boundary controls follow the settings palette. */
.contact-boundary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.contact-boundary-actions #cs-block-status {
  flex-basis: 100%;
  margin: 2px 0 4px;
  color: var(--ink-soft);
  line-height: 1.65;
}
.contact-boundary-btn {
  appearance: none;
  flex: 1 1 120px;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: calc(13px * var(--font-scale));
  line-height: 1.4;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.contact-boundary-btn:hover { background: var(--surface, #fff8f5); }
.contact-boundary-btn:active { transform: scale(.98); }
.contact-boundary-btn:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 3px; }
.contact-boundary-btn:disabled { opacity: .5; cursor: wait; }
.contact-boundary-btn[hidden] { display: none; }
.contact-boundary-btn-secondary { background: var(--surface, #fff8f5); }

.bubble { position: relative; }
.message-rejected { position: absolute; top: 50%; transform: translateY(-50%); left: -25px; width: 18px; height: 18px; border-radius: 50%; background: #c55b65; color: #fff; font: bold 13px/18px sans-serif; text-align: center; }
.msg.ai .message-rejected { left: auto; right: -25px; }

/* A compact directory with focused settings pages. */
#chat-settings-form > .fold[hidden], .cs-home[hidden] { display:none; }
#chat-settings-form > .fold > summary { display:none; }
#chat-settings-form > .fold { border:0; background:transparent; margin:0; box-shadow:none; }
#chat-settings-form > .fold > .fold-body { padding:4px 0 24px; }
.cs-home { display:grid; gap:14px; padding:2px 0 20px; }
.cs-home-profile { display:flex; gap:16px; align-items:center; width:100%; padding:22px 18px; text-align:left; border:1px solid var(--line); border-radius:24px; background:linear-gradient(135deg,var(--surface,#fff8f5),var(--bg)); color:var(--ink); cursor:pointer; }
.cs-home-profile img { width:66px; height:66px; object-fit:cover; border-radius:22px; border:3px solid var(--surface,#fff8f5); box-shadow:0 4px 16px #80535014; }
.cs-home-profile > span { display:grid; gap:7px; min-width:0; }
.cs-home-profile small { font:9px/1.3 sans-serif; letter-spacing:2.2px; color:var(--ink-soft); }
.cs-home-profile strong { font-size:22px; overflow-wrap:anywhere; }
.cs-home-profile span span { font-size:11px; color:var(--ink-soft); }
.cs-home-label { font-size:11px; letter-spacing:2px; color:var(--ink-soft); margin:2px 5px -4px; }
.cs-home-list { overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--surface,#fff8f5); }
.cs-home-entry { width:100%; display:flex; align-items:center; gap:13px; border:0; background:transparent; color:var(--ink); padding:14px 16px; text-align:left; font:inherit; cursor:pointer; }
.cs-home-entry + .cs-home-entry { border-top:1px solid var(--line); }
.cs-entry-icon { display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border-radius:12px; background:var(--bg); color:var(--ink-soft); }
.cs-entry-icon svg { width:21px; height:21px; }
.cs-entry-copy { min-width:0; display:grid; gap:4px; flex:1; }
.cs-entry-copy b { font-size:14px; font-weight:500; }
.cs-entry-copy small { font-size:10px; color:var(--ink-soft); line-height:1.4; }
.cs-entry-arrow { font-size:21px; color:var(--ink-soft); opacity:.6; }
.cs-home-entry:hover { background:var(--bg); }
.cs-home-entry:focus-visible, .cs-home-profile:focus-visible { outline:2px solid var(--ink-soft); outline-offset:-3px; }
.cs-in-page #save-chat-settings { width:auto; min-width:52px; font-size:12px; }
.cs-in-page #save-chat-settings svg { display:none; }
.cs-in-page #save-chat-settings::after { content:'完成'; }

.round-tabs { display:flex; gap:6px; margin-bottom:16px; }
.round-tabs button,.round-orders button { border:1px solid var(--line); background:var(--surface,#fff8f5); color:var(--ink); border-radius:12px; padding:10px 8px; font:inherit; font-size:11px; flex:1; cursor:pointer; }
.round-tabs button[aria-current] { background:var(--ink); color:var(--bg); }
.round-account { display:grid; gap:9px; padding:20px; margin-bottom:16px; background:var(--surface,#fff8f5); border:1px solid var(--line); border-radius:22px; }
.round-account small,.round-account span { font-size:11px; color:var(--ink-soft); }
.round-account > strong { font-size:32px; font-weight:500; }
.round-quote { border:1px solid var(--line); border-radius:18px; background:var(--surface,#fff8f5); padding:15px; margin:10px 0; }
.round-quote-head { display:flex; gap:10px; align-items:center; font-size:13px; }
.round-quote-head b { flex:1; }
.round-quote .stock-spark { height:40px; margin-top:10px; color:var(--ink-soft); }
.round-quote p { font-size:11px; color:var(--ink-soft); line-height:1.6; }
.round-orders { display:flex; gap:5px; }
.round-orders button:disabled { opacity:.35; cursor:default; }
.round-next { position:relative; z-index:2; flex:0 0 auto; padding:10px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--line); background:var(--surface, #fff8f5); display:grid; gap:8px; }
.round-next .primary-btn { width:100%; min-height:44px; margin:0; border-radius:15px; }
#stock-board { overscroll-behavior:contain; scrollbar-width:thin; padding-bottom:16px; }
.round-next small { text-align:center; font-size:10px; color:var(--ink-soft); }

.commerce-pick { display:grid; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); font-size:12px; }
.commerce-pick input[type=number] { width:64px; padding:7px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); }
#live-commerce { position:relative; z-index:1; padding:8px 14px; overflow:auto; flex:1; min-height:90px; }
.commerce-panel { background:var(--surface,#fff8f5); padding:14px; border-radius:18px; display:grid; gap:10px; }
.commerce-panel p,.commerce-panel small { margin:0; font-size:11px; line-height:1.6; }
.commerce-panel .primary-btn { width:100%; min-height:40px; font-size:12px; }

[data-screen="chat"] .composer { position:relative; }
.reply-first-guide { position:absolute; right:32px; bottom:calc(100% + 10px); width:min(280px,calc(100% - 24px)); padding:13px 16px; display:grid; gap:5px; border:1px solid var(--line); border-radius:17px; background:var(--surface,#fff8f5); color:var(--ink); box-shadow:0 6px 22px #683a3a18; z-index:8; }
.reply-first-guide::after { content:''; position:absolute; bottom:-6px; right:29px; width:10px; height:10px; transform:rotate(45deg); background:var(--surface,#fff8f5); border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.reply-first-guide b { font-size:12px; font-weight:500; line-height:1.6; }
.reply-first-guide span { font-size:10px; color:var(--ink-soft); line-height:1.6; }
.reply-first-guide button { justify-self:start; padding:5px 0; background:none; border:0; color:var(--ink); font:inherit; font-size:12px; cursor:pointer; }
.reply-guide-glow { animation:reply-guide-pulse 1.6s ease-in-out 3; border-radius:50%; }
@keyframes reply-guide-pulse { 50% { box-shadow:0 0 0 6px #df9caa33; filter:brightness(1.1); } }
@media(prefers-reduced-motion:reduce) { .reply-guide-glow { animation:none; outline:1px solid var(--line); } }

/* Companion collection — six individually composed keepsakes. */
.bond-widget.is-skin { border-radius:20px; background:transparent!important; overflow:hidden; }
.bond-widget.is-skin .bond-skin { width:100%;height:100%; }
.cw { width:100%;height:100%;min-height:0;position:relative;overflow:hidden;text-align:left;font-family:var(--font-ui);box-sizing:border-box;color:#65585c;isolation:isolate; }
.cw * { box-sizing:border-box; }
.cw img { display:block;width:100%;height:100%;object-fit:cover;min-height:0; }
.cw p,.cw b,.cw span,.cw small { margin:0; }
.cw b { font-weight:500; }
.cw-names { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px; }
.cw-listen { display:flex;align-items:center;gap:12px;padding:15px;background:linear-gradient(125deg,#e9e4df,#fcf7f0 55%,#d8c6c5);border:1px solid #ffffffb0;border-radius:20px; }
.cw-record { width:42%;aspect-ratio:1;flex-shrink:0;position:relative;display:grid;place-items:center;border-radius:50%;background:repeating-radial-gradient(circle,#29272a 0 2px,#454046 3px,#29272a 4px);box-shadow:3px 6px 10px #66545333; }
.cw-record img { width:47%;height:47%;border-radius:50%; }
.cw-record i { position:absolute;width:6px;height:6px;border-radius:50%;background:#eee1d6;border:2px solid #c4b4b0; }
.cw-track { display:grid;gap:7px;min-width:0;flex:1; }
.cw-track small { font:5px/1.5 sans-serif;letter-spacing:1px; }
.cw-track b { font-size:13px;line-height:1.3; }
.cw-track > span { font-size:7px;line-height:1.6;max-height:24px;overflow:hidden; }
.cw-wave { color:#a68b8e;font:10px/1 sans-serif;white-space:nowrap;overflow:hidden; }
.cw-player { font:9px/1.4 serif;border-top:1px solid #b5a3a455;padding-top:6px; }
.cw-player em { font:6px/1 sans-serif; }
.cw-folder { display:grid;grid-template-columns:35% 65%;background:#f3eadc;border:1px solid #c6b6a3;border-radius:12px;padding:7px;box-shadow:inset 0 0 0 3px #fff6e7; }
.cw-journal-left { display:flex;align-items:center;flex-direction:column;gap:7px;padding:10px 7px;background:repeating-linear-gradient(90deg,#d5baad33 0 8px,transparent 8px 17px),repeating-linear-gradient(0deg,#d5baad44 0 8px,#fff6e8 8px 17px);border-right:3px double #b7a18b; }
.cw-journal-left small { font:5px/1.5 monospace;letter-spacing:1px; }
.cw-mini-photo { width:80%;aspect-ratio:1;transform:rotate(-7deg);padding:3px 3px 10px;background:#fffdf4;box-shadow:1px 3px 4px #806b5733; }
.cw-journal-left span { font-size:7px; }
.cw-journal-left i { color:#b49378;font-size:20px; }
.cw-journal-right { position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 10px;background:repeating-linear-gradient(#fffaf0 0 15px,#d2c0aa55 16px); }
.cw-journal-right b { font-size:11px; }
.cw-paper-photo { flex:1;min-height:0;width:90%;border:4px solid #fff;box-shadow:1px 2px 5px #6d584833;transform:rotate(3deg); }
.cw-journal-right small { font:6px/1.3 monospace; }
.cw-tape { position:absolute;top:1px;left:35%;width:30%;height:9px;background:#cab79988;transform:rotate(-6deg);z-index:1; }
.cw-folder.v-1 { filter:saturate(.3); }
.cw-folder.v-2 { background:#efdce1; }
.cw-folder.v-2 .cw-journal-left { background-color:#f4dbe4; }
.cw-ins { padding:12px;background:#fcfafb;border:6px solid #e9e5e6;border-radius:20px;display:flex;flex-direction:column;gap:8px; }
.cw-profile { display:flex;align-items:center;gap:7px;min-height:22px; }
.cw-profile > img { width:27px;height:27px;border-radius:50%;padding:2px;border:1px solid #d7c4cd; }
.cw-profile > span { display:grid;gap:3px;flex:1;min-width:0; }
.cw-profile b { font-size:9px; }
.cw-profile small { font:5px/1.4 sans-serif;color:#aaa0a5; }
.cw-profile i { font-size:16px;color:#bda1ae;font-style:normal; }
.cw-gallery { display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;flex:1;min-height:0; }
.cw-gallery img { border-radius:2px;filter:saturate(.55); }
.cw-social { display:flex;justify-content:space-between;gap:6px;font-size:7px; }
.cw-social span { color:#a5909b;font:6px/1.5 sans-serif; }
.cw-caption { display:grid;gap:4px;padding:7px 9px;border:1px solid #e6dfe3;border-radius:12px;font-size:7px;line-height:1.5; }
.cw-caption > span { text-align:right;color:#ac929f;font:10px/1 serif; }
.cw-mono { background:#302d31;color:#f0d5e2;border-radius:16px;padding:12px; }
.cw-tea-heading { position:relative;z-index:3;font:italic 24px/1.2 Georgia,serif;letter-spacing:-1px; }
.cw-letter { position:absolute;left:9%;top:30%;width:49%;height:61%;padding:8px;transform:rotate(-12deg);background:#f6f0e7;color:#70646a;display:grid;gap:6px;align-content:start; }
.cw-letter small { font:5px/1 monospace;letter-spacing:1px; }
.cw-letter span { font:7px/1.8 serif; }
.cw-postcard { position:absolute;left:8%;bottom:10%;width:35%;height:37%;border:4px solid #c9c8dc;transform:rotate(7deg); }
.cw-invite { position:absolute;right:10%;top:29%;width:48%;height:62%;transform:rotate(11deg);border:1px solid #a989a1;outline:3px double #e9bed4;outline-offset:-6px;background:#d6b0c9;color:#51414e;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:10px;gap:6px; }
.cw-invite small { font:5px/1 sans-serif;letter-spacing:2px; }
.cw-invite b { font:italic 16px/1.2 Georgia,serif;text-align:center;overflow-wrap:anywhere; }
.cw-invite i { font:italic 9px/1 Georgia,serif; }
.cw-invite span { font:5px/1.5 sans-serif;text-align:center; }
.cw-metal { position:absolute;font-style:normal;color:#e0d8cb;text-shadow:1px 2px #807880,-1px -1px #fff;font-size:28px;z-index:4; }
.cw-metal.s1 { right:8%;top:7%;transform:rotate(15deg); }.cw-metal.s2 { left:43%;bottom:2%;font-size:23px; }
.cw-bubble { --pearl:#e4edf7;display:flex;flex-direction:column;justify-content:center;gap:17px;padding:14px 8px;background:transparent; }
.cw-bubble.v-1 { --pearl:#f7dfe9; }.cw-bubble.v-2 { --pearl:#e1eee8; }.cw-bubble.v-3 { --pearl:#514a55; color:#fff6fd; }
.cw-chatline { display:flex;gap:7px;align-items:center; }.cw-chatline.second { padding-left:12px; }
.cw-chatline img { width:35px;height:35px;flex-shrink:0;border-radius:50%;border:3px solid #ffffffcc;box-shadow:0 3px 5px #57475b22; }
.cw-chatline > div { position:relative;min-width:0;flex:1;display:grid;gap:4px;text-align:center;border-radius:20px;padding:11px 9px;background:linear-gradient(180deg,#ffffffaa,var(--pearl));border:1px solid #ffffffcc;box-shadow:inset 0 -3px 4px #7264821a,0 4px 5px #5447551a; }
.cw-chatline > div::after { content:'✧';position:absolute;top:-10px;right:12px;color:#bfaac8;font-size:17px; }
.cw-chatline b { font-size:9px;line-height:1.5; }.cw-chatline small { font:5px/1.3 sans-serif;letter-spacing:.7px; }
.cw-classic { padding:12px 15px;background:#fff4e2;border:1px solid #cfbba4;border-radius:15px;color:#8b665b;display:flex;flex-direction:column;justify-content:space-between;gap:8px; }
.cw-ticket-top,.cw-ticket-bottom { display:flex;align-items:center;justify-content:space-between;gap:5px; }
.cw-ticket-top { border-bottom:1px dashed #c8aa92;padding-bottom:7px; }.cw-ticket-top small,.cw-ticket-bottom > span:last-child { font:5px/1.3 monospace;letter-spacing:1px; }
.cw-ticket-main { display:flex;gap:10px;align-items:center;flex:1;min-height:0; }.cw-ticket-faces { display:flex;flex:1;min-width:0;height:70%; }
.cw-ticket-faces img { width:52%;aspect-ratio:1;max-height:60px;border:3px solid #fffcf5;border-radius:50%;transform:rotate(-8deg);box-shadow:1px 3px 5px #99746322; }.cw-ticket-faces img+img { margin-left:-12%;transform:rotate(8deg); }
.cw-ticket-main > div:last-child { display:grid;gap:5px;flex:1; }.cw-ticket-main b { font-size:10px; }.cw-ticket-main strong { font:26px/1 Georgia,serif; }.cw-ticket-main strong small { font:6px/1 sans-serif; }
.cw-ticket-bottom { border-top:1px dashed #c8aa92;padding-top:7px; }
#bond-sheet .pay-card { width:min(440px,calc(100% - 24px));max-height:88%;padding:20px;border-radius:26px;background:#fcf7f5;overflow-y:auto;overflow-x:hidden;gap:13px;scrollbar-width:thin; }
#bond-sheet h3 { font-size:18px;letter-spacing:1px;margin:0 0 3px; }
#bond-pick { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;padding:0; }
#bond-pick button { min-width:0;width:100%;padding:9px 6px;border:1px solid #e7d9d6;border-radius:14px;background:#fffaf8;color:#89716f;font-size:10px;display:grid;gap:6px;justify-items:center; }
#bond-pick button.on { border-color:#bb9298;background:#f5e5e7;box-shadow:0 0 0 2px #bb92981a; }
#bond-pick .bp { width:100%;height:27px;border-radius:7px;box-shadow:none;background:linear-gradient(135deg,#e8ded7,#fff6ed); }
#bond-pick .bp-listen { background:radial-gradient(circle at 30% 50%,#c9a3a7 0 5px,#40383e 6px 13px,transparent 14px),#e8e0d8; }
#bond-pick .bp-folder { background:repeating-linear-gradient(90deg,#cdb8a955 0 7px,transparent 7px 14px),repeating-linear-gradient(0deg,#cdb8a955 0 7px,#fff4e0 7px 14px); }
#bond-pick .bp-ins { background:linear-gradient(90deg,#decbd6 30%,#fff 30% 35%,#cbbac2 35% 65%,#fff 65% 70%,#e7d9db 70%);border:5px solid #f4f1f2; }
#bond-pick .bp-mono { background:linear-gradient(115deg,#302d31 40%,#dab8ce 40% 78%,#302d31 78%); }
#bond-pick .bp-bubble { background:radial-gradient(ellipse at 60% 35%,#fefeff 0 40%,transparent 43%),radial-gradient(ellipse at 40% 80%,#e9e2f1 0 40%,transparent 43%),#f1edf3; }
#bond-preview { height:225px!important;flex:none;padding:15px;background:repeating-linear-gradient(45deg,#f0e9e6 0 8px,#f5eeeb 8px 16px);border:1px solid #e7d9d6;border-radius:20px; }
#bond-preview .cw { max-width:330px;margin:auto; }
#bond-sheet label { font-size:12px;color:#8c7472;line-height:1.6; }
#bond-sheet input,#bond-sheet select { border-radius:13px;min-height:42px;background:#fffcfa;border-color:#e6d6d2;font-size:12px; }
#bond-sheet .pay-actions:last-child { position:sticky;bottom:-20px;padding:12px 0 4px;background:#fcf7f5;z-index:5; }
@media(max-width:380px) { #bond-sheet .pay-card { padding:16px; } #bond-preview { height:205px!important; } }

.cw-paper-photo { flex:1 1 0;height:0;overflow:hidden; }
.cw-gallery { flex:1 1 0;height:0;overflow:hidden; }
.cw-track b,.cw-social b,.cw-profile b,.cw-ticket-main b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%; }
.cw-caption { flex-shrink:0;max-height:52px;overflow:hidden; }

#bond-vars { display:block;overflow:visible;flex:none; }#bond-vars[hidden]{display:none;}
#bond-vars p { margin:6px 0 8px;font-size:11px;color:#9b7f80; }
.bond-swatch-row,.bond-pattern-row { display:flex;flex-wrap:wrap;gap:7px; }
.bond-swatch-row button { display:grid;justify-items:center;gap:5px;min-width:48px; }
.bond-swatch-row i { width:21px;height:21px;border-radius:50%;border:1px solid #a68e8533;background:var(--sw,#f2e8df); }
.swatch-original { --sw:linear-gradient(135deg,#f7e9d8,#c4b6c9); }.swatch-cream{--sw:#f8ecd6}.swatch-rose{--sw:#e6c6d0}.swatch-mint{--sw:#cbded4}.swatch-blue{--sw:#cbd9eb}.swatch-lilac{--sw:#d9cbe7}.swatch-cocoa{--sw:#c4aa96}.swatch-ink{--sw:#46414f}
.cw { --paper:#fff4e2;--paper2:#ead5cb;--cw-ink:#705c60;--cw-line:#b3959666;--motif:none;--motif-size:auto; }
.cw[data-palette=cream]{--paper:#fff5dd;--paper2:#ecdbbb;--cw-ink:#80684f;--cw-line:#b89d7044;}
.cw[data-palette=rose]{--paper:#faeaf0;--paper2:#e7c7d2;--cw-ink:#875f71;--cw-line:#ba8d9d44;}
.cw[data-palette=mint]{--paper:#edf5ed;--paper2:#c7dfd4;--cw-ink:#567a6c;--cw-line:#749b8744;}
.cw[data-palette=blue]{--paper:#eef3fc;--paper2:#c6d8e9;--cw-ink:#5a7293;--cw-line:#7995bc44;}
.cw[data-palette=lilac]{--paper:#f3edfa;--paper2:#dacbe9;--cw-ink:#7a648d;--cw-line:#9b82b344;}
.cw[data-palette=cocoa]{--paper:#f3e6d9;--paper2:#cfb7a0;--cw-ink:#795c46;--cw-line:#ab896944;}
.cw[data-palette=ink]{--paper:#36323e;--paper2:#5e5269;--cw-ink:#f0e1ed;--cw-line:#cbb6d344;}
.cw[data-pattern=dots]{--motif:radial-gradient(circle,var(--cw-line) 1px,transparent 1.5px);--motif-size:9px 9px;}
.cw[data-pattern=stripes]{--motif:repeating-linear-gradient(135deg,transparent 0 7px,var(--cw-line) 7px 9px);}
.cw[data-pattern=gingham]{--motif:repeating-linear-gradient(90deg,var(--cw-line) 0 7px,transparent 7px 14px),repeating-linear-gradient(0deg,var(--cw-line) 0 7px,transparent 7px 14px);}
.cw[data-pattern=grid]{--motif:linear-gradient(var(--cw-line) 1px,transparent 1px),linear-gradient(90deg,var(--cw-line) 1px,transparent 1px);--motif-size:12px 12px;}
.cw[data-pattern=stars]{--motif:radial-gradient(ellipse 1px 3px at 6px 6px,var(--cw-line) 90%,transparent),radial-gradient(ellipse 3px 1px at 6px 6px,var(--cw-line) 90%,transparent);--motif-size:18px 18px;}
.cw:not([data-palette=original]) { color:var(--cw-ink); }
.cw:not([data-palette=original]):is(.cw-listen,.cw-folder,.cw-ins,.cw-classic) { background-color:var(--paper);background-image:var(--motif);background-size:var(--motif-size);border-color:var(--paper2); }
.cw:not([data-palette=original]) :is(.cw-journal-left,.cw-journal-right,.cw-invite,.cw-letter) { background-color:var(--paper);color:var(--cw-ink); }
.cw:not([data-palette=original]) .cw-invite { background-color:var(--paper2);outline-color:var(--paper); }
.cw:not([data-palette=original]) .cw-chatline > div { background:linear-gradient(180deg,var(--paper),var(--paper2));color:var(--cw-ink); }
.cw:not([data-pattern=original]):is(.cw-listen,.cw-ins,.cw-classic) { background-image:var(--motif);background-size:var(--motif-size); }
.cw:not([data-pattern=original]) :is(.cw-journal-left,.cw-invite,.cw-chatline > div) { background-image:var(--motif);background-size:var(--motif-size); }
.cw[data-pattern=plain] :is(.cw-journal-left,.cw-invite) { background-image:none; }

.widget-sticker-layer { position:absolute;inset:0;z-index:10;pointer-events:none;overflow:hidden; }
.cw .widget-sticker-layer img { position:absolute;height:auto;aspect-ratio:1;object-fit:contain;pointer-events:none; }
#bond-preview .widget-sticker-layer img { pointer-events:auto;touch-action:none;cursor:grab;user-select:none;-webkit-user-drag:none; }
#bond-sticker-tools > p { font-size:11px;color:#927477;margin:4px 0 10px; }
.widget-sticker-tray { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px; }
.widget-sticker-tray button { background:#fffaf8;border:1px solid #eadbd8;border-radius:11px;padding:4px;cursor:pointer;aspect-ratio:1;min-width:0; }
.widget-sticker-tray img { width:100%;height:100%;object-fit:contain; }
#bond-sticker-tools > small { display:block;font-size:10px;color:#9c8283;margin-top:9px; }
.widget-sticker-adjust { display:grid;gap:7px;margin-top:10px; }
.widget-sticker-adjust label { display:flex;align-items:center;gap:10px; }
#bond-sheet .widget-sticker-adjust input { min-height:20px;flex:1; }
.widget-sticker-adjust button { border:1px solid #dcc4c8;border-radius:10px;padding:7px;background:#fff8f5;color:#9b6e79;font:inherit;font-size:11px; }
/* Global settings: grouped navigation, original save action retained. */
[data-screen="settings"] .settings-scroll{padding:12px 16px 24px;}
.gs-home{padding-bottom:12px;}
.gs-group-label{font-size:11px;letter-spacing:1.5px;margin:20px 12px 9px;color:var(--muted,#98767d);}
.gs-card{border:1px solid #fff9;border-radius:21px;background:#fff9;overflow:hidden;box-shadow:0 5px 20px #78505205;}
.gs-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:transparent;color:inherit;padding:14px 15px;min-height:65px;cursor:pointer;}
.gs-card .gs-row+.gs-row{border-top:1px solid #aa7b8115;}
.gs-icon{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:11px;background:#eedadd88;color:#9c6b76;font:21px Georgia,serif;}
.gs-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px;}
.gs-copy b{font-size:13px;font-weight:600;}.gs-copy small{font-size:10px;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gs-arrow{font-size:22px;opacity:.4;font-weight:300;}.gs-profile{border:1px solid #fff9;border-radius:23px;background:linear-gradient(120deg,#fff9,#fff5);padding:19px 16px;}.gs-profile .gs-icon{width:48px;flex-basis:48px;height:48px;border-radius:50%;font-size:27px;background:#d7a9b166;color:#fff;}.gs-profile .gs-copy b{font-size:20px;}.gs-save-state{font-size:10px;text-align:right;opacity:.55;margin:9px 9px -2px;min-height:14px;}.gs-needs-setup .gs-copy small{color:#ae6579;opacity:1;}
[data-screen="settings"] .fold[hidden]{display:none!important;}
[data-screen="settings"].gs-detail .settings-scroll>details.fold{border-radius:22px;background:#fff9;}
[data-screen="settings"].gs-detail .settings-scroll>details.fold>summary{display:none;}
[data-screen="settings"].gs-detail .settings-scroll>details.fold>.fold-body{padding:18px 14px;}
.gs-row:active{background:#e8bdc32a;}.gs-row:focus-visible{outline:2px solid #ad7887;outline-offset:-3px;}
/* Character atelier */
.studio-screen{background:linear-gradient(155deg,#fbf7f2,#f2e5e5)!important;}
.studio-screen .nav-header{background:transparent;border:0;}.studio-screen .nav-header h2{font-size:13px;letter-spacing:2px;}
.studio-body{padding:8px 16px 24px;}.studio-sheet{gap:16px;}.studio-top{gap:18px;}
.studio-hero{position:relative;padding:24px 18px 22px;border:1px solid #fff;border-radius:23px;background:linear-gradient(120deg,#fffaf2,#edddde);overflow:hidden;}
.studio-eyebrow{display:block;color:#987d79;font-size:9px;letter-spacing:1.5px;margin-bottom:17px;}.studio-hero b{font-size:25px;letter-spacing:1px;border:0;color:#604b4d;padding:0;position:relative;z-index:1;}.studio-hero p{font-size:11px;max-width:220px;margin-top:11px;}.studio-hero-mark{position:absolute;right:8px;top:26px;font:110px Georgia;color:#fff8;transform:rotate(-12deg);}
.studio-search{gap:8px;}.studio-search input{height:42px;border-radius:13px;border:1px solid #dfd0cf;background:#fff9;font-size:12px;box-shadow:none;padding:10px 12px;}.studio-rand{background:#725659;color:#fff;border:0;border-radius:13px;height:42px;padding:0 12px;font-size:11px;}
.studio-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;background:#e9ddda88;border-radius:15px;padding:5px;}.studio-tabs button{border:0;background:transparent;border-radius:11px;color:#927c7d;padding:8px 0;font:inherit;font-size:11px;display:flex;align-items:center;flex-direction:column;gap:4px;cursor:pointer;}.studio-tabs small{font-size:8px;letter-spacing:1px;opacity:.65;}.studio-tabs button.on{background:#fffaf6;color:#64494e;box-shadow:0 2px 8px #5b323b0c;}
.studio-picked{border:1px solid #d9c9c566;border-radius:17px;background:#fff5;padding:12px 13px;}.studio-picked-h{font-size:11px;}.studio-picked-h button{font-size:10px;color:#957278;}.studio-picked p{font-size:10px;margin-top:7px;}.studio-picked .studio-chips{margin-top:10px;max-height:110px;overflow:auto;}
.studio-block{padding:19px 15px;background:#fffc;border:1px solid #fff;border-radius:21px;gap:16px;}.studio-block[hidden]{display:none!important;}.studio-sec{font-size:16px;letter-spacing:2px;color:#644d51;padding-bottom:12px;border-bottom:1px solid #e7dcda;}.studio-field,.studio-line>span{font-size:11px;color:#8b7776;}.studio-body .studio-field input,.studio-body .studio-field textarea{border:1px solid #e6dcd8;border-radius:11px;background:#f6f1ed88;padding:11px 12px;font-size:12px;min-height:42px;box-shadow:none;}.studio-body input:focus,.studio-body textarea:focus{outline:2px solid #bd929c66;outline-offset:1px;}.studio-field textarea{min-height:76px;}
.studio-genders{gap:6px;background:#eee6e1;padding:4px;border-radius:12px;}.studio-genders .studio-pill,.studio-genders .studio-pill.on{transform:none;box-shadow:none;border:0;border-radius:9px;padding:9px 0;font-size:12px;background:transparent;color:#968381;}.studio-genders .studio-pill.on{background:#fffaf6;color:#75515c;}.studio-split{gap:12px;border:0;margin:0;}.studio-split .studio-field,.studio-split .studio-field+.studio-field{padding:0;border:0;}
.studio-group,.studio-group.open{border:1px solid #e5dcd7;background:#faf7f3;border-radius:13px;box-shadow:none;}.studio-group-h{font-size:12px;padding:12px;gap:8px;}.studio-group-ico{display:none;}.studio-fold{width:7px;height:7px;border-right:1px solid #aa9094;border-bottom:1px solid #aa9094;background:none;box-shadow:none;border-radius:0;transform:rotate(45deg);margin:0 4px 3px;}.studio-fold:after{display:none;}.studio-group.open .studio-fold{transform:rotate(225deg);}
.studio-chip{border:1px solid #e4d7d2;border-radius:9px;background:#fffaf6;box-shadow:none;font-size:11px;padding:7px 10px;}.studio-chip.on{background:#eee0e2;color:#815766;border-color:#d0adb7;}.studio-next{display:flex;flex-direction:column;gap:12px;align-items:center;padding:4px 0;}.studio-next small{font-size:10px;color:#a18c8a;}.studio-next button,.studio-go{width:100%;border:0;border-radius:14px;padding:14px 18px;background:#74575e;color:#fff;font:inherit;font-size:13px;box-shadow:none;cursor:pointer;}.studio-next button span{float:right;}.studio-rail{gap:5px;}.studio-rail .studio-pill,.studio-rail .studio-pill.on{border-radius:11px;box-shadow:none;padding:10px 0;transform:none;}.studio-review{margin:0;font-size:12px;line-height:1.9;color:#8b7379;}.studio-result{background:#fffaf5;border:1px solid white;border-radius:21px;padding:18px;}.studio-result textarea{border:1px solid #e6d9d5;border-radius:13px;padding:14px;background:#f8f3ed;line-height:1.8;}.studio-result-acts{flex-wrap:wrap;}
@media(prefers-reduced-motion:reduce){.studio-chip.is-stamp{animation:none;}}
/* Yoretube: participation and illustrated gifts */
.tube-quick{position:absolute;z-index:3;left:12px;right:12px;bottom:63px;display:flex;gap:6px;overflow:auto;scrollbar-width:none;}.tube-quick button{flex:0 0 auto;padding:8px 10px;border:1px solid #ffffff26;border-radius:20px;background:#25212c9e;color:#f4e4df;font:inherit;font-size:10px;backdrop-filter:blur(12px);}.tube-stage:has(.tube-quick) .tube-crowd{bottom:105px;height:112px;}.tube-stage:has(.tube-quick) .tube-say{bottom:230px;max-height:25%;background:#211c29b8;border:1px solid #ffffff13;}.tube-line.me{background:#ac789238;padding:4px 7px;border-radius:7px;}.tube-line.me b{color:#ffe0b9;}
.tube-tray{left:8px;right:8px;bottom:64px;max-height:70%;padding:16px;border:1px solid #ffffff1f;border-radius:25px;background:linear-gradient(145deg,#29232e,#17151d);box-shadow:0 -12px 55px #0005;color:#f4e9e4;scrollbar-width:thin;}.tube-tray-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:15px;}.tube-tray-head b{font-size:14px;font-weight:500;}.tube-tray-head small{font-size:10px;margin-top:7px;color:#bca9b8;}.tube-tray-head button{padding:0;width:26px;height:26px;background:#fff1;border-radius:50%;font-size:19px;}.tube-tray .tube-tier{margin:14px 0 8px;font-size:10px;letter-spacing:2px;color:#d6b9c8;opacity:1;}.tube-gifts{gap:7px;}.tube-gifts button{display:flex;align-items:center;flex-direction:column;padding:5px 4px 9px;border:1px solid transparent;border-radius:15px;background:#ffffff07;}.tube-gifts button.on{border-color:#d9abbf;background:#c897b020;}.tube-gifts svg{width:61px;height:61px;filter:drop-shadow(0 4px 7px #0003);}.tube-gifts b{font-size:11px;font-weight:500;}.tube-gifts small{font-size:10px;color:#d7c0a0;margin-top:4px;}.tube-gift-confirm{margin-top:15px;border-top:1px solid #fff1;padding-top:12px;}.tube-gift-confirm p{font-size:11px;line-height:1.6;}.tube-gift-confirm label{display:block;font-size:11px;margin-top:10px;color:#dfc3cb;}.tube-gift-confirm input{display:block;box-sizing:border-box;width:100%;background:#fff1;border:1px solid #fff2;border-radius:10px;color:#fff;margin:7px 0 10px;padding:10px;font-size:12px;}.tube-gift-confirm>button{width:100%;margin-top:10px;background:#d6a9ba;color:#32242f;border-radius:12px;font-size:12px;padding:12px;}.tube-gift-art{position:absolute;left:50%;top:28%;width:132px;transform:translateX(-50%);filter:drop-shadow(0 0 35px #e9b1cd99);}.tube-gift-art svg{width:100%;}.tube-challenge{position:absolute;z-index:3;top:95px;left:14px;right:14px;border:1px solid #fff2;border-radius:14px;background:#201b2ba8;color:#fff;padding:12px;backdrop-filter:blur(12px);}.tube-challenge b{font-size:12px;}.tube-challenge p{font-size:10px;color:#d8c6cf;margin:6px 0 0;}
@media(prefers-reduced-motion:reduce){.tube-fx i{animation:none!important;}.tube-gift-art{filter:none;}}

/* Keep LUNE's face visible when cropping his portrait into a circular avatar. */
img[src*="0bdae4d3-1de8-4751-80d6-c93f8af23627"] { object-position: center top; }

.yc-new-friends {display:flex;align-items:center;gap:10px;width:100%;padding:16px;border:0;border-radius:16px;background:var(--card, #fff5f5);color:inherit;text-align:left;margin-bottom:12px;font-size:15px}.yc-new-friends>span:last-child{margin-left:auto}.yc-friend-dot{display:inline-block;background:#dc5266;color:white;border-radius:20px;padding:2px 7px;font-size:11px}.yc-friend-dot.small{width:7px;height:7px;padding:0;vertical-align:top;margin-left:4px}.yc-friend-work{padding:8px}.yc-friend-work>h3{display:flex;justify-content:space-between;font-size:14px}.yc-friend-work button{border:0;border-radius:10px;padding:8px;color:inherit;background:#f6e5e9}.yc-friend-work .yc-card{gap:8px}.yc-friend-work p{white-space:normal}.yc-friend-work details{padding:10px}

/* Friend requests use their own narrow-screen layout rather than chat-row sizing. */
.yc-friend-work {padding: 0 4px 18px;}
.yc-friend-work > h3 {align-items:center;gap:12px;margin:16px 4px 12px;font-size:12px;font-weight:500;letter-spacing:.03em;opacity:.85;}
.yc-friend-work > h3 > button {flex-shrink:0;background:transparent;font-size:11px;padding:6px 0;}
.yc-friend-work .yc-friend-request {display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 12px;align-items:start;padding:18px 16px;margin:0 0 12px;border:1px solid rgba(255,255,255,.65);border-radius:20px;box-shadow:0 4px 16px rgba(110,65,75,.035);}
.yc-friend-request > .yc-avatar {width:44px;height:44px;border-radius:50%;grid-column:1;grid-row:1;object-fit:cover;margin:2px 0 0;}
.yc-friend-work .yc-friend-request > .yc-main {display:block;min-width:0;width:auto;padding:0;grid-column:2;grid-row:1;}
.yc-friend-request .yc-main h3 {margin:0 0 7px;font-size:14px;font-weight:600;line-height:1.4;white-space:nowrap;word-break:normal;}
.yc-friend-work .yc-friend-request .yc-main p {margin:0;font-size:12px;line-height:1.8;white-space:normal;overflow:visible;text-overflow:clip;word-break:normal;overflow-wrap:anywhere;opacity:.72;}
.yc-friend-work .yc-friend-request > button {grid-row:2;margin-top:15px;font-size:12px;line-height:1.4;min-height:34px;border-radius:10px;white-space:nowrap;}
.yc-friend-work .yc-friend-request > [data-friend-accept] {grid-column:2;justify-self:end;min-width:72px;padding:8px 20px;background:#b87987;color:#fff;}
.yc-friend-work .yc-friend-request > [data-friend-defer] {grid-column:1 / 3;justify-self:start;background:transparent;opacity:.6;padding:8px 0;}
.yc-new-friends {min-height:44px;padding:12px 14px;font-size:13px;border-radius:14px;}
.yc-friend-work details {font-size:12px;line-height:1.8;}
.yc-friend-work details > summary {padding:4px 0 14px;opacity:.65;cursor:pointer;}

.home-time{width:88px;min-width:0;flex:0 0 88px}
#home-cal-detail{margin-top:12px;font-size:10px;line-height:1.6;color:var(--look-date,var(--ink-soft));max-height:142px;overflow:auto;scrollbar-width:thin}
.cal-detail-date{font-size:9px;letter-spacing:.08em;opacity:.65}.cal-holiday-label{color:#a76571;margin:3px 0}.cal-event{display:block;width:100%;border:0;background:transparent;text-align:left;color:inherit;padding:5px 0;overflow-wrap:anywhere;font-size:10px}.cal-event span{display:block;font-size:9px;opacity:.65}.cal-add{border:0;background:transparent;padding:4px 0;color:inherit;font-size:10px}.cal-head button{border:0;background:transparent;color:inherit;padding:0 3px}.cal-day{position:relative;padding:0;cursor:pointer}.cal-day.selected{outline:1px solid #ac7885;outline-offset:1px}.cal-day em{position:absolute;right:-3px;top:-4px;font-style:normal;font-size:7px;color:#a76571}.cal-day.work em{color:#6d7984}.cal-day.has-event:after{content:'';position:absolute;bottom:1px;left:calc(50% - 1.5px);width:3px;height:3px;border-radius:50%;background:#a76571}
#calendar-editor{width:min(340px,88vw);border:1px solid #fff8;border-radius:24px;background:#fff7f7;color:#684f56;padding:24px;box-shadow:0 20px 80px #49303b33}#calendar-editor::backdrop{background:#23171d66;backdrop-filter:blur(5px)}#calendar-editor h3{margin:0 0 18px;font-size:17px}#calendar-editor label{display:block;font-size:11px;margin-bottom:13px}#calendar-editor input,#calendar-editor textarea{display:block;width:100%;box-sizing:border-box;border:1px solid #d9bdc555;border-radius:10px;padding:10px;margin-top:5px;background:#fff9;color:inherit;font:inherit;font-size:13px}.cal-editor-actions{display:flex;gap:8px;justify-content:flex-end}.cal-editor-actions button{border:0;border-radius:10px;padding:9px 14px;background:#eedfe3;color:inherit}.cal-editor-actions button[type=submit]{background:#b87987;color:white}

.cal-event small{display:block;font-size:9px;opacity:.7;white-space:pre-wrap}

#notification-settings{width:min(340px,88vw);border:0;border-radius:24px;padding:24px;background:#fff7f7;color:#684f56}#notification-settings::backdrop{background:#23171d66;backdrop-filter:blur(5px)}#notification-settings label{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #b8798722;font-size:13px}#notification-settings input{accent-color:#b87987}.notify-status{font-size:11px;line-height:1.8;opacity:.7}#notification-settings button{border:0;border-radius:12px;padding:10px 14px;margin:8px 6px 0 0;background:#eedfe3;color:inherit}

/* Settings accents follow the selected theme. */
.gs-icon{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--strong,var(--ink));}
.gs-profile .gs-icon{background:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--ink);}
.gs-card .gs-row+.gs-row{border-top-color:color-mix(in srgb,var(--accent) 15%,transparent);}
.gs-needs-setup .gs-copy small{color:var(--strong,var(--ink));}
.gs-row:active{background:color-mix(in srgb,var(--accent) 18%,transparent);}
.gs-row:focus-visible{outline-color:var(--strong,var(--ink));}
#notification-settings{background:var(--surface);color:var(--ink);}
#notification-settings label{border-bottom-color:color-mix(in srgb,var(--accent) 20%,transparent);}
#notification-settings input{accent-color:var(--strong,var(--accent));}
#notification-settings button{background:color-mix(in srgb,var(--accent) 25%,var(--surface));color:var(--ink);}

.profile-overlay .profile-info{text-shadow:0 1px 3px rgba(0,0,0,.45);}

/* Appearance samples: palette cards and type specimens. */
#theme-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:16px}
.screen[data-screen="settings"] #theme-row .palette-sample{position:relative;display:flex;flex-direction:column;gap:7px;padding:6px 6px 9px;min-width:0;border:1px solid transparent;border-radius:13px;background:color-mix(in srgb,var(--surface) 60%,transparent);color:var(--ink);box-shadow:none;text-align:left}
.palette-art{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;height:39px;border-radius:8px;background:var(--bg);overflow:hidden}
.palette-art i{width:16px;height:22px;display:block;border-radius:6px;background:var(--accent);transform:rotate(-12deg)}
.palette-art i:nth-child(2){background:var(--strong);transform:translateY(-2px)}
.palette-art i:nth-child(3){background:var(--ink);transform:rotate(12deg);opacity:.75}
.palette-name{font-size:11px;padding:0 3px;font-family:var(--font-ui)}
.sample-check{display:none;position:absolute;right:7px;bottom:8px;font-size:10px;color:var(--ink)}
.screen[data-screen="settings"] #theme-row .palette-sample.active,.screen[data-screen="settings"] #font-row .font-sample.active{border-color:var(--strong);background:color-mix(in srgb,var(--accent) 16%,var(--surface));color:var(--ink)}
.palette-sample.active .sample-check,.font-sample.active .sample-check{display:block}
#font-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.screen[data-screen="settings"] #font-row .font-sample{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;position:relative;min-width:0;min-height:79px;border:1px solid transparent;border-radius:13px;padding:13px 11px;background:color-mix(in srgb,var(--surface) 65%,transparent);color:var(--ink);text-align:left;box-shadow:none}
.font-specimen{font-size:15px;line-height:1.6;white-space:nowrap;max-width:100%}
.font-sample-name{font-family:var(--font-ui);font-size:9px;opacity:.6;margin-top:6px;line-height:1.4}
.font-live-preview{padding:17px 15px;margin:0 0 12px;border-left:2px solid var(--strong);border-radius:0 14px 14px 0;background:color-mix(in srgb,var(--surface) 48%,transparent);color:var(--ink)}
.font-preview-label{font-family:system-ui,sans-serif;font-size:8px;letter-spacing:.12em;opacity:.5}
.font-live-preview p{font-family:var(--font-ui);font-size:calc(15px * var(--font-scale));line-height:1.8;margin:10px 0 7px;overflow-wrap:anywhere}
.font-live-preview small{font-family:var(--font-ui);font-size:calc(10px * var(--font-scale));opacity:.65}
#theme-row button:focus-visible,#font-row button:focus-visible{outline:2px solid var(--strong);outline-offset:2px}

/* Compact sample shelves: browse horizontally without extending the settings page. */
#theme-row{grid-template-columns:none;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:calc((100% - 18px)/3);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:3px 2px 9px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--strong) 30%,transparent) transparent;}
#font-row{grid-template-columns:none;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:calc((100% - 9px)/2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:3px 2px 9px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--strong) 30%,transparent) transparent;}
#theme-row>button,#font-row>button{scroll-snap-align:start;}
.sample-shelf-hint{float:right;font-size:9px;font-weight:400;opacity:.55;letter-spacing:0;}

.weather-widget{position:relative;margin:4px 0 16px;padding:15px 18px 10px;border-radius:24px;background:linear-gradient(120deg,color-mix(in srgb,var(--surface) 84%,transparent),color-mix(in srgb,var(--accent) 25%,var(--surface)));border:1px solid color-mix(in srgb,var(--surface) 70%,transparent);color:var(--ink);overflow:hidden;box-shadow:0 8px 24px color-mix(in srgb,var(--strong) 7%,transparent)}
.weather-top,.weather-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.weather-greeting{font-family:var(--font-display);font-size:13px}.weather-widget button{border:0;background:transparent;color:inherit;padding:3px;font-size:10px;cursor:pointer}.weather-main{display:flex;align-items:center;gap:10px;margin:9px 0}.weather-main>span{font-size:32px;opacity:.65}.weather-main>strong{font-family:var(--font-display);font-size:45px;font-weight:400;line-height:1}.weather-main>div{display:flex;flex-direction:column;font-size:12px;gap:5px}.weather-main small{font-size:10px;opacity:.65}.weather-bottom{font-size:9px;opacity:.7}.weather-bottom button{font-size:17px}.weather-credit{display:block;text-align:right;font-size:7px;color:inherit;opacity:.45;text-decoration:none;margin-top:3px}

/* Weather occupies the four former app cells in the lower-left desktop. */
.app-grid>.weather-widget{grid-column:1 / span 2;grid-row:3 / span 2;min-width:0;margin:0;padding:12px 11px 8px;border-radius:24px;display:flex;flex-direction:column;justify-content:space-between;gap:4px;}
.app-grid>.weather-widget .weather-top{flex-wrap:wrap;gap:2px;align-items:flex-start;}
.app-grid>.weather-widget .weather-greeting{font-size:11px;}
.app-grid>.weather-widget .weather-top button{font-size:9px;padding:0;}
.app-grid>.weather-widget .weather-main{display:grid;grid-template-columns:24px minmax(0,1fr);gap:3px 6px;margin:3px 0;}
.app-grid>.weather-widget .weather-main>span{font-size:24px;}
.app-grid>.weather-widget .weather-main>strong{font-size:34px;}
.app-grid>.weather-widget .weather-main>div{grid-column:1 / -1;font-size:10px;gap:3px;}
.app-grid>.weather-widget .weather-main small{font-size:8px;}
.app-grid>.weather-widget .weather-bottom{font-size:8px;line-height:1.4;gap:3px;}
.app-grid>.weather-widget .weather-credit{font-size:6px;margin-top:0;}

.app-grid>.weather-widget{--weather-opacity:0;background:linear-gradient(135deg,color-mix(in srgb,var(--surface) calc(var(--weather-opacity)*100%),transparent),color-mix(in srgb,var(--accent) calc(var(--weather-opacity)*55%),transparent));box-shadow:none;border:0;padding:12px 10px;gap:5px;border-radius:20px;}
.app-grid>.weather-widget .weather-top{position:relative;display:block;padding-right:12px;}
.app-grid>.weather-widget .weather-greeting{font-family:var(--font-display),serif;font-size:17px;line-height:1.15;letter-spacing:-.04em;}
#weather-style{position:absolute;right:-2px;top:-3px;font-size:14px;opacity:.5;}
.app-grid>.weather-widget #weather-locate{display:block;font-size:8px;opacity:.65;margin-top:3px;}
.weather-date{font-size:8px;opacity:.6;letter-spacing:.04em;}
.app-grid>.weather-widget .weather-main{display:flex;align-items:center;gap:5px;background:color-mix(in srgb,var(--surface) 32%,transparent);border-radius:30px;padding:7px 9px;margin:3px 0 0;}
.app-grid>.weather-widget .weather-main>span{font-size:16px;opacity:.8;}
.app-grid>.weather-widget .weather-main>strong{font-family:var(--font-ui);font-size:16px;line-height:1;font-weight:500;}
.app-grid>.weather-widget .weather-main>div{font-size:9px;margin-left:auto;min-width:0;}
#weather-condition{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:66px;}
.app-grid>.weather-widget #weather-range{display:none;}
.weather-year{display:flex;align-items:center;justify-content:center;gap:7px;border-radius:30px;background:color-mix(in srgb,var(--surface) 32%,transparent);padding:6px 4px;font-size:8px;}
.weather-year strong{font-family:var(--font-display);font-size:19px;line-height:1;font-weight:500;}
.app-grid>.weather-widget .weather-bottom{font-size:7px;opacity:.55;}.app-grid>.weather-widget .weather-bottom button{font-size:12px;padding:0;}.app-grid>.weather-widget .weather-credit{font-size:5px;opacity:.35;}
#weather-style-dialog{border:1px solid var(--line);border-radius:22px;background:var(--surface);color:var(--ink);padding:24px;width:min(320px,85vw)}#weather-style-dialog::backdrop{background:#0004;backdrop-filter:blur(4px)}#weather-style-dialog h3{margin:0 0 12px;font-size:16px}#weather-style-dialog p,#weather-style-dialog label{font-size:12px;line-height:1.8}#weather-style-dialog input{display:block;width:100%;margin:16px 0;accent-color:var(--strong)}#weather-style-dialog button{border:0;border-radius:12px;padding:9px 18px;background:var(--accent);color:var(--ink)}

/* Compact, opaque setup sheet with clear grouping. */
#date-chapter-pop{width:min(326px,calc(100% - 16px));max-height:min(570px,72vh);padding:14px 12px;background:var(--surface,#fff7f6);color:var(--ink);border:1px solid var(--line);border-radius:24px;box-shadow:0 16px 48px #20121c28;gap:5px;scrollbar-width:thin;isolation:isolate;}
.inn-menu-heading{display:flex;align-items:baseline;justify-content:space-between;padding:4px 5px 12px;border-bottom:1px solid var(--line);margin-bottom:4px;gap:8px;}
.inn-menu-heading strong{font-size:15px;font-weight:600}.inn-menu-heading>span{font-size:9px;opacity:.55}
#date-chapter-pop .date-menu-field{padding:10px 8px;border:0;color:inherit;gap:9px;font-size:12px;}
#date-chapter-pop .date-menu-field>span{font-weight:500;}
#date-chapter-pop select{background:color-mix(in srgb,var(--surface) 85%,var(--accent));color:var(--ink);border:1px solid var(--line);border-radius:11px;padding:9px 10px;min-width:0;font-size:12px;}
#date-chapter-pop .date-chapter-row{flex:1;min-width:0;display:flex;gap:6px;}
#date-chapter-pop #date-mask{flex:1;width:auto;}
#date-chapter-pop .date-chapter-del{flex:0 0 32px;width:32px;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:10px;}
#date-chapter-pop .date-menu-line,#date-chapter-pop .date-fold>summary,.inn-appearance-fold>summary{min-height:40px;padding:10px 8px;font-size:12px;font-weight:500;color:inherit;border:0;background:transparent;}
.inn-appearance-fold>summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;}
.inn-appearance-fold>summary::-webkit-details-marker{display:none}.inn-appearance-fold>summary span{font-size:10px;opacity:.5;}.inn-appearance-fold>summary span:after{content:' ⌄';}
#date-chapter-pop .date-fold,.inn-appearance-fold{border:1px solid var(--line);border-radius:13px;margin:2px 0;background:color-mix(in srgb,var(--surface) 94%,var(--accent));}
#date-chapter-pop #date-font-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:120px;overflow:auto;width:100%;}
#date-chapter-pop #date-font-row button{font-size:11px;border-radius:9px;min-height:30px;padding:5px 3px;color:var(--ink);border:1px solid var(--line);background:var(--surface);}
#date-chapter-pop #date-font-row button.on{background:var(--accent);border-color:var(--strong);}
#date-chapter-pop .date-skin-field{border-bottom:1px solid var(--line);padding-bottom:13px;}
#date-chapter-pop input[type=range]{accent-color:var(--strong);width:100%;}
#date-chapter-pop #date-chapter-new{justify-content:center;background:color-mix(in srgb,var(--accent) 20%,var(--surface));border-radius:11px;color:var(--ink);margin:0 0 5px;}
#date-chapter-pop .date-chapter-io{padding:10px 0 6px;gap:8px;display:flex;}
#date-chapter-pop .date-chapter-io button{flex:1;border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--ink);padding:8px;}
#date-chapter-pop #date-inn-saves{border-top:1px solid var(--line);margin-top:3px;}
#date-chapter-pop #date-clear{color:#a85262;font-size:11px;opacity:.8;}

/* A single quiet list, with no nested card treatment. */
#date-chapter-pop{padding:12px 16px 14px;border-radius:20px;gap:0;background:var(--surface,#fff7f6);box-shadow:0 12px 36px #20121c20;}
#date-chapter-pop .date-fold,#date-chapter-pop .inn-appearance-fold{border:0;border-radius:0;background:transparent;margin:0;box-shadow:none;border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent);}
#date-chapter-pop .date-fold>summary,#date-chapter-pop .inn-appearance-fold>summary{padding:13px 2px;min-height:43px;background:transparent;border:0;border-radius:0;}
#date-chapter-pop .date-menu-field{padding:12px 2px;}
#date-chapter-pop select{border:0;border-radius:0;background:transparent;box-shadow:none;padding:7px 2px;color:var(--ink);text-align:right;}
#date-chapter-pop .date-chapter-row{align-items:center;}
#date-chapter-pop .date-chapter-del{border:0;background:transparent;box-shadow:none;width:24px;flex-basis:24px;opacity:.5;}
#date-chapter-pop #date-chapter-new{background:transparent;border:0;border-radius:0;border-top:1px solid color-mix(in srgb,var(--ink) 9%,transparent);justify-content:flex-start;padding:13px 2px;margin:0;}
#date-chapter-pop .date-skin-field{border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent);}
#date-chapter-pop .date-skin-head{padding:0;}
#date-chapter-pop .date-skin-list{width:100%;}
#date-chapter-pop .date-chapter-io{display:flex;padding:13px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent);gap:0;}
#date-chapter-pop .date-chapter-io button{background:transparent;border:0;border-radius:0;box-shadow:none;padding:4px 0;font-size:11px;}
#date-chapter-pop .date-chapter-io button+button{border-left:1px solid color-mix(in srgb,var(--ink) 12%,transparent);}
#date-chapter-pop #date-inn-saves{border:0;margin:0;padding:13px 2px;}
#date-chapter-pop #date-clear{padding:11px 2px;border:0;background:transparent;}
#date-chapter-pop .inn-menu-heading{padding:3px 2px 12px;}

/* Setup is content of the Inn sheet, never another floating panel. */
.date-inn-float:has(#date-chapter-pop:not([hidden])){background:#fff8f6;backdrop-filter:none;-webkit-backdrop-filter:none;}
#date-chapter-pop{--surface:#fff8f6;--accent:#e4bdc8;--strong:#ac647b;--ink:#69545d;--ink-soft:#a28690;--line:rgba(181,109,130,.17);position:static;inset:auto;width:100%;max-width:none;max-height:none;overflow:visible;padding:7px 10px 3px;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--ink);}
#date-chapter-pop .inn-menu-heading{padding:3px 2px 13px;margin:0 0 3px;border-bottom:1px solid var(--line);}
#date-chapter-pop .date-menu-field,#date-chapter-pop .date-menu-line,#date-chapter-pop .date-fold>summary,#date-chapter-pop .inn-appearance-fold>summary{color:#69545d;}
#date-chapter-pop .date-menu-field select{color:#69545d;background:transparent;}
#date-chapter-pop .date-chapter-io{border-bottom:0;padding-bottom:12px;}
#date-chapter-pop .inn-menu-footer{display:flex;align-items:center;gap:12px;padding:13px 2px 4px;border-top:1px solid var(--line);margin-top:2px;}
#date-chapter-pop .inn-menu-footer #date-inn-saves{display:flex;align-items:center;justify-content:space-between;flex:1;min-height:32px;margin:0;padding:4px 0;border:0;font-size:12px;background:transparent;}
#date-chapter-pop .inn-menu-footer #date-inn-saves>span{flex:none;}
#date-chapter-pop .inn-menu-footer #date-clear{flex:0 0 auto;width:auto;min-height:32px;padding:4px 0 4px 14px;border:0;border-left:1px solid var(--line);border-radius:0;background:transparent;color:#ac647b;font-size:11px;opacity:1;}

/* Music uses the active palette; sheets are opaque for legibility. */
#music-sheet .music-page{background:linear-gradient(160deg,var(--surface),var(--bg) 55%,var(--bg-2));color:var(--ink);font-family:var(--font-ui);isolation:isolate;}
#music-sheet .music-page.has-background{background:linear-gradient(color-mix(in srgb,var(--surface) 82%,transparent),color-mix(in srgb,var(--surface) 94%,transparent)),var(--music-background) center/cover no-repeat;}
#music-sheet .music-nav{background:transparent;color:var(--ink);}
#music-sheet .music-page-scroll{padding-top:calc(var(--sat,0px) + 68px);}
#music-sheet .music-disc{width:62%;max-width:220px;border-radius:18px;box-shadow:0 14px 35px color-mix(in srgb,var(--ink) 15%,transparent);}
#music-sheet .music-pl-title{font-size:23px;font-weight:500;letter-spacing:-.035em;margin-top:22px;color:var(--ink);}
#music-sheet .music-pl-by{color:var(--ink-soft);font-size:11px;}
#music-sheet .music-playall{background:var(--strong);color:var(--surface);box-shadow:0 6px 20px color-mix(in srgb,var(--strong) 25%,transparent);width:48px;height:48px;}
#music-sheet .music-track-row{border-color:var(--line);}
#music-sheet .music-track{min-height:64px;color:var(--ink);}
#music-sheet .music-track-no,#music-sheet .music-track-main small{color:var(--ink-soft);opacity:1;}
#music-sheet .music-track[aria-current=true] strong,#music-sheet .music-track[aria-current=true] .music-track-no{color:var(--ink);font-weight:700;}
#music-sheet .music-track[aria-current=true]{background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:12px;}
#music-sheet .music-listen-card,#music-sheet .music-drawer-card{background:var(--surface);color:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--line);box-shadow:0 -12px 40px #0002;}
#music-sheet .music-listen-mask,#music-sheet .music-drawer-mask{background:#17121d66;backdrop-filter:blur(8px);}
#music-sheet .music-listen-one{background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--line);border-radius:0;min-height:64px;padding:10px 2px;box-shadow:none;}
#music-sheet .music-listen-one.is-on{background:color-mix(in srgb,var(--accent) 20%,var(--surface));border-radius:12px;border-color:transparent;padding-inline:10px;}
#music-sheet .music-listen-one small,#music-sheet .music-listen-card p{color:var(--ink-soft);opacity:1;}
.music-background-actions{display:flex;gap:8px;margin:10px 0;}.music-background-actions button{flex:1;padding:10px 8px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:12px;font-size:11px;}
#music-sheet .music-drawer-card input{background:var(--bg);color:var(--ink);border-color:var(--line);}

#music-sheet .music-drawer-card{padding:0 20px 24px;border-radius:26px 26px 0 0;gap:12px;scrollbar-width:thin;}
#music-sheet .music-drawer-head{position:sticky;top:0;z-index:3;background:var(--surface);padding:20px 0 15px;border-bottom:1px solid var(--line);margin-bottom:4px;}
#music-sheet .music-drawer-head strong{font-size:15px;font-weight:500;letter-spacing:.04em;}
#music-sheet .music-drawer-head button{color:var(--ink);font-size:12px;}
#music-sheet .music-drawer-card input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:11px 0;font-size:13px;line-height:1.5;outline-offset:3px;}
#music-sheet .music-drawer-card input::placeholder{color:var(--ink-soft);opacity:.7;}
.music-field-caption,.music-edit-section-label{font-size:10px;letter-spacing:.06em;color:var(--ink-soft);margin-top:8px;}
#music-sheet #music-pl-name{font-size:18px;font-weight:500;}
#music-sheet #music-pl-name+.music-field-caption{display:none;}
#music-sheet #music-cover-btn{display:flex;align-items:center;justify-content:center;min-height:39px;width:100%;padding:10px 14px;margin:4px 0 0;border:1px dashed var(--line);border-radius:12px;background:transparent;color:var(--ink);font-size:12px;}
#music-sheet .music-background-actions{margin:0;gap:0;border-bottom:1px solid var(--line);padding-bottom:10px;}
#music-sheet .music-background-actions button{border:0;border-radius:0;padding:6px;font-size:10px;color:var(--ink-soft);}
#music-sheet .music-background-actions button+button{border-left:1px solid var(--line);}
#music-sheet #music-cover-url{font-size:10px;color:var(--ink-soft);}
#music-sheet .music-edit-row{padding:13px 0;border-bottom:1px solid var(--line);gap:0 10px;}
#music-sheet .music-edit-row input{border:0;padding:4px 0;}
#music-sheet .music-edit-row input[data-song-url]{font-size:10px;color:var(--ink-soft);}
#music-sheet .music-edit-row button{color:var(--ink-soft);border-radius:50%;font-size:18px;}
#music-sheet .music-add-line{background:transparent;color:var(--ink);border:0;padding:16px 0;font-size:12px;}
#music-sheet .music-playall,#music-sheet .music-playall.is-on{display:grid;place-items:center;width:52px;height:52px;padding:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--strong) 40%,var(--surface));background:linear-gradient(145deg,color-mix(in srgb,var(--strong) 75%,var(--surface)),var(--strong));color:var(--surface);box-shadow:0 6px 16px color-mix(in srgb,var(--strong) 20%,transparent),inset 0 1px 1px #fff5;}
#music-sheet .music-playall svg{width:21px;height:21px;}
#music-sheet .music-playall:not(.is-on) svg{transform:translateX(1px);}

#date-saves-list .save-row{background:transparent;border:0;border-bottom:1px solid var(--line);padding:15px 0;gap:12px;}#date-saves-list .save-row-main{min-width:0;display:flex;flex-direction:column;gap:6px;}#date-saves-list .save-row-main>b{font-size:14px;}#date-saves-list .save-row-main>span{font-size:11px;}#date-saves-list .save-updated{font-size:10px;opacity:.6;}#date-saves-list{max-height:50vh;overflow:auto;}

/* Save dialog footer stays aligned even with enlarged UI fonts. */
#date-saves-sheet .pay-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;max-height:85%;padding:20px;gap:12px;}
#date-saves-sheet #date-saves-list{min-height:0;overflow:auto;flex:1;margin:0;}
#date-saves-sheet .date-save-actions{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr) minmax(0,1fr);gap:8px;align-items:stretch;flex-shrink:0;padding:14px 0 0;margin:0;border-top:1px solid var(--line);width:100%;}
#date-saves-sheet .date-save-actions>button{display:flex;align-items:center;justify-content:center;min-width:0;width:100%;height:40px;min-height:40px;margin:0;padding:0 6px;border-radius:11px;white-space:nowrap;word-break:keep-all;font-size:12px;line-height:1;font-weight:500;box-shadow:none;letter-spacing:0;}
#date-saves-sheet #date-saves-close{background:transparent;border:0;color:var(--ink-soft);}
#date-saves-sheet #date-save-import{background:transparent;border:1px solid var(--line);color:var(--ink);}
#date-saves-sheet #date-saves-new{background:var(--ink);color:var(--surface);border:1px solid var(--ink);}
#date-saves-list .save-row-acts{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:5px;margin-top:9px;}
#date-saves-list .save-row-acts button{background:transparent;color:var(--ink-soft);border:0;padding:6px;font-size:10px;white-space:nowrap;}

/* Game hall — an editorial after-hours lounge. Scoped to the landing page. */
.screen[data-screen="games"]{background:radial-gradient(ellipse at 100% 0%,#39343a55,transparent 45%),#141417;color:#f2e9df;font-family:var(--font-ui);}
.screen[data-screen="games"] .nav-header{background:transparent;border:0;box-shadow:none;color:#f2e9df;padding-bottom:6px;}
.screen[data-screen="games"] .nav-header h2{font-size:11px;letter-spacing:.18em;font-weight:400;color:#bdb2aa;}
.screen[data-screen="games"] .icon-btn{background:#ffffff08;color:#e9ddd3;border:1px solid #ffffff12;border-radius:50%;width:32px;height:32px;}
.screen[data-screen="games"] .game-login{background:#ffffff07;border:1px solid #ffffff18;border-radius:30px;color:#ded1c4;padding:4px 5px 4px 11px;font-size:11px;gap:7px;box-shadow:none;}
.screen[data-screen="games"] .game-login img{width:25px;height:25px;border-radius:50%;}
.screen[data-screen="games"] .game-accounts{background:#242327;color:#eee2d6;border:1px solid #ffffff20;box-shadow:0 14px 35px #0005;border-radius:16px;}
.screen[data-screen="games"] .game-account{color:#eee2d6;}.screen[data-screen="games"] .game-account.on{background:#ffffff0d;}
#game-hall{padding:8px 22px 28px;gap:0;scrollbar-width:thin;}
.hall-intro{display:flex;justify-content:space-between;align-items:center;padding:8px 0 21px;gap:12px;}
.hall-intro>div>span{font:8px system-ui,sans-serif;letter-spacing:.22em;color:#b6a492;}.hall-intro h1{font-size:23px;font-weight:500;letter-spacing:-.04em;margin:9px 0 0;line-height:1.4;}.hall-intro-mark{font-size:33px;color:#bda88f;font-weight:300;}
#game-hall .game-hero{height:204px;min-height:204px;border-radius:17px;box-shadow:none;border:1px solid #ffffff1a;}
#game-hall .game-hero-art{background-position:center 40%;filter:saturate(.5);}
#game-hall .game-hero-shade{background:linear-gradient(180deg,#16131b08 15%,#14121755 44%,#141217ed 100%);}
.hall-feature-label{position:absolute;top:16px;left:17px;font-size:9px;letter-spacing:.1em;color:#e9ddcb;}
#game-hall .game-hero-copy{left:17px;bottom:20px;gap:6px;right:45px;}
#game-hall .game-hero-copy small{background:transparent;border:0;padding:0;font-size:9px;color:#d2bdad;letter-spacing:.08em;}
#game-hall .game-hero-copy b{font-size:29px;letter-spacing:.05em;line-height:1.2;color:#fff0df;}
#game-hall .game-hero-copy>span{font-size:10px;font-weight:400;color:#d0bfb4;line-height:1.6;}
#game-hall .game-hero em{right:16px;bottom:22px;display:grid;place-items:center;border:1px solid #edddc555;border-radius:50%;width:32px;height:32px;padding:0;background:#edddc510;color:#f1dfca;box-shadow:none;font-size:18px;}
.hall-section-head{display:flex;justify-content:space-between;align-items:center;margin:24px 0 6px;font-size:12px;color:#e4d8cc;}.hall-section-head small{font:7px system-ui,sans-serif;letter-spacing:.15em;color:#847d77;}
#game-hall .game-shelf{gap:0;}
#game-hall .game-row{border:0;border-bottom:1px solid #ffffff10;background:transparent;border-radius:0;box-shadow:none;padding:14px 0;min-height:88px;gap:13px;}
#game-hall .game-row i{width:55px;height:59px;border-radius:9px;flex-shrink:0;filter:saturate(.7);box-shadow:none;}
#game-hall .game-row i:after{display:none;}
#game-hall .game-row-copy{gap:4px;min-width:0;}
#game-hall .game-row-copy small{background:none;padding:0;color:#a69587;font:8px system-ui,sans-serif;letter-spacing:.05em;}
#game-hall .game-row-copy b{font-size:16px;color:#f0e4d8;line-height:1.3;font-weight:500;}
#game-hall .game-row-copy>span{font-size:9px;line-height:1.5;color:#9e9690;font-weight:400;}
#game-hall .game-row em{font-size:16px;color:#a99887;font-weight:400;}
.hall-city{display:flex;justify-content:space-between;align-items:center;text-align:left;margin:18px 0 0;padding:15px 16px;background:linear-gradient(110deg,#2e2d2b,#202123);border:1px solid #ffffff0d;border-radius:13px;color:#e3d5c3;cursor:pointer;}
.hall-city>span{display:flex;flex-direction:column;gap:6px;}.hall-city small{font-size:7px;letter-spacing:.12em;opacity:.55;}.hall-city b{font-size:16px;font-weight:500;}.hall-city span>span{font-size:9px;color:#a69b8d;}.hall-city em{font-style:normal;font-size:20px;color:#b9a78e;}
.hall-history{display:flex;justify-content:space-between;align-items:center;background:transparent;border:0;color:#9d948a;padding:19px 0 0;text-align:left;gap:10px;cursor:pointer;}.hall-history>span{font-size:10px;}.hall-history small{font-size:8px;}
#game-hall button:focus-visible{outline:1px solid #d8bea0;outline-offset:3px;}#game-hall button:active{opacity:.75;}

/* Undercover: classified dossier / dark green and amber, independent of global theme. */
.screen[data-screen="game"].spy-noir{--ink:#e7e5d5;--ink-soft:#a1ac9b;--strong:#c5ad6c;--accent:#3c5449;--surface:#14231e;--line:#a9bea322;background:radial-gradient(ellipse at 90% 0%,#31483b70,transparent 50%),repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 5px),#101a16;color:var(--ink);font-family:var(--font-ui);}
.spy-noir .nav-header{background:#101a16e8;color:var(--ink);border-bottom:1px solid var(--line);box-shadow:none;}.spy-noir .nav-header h2{color:var(--ink-soft);font-size:12px;letter-spacing:.1em;}.spy-noir .icon-btn{background:#ffffff07;color:var(--ink);border:1px solid var(--line);border-radius:50%;}.spy-noir #game-abort{color:#c5ad6c;font-size:11px;}
.spy-noir .g-lobby{padding:16px;}.spy-dossier{position:relative;padding:18px 18px 13px;background:linear-gradient(130deg,#24372d,#18271f);border:1px solid #8f9c7944;border-radius:5px 18px 5px 5px;margin:0 0 18px;overflow:hidden;}
.spy-dossier:after{content:'?';position:absolute;right:17px;top:21px;font:100px Georgia,serif;line-height:1;color:#b6c7a80a;transform:rotate(-12deg);pointer-events:none;}
.spy-dossier-top,.spy-dossier-foot{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:8px;color:#a7b69c;letter-spacing:.08em;}.spy-dossier-top i{font:7px system-ui,sans-serif;font-style:normal;color:#c5ad6c;border:1px solid #c5ad6c55;padding:4px 5px;transform:rotate(-5deg);}
.spy-dossier h1{margin:23px 0 9px;font-size:29px;letter-spacing:.12em;font-weight:500;color:#e7e4cc;}.spy-dossier>p{margin:0 0 22px;font-size:11px;color:#a2b09c;}.spy-dossier-foot{padding-top:12px;border-top:1px solid #a9bea322;font-size:8px;}
.spy-section-title{display:flex;justify-content:space-between;font-size:12px;color:#d4d8c4;margin:0 0 12px;}.spy-section-title span{font:7px system-ui,sans-serif;letter-spacing:.1em;color:#778c7b;}
.spy-noir .g-rule{color:#a7b39f;font-size:10px;line-height:1.8;margin-bottom:13px;}
.spy-noir .g-person{position:relative;background:transparent;border:0;border-bottom:1px solid #a9bea31a;border-radius:0;color:#dce0cc;min-height:60px;padding:10px 5px;gap:12px;box-shadow:none;font-size:12px;}.spy-noir .g-person img{width:34px;height:34px;border-radius:8px;filter:saturate(.65);}.spy-noir .g-person:after{content:'＋';margin-left:auto;color:#758676;font-size:17px;}.spy-noir .g-person.on{background:#a8b5800c;border-color:#b8bf8055;}.spy-noir .g-person.on:after{content:'✓';color:#d7bf7e;}
.spy-noir .g-go,.spy-noir .g-bar button{background:#c5ad6c;color:#15221a;border:0;border-radius:8px;box-shadow:none;font-weight:500;}.spy-noir .g-go{margin-top:18px;min-height:43px;}
.spy-noir .g-line.gm p{border-radius:0;background:transparent;border:0;color:#97a88e;font-size:10px;letter-spacing:.06em;}
.spy-noir .g-line.secret{padding:12px 14px;border:1px dashed #c5ad6c66;background:#c5ad6c0a;border-radius:5px;margin:10px 12px;}.spy-noir .g-line.secret p{color:#dcc88c;font-size:13px;line-height:1.8;}
.spy-noir .g-line.say,.spy-noir .g-line.dead{background:#203129;border:1px solid #a9bea31a;color:#e0e5d4;border-radius:4px 13px 13px 13px;}.spy-noir .g-line.me{background:#303b29;color:#ece9cc;border:1px solid #c5ad6c22;}.spy-noir .g-line b{color:#b6c5a2;font-size:10px;}.spy-noir .g-line p{color:inherit;line-height:1.8;}
.spy-noir .g-dock{background:linear-gradient(transparent,#101a16 14%);padding:14px 14px 16px;}.spy-noir .g-seats{border-top:1px solid #a9bea322;padding-top:12px;}.spy-noir .g-seat{color:#9cad95;}.spy-noir .g-seat img{border-radius:8px;}.spy-noir .g-seat.me .seat-av{outline-color:#c5ad6c;border-radius:10px;}.spy-noir .g-dock>p{font-size:11px;color:#c7c6a8;margin:9px 0;}
.spy-noir .g-bar textarea,.spy-noir .g-draft{background:#203028;border:1px solid #8b9e7940;border-radius:8px;color:#e7e5d5;}.spy-noir .g-bar textarea::placeholder{color:#84977e;}.spy-noir .g-picks button{background:#203028;border:1px solid #8b9e7933;color:#bbc8ac;border-radius:7px;}.spy-noir .g-picks button.on{background:#c5ad6c;color:#15221a;}.spy-noir .g-report{background:transparent;color:#d4dbc7;line-height:1.9;}.spy-noir .g-wait,.spy-noir .g-sent{color:#9eae90;}

/* Undercover dossier: monochrome paper, evidence collage, oxblood annotations. */
.screen[data-screen="game"].spy-noir{--ink:#242222;--ink-soft:#78716a;--strong:#853435;--accent:#c7bdb0;--surface:#efede6;--line:#40332b22;background:repeating-linear-gradient(0deg,#382d2103 0 1px,transparent 1px 4px),#e9e6df;color:#242222;}
.spy-noir .nav-header{background:#eeebe4;border-color:#3f302522;color:#302926;}.spy-noir .nav-header h2{color:#655b54;}.spy-noir .icon-btn{background:transparent;color:#41332e;border-color:#44332922;}.spy-noir #game-abort{color:#853435;}
.spy-noir .g-lobby{padding:14px 17px;}
.spy-noir .spy-dossier{background:#eeebe4 url('../assets/games/spy-dossier-v1.webp') center/cover;border:1px solid #75695433;border-radius:2px;min-height:205px;box-shadow:3px 5px 0 #d5d1c7,0 8px 17px #32271b15;padding:18px;}
.spy-noir .spy-dossier:after{display:none;}.spy-noir .spy-dossier-top{position:relative;z-index:1;color:#292625;}.spy-noir .spy-dossier-top>span{background:#eeebe4cc;padding:3px;}.spy-noir .spy-dossier-top i{color:#853435;border-color:#85343588;background:#f3f0e8d9;letter-spacing:.06em;}
.spy-noir .spy-dossier h1{position:relative;margin-top:54px;color:#231f1c;font-family:var(--font-display),serif;font-weight:650;font-size:30px;letter-spacing:.1em;}.spy-noir .spy-dossier>p{color:#853435;font-size:10px;margin-bottom:17px;}.spy-noir .spy-dossier-foot{color:#41372e;border-color:#47392e33;font-size:8px;background:#eeebe4c9;}
.spy-noir .spy-section-title{color:#292421;margin:25px 0 12px;font-weight:600;}.spy-noir .spy-section-title span{color:#853435;}.spy-noir .g-rule{color:#75675e;font-size:10px;}
.spy-noir .g-person{background:transparent;color:#352d27;border-bottom:1px solid #44372c22;position:relative;}.spy-noir .g-person img{filter:grayscale(1);border-radius:2px;border:3px solid #f9f7f0;box-shadow:1px 2px 4px #33281b22;width:37px;height:42px;transform:rotate(-3deg);}.spy-noir .g-person:after{color:#93877b;}.spy-noir .g-person.on{background:#85343508;border-bottom-color:#85343566;}.spy-noir .g-person.on:after{color:#853435;}.spy-noir .g-person.on img{filter:grayscale(.25);}
.spy-noir .g-go,.spy-noir .g-bar button{background:#2c2927;color:#f5f0e5;border-radius:3px;letter-spacing:.08em;}.spy-noir .g-go{border-bottom:3px solid #853435;}
.spy-noir .g-line.gm p{color:#756c61;font-size:10px;}.spy-noir .g-line.secret{border:1px solid #85343566;border-left:3px solid #853435;background:#f4f0e7;border-radius:1px;box-shadow:2px 3px 0 #c9c3b76b;padding:15px;}.spy-noir .g-line.secret:before{content:'PERSONAL EVIDENCE / 仅你可见';display:block;font:8px system-ui,sans-serif;color:#853435;letter-spacing:.08em;margin-bottom:8px;}.spy-noir .g-line.secret p{color:#382c27;}
.spy-noir .g-line.say,.spy-noir .g-line.dead{background:#f7f5ed;border:1px solid #63564422;color:#352e29;border-radius:1px;box-shadow:2px 3px 0 #d0cabe66;}.spy-noir .g-line.me{background:#ded9ce;border-color:#6d5b4633;}.spy-noir .g-line b{color:#853435;}
.spy-noir .g-dock{background:linear-gradient(transparent,#e9e6df 10%);}.spy-noir .g-seats{border-color:#45372b33;}.spy-noir .g-seat{color:#6c5d51;}.spy-noir .g-seat img{border-radius:2px;border:2px solid #fffaf1;filter:grayscale(.7);}.spy-noir .g-seat.me .seat-av{outline-color:#853435;border-radius:2px;}.spy-noir .g-dock>p{color:#853435;}
.spy-noir .g-bar textarea,.spy-noir .g-draft{color:#352e29;background:#f7f4eb;border:1px solid #63564444;border-radius:3px;}.spy-noir .g-bar textarea::placeholder{color:#928374;}.spy-noir .g-picks button{background:#f7f4eb;color:#352e29;border-color:#63564433;border-radius:2px;}.spy-noir .g-picks button.on{background:#853435;color:#fff8e9;}.spy-noir .g-report{color:#352e29;}.spy-noir .g-wait,.spy-noir .g-sent{color:#796855;}

.spy-noir .spy-dossier{background-position:center;background-size:cover;}.spy-noir .spy-dossier h1,.spy-noir .spy-dossier>p{max-width:66%;text-shadow:0 1px 0 #f5efdf88;}.spy-noir .spy-dossier-top i{font-size:6px;}

/* PIN board: independently layered paper, hardware, evidence and photo frames. */
.screen[data-screen="game"].spy-noir{background:repeating-linear-gradient(45deg,#ffffff03 0 1px,transparent 1px 4px),#292122;}
.spy-noir .nav-header{background:#242022;color:#e7e2dc;border:0;}.spy-noir .nav-header h2{color:#c6bcb2;}.spy-noir .icon-btn{color:#e7e2dc;border-color:#ffffff22;}.spy-noir #game-abort{color:#c6b0a7;}
.spy-noir .g-lobby{margin:0 7px 7px;padding:20px 15px 24px;background:#edece6 url('../assets/games/spy-paper-v2.webp') center top/100% auto;box-shadow:inset 4px 0 8px #0000000d;position:relative;}
.spy-noir .spy-dossier{display:block;isolation:isolate;position:relative;overflow:visible;min-height:250px;padding:14px 13px 12px;margin:2px 0 28px;background:transparent;border:0;border-bottom:1px solid #302b2833;box-shadow:none;border-radius:0;}
.spy-noir .spy-dossier:before{content:'';position:absolute;inset:20px -4px 15px;background:#f9f8f0;transform:rotate(-2deg);box-shadow:2px 4px 9px #0002;z-index:-1;}
.spy-noir .spy-dossier-top{padding-bottom:12px;}.spy-noir .spy-dossier-top>span{background:none;font-size:8px;}.spy-noir .spy-dossier-top i{margin-right:12px;background:none;font-size:6px;}
.spy-title-block{position:relative;z-index:2;width:62%;padding-top:12px;}.spy-title-block>small{font:6px system-ui,sans-serif;letter-spacing:.1em;color:#8a3737;}
.spy-noir .spy-dossier h1{font-family:Georgia,'Songti SC','SimSun',serif;font-size:38px;line-height:1.18;font-weight:700;margin:10px 0 12px;max-width:none;letter-spacing:.07em;text-shadow:none;}
.spy-title-block h1>span{color:#853435;font-size:44px;display:inline-block;transform:rotate(12deg);}
.spy-title-block>p{font-size:9px;line-height:1.8;color:#6c625c;margin:0 0 10px;}
.spy-fingerprint{position:absolute;right:-3px;top:100px;width:49%;height:auto;transform:rotate(12deg);z-index:1;pointer-events:none;filter:drop-shadow(2px 3px 2px #0002);}
.spy-hardware{position:absolute;right:-7px;top:-14px;width:80px;z-index:3;pointer-events:none;}
.spy-noir .spy-dossier-foot{position:relative;background:transparent;margin-top:18px;border-color:#3f373333;font-size:7px;}
.spy-noir .g-lobby{display:block;}.spy-noir .g-lobby>.spy-suspect{display:inline-flex;vertical-align:top;width:calc(50% - 9px);margin:4px 3px 19px;padding:0 0 10px;position:relative;flex-direction:column;gap:0;border:0;background:transparent;min-height:0;box-shadow:none;transform:rotate(-2deg);}.spy-noir .g-lobby>.spy-suspect:nth-of-type(even){transform:rotate(2deg);margin-top:12px;}
.spy-noir .spy-suspect:after{display:none;}.spy-photo{position:relative;display:block;width:100%;aspect-ratio:3/4;filter:drop-shadow(2px 4px 3px #0002);}
.spy-noir .g-person img.spy-portrait{position:absolute;left:10%;top:11%;width:80%;height:66%;object-fit:cover;filter:grayscale(1) contrast(1.07);border:0;box-shadow:none;transform:none;border-radius:0;}
.spy-noir .g-person img.spy-photo-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;border:0;box-shadow:none;filter:none;transform:none;border-radius:0;pointer-events:none;}
.spy-person-label{display:flex;width:100%;align-items:baseline;justify-content:space-between;padding:0 9px;margin-top:-16px;position:relative;z-index:2;gap:4px;color:#292423;}.spy-person-label small{font:7px monospace;opacity:.6;}.spy-person-label b{font-size:11px;font-weight:500;white-space:nowrap;}
.spy-selection{position:absolute;top:18px;left:4px;z-index:3;transform:rotate(-14deg);font-size:8px;font-style:normal;letter-spacing:.06em;padding:4px 6px;color:#675e52;border:1px solid #675e5266;background:#efece3d9;}.spy-suspect.on .spy-selection{color:#853435;border:2px double #853435;background:#f5e9e1e8;}.spy-noir .spy-suspect.on{background:transparent;border:0;}.spy-noir .g-person.on img.spy-portrait{filter:grayscale(.25);}
.spy-noir #g-start{position:sticky;bottom:0;width:100%;z-index:5;border:1px solid #482f2d;border-bottom:3px solid #2e2424;border-radius:1px;background:#342b2b;color:#f6eee4;box-shadow:0 -5px 18px #eeece2c9;letter-spacing:.2em;font-size:12px;}
.spy-noir .g-rule{border-left:2px solid #853435;padding:2px 0 2px 9px;font-size:9px;color:#75675d;}.spy-noir .spy-section-title{font-family:Georgia,'Songti SC',serif;font-size:16px;}
.spy-table-heading{position:relative;display:flex;align-items:baseline;gap:12px;margin:0 8px;padding:18px 16px 12px;background:#eeece6 url('../assets/games/spy-paper-v2.webp') center/cover;border-bottom:1px solid #39302944;color:#2c2524;flex-shrink:0;}.spy-table-heading>span{font:700 22px Georgia,'Songti SC',serif;}.spy-table-heading>small{font:7px monospace;color:#853435;}.spy-table-heading>img{position:absolute;width:56px;right:3px;top:0;pointer-events:none;}
.spy-noir .g-log{margin:0 8px;padding:18px 14px;background:#eeece6 url('../assets/games/spy-paper-v2.webp') center top/100% auto;border-left:1px solid #fff7;border-right:1px solid #fff7;}
.spy-noir .g-line.say,.spy-noir .g-line.me{position:relative;background:#f9f8f0;margin:17px 2px;padding:14px 12px;box-shadow:2px 3px 0 #d4d0c5,0 4px 9px #0000000a;border:0;transform:rotate(-.6deg);}.spy-noir .g-line.me{transform:rotate(.5deg);margin-left:20px;background:#e0ddd4;}.spy-noir .g-line.say:before{content:'';position:absolute;top:-6px;left:16px;width:36px;height:11px;background:#b8b4a566;transform:rotate(-8deg);}.spy-noir .g-line b{font-size:9px;border-bottom:1px solid #382c2b18;padding-bottom:6px;margin-bottom:8px;letter-spacing:.06em;}.spy-noir .g-line p{font-size:12px;line-height:1.9;}
.spy-noir .g-line.secret{background:#f7f3eb;transform:rotate(-1deg);margin:8px 0 22px;border:1px solid #29242155;border-left:4px solid #292421;padding:17px 13px;box-shadow:4px 4px 0 #c5beb055;}.spy-noir .g-line.secret:before{content:'私密词条 / EVIDENCE 01';color:#853435;}.spy-noir .g-line.secret p{font-family:Georgia,'Songti SC',serif;font-size:16px;}
.spy-noir .g-seats{background:#dedbd2;margin:0 8px;padding:12px 10px 7px;border-top:1px dashed #6d5f4c55;}.spy-noir .g-dock{background:#e8e5dc;margin:0 8px 8px;padding:8px 13px 14px;}.spy-noir .g-bar textarea{border:0;border-bottom:1px solid #30282255;background:#f7f4eb;border-radius:0;}.spy-noir .g-bar button{border-radius:1px;background:#853435;font-size:11px;}.spy-noir .g-picks button{box-shadow:1px 2px 0 #c4bdb1;border-radius:1px;}.spy-noir .g-picks button.on{transform:rotate(-3deg);border:1px solid #853435;}

/* Word Club: tactile cut paper and crayon, separate from Undercover. */
.screen[data-screen="game"].guess-craft{--ink:#343e3e;--ink-soft:#818779;--strong:#d97d60;--accent:#8ebbb1;--surface:#fffaf0;--line:#46524a22;background:#f7f0df url('../assets/games/guess-paper-v1.webp') center/cover;color:var(--ink);font-family:var(--font-ui);}
.guess-craft .nav-header{background:#faf5e9e8;border:0;box-shadow:none;color:#46524a;}.guess-craft .nav-header h2{font-size:11px;letter-spacing:.1em;color:#77867b;}.guess-craft .icon-btn{border:1px solid #6e8d8133;border-radius:50%;color:#4d6f65;background:#ffffff55;}.guess-craft #game-abort{color:#9f6655;font-size:11px;}
.guess-craft .g-lobby{padding:14px 19px 24px;}
.guess-intro{position:relative;padding:12px 2px 15px;min-height:225px;margin:0 0 17px;isolation:isolate;}
.guess-intro>small{font:7px system-ui,sans-serif;letter-spacing:.15em;color:#64897f;}
.guess-intro h1{font-size:41px;font-weight:600;line-height:1.18;letter-spacing:.05em;margin:20px 0 12px;position:relative;z-index:1;max-width:62%;}
.guess-intro h1>span{display:block;width:max-content;position:relative;}.guess-intro h1>span:first-child{color:#337f7c;transform:rotate(-3deg);}.guess-intro h1>span:nth-child(2){color:#c8795e;transform:rotate(2deg);margin-left:17px;}.guess-question{color:#a49abe;}
.guess-intro h1>span:after{content:'';position:absolute;bottom:3px;left:-4px;right:-5px;height:12px;background:#edd58166;z-index:-1;transform:rotate(1deg);}
.guess-intro>img{position:absolute;width:47%;right:-4px;top:39px;transform:rotate(8deg);pointer-events:none;filter:drop-shadow(1px 3px 1px #3333330b);}
.guess-intro>p{font-size:10px;line-height:1.85;color:#79857a;margin:14px 0 18px;}
.guess-tags{display:flex;gap:8px;flex-wrap:wrap;}.guess-tags span{font-size:8px;padding:5px 8px;background:#e6eee5;border-radius:3px;color:#668378;transform:rotate(-2deg);}.guess-tags span:nth-child(2){background:#f5e8ba;color:#9a8354;transform:rotate(2deg);}.guess-tags span:nth-child(3){background:#e9e3f0;color:#8a789e;}
.guess-team-label{display:flex;justify-content:space-between;align-items:center;font-size:15px;color:#465b51;margin:8px 0 14px;font-weight:500;}.guess-team-label small{font-size:8px;color:#8d998b;font-weight:400;}
.guess-craft .g-rule{font-size:9px;line-height:1.8;color:#909486;border-left:2px solid #e4b18a;padding-left:8px;margin-bottom:18px;}
.guess-craft .g-lobby>.guess-friend{position:relative;display:inline-flex;vertical-align:top;flex-direction:column;align-items:center;width:calc(33.333% - 8px);padding:0 2px 12px;margin:0 3px 16px;border:0;border-radius:0;background:transparent;box-shadow:none;gap:1px;}
.guess-friend-photo{position:relative;display:block;width:100%;aspect-ratio:3/4;transform:rotate(-3deg);filter:drop-shadow(1px 2px 2px #51463320);}.guess-friend:nth-of-type(even) .guess-friend-photo{transform:rotate(3deg);}
.guess-craft .g-person img.guess-avatar{position:absolute;left:12%;top:12%;width:76%;height:65%;object-fit:cover;border-radius:0;}
.guess-craft .g-person img.guess-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;border-radius:0;pointer-events:none;}
.guess-friend-name{font-size:10px;color:#536255;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;line-height:1.6;}
.guess-chosen{position:absolute;top:1px;right:-1px;display:grid;place-items:center;border-radius:50%;width:21px;height:21px;background:#fdf9ec;color:#b1bba6;border:1px solid #a9b69d66;font:15px system-ui,sans-serif;}
.guess-craft .guess-friend.on{background:transparent;}.guess-friend.on .guess-chosen{background:#4c9185;color:#fffaf0;border-color:#fffaf0;transform:rotate(-9deg);box-shadow:1px 2px 0 #bad2c8;}
.guess-craft .g-go{position:sticky;bottom:0;z-index:3;min-height:43px;color:#fffaf0;background:#4e8e83;border:1px solid #3c756b;border-radius:5px 12px 5px 12px;box-shadow:3px 4px 0 #b5cec1;font-size:12px;font-weight:500;letter-spacing:.1em;}
.guess-table-head{position:relative;flex-shrink:0;padding:16px 18px;border-bottom:1px dashed #9bb5a955;min-height:69px;}.guess-table-head>span{font-size:19px;color:#4a8177;font-weight:500;}.guess-table-head small{display:block;font:6px system-ui,sans-serif;letter-spacing:.18em;color:#a4a489;margin-top:6px;}.guess-table-head img{position:absolute;right:10px;top:3px;width:72px;pointer-events:none;}
.guess-craft .g-line.secret{position:relative;padding:22px 23px 30px;background:transparent url('../assets/games/guess-bubble-v1.webp') center/100% 100% no-repeat;min-height:110px;margin:4px 7px 22px;display:flex;justify-content:center;align-items:center;color:#766343;}.guess-craft .g-line.secret p{font-size:17px;font-weight:500;text-align:center;color:#635b44;}
.guess-craft .g-line.gm p{background:#e5ebdb99;color:#75836b;font-size:9px;border-radius:4px;padding:5px 10px;}
.guess-craft .g-line.say,.guess-craft .g-line.me{position:relative;border:0;background:#e8efdf;color:#485848;border-radius:3px 14px 14px 14px;padding:12px 13px;margin-top:14px;box-shadow:2px 3px 0 #d7dfcc66;}.guess-craft .g-line.me{background:#f4e6c2;color:#756342;border-radius:13px 3px 13px 13px;}.guess-craft .g-line b{font-size:9px;color:#62857b;letter-spacing:.03em;margin-bottom:6px;}.guess-craft .g-line p{font-size:12px;line-height:1.9;}
.guess-craft .g-seats{padding:9px 12px;border-top:1px dashed #adb99b77;}.guess-craft .g-seat{color:#7e8b75;}.guess-craft .g-seat img{border-radius:9px;border:2px solid #fffaf0;}.guess-craft .g-seat.me .seat-av{outline-color:#92b7a1;border-radius:11px;}
.guess-craft .g-dock{background:linear-gradient(#f9f4e600,#f9f4e6 12%);padding:10px 13px 15px;}.guess-craft .g-dock>p{color:#8f8364;font-size:11px;line-height:1.7;}.guess-craft .g-bar textarea{background:#fffdf5;color:#536152;border:1px solid #b4c7b3;border-radius:7px;box-shadow:2px 2px 0 #d8e4cf66;}.guess-craft .g-bar textarea::placeholder{color:#a2ad93;}.guess-craft .g-bar button{background:#4e8e83;color:#fffdf2;border-radius:8px;border:0;box-shadow:2px 2px 0 #a8c8b4;font-size:11px;}
.guess-craft .g-picks button{background:#e7eddd;color:#628571;border:1px solid #b0c3a4;border-radius:6px;}.guess-craft .g-picks button.on{background:#4e8e83;color:#fffaf0;}.guess-craft .g-report{color:#59634f;background:transparent;line-height:1.9;}.guess-craft .g-wait,.guess-craft .g-sent{color:#8c977c;}

/* Sea Turtle Soup — a midnight maritime riddle room. */
.screen[data-screen="game"].soup-tide{--ink:#e1e6de;--ink-soft:#99b3b0;--strong:#c4af78;--accent:#629f9c;--surface:#14292f;--line:#a0c5bc22;background:#0c1e29 url('../assets/games/soup-paper-v1.webp') center/cover;color:var(--ink);font-family:var(--font-ui);}
.soup-tide .nav-header{background:#0e222be8;color:#d5ded4;border-bottom:1px solid #8eb6ac22;box-shadow:none;}.soup-tide .nav-header h2{font-size:11px;letter-spacing:.1em;color:#9ab6b0;}.soup-tide .icon-btn{border:1px solid #9dbca933;border-radius:50%;background:transparent;color:#d0dccf;}.soup-tide #game-abort{color:#baa777;font-size:11px;}
.soup-tide .g-lobby{padding:18px 19px 25px;}.soup-intro{position:relative;min-height:240px;padding:12px 4px 17px;border-bottom:1px solid #a3bca833;isolation:isolate;margin-bottom:23px;}.soup-eyebrow{font:7px system-ui,sans-serif;letter-spacing:.18em;color:#8ea9a1;}
.soup-ornament{position:absolute;right:-8px;top:51px;width:49%;transform:rotate(-7deg);pointer-events:none;}.soup-intro h1{font-family:Georgia,'Songti SC',serif;font-size:43px;letter-spacing:.12em;color:#e6dcc2;margin:32px 0 12px;font-weight:500;position:relative;z-index:1;}.soup-intro>p{font-size:11px;line-height:2;color:#95b6b0;margin:0 0 20px;}.soup-rule-tabs{display:flex;gap:7px;}.soup-rule-tabs span{font-size:8px;border:1px solid #9ebca54d;border-radius:20px;padding:4px 11px;color:#b2cabf;}.soup-rule-tabs span:nth-child(2){border-color:#bea77d44;color:#c4b48d;}.soup-intro-foot{font-size:8px;color:#7c9a95;margin-top:20px;letter-spacing:.07em;}
.soup-team-title{display:flex;align-items:baseline;justify-content:space-between;font-family:Georgia,'Songti SC',serif;font-size:17px;color:#d8d9c6;margin-bottom:13px;}.soup-team-title small{font-family:var(--font-ui);font-size:8px;color:#82a19a;}
.soup-tide .g-rule{font-size:9px;line-height:1.9;color:#83a39e;border-left:1px solid #a8925b66;padding-left:9px;margin-bottom:18px;}
.soup-tide .g-person.soup-friend{position:relative;background:transparent;border:0;border-bottom:1px solid #9fb9a61c;border-radius:0;color:#d6ddce;padding:9px 0;min-height:84px;gap:14px;margin:0;box-shadow:none;}
.soup-portrait{position:relative;display:block;width:52px;height:69px;flex-shrink:0;filter:drop-shadow(1px 2px 2px #0003);}.soup-tide .g-person img.soup-avatar{position:absolute;left:15%;top:12%;width:70%;height:65%;border:0;object-fit:cover;border-radius:50%;filter:saturate(.6);}.soup-tide .g-person img.soup-frame{position:absolute;inset:0;width:100%;height:100%;border-radius:0;object-fit:fill;pointer-events:none;}
.soup-friend-text{display:flex;flex-direction:column;gap:7px;}.soup-friend-text small{font:7px system-ui,sans-serif;color:#72938b;letter-spacing:.12em;}.soup-friend-text b{font-size:12px;font-weight:400;}.soup-checked{display:grid;place-items:center;margin-left:auto;width:24px;height:24px;border:1px solid #8fae9644;border-radius:50%;font:14px system-ui;color:#92b0a3;}.soup-tide .soup-friend.on{background:#a7c8ac07;border-color:#b5a77355;}.soup-friend.on .soup-checked{background:#c2af78;color:#182c2b;border-color:#c2af78;}
.soup-tide .g-go{position:sticky;bottom:0;z-index:3;background:#d3c08e;color:#21352f;border:1px solid #e0d2ac;border-radius:4px;box-shadow:0 6px 20px #0003;font-size:12px;letter-spacing:.16em;font-weight:500;margin-top:22px;}
.soup-table-title{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:17px 17px 13px;border-bottom:1px solid #aac3b51c;gap:8px;}.soup-table-title>div{display:flex;flex-direction:column;gap:6px;}.soup-table-title small{font:6px system-ui;letter-spacing:.17em;color:#8fb2a7;}.soup-table-title b{font-family:Georgia,'Songti SC',serif;font-size:18px;font-weight:400;color:#e2d5b3;}.soup-table-title>span{font-size:8px;color:#9ebca8;}
.soup-surface{position:relative;background:transparent url('../assets/games/soup-card-v1.webp') center/100% 100% no-repeat;padding:24px 26px 27px;margin:5px 1px 22px;min-height:175px;filter:drop-shadow(1px 4px 3px #0003);color:#3c514b;}.soup-surface>small{font:7px system-ui;letter-spacing:.1em;color:#8b845d;}.soup-surface p{font-family:Georgia,'Songti SC',serif;font-size:13px;line-height:2;margin:14px 0 11px;color:#3a4f49;white-space:pre-wrap;overflow-wrap:anywhere;}.soup-surface>span{font-size:7px;color:#8f977b;}
.soup-truth{background:#afc7b815;border:1px solid #cbb47a66;border-left:3px solid #cbb47a;padding:18px;margin:18px 0;border-radius:2px;}.soup-truth small{font:7px system-ui;color:#cfba84;letter-spacing:.06em;}.soup-truth p{font-size:12px;line-height:2;color:#d9e0cb;margin:12px 0 0;}
.soup-answer{display:flex;justify-content:center;align-items:center;gap:8px;margin:8px 0 21px;color:#a2c8bb;}.soup-answer small{font-size:8px;opacity:.6;}.soup-answer strong{font-size:11px;font-weight:500;border:1px solid #8cc0ac55;padding:5px 16px;border-radius:30px;background:#8cc0ac0c;}.soup-answer.no{color:#c7ad93;}.soup-answer.no strong{border-color:#c7ad9344;background:#c7ad930a;}.soup-answer.neutral{color:#91a7b3;}.soup-answer.neutral strong{border-color:#91a7b344;}
.soup-tide .g-line.gm p{background:transparent;color:#82a49c;font-size:9px;letter-spacing:.03em;}.soup-tide .g-line.say,.soup-tide .g-line.me{background:#91bdb00e;border:1px solid #9bc6b320;color:#d3e1d4;border-radius:4px 14px 14px 14px;padding:12px 13px;margin-top:14px;box-shadow:none;}.soup-tide .g-line.me{background:#bca66f12;border-color:#c5ae7729;border-radius:14px 4px 14px 14px;}.soup-tide .g-line b{color:#b4ab83;font-size:9px;margin-bottom:7px;}.soup-tide .g-line p{font-size:12px;line-height:1.9;}
.soup-tide .g-seats{border-top:1px solid #aac3b51c;padding:12px 11px 5px;}.soup-tide .g-seat{color:#8eafa1;}.soup-tide .g-seat img{border-radius:50%;border:1px solid #c6b27b77;}.soup-tide .g-seat.me .seat-av{outline-color:#bca56e;border-radius:50%;}
.soup-tide .g-dock{background:linear-gradient(#10272b00,#10272b 12%);padding:9px 13px 16px;}.soup-tide .g-dock>p{color:#a2bba4;font-size:11px;}.soup-tide .g-bar textarea,.soup-tide .g-draft{background:#17353b;border:1px solid #8ab6a544;border-radius:7px;color:#e0e8d7;}.soup-tide .g-bar textarea::placeholder{color:#7c9f94;}.soup-tide .g-bar button{background:#ccb983;color:#1b3330;border:0;border-radius:7px;font-size:11px;}.soup-tide .g-picks button{background:transparent;color:#a2beb0;border:1px solid #8ab6a544;box-shadow:none;border-radius:30px;font-size:10px;}.soup-tide .g-picks button.on{background:#b6cbb5;color:#18352d;border-color:#b6cbb5;}.soup-tide .g-report{color:#d2dcc7;background:transparent;line-height:1.9;}.soup-tide .g-wait,.soup-tide .g-sent{color:#91ae9c;}

/* Werewolf council: independent atmospheric background, silver frames and stationery. */
.screen[data-screen="game"].wolf-night{--ink:#e0dce8;--ink-soft:#aaa5bc;--surface:#161627;--strong:#9d4559;--accent:#85859e;--line:#b4a9c522;background:#10101d url('../assets/games/wolf-paper-v1.webp') center/cover;color:var(--ink);font-family:var(--font-ui);}
.screen[data-screen="game"].wolf-night .nav-header{background:#11111ddc;box-shadow:none;border:0;color:#d0c9d9;}.screen[data-screen="game"].wolf-night .nav-header h2{font-size:11px;letter-spacing:.12em;color:#aaa5bc;}.screen[data-screen="game"].wolf-night .icon-btn{background:#ffffff05;color:#d0c9d9;border:1px solid #b4a9c533;border-radius:50%;}.screen[data-screen="game"].wolf-night #game-abort{color:#bc9bab;font-size:11px;}
.wolf-night .g-lobby{padding:18px 18px 25px;}.wolf-council-intro{position:relative;padding:10px 3px 19px;min-height:230px;border-bottom:1px solid #b4a9c533;margin-bottom:19px;isolation:isolate;}.wolf-council-intro>small{font:7px system-ui;letter-spacing:.2em;color:#a9a3b7;}.wolf-council-intro>img{position:absolute;right:-4px;top:47px;width:48%;transform:rotate(-6deg);pointer-events:none;}.wolf-council-intro h1{font-family:Georgia,'Songti SC',serif;font-size:42px;line-height:1.3;letter-spacing:.13em;color:#ece5d8;font-weight:500;margin:33px 0 13px;position:relative;z-index:1;}.wolf-council-intro>p{font-size:10px;color:#aaa5bc;line-height:2;margin-bottom:23px;}.wolf-council-intro>span{display:block;font-size:8px;color:#a77e8a;letter-spacing:.1em;}
.wolf-night .g-rule{font-size:9px;line-height:1.9;color:#9f99af;}.wolf-night .g-sizes{gap:9px;margin:15px 0 13px;}.wolf-night .g-sizes button{border:1px solid #b4a9c544;border-radius:4px;background:#1c1a2966;color:#aea9c0;padding:10px;font-weight:400;font-size:12px;}.wolf-night .g-sizes button.on{background:#84384933;border-color:#b57b8b99;color:#e0c5cc;box-shadow:inset 0 -2px #b57b8b66;}
.wolf-night .g-lobby>.wolf-council-person{position:relative;display:inline-flex;flex-direction:column;width:calc(50% - 10px);margin:11px 4px 17px;vertical-align:top;gap:0;padding:0 0 8px;border:0;border-radius:0;background:transparent;box-shadow:none;min-height:0;align-items:center;}
.wolf-council-photo{position:relative;display:block;width:100%;aspect-ratio:3/4;filter:drop-shadow(1px 4px 4px #0005);}.wolf-night .g-person img.wolf-council-avatar{position:absolute;left:13%;top:11%;width:74%;height:74%;object-fit:cover;border:0;border-radius:46% 46% 40% 40%;box-shadow:none;filter:saturate(.5);}.wolf-night .g-person img.wolf-council-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;border-radius:0;border:0;box-shadow:none;pointer-events:none;}
.wolf-council-name{font-family:Georgia,'Songti SC',serif;position:relative;z-index:2;margin-top:-17px;font-size:12px;line-height:1.5;color:#d7d0df;}.wolf-selected{font-size:8px;color:#8e879f;margin-top:13px;letter-spacing:.05em;}.wolf-night .wolf-council-person.on{background:transparent;border:0;}.wolf-council-person.on .wolf-selected{color:#d0a3b0;}.wolf-council-person.on .wolf-council-photo{filter:drop-shadow(0 0 5px #b77b934d);}.wolf-night .g-person.on img.wolf-council-avatar{filter:saturate(.95);}
.wolf-night .g-lobby>#g-start{position:sticky;bottom:0;z-index:5;background:#823d50;border:1px solid #b4839277;color:#efe2e0;border-radius:3px;font-size:12px;letter-spacing:.15em;font-weight:500;box-shadow:0 -6px 22px #11111dbb,0 6px 18px #0005;}
.wolf-council-status{display:flex;align-items:center;gap:11px;padding:14px 15px 12px;border-bottom:1px solid #b4a9c522;background:#17162388;flex-shrink:0;}.wolf-council-status>span{font:29px Georgia;color:#b0a9c4;}.wolf-council-status>div{display:flex;flex-direction:column;gap:5px;}.wolf-council-status small{font:6px system-ui;letter-spacing:.16em;color:#807c97;}.wolf-council-status b{font-family:Georgia,'Songti SC',serif;font-size:17px;font-weight:400;color:#d7d0e1;}.wolf-council-status em{margin-left:auto;font-size:9px;color:#b39ba7;font-style:normal;}.wolf-council-status.is-day>span{color:#d2c193;}.wolf-council-status.is-day b{color:#e0d3b2;}
.screen[data-screen="game"].wolf-night .g-line.secret{position:relative;background:transparent url('../assets/games/wolf-card-v1.webp') center/100% 100% no-repeat;padding:25px 24px 29px;margin:9px 0 22px;color:#4f4956;min-height:108px;border:0;border-radius:0;}.screen[data-screen="game"].wolf-night .g-line.secret p{font-family:Georgia,'Songti SC',serif;color:#514755;font-size:13px;line-height:1.9;}
.screen[data-screen="game"].wolf-night .g-line.gm p{background:#af9abc0b;color:#a8a0b9;border:0;border-radius:2px;font-size:9px;padding:7px 11px;}.screen[data-screen="game"].wolf-night .g-line.say,.screen[data-screen="game"].wolf-night .g-line.dead{background:#221f31c9;border:1px solid #aba0bd25;border-radius:3px 12px 12px 12px;color:#d4cede;box-shadow:none;padding:12px 13px;margin-top:13px;}.screen[data-screen="game"].wolf-night .g-line.me{background:#452a3b99;border:1px solid #ae7e9233;color:#e4d3df;border-radius:12px 3px 12px 12px;}.screen[data-screen="game"].wolf-night .g-line b{font-size:9px;color:#b99cab;margin-bottom:7px;}.screen[data-screen="game"].wolf-night .g-line p{font-size:12px;line-height:1.9;}
.screen[data-screen="game"].wolf-night .g-seats{border-top:1px solid #b4a9c522;padding:11px 10px 6px;}.screen[data-screen="game"].wolf-night .g-seat{color:#a5a0b8;}.screen[data-screen="game"].wolf-night .g-seat img{border-radius:8px;border:1px solid #b4a9c544;box-shadow:none;}.screen[data-screen="game"].wolf-night .g-seat.me .seat-av{outline-color:#b08b9d;border-radius:10px;}.screen[data-screen="game"].wolf-night .seat-no{background:#7c4659;color:#eee2de;}
.screen[data-screen="game"].wolf-night .g-dock{background:linear-gradient(#11111d00,#11111ded 14%);padding:9px 13px 16px;}.screen[data-screen="game"].wolf-night .g-dock>p{font-size:11px;color:#b2a6bc;}.screen[data-screen="game"].wolf-night .g-bar textarea,.screen[data-screen="game"].wolf-night .g-draft{background:#201c2ee0;color:#d6cede;border:1px solid #b4a9c533;border-radius:5px;font-size:12px;}.screen[data-screen="game"].wolf-night .g-bar button,.screen[data-screen="game"].wolf-night .g-go{background:#814457;color:#efe1e3;border:1px solid #bc92a14d;border-radius:5px;font-size:11px;box-shadow:none;}.screen[data-screen="game"].wolf-night .g-picks button{background:#242032cc;color:#b4a9c4;border:1px solid #b4a9c533;border-radius:5px;font-size:10px;}.screen[data-screen="game"].wolf-night .g-picks button.on{background:#814457;color:#efe1e3;border-color:#bc92a177;}.screen[data-screen="game"].wolf-night .g-report{color:#d6cede;background:transparent;line-height:1.9;}

/* Generated transparent silver wordmark. */
.wolf-council-intro h1.wolf-art-title{margin:27px 0 16px;line-height:0;letter-spacing:0;width:70%;position:relative;z-index:1;}
.wolf-council-intro h1.wolf-art-title img{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 5px #08071599);}
/* Social club layered hall */
.screen[data-screen="games"]{background:#09252b url('../assets/games/hall-paper-v1.webp') center/cover;color:#e9dfc9;}
.screen[data-screen="games"] .nav-header{background:transparent;border:0;box-shadow:none;color:#e9dfc9;}
#game-hall{padding:10px 20px 24px;background:transparent;}
.club-welcome{position:relative;padding:15px 3px 21px}.club-welcome>span{font:7px system-ui;letter-spacing:.19em;color:#b9a77c}.club-welcome h1{font-family:Georgia,'Songti SC',serif;font-weight:400;font-size:31px;line-height:1.4;letter-spacing:.06em;margin:17px 0 12px;color:#eee4cd}.club-welcome p{font-size:9px;color:#9baea8;margin:0}.club-welcome>i{position:absolute;right:13px;top:43px;font:68px Georgia;color:#bca775;transform:rotate(14deg)}
.club-section{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #c4ad7733;padding:16px 1px 12px;color:#cbbc99;font-size:10px}.club-section small{font:6px system-ui;letter-spacing:.12em;color:#839d96}
.club-games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 10px}
#game-hall .club-game{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;min-width:0;padding:15px 10px 14px;border:0;background:linear-gradient(155deg,#bcb58d0b,#071b2180);border-radius:0;box-shadow:none;color:#e8dcc0;overflow:hidden}
.club-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;opacity:.65}.club-number{font-size:7px;color:#a3b2a2;white-space:nowrap}.club-emblem{width:82%;height:96px;object-fit:contain;margin:11px 0 8px;filter:drop-shadow(0 5px 5px #0006)}.club-game b{font-family:Georgia,'Songti SC',serif;font-size:19px;font-weight:400;letter-spacing:.08em;line-height:1.5}.club-game>small{font-size:8px;color:#9fafa2;margin-top:4px}.club-enter{display:flex;gap:19px;font-size:8px;color:#c6af79;margin-top:12px}.club-enter i{font:13px Georgia}.club-game:focus-visible{outline:2px solid #d9bd78;outline-offset:2px}.club-game:active{filter:brightness(1.15)}
#game-hall .club-city{display:flex;align-items:center;gap:14px;text-align:left;width:100%;background:transparent;border:0;border-top:1px solid #c4ad7733;border-bottom:1px solid #c4ad7733;padding:18px 3px;margin-top:20px;border-radius:0;color:#d4c9ad;box-shadow:none}.club-city>span{font:38px Georgia;color:#c4ad77}.club-city div{flex:1}.club-city small{font:6px system-ui;letter-spacing:.15em;color:#839d96}.club-city b{display:block;font-size:15px;font-weight:400;margin-top:5px}.club-city p{font-size:8px;color:#9baca2;margin:6px 0 0}.club-city>i{font-style:normal;color:#bca775}#game-hall .hall-history{color:#acb7a5;margin-top:10px;background:transparent}
/* Yore Inn welcome and native reading palettes. */
.date-ballet[data-inn-theme] {
  --inn-paper: #f6e9eb;
  --inn-text: #604a52;
  --inn-muted: #785c66;
  --inn-rule: #ae778957;
  --inn-panel: #fff9faed;
  --inn-accent: #89586b;
  --inn-paper-image: linear-gradient(155deg, #fffbfa, #f4e3e8 75%, #ead6dd);
}
.date-ballet[data-inn-theme="moon"] {
  --inn-paper: #20283f;
  --inn-text: #e2e5ef;
  --inn-muted: #afb8d0;
  --inn-rule: #b6bfd442;
  --inn-panel: #242e47ed;
  --inn-accent: #bbc6df;
  --inn-paper-image: url('../assets/inn/moon-paper-v1.webp');
}
.date-ballet[data-inn-theme="forest"] {
  --inn-paper: #e8eedb;
  --inn-text: #3e5140;
  --inn-muted: #697c60;
  --inn-rule: #758b5f40;
  --inn-panel: #f3f6e9ed;
  --inn-accent: #58734d;
  --inn-paper-image: url('../assets/inn/forest-paper-v1.webp');
}
.screen.inn-welcome,
.screen.date-ballet[data-inn-theme]:not([data-screen="date-preset"]) {
  background: var(--inn-paper) var(--inn-paper-image) center / cover;
  color: var(--inn-text);
}
.inn-welcome .nav-header {
  flex-shrink: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
  color: var(--inn-text);
}
.inn-welcome .nav-header h2 { font: 15px Georgia, serif; letter-spacing: .12em; }
.inn-welcome .icon-btn { background: transparent; color: var(--inn-text); }
.inn-welcome-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 22px 28px; }
.inn-arrival { position: relative; isolation: isolate; padding: 19px 3px 26px; min-height: 226px; }
.inn-arrival > small { font: 6px system-ui; letter-spacing: .16em; color: var(--inn-muted); }
.inn-arrival h1 { position: relative; z-index: 1; font-family: Georgia, 'Songti SC', serif; font-size: 29px; font-weight: 400; line-height: 1.5; margin: 20px 0 18px; letter-spacing: .04em; }
.inn-arrival p { position: relative; z-index: 1; color: var(--inn-muted); font-size: 9px; line-height: 1.9; }
.inn-arrival-art { position: absolute; right: -14px; bottom: 8px; width: 58%; z-index: 0; opacity: .85; pointer-events: none; }
[data-inn-theme="moon"] .inn-arrival-art { filter: saturate(.25); opacity: .65; }
.inn-resume { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; background: transparent url('../assets/inn/letter-frame-v1.webp') center / 100% 100% no-repeat; border: 0; border-radius: 0; color: var(--inn-text); padding: 20px 22px; box-shadow: none; }
.inn-resume span:first-child { display: flex; flex-direction: column; gap: 8px; }
.inn-resume small { color: var(--inn-muted); font-size: 8px; }
.inn-resume b { font-size: 13px; font-weight: 400; }
.inn-resume > span:last-child { font-size: 9px; color: var(--inn-accent); }
.inn-theme-picker { margin-top: 12px; border-block: 1px solid var(--inn-rule); }
.inn-theme-picker summary { cursor: pointer; display: flex; justify-content: space-between; font-size: 10px; padding: 15px 1px; list-style: none; }
.inn-theme-picker summary span { color: var(--inn-muted); }
.inn-theme-picker > div { display: flex; flex-direction: column; padding-bottom: 9px; }
.inn-theme-picker button { display: flex; align-items: center; gap: 12px; text-align: left; background: transparent; border: 0; box-shadow: none; color: var(--inn-text); border-radius: 0; padding: 10px 7px; }
.inn-theme-picker button[aria-pressed="true"] { outline: 1px solid var(--inn-rule); outline-offset: -1px; }
.inn-theme-picker button span { display: flex; flex-direction: column; gap: 5px; }
.inn-theme-picker b { font-size: 11px; font-weight: 400; }
.inn-theme-picker small { font-size: 8px; color: var(--inn-muted); }
.inn-theme-dot { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #a7947355; background: #f8efd9; }
.inn-theme-dot.moon { background: #28314e; }
.inn-theme-dot.forest { background: #cbd9b9; }
.inn-catalog-heading { display: flex; justify-content: space-between; align-items: center; margin-top: 23px; }
.inn-catalog-heading h2 { font-family: Georgia, 'Songti SC', serif; font-size: 19px; font-weight: 400; margin: 0; }
.inn-catalog-heading small { font: 6px system-ui; color: var(--inn-muted); letter-spacing: .08em; }
.inn-guide-note { color: var(--inn-muted); font-size: 9px; line-height: 1.9; margin: 12px 0 15px; }
.inn-story { display: flex; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--inn-rule); }
.inn-story-cover > img { width: 65px; height: 87px; object-fit: cover; border-radius: 2px; flex-shrink: 0; box-shadow: 3px 4px 0 var(--inn-rule); }
.inn-story > div { min-width: 0; flex: 1; }
.inn-story small { font-size: 8px; color: var(--inn-muted); }
.inn-story h3 { font-family: Georgia, 'Songti SC', serif; font-weight: 400; font-size: 16px; margin: 9px 0 15px; overflow-wrap: anywhere; }
.inn-story-actions { display: flex; justify-content: space-between; gap: 6px; }
.inn-story-actions button { background: transparent; color: var(--inn-accent); font-size: 9px; border: 0; padding: 5px 0; border-radius: 0; box-shadow: none; }
.inn-guide-back { background: transparent; color: var(--inn-accent); border: 0; padding: 10px 0; font-size: 11px; }
.inn-guide-cover { text-align: center; padding: 15px 0 10px; }
.inn-guide-cover img { display: block; width: 100px; height: 133px; object-fit: cover; margin: 0 auto 17px; box-shadow: 5px 5px 0 var(--inn-rule); }
.inn-guide-cover small { font: 7px system-ui; color: var(--inn-muted); letter-spacing: .14em; }
.inn-guide-cover h1 { font-family: Georgia, 'Songti SC', serif; font-weight: 400; font-size: 23px; }
.inn-guide-intro { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.9; }
.inn-guide-sections details { border-top: 1px solid var(--inn-rule); padding: 15px 0; }
.inn-guide-sections summary { font-size: 12px; cursor: pointer; }
.inn-guide-sections p { font-size: 11px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.inn-guide-enter { width: 100%; padding: 13px; margin-top: 18px; border: 1px solid var(--inn-rule); border-radius: 3px; color: var(--inn-text); background: var(--inn-panel); }
.date-ballet[data-inn-theme] .date-stage-bar,
.date-ballet[data-inn-theme] .date-play-head,
.date-ballet[data-inn-theme] .date-form { background: var(--inn-panel); color: var(--inn-text); border-color: var(--inn-rule); }
.date-ballet[data-inn-theme] .date-stage-face h2,
.date-ballet[data-inn-theme] .date-stage-face p,
.date-ballet[data-inn-theme] .date-empty { color: var(--inn-muted); }
.date-ballet.inn-native-theme[data-inn-theme] .date-block {
  background: var(--inn-panel);
  color: var(--inn-text);
  border-color: var(--inn-rule);
  box-shadow: 0 6px 20px #00000008;
}
.date-ballet.inn-native-theme[data-inn-theme] .date-block::before,
.date-ballet.inn-native-theme[data-inn-theme] .date-block::after { display: none; }
.date-ballet.inn-native-theme[data-inn-theme] .date-mes-meta,
.date-ballet.inn-native-theme[data-inn-theme] .date-mes-menu { color: var(--inn-muted); }
.date-ballet.inn-native-theme[data-inn-theme] .date-field {
  background: var(--inn-panel);
  color: var(--inn-text);
  border-color: var(--inn-rule);
}
.date-ballet.inn-native-theme[data-inn-theme] #date-input { color: var(--inn-text); }

/* The cover and its ornaments are independently layered over the paper. */
.screen.date-ballet.inn-welcome[data-inn-theme]:has(.is-cover) {
  background: #f3e9e8 url('../assets/inn/book-garden.webp') center / cover;
  color: #654e53;
}
.inn-welcome:has(.is-cover) :is(.nav-header, .icon-btn) { color: #654e53; }
.inn-welcome-scroll.is-cover { display: grid; place-items: center; }
.inn-book-display { width: 100%; text-align: center; perspective: 950px; }
.inn-book-display p { margin: 34px 0 0; font-size: 13px; letter-spacing: .12em; }
.inn-book-front {
  position: relative;
  isolation: isolate;
  display: block;
  width: min(75%, 245px);
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 4px 9px 9px 4px;
  background: #e4c4c6;
  transform: rotate(-9deg) rotateY(-12deg);
  box-shadow: 5px 5px #fff9f3, 9px 9px #e3d0ce, 14px 18px 30px #64464b45;
}
.inn-book-front > * { position: absolute; pointer-events: none; }
.inn-book-binding {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(#fff8fb52, #fff8fb52), url('../assets/inn/book-binding.webp') center / cover;
}
.inn-book-lace { inset: 5%; width: 90%; height: 90%; }
.inn-book-bow { width: 31%; top: 24%; left: 34.5%; }
.inn-book-logo { width: 66%; top: 52%; left: 17%; transform: translateY(-40%); }
.inn-book-index { position: relative; perspective: 950px; }
.inn-book-display .inn-book-front { transform-origin: left center; }
.inn-book-index.is-revealed { animation: inn-reveal-index .25s ease-out both; }
@keyframes inn-reveal-index {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.inn-index-heading, .inn-bookmarks, .inn-pages {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.inn-index-heading h1 { font-size: 21px; font-weight: 400; margin: 8px 0 12px; }
.inn-bookmarks button { flex: 1; }
.inn-index-heading button, .inn-bookmarks button, .inn-pages button, .inn-continue {
  color: var(--inn-text);
  border: 1px solid var(--inn-rule);
  background: var(--inn-panel);
  border-radius: 5px;
  padding: 8px;
  font-size: 11px;
}
.inn-bookmarks button[aria-pressed="true"] { color: var(--inn-paper); background: var(--inn-accent); }
.inn-continue { margin-top: 10px; width: 100%; }
.inn-catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; margin: 12px 0; }
.inn-catalog .inn-story { display: block; min-width: 0; padding: 0 0 5px; }
.inn-catalog .inn-story-cover > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 112px; }
.inn-catalog .inn-story h3 {
  font-size: 12px;
  margin: 5px 0;
  line-height: 1.35;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.inn-catalog .inn-story-actions { flex-wrap: wrap; gap: 2px 6px; }
.inn-catalog .inn-story-actions button { font-size: 10px; }
.inn-pages { font-size: 11px; }
.inn-pages button:disabled { opacity: .45; }
@media (prefers-reduced-motion: reduce) {
  .inn-book-index.is-revealed { animation: none; }
}

.inn-story-cover, .inn-story-title {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}

/* Lace stationery composition for the open catalogue. */
.screen.date-ballet.inn-welcome[data-inn-theme="letter"]:not(:has(.is-cover)) {
  background: radial-gradient(ellipse at top, #f2dce2, transparent 45%), #fffaf6;
}
.inn-book-index .inn-index-heading { padding: 1px 0 4px; }
.inn-index-heading > span { font: 9px Georgia, serif; letter-spacing: .19em; }
.inn-book-index .inn-index-heading button { background: transparent; border: 0; }
.inn-catalog-masthead {
  display: grid;
  grid-template-columns: 30px minmax(0, 175px) 30px;
  align-items: center;
  justify-content: center;
  gap: 3px 9px;
  padding: 12px 0 9px;
  text-align: center;
}
.inn-catalog-logo { width: 100%; }
.inn-catalog-ribbon { width: 30px; }
.inn-catalog-masthead h1 {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.7;
}
.inn-book-index .inn-bookmarks { border-bottom: 1px solid var(--inn-rule); gap: 14px; }
.inn-book-index .inn-bookmarks button {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--inn-muted);
}
.inn-book-index .inn-bookmarks button[aria-pressed="true"] {
  color: var(--inn-accent);
  border-bottom-color: var(--inn-accent);
  font-weight: 700;
}
.inn-book-index .inn-continue { border: 0; background: transparent; margin-top: 4px; color: var(--inn-accent); }
.inn-book-index .inn-catalog { gap: 10px; margin-top: 8px; }
.inn-book-index .inn-story { border: 0; text-align: center; }
.inn-book-index .inn-story-cover {
  padding: 10% 12%;
  background: var(--inn-panel) url('../assets/inn/book-lace.webp') center / 100% 100% no-repeat;
  box-shadow: 0 2px 5px #8b61721c;
}
.inn-book-index .inn-story-cover > img { box-shadow: none; }
.inn-book-index .inn-story > div { margin-top: 4px; }
.inn-book-index .inn-story-title { text-align: center; }
.inn-book-index .inn-story h3 { margin: 3px 0; min-height: 0; }
.inn-book-index .inn-story-actions { justify-content: center; gap: 4px; }
.inn-book-index .inn-story-actions button { padding: 5px 3px; color: var(--inn-accent); }
.inn-welcome[data-inn-theme="moon"] .inn-catalog-logo { filter: brightness(2) saturate(.35); }
.inn-guide-cover img {
  padding: 13px;
  box-sizing: content-box;
  background: var(--inn-panel) url('../assets/inn/book-lace.webp') center / 100% 100% no-repeat;
}

/* Stacked guest-book leaves for the mobile guide. */
.inn-profile-book { margin: 5px 0 12px; }
.inn-profile-leaf {
  position: relative;
  border: 1px solid var(--inn-rule);
  border-radius: 5px;
  background: var(--inn-panel);
  color: var(--inn-text);
  box-shadow: 0 4px 10px #70515b15;
}
.inn-profile-portrait {
  padding: 17px 12px 15px;
  text-align: center;
}
.inn-profile-portrait > small { font: 9px Georgia, serif; letter-spacing: .15em; color: var(--inn-muted); }
.inn-profile-locket {
  width: min(54%, 158px);
  aspect-ratio: 4 / 5;
  margin: 11px auto 9px;
  padding: 6px;
  border: 4px double #b8979e;
  border-radius: 50%;
  background: #f7e9ec;
  box-shadow: 0 0 0 3px #d9bbc4, 0 0 0 5px #fff8f7, 0 5px 13px #70515b38;
}
.inn-profile-locket img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.inn-profile-portrait h1 { margin: 12px 0 0; font-size: 23px; font-weight: 400; letter-spacing: .12em; }
.inn-profile-binding {
  position: relative;
  z-index: 1;
  display: flex;
  height: 15px;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.inn-profile-binding i { position: relative; width: 20px; height: 21px; }
.inn-profile-binding i::before, .inn-profile-binding i::after {
  content: "";
  position: absolute;
  left: 9px;
  height: 22px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #a77987, #eed3db, #a77987);
  transform: rotate(36deg);
}
.inn-profile-binding i::after { transform: rotate(-36deg); }
.inn-profile-binding img { width: 49px; z-index: 1; }
.inn-profile-notes { padding: 17px 15px 14px; }
.inn-profile-notes h2 {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--inn-rule);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .12em;
}
.inn-profile-notes .inn-guide-intro { margin: 12px 0; font-size: 13px; line-height: 1.85; }
.inn-profile-notes .inn-guide-enter { margin-top: 5px; }

/* Rose stationery for the built-in reading view. */
.screen.date-ballet.inn-native-theme[data-screen="date"][data-inn-theme="letter"] {
  background: radial-gradient(ellipse at 50% 0%, #efd9e2, transparent 45%), #fbf4f3;
}
.date-ballet.inn-native-theme[data-inn-theme="letter"] .date-play-head {
  background: #fffafa;
  border-color: #e4cbd3;
  box-shadow: 0 3px 8px #865b6d12;
}
.date-ballet.inn-native-theme[data-inn-theme="letter"] .date-stage-bar {
  background: linear-gradient(90deg, #ecd4de, #fff8f8 80%);
  border-bottom: 1px solid #e2c7d0;
  padding-block: 6px;
}
.date-ballet.inn-native-theme[data-inn-theme="letter"] #date-play-name { color: #643d50; font-weight: 600; }
.date-ballet.inn-native-theme[data-inn-theme="letter"] .greet-switch-pill {
  background: #f9edf1;
  border: 1px solid #d9b7c4;
  color: #70495b;
}
.date-ballet.inn-native-theme[data-inn-theme="letter"] .greet-switch-pill button { color: inherit; }
.date-ballet.inn-native-theme[data-inn-theme="letter"] .date-mes:not(.date-mes-html) .date-block {
  width: 96%;
  padding-inline: clamp(16px, 5vw, 22px);
  background: linear-gradient(#fffafa, #fffdfb 35px);
  border: 1px solid #e4cdd4;
  border-radius: 5px;
  box-shadow: inset 0 0 0 4px #fffdfb, inset 0 0 0 5px #f1e2e6, 0 5px 12px #81596a14;
  color: #523d46;
}
.date-ballet.inn-native-theme[data-inn-theme="letter"] .date-mes[data-user="true"]:not(.date-mes-html) .date-block {
  background: #fbf0f4;
}
.date-ballet.inn-native-theme[data-inn-theme="letter"] .date-form {
  background: #f9edf1;
  border-color: #e4cbd3;
}
.date-ballet.inn-native-theme[data-inn-theme="letter"] .date-field {
  border-radius: 5px;
  background: #fffdfc;
}

/* Reading tools laid out like tabs on a letter. */
.date-ballet.inn-native-theme[data-inn-theme] .date-play-head {
  margin: var(--sat, env(safe-area-inset-top, 0px)) 0 0;
  padding: 3px 12px 0;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: var(--inn-panel);
  box-shadow: none;
  backdrop-filter: none;
}
.date-play-head #date-back-home {
  color: var(--inn-accent, #89586b);
  font: 20px Georgia, serif;
  width: 36px;
}
.date-play-head .date-inn-nav button {
  min-width: 0;
  height: 40px;
  color: var(--inn-muted, #785c66);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.date-play-head .date-inn-nav button:is(.on, [aria-expanded="true"]) {
  color: var(--inn-accent, #89586b);
  border-bottom-color: currentColor;
  font-weight: 600;
}
.date-play-head .date-inn-nav button.on::after { content: none; }
.date-ballet.inn-native-theme[data-inn-theme] .date-stage-bar {
  padding: 7px 15px;
  min-height: 34px;
  background: color-mix(in srgb, var(--inn-paper) 80%, var(--inn-panel));
  border-block: 1px solid var(--inn-rule);
}

/* Moon archive has its own graphite paper and etched silver ornaments. */
.date-ballet[data-inn-theme="moon"] {
  --inn-paper: #141215;
  --inn-text: #f1ede9;
  --inn-muted: #c6bbc1;
  --inn-rule: #9e93975c;
  --inn-panel: #201d21f5;
  --inn-accent: #e1d9d4;
  --inn-paper-image: url('../assets/inn/moon-velvet.webp');
}
.screen.date-ballet.inn-welcome[data-inn-theme="moon"]:has(.is-cover) {
  background: var(--inn-paper) var(--inn-paper-image) center / cover;
  color: var(--inn-text);
}
.inn-welcome[data-inn-theme="moon"] :is(.nav-header, .icon-btn) { color: var(--inn-accent); }
[data-inn-theme="moon"] .inn-book-front {
  background: #181619;
  box-shadow: 5px 5px #a39b99, 8px 8px #343036, 12px 17px 26px #000b;
}
[data-inn-theme="moon"] .inn-book-binding {
  background: linear-gradient(90deg,#0008,transparent 20%), var(--inn-paper-image) center / cover;
}
[data-inn-theme="moon"] .inn-book-bow { width: 66%; left: 17%; top: 12%; }
[data-inn-theme="moon"] .inn-book-logo { top: 58%; }
.inn-moon-masthead { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 12px; }
.inn-moon-crest { width: min(100%, 285px); max-height: 98px; object-fit: contain; }
.inn-moon-wordmark { width: min(56%, 180px); max-height: 64px; object-fit: contain; }
.inn-moon-masthead h1 { color: var(--inn-muted); font-family: Georgia, serif; }
[data-inn-theme="moon"] .inn-book-index .inn-story-cover {
  background: #252226 url('../assets/inn/moon-thorn.webp') center / 100% 100% no-repeat;
  box-shadow: 0 3px 8px #0008;
}
[data-inn-theme="moon"] .inn-book-index .inn-story-cover > img { border-radius: 0; }
[data-inn-theme="moon"] .inn-profile-leaf { border-radius: 2px; box-shadow: 0 4px 15px #0006; }
[data-inn-theme="moon"] .inn-profile-locket {
  border: 0;
  border-radius: 0;
  padding: 11% 12%;
  background: #1d1a1f url('../assets/inn/moon-thorn.webp') center / 100% 100% no-repeat;
  box-shadow: none;
}
[data-inn-theme="moon"] .inn-profile-locket img { border-radius: 0; }
[data-inn-theme="moon"] .inn-profile-binding { height: 39px; }
[data-inn-theme="moon"] .inn-profile-binding img { width: 132px; max-height: 48px; object-fit: contain; }
.date-ballet[data-inn-theme="moon"] :is(.date-play-head, .date-stage-bar, .date-form, .date-inn-float, .date-inn-pane, #date-chapter-pop, .greet-switch-pill) {
  background: var(--inn-panel);
  border-color: var(--inn-rule);
  color: var(--inn-text);
}
.date-ballet[data-inn-theme="moon"] :is(.greet-switch-pill button, .date-stage-face #date-play-sub, #date-play-name) { color: var(--inn-text); }
.date-ballet.inn-native-theme[data-inn-theme="moon"] .date-mes:not(.date-mes-html) .date-block {
  border-radius: 2px;
  box-shadow: inset 0 0 0 4px #201d21, inset 0 0 0 5px #7a70734d;
}
.date-ballet[data-inn-theme="moon"] .date-form-ico {
  background-image: none;
  color: var(--inn-accent);
  font: 19px Georgia, serif;
}
.date-ballet[data-inn-theme="moon"] .date-form-menu::before { content: "☰"; }
.date-ballet[data-inn-theme="moon"] .date-form-send:not(.stop)::before { content: "↑"; }
.date-ballet[data-inn-theme="moon"] .date-form-send.stop::before { background: var(--inn-accent); }
.date-ballet[data-inn-theme="moon"] .date-field::before,
.date-ballet[data-inn-theme="moon"] .date-field::after { display: none; }
.inn-theme-dot.moon { background: #211d22; border-color: #aca2a7; }

.inn-welcome[data-inn-theme="moon"] .inn-theme-picker {
  border-top: 0;
  padding-top: 27px;
  background: url('../assets/inn/moon-lilies.webp') center top / auto 24px no-repeat;
}
.inn-welcome[data-inn-theme="moon"]:has(.is-cover) :is(.nav-header, .icon-btn) { color: var(--inn-accent); }
.date-ballet.inn-native-theme[data-inn-theme="moon"] .date-field {
  background: #171619;
  border-color: var(--inn-rule);
}

/* A pool of light separates the dark volume from the backdrop. */
.inn-welcome[data-inn-theme="moon"] .inn-book-display {
  background: radial-gradient(ellipse at 50% 43%, #a7a6b34f 0%, #77768228 42%, transparent 72%);
}
.inn-welcome[data-inn-theme="moon"] .inn-book-front {
  box-shadow: 4px 4px #c0bdc1, 7px 7px #77737b, 10px 10px #39363f, 13px 20px 30px #000b;
}
.inn-welcome[data-inn-theme="moon"] .inn-book-binding {
  border: 1px solid #bdb9c180;
  background: linear-gradient(90deg, #b9b6c263 0%, #0b0a0d66 5%, transparent 11%),
    linear-gradient(155deg, #55525fbd, #25242dcc 72%),
    var(--inn-paper-image) center / cover;
}

/* Keep the moon palette above the built-in ballet skin on the story screen. */
.screen.date-ballet[data-screen="date"][data-inn-theme="moon"] :is(#date-back-home, .date-inn-nav button) {
  color: #e5e0e4;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="moon"] .date-inn-nav button:is(.on, [aria-expanded="true"]) {
  color: #fff;
  border-bottom-color: #d4c7d2;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="moon"] #date-greet .greet-switch-pill {
  background: #302a32;
  color: #f2edf1;
  border: 1px solid #857780;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="moon"] .date-mes:not(.date-mes-html) .date-block {
  background: #211e23;
  border-color: #786c76;
  color: #f2edf0;
  box-shadow: inset 0 0 0 4px #211e23, inset 0 0 0 5px #594f59;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="moon"] .date-mes :is(.date-text, .date-name, .date-time) { color: #f2edf0; }
.screen.date-ballet[data-screen="date"][data-inn-theme="moon"] .date-mes .date-text :is(.date-quote, em) { color: #ddd2db; }
.screen.date-ballet[data-screen="date"][data-inn-theme="moon"] .date-mes .date-time { opacity: .8; }
.screen.date-ballet[data-screen="date"][data-inn-theme="moon"] .date-mes .date-avatar {
  width: 77px;
  aspect-ratio: 4 / 5;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="moon"] :is(.date-avatar, .date-play-frame)::after {
  background: url('../assets/inn/moon-thorn.webp') center / 100% 100% no-repeat;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="moon"] :is(.date-avatar, .date-play-frame) img {
  inset: 12% 11% auto;
  width: 78%;
  height: 76%;
  border-radius: 0;
  clip-path: none;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="moon"] :is(.date-fold-head, .date-entry) {
  background: #2c2830;
  border-color: #70636d;
  color: #f0eaf0;
  box-shadow: none;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="moon"] :is(.date-fold-title, .date-entry-name, .date-inn-preset-bar button) { color: #f0eaf0; }
.screen.date-ballet[data-screen="date"][data-inn-theme="moon"] :is(.date-fold-caret, .date-fold-meta, .date-fold-hint, .date-inn-note) { color: #d4c8d1; }
.screen.date-ballet[data-screen="date"][data-inn-theme="moon"] .date-field textarea {
  background: #171619;
  border-color: #756773;
  color: #f2edf0;
  caret-color: #f2edf0;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="moon"] .date-field:has(textarea:placeholder-shown)::before {
  display: none;
}

/* 青岚小筑 — ink wash, carved fretwork and a real two-sided scroll reveal. */
.date-ballet:is([data-inn-theme="forest"], [data-inn-theme="mist"]) {
  --inn-paper: #e6ece0;
  --inn-text: #263b31;
  --inn-muted: #4f6658;
  --inn-rule: #70877580;
  --inn-panel: #fcfaf0f5;
  --inn-accent: #355b48;
  --inn-paper-image: url('../assets/inn/qinglan-mist.webp');
}
.screen.date-ballet.inn-welcome:is([data-inn-theme="forest"], [data-inn-theme="mist"]):has(.is-cover) {
  background: var(--inn-paper) var(--inn-paper-image) center / cover;
  color: var(--inn-text);
}
.inn-welcome:is([data-inn-theme="forest"], [data-inn-theme="mist"]):has(.is-cover) :is(.nav-header, .icon-btn) { color: var(--inn-accent); }
.inn-scroll-display { width: 100%; text-align: center; container-type: inline-size; }
.inn-scroll-branch { width: min(65%, 220px); height: 65px; object-fit: contain; }
.inn-scroll-display h1, .inn-forest-masthead h1 {
  color: var(--inn-text);
  font: 500 29px/1.4 "KaiTi", "Songti SC", serif;
  letter-spacing: .16em;
  margin: 4px 0 17px;
}
.inn-scroll-open {
  position: relative;
  display: block;
  width: 23%;
  height: clamp(126px, 43cqw, 190px);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.inn-scroll-paint { position: absolute; inset: 8% 0; overflow: hidden; background: #f7f0df; box-shadow: 0 5px 14px #293a3040; }
.inn-scroll-paint img { position: absolute; left: 50%; transform: translateX(-50%); width: 86cqw; max-width: none; height: 100%; object-fit: cover; }
.inn-scroll-rod { position: absolute; top: 0; width: 80px; height: 100%; object-fit: fill; pointer-events: none; }
.inn-scroll-rod.left { left: 0; transform: translateX(-50%); }
.inn-scroll-rod.right { right: 0; transform: translateX(50%); }
.inn-scroll-display p { color: var(--inn-muted); font-size: 12px; letter-spacing: .14em; }
.inn-forest-masthead { position: relative; text-align: center; padding: 10px 0; }
.inn-forest-masthead > img { width: 54%; max-height: 68px; object-fit: contain; }
.inn-forest-masthead h1 { margin: 0; }
.inn-forest-masthead h1 small { display: inline-block; vertical-align: middle; padding: 2px 4px; border: 1px solid #a05345; color: #984637; font-size: 11px; }
.inn-forest-masthead p { margin: 5px 0 0; color: var(--inn-muted); font-size: 12px; }
:is([data-inn-theme="forest"], [data-inn-theme="mist"]) .inn-book-index .inn-story-cover {
  background: #f7f4e9 url('../assets/inn/qinglan-frame.webp') center / 100% 100% no-repeat;
  padding: 10%;
  box-shadow: 0 3px 7px #314c3424;
}
:is([data-inn-theme="forest"], [data-inn-theme="mist"]) .inn-profile-leaf { border-radius: 1px; border-style: double; }
:is([data-inn-theme="forest"], [data-inn-theme="mist"]) .inn-profile-locket {
  background: #f7f4e9 url('../assets/inn/qinglan-frame.webp') center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  padding: 12px;
  box-shadow: none;
}
:is([data-inn-theme="forest"], [data-inn-theme="mist"]) .inn-profile-locket img { border-radius: 0; }
:is([data-inn-theme="forest"], [data-inn-theme="mist"]) .inn-profile-binding { height: 32px; }
:is([data-inn-theme="forest"], [data-inn-theme="mist"]) .inn-profile-binding img { width: 110px; max-height: 47px; object-fit: contain; }
.screen.date-ballet[data-screen="date"]:is([data-inn-theme="forest"], [data-inn-theme="mist"]) :is(#date-back-home, .date-inn-nav button, #date-play-name, #date-play-sub) { color: var(--inn-text); }
.screen.date-ballet[data-screen="date"]:is([data-inn-theme="forest"], [data-inn-theme="mist"]) :is(.date-fold-head, .date-entry, .date-inn-float, .date-inn-pane, .date-field textarea) {
  background: #f7f6eb;
  border-color: var(--inn-rule);
  color: var(--inn-text);
}
.screen.date-ballet[data-screen="date"]:is([data-inn-theme="forest"], [data-inn-theme="mist"]) :is(.date-fold-title, .date-fold-meta, .date-fold-caret, .date-entry-name, .date-inn-note, .date-inn-preset-bar button, .date-name, .date-time, .date-text) { color: var(--inn-text); }
.screen.date-ballet[data-screen="date"]:is([data-inn-theme="forest"], [data-inn-theme="mist"]) #date-greet .greet-switch-pill { background: #dce7d9; color: var(--inn-text); }
.screen.date-ballet[data-screen="date"]:is([data-inn-theme="forest"], [data-inn-theme="mist"]) .date-mes:not(.date-mes-html) .date-block {
  background: var(--inn-panel);
  color: var(--inn-text);
  border: 3px double var(--inn-rule);
  border-radius: 1px;
  box-shadow: 0 3px 10px #355b4819;
}
.screen.date-ballet[data-screen="date"]:is([data-inn-theme="forest"], [data-inn-theme="mist"]) :is(.date-avatar, .date-play-frame)::after { background: url('../assets/inn/qinglan-frame.webp') center / 100% 100% no-repeat; }
.screen.date-ballet[data-screen="date"]:is([data-inn-theme="forest"], [data-inn-theme="mist"]) :is(.date-avatar, .date-play-frame) img {
  inset: 10% 10% auto;
  width: 80%;
  height: 80%;
  border-radius: 0;
  clip-path: none;
}
.screen.date-ballet[data-screen="date"]:is([data-inn-theme="forest"], [data-inn-theme="mist"]) .date-form-ico { background-image: none; color: var(--inn-accent); font: 17px "KaiTi", serif; }
.screen.date-ballet[data-screen="date"]:is([data-inn-theme="forest"], [data-inn-theme="mist"]) .date-form-menu::before { content: "笺"; }
.screen.date-ballet[data-screen="date"]:is([data-inn-theme="forest"], [data-inn-theme="mist"]) .date-form-send:not(.stop)::before { content: "寄"; }
.screen.date-ballet[data-screen="date"]:is([data-inn-theme="forest"], [data-inn-theme="mist"]) .date-form-send.stop::before { background: var(--inn-accent); }
.screen.date-ballet[data-screen="date"]:is([data-inn-theme="forest"], [data-inn-theme="mist"]) .date-field::before { display: none; }

.screen.date-ballet[data-screen="date"]:is([data-inn-theme="forest"], [data-inn-theme="mist"]) .date-inn-nav button:is(.on, [aria-expanded="true"]) {
  color: #2c5944;
  border-bottom-color: #547b63;
}
.screen.date-ballet[data-screen="date"]:is([data-inn-theme="forest"], [data-inn-theme="mist"]) :is(.date-play-head, .date-stage-bar, .date-form) {
  border-color: var(--inn-rule);
}

/* Porcelain paper, pine fretwork and layered blossoms. */
.date-ballet[data-inn-theme="forest"] {
  --inn-paper: #f4f7f2;
  --inn-text: #1f2d25;
  --inn-muted: #435b4b;
  --inn-rule: #647c69a0;
  --inn-panel: #fcfdfa;
  --inn-accent: #294b36;
  --inn-paper-image: url('../assets/inn/qinglan-paper-v2.webp');
  --qinglan-trim: url('../assets/inn/qinglan-fret-v2.webp');
}
.inn-scroll-display, .inn-forest-masthead {
  position: relative;
  border-block: 8px solid transparent;
}
.inn-scroll-display { padding: 17px 0; }
.inn-scroll-display h1 { color: #202921; }
.inn-scroll-artwork {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  width: 86cqw;
  height: 100%;
  background: #f7faf4;
}
.inn-scroll-paint .inn-scroll-artwork > img {
  inset: 0 auto 0 0;
  transform: none;
  width: 76%;
  height: 100%;
  object-fit: cover;
}
.inn-scroll-inscription {
  position: absolute;
  inset: 10% 7% auto auto;
  writing-mode: vertical-rl;
  color: #1d261e;
  font: 600 clamp(15px, 6cqw, 23px)/1 "KaiTi", serif;
  letter-spacing: .12em;
}
.inn-scroll-inscription b, .inn-forest-title small {
  display: inline-block;
  background: #943d35;
  color: #fffaf5;
  font: 500 11px/1.25 "KaiTi", serif;
  padding: 3px;
}
.inn-scroll-inscription b { margin-top: 5px; }
.inn-forest-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 57px;
  align-items: center;
  isolation: isolate;
  padding: 12px 12px 7px;
  background: #fbfdfa80;
}
.inn-forest-window {
  width: min(100%, 196px);
  aspect-ratio: 1;
  margin: auto;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #4c6652;
}
.inn-forest-window img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 28% center; }
.inn-forest-title { display: grid; justify-items: center; gap: 8px; }
.inn-forest-title h1 { writing-mode: vertical-rl; font-size: 29px; color: #17251c; }
.inn-forest-masthead > .inn-forest-blossom {
  position: absolute;
  width: 48%;
  max-height: 95px;
  right: -9px;
  bottom: 16px;
  opacity: .85;
  pointer-events: none;
}
.inn-forest-masthead p { grid-column: 1 / -1; z-index: 1; padding: 6px; background: #fbfdfaeb; }
[data-inn-theme="forest"] .inn-book-index .inn-story-cover,
[data-inn-theme="forest"] .inn-profile-locket {
  background: #f8faf4;
  border: 4px double #3f5f48;
  padding: 4px;
  box-shadow: none;
}
[data-inn-theme="forest"] .inn-profile-locket { border-radius: 50%; }
[data-inn-theme="forest"] .inn-profile-locket img { border-radius: 50%; }
[data-inn-theme="forest"] .inn-profile-portrait { background: #fcfdfa url('../assets/inn/qinglan-blossom-v2.webp') right top / 43% auto no-repeat; }
[data-inn-theme="forest"] .inn-profile-notes h2 { background: #405c47; color: #fff; padding: 5px 9px; }
.screen.date-ballet[data-screen="date"][data-inn-theme="forest"] .date-play-head {
  border-bottom: 6px solid transparent;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="forest"] :is(.date-avatar, .date-play-frame)::after {
  background: none;
  border: 3px double #46624d;
}

.inn-scroll-display::before, .inn-scroll-display::after,
.inn-forest-masthead::before, .inn-forest-masthead::after,
.screen.date-ballet[data-screen="date"][data-inn-theme="forest"] .date-play-head::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 8px;
  background: var(--qinglan-trim) center / 70px 23px repeat-x;
  pointer-events: none;
}
.inn-scroll-display::before, .inn-forest-masthead::before { top: -8px; }
.inn-scroll-display::after, .inn-forest-masthead::after,
.screen.date-ballet[data-screen="date"][data-inn-theme="forest"] .date-play-head::after { bottom: -7px; }
.inn-welcome[data-inn-theme="forest"] .inn-book-index {
  background: #fcfdfaee;
  padding: 4px 8px 10px;
  border-inline: 1px solid var(--inn-rule);
}
.inn-welcome[data-inn-theme="forest"] .inn-scroll-display > :is(h1, p) {
  width: fit-content;
  margin-inline: auto;
  background: #fcfdf8e8;
  padding-inline: 10px;
}

/* Warm handscroll variant, using the original mountain and magnolia artwork. */
.inn-theme-dot.mist { background: #e8d4ab; border-color: #9e8e6a; }
.inn-mist-masthead {
  text-align: center;
  padding: 12px 0 9px;
  background: #faf3dfb5 url('../assets/inn/qinglan-scroll.webp') center bottom / cover;
  border-block: 1px solid var(--inn-rule);
}
.inn-mist-masthead img { width: 130px; height: 42px; object-fit: contain; }
.inn-mist-masthead h1 { margin: 2px 0; font: 500 26px "KaiTi", "Songti SC", serif; letter-spacing: .18em; }
.inn-mist-masthead p { margin: 6px 0; color: var(--inn-text); font-size: 12px; }
.date-ballet[data-inn-theme="mist"] { --inn-paper: #f4e8cc; --inn-panel: #fffaf0f5; }

/* 蓝页手记 — denim, torn stationery and clipped guest notes. */
.date-ballet[data-inn-theme="blue"] {
  --inn-paper: #d4e6f3;
  --inn-paper-image: url('../assets/inn/blue-denim.webp');
  --inn-text: #21384b;
  --inn-muted: #3f596e;
  --inn-rule: #7896ac;
  --inn-panel: #f6fbff;
  --inn-accent: #30556f;
  --blue-sheet: url('../assets/inn/blue-paper.webp');
  --blue-ticket: url('../assets/inn/blue-ticket.webp');
}
.inn-theme-dot.blue { background: #99bfd9; border-color: #56778f; }
.screen.date-ballet.inn-welcome[data-inn-theme="blue"]:has(.is-cover) {
  background: var(--inn-paper) var(--inn-paper-image) center / cover;
  color: var(--inn-text);
}
.inn-welcome[data-inn-theme="blue"]:has(.is-cover) :is(.nav-header, .icon-btn) { color: var(--inn-text); }
[data-inn-theme="blue"] .inn-book-front {
  background: #547e9d var(--inn-paper-image) 1% 1% / 160%;
  border: 1px solid #61829a;
  border-left: 8px solid #466d89;
  border-radius: 3px 7px 7px 3px;
  box-shadow: 5px 5px #f4f8fa, 8px 8px #9cbbc9, 15px 18px 28px #23445c55;
  color: var(--inn-text);
}
.inn-blue-front-paper {
  inset: 13% 5% 9%;
  display: grid;
  align-content: center;
  gap: 12px;
  background: var(--blue-sheet) center / 100% 100% no-repeat;
  rotate: 4deg;
}
.inn-blue-front-paper strong, .inn-blue-masthead h1 {
  font: 600 clamp(21px, 7cqw, 28px)/1.2 "Songti SC", "SimSun", serif;
  letter-spacing: .1em;
}
.inn-blue-front-paper small, .inn-blue-masthead small {
  font: 700 10px/1.2 "Courier New", monospace;
  letter-spacing: .14em;
}
.inn-blue-front-paper i { font: italic 16px Georgia, serif; }
.inn-blue-tape, .inn-blue-drops { position: absolute; pointer-events: none; object-fit: contain; }
.inn-blue-tape { width: 36%; height: 42px; left: 2%; top: -9px; rotate: -12deg; }
.inn-blue-drops { width: 20%; height: 54px; right: 4%; bottom: 5%; }
.inn-blue-masthead {
  position: relative;
  margin-block: 6px 10px;
  padding: 32px 15px 27px;
  text-align: center;
  color: var(--inn-text);
  background: var(--blue-ticket) center / 100% 100% no-repeat;
}
.inn-blue-masthead h1 { margin: 4px 0 6px; }
.inn-blue-masthead p { margin: 0; font-size: 12px; line-height: 1.6; }
.inn-blue-masthead .inn-blue-drops { right: 0; bottom: 0; width: 15%; height: 35px; }
[data-inn-theme="blue"] .inn-book-index .inn-story-cover,
[data-inn-theme="blue"] .inn-profile-locket {
  border: 0;
  border-radius: 0;
  background: var(--blue-sheet) center / 100% 100% no-repeat;
  padding: 8% 8% 12%;
  box-shadow: none;
  filter: drop-shadow(1px 3px 2px #27496250);
}
[data-inn-theme="blue"] .inn-profile-locket { padding: 10px 10px 15px; }
[data-inn-theme="blue"] :is(.inn-story-cover, .inn-profile-locket) img { border-radius: 0; }
[data-inn-theme="blue"] .inn-profile-leaf {
  background: var(--blue-sheet) center / 100% 100% no-repeat;
  padding: 22px 24px;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(2px 4px 2px #294b6340);
}
[data-inn-theme="blue"] .inn-profile-binding { justify-content: end; padding-right: 12%; }
[data-inn-theme="blue"] .inn-profile-binding img { width: 58px; height: 59px; object-fit: contain; rotate: 18deg; }
[data-inn-theme="blue"] .inn-profile-notes h2 { color: var(--inn-accent); border-bottom-style: dashed; }

.screen.date-ballet[data-screen="date"][data-inn-theme="blue"] :is(.date-play-head, .date-stage-bar, .date-form, .date-inn-float, .date-inn-pane, #date-chapter-pop, .date-fold-head, .date-entry, .greet-switch-pill) {
  background: #eaf4fb;
  color: var(--inn-text);
  border-color: var(--inn-rule);
  border-radius: 3px;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="blue"] :is(#date-back-home, .date-inn-nav button, #date-play-name, #date-play-sub, .date-fold-title, .date-entry-name, .date-inn-preset-bar button, .greet-switch-pill button) {
  color: var(--inn-text);
}
.screen.date-ballet[data-screen="date"][data-inn-theme="blue"] :is(.date-fold-meta, .date-fold-caret, .date-fold-hint, .date-inn-note) { color: var(--inn-muted); }
.screen.date-ballet[data-screen="date"][data-inn-theme="blue"] .date-inn-nav button:is(.on, [aria-expanded="true"]) {
  background: #ccdfed;
  border-bottom-color: var(--inn-accent);
}
.screen.date-ballet[data-screen="date"][data-inn-theme="blue"] .date-mes:not(.date-mes-html) .date-block {
  background: repeating-linear-gradient(90deg, #fdfefe 0 3px, #f6faff 3px 4px);
  border: 1px solid var(--inn-rule);
  border-left: 4px solid #9fbcd1;
  border-radius: 2px;
  box-shadow: 2px 4px 0 #82a3ba60;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="blue"] .date-mes[data-user="true"]:not(.date-mes-html) .date-block { background: #eaf3f9; }
.screen.date-ballet[data-screen="date"][data-inn-theme="blue"] .date-mes :is(.date-text, .date-name, .date-time) { color: var(--inn-text); }
.screen.date-ballet[data-screen="date"][data-inn-theme="blue"] .date-text :is(.date-quote, em) { color: var(--inn-muted); }
.screen.date-ballet[data-screen="date"][data-inn-theme="blue"] .date-mes .date-avatar {
  width: 72px;
  aspect-ratio: 4 / 5;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="blue"] :is(.date-avatar, .date-play-frame)::after {
  background: none;
  border: 3px solid #f6fbff;
  border-bottom-width: 6px;
  border-radius: 0;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="blue"] :is(.date-avatar, .date-play-frame) img {
  inset: 6%;
  width: 88%;
  height: 88%;
  border-radius: 0;
  clip-path: none;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="blue"] :is(.date-field, .date-field textarea) {
  background: #fdfefe;
  color: var(--inn-text);
  border-color: var(--inn-rule);
}
.screen.date-ballet[data-screen="date"][data-inn-theme="blue"] .date-field:has(textarea:placeholder-shown)::before,
.screen.date-ballet[data-screen="date"][data-inn-theme="blue"] .date-field::after { display: none; }
.screen.date-ballet[data-screen="date"][data-inn-theme="blue"] .date-form-ico {
  background-image: none;
  color: var(--inn-accent);
  font: 19px Georgia, serif;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="blue"] .date-form-menu::before { content: "☰"; }
.screen.date-ballet[data-screen="date"][data-inn-theme="blue"] .date-form-send:not(.stop)::before { content: "↑"; }
.screen.date-ballet[data-screen="date"][data-inn-theme="blue"] .date-form-send.stop::before { background: var(--inn-accent); }

/* Sword release, shared by the cover, roster and story reader. */
.date-ballet[data-inn-theme="wisteria"] {
  --inn-paper: #100d0c;
  --inn-text: #f2e6d3;
  --inn-muted: #d3baa3;
  --inn-rule: #8e664d;
  --inn-panel: #211717;
  --inn-accent: #efc48d;
  --inn-paper-image: linear-gradient(#1b101066, #100d0cce), url('https://drive-cdn.mujian.me/19/%E6%97%A0%E5%90%8D%E4%B9%8B%E5%88%83/78984094-facf-4366-a9c4-cea1b8207af4_AI_1776069186015.png');
  --blade-frame: url('../assets/inn/blade/frame.webp');
  --blade-ring: url('../assets/inn/blade/guard.webp');
}

.inn-theme-dot.wisteria { background: #381719; border-color: #ba8f62; }

.screen.date-ballet[data-inn-theme="wisteria"]:not([data-screen="date-preset"]) {
  background-color: var(--inn-paper);
  background-image: var(--inn-paper-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--inn-text);
}

.screen.date-ballet.inn-welcome[data-inn-theme="wisteria"]:has(.is-cover) {
  background-color: var(--inn-paper);
  background-image: radial-gradient(ellipse at 50% 56%, #35101430, #080708d9), var(--inn-paper-image);
  color: var(--inn-text);
}

.inn-welcome[data-inn-theme="wisteria"]:has(.inn-welcome-scroll) :is(.nav-header, .icon-btn) { color: var(--inn-text); }

.inn-blade-display {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 17px;
  width: min(100%, 440px);
  padding: 24px 10px;
  overflow: hidden;
  text-align: center;
}

.inn-blade-logo { width: 82px; height: 70px; object-fit: contain; }
.inn-blade-display h1,
.inn-wisteria-masthead h1 {
  margin: 0;
  color: var(--inn-text);
  font: 500 clamp(20px, 5.8vw, 30px)/1.5 "Songti SC", SimSun, serif;
  letter-spacing: .09em;
}

.inn-blade-sword { display: grid; width: 100%; }
.inn-blade-sword img { display: block; grid-area: 1 / 1; width: 100%; }
.inn-blade-sheath { clip-path: inset(0 52.4% 0 0); }
.inn-blade-steel { clip-path: inset(0 0 0 47.6%); }

.inn-blade-open {
  min-width: 176px;
  min-height: 52px;
  padding: 10px 15px 10px 23px;
  border: 1px solid #bd5160;
  border-radius: 2px;
  background: #1e0d10;
  color: #ffbbc0;
  box-shadow: 0 0 20px #a82d4748, inset 0 0 10px #a82d4733;
  font: 600 20px "Songti SC", SimSun, serif;
  letter-spacing: .4em;
}

.inn-blade-open:is(:hover, :focus-visible) { background: #3a1520; }
.inn-blade-display.is-drawing::after {
  content: "";
  position: absolute;
  top: 54%;
  left: -10%;
  width: 120%;
  height: 2px;
  background: #ffe6c7;
  box-shadow: 0 0 16px 3px #e85764;
  transform: rotate(-11deg) scaleX(0);
  animation: inn-blade-flash 510ms ease-out;
  pointer-events: none;
}
@keyframes inn-blade-flash {
  45% { transform: rotate(-11deg) scaleX(0); opacity: 0; }
  72% { transform: rotate(-11deg) scaleX(1); opacity: 1; }
  100% { transform: rotate(-11deg) scaleX(1); opacity: 0; }
}

.inn-wisteria-masthead { margin: 12px 0 0; padding: 9px 0; text-align: center; }
.inn-wisteria-masthead h1 { font-size: clamp(18px, 5vw, 25px); }

.inn-wisteria-feature {
  display: block;
  width: 100%;
  max-height: 135px;
  margin: 4px auto 14px;
  object-fit: contain;
}

[data-inn-theme="wisteria"] :is(.inn-book-index .inn-story-cover, .inn-profile-locket) {
  position: relative;
  padding: 6%;
  background: #130f0f;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 4px 10px #08050488;
}

[data-inn-theme="wisteria"] :is(.inn-story-cover, .inn-profile-locket)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blade-frame) center / 100% 100% no-repeat;
  pointer-events: none;
}

[data-inn-theme="wisteria"] .inn-profile-locket img { border-radius: 2px; }
[data-inn-theme="wisteria"] .inn-profile-binding { height: 8px; }
[data-inn-theme="wisteria"] :is(.inn-bookmarks, .inn-theme-picker) button[aria-pressed="true"] {
  background: #59262b;
  color: var(--inn-text);
}

.screen.date-ballet[data-screen="date"][data-inn-theme="wisteria"] :is(.date-play-head, .date-stage-bar, .date-form, .date-inn-float, .date-inn-pane, #date-chapter-pop, .date-fold-head, .date-entry, .greet-switch-pill, .date-field, .date-field textarea) {
  background: var(--inn-panel);
  color: var(--inn-text);
  border-color: var(--inn-rule);
}

.screen.date-ballet[data-screen="date"][data-inn-theme="wisteria"] :is(#date-back-home, .date-inn-nav button, #date-play-name, #date-play-sub, .date-fold-title, .date-entry-name, .date-inn-preset-bar button, .greet-switch-pill button, .date-mes .date-name, .date-mes .date-time) {
  color: var(--inn-text);
}

.screen.date-ballet[data-screen="date"][data-inn-theme="wisteria"] .date-inn-nav button:is(.on, [aria-expanded="true"]) { background: #59262b; }
.screen.date-ballet[data-screen="date"][data-inn-theme="wisteria"] .date-mes:not(.date-mes-html) .date-block {
  background: #241b19;
  color: var(--inn-text);
  border: 1px solid var(--inn-rule);
  border-left: 3px solid #a54d4d;
  border-radius: 4px;
  box-shadow: 0 5px 14px #08050455;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="wisteria"] .date-mes[data-user="true"]:not(.date-mes-html) .date-block { background: #392125; }
.screen.date-ballet[data-screen="date"][data-inn-theme="wisteria"] .date-mes:not(.date-mes-html) .date-text { color: var(--inn-text); }
.screen.date-ballet[data-screen="date"][data-inn-theme="wisteria"] :is(.date-text :is(.date-quote, em), .date-fold-meta, .date-fold-caret, .date-fold-hint, .date-inn-note, .date-field textarea::placeholder) { color: var(--inn-muted); }
.screen.date-ballet[data-screen="date"][data-inn-theme="wisteria"] :is(.date-avatar, .date-play-frame) { aspect-ratio: 1; }
.screen.date-ballet[data-screen="date"][data-inn-theme="wisteria"] :is(.date-avatar, .date-play-frame)::after { background-image: var(--blade-ring); }
.screen.date-ballet[data-screen="date"][data-inn-theme="wisteria"] :is(.date-avatar, .date-play-frame) img {
  inset: 13%;
  width: 74%;
  height: 74%;
  border-radius: 50%;
  clip-path: none;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="wisteria"] .date-field:has(textarea:placeholder-shown)::before,
.screen.date-ballet[data-screen="date"][data-inn-theme="wisteria"] .date-field::after { display: none; }
.screen.date-ballet[data-screen="date"][data-inn-theme="wisteria"] .date-form-ico {
  background-image: none;
  color: var(--inn-accent);
  font: 20px Georgia, serif;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="wisteria"] .date-form-menu::before { content: "☰"; }
.screen.date-ballet[data-screen="date"][data-inn-theme="wisteria"] .date-form-send:not(.stop)::before { content: "↑"; }
.screen.date-ballet[data-screen="date"][data-inn-theme="wisteria"] .date-form-send.stop::before { background: var(--inn-accent); }

/* Hogwarts private post and night archive. */
.date-ballet[data-inn-theme="hogwarts"] {
  --inn-paper: #101b16;
  --inn-text: #f2e7cb;
  --inn-muted: #ccbea0;
  --inn-rule: #89754f;
  --inn-panel: #1a2920;
  --inn-accent: #efd292;
  --hogwarts-frame: url('../assets/inn/hogwarts/frame.webp');
  --hogwarts-ring: url('../assets/inn/hogwarts/ring.webp');
}

.inn-theme-dot.hogwarts { background: #213e30; border-color: #ac8c52; }

.screen.date-ballet[data-inn-theme="hogwarts"]:not([data-screen="date-preset"]),
.screen.date-ballet.inn-welcome[data-inn-theme="hogwarts"]:has(.is-cover) {
  background-color: var(--inn-paper);
  background-image: linear-gradient(#0c181321, #0c1813ab), url('../assets/inn/hogwarts/castle.webp');
  background-position: center, center top;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--inn-text);
}

.inn-welcome[data-inn-theme="hogwarts"]:has(.inn-welcome-scroll) :is(.nav-header, .icon-btn) { color: var(--inn-text); }

.inn-hogwarts-display {
  display: grid;
  justify-items: center;
  align-self: end;
  width: min(100%, 400px);
  padding: 20px 14px clamp(26px, 8vh, 90px);
  text-align: center;
}

.inn-hogwarts-display small { color: var(--inn-accent); font-size: 10px; letter-spacing: .28em; }
.inn-hogwarts-display h1,
.inn-hogwarts-masthead h1 {
  margin: 8px 0 0;
  color: var(--inn-text);
  font: 500 clamp(23px, 6vw, 32px)/1.45 Georgia, 'Songti SC', SimSun, serif;
  letter-spacing: .12em;
}

.inn-hogwarts-open {
  display: grid;
  justify-items: center;
  width: min(100%, 310px);
  padding: 12px 0 0;
  border: 0;
  background: transparent;
  color: var(--inn-text);
}

.inn-hogwarts-open img { width: 100%; height: 160px; object-fit: contain; filter: drop-shadow(0 12px 16px #050d09aa); }
.inn-hogwarts-open span {
  min-width: 148px;
  padding: 12px 16px;
  border: 1px solid var(--inn-rule);
  border-radius: 2px;
  background: #1b3025;
  color: var(--inn-accent);
  letter-spacing: .16em;
}
.inn-hogwarts-open:is(:hover, :focus-visible) span { background: #2d4937; }

.inn-hogwarts-masthead {
  display: grid;
  justify-items: center;
  margin: 12px auto 16px;
  padding: 16px 8px;
  background: #132219c7;
  border-block: 1px solid #89754f80;
  text-align: center;
}
.inn-hogwarts-masthead img { width: 42px; height: 42px; object-fit: contain; }
.inn-hogwarts-masthead h1 { font-size: 24px; }
.inn-hogwarts-masthead p { margin: 7px 0 0; color: var(--inn-muted); font-size: 12px; }

[data-inn-theme="hogwarts"] :is(.inn-book-index .inn-story-cover, .inn-profile-locket) {
  position: relative;
  padding: 6%;
  background: #101d17;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 4px 10px #070e0aa0;
}

[data-inn-theme="hogwarts"] :is(.inn-story-cover, .inn-profile-locket)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hogwarts-frame) center / 100% 100% no-repeat;
  pointer-events: none;
}

[data-inn-theme="hogwarts"] .inn-profile-locket img { border-radius: 2px; }
[data-inn-theme="hogwarts"] .inn-profile-binding img { width: 74px; height: 33px; object-fit: contain; }
[data-inn-theme="hogwarts"] :is(.inn-bookmarks, .inn-theme-picker) button[aria-pressed="true"] { background: #284236; color: var(--inn-accent); }

.screen.date-ballet[data-screen="date"][data-inn-theme="hogwarts"] :is(.date-play-head, .date-stage-bar, .date-form, .date-inn-float, .date-inn-pane, #date-chapter-pop, .date-fold-head, .date-entry, .greet-switch-pill, .date-field, .date-field textarea) {
  background: var(--inn-panel);
  color: var(--inn-text);
  border-color: var(--inn-rule);
}

.screen.date-ballet[data-screen="date"][data-inn-theme="hogwarts"] :is(#date-back-home, .date-inn-nav button, #date-play-name, #date-play-sub, .date-fold-title, .date-entry-name, .date-inn-preset-bar button, .greet-switch-pill button, .date-mes .date-name, .date-mes .date-time) { color: var(--inn-text); }
.screen.date-ballet[data-screen="date"][data-inn-theme="hogwarts"] .date-inn-nav button:is(.on, [aria-expanded="true"]) { background: #284236; }
.screen.date-ballet[data-screen="date"][data-inn-theme="hogwarts"] .date-mes:not(.date-mes-html) .date-block {
  background: #1b2921;
  color: var(--inn-text);
  border: 1px solid var(--inn-rule);
  border-radius: 3px;
  box-shadow: 0 4px 12px #09130d88;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="hogwarts"] .date-mes[data-user="true"]:not(.date-mes-html) .date-block { background: #26392d; }
.screen.date-ballet[data-screen="date"][data-inn-theme="hogwarts"] .date-mes:not(.date-mes-html) .date-text { color: var(--inn-text); }
.screen.date-ballet[data-screen="date"][data-inn-theme="hogwarts"] :is(.date-text :is(.date-quote, em), .date-fold-meta, .date-fold-caret, .date-fold-hint, .date-inn-note, .date-field textarea::placeholder) { color: var(--inn-muted); }
.screen.date-ballet[data-screen="date"][data-inn-theme="hogwarts"] :is(.date-avatar, .date-play-frame) { aspect-ratio: 1; }
.screen.date-ballet[data-screen="date"][data-inn-theme="hogwarts"] :is(.date-avatar, .date-play-frame)::after { background-image: var(--hogwarts-ring); }
.screen.date-ballet[data-screen="date"][data-inn-theme="hogwarts"] :is(.date-avatar, .date-play-frame) img {
  inset: 13%;
  width: 74%;
  height: 74%;
  border-radius: 50%;
  clip-path: none;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="hogwarts"] .date-field:has(textarea:placeholder-shown)::before,
.screen.date-ballet[data-screen="date"][data-inn-theme="hogwarts"] .date-field::after { display: none; }
.screen.date-ballet[data-screen="date"][data-inn-theme="hogwarts"] .date-form-ico {
  background-image: none;
  color: var(--inn-accent);
  font: 20px Georgia, serif;
}
.screen.date-ballet[data-screen="date"][data-inn-theme="hogwarts"] .date-form-menu::before { content: "☰"; }
.screen.date-ballet[data-screen="date"][data-inn-theme="hogwarts"] .date-form-send:not(.stop)::before { content: "↑"; }
.screen.date-ballet[data-screen="date"][data-inn-theme="hogwarts"] .date-form-send.stop::before { background: var(--inn-accent); }

.screen[data-screen="alipay"] .alipay-tabs { flex-wrap: wrap; }
.alipay-redeem-form {
  display: grid;
  gap: 9px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--ink-soft) 20%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, #fff 70%, var(--accent));
}
.alipay-redeem-form h3, .alipay-redeem-form p { margin: 0; }
.alipay-redeem-form p { color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.alipay-redeem-form label { margin-top: 4px; font-size: 13px; font-weight: 650; }
.alipay-redeem-form :is(input, select, button) {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  padding: 8px 11px;
  border-radius: 11px;
  font: inherit;
}
.alipay-redeem-form :is(input, select) {
  border: 1px solid color-mix(in srgb, var(--ink-soft) 36%, transparent);
  background: #fffaf8;
  color: #553c42;
}
.alipay-redeem-form button {
  margin-top: 4px;
  border: 0;
  background: var(--strong);
  color: #fff;
  font-weight: 700;
}
.alipay-redeem-form button:disabled { opacity: .65; }
#alipay-redeem-status:empty { display: none; }
#alipay-redeem-status[data-error="true"] { color: #8a3041; }