/* Three "feelings" for the same widgets, switched by html[data-style]. */

/* ── Shared atmosphere layer ───────────────────────────────────────────── */
.atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: none; overflow: hidden; }
.atmos i { position: absolute; border-radius: 50%; will-change: transform; display: none; }
.atmos .blurred { display: none; }
html[data-style="aurora"] .atmos i { display: block; }
html[data-style="photo"] .atmos .blurred { display: block; }
.hero-photo { display: none; }
.style-switch { position: fixed; z-index: 30; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 84px); transform: translateX(-50%); display: flex; gap: 2px; padding: 3px; border-radius: 18px; background: rgba(0,0,0,.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.style-switch button { height: 30px; padding: 0 11px; border-radius: 15px; color: rgba(255,255,255,.75); font-size: 12.5px; font-weight: 600; }
.style-switch button.on { background: #fff; color: #111; }
#app.pushed-under ~ .style-switch, #app.sheeted ~ .style-switch, #app.editing-on ~ .style-switch { opacity: 0; pointer-events: none; }

/* ── 氛围光: a soft, slowly moving light in the colours of their mood; glass widgets ── */
html[data-style="aurora"] #app { background: var(--au-base); }
html[data-style="aurora"] .atmos { display: block; }
html[data-style="aurora"] .atmos i { width: 120vw; height: 120vw; animation: drift 22s ease-in-out infinite alternate; }
html[data-style="aurora"] .atmos i:nth-child(1) { left: -45vw; top: -40vw; background: radial-gradient(closest-side, var(--a1), transparent); }
html[data-style="aurora"] .atmos i:nth-child(2) { right: -50vw; top: -10vw; background: radial-gradient(closest-side, var(--a2), transparent); animation-duration: 26s; animation-direction: alternate-reverse; }
html[data-style="aurora"] .atmos i:nth-child(3) { left: -30vw; top: 55vh; background: radial-gradient(closest-side, var(--a3), transparent); animation-duration: 30s; }
html[data-style="aurora"] .atmos i:nth-child(4) { right: -40vw; top: 95vh; background: radial-gradient(closest-side, var(--a4), transparent); animation-duration: 24s; animation-direction: alternate-reverse; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(10vw, 6vh) scale(1.12); } 100% { transform: translate(-8vw, 10vh) scale(.94); } }
html[data-style="aurora"] { --au-base: #EEE7F7; --a1: #C6B4F7; --a2: #F8C2D6; --a3: #AFC9F8; --a4: #FFD9BE; --glass-w: rgba(255,255,255,.5); --glass-w-line: rgba(255,255,255,.75); }
html[data-style="aurora"][data-mood="sunny"] { --au-base: #FBF0DD; --a1: #FFD26A; --a2: #FFB08A; --a3: #FFE7A8; --a4: #F9A9A2; }
@media (prefers-color-scheme: dark) { html[data-style="aurora"]:not(.light) { --au-base: #0B0914; --a1: #4E3A9C; --a2: #7A2E5C; --a3: #22488F; --a4: #6E3F25; --glass-w: rgba(28,24,40,.42); --glass-w-line: rgba(255,255,255,.12); } }
html[data-style="aurora"].dark { --au-base: #0B0914; --a1: #4E3A9C; --a2: #7A2E5C; --a3: #22488F; --a4: #6E3F25; --glass-w: rgba(28,24,40,.42); --glass-w-line: rgba(255,255,255,.12); }
html[data-style="aurora"] .view { background: transparent; }
html[data-style="aurora"] .w { background: var(--glass-w); backdrop-filter: blur(26px) saturate(1.6); -webkit-backdrop-filter: blur(26px) saturate(1.6); box-shadow: inset 0 0 0 .5px var(--glass-w-line), 0 10px 30px -18px rgba(60,30,90,.35); }
html[data-style="aurora"] .w.mem { box-shadow: none; }
html[data-style="aurora"] .partner { height: auto; padding: 6px 4px 22px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; color: var(--ink); overflow: visible; }
html[data-style="aurora"] .partner .sky, html[data-style="aurora"] .partner .glyph { display: none; }
html[data-style="aurora"] .partner .feel { margin-top: 18px; font-size: 64px; letter-spacing: .04em; }
html[data-style="aurora"] .partner .note { font-size: 17px; opacity: .8; }
html[data-style="aurora"] .partner .pbar { position: relative; left: 0; right: 0; bottom: 0; margin-top: 18px; }
html[data-style="aurora"] .partner .pb, html[data-style="aurora"] .partner .on { background: var(--glass-w); box-shadow: inset 0 0 0 .5px var(--glass-w-line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
html[data-style="aurora"] .partner .pb { width: auto; padding: 0 14px 0 12px; border-radius: 20px; gap: 6px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; }
html[data-style="aurora"] .partner .pb::after { content: attr(aria-label); }
html[data-style="aurora"] .compact { background: color-mix(in srgb, var(--au-base) 60%, transparent); }
html[data-style="aurora"] .feed, html[data-style="aurora"] .ans { background: rgba(255,255,255,.45); }
html[data-style="aurora"].dark .feed, html[data-style="aurora"].dark .ans { background: rgba(255,255,255,.1); }
@media (prefers-color-scheme: dark) { html[data-style="aurora"]:not(.light) .feed, html[data-style="aurora"]:not(.light) .ans { background: rgba(255,255,255,.1); } }
html[data-style="aurora"] .edit-btn { background: var(--glass-w); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* ── 照片: their photo is the top of home; everything below floats on its colours ── */
html[data-style="photo"] #app { background: #1A1512; }
html[data-style="photo"] .atmos { display: block; }
html[data-style="photo"] .atmos .blurred { position: absolute; inset: -60px; filter: blur(46px) saturate(1.5) brightness(.72); transform: scale(1.2); }
html[data-style="photo"] .view { background: transparent; color: #fff; --ink: #fff; --ink-2: rgba(255,255,255,.72); --ink-3: rgba(255,255,255,.5); --fill: rgba(255,255,255,.14); --sep: rgba(255,255,255,.18); }
html[data-style="photo"] #v-home { padding-top: 0; }
html[data-style="photo"] .hero-photo { display: block; position: relative; height: 64vh; min-height: 470px; margin: 0 -16px 16px; color: #fff; }
html[data-style="photo"] .hero-photo > .photo { position: absolute; inset: 0; }
html[data-style="photo"] .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 22%, transparent 45%, rgba(26,21,18,.0) 60%, rgba(26,21,18,.65) 88%, rgba(26,21,18,0) 100%); }
html[data-style="photo"] .hero-photo .over { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 30px; }
html[data-style="photo"] .hero-photo .top { position: absolute; z-index: 2; top: calc(env(safe-area-inset-top) + 10px); left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; }
html[data-style="photo"] .hero-photo .top small { font-size: 13px; font-weight: 600; opacity: .9; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
html[data-style="photo"] .hero-photo .who { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
html[data-style="photo"] .hero-photo .who i { width: 7px; height: 7px; border-radius: 50%; background: #4CD964; box-shadow: 0 0 0 3px rgba(76,217,100,.3); }
html[data-style="photo"] .hero-photo .feel { margin-top: 6px; font-size: 60px; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
html[data-style="photo"] .hero-photo .note { font-size: 17px; opacity: .95; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
html[data-style="photo"] .hero-photo .acts2 { display: flex; gap: 8px; margin-top: 16px; }
html[data-style="photo"] .hero-photo .acts2 button { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 15px 0 13px; border-radius: 19px; background: rgba(255,255,255,.22); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; font-size: 14px; font-weight: 600; }
html[data-style="photo"] .hero-photo .acts2 svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-style="photo"] .hello, html[data-style="photo"] .partner { display: none; }
html[data-style="photo"] .w { background: rgba(255,255,255,.13); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16); color: #fff; }
html[data-style="photo"] .lab { color: rgba(255,255,255,.85) !important; }
html[data-style="photo"] .msg .dot { box-shadow: none; }
html[data-style="photo"] .compact { background: rgba(30,24,20,.5); color: #fff; }
html[data-style="photo"] .tabbar, html[data-style="photo"] .chatbtn { --glass: rgba(40,34,30,.55); --glass-line: rgba(255,255,255,.14); --ink: #fff; --ink-2: rgba(255,255,255,.65); color: #fff; }
html[data-style="photo"] .edit-btn { background: rgba(255,255,255,.14); color: #fff; }
html[data-style="photo"] .ans input { color: #fff; }
html[data-style="photo"] .ans button { background: #fff; } html[data-style="photo"] .ans svg { stroke: #111; }

/* ── 缤纷: every widget its own candy colour and a little glossy object ── */
html[data-style="candy"] #app { background: #FFF8F3; }
@media (prefers-color-scheme: dark) { html[data-style="candy"]:not(.light) #app { background: #0F0C0E; } }
html[data-style="candy"].dark #app { background: #0F0C0E; }
html[data-style="candy"] .big { font-family: ui-rounded, -apple-system, "PingFang SC", sans-serif; font-weight: 800; letter-spacing: -.02em; }
html[data-style="candy"] .w { --c1: #fff; --c2: #fff; --ci: #1C1B1A; background: linear-gradient(160deg, var(--c1), var(--c2)); color: var(--ci); }
html[data-style="candy"] .w .lab, html[data-style="candy"] .w .cap, html[data-style="candy"] .w .unit, html[data-style="candy"] .w .cap b { color: color-mix(in srgb, var(--ci) 72%, transparent) !important; }
html[data-style="candy"] .w[data-id="days"] { --c1: #FFE3EA; --c2: #FFC0D0; --ci: #7A1D3B; }
html[data-style="candy"] .w[data-id="count"] { --c1: #FFF4C9; --c2: #FFDF85; --ci: #6A4600; }
html[data-style="candy"] .w[data-id="mood"] { --c1: #E1F1FF; --c2: #BCDFFF; --ci: #0E3C6B; }
html[data-style="candy"] .w[data-id="pet"] { --c1: #DFF8EA; --c2: #B9EBD0; --ci: #0F4D2E; }
html[data-style="candy"] .w[data-id="q"] { --c1: #F1E8FF; --c2: #DCCAFF; --ci: #3B1D7A; }
html[data-style="candy"] .w[data-id="play"] { --c1: #FFE8DA; --c2: #FFCBAE; --ci: #6E2B0B; }
html[data-style="candy"] .w[data-id="jar"] { --c1: #E4F7E9; --c2: #C3EBCF; --ci: #114A25; }
html[data-style="candy"] .w[data-id="msg"] { --c1: #FFFFFF; --c2: #FFFFFF; --ci: #1C1B1A; }
@media (prefers-color-scheme: dark) { html[data-style="candy"]:not(.light) .w[data-id="days"] { --c1: #5A1E33; --c2: #3A1222; --ci: #FFD3DF; } html[data-style="candy"]:not(.light) .w[data-id="count"] { --c1: #5A4510; --c2: #3A2B08; --ci: #FFE7A6; } html[data-style="candy"]:not(.light) .w[data-id="mood"] { --c1: #163A5E; --c2: #0E2640; --ci: #CFE7FF; } html[data-style="candy"]:not(.light) .w[data-id="pet"] { --c1: #164A31; --c2: #0D2F1F; --ci: #C9F3DB; } html[data-style="candy"]:not(.light) .w[data-id="q"] { --c1: #3A2766; --c2: #241742; --ci: #E4D6FF; } html[data-style="candy"]:not(.light) .w[data-id="play"] { --c1: #5E2C15; --c2: #3C1B0C; --ci: #FFD9C2; } html[data-style="candy"]:not(.light) .w[data-id="jar"] { --c1: #17462A; --c2: #0E2E1B; --ci: #CDF1D8; } html[data-style="candy"]:not(.light) .w[data-id="msg"] { --c1: #1F1C1E; --c2: #1F1C1E; --ci: #F5F2F4; } }
html[data-style="candy"].dark .w[data-id="days"] { --c1: #5A1E33; --c2: #3A1222; --ci: #FFD3DF; } html[data-style="candy"].dark .w[data-id="count"] { --c1: #5A4510; --c2: #3A2B08; --ci: #FFE7A6; } html[data-style="candy"].dark .w[data-id="mood"] { --c1: #163A5E; --c2: #0E2640; --ci: #CFE7FF; } html[data-style="candy"].dark .w[data-id="pet"] { --c1: #164A31; --c2: #0D2F1F; --ci: #C9F3DB; } html[data-style="candy"].dark .w[data-id="q"] { --c1: #3A2766; --c2: #241742; --ci: #E4D6FF; } html[data-style="candy"].dark .w[data-id="play"] { --c1: #5E2C15; --c2: #3C1B0C; --ci: #FFD9C2; } html[data-style="candy"].dark .w[data-id="jar"] { --c1: #17462A; --c2: #0E2E1B; --ci: #CDF1D8; } html[data-style="candy"].dark .w[data-id="msg"] { --c1: #1F1C1E; --c2: #1F1C1E; --ci: #F5F2F4; }
html[data-style="candy"] .partner .sky.m-tired { background: radial-gradient(80% 70% at 90% 0%, #FFD8EC, transparent 60%), linear-gradient(160deg, #C9B6FF, #9E86F2); }
html[data-style="candy"] .partner { color: #fff; }
html[data-style="candy"] .partner .glyph { display: none; }
html[data-style="candy"] .partner .pb, html[data-style="candy"] .partner .on { background: rgba(255,255,255,.25); }
html[data-style="candy"] .toy { display: block; }
.toy { display: none; position: absolute; right: 10px; top: 34px; width: 74px; height: 74px; filter: drop-shadow(0 10px 12px rgba(0,0,0,.18)); animation: bob 4s ease-in-out infinite; }
.partner .toy { right: 14px; top: 40px; width: 120px; height: 120px; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-3deg); } }
html[data-style="candy"] .mood .face { display: none; }
html[data-style="candy"] .pet .art { width: 116px; right: -10px; }
html[data-style="candy"] .feed { background: rgba(255,255,255,.6); color: var(--ci); }
html[data-style="candy"] .ans { background: rgba(255,255,255,.55); }
html[data-style="candy"] .ans input { color: var(--ci); }
html[data-style="candy"] .ans button { background: var(--ci); }
html[data-style="candy"] .ttl { font-family: ui-rounded, -apple-system, "PingFang SC", sans-serif; font-weight: 800; }
html[data-style="candy"] .q p { font-family: ui-rounded, -apple-system, "PingFang SC", sans-serif; font-weight: 700; }
html[data-style="candy"] .hello h1 { font-family: ui-rounded, -apple-system, "PingFang SC", sans-serif; font-weight: 800; font-size: 30px; }
html[data-style="candy"] .partner .feel { font-family: ui-rounded, -apple-system, "PingFang SC", sans-serif; font-weight: 800; font-size: 44px; }
html[data-style="candy"] .tab.on { color: #FF5C8A; }
@media (prefers-reduced-motion: reduce) { .atmos i, .toy { animation: none !important; } }

html[data-style="candy"] .w.mem { --ci: #fff; }
html[data-style="candy"] .w.mem .ttl, html[data-style="candy"] .w.mem small { color: #fff; }
html[data-style="candy"] .w[data-id="q"] .toy { top: 10px; right: 10px; width: 52px; height: 52px; }
html[data-style="candy"] .q p { padding-right: 48px; }