:root {
  --page: #f6f7f9;
  --surface: #ffffff;
  --surface-soft: #eff1f4;
  --ink: #15171a;
  --ink-soft: #3d424a;
  --muted: #777d86;
  --line: #dfe3e8;
  --accent: #c84f7a;
  --accent-strong: #a93460;
  --accent-soft: #fae8ef;
  --accent-faint: rgba(200, 79, 122, 0.12);
  --female: #c84f7a;
  --female-soft: #fae8ef;
  --male: #347dcc;
  --male-soft: #e6f1fc;
  --success: #26735b;
  --danger: #b54a51;
  --shadow: 0 18px 55px rgba(30, 39, 53, 0.1);
  --shadow-soft: 0 10px 30px rgba(30, 39, 53, 0.07);
  --card-float-color: var(--accent);
  --card-rest-shadow: 0 9px 24px rgba(34,43,56,.09), 0 2px 7px color-mix(in srgb, var(--card-float-color) 8%, transparent);
  --card-float-shadow: 0 19px 42px rgba(34,43,56,.15), 0 7px 18px color-mix(in srgb, var(--card-float-color) 14%, transparent);
  --card-float-transform: translateY(-4px) scale(1.025);
  --card-float-transition: background-color 220ms ease, border-color 220ms ease, box-shadow 240ms ease, transform 240ms cubic-bezier(.2,.72,.2,1);
  font-family: "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; letter-spacing: 0; }
html { min-width: 320px; scrollbar-gutter: stable; scroll-behavior: smooth; }
html.dialog-lock-scrollbar { overflow-y: scroll; }
body { margin: 0; color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; }
body.dialog-lock, body:has(dialog[open]) { overflow: hidden; }
body.chat-route { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--accent-faint); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: 0.48; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 58px;
  border-bottom: 1px solid rgba(210, 215, 222, 0.7);
  background: rgba(250, 251, 252, 0.82);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.header-inner {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  align-items: center;
  width: min(1320px, calc(100% - 48px));
  height: 100%;
  margin: auto;
}

.brand, .header-profile { display: inline-flex; align-items: center; width: max-content; color: var(--ink); background: transparent; }
.brand { gap: 9px; padding: 0; font-size: 14px; font-weight: 720; }
.brand img { width: 27px; height: 27px; border-radius: 7px; box-shadow: 0 4px 12px var(--accent-faint); }
.main-nav { justify-self: center; display: flex; align-items: center; height: 100%; gap: 2px; }
.main-nav button { position: relative; height: 100%; padding: 0 17px; color: #666c75; background: transparent; font-size: 13px; font-weight: 620; }
.main-nav button::after { position: absolute; right: 17px; bottom: 0; left: 17px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); content: ""; transform: scaleX(0); transition: transform 180ms ease; }
.main-nav button:hover, .main-nav button.active { color: var(--ink); }
.main-nav button.active::after { transform: scaleX(1); }
.nav-badge { position: absolute; top: 13px; right: 7px; min-width: 15px; height: 15px; padding: 0 4px; border: 2px solid #fff; border-radius: 8px; color: #fff; background: var(--accent); font-size: 9px; line-height: 11px; }
.header-profile { justify-self: end; gap: 10px; padding: 0; color: var(--muted); font-size: 12px; font-weight: 650; }
.guest-mode .header-profile { color: var(--accent-strong); }
.guest-mode .header-profile:hover .avatar { transform: translateY(-1px); box-shadow: 0 7px 18px var(--accent-faint); }
.header-profile .avatar { transition: transform 180ms ease, box-shadow 180ms ease; }
.guest-account-avatar { border: 1px solid color-mix(in srgb, var(--accent) 26%, #fff); color: var(--accent-strong); background: var(--accent-soft); }

.avatar { position: relative; display: inline-grid; overflow: hidden; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--accent); font-weight: 750; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-small { width: 30px; height: 30px; font-size: 11px; }
.avatar-medium { width: 54px; height: 54px; font-size: 16px; }
.avatar-large { width: 86px; height: 86px; font-size: 24px; }
.avatar.male { background: var(--male); }
.avatar.female { background: var(--female); }

main { min-height: calc(100vh - 58px); }
.page { display: none; min-height: calc(100vh - 58px); }
.page.active { display: block; }
.site-footer {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: var(--page);
  font-size: 12px;
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--accent-strong); }
.section-index[hidden] { display: none; }
.section-index {
  position: fixed;
  z-index: 35;
  top: 50%;
  right: 14px;
  display: grid;
  grid-template-rows: repeat(var(--section-count), minmax(38px, 1fr));
  width: 44px;
  height: min(52vh, 380px);
  transform: translateY(-50%);
  transition: opacity 180ms ease;
}
.section-index::before { position: absolute; top: 14px; bottom: 14px; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.9) 9%, rgba(159,171,185,.42) 50%, rgba(255,255,255,.9) 91%, transparent); content: ""; box-shadow: -1px 0 0 rgba(255,255,255,.88), 1px 0 2px rgba(82,96,113,.12); transform: translateX(-50%); }
.section-index button { position: relative; z-index: 1; display: grid; width: 44px; min-height: 38px; padding: 0; place-items: center; color: var(--muted); background: transparent; font-size: 10px; font-weight: 650; }
.section-index-dot { position: relative; display: block; width: 4px; height: 4px; border: 1px solid rgba(255,255,255,.94); border-radius: 50%; background: conic-gradient(from 35deg, #fff, rgba(218,225,233,.88) 28%, rgba(139,153,169,.68) 52%, rgba(255,255,255,.98) 74%, rgba(190,200,211,.82)); box-shadow: inset -1px -1px 1px rgba(67,80,96,.16), inset 1px 1px 1px rgba(255,255,255,.96), 0 1px 2px rgba(62,75,91,.14), 0 0 0 2px rgba(246,247,249,.66); transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.section-index button.active .section-index-dot { border-color: rgba(255,255,255,.98); background: conic-gradient(from 25deg, #fff, rgba(190,200,211,.9) 25%, rgba(92,106,123,.82) 50%, #fff 74%, rgba(170,181,194,.92)); box-shadow: inset -1px -1px 1px rgba(52,64,79,.22), inset 1px 1px 1px #fff, 0 0 4px rgba(83,97,114,.2), 0 0 0 2px rgba(213,220,228,.34), 0 0 0 4px rgba(246,247,249,.64); transform: scale(1.04); }
.section-index-label { position: absolute; top: 50%; right: 35px; visibility: hidden; padding: 6px 9px; border: 1px solid rgba(164,176,190,.28); border-radius: 6px; color: var(--ink-soft); background: transparent; box-shadow: inset 1px 1px 0 rgba(255,255,255,.94), inset -1px -1px 0 rgba(121,136,153,.12), 0 5px 16px rgba(36,46,59,.07); white-space: nowrap; opacity: 0; transform: translate(7px, -50%); text-shadow: 0 1px 0 rgba(255,255,255,.9); transition: visibility 160ms ease, opacity 160ms ease, transform 200ms ease; }
.section-index button:focus-visible .section-index-label { visibility: visible; opacity: 1; transform: translate(0, -50%); }
body:has(dialog[open]) .section-index { pointer-events: none; opacity: 0; }
.home-hero, .home-focus, .relationship-overview, .management-strip, .stats-section, .recent-section, .profile-intro, .profile-footprints, .settings-section { scroll-margin-top: 82px; }
@media (hover: hover) and (pointer: fine) {
  .section-index button:hover .section-index-dot { border-color: #fff; background: conic-gradient(from 25deg, #fff, rgba(202,211,221,.94) 26%, rgba(108,122,139,.78) 52%, #fff 76%, rgba(183,194,206,.9)); box-shadow: inset -1px -1px 1px rgba(52,64,79,.2), inset 1px 1px 1px #fff, 0 0 5px rgba(83,97,114,.18), 0 0 0 2px rgba(213,220,228,.3), 0 0 0 4px rgba(246,247,249,.62); transform: scale(1.1); }
  .section-index button:hover .section-index-label { visibility: visible; opacity: 1; transform: translate(0, -50%); }
}
.guest-landing[hidden] { display: none; }
.guest-mode .page { display: none !important; }
.marketing-hero { position: relative; overflow: hidden; min-height: 730px; border-bottom: 1px solid var(--line); background: #edf1f5; }
.marketing-hero, .marketing-feature, .marketing-profile { scroll-margin-top: 58px; }
.marketing-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.marketing-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247,249,251,.97) 0%, rgba(247,249,251,.84) 38%, rgba(247,249,251,.12) 70%); }
.marketing-hero-inner { position: relative; z-index: 1; display: flex; align-items: center; width: min(1180px, calc(100% - 64px)); min-height: 730px; margin: 0 auto; padding: 70px 0 132px; }
.marketing-hero-copy { max-width: 610px; }
.marketing-hero-copy h1 { margin-top: 17px; font-size: clamp(58px, 7vw, 96px); font-weight: 740; line-height: .98; }
.marketing-lead { max-width: 560px; margin-top: 28px; color: var(--ink-soft); font-size: 18px; line-height: 1.78; }
.marketing-actions { display: flex; align-items: center; gap: 10px; margin-top: 32px; }
.marketing-hero-copy > small { display: block; margin-top: 15px; color: var(--muted); font-size: 11px; }
.marketing-snapshot { position: absolute; right: 0; bottom: 36px; width: min(540px, 52%); padding: 18px 22px; border: 1px solid rgba(255,255,255,.78); border-radius: 8px; background: rgba(255,255,255,.76); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px); }
.guest-sample-badge { display: inline-block; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff); border-radius: 5px; color: var(--accent-strong); background: rgba(255,255,255,.72); font-size: 9px; font-weight: 760; }
.snapshot-people { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 14px; }
.snapshot-people > div { display: grid; grid-template-columns: 36px 1fr; align-items: center; column-gap: 10px; }
.snapshot-people > div:first-child .snapshot-avatar { grid-column: 1; grid-row: 1 / 3; }
.snapshot-people > div:first-child span, .snapshot-people > div:first-child strong { grid-column: 2; }
.snapshot-people > div:last-child { text-align: right; }
.snapshot-people > div:last-child .snapshot-avatar { grid-column: 2; grid-row: 1 / 3; }
.snapshot-people > div:last-child span, .snapshot-people > div:last-child strong { grid-column: 1; }
.snapshot-people span { color: var(--muted); font-size: 10px; }
.snapshot-people strong { font-size: 17px; white-space: nowrap; }
.snapshot-people > b { color: var(--muted); font-size: 10px; font-weight: 600; }
.snapshot-people > b span { color: var(--ink); font-size: inherit; }
.snapshot-avatar { display: inline-grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: #fff; font-size: 11px; font-style: normal; font-weight: 760; }
.snapshot-avatar.female { background: var(--female); }
.snapshot-avatar.male { background: var(--male); }
.marketing-section { padding: 132px 0; }
.marketing-section-heading { width: min(760px, calc(100% - 64px)); margin: 0 auto; text-align: center; }
.marketing-section-heading h2, .marketing-feature-copy h2, .marketing-cta h2 { margin-top: 15px; font-size: 46px; line-height: 1.16; }
.marketing-section-heading > p:last-child, .marketing-feature-copy > p { margin-top: 22px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.marketing-capabilities { display: grid; grid-template-columns: repeat(5, 1fr); width: min(1180px, calc(100% - 64px)); margin: 70px auto 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.marketing-capabilities article { min-height: 210px; padding: 28px 24px; border-right: 1px solid var(--line); }
.marketing-capabilities article:last-child { border-right: 0; }
.marketing-capabilities span { color: var(--accent); font-size: 10px; font-weight: 760; }
.marketing-capabilities strong { display: block; margin-top: 36px; font-size: 16px; }
.marketing-capabilities p { margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.marketing-feature { border-top: 1px solid var(--line); }
.marketing-feature-inner, .marketing-commerce, .marketing-bag { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: min(1180px, calc(100% - 64px)); min-height: 700px; margin: 0 auto; gap: 9%; }
.marketing-feature-copy { max-width: 500px; }
.marketing-feature-copy ul { display: grid; gap: 12px; margin: 30px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); list-style: none; }
.marketing-feature-copy li { color: var(--ink-soft); font-size: 12px; }
.marketing-feature-copy li::before { display: inline-block; width: 18px; color: var(--accent); content: "•"; }
.marketing-chat { background: #f1f3f6; }
.marketing-chat-demo { width: min(100%, 470px); padding: 26px; border: 1px solid rgba(210,215,222,.8); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.demo-chat-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.demo-chat-heading > div { display: flex; }
.demo-chat-heading .snapshot-avatar + .snapshot-avatar { margin-left: -8px; border: 2px solid #fff; }
.demo-message { width: max-content; max-width: 78%; margin-top: 20px; padding: 12px 14px; border-radius: 8px; color: var(--ink-soft); background: var(--surface-soft); font-size: 12px; line-height: 1.55; }
.demo-message.mine { margin-left: auto; color: #fff; background: var(--accent-strong); }
.demo-request { margin-top: 20px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; }
.demo-request span { color: var(--accent-strong); font-size: 9px; font-weight: 760; }
.demo-request strong { display: block; margin-top: 8px; font-size: 14px; }
.demo-request p { margin-top: 7px; color: var(--muted); font-size: 10px; }
.marketing-commerce { width: min(1180px, calc(100% - 64px)); }
.marketing-feature-media { overflow: hidden; aspect-ratio: 1 / .86; border-radius: 8px; background: #eef1f5; }
.marketing-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.marketing-product-example { display: grid; grid-template-columns: 1fr auto; margin-top: 34px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.marketing-product-example span, .marketing-product-example small { color: var(--muted); font-size: 10px; }
.marketing-product-example strong { margin-top: 6px; font-size: 14px; }
.marketing-product-example b { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--accent-strong); font-size: 22px; }
.marketing-product-example small { grid-column: 1 / -1; margin-top: 10px; }
.marketing-bag { direction: ltr; }
.marketing-bag-list { margin-top: 34px; border-top: 1px solid var(--line); }
.marketing-bag-list span { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; min-height: 64px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 11px; }
.marketing-bag-list b { color: var(--accent-strong); font-size: 10px; }
.marketing-bag-list strong { font-size: 12px; }
.marketing-profile { padding: 132px 0; color: #f8fafc; background: #171b21; }
.marketing-profile .eyebrow { color: #e77ea4; }
.marketing-profile .marketing-section-heading > p:last-child { color: #aeb6c1; }
.marketing-profile-inner { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.marketing-profile .marketing-section-heading { width: min(760px, 100%); }
.marketing-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 72px; border-top: 1px solid #363d47; border-bottom: 1px solid #363d47; }
.marketing-stats div { padding: 28px; border-right: 1px solid #363d47; }
.marketing-stats div:last-child { border-right: 0; }
.marketing-stats span { display: block; color: #929ba7; font-size: 10px; }
.marketing-stats strong { display: block; margin-top: 12px; font-size: 25px; }
.marketing-cta { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; width: min(1180px, calc(100% - 64px)); min-height: 290px; margin: 0 auto; gap: 28px; }
.marketing-cta > img { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 14px 30px var(--accent-faint); }
.marketing-cta h2 { font-size: 34px; }
.marketing-cta .marketing-actions { margin-top: 0; }
.content-wrap { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.narrow-wrap { width: min(940px, calc(100% - 64px)); margin: 0 auto; }
.profile-wrap { width: min(1020px, calc(100% - 64px)); margin: 0 auto; padding: 92px 0 110px; }

.hero-band { position: relative; overflow: hidden; width: 100%; min-height: 620px; border-bottom: 1px solid var(--line); background: #eef1f5; }
.hero-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-band::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247, 249, 251, 0.94) 0%, rgba(247, 249, 251, 0.73) 32%, rgba(247, 249, 251, 0.04) 62%); content: ""; pointer-events: none; }
.hero-copy { position: relative; z-index: 2; width: min(1180px, calc(100% - 64px)); margin: auto; padding-top: 132px; }
.hero-copy h1 { max-width: 650px; margin-top: 16px; font-size: clamp(48px, 5.2vw, 76px); font-weight: 720; line-height: 1.08; }
.home-hero .hero-copy h1 { max-width: 700px; font-size: clamp(46px, 4.6vw, 66px); line-height: 1.1; }
.home-hero .hero-copy h1 span { display: block; white-space: nowrap; }
.hero-copy > p:not(.eyebrow) { max-width: 470px; margin-top: 23px; color: var(--ink-soft); font-size: 18px; line-height: 1.72; }
.eyebrow { color: var(--accent-strong); font-size: 12px; font-weight: 760; text-transform: uppercase; }
.hero-actions { display: flex; align-items: center; gap: 10px; margin-top: 34px; }
.hero-status, .balance-pill { position: absolute; z-index: 3; right: max(44px, calc((100vw - 1180px) / 2)); bottom: 42px; display: flex; align-items: baseline; gap: 10px; padding: 16px 20px; border: 1px solid rgba(255,255,255,.72); border-radius: 8px; background: rgba(255,255,255,.72); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px); }
.hero-status span, .balance-pill span { color: var(--muted); font-size: 12px; }
.hero-status strong, .balance-pill strong { font-size: 25px; }

.button { display: inline-grid; min-width: 88px; height: 42px; padding: 0 18px; place-items: center; border-radius: 7px; font-size: 14px; font-weight: 680; white-space: nowrap; transition: transform 150ms ease, box-shadow 180ms ease, background 180ms ease; }
.button:hover { transform: translateY(-1px); }
.button:active { box-shadow: none; transform: scale(.98); }
.button-primary { color: #fff; background: var(--accent-strong); box-shadow: 0 9px 22px var(--accent-faint); }
.button-secondary { color: var(--ink); border: 1px solid var(--line); background: var(--surface); }
.button-danger { color: #fff; background: var(--danger); }
.button-plain {
  position: relative;
  display: inline-flex;
  min-width: 0;
  height: 42px;
  padding: 0 3px;
  align-items: center;
  gap: 7px;
  color: var(--accent-strong);
  background: transparent;
  box-shadow: none;
}
.button-plain::after {
  position: absolute;
  right: 3px;
  bottom: 5px;
  left: 3px;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0;
  transform: scaleX(.35);
  transform-origin: left;
  transition: opacity 180ms ease, transform 220ms ease;
}
.button-plain span {
  display: inline-grid;
  width: 16px;
  height: 16px;
  margin: 0;
  place-items: center;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  transition: transform 180ms ease;
}
.button-plain:hover { box-shadow: none; transform: none; }
.button-plain:hover::after { opacity: .24; transform: scaleX(1); }
.button-plain:hover span { transform: translateX(3px); }
.button-plain:active { transform: scale(.98); }
.button-wide { width: 100%; }

.home-content { padding: 0 0 112px; }
.home-focus[hidden] { display: none; }
.home-focus { padding-top: 54px; }
.home-focus-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 23px; }
.home-focus-heading h2 { margin-top: 8px; font-size: 32px; line-height: 1.2; }
.home-focus-heading-side { display: flex; align-items: center; gap: 18px; }
.home-focus-heading-side > p { color: var(--muted); font-size: 10px; }
.home-focus-controls { display: flex; gap: 7px; }
.home-focus-controls[hidden] { display: none; }
.home-focus-controls button { display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 1px solid rgba(172,181,192,.48); border-radius: 50%; color: var(--ink-soft); background: rgba(255,255,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); font-size: 20px; line-height: 1; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.home-focus-controls button:hover { border-color: rgba(105,117,132,.52); box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(39,48,60,.08); transform: translateY(-1px); }
.home-focus-controls button:disabled { cursor: default; opacity: .32; transform: none; }
.home-focus-rail { display: flex; gap: 12px; overflow-x: auto; margin: -24px -36px -40px; padding: 32px 36px 56px; scroll-behavior: smooth; scroll-padding-inline: 36px; scroll-snap-type: x proximity; scrollbar-width: none; }
.home-focus-rail::-webkit-scrollbar { display: none; }
.home-focus-card { --focus-color: var(--female); --status-color: var(--focus-color); --card-float-color: var(--focus-color); position: relative; display: grid; flex: 0 0 212px; min-height: 136px; padding: 14px 15px; overflow: hidden; grid-template-columns: minmax(0, 1fr) 48px; grid-template-rows: auto 1fr auto; gap: 7px 10px; border: 0; border-radius: 8px; color: var(--ink); background: color-mix(in srgb, var(--focus-color) 6%, rgba(255,255,255,.82)); box-shadow: var(--card-rest-shadow); text-align: left; scroll-snap-align: start; transform-origin: center; transition: var(--card-float-transition); }
.home-focus-card.male { --focus-color: var(--male); }
.home-focus-card.action { background: color-mix(in srgb, var(--focus-color) 9%, rgba(255,255,255,.68)); }
.home-focus-card.waiting { --status-color: #7d8794; }
.home-focus-card-top { display: contents; }
.home-focus-symbol { position: relative; display: grid; width: 48px; height: 48px; grid-column: 2; grid-row: 2 / 4; align-self: end; place-items: center; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--focus-color) 9%, rgba(255,255,255,.34)); transition: background-color 180ms ease; }
.home-focus-symbol i, .home-focus-symbol i::before, .home-focus-symbol i::after { position: absolute; display: block; box-sizing: border-box; content: ""; }
.home-focus-symbol i { position: relative; color: color-mix(in srgb, var(--focus-color) 72%, var(--ink-soft)); }
.home-focus-symbol.icon-gift i { width: 18px; height: 13px; margin-top: 4px; border: 1px solid currentColor; border-radius: 2px; }
.home-focus-symbol.icon-gift i::before { top: -5px; left: -1px; width: 18px; height: 5px; border: 1px solid currentColor; border-radius: 2px 2px 0 0; }
.home-focus-symbol.icon-gift i::after { top: -5px; left: 7px; width: 1px; height: 17px; background: currentColor; }
.home-focus-symbol.icon-challenge i { width: 2px; height: 19px; margin-left: -10px; border-radius: 2px; background: currentColor; }
.home-focus-symbol.icon-challenge i::before { top: 1px; left: 2px; width: 13px; height: 9px; border: 1px solid currentColor; border-left: 0; border-radius: 0 2px 2px 0; }
.home-focus-symbol.icon-goal i, .home-focus-symbol.icon-goal i::after { width: 12px; height: 12px; border: 1px solid currentColor; border-radius: 50%; }
.home-focus-symbol.icon-goal i { margin-left: -6px; }
.home-focus-symbol.icon-goal i::after { top: -1px; left: 8px; }
.home-focus-symbol.icon-draw i { width: 3px; height: 19px; border-radius: 50%; background: currentColor; }
.home-focus-symbol.icon-draw i::before { top: 8px; left: -8px; width: 19px; height: 3px; border-radius: 50%; background: currentColor; }
.home-focus-symbol.icon-draw i::after { top: 3px; left: 5px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: -10px 10px 0 currentColor; }
.home-focus-symbol.icon-calendar i { width: 18px; height: 17px; border: 1px solid currentColor; border-radius: 3px; }
.home-focus-symbol.icon-calendar i::before { top: 4px; left: 0; width: 16px; height: 1px; background: currentColor; }
.home-focus-symbol.icon-calendar i::after { top: 8px; left: 4px; width: 2px; height: 2px; border-radius: 50%; background: currentColor; box-shadow: 5px 0 0 currentColor, 0 4px 0 currentColor, 5px 4px 0 currentColor; }
.home-focus-symbol.icon-rule i, .home-focus-symbol.icon-approval i { width: 15px; height: 19px; border: 1px solid currentColor; border-radius: 3px; }
.home-focus-symbol.icon-rule i::before, .home-focus-symbol.icon-approval i::before { top: 5px; left: 3px; width: 7px; height: 1px; background: currentColor; box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor; }
.home-focus-symbol.icon-bag i { width: 17px; height: 14px; margin-top: 4px; border: 1px solid currentColor; border-radius: 3px; }
.home-focus-symbol.icon-bag i::before { top: -6px; left: 4px; width: 7px; height: 6px; border: 1px solid currentColor; border-bottom: 0; border-radius: 5px 5px 0 0; }
.home-focus-symbol.icon-goods i { width: 17px; height: 14px; border: 1px solid currentColor; border-radius: 3px; transform: rotate(-12deg); }
.home-focus-symbol.icon-goods i::after { top: 3px; right: 3px; width: 3px; height: 3px; border: 1px solid currentColor; border-radius: 50%; }
.home-focus-symbol.icon-appeal i, .home-focus-symbol.icon-chat i { width: 18px; height: 14px; border: 1px solid currentColor; border-radius: 5px; }
.home-focus-symbol.icon-appeal i::after, .home-focus-symbol.icon-chat i::after { bottom: -4px; left: 3px; width: 6px; height: 5px; border-left: 1px solid currentColor; transform: skew(-28deg); }
.home-focus-symbol.icon-appeal i::before { top: 3px; left: 8px; width: 1px; height: 5px; background: currentColor; box-shadow: 0 7px 0 currentColor; }
.home-focus-symbol.icon-profile i { width: 9px; height: 9px; margin-top: -7px; border: 1px solid currentColor; border-radius: 50%; }
.home-focus-symbol.icon-profile i::after { top: 11px; left: -4px; width: 15px; height: 8px; border: 1px solid currentColor; border-bottom: 0; border-radius: 9px 9px 0 0; }
.home-focus-symbol.icon-couple i::before { position: relative; color: currentColor; content: "♡"; font-family: Arial, sans-serif; font-size: 23px; line-height: 1; }
.home-focus-symbol.icon-system i { width: 4px; height: 4px; border-radius: 1px; background: currentColor; box-shadow: 8px 0 0 currentColor, 0 8px 0 currentColor, 8px 8px 0 currentColor; transform: translate(-4px,-4px); }
.home-focus-status { display: inline-flex; grid-column: 1 / -1; grid-row: 1; align-items: center; justify-self: end; gap: 5px; color: color-mix(in srgb, var(--status-color) 78%, var(--ink)); font-size: 9px; font-weight: 700; white-space: nowrap; }
.home-focus-state-icon { position: relative; display: inline-grid; flex: 0 0 auto; width: 11px; height: 11px; place-items: center; border-radius: 50%; font-style: normal; }
.home-focus-card.action .home-focus-state-icon { border: 1px solid currentColor; }
.home-focus-card.action .home-focus-state-icon::before { font-size: 7px; line-height: 1; content: "!"; }
.home-focus-card.waiting .home-focus-state-icon { border: 1px solid currentColor; }
.home-focus-card.waiting .home-focus-state-icon::before { position: absolute; top: 2px; left: 5px; width: 1px; height: 4px; border-radius: 1px; background: currentColor; content: ""; transform-origin: bottom; transform: rotate(-35deg); }
.home-focus-card.active .home-focus-state-icon { width: 6px; height: 6px; margin: 0 2px; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent); }
.home-focus-copy { display: grid; min-width: 0; grid-column: 1; grid-row: 2; align-self: start; gap: 4px; }
.home-focus-copy small { color: color-mix(in srgb, var(--focus-color) 72%, var(--ink-soft)); font-size: 9px; font-weight: 680; }
.home-focus-copy strong { display: -webkit-box; overflow: hidden; min-height: 42px; font-size: 16px; line-height: 1.32; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.home-focus-copy em { overflow: hidden; color: var(--muted); font-size: 10px; font-style: normal; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.home-focus-link { display: flex; min-width: 0; grid-column: 1; grid-row: 3; align-items: center; justify-content: space-between; color: var(--ink-soft); font-size: 9px; }
.home-focus-link i { color: var(--focus-color); font-size: 18px; font-style: normal; line-height: 1; transition: transform 180ms ease; }
.home-focus-card:focus-visible { outline: 2px solid color-mix(in srgb, var(--focus-color) 62%, #fff); outline-offset: 2px; }
@media (hover: hover) and (min-width: 761px) {
  .home-focus-rail { scroll-snap-type: none; }
  .home-focus-card:hover { background: color-mix(in srgb, var(--focus-color) 10%, rgba(255,255,255,.78)); box-shadow: var(--card-float-shadow); transform: var(--card-float-transform); }
  .home-focus-card:hover .home-focus-symbol { background: color-mix(in srgb, var(--focus-color) 14%, rgba(255,255,255,.26)); }
  .home-focus-card:hover .home-focus-link i { transform: translateX(3px); }
}
.home-focus:not([hidden]) + .relationship-overview { padding-top: 70px; }
.relationship-overview { padding-top: 54px; }
.relationship-overview-heading, .management-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.relationship-overview-heading h2, .management-heading h2 { margin-top: 8px; font-size: 32px; line-height: 1.2; }
.relationship-overview-heading > p, .management-heading > p { max-width: 340px; color: var(--muted); font-size: 11px; line-height: 1.7; text-align: right; }
.couple-overview { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 228px; margin-top: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.person-summary { --person-color: var(--female); position: relative; display: flex; align-items: center; gap: 23px; min-width: 0; padding: 34px 54px 34px 0; transition: background 220ms ease; }
.person-summary.male { --person-color: var(--male); }
.person-summary.female { --person-color: var(--female); }
.person-summary:last-child { justify-content: flex-start; flex-direction: row-reverse; padding: 34px 0 34px 54px; text-align: right; }
.person-summary:first-child { border-right: 1px solid var(--line); }
.person-summary::after { position: absolute; bottom: -1px; left: 0; width: 44px; height: 2px; border-radius: 2px; background: var(--person-color); content: ""; opacity: .72; transform-origin: left; transition: width 240ms ease, opacity 180ms ease; }
.person-summary:last-child::after { right: 0; left: auto; transform-origin: right; }
.person-portrait { display: grid; flex: 0 0 auto; justify-items: center; gap: 7px; }
.person-portrait > span { color: var(--person-color); font-size: 9px; font-weight: 740; }
.person-summary .person-info { flex: 1; min-width: 0; }
.person-summary .person-name { display: block; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.person-summary .person-info > strong { display: block; overflow: hidden; margin-top: 7px; font-size: 21px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.couple-overview .person-summary .person-name { color: var(--person-color); font-size: 22px; font-weight: 760; line-height: 1.2; }
.couple-overview .person-summary .person-info > strong { display: inline-flex; width: fit-content; max-width: 100%; margin-top: 9px; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--person-color) 24%, var(--line)); border-radius: 5px; color: color-mix(in srgb, var(--person-color) 78%, var(--ink)); background: color-mix(in srgb, var(--person-color) 8%, #fff); font-size: 10px; font-weight: 680; line-height: 1.2; }
.couple-overview .person-summary:last-child .person-info > strong { margin-left: auto; }
.person-meta { display: flex; align-items: center; gap: 16px; margin-top: 15px; color: var(--muted); font-size: 10px; }
.person-summary:last-child .person-meta { justify-content: flex-end; }
.person-meta span { display: inline-flex; align-items: baseline; gap: 5px; }
.person-meta span + span { padding-left: 16px; border-left: 1px solid var(--line); }
.person-meta b { color: var(--person-color); font-size: 14px; font-weight: 720; }
.person-growth { display: grid; grid-template-columns: minmax(100px, 190px) auto; align-items: center; gap: 11px; margin-top: 13px; }
.person-summary:last-child .person-growth { justify-content: end; }
.person-growth small { color: var(--muted); font-size: 9px; white-space: nowrap; }
.level-track { width: 100%; height: 4px; border-radius: 2px; background: var(--surface-soft); }
.level-track i { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: var(--person-color); }
.relationship-center { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; align-items: center; gap: 8px; color: #9aa0a9; font-size: 9px; transform: translate(-50%, -50%); }
.relationship-center i { width: 20px; height: 1px; background: var(--line); }
.relationship-center span { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--page); box-shadow: 0 6px 20px rgba(30,39,53,.04); }
@media (hover: hover) and (pointer: fine) {
  .person-summary:hover { background: color-mix(in srgb, var(--person-color) 3.5%, transparent); }
  .person-summary:hover::after { width: 82px; opacity: 1; }
  .person-summary:hover .chat-avatar-frame { transform: translateY(-2px) scale(1.04); }
}
.management-strip { padding: 68px 0 0; }
.management-workbench { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .72fr); margin-top: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.management-primary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-right: 1px solid var(--line); }
.management-primary > button { position: relative; display: grid; align-content: space-between; min-height: 218px; padding: 29px 34px 27px 0; color: var(--ink); background: transparent; text-align: left; transition: color 180ms ease, transform 200ms ease; }
.management-primary > button + button { padding-left: 34px; border-left: 1px solid var(--line); }
.management-index { color: var(--accent); font-size: 9px; font-weight: 760; }
.management-action-copy { display: grid; gap: 9px; align-self: center; }
.management-action-copy strong { font-size: 21px; }
.management-action-copy small { max-width: 220px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.management-action-link { display: inline-flex; align-items: center; justify-content: space-between; color: var(--accent-strong); font-size: 11px; font-weight: 700; }
.management-action-link i { font-size: 20px; font-style: normal; font-weight: 400; line-height: .7; transition: transform 180ms ease; }
.management-settings { min-width: 0; padding-left: 30px; }
.management-settings > header { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-bottom: 1px solid var(--line); }
.management-settings > header strong { font-size: 11px; }
.management-settings > header span { color: var(--muted); font-size: 9px; }
.management-settings > button { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; width: 100%; min-height: 56px; gap: 12px; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; transition: color 180ms ease, transform 180ms ease; }
.management-settings > button:last-child { border-bottom: 0; }
.management-settings > button > span { display: grid; min-width: 0; gap: 3px; }
.management-settings > button strong { font-size: 12px; }
.management-settings > button small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.management-settings > button b { color: var(--accent-strong); font-size: 9px; font-weight: 700; white-space: nowrap; }
.management-settings > button > i { color: var(--muted); font-size: 18px; font-style: normal; text-align: right; transition: transform 180ms ease; }
@media (hover: hover) and (pointer: fine) {
  .management-primary > button:hover { color: var(--accent-strong); transform: translateY(-2px); }
  .management-primary > button:hover .management-action-link i, .management-settings > button:hover > i { transform: translateX(3px); }
  .management-settings > button:hover { color: var(--accent-strong); transform: translateX(2px); }
}

.section-block { padding-top: 78px; }
.section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.section-header h2 { margin-top: 8px; font-size: 32px; font-weight: 700; line-height: 1.2; }
.quiet-note { color: var(--muted); font-size: 12px; }
.stats-layout { display: grid; gap: 38px; }
.weekly-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .72fr) minmax(0, 1fr); align-items: center; min-height: 230px; padding: 36px 0 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.weekly-person { --person-color: var(--female); position: relative; display: flex; align-items: center; gap: 18px; min-width: 0; transition: transform 220ms ease; }
.weekly-person.male { --person-color: var(--male); }
.weekly-person.partner { flex-direction: row-reverse; text-align: right; }
.weekly-avatar-wrap { position: relative; display: inline-grid; flex: 0 0 auto; padding: 12px; place-items: center; }
.weekly-person .avatar { box-shadow: 0 12px 28px color-mix(in srgb, var(--person-color) 16%, transparent); transition: transform 240ms ease, box-shadow 240ms ease; }
.weekly-person.is-highlight .avatar { box-shadow: 0 14px 34px color-mix(in srgb, var(--person-color) 28%, transparent), 0 0 0 5px color-mix(in srgb, var(--person-color) 9%, transparent); transform: translateY(-3px); }
.weekly-person > div { min-width: 0; }
.weekly-person small { display: block; color: var(--person-color); font-size: 9px; font-weight: 680; }
.weekly-person strong { display: block; overflow: hidden; margin-top: 7px; color: var(--ink); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.weekly-person b { display: block; margin-top: 10px; color: var(--person-color); font-size: 30px; font-weight: 690; font-variant-numeric: tabular-nums; transition: color 180ms ease, transform 220ms ease; }
.weekly-person b.negative { color: var(--ink-soft); }
.weekly-person b.neutral { color: var(--muted); }
.weekly-person p { overflow: hidden; margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.weekly-rank { position: absolute; z-index: 3; top: -12px; right: -12px; display: grid; width: 25px; height: 25px; place-items: center; border: 2px solid var(--page); border-radius: 50%; box-shadow: 0 5px 14px rgba(35, 42, 52, .15); }
.weekly-rank i { font-style: normal; line-height: 1; }
.weekly-rank.crown { color: #8b6416; background: #f8dfa0; transform: rotate(8deg); animation: weekly-crown-float 3.2s ease-in-out infinite; }
.weekly-rank.crown i { font-size: 18px; transform: translateY(-1px); }
.weekly-rank.down { width: 21px; height: 21px; top: -8px; right: -8px; color: var(--muted); background: var(--surface-soft); }
.weekly-rank.down i { font-size: 12px; }
.weekly-message { position: relative; display: grid; justify-items: center; gap: 9px; padding: 0 22px; text-align: center; transition: transform 220ms ease; }
.weekly-message::before, .weekly-message::after { position: absolute; top: 5px; width: 46px; height: 1px; background: var(--line); content: ""; transition: width 240ms ease, background 200ms ease; }
.weekly-message::before { right: calc(100% - 14px); }
.weekly-message::after { left: calc(100% - 14px); }
.weekly-message em { position: relative; z-index: 1; padding: 0 10px; color: var(--muted); background: var(--page); font-size: 8px; font-style: normal; }
.weekly-message strong { max-width: 240px; font-size: 16px; line-height: 1.4; transition: color 180ms ease, transform 220ms ease; }
.weekly-message p { max-width: 260px; color: var(--muted); font-size: 10px; line-height: 1.65; }
.weekly-days { grid-column: 1 / -1; margin-top: 32px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.weekly-days header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
.weekly-days header > strong { font-size: 11px; font-weight: 680; }
.weekly-days header > div { display: flex; gap: 16px; color: var(--muted); font-size: 9px; }
.weekly-days header span, .weekly-day-value { --day-color: var(--female); display: inline-flex; align-items: center; gap: 5px; transition: color 180ms ease, transform 200ms ease, opacity 180ms ease; }
.weekly-days .male { --day-color: var(--male); }
.weekly-days header span > i, .weekly-day-value > i { width: 5px; height: 5px; border-radius: 50%; background: var(--day-color); transition: transform 200ms ease, box-shadow 200ms ease; }
.weekly-day-list { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekly-day-list::before { position: absolute; top: 25px; right: 6.5%; left: 6.5%; height: 1px; background: var(--line); content: ""; }
.weekly-day { position: relative; display: grid; min-width: 0; justify-items: center; gap: 8px; transition: transform 220ms ease; }
.weekly-day time { color: var(--muted); font-size: 8px; transition: color 180ms ease; }
.weekly-day-node { z-index: 1; width: 7px; height: 7px; border: 2px solid var(--page); border-radius: 50%; background: #b9c0c9; box-shadow: 0 0 0 1px var(--line); transition: background 180ms ease, box-shadow 220ms ease, transform 220ms ease; }
.weekly-day:last-child .weekly-day-node { background: var(--ink-soft); }
.weekly-day > div { display: grid; gap: 5px; }
.weekly-day-value { justify-content: flex-start; min-width: 34px; color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.weekly-day-value.positive { color: var(--day-color); font-weight: 680; }
.weekly-day-value.negative { color: var(--ink-soft); }
.weekly-day-value.neutral > i { background: #c8cdd4; }
.weekly-day-popover { position: absolute; z-index: 8; bottom: calc(100% + 12px); left: 50%; visibility: hidden; display: grid; width: 174px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.86); border-radius: 7px; background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(241,245,249,.86)); box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 14px 38px rgba(35,45,60,.12); opacity: 0; transform: translate(-50%, 8px); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); transition: visibility 160ms ease, opacity 160ms ease, transform 220ms ease; pointer-events: none; }
.weekly-day-popover::after { position: absolute; bottom: -4px; left: calc(50% - 4px); width: 8px; height: 8px; border-right: 1px solid rgba(218,224,231,.7); border-bottom: 1px solid rgba(218,224,231,.7); background: rgba(245,248,251,.92); content: ""; transform: rotate(45deg); }
.weekly-day-popover > strong { margin-bottom: 6px; color: var(--ink); font-size: 11px; font-weight: 680; }
.weekly-day-popover > span { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 7px; align-items: center; min-height: 24px; color: var(--muted); font-size: 9px; }
.weekly-day-popover > span > i { width: 5px; height: 5px; border-radius: 50%; background: var(--male); box-shadow: 0 0 0 3px color-mix(in srgb, var(--male) 10%, transparent); }
.weekly-day-popover > span.interaction > i { background: var(--female); box-shadow: 0 0 0 3px color-mix(in srgb, var(--female) 10%, transparent); }
.weekly-day-popover em { font-style: normal; }
.weekly-day-popover b { color: var(--ink-soft); font-size: 10px; font-weight: 680; font-variant-numeric: tabular-nums; }
.weekly-day:first-child .weekly-day-popover { left: 0; transform: translate(0, 8px); }
.weekly-day:first-child .weekly-day-popover::after { left: 10%; }
.weekly-day:last-child .weekly-day-popover { right: 0; left: auto; transform: translate(0, 8px); }
.weekly-day:last-child .weekly-day-popover::after { right: 10%; left: auto; }
.weekly-day:focus-visible { outline: none; }
.weekly-day:focus-visible .weekly-day-popover { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
.weekly-day:first-child:focus-visible .weekly-day-popover, .weekly-day:last-child:focus-visible .weekly-day-popover { transform: translate(0, 0); }
@media (hover: hover) and (pointer: fine) {
  .weekly-person:hover { transform: translateY(-3px); }
  .weekly-person:hover .avatar { box-shadow: 0 17px 36px color-mix(in srgb, var(--person-color) 28%, transparent); transform: translateY(-3px) scale(1.035); }
  .weekly-person.is-highlight:hover .avatar { box-shadow: 0 18px 40px color-mix(in srgb, var(--person-color) 34%, transparent), 0 0 0 5px color-mix(in srgb, var(--person-color) 12%, transparent); transform: translateY(-5px) scale(1.035); }
  .weekly-person:hover b { transform: translateY(-1px); }
  .weekly-person:hover .weekly-rank.crown { animation-duration: 1.8s; }
  .weekly-message:hover { transform: translateY(-2px); }
  .weekly-message:hover::before, .weekly-message:hover::after { width: 60px; background: color-mix(in srgb, var(--accent) 34%, var(--line)); }
  .weekly-message:hover strong { color: var(--accent-strong); transform: translateY(-1px); }
  .weekly-days header span:hover { color: var(--day-color); }
  .weekly-days header span:hover > i { box-shadow: 0 0 0 4px color-mix(in srgb, var(--day-color) 12%, transparent); transform: scale(1.2); }
  .weekly-day:hover { transform: translateY(-3px); }
  .weekly-day:hover time { color: var(--ink-soft); }
  .weekly-day:hover .weekly-day-node { background: var(--ink-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); transform: scale(1.35); }
  .weekly-day:hover .weekly-day-value { transform: translateX(2px); }
  .weekly-day:hover .weekly-day-value > i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--day-color) 10%, transparent); transform: scale(1.18); }
  .weekly-day:hover .weekly-day-popover { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
  .weekly-day:first-child:hover .weekly-day-popover, .weekly-day:last-child:hover .weekly-day-popover { transform: translate(0, 0); }
}
@keyframes weekly-crown-float { 0%, 100% { transform: translateY(0) rotate(8deg); } 50% { transform: translateY(-3px) rotate(4deg); } }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-card { position: relative; min-height: 138px; padding: 29px 36px 30px 0; background: transparent; transition: transform 220ms ease; }
.stat-card::before { position: absolute; bottom: -1px; left: 0; width: 34px; height: 2px; border-radius: 2px; background: var(--accent); content: ""; opacity: 0; transform: scaleX(.35); transform-origin: left; transition: opacity 180ms ease, transform 240ms ease; }
.stat-card:not(:last-child)::after { position: absolute; top: 30px; right: 28px; bottom: 30px; width: 1px; background: var(--line); content: ""; }
.stat-card > span { color: var(--muted); font-size: 11px; transition: color 180ms ease, transform 220ms ease; }
.stat-card strong { display: flex; align-items: baseline; gap: 7px; margin-top: 18px; }
.stat-card strong b { font-size: 40px; font-weight: 690; line-height: 1; font-variant-numeric: tabular-nums; transition: color 180ms ease, transform 220ms ease; }
.stat-card strong em { color: var(--muted); font-size: 13px; font-style: normal; font-weight: 520; transition: color 180ms ease, transform 220ms ease; }
@media (hover: hover) and (pointer: fine) {
  .stat-card:hover { transform: translateY(-3px); }
  .stat-card:hover::before { opacity: 1; transform: scaleX(1); }
  .stat-card:hover > span { color: var(--accent-strong); transform: translateY(-1px); }
  .stat-card:hover strong b { color: var(--accent-strong); transform: translateY(-2px) scale(1.025); }
  .stat-card:hover strong em { color: var(--ink-soft); transform: translateY(-1px); }
}
.recent-all-button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 0 6px 12px; color: var(--accent-strong); background: transparent; font-size: 12px; font-weight: 680; }
.recent-all-button span { font-size: 20px; font-weight: 400; line-height: 0; transition: transform 180ms ease; }
.recent-all-button:hover span { transform: translateX(3px); }
.activity-list { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.activity-feed { --feed-color: #78808b; --feed-soft: #eff1f4; display: grid; grid-template-columns: 28px minmax(0, 1fr); min-height: 88px; }
.activity-feed.male { --feed-color: var(--male); --feed-soft: var(--male-soft); }
.activity-feed.female { --feed-color: var(--female); --feed-soft: var(--female-soft); }
.activity-feed-rail { position: relative; display: flex; justify-content: center; padding-top: 26px; }
.activity-feed:not(:last-child) .activity-feed-rail::after { position: absolute; top: 38px; bottom: -12px; left: 50%; border-left: 1px dashed color-mix(in srgb, var(--feed-color) 26%, transparent); content: ""; }
.activity-feed-rail i { position: relative; z-index: 1; width: 8px; height: 8px; border: 2px solid var(--surface); border-radius: 50%; background: var(--feed-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--feed-color) 18%, transparent); }
.activity-feed-main { min-width: 0; padding: 20px 0 18px 8px; border-bottom: 1px solid var(--line); transition: background 180ms ease, padding 180ms ease; }
.activity-feed:last-child .activity-feed-main { border-bottom: 0; }
.activity-feed:hover .activity-feed-main { padding-right: 14px; padding-left: 14px; background: color-mix(in srgb, var(--feed-soft) 42%, transparent); }
.activity-feed-head { display: grid; grid-template-columns: minmax(68px, 110px) auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; }
.activity-feed-actor, .activity-feed-title, .activity-feed-amount { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-feed-actor { color: var(--feed-color); font-size: 13px; font-weight: 560; }
.activity-feed-kind { display: inline-flex; min-width: 42px; height: 24px; padding: 0 8px; align-items: center; justify-content: center; border-radius: 5px; color: #59616c; background: var(--surface-soft); font-size: 10px; font-weight: 560; line-height: 24px; white-space: nowrap; }
.activity-feed-kind.gain, .activity-feed-kind.accepted { color: #26735b; background: #e8f7ef; }
.activity-feed-kind.spend, .activity-feed-kind.loss { color: #a76b24; background: #fff2df; }
.activity-feed-kind.use, .activity-feed-kind.rule, .activity-feed-kind.appeal { color: #b0446a; background: #ffe8ef; }
.activity-feed-kind.goods { color: #347ca8; background: #eaf6fd; }
.activity-feed-kind.discount { color: #6f5c9d; background: #f2edff; }
.activity-feed-kind.delete, .activity-feed-kind.decline { color: #b74858; background: #fff0f2; }
.activity-feed.male .activity-feed-kind, .activity-feed.female .activity-feed-kind { color: var(--feed-color); background: var(--feed-soft); }
.activity-feed-title { color: var(--ink); font-size: 14px; font-weight: 520; }
.activity-feed-amount { justify-self: end; max-width: 110px; color: var(--feed-color); font-size: 13px; font-weight: 560; font-variant-numeric: tabular-nums; }
.activity-feed-role, .activity-feed-meta { overflow: hidden; margin-top: 5px; padding-left: 130px; color: var(--muted); font-size: 11px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.activity-feed-meta { margin-top: 2px; }
.activity-feed-empty { display: grid; min-height: 180px; place-items: center; color: var(--muted); font-size: 13px; }
.empty-state { display: grid; min-height: 230px; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--surface); text-align: center; }
.empty-state strong { display: block; color: var(--ink); font-size: 18px; }
.empty-state p { margin-top: 8px; font-size: 13px; }

.chat-route main, #page-chat.active { height: calc(100dvh - 58px); min-height: 0; overflow: hidden; }
#page-chat .chat-page { width: min(1120px, calc(100% - 64px)); }
.chat-page { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; height: 100%; padding: 14px 0 18px; }
.page-title { margin-bottom: 34px; }
.chat-title { display: flex; align-items: center; min-height: 50px; gap: 13px; margin-bottom: 0; }
.chat-title > div:last-child { display: flex; align-items: baseline; min-width: 0; gap: 13px; }
.chat-title .eyebrow { display: none; }
.chat-title h1, .profile-intro h1 { margin-top: 8px; font-size: 48px; font-weight: 720; line-height: 1.12; }
.chat-title h1 { margin-top: 0; font-size: 26px; }
#chatSubtitle { display: block; overflow: hidden; margin-top: 0; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.avatar-stack { display: flex; align-items: center; padding-left: 2px; }
.avatar-stack .chat-avatar-frame { margin-left: -13px; }
.avatar-stack .chat-avatar-frame:first-child { margin-left: 0; }
.chat-title .avatar-stack .chat-avatar-frame { margin-left: -10px; }
.chat-title .avatar-stack .chat-avatar-frame:first-child { margin-left: 0; }
.chat-avatar-frame { position: relative; display: inline-grid; flex: 0 0 auto; place-items: center; border-radius: 50%; isolation: isolate; transition: transform 260ms ease, filter 260ms ease; }
.chat-avatar-frame-small { width: 44px; height: 44px; }
.chat-avatar-frame-medium { width: 66px; height: 66px; }
.chat-avatar-frame::before { position: absolute; z-index: 0; inset: 0; border-radius: 50%; background: #ffdbe8; box-shadow: 0 3px 10px rgba(35,42,52,.16), 0 0 0 1px rgba(255,255,255,.7); content: ""; }
.chat-avatar-frame .avatar { z-index: 1; margin: 0; border: 2px solid rgba(255,255,255,.9); box-shadow: inset 0 1px 3px rgba(255,255,255,.5), 0 2px 8px rgba(35,42,52,.13); }
.frame-orbit { position: absolute; z-index: 2; inset: -3px; border: 1px solid transparent; border-top-color: rgba(255,255,255,.88); border-right-color: color-mix(in srgb, var(--accent) 58%, transparent); border-radius: 50%; opacity: 0; pointer-events: none; }
.frame-orbit::before, .frame-orbit::after { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 7px 2px rgba(255,255,255,.82); content: ""; }
.frame-orbit::before { top: 2px; right: 6px; }
.frame-orbit::after { bottom: 3px; left: 5px; width: 3px; height: 3px; background: color-mix(in srgb, var(--accent) 50%, #fff); }
.frame-glint { position: absolute; z-index: 3; inset: 5px; overflow: hidden; border-radius: 50%; opacity: 0; pointer-events: none; }
.frame-glint::before { position: absolute; top: -22%; bottom: -22%; left: -58%; width: 32%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent); content: ""; transform: rotate(18deg); }
.chat-avatar-frame-small .avatar { width: 34px; height: 34px; font-size: 11px; }
.chat-avatar-frame-medium .avatar { width: 54px; height: 54px; font-size: 16px; }
.chat-avatar-frame > small { position: absolute; z-index: 4; right: -5px; bottom: -2px; min-width: 29px; height: 16px; padding: 0 4px; border: 1px solid rgba(255,255,255,.75); border-radius: 8px; color: #fff; background: rgba(43,47,56,.82); box-shadow: 0 2px 7px rgba(31,36,45,.2); font-size: 8px; font-weight: 780; line-height: 14px; text-align: center; backdrop-filter: blur(6px); }
.chat-avatar-frame-medium > small { right: -3px; bottom: 0; min-width: 34px; height: 18px; font-size: 9px; line-height: 16px; }
.chat-title .chat-avatar-frame-medium { width: 50px; height: 50px; }
.chat-title .chat-avatar-frame-medium .avatar { width: 40px; height: 40px; font-size: 12px; }
.chat-title .chat-avatar-frame-medium > small { right: -2px; bottom: -1px; min-width: 27px; height: 14px; padding: 0 3px; font-size: 7px; line-height: 12px; }
.chat-avatar-frame.male.web-frame-lv1::before { background: #cdeeff; }
.chat-avatar-frame.web-frame-lv1::before { animation: web-frame-breathe 4.6s ease-in-out infinite; }
.chat-avatar-frame.web-frame-lv2 > .frame-orbit, .chat-avatar-frame.web-frame-lv3 > .frame-orbit, .chat-avatar-frame.web-frame-lv4 > .frame-orbit, .chat-avatar-frame.web-frame-lv5 > .frame-orbit, .chat-avatar-frame.web-frame-lv6 > .frame-orbit, .chat-avatar-frame.web-frame-lv7 > .frame-orbit, .chat-avatar-frame.web-frame-lv8 > .frame-orbit, .chat-avatar-frame.web-frame-lv9 > .frame-orbit, .chat-avatar-frame.web-frame-lv10 > .frame-orbit { animation: web-frame-orbit 7s linear infinite; }
.chat-avatar-frame.web-frame-lv3 > .frame-glint::before, .chat-avatar-frame.web-frame-lv4 > .frame-glint::before, .chat-avatar-frame.web-frame-lv5 > .frame-glint::before, .chat-avatar-frame.web-frame-lv6 > .frame-glint::before, .chat-avatar-frame.web-frame-lv7 > .frame-glint::before, .chat-avatar-frame.web-frame-lv8 > .frame-glint::before, .chat-avatar-frame.web-frame-lv9 > .frame-glint::before, .chat-avatar-frame.web-frame-lv10 > .frame-glint::before { animation: web-frame-glint 3.8s ease-in-out infinite; }
.chat-avatar-frame.web-frame-lv2::before { background: #ffdbe8; box-shadow: 0 3px 10px rgba(200,79,122,.2), 0 0 11px rgba(255,219,232,.7); animation: web-frame-soft-glow 2.4s ease-in-out infinite; }
.chat-avatar-frame.male.web-frame-lv2::before { background: #cdeeff; box-shadow: 0 3px 10px rgba(38,118,166,.2), 0 0 11px rgba(205,238,255,.72); }
.chat-avatar-frame.web-frame-lv2 > .frame-orbit { opacity: .34; }
.chat-avatar-frame.web-frame-lv3::before, .chat-avatar-frame.web-frame-lv4::before { background: conic-gradient(from 18deg, #7d4f33, #f4b879, #ffe1aa, #9b5a31, #7d4f33); animation: web-frame-spin 7s linear infinite reverse; }
.chat-avatar-frame.web-frame-lv4::before { box-shadow: 0 3px 10px rgba(56,46,62,.16), 0 0 13px rgba(244,184,121,.38); animation: web-frame-spin 3.2s linear infinite reverse; }
.chat-avatar-frame.web-frame-lv3 > .frame-orbit, .chat-avatar-frame.web-frame-lv4 > .frame-orbit { border-right-color: rgba(244,184,121,.84); opacity: .58; animation-duration: 5.8s; }
.chat-avatar-frame.web-frame-lv3 > .frame-glint, .chat-avatar-frame.web-frame-lv4 > .frame-glint { opacity: .56; }
.chat-avatar-frame.web-frame-lv5::before, .chat-avatar-frame.web-frame-lv6::before { background: conic-gradient(from 18deg, #a66f16, #f6cf62, #fff7d2, #d99b28, #a66f16); box-shadow: 0 3px 10px rgba(56,46,62,.16), 0 0 13px rgba(246,207,98,.3); animation: web-frame-spin 5.6s linear infinite reverse; }
.chat-avatar-frame.web-frame-lv6::before { animation: web-frame-spin 3s linear infinite reverse; }
.chat-avatar-frame.web-frame-lv5 > .frame-orbit, .chat-avatar-frame.web-frame-lv6 > .frame-orbit { inset: -4px; border-right-color: rgba(246,207,98,.92); opacity: .72; animation-duration: 4.4s; }
.chat-avatar-frame.web-frame-lv5 > .frame-glint, .chat-avatar-frame.web-frame-lv6 > .frame-glint { opacity: .72; }
.chat-avatar-frame.web-frame-lv7::before, .chat-avatar-frame.web-frame-lv8::before { background: conic-gradient(from 0deg, #7886a6, #f8fbff, #b6c0d3, #fff, #7886a6); box-shadow: 0 3px 10px rgba(56,46,62,.16), 0 0 15px rgba(142,205,240,.38), 0 0 20px rgba(239,127,163,.18); animation: web-frame-spin 4.8s linear infinite reverse; }
.chat-avatar-frame.web-frame-lv8::before { animation: web-frame-spin 2.8s linear infinite reverse; }
.chat-avatar-frame.web-frame-lv7 > .frame-orbit, .chat-avatar-frame.web-frame-lv8 > .frame-orbit { inset: -6px; border-width: 2px; border-right-color: rgba(142,205,240,.94); border-bottom-color: rgba(239,127,163,.52); opacity: .82; animation-duration: 3.6s; }
.chat-avatar-frame.web-frame-lv7 > .frame-glint, .chat-avatar-frame.web-frame-lv8 > .frame-glint { opacity: .82; }
.chat-avatar-frame.web-frame-lv9::before, .chat-avatar-frame.web-frame-lv10::before { inset: -2px; background: conic-gradient(from 0deg, #32e5ff, #fff, #fff1aa, #ffb7ef, #fff, #8dbfff, #32e5ff); box-shadow: 0 4px 13px rgba(56,46,62,.2), 0 0 17px rgba(50,229,255,.45), 0 0 25px rgba(239,127,163,.3); animation: web-frame-spin 2.1s linear infinite; }
.chat-avatar-frame.web-frame-lv10::before { inset: -4px; animation-duration: 1.6s; }
.chat-avatar-frame.web-frame-lv9 > .frame-orbit, .chat-avatar-frame.web-frame-lv10 > .frame-orbit { inset: -9px; border-width: 2px; border-top-color: #fff; border-right-color: rgba(50,229,255,.98); border-bottom-color: rgba(255,183,239,.8); opacity: 1; filter: drop-shadow(0 0 5px rgba(50,229,255,.72)); animation-duration: 2.4s; }
.chat-avatar-frame.web-frame-lv10 > .frame-orbit { inset: -11px; animation-duration: 1.7s; }
.chat-avatar-frame.web-frame-lv9 > .frame-glint, .chat-avatar-frame.web-frame-lv10 > .frame-glint { inset: 3px; opacity: 1; }
.chat-avatar-frame.web-frame-lv7::after, .chat-avatar-frame.web-frame-lv8::after, .chat-avatar-frame.web-frame-lv9::after, .chat-avatar-frame.web-frame-lv10::after { position: absolute; z-index: 3; inset: -5px; border-radius: 50%; background: radial-gradient(circle at 50% 0, rgba(255,255,255,.96) 0 2px, transparent 3px), radial-gradient(circle at 96% 52%, rgba(185,243,255,.9) 0 2px, transparent 3px), radial-gradient(circle at 48% 100%, rgba(255,241,184,.88) 0 2px, transparent 3px), radial-gradient(circle at 2% 48%, rgba(255,214,244,.86) 0 2px, transparent 3px); content: ""; pointer-events: none; animation: web-frame-sparkle 1.7s ease-in-out infinite; }
.chat-avatar-frame.web-frame-lv9::after, .chat-avatar-frame.web-frame-lv10::after { inset: -7px; animation-duration: 1.35s; }
.chat-avatar-frame:hover, .message-row:hover .chat-avatar-frame { z-index: 6; filter: brightness(1.08) saturate(1.12); transform: translateY(-2px) scale(1.08); }
.chat-avatar-frame:hover > .frame-orbit, .message-row:hover .chat-avatar-frame > .frame-orbit { animation-duration: 1.05s; }
.chat-avatar-frame:hover > .frame-glint::before, .message-row:hover .chat-avatar-frame > .frame-glint::before { animation-duration: .78s; }
.chat-surface { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-soft); perspective: 1000px; transition: border-color 220ms ease, box-shadow 220ms ease; }
.chat-surface::before { position: absolute; z-index: 4; top: 0; left: -35%; width: 34%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), #fff, var(--male), transparent); content: ""; pointer-events: none; animation: chat-light-scan 5.8s ease-in-out infinite; }
.chat-surface:focus-within { border-color: color-mix(in srgb, var(--accent) 36%, var(--line)); box-shadow: 0 20px 48px rgba(30,39,53,.11), 0 0 0 3px var(--accent-faint); }
.chat-pinned { position: relative; z-index: 5; grid-row: 1; width: 100%; min-width: 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent-soft) 28%, #fff); }
.chat-pinned[hidden], .chat-pinned-list[hidden] { display: none; }
.chat-pinned-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; width: 100%; padding: 11px 16px; color: var(--ink); background: transparent; text-align: left; }
.chat-pinned-head > span:first-child { display: flex; min-width: 0; align-items: baseline; gap: 10px; }
.chat-pinned-head b { flex: 0 0 auto; font-size: 12px; }
.chat-pinned-head small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chat-pinned-toggle { color: var(--accent-strong); font-size: 11px; font-weight: 700; }
.chat-pinned-list { display: flex; width: 100%; min-width: 0; max-height: none; overflow-x: auto; overflow-y: hidden; gap: 10px; padding: 8px 16px 16px; scroll-padding-inline: 16px; scroll-snap-type: x proximity; scrollbar-color: color-mix(in srgb, var(--accent) 24%, var(--line)) transparent; scrollbar-width: thin; }
.chat-pinned-list::-webkit-scrollbar { height: 4px; }
.chat-pinned-list::-webkit-scrollbar-thumb { border-radius: 2px; background: color-mix(in srgb, var(--accent) 24%, var(--line)); }
.drag-scroll { overscroll-behavior-x: contain; }
.drag-scroll.is-dragging, .drag-scroll.is-gliding { scroll-behavior: auto; scroll-snap-type: none; }
.drag-scroll.is-dragging { user-select: none; }
@media (hover: hover) and (pointer: fine) {
  .chat-pinned-list { scroll-snap-type: none; }
  .drag-scroll.can-drag, .drag-scroll.can-drag button { cursor: grab; }
  .drag-scroll.is-dragging, .drag-scroll.is-dragging button { cursor: grabbing; }
  .drag-scroll.is-dragging .home-focus-card:hover, .drag-scroll.is-dragging .chat-pinned-item:hover { box-shadow: 0 7px 18px rgba(30,39,53,.08); transform: translateY(-1px) scale(.995); }
}
.chat-pinned-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; flex: 0 0 clamp(232px, 25vw, 292px); min-height: 72px; gap: 10px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: 7px; color: var(--ink); background: rgba(255,255,255,.88); text-align: left; scroll-snap-align: start; transform-origin: center; transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.chat-pinned-item:hover { border-color: color-mix(in srgb, var(--accent) 46%, var(--line)); box-shadow: 0 9px 22px rgba(30,39,53,.09); transform: translateY(-2px) scale(1.012); }
.chat-pinned-item > span:first-child { display: grid; min-width: 0; gap: 4px; }
.chat-pinned-item small, .chat-pinned-item b, .chat-pinned-item em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pinned-item small { color: var(--accent-strong); font-size: 9px; font-style: normal; font-weight: 720; }
.chat-pinned-item b { font-size: 12px; }
.chat-pinned-item em { color: var(--muted); font-size: 10px; font-style: normal; }
.chat-pinned-tag { padding: 5px 7px; border-radius: 5px; color: var(--accent-strong); background: var(--accent-soft); font-size: 9px; font-style: normal; font-weight: 700; }
.message-stage { position: relative; grid-row: 2; min-height: 0; overflow: hidden; }
.message-stream { position: absolute; inset: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 46px 30px; scroll-behavior: smooth; scrollbar-color: color-mix(in srgb, var(--accent) 30%, var(--line)) transparent; scrollbar-width: thin; }
.chat-history-control { display: flex; justify-content: center; min-height: 30px; margin: 2px 0 16px; }
.chat-history-control button { padding: 6px 10px; border-radius: 5px; color: var(--muted); background: var(--surface-soft); font-size: 10px; }
.chat-history-control button:hover { color: var(--accent-strong); }
.chat-history-control span { color: var(--muted); font-size: 10px; line-height: 30px; }
.chat-latest-button { position: absolute; z-index: 4; right: 18px; bottom: 16px; min-height: 34px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 6px; color: var(--accent-strong); background: rgba(255,255,255,.94); box-shadow: 0 8px 24px rgba(30,39,53,.1); font-size: 11px; font-weight: 720; backdrop-filter: blur(12px); }
.chat-latest-button[hidden] { display: none; }
.message-date { margin: 8px 0 24px; color: var(--muted); font-size: 11px; text-align: center; }
.message-time { display: block; margin: 2px 0 12px; color: #9aa1ac; font-size: 10px; line-height: 1.4; text-align: center; }
.message-row { --card-accent: var(--female); --card-strong: #a93460; --card-soft: var(--female-soft); display: flex; align-items: flex-end; gap: 11px; margin: 0 0 20px; }
.message-row.sender-male, .system-message-card.sender-male { --card-accent: var(--male); --card-strong: #205fa8; --card-soft: var(--male-soft); --card-effect: #5fa2e4; }
.message-row.sender-female, .system-message-card.sender-female { --card-accent: var(--female); --card-strong: #a93460; --card-soft: var(--female-soft); --card-effect: #dc6f98; }
.message-card-effects { position: absolute; z-index: 4; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.message-card-effects::before { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--card-effect) 58%, transparent); border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-effect) 7%, transparent), 0 0 18px color-mix(in srgb, var(--card-effect) 8%, transparent); content: ""; opacity: 0; }
.card-effects-live .message-card-effects::before { animation: chat-card-border-pulse 2.2s ease-out 1 both; }
.message-card:hover > .message-card-effects::before, .system-message-card:hover > .message-card-effects::before { animation: chat-card-border-pulse 1.7s ease-in-out infinite; }
.message-card-effects i { position: absolute; display: block; opacity: 0; }
.card-effects-live .message-card-effects i, .message-card:hover > .message-card-effects i, .system-message-card:hover > .message-card-effects i { will-change: transform, opacity; }
.message-row.sender-female .message-card-effects i, .system-message-card.sender-female .message-card-effects i { width: 13px; height: 13px; color: color-mix(in srgb, var(--card-effect) 82%, #fff); filter: drop-shadow(0 3px 5px rgba(169,52,96,.16)); font-size: 10px; font-style: normal; line-height: 13px; text-align: center; }
.message-row.sender-female .message-card-effects i::before, .system-message-card.sender-female .message-card-effects i::before { content: "♥"; }
.message-row.sender-female .message-card-effects i:nth-child(1), .system-message-card.sender-female .message-card-effects i:nth-child(1) { top: 8px; right: 17px; }
.message-row.sender-female .message-card-effects i:nth-child(2), .system-message-card.sender-female .message-card-effects i:nth-child(2) { top: 47%; right: 5px; animation-delay: .28s; }
.message-row.sender-female .message-card-effects i:nth-child(3), .system-message-card.sender-female .message-card-effects i:nth-child(3) { bottom: 7px; left: 22px; animation-delay: .54s; }
.message-row.sender-female.card-effects-live .message-card-effects i, .card-effects-live .system-message-card.sender-female .message-card-effects i { animation-name: female-card-heart; animation-duration: 1.8s; animation-timing-function: ease-out; animation-iteration-count: 1; animation-fill-mode: both; }
.message-row.sender-female:hover .message-card-effects i, .system-message-card.sender-female:hover .message-card-effects i { animation-name: female-card-heart; animation-duration: 2.1s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.message-row.sender-male .message-card-effects i, .system-message-card.sender-male .message-card-effects i { width: 5px; height: 5px; border: 1px solid color-mix(in srgb, var(--card-effect) 72%, #fff); background: color-mix(in srgb, var(--card-effect) 34%, #fff); box-shadow: 0 0 8px color-mix(in srgb, var(--card-effect) 30%, transparent); transform: rotate(45deg); }
.message-row.sender-male .message-card-effects i:nth-child(1), .system-message-card.sender-male .message-card-effects i:nth-child(1) { top: 10px; right: 18px; }
.message-row.sender-male .message-card-effects i:nth-child(2), .system-message-card.sender-male .message-card-effects i:nth-child(2) { top: 49%; right: 7px; animation-delay: .22s; }
.message-row.sender-male .message-card-effects i:nth-child(3), .system-message-card.sender-male .message-card-effects i:nth-child(3) { bottom: 9px; left: 20px; animation-delay: .44s; }
.message-row.sender-male.card-effects-live .message-card-effects i, .card-effects-live .system-message-card.sender-male .message-card-effects i { animation-name: male-card-spark; animation-duration: 1.7s; animation-timing-function: ease-out; animation-iteration-count: 1; animation-fill-mode: both; }
.message-row.sender-male:hover .message-card-effects i, .system-message-card.sender-male:hover .message-card-effects i { animation-name: male-card-spark; animation-duration: 1.9s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes chat-card-border-pulse { 0% { opacity: 0; } 24% { opacity: .72; } 58% { opacity: .26; } 100% { opacity: 0; } }
@keyframes female-card-heart { 0% { opacity: 0; transform: translate3d(0, 6px, 0) scale(.45) rotate(-10deg); } 32% { opacity: .88; } 68% { opacity: .55; } 100% { opacity: 0; transform: translate3d(0, -8px, 0) scale(1.08) rotate(8deg); } }
@keyframes male-card-spark { 0% { opacity: 0; transform: translate3d(-5px, 4px, 0) rotate(45deg) scale(.45); } 36% { opacity: .82; } 70% { opacity: .48; } 100% { opacity: 0; transform: translate3d(7px, -5px, 0) rotate(135deg) scale(1.08); } }
.message-row.mine { flex-direction: row-reverse; }
.system-message-row { display: flex; justify-content: center; margin: 0 auto 16px; }
.system-message-card { --card-accent: #9aa1aa; --card-strong: #626a74; --card-soft: #f1f3f5; position: relative; width: fit-content; min-width: 280px; max-width: min(72%, 560px); overflow: hidden; padding: 11px 14px 12px 17px; border: 1px solid color-mix(in srgb, var(--card-accent) 18%, var(--line)); border-radius: 8px; color: var(--ink-soft); background: color-mix(in srgb, var(--card-soft) 52%, #fff); box-shadow: 0 6px 20px rgba(30,39,53,.045); text-align: left; }
.system-message-card::before { position: absolute; top: 11px; bottom: 11px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--card-accent); content: ""; opacity: .72; }
.system-message-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.system-message-kind { color: var(--card-strong); font-size: 9px; font-weight: 760; }
.system-message-actor { max-width: 130px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.system-message-actor::before { margin-right: 7px; color: color-mix(in srgb, var(--card-accent) 45%, var(--muted)); content: "·"; }
.system-message-card p { margin-top: 5px; overflow-wrap: anywhere; font-size: 12px; font-weight: 610; line-height: 1.55; }
.system-message-action { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 9px; padding: 8px 0 0; border-top: 1px solid color-mix(in srgb, var(--card-accent) 14%, var(--line)); color: var(--card-strong); background: transparent; font-size: 10px; font-weight: 720; text-align: left; }
.system-message-action span { font-size: 17px; font-weight: 400; line-height: .7; transition: transform 180ms ease; }
.system-message-card:has(.system-message-action) { min-width: 360px; }
.system-message-card:has(.system-message-action):hover { border-color: color-mix(in srgb, var(--card-accent) 35%, var(--line)); box-shadow: 0 10px 26px color-mix(in srgb, var(--card-accent) 9%, transparent); transform: translateY(-1px); }
.system-message-card:has(.system-message-action):hover .system-message-action span { transform: translateX(2px); }
.message-bubble { max-width: min(64%, 520px); padding: 13px 16px; border-radius: 8px 8px 8px 2px; color: var(--ink-soft); background: var(--surface-soft); box-shadow: 0 4px 13px rgba(30,39,53,.035); font-size: 14px; line-height: 1.65; transition: transform 180ms ease, box-shadow 180ms ease; }
.message-row.mine .message-bubble { border-radius: 8px 8px 2px 8px; color: #fff; background: var(--accent-strong); }
.message-row:hover .message-bubble, .message-row:hover .message-card { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(30,39,53,.08); }
.message-card { --tone: var(--card-accent); --tone-strong: var(--card-strong); position: relative; width: min(68%, 440px); min-width: 340px; overflow: hidden; padding: 17px 18px 18px; border: 1px solid color-mix(in srgb, var(--tone) 20%, var(--line)); border-radius: 8px; background: #fff; box-shadow: 0 7px 22px rgba(30,39,53,.045); transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.message-card::before { position: absolute; top: 16px; bottom: 16px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--tone); content: ""; opacity: .78; }
.message-card-head { display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: 12px; }
.message-card-kind { position: relative; overflow: hidden; color: var(--tone-strong); font-size: 10px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.message-card-kind::before { display: inline-block; width: 5px; height: 5px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--tone); content: ""; }
.message-card-status { flex: 0 0 auto; padding: 4px 7px; border-radius: 5px; color: var(--tone-strong); background: color-mix(in srgb, var(--tone) 9%, #fff); font-size: 9px; font-weight: 680; }
.message-card > strong, .message-gift-copy > strong { display: block; margin-top: 11px; overflow-wrap: anywhere; color: var(--ink); font-size: 16px; line-height: 1.42; }
.message-card > p, .message-gift-copy > p { margin-top: 7px; overflow-wrap: anywhere; color: var(--muted); font-size: 11px; line-height: 1.65; }
.message-card-media { width: 100%; max-height: 190px; margin-top: 13px; object-fit: cover; border-radius: 6px; }
.message-card-footer { display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: 14px; margin-top: 14px; padding-top: 11px; border-top: 1px solid color-mix(in srgb, var(--tone) 12%, var(--line)); }
.message-card-footer > span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.message-card-footer > button { flex: 0 0 auto; padding: 5px 0 5px 10px; color: var(--tone-strong); background: transparent; font-size: 10px; font-weight: 750; }
.message-card-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 15px; padding-top: 13px; border-top: 1px solid color-mix(in srgb, var(--tone) 12%, var(--line)); }
.interaction-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.message-card-actions .button, .interaction-actions .button { min-height: 34px; padding: 7px 13px; font-size: 11px; }
.message-card-actions .button-primary { background: var(--tone-strong); box-shadow: 0 7px 18px color-mix(in srgb, var(--tone) 18%, transparent); }
.message-action-card { background: color-mix(in srgb, var(--card-soft) 28%, #fff); }
.message-action-card.card-commerce { background: color-mix(in srgb, var(--male-soft) 36%, #fff); }
.message-action-card.card-relationship { background: color-mix(in srgb, var(--female-soft) 36%, #fff); }
.message-action-card.card-item { background: #fffaf5; }
.message-action-card.card-neutral { background: #fafbfc; }
.message-action-card.card-critical { --tone: var(--danger); --tone-strong: #963d45; background: #fff7f8; }
.message-heart { --tone: var(--female); --tone-strong: #9b4166; background: linear-gradient(115deg, color-mix(in srgb, var(--female-soft) 44%, #fff), #fff 52%, color-mix(in srgb, var(--male-soft) 38%, #fff)); }
.message-heart::after { position: absolute; top: 0; right: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--female), var(--male)); content: ""; opacity: .72; }
.message-interaction, .message-info-card { background: color-mix(in srgb, var(--card-soft) 25%, #fff); }
.message-gift { width: min(66%, 410px); padding: 0; border-color: rgba(155,59,77,.2); background: #fffafa; box-shadow: 0 9px 26px rgba(119,52,69,.1); }
.message-gift::before { display: none; }
.message-gift::after { position: absolute; top: -40%; bottom: -40%; left: -36%; width: 24%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent); content: ""; pointer-events: none; transform: rotate(14deg); animation: gift-card-sheen 4.8s ease-in-out infinite; }
.message-gift-main { position: relative; z-index: 1; display: flex; align-items: center; min-height: 126px; gap: 18px; padding: 20px; color: #fff; background: #d95c73; }
.message-gift-copy { min-width: 0; flex: 1; }
.message-gift .message-card-kind, .message-gift .message-card-status, .message-gift-copy > strong, .message-gift-copy > p { color: #fff; }
.message-gift .message-card-kind::before { background: rgba(255,255,255,.86); }
.message-gift .message-card-status { background: rgba(255,255,255,.14); }
.message-gift-copy > p { opacity: .88; }
.message-gift-copy > small { display: block; margin-top: 5px; overflow-wrap: anywhere; color: rgba(255,255,255,.68); font-size: 9px; line-height: 1.45; }
.message-gift-open { display: grid; flex: 0 0 58px; width: 58px; height: 58px; place-items: center; border: 5px solid rgba(255,255,255,.74); border-radius: 50%; color: #913b4d; background: #ffe6ce; box-shadow: 0 8px 20px rgba(103,34,49,.22); font-size: 17px; font-weight: 780; transition: transform 180ms ease, box-shadow 180ms ease; }
.message-gift-open:hover { box-shadow: 0 11px 24px rgba(103,34,49,.28); transform: scale(1.06); }
.message-gift-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 42px; gap: 12px; padding: 0 15px; color: #765b62; font-size: 9px; }
.message-gift-footer span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-gift-footer em { flex: 0 0 auto; color: #a97883; font-style: normal; }
.message-gift.gift-completed .message-gift-main { background: #ba7c88; }
.message-gift.gift-expired { border-color: var(--line); box-shadow: none; }
.message-gift.gift-expired .message-gift-main { background: #989296; }
.composer { position: relative; z-index: 6; display: grid; grid-row: 3; grid-template-columns: 1fr 66px; align-items: end; min-height: 75px; gap: 10px; padding: 14px; border-top: 1px solid var(--line); background: #fafbfc; }
.chat-compose-actions { display: flex; grid-column: 1 / -1; align-items: center; gap: 4px; margin: -5px 0 -2px; }
.chat-compose-actions button { position: relative; display: inline-flex; align-items: center; min-height: 28px; gap: 7px; padding: 4px 9px; border-radius: 5px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 680; transition: color 180ms ease, background 180ms ease, transform 180ms ease; }
.chat-compose-actions button i { position: relative; width: 13px; height: 13px; flex: 0 0 13px; border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line)); border-radius: 50%; }
.chat-compose-actions button:first-child i::before, .chat-compose-actions button:first-child i::after { position: absolute; top: 50%; left: 50%; width: 6px; height: 1px; border-radius: 1px; background: var(--accent); content: ""; transform: translate(-50%, -50%); }
.chat-compose-actions button:first-child i::after { transform: translate(-50%, -50%) rotate(90deg); }
.chat-compose-actions button:last-child i { border-radius: 3px; }
.chat-compose-actions button:last-child i::before { position: absolute; top: 3px; right: 2px; left: 2px; height: 1px; background: var(--accent); box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 42%, transparent); content: ""; }
.chat-compose-actions button:hover { color: var(--accent-strong); background: var(--accent-faint); transform: translateY(-1px); }
.chat-compose-actions button:focus-visible { color: var(--accent-strong); background: var(--accent-faint); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 58%, transparent); outline: none; }
.chat-compose-actions button:active { transform: scale(.97); }
.composer textarea { width: 100%; min-height: 46px; max-height: 120px; resize: none; padding: 12px 14px; border: 1px solid transparent; border-radius: 7px; color: var(--ink); background: var(--surface-soft); line-height: 1.5; }
.composer textarea:focus { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); background: #fff; outline: none; box-shadow: 0 0 0 3px var(--accent-faint); }
.send-button { position: relative; overflow: hidden; height: 46px; border-radius: 7px; color: #fff; background: var(--accent-strong); box-shadow: 0 8px 18px var(--accent-faint); font-size: 13px; font-weight: 720; transition: transform 180ms ease, box-shadow 180ms ease; }
.send-button::after { position: absolute; top: -30%; bottom: -30%; left: -45%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent); content: ""; transform: rotate(15deg); transition: left 420ms ease; }
.send-button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px var(--accent-faint); }
.send-button:hover::after { left: 120%; }

.chat-activity-dialog { width: min(680px, calc(100% - 32px)); }
.chat-activity-sheet { width: 100%; max-height: min(760px, calc(100dvh - 40px)); overflow-y: auto; }
.chat-activity-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 20px; padding-right: 30px; }
.chat-activity-heading h2 { margin-top: 8px; font-size: 28px; line-height: 1.22; }
.chat-activity-status { padding: 6px 9px; border-radius: 5px; color: var(--accent-strong); background: var(--accent-soft); font-size: 10px; font-weight: 720; }
.chat-activity-description { margin-top: 20px; color: var(--ink-soft); font-size: 13px; line-height: 1.75; white-space: pre-line; }
.chat-activity-description[hidden] { display: none; }
.chat-activity-progress { display: grid; gap: 16px; margin-top: 20px; }
.chat-activity-progress[hidden] { display: none; }
.chat-progress-section { display: grid; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.chat-progress-section > p { color: var(--muted); font-size: 10px; font-weight: 720; }
.chat-progress-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.chat-progress-row { --progress-color: var(--female); min-width: 0; }
.chat-progress-row.male { --progress-color: var(--male); }
.chat-progress-row > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-progress-row strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chat-progress-row span { flex: 0 0 auto; color: var(--progress-color); font-size: 11px; font-weight: 720; }
.chat-progress-track { height: 5px; margin-top: 10px; overflow: hidden; border-radius: 3px; background: #e9edf1; }
.chat-progress-track i { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: var(--progress-color); transition: width 420ms cubic-bezier(.2,.8,.2,1); }
.chat-progress-track.ongoing i { width: 100%; opacity: .34; background: repeating-linear-gradient(90deg, var(--progress-color) 0 18px, transparent 18px 25px); }
.heart-draw-secret-list { display: grid; gap: 12px; margin-top: 4px; padding: 15px 16px; border-radius: 7px; background: color-mix(in srgb, var(--surface-soft) 76%, #fff); }
.heart-draw-secret-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.heart-draw-secret-head > div { display: flex; align-items: baseline; gap: 9px; }
.heart-draw-secret-head strong { color: var(--ink); font-size: 12px; }
.heart-draw-secret-head span { color: var(--muted); font-size: 10px; }
.heart-draw-secret-head b { color: var(--accent-strong); font-size: 11px; font-weight: 720; }
.heart-draw-option-list { display: grid; }
.heart-draw-option-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.heart-draw-option-index { color: color-mix(in srgb, var(--accent) 70%, var(--muted)); font-size: 9px; font-variant-numeric: tabular-nums; }
.heart-draw-option-row > div { display: grid; min-width: 0; gap: 3px; }
.heart-draw-option-row strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.heart-draw-option-row > div span { color: var(--muted); font-size: 10px; }
.heart-draw-option-row button { padding: 5px 0 5px 8px; color: var(--muted); background: transparent; font-size: 10px; transition: color 160ms ease, transform 160ms ease; }
.heart-draw-option-row button:hover { color: var(--accent-strong); transform: translateX(-2px); }
.heart-draw-option-empty { padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); color: var(--muted); font-size: 11px; }
.heart-draw-privacy { color: var(--muted); font-size: 9px; line-height: 1.55; }
.chat-cancel-notice { padding: 15px 16px; border-radius: 7px; color: var(--ink-soft); background: color-mix(in srgb, var(--accent-soft) 55%, #fff); }
.chat-cancel-notice > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.chat-cancel-notice strong { color: var(--accent-strong); font-size: 12px; }
.chat-cancel-notice span { color: var(--ink); font-size: 11px; font-weight: 680; }
.chat-cancel-notice p { margin-top: 7px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.chat-activity-media { overflow: hidden; margin-top: 18px; border: 1px solid var(--line); border-radius: 7px; }
.chat-activity-media img { width: 100%; max-height: 260px; object-fit: cover; }
.chat-activity-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chat-activity-meta span { padding: 7px 9px; border-radius: 5px; color: var(--muted); background: var(--surface-soft); font-size: 10px; }
.chat-activity-actions:empty { display: none; }
.chat-activity-actions .interaction-actions, .chat-activity-actions .message-card-actions { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }

.web-gift-dialog { width: min(520px, calc(100% - 32px)); overflow: visible; background: transparent; }
.web-gift-sheet { position: relative; overflow: hidden; min-height: 580px; padding: 46px 42px 38px; border: 1px solid rgba(255,255,255,.75); border-radius: 8px; color: #fff; background: linear-gradient(155deg, #b83764 0%, #d9527d 58%, #b42f59 100%); box-shadow: 0 34px 90px rgba(101,24,52,.32); text-align: center; }
.web-gift-sheet::before { position: absolute; inset: 0; background: radial-gradient(circle at 50% 8%, rgba(255,255,255,.22), transparent 34%); content: ""; pointer-events: none; }
.web-gift-close { z-index: 8; color: rgba(255,255,255,.88); background: rgba(86,16,42,.22); }
.web-gift-ready, .web-gift-result { position: relative; z-index: 2; }
.web-gift-sender { display: flex; justify-content: center; min-height: 62px; }
.web-gift-ready > p:first-of-type, .web-gift-result > p:first-child { margin-top: 12px; color: rgba(255,255,255,.74); font-size: 11px; }
.web-gift-ready h2 { margin-top: 14px; font-size: 29px; }
.web-gift-message { min-height: 48px; margin: 12px auto 0; color: rgba(255,255,255,.86); font-size: 13px; line-height: 1.7; }
.web-gift-envelope { position: relative; width: 246px; height: 142px; margin: 20px auto 0; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; background: #a92852; box-shadow: 0 22px 50px rgba(82,17,42,.28); perspective: 700px; will-change: transform; }
.web-gift-envelope::before, .web-gift-envelope::after { position: absolute; z-index: 3; bottom: -64px; width: 190px; height: 150px; border: 1px solid rgba(255,255,255,.12); background: #c13b66; content: ""; transform: rotate(44deg); }
.web-gift-envelope::before { left: -82px; }
.web-gift-envelope::after { right: -82px; transform: rotate(-44deg); }
.web-gift-envelope i { position: absolute; z-index: 4; top: -72px; left: 36px; width: 174px; height: 174px; border: 1px solid rgba(255,255,255,.18); background: #dc5a82; transform: rotate(45deg); transform-origin: 50% 100%; will-change: transform; }
.web-gift-envelope b { position: absolute; z-index: 2; right: 24px; bottom: 22px; left: 24px; height: 92px; border-radius: 6px; background: #fff7f9; box-shadow: 0 8px 20px rgba(76,14,35,.18); transform: translateY(72px); will-change: transform; }
.web-gift-envelope span { position: absolute; z-index: 5; top: 62px; left: 50%; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: #f1b84a; box-shadow: 0 5px 14px rgba(82,17,42,.28); transform: translateX(-50%); }
.web-gift-open { position: relative; z-index: 7; display: grid; width: 68px; height: 68px; margin: -34px auto 0; place-items: center; border: 6px solid rgba(255,255,255,.2); border-radius: 50%; color: #8b2448; background: #f5c75d; box-shadow: 0 13px 28px rgba(76,14,35,.28); font-size: 22px; font-weight: 760; transition: transform 180ms ease, box-shadow 180ms ease; will-change: transform; }
.web-gift-open:hover { box-shadow: 0 18px 34px rgba(76,14,35,.34); transform: translateY(-2px) scale(1.04); }
.web-gift-open:disabled { opacity: 1; }
.web-gift-ready > small { display: block; margin-top: 13px; color: rgba(255,255,255,.72); font-size: 10px; }
.web-gift-result { display: grid; min-height: 490px; place-content: center; }
.web-gift-result[hidden] { display: none; }
.web-gift-result > div { display: flex; align-items: baseline; justify-content: center; margin-top: 24px; gap: 8px; }
.web-gift-result strong { font-size: 92px; line-height: .9; }
.web-gift-result span { font-size: 14px; }
.web-gift-result h2 { margin-top: 28px; font-size: 25px; }
.web-gift-result > p:not(:first-child) { max-width: 340px; margin: 12px auto 0; color: rgba(255,255,255,.76); font-size: 11px; line-height: 1.7; }
.web-gift-result .button { width: 150px; margin: 32px auto 0; color: #8b2448; background: #fff; }

@keyframes web-frame-spin { to { transform: rotate(360deg); } }
@keyframes web-frame-orbit { to { transform: rotate(-360deg); } }
@keyframes web-frame-breathe { 0%, 100% { transform: scale(.98); filter: brightness(.98); } 50% { transform: scale(1.035); filter: brightness(1.08); } }
@keyframes web-frame-soft-glow { 0%, 100% { filter: brightness(.98); } 50% { filter: brightness(1.12); } }
@keyframes web-frame-sparkle { 0%, 100% { opacity: .35; transform: scale(.96) rotate(0deg); } 50% { opacity: 1; transform: scale(1.08) rotate(16deg); } }
@keyframes web-frame-glint { 0%, 46% { left: -58%; opacity: 0; } 58% { opacity: .9; } 78%, 100% { left: 126%; opacity: 0; } }
@keyframes chat-light-scan { 0%, 14% { left: -35%; opacity: 0; } 28% { opacity: .82; } 50%, 100% { left: 112%; opacity: 0; } }
@keyframes gift-card-sheen { 0%, 56% { left: -36%; opacity: 0; } 68% { opacity: .72; } 88%, 100% { left: 118%; opacity: 0; } }

.shop-hero, .bag-hero { min-height: 540px; }
.shop-hero .hero-copy, .bag-hero .hero-copy { padding-top: 104px; }
.shop-hero .hero-copy h1, .bag-hero .hero-copy h1 { font-size: clamp(45px, 4.5vw, 67px); }
.commerce-content { padding: 84px 0 112px; }
.search-field { display: flex; align-items: center; gap: 9px; width: 220px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: var(--surface); font-size: 11px; }
.search-field > span { flex: 0 0 auto; white-space: nowrap; }
.search-field input { flex: 1; min-width: 0; width: auto; height: 38px; border: 0; outline: none; color: var(--ink); background: transparent; font-size: 13px; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.product-card { display: flex; min-height: 382px; overflow: hidden; flex-direction: column; border: 0; border-radius: 8px; background: var(--surface); box-shadow: var(--card-rest-shadow); transform-origin: center; transition: var(--card-float-transition); }
.product-cover { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 10; background: var(--surface-soft); }
.product-visual { display: grid; width: 100%; height: 100%; place-items: center; color: var(--accent-strong); background: linear-gradient(145deg, var(--accent-faint), #f4f6f8); font-size: 34px; font-weight: 760; }
.product-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 240ms cubic-bezier(.2,.72,.2,1); }
.product-visual > span { display: grid; width: 76px; height: 76px; place-items: center; border: 1px solid rgba(255,255,255,.82); border-radius: 50%; background: rgba(255,255,255,.7); box-shadow: 0 12px 30px rgba(30,39,53,.08); backdrop-filter: blur(12px); }
.product-badge { position: absolute; z-index: 2; padding: 6px 9px; border-radius: 5px; font-size: 10px; font-weight: 720; }
.product-badge.sale { top: 12px; left: 12px; color: #fff; background: var(--accent-strong); }
.product-badge.stock { right: 12px; bottom: 12px; color: var(--ink-soft); background: rgba(255,255,255,.88); backdrop-filter: blur(10px); }
.product-badge.stock.empty { color: var(--muted); }
.product-body { display: flex; min-height: 192px; flex: 1; flex-direction: column; padding: 20px; }
.product-card h3 { margin: 0; font-size: 20px; }
.product-card p { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.product-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.product-tags span { padding: 4px 7px; border-radius: 5px; color: var(--muted); background: var(--surface-soft); font-size: 9px; }
.product-tags .hot { color: var(--accent-strong); background: var(--accent-soft); }
.product-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 20px; }
.product-meta strong { font-size: 20px; }
.product-meta small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.stock-out { color: var(--muted); }

.capacity-panel { position: absolute; z-index: 3; right: max(44px, calc((100vw - 1180px) / 2)); bottom: 40px; width: 250px; padding: 20px; border: 1px solid rgba(255,255,255,.75); border-radius: 8px; background: rgba(255,255,255,.76); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px); }
.capacity-panel > div:first-child { display: flex; align-items: baseline; justify-content: space-between; }
.capacity-panel span, .capacity-panel small { color: var(--muted); font-size: 11px; }
.capacity-panel strong { font-size: 20px; }
.capacity-track { overflow: hidden; height: 5px; margin: 14px 0 10px; border-radius: 3px; background: #e3e6ea; }
.capacity-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); }
.bag-header-actions { display: flex; align-items: center; gap: 10px; }
.bag-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bag-item { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: 140px; padding: 18px; border: 0; border-radius: 8px; background: var(--surface); box-shadow: var(--card-rest-shadow); transform-origin: center; transition: var(--card-float-transition); }
.bag-mark { position: relative; display: grid; width: 92px; height: 92px; place-items: center; overflow: hidden; border-radius: 8px; color: var(--accent-strong); background: var(--accent-soft); font-size: 24px; font-weight: 760; }
.bag-mark img { width: 100%; height: 100%; object-fit: cover; transition: transform 240ms cubic-bezier(.2,.72,.2,1); }
.bag-mark > span:not(.bag-count-badge) { display: grid; width: 100%; height: 100%; place-items: center; transition: transform 240ms cubic-bezier(.2,.72,.2,1); }
.bag-count-badge { position: absolute; right: 6px; bottom: 6px; min-width: 27px; padding: 4px 6px; border-radius: 5px; color: #fff; background: rgba(20,23,27,.74); font-size: 9px; line-height: 1; text-align: center; backdrop-filter: blur(8px); }
.bag-item-copy { min-width: 0; }
.bag-item h3 { font-size: 17px; }
.bag-item p { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.bag-item-copy small { display: inline-block; margin-top: 11px; padding: 4px 7px; border-radius: 5px; color: var(--accent-strong); background: var(--accent-soft); font-size: 9px; }
.bag-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bag-actions .button { height: 36px; }
.bag-delete { padding: 6px 4px; color: var(--muted); background: transparent; font-size: 11px; }
.bag-delete:hover { color: var(--danger); }

@media (hover: hover) and (min-width: 761px) {
  .product-card:hover, .bag-item:hover { box-shadow: var(--card-float-shadow); transform: var(--card-float-transform); }
  .product-card:hover .product-visual img, .bag-item:hover .bag-mark img, .bag-item:hover .bag-mark > span:not(.bag-count-badge) { transform: scale(1.025); }
}

.profile-intro { text-align: center; }
.profile-intro h1 { margin-top: 14px; font-size: 54px; }
.profile-pair { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); align-items: stretch; margin-top: 62px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.profile-pair .person-summary { min-height: 220px; padding: 34px 54px 34px 0; }
.profile-pair .person-summary:first-child { border-right: 0; }
.profile-pair .person-summary:last-child { padding: 34px 0 34px 54px; }
.profile-link { position: relative; z-index: 2; display: grid; width: 56px; height: 56px; place-self: center; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--accent-strong); background: var(--page); box-shadow: 0 7px 22px rgba(30,39,53,.05); font-size: 13px; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.profile-footprints { margin-top: 72px; }
.footprints-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.footprints-header h2 { margin-top: 8px; font-size: 32px; }
.footprints-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.footprints-header-actions > p { max-width: 330px; color: var(--muted); font-size: 12px; line-height: 1.65; text-align: right; }
.footprint-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.footprint-group { min-width: 0; padding: 30px; border-right: 1px solid var(--line); }
.footprint-group:first-child { padding-left: 0; }
.footprint-group:last-child { padding-right: 0; border-right: 0; }
.footprint-group h3 { margin-bottom: 18px; font-size: 15px; }
.footprint-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.footprint-metric { min-height: 88px; padding: 17px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.footprint-group.points .footprint-metric { background: color-mix(in srgb, var(--accent-soft) 46%, #fff); }
.footprint-group.commerce .footprint-metric { background: #eef8fa; }
.footprint-group.records .footprint-metric { background: #fff6ef; }
.footprint-metric span { display: block; color: var(--muted); font-size: 10px; }
.footprint-metric strong { display: block; margin-top: 10px; font-size: 24px; font-variant-numeric: tabular-nums; }
.settings-section { margin-top: 88px; }
.settings-list { border-top: 1px solid var(--line); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 88px; border-bottom: 1px solid var(--line); }
.setting-row strong { display: block; font-size: 14px; }
.setting-row span { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
.setting-value { margin: 0 !important; color: var(--ink) !important; font-weight: 650; }
.setting-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.setting-actions .button { height: 36px; }
.profile-setting-row { min-height: 112px; }
.profile-setting-summary { display: flex; align-items: center; min-width: 0; gap: 17px; }
.profile-setting-row .profile-settings-avatar { display: grid; flex: 0 0 72px; width: 72px; height: 72px; margin: 0; place-items: center; color: inherit; font-size: inherit; }
.profile-setting-row .profile-settings-avatar .chat-avatar-frame { width: 66px; height: 66px; margin: 0; place-items: center; color: inherit; font-size: inherit; }
.profile-setting-row .profile-settings-avatar .chat-avatar-frame .avatar { position: absolute; inset: 6px; display: grid; width: 54px; height: 54px; margin: 0; place-items: center; color: #fff; }
.profile-setting-row .profile-settings-avatar .chat-avatar-frame-medium > small { right: -1px; bottom: -1px; }
.profile-setting-summary > div { min-width: 0; }
.profile-setting-summary strong { overflow: hidden; max-width: 260px; text-overflow: ellipsis; white-space: nowrap; }
.profile-setting-summary > div > span { white-space: nowrap; }
.profile-setting-actions { flex-wrap: wrap; }
.account-operation-row { margin-top: 18px; border-top: 1px solid var(--line); }
.danger-button { color: var(--danger); }
.appeal-record-list { display: grid; max-height: 248px; gap: 8px; overflow-y: auto; }
.appeal-record { display: grid; width: 100%; gap: 7px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--surface); text-align: left; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.appeal-record > span { display: flex; align-items: center; gap: 11px; }
.appeal-record strong { min-width: 42px; color: var(--danger); font-size: 18px; font-variant-numeric: tabular-nums; }
.appeal-record b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.appeal-record small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.appeal-record.active { border-color: color-mix(in srgb, var(--accent) 56%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 34%, #fff); box-shadow: 0 6px 18px var(--accent-faint); }
.appeal-quick-reasons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.appeal-quick-reasons button { padding: 7px 10px; border-radius: 5px; color: var(--muted); background: var(--surface-soft); font-size: 10px; transition: color 180ms ease, background 180ms ease, transform 180ms ease; }
.appeal-note { margin-top: 10px; color: var(--muted); font-size: 10px; line-height: 1.6; }
@media (hover: hover) and (pointer: fine) {
  .profile-pair:hover .profile-link { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); box-shadow: 0 9px 26px var(--accent-faint); transform: translateY(-2px); }
  .footprint-metric:hover { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); box-shadow: 0 10px 26px rgba(30,39,53,.06); transform: translateY(-3px); }
  .settings-list .setting-row { transition: background 180ms ease, transform 180ms ease; }
  .settings-list .setting-row:hover { background: color-mix(in srgb, var(--accent-soft) 22%, transparent); transform: translateX(2px); }
  .appeal-record:hover { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); transform: translateY(-1px); }
  .appeal-quick-reasons button:hover { color: var(--accent-strong); background: var(--accent-soft); transform: translateY(-1px); }
}

dialog { width: min(440px, calc(100% - 32px)); padding: 0; overflow: visible; border: 0; border-radius: 8px; background: transparent; }
dialog::backdrop { background: rgba(14, 17, 21, 0.35); opacity: 1; backdrop-filter: blur(7px); transition: opacity 220ms ease; }
dialog.is-opening::backdrop, dialog.is-closing::backdrop { opacity: 0; }
dialog:is(.is-opening, .is-closing) > :is(.dialog-sheet, .web-gift-sheet) { will-change: transform, opacity; }
.dialog-sheet { position: relative; padding: 34px; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.dialog-sheet [hidden] { display: none !important; }
.dialog-sheet h2 { margin: 8px 0 26px; font-size: 27px; }
.dialog-sheet label { display: block; margin-top: 17px; }
.dialog-sheet label > span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.dialog-sheet input, .dialog-sheet select { width: 100%; height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: #fafbfc; }
.dialog-sheet .button-wide { margin-top: 25px; }
.dialog-close { position: absolute; top: 16px; right: 16px; display: grid; width: 30px; height: 30px; padding: 0; place-items: center; border-radius: 50%; color: var(--muted); background: var(--surface-soft); font-size: 0; line-height: 0; transition: color 160ms ease, background 160ms ease, box-shadow 180ms ease, transform 180ms ease; }
.dialog-close::before, .dialog-close::after, .live-notification-close::before, .live-notification-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 1.5px; border-radius: 1px; background: currentColor; }
.dialog-close::before, .live-notification-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.dialog-close::after, .live-notification-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.dialog-close:hover { color: var(--ink-soft); background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface-soft)); box-shadow: 0 6px 16px rgba(30,39,53,.08); transform: translateY(-1px); }
.dialog-close:active { box-shadow: none; transform: scale(.94); }
.segmented-control { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 7px; background: var(--surface-soft); }
.segmented-control button { height: 36px; border-radius: 5px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 680; transition: color 160ms ease, background 160ms ease, box-shadow 180ms ease, transform 160ms ease; }
.segmented-control button:active { transform: scale(.98); }
.segmented-control button.active { color: var(--accent-strong); background: #fff; box-shadow: 0 3px 10px rgba(30,39,53,.07); }
.segmented-control.four { grid-template-columns: repeat(4, 1fr); }
.segmented-control.three { grid-template-columns: repeat(3, 1fr); }
.tool-dialog { width: min(540px, calc(100% - 32px)); }
.wide-dialog { width: min(700px, calc(100% - 32px)); }
.interaction-records { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.interaction-records-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.interaction-records-head h3 { margin-top: 4px; font-size: 18px; }
.interaction-records-head > span { color: var(--muted); font-size: 12px; }
.interaction-record-list { display: grid; gap: 10px; }
.interaction-record { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.interaction-record-top { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.interaction-record h4 { font-size: 15px; }
.interaction-record p { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.interaction-status { flex: 0 0 auto; padding: 4px 7px; border-radius: 5px; color: var(--accent-strong); background: var(--accent-soft); font-size: 10px; font-weight: 700; }
.interaction-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 12px; color: var(--muted); font-size: 11px; }
.draw-options { display: grid; gap: 6px; margin-top: 12px; }
.draw-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 6px; background: var(--surface-muted); font-size: 12px; }
.draw-option button { color: var(--muted); background: transparent; font-size: 11px; }
.interaction-record-list .empty-state { min-height: 120px; }
.dialog-manager { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.toggle-control { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.toggle-control input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.toggle-control > span { position: relative; width: 38px; height: 22px; border-radius: 12px; background: #c9cdd3; transition: background .2s ease; }
.toggle-control > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .2s ease; }
.toggle-control input:checked + span { background: var(--accent); }
.toggle-control input:checked + span::after { transform: translateX(16px); }
.toggle-control b { min-width: 42px; color: var(--muted); font-size: 12px; font-weight: 600; }
.tool-sheet { max-height: min(820px, calc(100vh - 40px)); overflow-y: auto; overscroll-behavior: contain; }
.tool-sheet textarea { width: 100%; min-height: 90px; padding: 12px 13px; resize: vertical; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: #fafbfc; line-height: 1.55; }
.tool-sheet fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.tool-sheet [hidden] { display: none !important; }
.interaction-balance { display: flex; align-items: baseline; justify-content: space-between; margin: -12px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.interaction-balance span { color: var(--muted); font-size: 11px; }
.interaction-balance strong { color: var(--accent-strong); font-size: 17px; }
.interaction-panel { display: none; padding-top: 4px !important; }
.interaction-panel.active { display: block; }
.interaction-panel > .segmented-control { margin-top: 16px; }
.form-note, .inline-notice { margin-top: 16px; padding: 12px 14px; border-left: 2px solid var(--accent); color: var(--muted); background: var(--accent-faint); font-size: 11px; line-height: 1.65; }
.field-hint { display: block; min-height: 16px; margin-top: 7px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.recurring-settings { margin-top: 17px; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.recurring-settings label:first-of-type { margin-top: 13px; }
.schedule-card { display: grid; gap: 16px; }
.schedule-card .schedule-start { margin-top: 0; }
.schedule-card .setting-line, .schedule-card .checkbox-row { margin-top: 0; }
.picker-field { margin-top: 17px; }
.picker-field-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.deadline-picker { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(150px, .85fr); overflow: hidden; border: 1px solid #d8dde5; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(24, 31, 43, .04); }
.deadline-picker .native-picker { height: 62px; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.deadline-picker .native-picker + .native-picker { border-left: 1px solid var(--line); }
.deadline-picker .date-picker::before, .deadline-picker .time-picker::before { position: absolute; top: 10px; left: 16px; color: var(--muted); font-size: 9px; font-weight: 700; line-height: 1; }
.deadline-picker .date-picker::before { content: "日期"; }
.deadline-picker .time-picker::before { content: "时间"; }
.deadline-picker .native-picker output { padding-top: 15px; }
.native-picker { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 54px; padding: 0 11px 0 16px; overflow: hidden; border: 1px solid #d8dde5; border-radius: 8px; cursor: pointer; background: #fbfcfd; box-shadow: 0 1px 2px rgba(24, 31, 43, .035); outline: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.dialog-sheet label > .native-picker { display: flex; margin-bottom: 0; }
.native-picker:hover { border-color: color-mix(in srgb, var(--accent) 48%, #d8dde5); background: #fff; }
.native-picker:focus-visible, .native-picker:focus-within { z-index: 1; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-faint); }
.native-picker input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.native-picker output { min-width: 0; overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 680; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.date-picker output { font-variant-numeric: tabular-nums; }
.time-picker output { font-size: 17px; font-variant-numeric: tabular-nums; }
.picker-mark { position: relative; flex: 0 0 32px; width: 32px; height: 32px; margin-left: 10px; border-radius: 6px; color: var(--accent-strong); background: var(--accent-soft); }
.calendar-mark::before { content: ""; position: absolute; top: 9px; left: 9px; width: 14px; height: 13px; border: 1.5px solid currentColor; border-radius: 3px; }
.calendar-mark::after { content: ""; position: absolute; top: 13px; left: 9px; width: 14px; border-top: 1.5px solid currentColor; }
.clock-mark::before { content: ""; position: absolute; top: 8px; left: 8px; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 50%; }
.clock-mark::after { content: ""; position: absolute; top: 12px; left: 15px; width: 4px; height: 6px; border-bottom: 1.5px solid currentColor; border-left: 1.5px solid currentColor; }
.time-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.time-range label { min-width: 0; margin-top: 0 !important; }
.time-range > .range-separator { padding-bottom: 19px; color: var(--muted); font-size: 11px; font-style: normal; }
.agreement-schedule { display: grid; gap: 14px; }
.agreement-image-field { margin-top: 17px; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 !important; }
.agreement-image-upload { display: flex; align-items: center; gap: 16px; min-height: 112px; padding: 14px; border: 1px dashed #ccd2da; border-radius: 8px; background: #fbfcfd; }
.agreement-image-upload img { flex: 0 0 112px; width: 112px; height: 84px; border-radius: 7px; object-fit: cover; }
.agreement-image-copy { min-width: 0; }
.agreement-image-copy strong { display: block; font-size: 13px; }
.agreement-image-copy p { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.agreement-image-copy > div { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.agreement-image-copy .button { height: 34px; padding: 0 13px; font-size: 11px; }
.agreement-record-image { width: 100%; max-height: 210px; margin-top: 13px; border-radius: 7px; object-fit: cover; }
.agreement-decline-reason { margin-top: 11px !important; padding: 9px 11px; border-left: 2px solid var(--accent); background: var(--accent-faint); color: var(--ink-soft) !important; }
.image-remove { color: #b64b5d; background: transparent; font-size: 11px; }
.rule-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -10px 0 4px; padding: 12px 0 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.rule-intro b { padding: 4px 7px; border-radius: 5px; color: var(--accent-strong); background: var(--accent-soft); font-size: 10px; }
.rule-principles { display: grid; grid-template-columns: 1fr 1fr; margin-top: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rule-principles > div { min-width: 0; padding: 14px 12px 14px 0; }
.rule-principles > div:nth-child(odd) { border-right: 1px solid var(--line); }
.rule-principles > div:nth-child(even) { padding-right: 0; padding-left: 12px; }
.rule-principles > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.rule-principles strong, .rule-principles span { display: block; }
.rule-principles strong { font-size: 11px; }
.rule-principles span { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.goods-dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding-right: 38px; }
.goods-dialog-heading h2 { margin-bottom: 7px; }
.goods-dialog-heading p:last-child { color: var(--muted); font-size: 10px; line-height: 1.55; }
.goods-heading-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.goods-heading-actions > span { padding: 5px 8px; border-radius: 5px; color: var(--accent-strong); background: var(--accent-soft); font-size: 10px; }
.dialog-title-row { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding-right: 38px; }
.dialog-title-row h2 { margin-top: 5px; }
.dialog-title-row > span { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.dialog-history-link { flex: 0 0 auto; padding: 7px 0; color: var(--accent-strong); background: transparent; font-size: 11px; font-weight: 720; }
.dialog-history-link:hover { color: var(--accent); }
.goods-icon-field { margin-top: 17px; }
.goods-icon-editor { display: grid; grid-template-columns: 64px minmax(100px, 1fr) auto auto; align-items: center; gap: 10px; }
.goods-icon-editor > input { min-width: 0; }
.goods-icon-editor .button { height: 40px; padding: 0 12px; font-size: 11px; }
.goods-icon-preview { display: grid; width: 64px; height: 64px; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; color: var(--accent-strong); background: var(--accent-soft); font-size: 15px; font-weight: 750; }
.goods-icon-preview img { width: 100%; height: 100%; object-fit: cover; }
.goods-image-status, .goods-delete-note { margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.goods-use-setting { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 58px; margin-top: 17px; padding: 0 2px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 11px; }
.goods-form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.goods-form-actions .button { height: 44px; }
.managed-good-main { display: flex; align-items: center; min-width: 0; gap: 11px; }
.managed-good-mark { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; overflow: hidden; border-radius: 7px; color: var(--accent-strong); background: var(--accent-soft); font-size: 11px; font-weight: 750; }
.managed-good-mark img { width: 100%; height: 100%; object-fit: cover; }
#recordsDialog { width: min(920px, calc(100% - 32px)); }
.records-sheet { width: 100%; }
.record-search { margin-top: 24px; }
.record-search.compact-record-search { margin-top: 0; }
.compact-record-search input { height: 40px; background: var(--surface-soft); }
.record-filter-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.record-filter-list.compact { margin-top: 12px; }
.record-filter-list button { min-height: 32px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: #fff; font-size: 10px; }
.record-filter-list button.active { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.record-results { display: grid; gap: 0; margin-top: 18px; border-top: 1px solid var(--line); }
.record-result { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 88px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.record-result time { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.record-result-main { min-width: 0; }
.record-result-main strong { display: block; font-size: 13px; }
.record-result-main p { margin-top: 5px; overflow-wrap: anywhere; color: var(--muted); font-size: 11px; line-height: 1.55; }
.record-result-main small { display: block; margin-top: 5px; color: var(--accent-strong); font-size: 9px; }
.record-result-side { display: flex; align-items: center; gap: 8px; }
.record-result-amount { min-width: 58px; color: var(--ink-soft); font-size: 12px; font-weight: 750; text-align: right; }
.record-result-actions { display: flex; gap: 5px; }
.record-result-actions button { padding: 5px 7px; color: var(--muted); background: transparent; font-size: 9px; }
.record-result-actions button:hover { color: var(--accent-strong); }
#confirmInputField { margin-top: 18px; }
.date-time-dialog { width: min(392px, calc(100% - 32px)); }
.date-time-dialog::backdrop { background: rgba(14, 17, 21, .28); backdrop-filter: blur(4px); }
.picker-sheet { padding: 24px; }
.picker-dialog-head { display: flex; align-items: start; justify-content: space-between; min-height: 58px; padding-right: 38px; }
.picker-dialog-head h2 { margin: 5px 0 0; font-size: 22px; }
.picker-dialog-head .dialog-close { top: 20px; right: 20px; }
.calendar-panel { margin-top: 18px; }
.calendar-toolbar { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; margin-bottom: 18px; }
.calendar-toolbar strong { text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; }
.calendar-toolbar button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: #fff; font-size: 24px; line-height: 1; }
.calendar-toolbar button:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-faint); }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.calendar-weekdays { margin-bottom: 7px; color: var(--muted); font-size: 10px; text-align: center; }
.calendar-grid { min-height: 253px; }
.calendar-grid button, .calendar-grid i { display: grid; width: 100%; aspect-ratio: 1; place-items: center; border-radius: 50%; font-size: 12px; font-style: normal; font-variant-numeric: tabular-nums; }
.calendar-grid button { color: var(--ink-soft); background: transparent; }
.calendar-grid button:hover { color: var(--accent-strong); background: var(--accent-faint); }
.calendar-grid button.today { box-shadow: inset 0 0 0 1px var(--accent); }
.calendar-grid button.selected { color: #fff; background: var(--accent-strong); box-shadow: none; }
.calendar-grid button:disabled { color: #c6cad0; cursor: not-allowed; background: transparent; }
.time-panel { padding: 28px 0 10px; }
.time-stepper { display: grid; grid-template-columns: 1fr 22px 1fr; align-items: center; gap: 10px; }
.time-stepper > b { color: var(--ink); font-size: 28px; text-align: center; }
.time-unit { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: center; }
.time-unit button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 7px; color: var(--accent-strong); background: var(--accent-faint); font-size: 19px; }
.time-unit button { justify-self: center; }
.time-unit input { width: 100%; height: 72px; padding: 0; border: 1px solid #d8dde5; border-radius: 8px; color: var(--ink); background: #fff; font-size: 34px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.time-unit span { color: var(--muted); font-size: 10px; text-align: center; }
.picker-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.picker-actions .button { height: 42px; }
.schedule-note { color: var(--muted); font-size: 11px; line-height: 1.65; }
.window-note { margin-top: -8px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.setting-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 11px; }
.mini-segments { display: flex; gap: 3px; padding: 3px; border-radius: 6px; background: #fff; }
.mini-segments button { height: 30px; padding: 0 10px; border-radius: 4px; color: var(--muted); background: transparent; font-size: 10px; }
.mini-segments button.active { color: #fff; background: var(--accent-strong); }
.form-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkbox-row { display: flex !important; align-items: center; gap: 10px; }
.checkbox-row input { width: 18px; height: 18px; }
.checkbox-row span { margin: 0 !important; color: var(--ink-soft) !important; }
.managed-goods { margin-top: 30px; border-top: 1px solid var(--line); }
.managed-good { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 15px; min-height: 66px; border-bottom: 1px solid var(--line); }
.managed-good strong { display: block; font-size: 13px; }
.managed-good span { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.managed-good-actions { display: flex; gap: 8px; }
.managed-good-actions button { padding: 6px; color: var(--accent-strong); background: transparent; font-size: 11px; }
.compact-dialog .dialog-description { color: var(--muted); font-size: 13px; line-height: 1.7; white-space: pre-line; }
.confirm-media { display: grid; width: 100%; aspect-ratio: 16 / 9; margin: -8px 0 20px; place-items: center; overflow: hidden; border-radius: 8px; color: var(--accent-strong); background: linear-gradient(145deg, var(--accent-faint), #f4f6f8); font-size: 30px; font-weight: 760; }
.confirm-media[hidden] { display: none; }
.confirm-media img { width: 100%; height: 100%; object-fit: cover; }
.confirm-media > span { display: grid; width: 68px; height: 68px; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(255,255,255,.72); }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.bag-delete-sheet { text-align: center; }
.bag-delete-mark { display: grid; width: 52px; height: 52px; margin: 0 auto 20px; place-items: center; border-radius: 50%; color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, #fff); font-size: 15px; font-weight: 750; }
.bag-delete-sheet h2 { margin-bottom: 12px; }
.bag-delete-actions { grid-template-columns: repeat(3, 1fr); }
.bag-delete-actions.single { grid-template-columns: repeat(2, 1fr); }
.bag-delete-actions .button { min-width: 0; padding: 0 10px; }
.login-dialog { width: min(470px, calc(100% - 32px)); }
.login-sheet { padding: 42px; text-align: center; }
.login-sheet h2 { margin: 12px 0 13px; font-size: 29px; line-height: 1.25; }
.login-logo { width: 54px; height: 54px; margin: 0 auto 22px; border-radius: 13px; box-shadow: 0 12px 28px var(--accent-faint); }
.login-instruction { max-width: 340px; margin: 0 auto 26px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.auth-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 24px 0 6px; padding: 3px; border-radius: 7px; background: var(--surface-soft); }
.auth-tabs button { height: 36px; border-radius: 5px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 680; }
.auth-tabs button.active { color: var(--accent-strong); background: #fff; box-shadow: 0 3px 10px rgba(30,39,53,.07); }
.auth-context { margin: 10px 0 14px; padding: 10px 12px; border-left: 2px solid var(--accent); color: var(--ink-soft); background: var(--accent-faint); font-size: 11px; line-height: 1.55; text-align: left; }
.auth-context[hidden] { display: none; }
.auth-panel { display: none; min-width: 0; margin: 0; padding: 0; border: 0; }
.auth-panel.active { display: block; }
.auth-panel [hidden] { display: none; }
.register-row { display: grid; grid-template-columns: 1.25fr .75fr; gap: 10px; }
.login-sheet label { text-align: left; }
.login-sheet input { height: 52px; font-size: 15px; font-weight: 500; letter-spacing: 0; text-align: left; text-transform: none; }
.login-sheet input[name="linkCode"], .login-sheet input[name="resetLinkCode"] { font-size: 20px; font-weight: 720; letter-spacing: 3px; text-align: center; text-transform: uppercase; }
.login-sheet input[readonly] { color: var(--ink); background: var(--surface-soft); cursor: default; }
#resetAccount { text-transform: none; }
.login-sheet select { height: 52px; }
.auth-panel .login-instruction { margin: 20px auto 10px; }
.reset-again-button { margin-top: 4px; padding: 6px 10px; color: var(--accent-strong); background: transparent; font-size: 11px; }
.login-error { min-height: 18px; margin-top: 10px; color: var(--danger); font-size: 11px; }
.login-sheet .button-wide { margin-top: 8px; }
.preview-button { margin-top: 16px; padding: 5px; color: var(--muted); background: transparent; font-size: 12px; }
.account-dialog { width: min(470px, calc(100% - 32px)); }
.account-dialog-sheet h2 { margin: 8px 0 10px; font-size: 25px; }
.account-dialog-sheet label { display: block; margin-top: 17px; }
.account-dialog-sheet label > span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.account-dialog-sheet input { width: 100%; height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: #fafbfc; font-size: 14px; }
.account-dialog-sheet .dialog-description { margin-bottom: 6px; }
.gender-dialog-sheet { padding: 32px; }
.gender-dialog-sheet h2 { margin-bottom: 8px; }
.profile-gender-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 24px 0 0; padding: 0; border: 0; }
.profile-gender-options legend { grid-column: 1 / -1; margin-bottom: 0; padding: 0; color: var(--muted); font-size: 11px; }
.account-dialog-sheet .profile-gender-options .gender-choice { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; align-items: center; min-height: 74px; gap: 10px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; background: #fff; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.profile-gender-options input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.profile-gender-options .gender-choice-swatch { display: block; width: 36px; height: 36px; margin: 0; border: 5px solid color-mix(in srgb, var(--choice-color) 18%, #fff); border-radius: 50%; background: var(--choice-color); box-shadow: inset 0 0 0 1px rgba(255,255,255,.72); }
.gender-choice.female { --choice-color: var(--female); }
.gender-choice.male { --choice-color: var(--male); }
.profile-gender-options .gender-choice-copy { display: grid; min-width: 0; height: auto; margin: 0; place-items: initial; border-radius: 0; color: var(--ink); }
.profile-gender-options .gender-choice-copy strong { font-size: 13px; }
.profile-gender-options .gender-choice-copy small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.profile-gender-options .gender-choice > i { display: grid; width: 16px; height: 16px; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.profile-gender-options .gender-choice > i::after { width: 8px; height: 8px; border-radius: 50%; background: var(--choice-color); content: ""; opacity: 0; transform: scale(.5); transition: opacity 160ms ease, transform 160ms ease; }
.profile-gender-options .gender-choice:has(input:checked) { border-color: color-mix(in srgb, var(--choice-color) 58%, var(--line)); box-shadow: 0 8px 22px color-mix(in srgb, var(--choice-color) 12%, transparent); }
.profile-gender-options .gender-choice:has(input:checked) > i { border-color: var(--choice-color); }
.profile-gender-options .gender-choice:has(input:checked) > i::after { opacity: 1; transform: scale(1); }
.profile-gender-options .gender-choice:has(input:focus-visible) { outline: 3px solid var(--accent-faint); outline-offset: 2px; }
.gender-approval-note { margin-top: 14px; padding: 10px 12px; border-left: 2px solid var(--accent); color: var(--muted); background: var(--accent-faint); font-size: 10px; line-height: 1.6; }
@media (hover: hover) and (pointer: fine) {
  .profile-gender-options .gender-choice:hover { border-color: color-mix(in srgb, var(--choice-color) 42%, var(--line)); transform: translateY(-1px); }
}
.toast { position: fixed; z-index: 90; bottom: 28px; left: 50%; visibility: hidden; min-width: 180px; padding: 13px 18px; border-radius: 7px; color: #fff; background: rgba(20,23,27,.92); box-shadow: var(--shadow); font-size: 12px; text-align: center; opacity: 0; transform: translateX(-50%); }
.live-notification { --notice-accent: var(--female); --notice-soft: var(--female-soft); position: fixed; z-index: 80; right: 24px; bottom: 24px; display: grid; grid-template-columns: minmax(0, 1fr) 34px; width: min(370px, calc(100vw - 32px)); overflow: hidden; border: 1px solid color-mix(in srgb, var(--notice-accent) 24%, var(--line)); border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: 0 22px 60px color-mix(in srgb, var(--notice-accent) 14%, rgba(30,39,53,.15)); backdrop-filter: blur(18px); }
.live-notification[hidden] { display: none; }
.live-notification.sender-male { --notice-accent: var(--male); --notice-soft: var(--male-soft); }
.live-notification.sender-female { --notice-accent: var(--female); --notice-soft: var(--female-soft); }
.live-notification-main { display: grid; grid-template-columns: 9px minmax(0, 1fr); align-items: start; gap: 12px; min-width: 0; padding: 17px 12px 16px 17px; color: var(--ink); background: transparent; text-align: left; }
.live-notification-mark { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--notice-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--notice-accent) 12%, transparent); }
.live-notification-copy { display: grid; min-width: 0; gap: 4px; }
.live-notification-copy small { overflow: hidden; color: var(--notice-accent); font-size: 9px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.live-notification-copy strong { overflow: hidden; font-size: 14px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.live-notification-copy > span { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.live-notification-copy em { margin-top: 3px; color: var(--notice-accent); font-size: 10px; font-style: normal; font-weight: 720; }
.live-notification-close { position: relative; display: grid; align-self: start; width: 28px; height: 28px; margin: 8px 6px 0 0; padding: 0; place-items: center; border-radius: 50%; color: var(--muted); background: transparent; font-size: 0; line-height: 0; }
.live-notification-main:hover { background: color-mix(in srgb, var(--notice-soft) 38%, transparent); }
.live-notification-close:hover { color: var(--ink); background: var(--surface-soft); }

@media (max-width: 1000px) {
  .header-inner { grid-template-columns: 170px 1fr 100px; width: calc(100% - 30px); }
  .header-profile > span:first-child { display: none; }
  .main-nav button { padding: 0 11px; }
  .chat-pinned-item { flex-basis: min(270px, 42vw); }
  .hero-band { min-height: 570px; }
  .hero-copy { width: calc(100% - 48px); }
  .content-wrap, .narrow-wrap, .profile-wrap { width: calc(100% - 48px); }
  .marketing-capabilities { grid-template-columns: repeat(3, 1fr); }
  .marketing-capabilities article:nth-child(3) { border-right: 0; }
  .marketing-capabilities article:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .marketing-capabilities article:nth-child(4) { grid-column: 1 / 2; }
  .stats-layout { gap: 32px; }
  .weekly-story { grid-template-columns: 1fr 190px 1fr; }
  .weekly-person { gap: 12px; }
  .weekly-person .avatar-large { width: 68px; height: 68px; }
  .person-summary { padding-right: 36px; }
  .person-summary:last-child { padding-left: 36px; }
  .person-growth { grid-template-columns: minmax(90px, 1fr); }
  .person-growth small { display: none; }
  .management-workbench { grid-template-columns: 1fr; }
  .management-primary { border-right: 0; border-bottom: 1px solid var(--line); }
  .management-settings { padding: 0; }
  .management-settings > header, .management-settings > button { padding-right: 18px; padding-left: 18px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-pair .person-summary { padding-right: 36px; }
  .profile-pair .person-summary:last-child { padding-left: 36px; }
  .footprint-groups { grid-template-columns: 1fr; }
  .footprint-group, .footprint-group:first-child, .footprint-group:last-child { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .footprint-group:last-child { border-bottom: 0; }
}

@media (max-width: 1180px) {
  .section-index {
    top: auto;
    right: auto;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 50%;
    grid-auto-flow: column;
    grid-template-rows: 46px;
    grid-auto-columns: minmax(48px, 1fr);
    width: min(390px, calc(100% - 36px));
    height: 46px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translateX(-50%);
  }
  .section-index::after { position: absolute; z-index: 0; top: 17px; right: 0; left: 0; height: 23px; background: linear-gradient(90deg, transparent, rgba(246,247,249,.62) 14%, rgba(246,247,249,.72) 86%, transparent); box-shadow: 0 5px 12px rgba(47,58,72,.04); content: ""; pointer-events: none; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  .section-index::before { z-index: 1; top: 31px; right: 24px; bottom: auto; left: 24px; width: auto; height: 1px; border: 0; border-radius: 0; background: linear-gradient(90deg, transparent, rgba(171,181,193,.32) 12%, rgba(255,255,255,.9) 50%, rgba(171,181,193,.32) 88%, transparent); box-shadow: none; filter: none; transform: none; }
  .section-index button { z-index: 2; width: auto; min-width: 0; min-height: 46px; }
  .section-index-dot { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); }
  .section-index[data-section-count] .section-index-dot { margin-left: 0; }
  .section-index button.active .section-index-dot { transform: translateX(-50%) scale(1.08); }
  .section-index-label { top: 0; right: auto; left: 50%; visibility: hidden; padding: 3px 7px; border: 0; color: var(--muted); background: rgba(246,247,249,.86); box-shadow: none; opacity: 0; transform: translate(-50%, 4px); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .section-index button.active .section-index-label, .section-index button:focus-visible .section-index-label { visibility: visible; color: var(--ink-soft); opacity: 1; transform: translate(-50%, 0); }
  .has-section-index #page-home.active, .has-section-index #page-profile.active { padding-bottom: 68px; }
  .has-section-index .live-notification { bottom: 76px; }
  .has-section-index .toast { bottom: 78px; }
}

@media (max-width: 720px) {
  .chat-progress-grid { grid-template-columns: 1fr; gap: 14px; }
  .chat-cancel-notice > div { align-items: flex-start; flex-direction: column; gap: 4px; }
  .live-notification { right: 14px; bottom: 14px; width: calc(100vw - 28px); }
  .site-header { height: 106px; }
  .header-inner { grid-template-columns: 1fr auto; grid-template-rows: 51px 55px; width: calc(100% - 28px); }
  .main-nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: space-between; border-top: 1px solid var(--line); }
  .main-nav button { flex: 1; padding: 0 5px; }
  .main-nav button::after { right: 20%; left: 20%; }
  .header-profile { grid-column: 2; grid-row: 1; }
  main, .page { min-height: calc(100vh - 106px); }
  .home-hero, .home-focus, .relationship-overview, .management-strip, .stats-section, .recent-section, .profile-intro, .profile-footprints, .settings-section { scroll-margin-top: 126px; }
  .section-index { bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100% - 32px); }
  .section-index button { font-size: 9px; }
  .has-section-index .live-notification { bottom: 70px; }
  .has-section-index .toast { bottom: 72px; }
  .chat-route main, #page-chat.active { height: calc(100dvh - 106px); min-height: 0; }
  .marketing-hero, .marketing-feature, .marketing-profile { scroll-margin-top: 106px; }
  .marketing-hero { min-height: 690px; }
  .marketing-hero > img { object-position: 64% center; }
  .marketing-hero-shade { background: linear-gradient(180deg, rgba(247,249,251,.97) 0%, rgba(247,249,251,.85) 52%, rgba(247,249,251,.18) 84%); }
  .marketing-hero-inner { align-items: flex-start; width: calc(100% - 32px); min-height: 690px; padding: 64px 0 150px; }
  .marketing-hero-copy h1 { font-size: 56px; }
  .marketing-lead { max-width: 360px; font-size: 15px; }
  .marketing-actions { align-items: stretch; flex-direction: column; width: 100%; }
  .marketing-actions .button { width: 100%; }
  .marketing-snapshot { right: 16px; bottom: 18px; left: 16px; width: auto; padding: 15px; }
  .snapshot-people { gap: 8px; }
  .snapshot-people > b { text-align: center; }
  .marketing-section { padding: 84px 0; }
  .marketing-section-heading { width: calc(100% - 32px); text-align: left; }
  .marketing-section-heading h2, .marketing-feature-copy h2 { font-size: 35px; }
  .marketing-capabilities { grid-template-columns: 1fr; width: calc(100% - 32px); margin-top: 46px; }
  .marketing-capabilities article, .marketing-capabilities article:nth-child(3) { min-height: 0; padding: 22px 4px; border-right: 0; border-bottom: 1px solid var(--line); }
  .marketing-capabilities article:last-child { border-bottom: 0; }
  .marketing-capabilities article:nth-child(4) { grid-column: auto; }
  .marketing-capabilities strong { margin-top: 14px; }
  .marketing-feature-inner, .marketing-commerce, .marketing-bag { grid-template-columns: 1fr; width: calc(100% - 32px); min-height: 0; padding: 82px 0; gap: 44px; }
  .marketing-chat-demo { padding: 20px; }
  .marketing-commerce .marketing-feature-media { order: 2; }
  .marketing-feature-media { aspect-ratio: 1 / .82; }
  .marketing-profile { padding: 84px 0; }
  .marketing-profile-inner { width: calc(100% - 32px); }
  .marketing-profile .marketing-section-heading { width: 100%; }
  .marketing-stats { grid-template-columns: 1fr 1fr; margin-top: 46px; }
  .marketing-stats div { padding: 20px 4px; }
  .marketing-stats div:nth-child(2) { border-right: 0; }
  .marketing-stats div:nth-child(-n+2) { border-bottom: 1px solid #363d47; }
  .marketing-cta { grid-template-columns: 54px 1fr; width: calc(100% - 32px); min-height: 0; padding: 72px 0; gap: 18px; }
  .marketing-cta > img { width: 50px; height: 50px; border-radius: 12px; }
  .marketing-cta h2 { font-size: 27px; }
  .marketing-cta .marketing-actions { grid-column: 1 / -1; }
  .content-wrap, .narrow-wrap, .profile-wrap, .hero-copy { width: calc(100% - 32px); }
  .hero-band { min-height: 590px; }
  .hero-band > img { object-position: 64% center; }
  .hero-band::after { background: linear-gradient(180deg, rgba(247,249,251,.95) 0%, rgba(247,249,251,.77) 48%, rgba(247,249,251,.08) 78%); }
  .hero-copy { padding-top: 60px; }
  .hero-copy h1, .shop-hero .hero-copy h1, .bag-hero .hero-copy h1 { font-size: 42px; }
  .hero-copy > p:not(.eyebrow) { max-width: 330px; font-size: 15px; }
  .hero-status, .balance-pill, .capacity-panel { right: 16px; bottom: 18px; }
  .relationship-overview { padding-top: 48px; }
  .home-focus { padding-top: 48px; }
  .home-focus-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .home-focus-heading h2 { font-size: 27px; }
  .home-focus-heading-side { width: 100%; justify-content: space-between; }
  .home-focus-heading-side > p { line-height: 1.5; }
  .home-focus-controls { display: none; }
  .home-focus-rail { width: 100vw; margin: -24px -16px -40px; padding: 32px 28px 56px; scroll-padding-inline: 28px; }
  .home-focus-card { flex-basis: min(222px, 70vw); min-height: 142px; }
  .home-focus:not([hidden]) + .relationship-overview { padding-top: 62px; }
  .relationship-overview-heading, .management-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .relationship-overview-heading h2, .management-heading h2 { font-size: 27px; }
  .relationship-overview-heading > p, .management-heading > p { max-width: 100%; text-align: left; }
  .couple-overview { grid-template-columns: 1fr; min-height: 0; }
  .person-summary, .person-summary:last-child { justify-content: flex-start; min-height: 154px; padding: 25px 0; }
  .person-summary:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .person-summary:last-child { flex-direction: row-reverse; text-align: right; }
  .person-summary .person-info > strong { font-size: 18px; }
  .person-growth { grid-template-columns: minmax(90px, 190px) auto; }
  .person-growth small { display: block; }
  .relationship-center { display: none; }
  .section-block { padding-top: 70px; }
  .section-header { align-items: flex-start; flex-direction: column; }
  .section-header h2 { font-size: 27px; }
  .management-primary { grid-template-columns: 1fr; }
  .management-primary > button { min-height: 164px; padding: 24px 0; }
  .management-primary > button + button { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .stat-card { min-height: 112px; padding: 24px 14px 24px 0; }
  .stat-card:not(:last-child)::after { right: 10px; }
  .stat-card strong b { font-size: 32px; }
  .weekly-story { grid-template-columns: 1fr; gap: 32px; padding: 30px 0; }
  .weekly-person, .weekly-person.partner { justify-content: center; flex-direction: row; text-align: left; }
  .weekly-message { grid-row: 2; }
  .weekly-message::before, .weekly-message::after { display: none; }
  .activity-feed { grid-template-columns: 22px minmax(0, 1fr); }
  .activity-feed-main { padding-left: 5px; }
  .activity-feed-head { grid-template-columns: minmax(54px, 72px) auto minmax(0, 1fr) auto; gap: 7px; }
  .activity-feed-role, .activity-feed-meta { padding-left: 0; }
  .activity-feed-amount { max-width: 58px; }
  #page-chat .chat-page { width: calc(100% - 24px); }
  .chat-page { gap: 8px; padding: 8px 0 10px; }
  .chat-title { min-height: 42px; gap: 10px; }
  .chat-title > div:last-child { gap: 0; }
  .chat-title h1 { font-size: 22px; }
  .chat-title .chat-avatar-frame-medium { width: 42px; height: 42px; }
  .chat-title .chat-avatar-frame-medium .avatar { width: 34px; height: 34px; font-size: 10px; }
  .chat-title .chat-avatar-frame-medium > small { min-width: 24px; height: 13px; font-size: 7px; line-height: 11px; }
  #chatSubtitle { display: none; }
  .chat-pinned-list { max-height: none; overflow-x: auto; overflow-y: hidden; padding: 8px 14px 16px; scroll-padding-inline: 14px; }
  .chat-pinned-item { flex-basis: min(260px, 76vw); }
  .chat-pinned-head > span:first-child { display: grid; gap: 2px; }
  .message-stream { min-height: 0; padding: 20px 14px 24px; }
  .message-bubble, .message-card { width: auto; min-width: 0; max-width: 78%; }
  .system-message-card, .system-message-card:has(.system-message-action) { width: fit-content; min-width: 0; max-width: 92%; }
  .message-gift { width: 78%; }
  .message-card-footer { align-items: flex-end; }
  .message-card-footer > span { white-space: normal; }
  .chat-compose-actions { overflow-x: auto; scrollbar-width: none; }
  .chat-compose-actions::-webkit-scrollbar { display: none; }
  .chat-compose-actions button { flex: 0 0 auto; }
  .commerce-content { padding-top: 62px; }
  .product-grid, .bag-grid { grid-template-columns: 1fr; }
  .search-field { width: 100%; }
  .bag-header-actions { width: 100%; }
  .bag-header-actions .search-field { flex: 1; }
  .bag-item { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; }
  .bag-mark { width: 80px; height: 80px; }
  .bag-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; }
  .profile-wrap { padding-top: 60px; }
  .profile-intro h1 { font-size: 39px; }
  .profile-pair { grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); }
  .profile-pair .person-summary, .profile-pair .person-summary:last-child { align-items: center; justify-content: center; flex-direction: column; gap: 13px; min-height: 260px; padding: 28px 7px; text-align: center; }
  .profile-pair .person-summary .person-info > strong { overflow: visible; font-size: 15px; white-space: normal; }
  .profile-pair .person-summary .person-meta, .profile-pair .person-summary:last-child .person-meta { align-items: center; justify-content: center; flex-direction: column; gap: 4px; }
  .profile-pair .person-summary .person-meta span + span { padding-left: 0; border-left: 0; }
  .profile-pair .person-summary .person-growth { grid-template-columns: minmax(72px, 110px); justify-content: center; }
  .profile-link { width: 44px; height: 44px; font-size: 11px; }
  .profile-footprints { margin-top: 56px; }
  .footprints-header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .footprints-header-actions { align-items: flex-start; flex-direction: column; gap: 8px; }
  .footprints-header-actions > p { text-align: left; }
  .footprint-group { padding: 24px 0; }
  .footprint-metric { min-height: 80px; }
  .setting-row { align-items: flex-start; flex-direction: column; padding: 22px 0; }
  .setting-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .login-sheet { padding: 34px 24px; }
  .form-columns, .register-row { grid-template-columns: 1fr; }
  #bountyRewardSourceNote { margin-top: 4px; line-height: 1.7; }
  .deadline-picker { grid-template-columns: 1fr; }
  .deadline-picker .native-picker + .native-picker { border-top: 1px solid var(--line); border-left: 0; }
  .agreement-image-upload { align-items: stretch; flex-direction: column; }
  .agreement-image-upload img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .rule-principles { grid-template-columns: 1fr; }
  .rule-principles > div, .rule-principles > div:nth-child(even) { padding: 13px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .rule-principles > div:last-child { border-bottom: 0; }
  .goods-icon-editor { grid-template-columns: 64px 1fr; }
  .goods-icon-editor .button, .goods-icon-editor .image-remove { width: 100%; }
  .goods-use-setting { align-items: flex-start; flex-direction: column; padding: 14px 0; }
  .dialog-title-row, .goods-dialog-heading { align-items: flex-start; flex-direction: column; padding-right: 32px; }
  .goods-heading-actions { width: 100%; justify-content: space-between; }
  .record-result { grid-template-columns: 1fr; gap: 7px; }
  .record-result-side { justify-content: space-between; }
  .record-result-amount { text-align: left; }
  .time-range { grid-template-columns: 1fr; align-items: stretch; }
  .time-range > .range-separator { padding: 0; text-align: center; }
  .picker-sheet { padding: 22px 18px; }
  .calendar-grid { min-height: 238px; }
  .time-stepper { gap: 4px; }
}

@media (max-width: 380px) {
  .home-hero .hero-copy h1 { font-size: 38px; }
}

@media (max-width: 340px) {
  .home-hero .hero-copy h1 { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .weekly-rank.crown { animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .message-card-effects { display: none; }
}