:root {
  --paper: #efeee9;
  --paper-deep: #dfdfd7;
  --paper-light: #faf9f5;
  --ink: #202b28;
  --ink-2: #58635f;
  --ink-3: #8d948f;
  --pine: #244940;
  --pine-2: #55776e;
  --cinnabar: #9e5548;
  --cinnabar-deep: #743b33;
  --gold: #a99268;
  --gold-light: #d2c39f;
  --line: rgba(32, 43, 40, .115);
  --canvas: #d3d2cc;
  --shadow-sm: 0 8px 24px rgba(23, 38, 35, .08);
  --shadow-lg: 0 22px 60px rgba(15, 32, 27, .18);
  --safe-bottom: max(10px, env(safe-area-inset-bottom));
  color-scheme: light;
}

/* Default: one coherent system with a distinct atmosphere for each product area. */
html[data-theme="recommended"] {
  --paper:#eef0ed; --paper-deep:#dde2de; --paper-light:#fafaf6;
  --ink:#202b30; --ink-2:#52646a; --ink-3:#879497;
  --pine:#293f49; --pine-2:#71858a; --cinnabar:#a46e5e; --cinnabar-deep:#7d5045;
  --gold:#a68a5c; --gold-light:#d4c7a7; --line:rgba(32,43,48,.12); --canvas:#d2d5d2;
}
html[data-theme="recommended"][data-current-page="practice"] {
  --paper:#e5eae5; --paper-deep:#d4ddd7; --paper-light:#f8f8f2;
  --ink:#283634; --ink-2:#586b66; --ink-3:#87938f;
  --pine:#527573; --pine-2:#9aafa8; --cinnabar:#96705b; --cinnabar-deep:#745244;
  --gold:#a88863; --gold-light:#d7c8ac; --line:rgba(40,54,52,.12); --canvas:#d0d8d2;
}
html[data-theme="recommended"][data-current-page="blessing"] {
  --paper:#f0e7e3; --paper-deep:#e1d3ce; --paper-light:#fcf7f4;
  --ink:#362a28; --ink-2:#6f5d59; --ink-3:#9a8984;
  --pine:#7e514b; --pine-2:#b27e73; --cinnabar:#9b5d52; --cinnabar-deep:#70413a;
  --gold:#a78961; --gold-light:#d8c5a6; --line:rgba(54,42,40,.12); --canvas:#dbd0cc;
}
html[data-theme="recommended"][data-current-page="discover"] {
  --paper:#e9e9e5; --paper-deep:#d9dce0; --paper-light:#f7f6f1;
  --ink:#1d2831; --ink-2:#52626f; --ink-3:#879098;
  --pine:#293e52; --pine-2:#64778a; --cinnabar:#986456; --cinnabar-deep:#70483f;
  --gold:#aa8a55; --gold-light:#d5c39e; --line:rgba(29,40,49,.12); --canvas:#cfd2d3;
}
html[data-theme="recommended"][data-current-page="parallel"] {
  --paper:#eceeed; --paper-deep:#d9dfdf; --paper-light:#f8f7f2;
  --ink:#1c2930; --ink-2:#58666c; --ink-3:#899499;
  --pine:#283f4c; --pine-2:#647984; --cinnabar:#9d675d; --cinnabar-deep:#704a43;
  --gold:#a58c64; --gold-light:#d5c7a9; --line:rgba(28,41,48,.12); --canvas:#cfd3d2;
}

html[data-theme="moon-white"] {
  --paper:#eef0ed; --paper-deep:#dde2de; --paper-light:#fafaf6; --ink:#202b30; --ink-2:#52646a; --ink-3:#879497;
  --pine:#293f49; --pine-2:#71858a; --cinnabar:#a46e5e; --cinnabar-deep:#7d5045; --gold:#a68a5c; --gold-light:#d4c7a7; --line:rgba(32,43,48,.12); --canvas:#d2d5d2;
}
html[data-theme="ru-kiln"] {
  --paper:#e5eae5; --paper-deep:#d4ddd7; --paper-light:#f8f8f2; --ink:#283634; --ink-2:#586b66; --ink-3:#87938f;
  --pine:#527573; --pine-2:#9aafa8; --cinnabar:#96705b; --cinnabar-deep:#745244; --gold:#a88863; --gold-light:#d7c8ac; --line:rgba(40,54,52,.12); --canvas:#d0d8d2;
}
html[data-theme="indigo-bronze"] {
  --paper:#e9e9e5; --paper-deep:#d9dce0; --paper-light:#f7f6f1; --ink:#1d2831; --ink-2:#52626f; --ink-3:#879098;
  --pine:#293e52; --pine-2:#64778a; --cinnabar:#986456; --cinnabar-deep:#70483f; --gold:#aa8a55; --gold-light:#d5c39e; --line:rgba(29,40,49,.12); --canvas:#cfd2d3;
}
html[data-theme="lavender-mist"] {
  --paper:#eceaf0; --paper-deep:#ddd9e2; --paper-light:#f9f8fa; --ink:#2d2933; --ink-2:#625c6b; --ink-3:#918a98;
  --pine:#554d65; --pine-2:#898194; --cinnabar:#a87669; --cinnabar-deep:#7b534b; --gold:#a58b69; --gold-light:#d7c8ae; --line:rgba(45,41,51,.12); --canvas:#d5d2d9;
}
html[data-theme="rock-tea"] {
  --paper:#ebe6de; --paper-deep:#ddd5ca; --paper-light:#f9f6f0; --ink:#302b27; --ink-2:#665f58; --ink-3:#938a82;
  --pine:#625950; --pine-2:#968778; --cinnabar:#9c5948; --cinnabar-deep:#713d32; --gold:#a58a60; --gold-light:#d6c4a5; --line:rgba(48,43,39,.12); --canvas:#d6d0c8;
}
html[data-theme="danxia-lotus"] {
  --paper:#f0e7e3; --paper-deep:#e1d3ce; --paper-light:#fcf7f4; --ink:#362a28; --ink-2:#6f5d59; --ink-3:#9a8984;
  --pine:#7e514b; --pine-2:#b27e73; --cinnabar:#9b5d52; --cinnabar-deep:#70413a; --gold:#a78961; --gold-light:#d8c5a6; --line:rgba(54,42,40,.12); --canvas:#dbd0cc;
}
html[data-theme="ink-silver"] {
  --paper:#e8e9e7; --paper-deep:#d7dad7; --paper-light:#f8f8f6; --ink:#222728; --ink-2:#596162; --ink-3:#858c8b;
  --pine:#363d3f; --pine-2:#7c8584; --cinnabar:#8d6458; --cinnabar-deep:#64463e; --gold:#9b8060; --gold-light:#d1c3ad; --line:rgba(34,39,40,.12); --canvas:#cfd2cf;
}
html[data-theme="night-mountain"] {
  --paper:#151b1e; --paper-deep:#2b3538; --paper-light:#21292c; --ink:#ece9df; --ink-2:#c0c6c3; --ink-3:#929d9b;
  --pine:#72898d; --pine-2:#9ba9a7; --cinnabar:#b77b68; --cinnabar-deep:#825447; --gold:#b69762; --gold-light:#d4c395; --line:rgba(236,233,223,.13); --canvas:#0d1214;
  --shadow-sm:0 8px 24px rgba(0,0,0,.24); --shadow-lg:0 22px 60px rgba(0,0,0,.38); color-scheme:dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { min-width: 320px; background: #d3d2cc; color: var(--ink); font-family: "Noto Serif SC", "Songti SC", "STSong", Georgia, serif; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100svh; min-height: 100dvh; background: radial-gradient(circle at 15% 3%, color-mix(in srgb,var(--paper-light) 88%,transparent), transparent 29%), radial-gradient(circle at 85% 90%, color-mix(in srgb,var(--pine-2) 15%,transparent), transparent 27%), var(--canvas); transition: background-color .35s ease,color .35s ease; }
body.is-locked { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; }
button, [role="button"] { touch-action: manipulation; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(184,146,83,.55); outline-offset: 3px; }
.bottom-nav > button:focus-visible { outline: none; }
.bottom-nav > button:focus-visible > span { outline: 2px solid rgba(169,146,104,.72); outline-offset: 3px; }
img { display: block; max-width: 100%; }
svg { display: block; width: 1em; height: 1em; fill: none; stroke: currentColor; }
[hidden] { display: none !important; }
.icon-sprite { position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden; pointer-events: none; }

.app-shell { width: min(100%, 480px); min-height: 100svh; min-height: 100dvh; margin: 0 auto; position: relative; overflow: clip; background-color: var(--paper); background-image: radial-gradient(circle at 17% 23%, rgba(23,61,52,.055) 0 1px, transparent 1.35px), radial-gradient(circle at 79% 61%, rgba(168,71,53,.04) 0 .8px, transparent 1.2px), repeating-linear-gradient(95deg, rgba(94,76,48,.018) 0 1px, transparent 1px 8px); background-size: 43px 47px, 67px 71px, 100% 12px; box-shadow: 0 0 70px rgba(22,38,35,.18); }
.app-shell::before { content: ""; position: fixed; z-index: 0; left: 50%; top: 0; bottom: 0; width: min(100%,480px); transform: translateX(-50%); pointer-events: none; background-image: url("assets/pattern-clouds.svg"), url("assets/pattern-clouds.svg"), radial-gradient(ellipse at 88% 45%, rgba(46,97,82,.12), transparent 31%), radial-gradient(ellipse at 6% 78%, rgba(184,146,83,.1), transparent 28%); background-position: center 96px, center calc(100% - 96px), center, center; background-size: 720px 80px, 620px 69px, 100% 100%, 100% 100%; background-repeat: no-repeat; opacity: .13; }
.app-shell::after { content: ""; position: fixed; z-index: 70; left: 50%; top: 0; width: min(100%,480px); height: 1px; transform: translateX(-50%); background: rgba(255,255,255,.75); pointer-events: none; }

.launch-screen { position: fixed; z-index: 200; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; color: var(--paper-light); background: var(--pine); transition: opacity .4s ease, visibility .4s ease; animation: launch-release .45s ease .45s forwards; pointer-events: none; }
.launch-screen.is-gone { opacity: 0; visibility: hidden; }
.launch-screen p { margin: 0; font-size: 15px; letter-spacing: .18em; opacity: .78; }
@keyframes launch-release { to { opacity: 0; visibility: hidden; } }
.launch-mark { width: 84px; height: 84px; display: grid; place-items: center; position: relative; border: 1px solid rgba(255,253,247,.45); animation: launch-breathe 1.8s ease-in-out infinite; }
.launch-mark::before, .launch-mark::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(223,200,148,.25); transform: rotate(45deg); }
.launch-mark::after { inset: 18px; transform: rotate(0); }
.launch-mark span { position: relative; z-index: 2; font-size: 30px; }
@keyframes launch-breathe { 50% { transform: scale(1.045); box-shadow: 0 0 35px rgba(223,200,148,.16); } }

.app-header { position: sticky; z-index: 30; top: 0; min-height: 84px; padding: max(14px,env(safe-area-inset-top)) 18px 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(180deg,color-mix(in srgb,var(--paper) 98%,transparent) 72%,color-mix(in srgb,var(--paper) 84%,transparent)); backdrop-filter: blur(18px) saturate(1.2); transition: transform .3s ease, background .3s ease; }
.app-header::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; background: var(--line); opacity: 0; transition: opacity .2s; }
.app-header.is-scrolled::after { opacity: 1; }
.date-line { margin: 0 0 3px; color: var(--cinnabar); font-family: system-ui,sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .13em; }
.app-header h1 { margin: 0; font-size: clamp(18px,5vw,23px); font-weight: 500; letter-spacing: .04em; line-height: 1.3; }
.header-actions { display: flex; align-items: center; gap: 7px; }
.header-points { min-width: 58px; height: 40px; padding: 5px 10px; display: grid; grid-template-columns:auto auto; align-items:center; gap:5px; border:1px solid var(--line); border-radius:999px; color:var(--pine); background:color-mix(in srgb,var(--paper-light) 74%,transparent); cursor:pointer; }
.header-points span { font-family:system-ui,sans-serif; font-size:8px; }
.header-points strong { font-family:system-ui,sans-serif; font-size:12px; }
.round-action, .avatar-button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; }
.round-action { background: rgba(255,253,247,.72); border: 1px solid var(--line); }
.round-action[aria-pressed="true"] { color: white; background: var(--pine); }
.round-action svg { width: 19px; height: 19px; }
.avatar-button { color: var(--paper-light); background: linear-gradient(145deg,var(--pine-2),var(--pine)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.17); font-size: 16px; }

main { position: relative; z-index: 1; padding: 0 14px calc(106px + var(--safe-bottom)); }
.app-page { animation: page-enter .35s cubic-bezier(.2,.75,.25,1) both; }
.app-page.is-leaving { animation: page-leave .16s ease both; }
@keyframes page-enter { from { opacity: 0; transform: translateY(8px) scale(.995); } }
@keyframes page-leave { to { opacity: 0; transform: translateY(4px); } }

.touch-card { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.touch-card:active { transform: scale(.985); }
.eyebrow { margin: 0; color: var(--cinnabar); font-family: system-ui,sans-serif; font-size: 11px; font-weight: 750; letter-spacing: .15em; }
.section-block { padding: 27px 2px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.section-head h2 { margin: 4px 0 0; font-size: 21px; font-weight: 500; letter-spacing: .04em; }
.link-action { padding: 6px 0; color: var(--ink-2); background: transparent; font-family: system-ui,sans-serif; font-size: 12px; cursor: pointer; }

.hero-scene { height: 440px; position: relative; overflow: hidden; border-radius: 28px 28px 13px 13px; color: white; background: var(--pine); box-shadow: var(--shadow-lg); }
.hero-scene > img { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.hero-scene:active > img { transform: scale(1.025); }
.hero-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,24,19,.05) 30%, rgba(6,22,18,.82) 100%); pointer-events: none; }
.hero-weather { position: absolute; left: 15px; top: 15px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(9,31,25,.22); backdrop-filter: blur(9px); font-family: system-ui,sans-serif; font-size: 10px; letter-spacing: .04em; }
.weather-dot { width: 7px; height: 7px; border-radius: 50%; background: #f0d49d; box-shadow: 0 0 12px #f0d49d; }
.hero-content { position: absolute; inset: auto 0 0; width: 100%; min-height: 138px; padding: 24px 20px 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; color: inherit; text-align: left; background: transparent; cursor: pointer; }
.hero-content p { margin: 0 0 4px; opacity: .72; font-family: system-ui,sans-serif; font-size: 11px; letter-spacing: .18em; }
.hero-content h2 { margin: 0 0 7px; font-size: 29px; font-weight: 500; letter-spacing: .08em; }
.hero-content > div:first-child span { display: block; max-width: 230px; opacity: .74; font-family: system-ui,sans-serif; font-size: 11px; line-height: 1.5; }
.progress-orb { --progress: 0deg; width: 62px; height: 62px; flex: 0 0 auto; display: flex; align-items: baseline; justify-content: center; padding-top: 19px; position: relative; border-radius: 50%; background: conic-gradient(#e8d6ad var(--progress),rgba(255,255,255,.2) 0); font-family: system-ui,sans-serif; }
.progress-orb::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: rgba(16,46,38,.87); }
.progress-orb strong, .progress-orb small { position: relative; }
.progress-orb strong { font-size: 20px; }
.progress-orb small { margin-left: 2px; font-size: 10px; opacity: .7; }

.quick-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin: 17px 0 0; }
.quick-grid button { min-width: 0; padding: 6px 2px 9px; display: grid; justify-items: center; gap: 4px; background: transparent; cursor: pointer; }
.quick-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), 0 7px 16px rgba(26,41,36,.08); transition: transform .2s ease; }
.quick-grid button:active .quick-icon { transform: scale(.9) rotate(-2deg); }
.quick-icon svg { width: 24px; height: 24px; }
.quick-icon.ink { color: #324842; background: #e5e7df; }
.quick-icon.pine { color: white; background: linear-gradient(145deg,#4f7a6b,#244c40); }
.quick-icon.cinnabar { color: white; background: linear-gradient(145deg,#c2614d,#913928); }
.quick-icon.gold { color: #72592e; background: linear-gradient(145deg,#f0dfb8,#d4b777); }
.quick-grid strong { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; }
.quick-grid small { color: var(--ink-3); font-family: system-ui,sans-serif; font-size: 9px; }

.parallel-entry { width:100%; height:156px; margin:0 0 14px; padding:0; display:block; overflow:hidden; position:relative; text-align:left; border:1px solid rgba(220,225,220,.16); border-radius:24px 24px 14px 14px; color:#f5f2e9; background:#23333d; box-shadow:0 15px 34px rgba(25,39,47,.2); cursor:pointer; }
.parallel-entry > img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:center; transition:transform .75s cubic-bezier(.2,.75,.25,1); }
.parallel-entry:active > img { transform:scale(1.025); }
.parallel-entry-wash { position:absolute; inset:0; background:linear-gradient(90deg,rgba(14,26,34,.93) 0%,rgba(18,31,39,.77) 43%,rgba(17,28,36,.08) 79%),linear-gradient(0deg,rgba(9,19,25,.34),transparent 56%); }
.parallel-entry-copy { width:62%; min-width:0; padding:20px 0 17px 18px; display:grid; gap:3px; position:relative; z-index:1; }
.parallel-entry-copy small { color:#cbbf9f; font-family:system-ui,sans-serif; font-size:9px; letter-spacing:.14em; }
.parallel-entry-copy strong { margin-top:1px; font-size:25px; font-weight:500; letter-spacing:.09em; }
.parallel-entry-copy em { color:rgba(245,242,233,.7); font-family:system-ui,sans-serif; font-size:10px; font-style:normal; line-height:1.45; }
.parallel-entry-copy b { width:max-content; margin-top:10px; padding:6px 10px; display:flex; align-items:center; gap:4px; border:1px solid rgba(229,217,190,.24); border-radius:999px; color:#eee7d8; background:rgba(255,255,255,.06); font-family:system-ui,sans-serif; font-size:8px; font-weight:600; }
.parallel-entry-copy b svg { width:12px; height:12px; }

.task-stack { display: grid; gap: 9px; }
.task-row { width: 100%; min-height: 78px; padding: 12px; display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 11px; text-align: left; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,253,247,.62); cursor: pointer; transition: transform .18s ease, background .2s ease, border-color .2s ease; }
.task-row:active { transform: scale(.99); }
.task-row.is-done { background: rgba(46,97,82,.1); border-color: rgba(46,97,82,.24); }
.task-visual { width: 50px; height: 50px; display: grid; place-items: center; position: relative; overflow: hidden; border-radius: 15px; background: var(--paper-deep); color: var(--pine); }
.task-visual::after { content: ""; position: absolute; width: 37px; height: 37px; border: 1px solid currentColor; border-radius: 50%; opacity: .12; }
.task-visual svg { width: 23px; height: 23px; position: relative; z-index: 1; }
.task-row h3 { margin: 0 0 4px; font-size: 15px; font-weight: 500; }
.task-row p { margin: 0; color: var(--ink-2); font-family: system-ui,sans-serif; font-size: 10px; line-height: 1.45; }
.task-state { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: transparent; }
.task-state svg { width: 16px; height: 16px; }
.task-row.is-done .task-state { color: white; background: var(--pine); border-color: var(--pine); animation: done-pop .32s ease; }
@keyframes done-pop { 50% { transform: scale(1.2); } }

.blessing-banner { width: 100%; min-height: 238px; margin-top: 28px; padding: 0; position: relative; overflow: hidden; border-radius: 24px 24px 9px 9px; color: white; text-align: left; background: var(--pine); box-shadow: var(--shadow-sm); }
.blessing-banner > img { width: 100%; height: 238px; object-fit: cover; object-position: center 54%; }
.banner-wash { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(13,33,27,.04),rgba(12,32,26,.79)); }
.free-tag { position: absolute; left: 14px; top: 14px; padding: 6px 9px; border-radius: 999px; color: #6f2a20; background: rgba(255,248,230,.9); backdrop-filter: blur(6px); font-family: system-ui,sans-serif; font-size: 10px; font-weight: 750; }
.banner-copy { position: absolute; left: 18px; right: 18px; bottom: 17px; display: grid; gap: 5px; }
.banner-copy small { opacity: .75; font-family: system-ui,sans-serif; font-size: 11px; letter-spacing: .12em; }
.banner-copy strong { max-width: 300px; font-size: 21px; font-weight: 500; line-height: 1.45; }
.banner-copy em { display: flex; align-items: center; gap: 4px; font-family: system-ui,sans-serif; font-size: 11px; font-style: normal; }
.banner-copy svg { width: 15px; height: 15px; }
.floating-slip { position: absolute; width: 24px; height: 60px; border-radius: 2px; background: rgba(251,239,208,.8); transform-origin: 50% 0; animation: slip-float 3.2s ease-in-out infinite; }
.slip-a { right: 41px; top: 15px; transform: rotate(8deg); }
.slip-b { right: 75px; top: 4px; height: 48px; opacity: .68; animation-delay: -1.2s; transform: rotate(-5deg); }
@keyframes slip-float { 50% { transform: rotate(3deg) translateY(3px); } }

.story-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 76%; gap: 11px; margin: 0 -14px; padding: 0 14px 7px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.story-rail::-webkit-scrollbar { display: none; }
.story-card { height: 196px; padding: 0; position: relative; overflow: hidden; border-radius: 20px 20px 8px 8px; color: white; text-align: left; scroll-snap-align: start; background: var(--pine); }
.story-card img { width: 100%; height: 100%; object-fit: cover; }
.story-shade { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 30%,rgba(8,26,21,.82)); }
.story-card > span:last-child { position: absolute; left: 15px; right: 14px; bottom: 14px; display: grid; gap: 5px; }
.story-card small { opacity: .75; font-family: system-ui,sans-serif; font-size: 10px; }
.story-card strong { font-size: 17px; font-weight: 500; line-height: 1.45; }

.daily-quote { margin: 29px 2px 4px; padding: 21px 6px; display: grid; grid-template-columns: 34px 1fr 34px; gap: 13px; align-items: start; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.daily-quote > svg { width: 31px; height: 31px; color: var(--cinnabar); }
.daily-quote p { margin: 0 0 6px; color: var(--cinnabar); font-family: system-ui,sans-serif; font-size: 10px; letter-spacing: .14em; }
.daily-quote blockquote { margin: 0 0 6px; font-size: 19px; letter-spacing: .06em; }
.daily-quote span { color: var(--ink-3); font-family: system-ui,sans-serif; font-size: 10px; }
.daily-quote button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); background: transparent; cursor: pointer; }
.daily-quote button.is-saved { color: var(--cinnabar); background: rgba(168,71,53,.08); }

.practice-cover { height: 340px; position: relative; overflow: hidden; border-radius: 27px 27px 12px 12px; color: white; background: var(--pine); }
.practice-cover > img { width: 100%; height: 100%; object-fit: cover; }
.cover-overlay { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(8,23,19,.03),rgba(7,24,19,.85)); }
.cover-copy { position: absolute; left: 20px; right: 82px; bottom: 24px; }
.cover-copy p { margin: 0 0 5px; opacity: .7; font-family: system-ui,sans-serif; font-size: 11px; letter-spacing: .16em; }
.cover-copy h2 { margin: 0 0 8px; font-size: 24px; font-weight: 500; line-height: 1.45; }
.cover-copy span { opacity: .7; font-family: system-ui,sans-serif; font-size: 11px; }
.play-focus { position: absolute; right: 16px; bottom: 20px; display: grid; justify-items: center; gap: 5px; color: white; background: transparent; cursor: pointer; }
.play-focus svg { width: 50px; height: 50px; padding: 14px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(255,255,255,.13); backdrop-filter: blur(8px); }
.play-focus span { font-family: system-ui,sans-serif; font-size: 9px; }

.streak-panel { margin-top: 12px; padding: 19px 17px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,253,247,.62); }
.streak-head { display: flex; justify-content: space-between; align-items: center; }
.streak-head h2 { margin: 4px 0 0; font-size: 20px; font-weight: 500; }
.streak-head > strong { font-family: system-ui,sans-serif; font-size: 28px; color: var(--pine); }
.streak-head > strong small { margin-left: 2px; color: var(--ink-3); font-size: 10px; font-weight: 500; }
.week-row { display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; margin-top: 16px; }
.week-day { display: grid; justify-items: center; gap: 7px; }
.week-day span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-3); font-family: system-ui,sans-serif; font-size: 10px; }
.week-day small { color: var(--ink-3); font-family: system-ui,sans-serif; font-size: 9px; }
.week-day.is-done span { color: white; background: var(--pine); border-color: var(--pine); }
.week-day.is-today span { box-shadow: 0 0 0 3px rgba(184,146,83,.22); border-color: var(--gold); }

.practice-cards { display: grid; gap: 10px; }
.practice-cards button { min-height: 88px; padding: 10px; display: grid; grid-template-columns: 68px 1fr auto; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 18px; text-align: left; background: rgba(255,253,247,.7); cursor: pointer; }
.practice-art { width: 68px; height: 68px; display: grid; place-items: center; position: relative; overflow: hidden; border-radius: 17px; }
.practice-art svg { width: 27px; height: 27px; position: relative; z-index: 2; }
.still-art { color: white; background: linear-gradient(150deg,#4a7969,#183f35); }
.still-art i { position: absolute; width: 45px; height: 45px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; animation: orb 4s ease-in-out infinite; }
@keyframes orb { 50% { transform: scale(1.45); opacity: .2; } }
.know-art { color: #6e5329; background: linear-gradient(150deg,#f3e6c6,#d5b873); }
.act-art { color: #7c3428; background: linear-gradient(150deg,#efd8ca,#cf806b); }
.practice-cards strong { display: block; margin-bottom: 5px; font-size: 15px; font-weight: 500; }
.practice-cards small { color: var(--ink-3); font-family: system-ui,sans-serif; font-size: 10px; }
.practice-cards em { color: var(--cinnabar); font-family: system-ui,sans-serif; font-size: 11px; font-style: normal; }

.reading-feature { width: 100%; height: 218px; padding: 0; position: relative; overflow: hidden; border-radius: 21px 21px 8px 8px; color: white; text-align: left; background: var(--pine); }
.reading-feature img { width: 100%; height: 100%; object-fit: cover; }
.reading-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 26%,rgba(8,24,20,.86)); }
.reading-feature span { position: absolute; z-index: 2; left: 17px; right: 17px; bottom: 16px; display: grid; gap: 5px; }
.reading-feature small, .reading-feature em { opacity: .72; font-family: system-ui,sans-serif; font-size: 10px; font-style: normal; }
.reading-feature strong { max-width: 330px; font-size: 18px; font-weight: 500; line-height: 1.5; }

.blessing-page { margin: 0 -14px; }
.blessing-hero { height: 510px; position: relative; overflow: hidden; color: white; background: var(--pine); }
.blessing-hero > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.blessing-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(95,44,22,.02),rgba(15,43,35,.26) 55%,rgba(8,25,20,.88)); }
.blessing-title { position: absolute; left: 24px; right: 24px; bottom: 40px; }
.blessing-title > span { display: inline-flex; padding: 6px 9px; margin-bottom: 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(13,36,29,.2); backdrop-filter: blur(8px); font-family: system-ui,sans-serif; font-size: 9px; letter-spacing: .08em; }
.blessing-title h2 { margin: 0 0 9px; font-size: 33px; font-weight: 500; line-height: 1.38; letter-spacing: .05em; white-space: pre-line; }
.blessing-title p { margin: 0; opacity: .7; font-family: system-ui,sans-serif; font-size: 12px; letter-spacing: .16em; }
.petal-field { position: absolute; inset: 0; pointer-events: none; }
.petal-field i { position: absolute; width: 9px; height: 14px; border-radius: 100% 0 100% 0; background: #d17b69; opacity: .72; animation: petal-fall 6s linear infinite; }
.petal-field i:nth-child(1){left:12%;top:-5%;animation-delay:-1s}.petal-field i:nth-child(2){left:35%;top:-8%;animation-delay:-4s;transform:scale(.7)}.petal-field i:nth-child(3){left:62%;top:-3%;animation-delay:-2s}.petal-field i:nth-child(4){left:78%;top:-10%;animation-delay:-5s;transform:scale(.6)}.petal-field i:nth-child(5){left:90%;top:-4%;animation-delay:-3s}
@keyframes petal-fall { to { translate: 70px 540px; rotate: 420deg; opacity: .05; } }
.water-rings { position: absolute; right: -10px; bottom: 56px; width: 200px; height: 110px; pointer-events: none; }
.water-rings i { position: absolute; inset: 50% auto auto 50%; width: 40px; height: 16px; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; transform: translate(-50%,-50%); animation: water-ring 3.6s ease-out infinite; }
.water-rings i:nth-child(2){animation-delay:-1.2s}.water-rings i:nth-child(3){animation-delay:-2.4s}
@keyframes water-ring { from { opacity:.7;transform:translate(-50%,-50%) scale(.3) } to { opacity:0;transform:translate(-50%,-50%) scale(4.6) } }

.blessing-form-card { margin: -13px 14px 0; padding: 22px 18px 20px; position: relative; z-index: 2; border-radius: 25px 25px 11px 11px; background: var(--paper-light); box-shadow: 0 -12px 35px rgba(21,45,37,.12); }
.blessing-step { display: flex; align-items: center; gap: 13px; }
.blessing-step > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(168,71,53,.25); border-radius: 50%; color: var(--cinnabar); font-family: system-ui,sans-serif; font-size: 11px; }
.blessing-step h2 { margin: 4px 0 0; font-size: 21px; font-weight: 500; }
.blessing-themes { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 17px; }
.theme-choice { min-height: 62px; padding: 8px; display: grid; justify-items: center; align-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); cursor: pointer; }
.theme-choice span { font-size: 18px; }
.theme-choice small { color: var(--ink-3); font-family: system-ui,sans-serif; font-size: 9px; }
.theme-choice[aria-checked="true"] { color: white; background: var(--cinnabar); border-color: var(--cinnabar); box-shadow: 0 8px 18px rgba(168,71,53,.18); }
.theme-choice[aria-checked="true"] small { color: rgba(255,255,255,.7); }
.wish-text-label { margin: 22px 0 8px; display: flex; justify-content: space-between; align-items: center; font-family: system-ui,sans-serif; }
.wish-text-label span { font-size: 13px; font-weight: 700; }
.wish-text-label em { margin-right: 7px; color: var(--cinnabar); font-style: normal; }
.wish-text-label small { color: var(--ink-3); font-size: 9px; }
#blessingText { width: 100%; min-height: 112px; resize: none; padding: 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--paper); font-family: system-ui,sans-serif; font-size: 13px; line-height: 1.7; }
#blessingText::placeholder { color: #a4aaa6; }
.privacy-check { margin-top: 10px; display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-family: system-ui,sans-serif; font-size: 10px; }
.privacy-check input { accent-color: var(--pine); }
.blessing-submit { width: 100%; min-height: 72px; margin-top: 18px; padding: 14px 58px 14px 24px; display: grid; place-items: center; position: relative; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: white; text-align: center; background: linear-gradient(135deg,#aa6253,var(--cinnabar-deep)); box-shadow: 0 12px 28px rgba(116,59,51,.2); cursor: pointer; }
.blessing-submit span { font-size: 20px; font-weight: 650; letter-spacing: .08em; }
.blessing-submit svg { position: absolute; right: 22px; top: 22px; width: 26px; height: 26px; animation: twinkle 2.2s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: rotate(18deg) scale(1.15); opacity: .7; } }
.blessing-disclaimer { display: none; }
.talisman-studio { margin:14px 14px 0; padding:20px 18px; border:1px solid color-mix(in srgb,var(--gold) 22%,var(--line)); border-radius:12px 25px 12px 12px; background:linear-gradient(145deg,color-mix(in srgb,var(--paper-light) 92%,transparent),color-mix(in srgb,var(--paper-deep) 72%,transparent)); box-shadow:0 10px 32px color-mix(in srgb,var(--pine) 6%,transparent); }
.talisman-heading { display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:11px; }
.talisman-mark { width:46px; height:54px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--cinnabar) 56%,transparent); color:var(--cinnabar); font-size:20px; }
.talisman-heading h2 { margin:4px 0 0; font-size:18px; font-weight:500; line-height:1.4; }
.talisman-heading > strong { padding:5px 8px; border-radius:999px; color:var(--cinnabar); background:color-mix(in srgb,var(--cinnabar) 9%,transparent); font-family:system-ui,sans-serif; font-size:9px; white-space:nowrap; }
.talisman-studio > p { margin:14px 0; color:var(--ink-2); font-family:system-ui,sans-serif; font-size:10px; line-height:1.7; }
.talisman-styles { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.talisman-styles button { min-height:145px; padding:8px 4px 9px; display:grid; justify-items:center; align-content:center; gap:4px; border:1px solid var(--line); border-radius:13px; color:var(--ink-2); background:color-mix(in srgb,var(--paper-light) 68%,transparent); cursor:pointer; }
.talisman-styles button.is-active { color:var(--paper-light); border-color:var(--pine); background:var(--pine); box-shadow:0 7px 18px color-mix(in srgb,var(--pine) 18%,transparent); }
.talisman-styles canvas { width:48px; height:85px; display:block; border:1px solid rgba(136,47,38,.24); background:#e5bd5a; box-shadow:0 4px 10px rgba(80,51,19,.12); }
.talisman-styles button.is-active canvas { border-color:rgba(255,246,217,.56); box-shadow:0 4px 13px rgba(0,0,0,.18); }
.talisman-styles span { margin-top:2px; font-family:"Songti SC",serif; font-size:10px; }
.talisman-styles small { opacity:.62; font-family:system-ui,sans-serif; font-size:7px; white-space:nowrap; }
.talisman-generate { width:100%; min-height:52px; margin-top:12px; padding:10px 18px; display:flex; align-items:center; justify-content:space-between; border-radius:999px; color:white; background:linear-gradient(135deg,var(--pine-2),var(--pine)); cursor:pointer; }
.talisman-generate span { font-size:14px; letter-spacing:.06em; }
.talisman-generate small { opacity:.68; font-family:system-ui,sans-serif; font-size:9px; }
.talisman-preview { margin-top:14px; }
.talisman-preview canvas { width:min(100%,380px); display:block; margin:0 auto; border:1px solid rgba(128,62,23,.2); background:#e5bd5a; box-shadow:0 16px 34px rgba(61,45,29,.2); }
.talisman-preview button { width:100%; min-height:46px; margin-top:9px; border:1px solid var(--pine); border-radius:999px; color:var(--pine); background:transparent; cursor:pointer; font-weight:700; }
.saved-wishes { padding: 31px 16px 4px; }
.saved-wishes .section-head > span { color: var(--ink-3); font-family: system-ui,sans-serif; font-size: 10px; }
.wish-list { display: grid; gap: 9px; }
.wish-empty { padding: 23px; border: 1px dashed rgba(23,38,35,.18); border-radius: 16px; color: var(--ink-3); text-align: center; font-family: system-ui,sans-serif; font-size: 11px; }
.saved-wish-card { padding: 15px; display: grid; grid-template-columns: 42px 1fr auto; gap: 11px; align-items: start; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,253,247,.7); }
.saved-wish-card > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: white; background: var(--cinnabar); font-size: 18px; }
.saved-wish-card strong { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 500; line-height: 1.45; }
.saved-wish-card small { color: var(--ink-3); font-family: system-ui,sans-serif; font-size: 9px; }
.saved-wish-card button { padding: 5px; color: var(--ink-3); background: transparent; cursor: pointer; }
.saved-wish-card button svg { width: 16px; height: 16px; }

.discover-hero { height: 290px; position: relative; overflow: hidden; border-radius: 27px 27px 11px 11px; color: white; background: var(--pine); }
.discover-hero img { width: 100%; height: 100%; object-fit: cover; }
.discover-shade { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 28%,rgba(11,31,25,.8)); }
.discover-hero > div:last-child { position: absolute; left: 19px; bottom: 20px; }
.discover-hero small { opacity: .72; font-family: system-ui,sans-serif; font-size: 10px; letter-spacing: .14em; }
.discover-hero h2 { margin: 5px 0 4px; font-size: 29px; font-weight: 500; }
.discover-hero p { margin: 0; opacity: .75; font-family: system-ui,sans-serif; font-size: 11px; }
.native-tabs { height: 50px; margin-top: 10px; display: grid; grid-template-columns: repeat(3,1fr); position: relative; border-bottom: 1px solid var(--line); }
.native-tabs button { position: relative; z-index: 2; color: var(--ink-3); background: transparent; font-family: system-ui,sans-serif; font-size: 13px; cursor: pointer; }
.native-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 700; }
.tab-ink { position: absolute; left: 0; bottom: -1px; width: 33.333%; height: 2px; background: var(--cinnabar); transition: transform .28s cubic-bezier(.2,.75,.25,1); }
.discover-pane { padding-top: 16px; animation: pane-in .3s ease; }
@keyframes pane-in { from { opacity:0; transform:translateX(7px) } }
.content-feed { display: grid; gap: 12px; }
.feed-card { width: 100%; min-height: 116px; padding: 0; display: grid; grid-template-columns: 120px 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; text-align: left; background: rgba(255,253,247,.7); cursor: pointer; }
.feed-card img { width: 120px; height: 100%; object-fit: cover; }
.feed-card span { padding: 16px 13px; }
.feed-card small { color: var(--cinnabar); font-family: system-ui,sans-serif; font-size: 9px; }
.feed-card strong { display: block; margin: 6px 0 5px; font-size: 15px; font-weight: 500; line-height: 1.45; }
.feed-card p { margin: 0; color: var(--ink-3); font-family: system-ui,sans-serif; font-size: 9px; }
.shop-notice { margin-bottom: 12px; padding: 11px 12px; display: flex; align-items: center; gap: 9px; border-radius: 12px; color: var(--pine); background: rgba(46,97,82,.09); font-family: system-ui,sans-serif; font-size: 9px; line-height: 1.5; }
.shop-notice svg { width: 18px; height: 18px; flex: 0 0 auto; }
.shop-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.shop-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px 18px 9px 9px; background: rgba(255,253,247,.72); }
.shop-card > button:first-child { width: 100%; padding: 0; background: var(--paper-deep); cursor: pointer; }
.shop-card img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s ease; }
.shop-card:active img { transform: scale(1.035); }
.shop-info { padding: 12px; }
.shop-info > small { color: var(--ink-3); font-family: system-ui,sans-serif; font-size: 8px; }
.shop-info h3 { margin: 5px 0 9px; min-height: 36px; font-size: 14px; font-weight: 500; line-height: 1.4; }
.shop-bottom { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.shop-bottom strong { color: var(--cinnabar); font-family: system-ui,sans-serif; font-size: 15px; }
.shop-bottom button { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font-family: system-ui,sans-serif; font-size: 9px; cursor: pointer; }
.event-hero { width: 100%; height: 278px; padding: 0; position: relative; overflow: hidden; border-radius: 22px 22px 9px 9px; color: white; text-align: left; background: var(--pine); }
.event-hero img { width: 100%; height: 100%; object-fit: cover; }
.event-shade { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 25%,rgba(7,24,19,.88)); }
.event-hero > span:last-child { position: absolute; left: 17px; right: 17px; bottom: 17px; display: grid; gap: 5px; }
.event-hero small { opacity: .7; font-family: system-ui,sans-serif; font-size: 9px; }
.event-hero strong { font-size: 21px; font-weight: 500; }
.event-hero p { margin: 0; opacity: .72; font-family: system-ui,sans-serif; font-size: 10px; }
.event-hero em { margin-top: 5px; font-family: system-ui,sans-serif; font-size: 10px; font-style: normal; }
.event-list { display: grid; gap: 9px; margin-top: 12px; }
.mini-event { padding: 14px; display: grid; grid-template-columns: 50px 1fr auto; gap: 11px; align-items: center; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,253,247,.72); }
.mini-event > span:first-child { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; color: var(--pine); background: var(--paper-deep); }
.mini-event svg { width: 23px; height: 23px; }
.mini-event strong { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; }
.mini-event small { color: var(--ink-3); font-family: system-ui,sans-serif; font-size: 9px; }
.mini-event em { color: var(--cinnabar); font-family: system-ui,sans-serif; font-size: 11px; font-style: normal; }

.profile-hero { padding: 24px 19px 21px; position: relative; overflow: hidden; border-radius: 28px 28px 10px 10px; color: white; background: linear-gradient(145deg,#315f52,#13372e); }
.profile-clouds { position: absolute; inset: 0; opacity: .12; background: url("assets/pattern-clouds.svg") center / cover; }
.profile-row { display: grid; grid-template-columns: 62px 1fr 34px; gap: 13px; align-items: center; position: relative; }
.profile-avatar { width: 62px; height: 62px; display: grid; place-items: center; position: relative; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; font-size: 22px; }
.profile-avatar span { position: absolute; right: 0; bottom: 3px; width: 13px; height: 13px; border: 2px solid var(--pine); border-radius: 50%; background: #d9bd7f; }
.profile-row small { opacity: .62; font-family: system-ui,sans-serif; font-size: 9px; letter-spacing: .12em; }
.profile-row h2 { margin: 4px 0 3px; font-size: 22px; font-weight: 500; }
.profile-row p { margin: 0; opacity: .68; font-family: system-ui,sans-serif; font-size: 10px; }
.profile-row button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: white; background: rgba(255,255,255,.1); cursor: pointer; }
.profile-row button svg { width: 19px; height: 19px; }
.profile-stats { margin-top: 22px; padding-top: 17px; display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; align-items: center; position: relative; border-top: 1px solid rgba(255,255,255,.14); }
.profile-stats > span { display: grid; justify-items: center; gap: 4px; }
.profile-stats strong { font-family: system-ui,sans-serif; font-size: 21px; }
.profile-stats small { opacity: .6; font-family: system-ui,sans-serif; font-size: 9px; }
.profile-stats i { height: 28px; background: rgba(255,255,255,.14); }
.account-panel { margin-top:12px; padding:17px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px 22px 12px 12px; background:color-mix(in srgb,var(--paper-light) 70%,transparent); }
.account-panel h2 { margin:4px 0 4px; font-size:16px; font-weight:500; }
.account-panel > div:first-child > span { color:var(--ink-3); font-family:system-ui,sans-serif; font-size:9px; }
.account-actions { display:flex; gap:6px; }
.account-actions button { min-height:38px; padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:var(--pine); background:transparent; cursor:pointer; font-family:system-ui,sans-serif; font-size:10px; white-space:nowrap; }
.account-actions button:first-child { color:white; border-color:var(--pine); background:var(--pine); }
.account-actions .logout-button { color:var(--ink-3); border-color:var(--line); background:transparent; }
.auth-switch { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:18px 0 12px; }
.auth-switch button { min-height:42px; border:1px solid var(--line); border-radius:999px; color:var(--ink-3); background:transparent; }
.auth-switch button.is-active { color:white; border-color:var(--pine); background:var(--pine); }
.auth-form { display:grid; gap:11px; }
.auth-form label { display:grid; gap:6px; color:var(--ink-2); font-family:system-ui,sans-serif; font-size:10px; }
.auth-form input { width:100%; min-height:48px; padding:0 13px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:var(--paper-light); }
.auth-form .sheet-primary { margin-top:4px; }
.points-ledger { margin-top:17px; display:grid; gap:8px; }
.points-row { padding:12px 0; display:grid; grid-template-columns:1fr auto; gap:8px; border-bottom:1px solid var(--line); }
.points-row strong,.points-row small { display:block; }
.points-row strong { margin-bottom:4px; font-size:13px; font-weight:500; }
.points-row small { color:var(--ink-3); font-family:system-ui,sans-serif; font-size:9px; }
.points-row em { align-self:center; color:var(--pine); font-family:system-ui,sans-serif; font-size:13px; font-style:normal; font-weight:700; }
.points-row em.is-spend { color:var(--cinnabar); }
.event-points-box { margin-top:14px; padding:12px; border-radius:13px; background:color-mix(in srgb,var(--gold) 10%,var(--paper-deep)); }
.event-points-box label { display:flex; align-items:center; gap:8px; color:var(--ink); font-family:system-ui,sans-serif; font-size:11px; }
.event-points-box input { accent-color:var(--pine); }
.event-points-box small { display:block; margin-top:6px; color:var(--ink-3); font-family:system-ui,sans-serif; font-size:9px; line-height:1.5; }
.member-card { width: 100%; margin-top: 12px; padding: 18px; display: grid; grid-template-columns: 48px 1fr; gap: 13px; align-items: center; border-radius: 10px 23px 10px 10px; text-align: left; background: linear-gradient(135deg,#efe1c4,#f8f3e8); box-shadow: inset 0 0 0 1px rgba(184,146,83,.18); }
.member-seal { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--cinnabar); color: var(--cinnabar); font-size: 19px; }
.member-card small { color: var(--cinnabar); font-family: system-ui,sans-serif; font-size: 9px; }
.member-card strong { display: block; margin: 5px 0 7px; font-size: 15px; font-weight: 500; }
.member-card em { display: flex; align-items: center; gap: 3px; color: var(--ink-2); font-family: system-ui,sans-serif; font-size: 9px; font-style: normal; }
.member-card svg { width: 13px; height: 13px; }
.my-section { margin-top: 27px; }
.my-section-title h2 { margin: 0 0 12px; font-size: 21px; font-weight: 500; }
.my-menu { border-top: 1px solid var(--line); }
.my-menu > button, .admin-entry { width: 100%; min-height: 72px; padding: 11px 2px; display: grid; grid-template-columns: 43px 1fr 18px; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); color: inherit; text-align: left; text-decoration: none; background: transparent; cursor: pointer; }
.menu-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; }
.menu-icon svg { width: 20px; height: 20px; }
.menu-icon.green { color: var(--pine); background: rgba(46,97,82,.13); }.menu-icon.red { color: var(--cinnabar); background: rgba(168,71,53,.11); }.menu-icon.gold { color: #7d612e; background: rgba(184,146,83,.17); }.menu-icon.gray { color: var(--ink-2); background: rgba(82,97,92,.1); }
.my-menu strong { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 500; }
.my-menu small { display: block; max-width: 270px; overflow: hidden; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; font-family: system-ui,sans-serif; font-size: 9px; }
.my-menu > button > svg, .admin-entry > svg { width: 17px; height: 17px; color: var(--ink-3); }

.bottom-nav { position: fixed; z-index: 60; left: 50%; bottom: 0 !important; width: min(100%,480px); min-height: calc(68px + var(--safe-bottom)); padding: 7px 8px var(--safe-bottom); transform: translateX(-50%); display: grid; grid-template-columns: repeat(5,1fr); align-items: end; background: color-mix(in srgb,var(--paper-light) 96.5%,transparent); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(32,43,40,.065); backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); }
.bottom-nav > button { min-height: 56px; display: grid; place-items: center; align-content: center; gap: 3px; color: #77827d; background: transparent; cursor: pointer; font-family: system-ui,sans-serif; }
.bottom-nav > button > span { min-width: 34px; height: 30px; display: grid; place-items: center; position: relative; border-radius: 12px; transition: transform .2s ease,background .2s ease; }
.bottom-nav svg { width: 22px; height: 22px; }
.bottom-nav small { font-size: 9px; transition: color .2s; }
.bottom-nav > button.is-active { color: var(--pine); font-weight: 700; }
.bottom-nav > button.is-active > span { background: transparent; box-shadow: inset 0 0 0 1px rgba(36,73,64,.34), inset 0 0 0 6px rgba(36,73,64,.055); border-radius: 50%; transform: translateY(-2px); }
.bottom-nav > button:active > span { transform: scale(.88); }
.bottom-nav .blessing-nav { color: var(--pine); }
.bottom-nav .blessing-nav > span { width: 55px; height: 55px; margin-top: -26px; border: 4px solid color-mix(in srgb,var(--paper-light) 98%,transparent); border-radius: 50%; color: var(--paper-light); background: linear-gradient(145deg,var(--pine-2),var(--pine)); box-shadow: 0 7px 22px color-mix(in srgb,var(--pine) 26%,transparent), inset 0 0 0 1px color-mix(in srgb,var(--gold-light) 32%,transparent); }
.bottom-nav .blessing-nav > span::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(169,146,104,.35); border-radius: 50%; animation: nav-pulse 2.8s ease-out infinite; }
@keyframes nav-pulse { 70%,100% { transform: scale(1.3); opacity: 0; } }
.bottom-nav .blessing-nav svg { width: 25px; height: 25px; }
.bottom-nav .blessing-nav i { position: absolute; right: -10px; top: -7px; padding: 3px 5px; border-radius: 999px; color: #fff8ed; background: var(--cinnabar); box-shadow: 0 2px 6px rgba(0,0,0,.1); font-size: 7px; font-style: normal; font-weight: 800; }
.bottom-nav .blessing-nav.is-active > span { transform: translateY(-2px) scale(1.04); background: linear-gradient(145deg,var(--pine-2),var(--pine)); }

.native-sheet { width: min(100%,480px); max-height: min(88svh,780px); margin: auto auto 0; padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); overflow: auto; border: 0; border-radius: 25px 25px 0 0; color: var(--ink); background: var(--paper); box-shadow: 0 -16px 60px rgba(13,31,25,.2); }
.native-sheet[open] { animation: sheet-up .34s cubic-bezier(.2,.8,.25,1); }
.native-sheet::backdrop { background: rgba(11,29,23,.52); backdrop-filter: blur(3px); animation: fade-in .25s ease; }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes fade-in { from { opacity:0; } }
.sheet-handle { width: 40px; height: 4px; margin: -12px auto 17px; border-radius: 999px; background: rgba(23,38,35,.18); }
.sheet-close { position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); background: rgba(23,38,35,.07); cursor: pointer; }
.sheet-close svg { width: 18px; height: 18px; }
.sheet-title { padding-right: 46px; }
.sheet-title .eyebrow { margin-bottom: 6px; }
.sheet-title h2 { margin: 0; font-size: 25px; font-weight: 500; line-height: 1.4; }
.sheet-title > p { margin: 9px 0 0; color: var(--ink-2); font-family: system-ui,sans-serif; font-size: 11px; line-height: 1.7; }
.sheet-hero { width: 100%; height: 190px; margin: 18px 0; object-fit: cover; border-radius: 18px 18px 8px 8px; }
.sheet-primary, .sheet-secondary { min-height: 48px; padding: 12px 18px; border-radius: 999px; cursor: pointer; font-family: system-ui,sans-serif; font-size: 13px; font-weight: 700; }
.sheet-primary { color: white; background: var(--pine); }
.sheet-secondary { color: var(--pine); border: 1px solid var(--line); background: rgba(255,253,247,.8); }
.auth-feedback { min-height: 0; margin: 0; padding: 0; border-radius: 10px; font-family: system-ui,sans-serif; font-size: 11px; line-height: 1.55; }
.auth-feedback:empty { display: none; }
.auth-feedback.is-pending { padding: 9px 11px; color: var(--pine); background: color-mix(in srgb,var(--pine) 8%,transparent); }
.auth-feedback.is-error { padding: 9px 11px; color: #8f352b; border: 1px solid rgba(143,53,43,.16); background: rgba(143,53,43,.07); }
.auth-form[aria-busy="true"] input { opacity: .72; }
.sheet-button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 17px; }
.sheet-list { margin: 16px 0 0; padding: 0; list-style: none; }
.sheet-list li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-family: system-ui,sans-serif; font-size: 11px; line-height: 1.6; }
.observe-form { margin-top: 18px; }
.char-input-line { display: grid; grid-template-columns: 74px 1fr; gap: 10px; }
.char-input-line input { width: 74px; height: 64px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-light); text-align: center; font-size: 34px; }
.char-input-line button { border-radius: 14px; color: white; background: var(--pine); cursor: pointer; }
.char-chips { display: flex; gap: 7px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.char-chips button { width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; background: var(--paper-light); cursor: pointer; }
.reflection-output { margin-top: 16px; padding: 19px; border-radius: 10px 22px 10px 10px; color: white; background: var(--pine); }
.reflection-output header { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; }
.reflection-output header > span { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); font-size: 34px; }
.reflection-output h3 { margin: 0 0 4px; font-size: 18px; font-weight: 500; }
.reflection-output p { margin: 0; opacity: .72; font-family: system-ui,sans-serif; font-size: 10px; line-height: 1.65; }
.reflection-output blockquote { margin: 16px 0; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); font-size: 14px; line-height: 1.6; }
.reflection-output ol { margin: 0; padding-left: 20px; }
.reflection-output li { margin: 7px 0; font-family: system-ui,sans-serif; font-size: 10px; line-height: 1.55; }
.reflection-action { margin-top: 14px; padding: 11px; border-left: 3px solid var(--gold-light); background: rgba(255,255,255,.09); }
.wish-builder { margin-top: 17px; }
.wish-builder label { display: block; margin-top: 12px; color: var(--ink-2); font-family: system-ui,sans-serif; font-size: 10px; }
.wish-builder textarea, .wish-builder select { width: 100%; margin-top: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--paper-light); }
.wish-builder textarea { min-height: 90px; resize: none; }
.wish-plan-preview { margin-top: 15px; padding: 14px; border-radius: 14px; background: var(--paper-deep); }
.wish-plan-preview h3 { margin: 0 0 6px; font-size: 15px; font-weight: 500; }
.wish-plan-preview p { margin: 0; color: var(--ink-2); font-family: system-ui,sans-serif; font-size: 10px; line-height: 1.6; }
.plan-dot-row { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; margin-top: 12px; }
.plan-dot-row i { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: rgba(255,253,247,.8); font-family: system-ui,sans-serif; font-size: 8px; font-style: normal; }
.article-body { margin-top: 17px; color: var(--ink-2); font-family: system-ui,sans-serif; font-size: 12px; line-height: 1.9; }
.article-body blockquote { margin: 17px 0; padding: 16px; border-left: 3px solid var(--cinnabar); color: var(--ink); background: var(--paper-deep); font-family: "Noto Serif SC","Songti SC",serif; font-size: 16px; }
.product-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
.product-sheet-grid span { padding: 10px; border-radius: 11px; background: var(--paper-deep); color: var(--ink-2); font-family: system-ui,sans-serif; font-size: 9px; }

.focus-overlay { position: fixed; z-index: 110; inset: 0; width: min(100%,480px); margin: 0 auto; overflow: hidden; color: white; background: linear-gradient(180deg,#173d34,#0b2821 68%,#071c17); }
.focus-close { position: absolute; z-index: 4; right: 18px; top: max(18px,env(safe-area-inset-top)); width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: white; background: rgba(255,255,255,.1); cursor: pointer; }
.focus-close svg { width: 20px; height: 20px; }
.focus-scene { position: absolute; inset: 0; overflow: hidden; }
.focus-moon { position: absolute; left: 50%; top: 19%; width: 100px; height: 100px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 42% 38%,#fbefc8,#d7c48f 70%,#b8a16b); box-shadow: 0 0 80px rgba(230,211,159,.28); animation: moon-breathe 8s ease-in-out infinite; }
@keyframes moon-breathe { 50% { transform:scale(1.08); box-shadow:0 0 120px rgba(230,211,159,.34); } }
.focus-mountain { position: absolute; left: -10%; right: -10%; bottom: 22%; height: 40%; clip-path: polygon(0 75%,18% 48%,31% 68%,50% 22%,64% 66%,81% 39%,100% 76%,100% 100%,0 100%); }
.focus-mountain.m1 { opacity: .38; background: #315c50; transform: translateY(-40px) scale(1.08); }
.focus-mountain.m2 { background: #102f27; }
.focus-ripples { position: absolute; left: 50%; bottom: 23%; width: 250px; height: 110px; translate: -50% 0; }
.focus-ripples i { position: absolute; left: 50%; top: 50%; width: 54px; height: 18px; border: 1px solid rgba(225,214,181,.42); border-radius: 50%; animation: focus-ring 4s ease-out infinite; }
.focus-ripples i:nth-child(2){animation-delay:-1.33s}.focus-ripples i:nth-child(3){animation-delay:-2.66s}
@keyframes focus-ring { from{opacity:.7;transform:translate(-50%,-50%) scale(.4)}to{opacity:0;transform:translate(-50%,-50%) scale(4.5)} }
.focus-copy { position: absolute; z-index: 3; left: 20px; right: 20px; top: 50%; translate: 0 -5%; display: grid; justify-items: center; text-align: center; }
.focus-copy p { margin: 0 0 12px; opacity: .8; font-size: 22px; letter-spacing: .16em; animation: cue-breathe 8s ease-in-out infinite; }
@keyframes cue-breathe { 50% { opacity:1; transform:scale(1.05); } }
.focus-copy strong { font-family: system-ui,sans-serif; font-size: 45px; font-weight: 400; letter-spacing: .06em; }
.focus-copy span { margin-top: 10px; opacity: .55; font-family: system-ui,sans-serif; font-size: 10px; }
.focus-finish { position: absolute; z-index: 4; left: 50%; bottom: calc(32px + env(safe-area-inset-bottom)); min-width: 160px; padding: 14px 24px; translate: -50% 0; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: white; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); cursor: pointer; }

.blessing-result { position: fixed; z-index: 120; inset: 0; width: min(100%,480px); margin: 0 auto; display: grid; place-items: center; padding: 26px 18px; background: rgba(10,28,22,.9); backdrop-filter: blur(8px); }
.result-sheet { width: 100%; max-width: 390px; min-height: 580px; padding: 37px 31px 27px; display: grid; align-content: start; justify-items: center; position: relative; overflow: hidden; text-align: center; background: linear-gradient(150deg,#fffaf0,#e8ddc8); box-shadow: 0 22px 70px rgba(0,0,0,.32); animation: result-up .55s cubic-bezier(.16,.85,.25,1.1); }
@keyframes result-up { from { opacity:0;transform:translateY(55px) scale(.92) rotate(-1deg) } }
.result-sheet::before, .result-sheet::after { content:""; position:absolute; border:1px solid rgba(168,71,53,.18); pointer-events:none; }
.result-sheet::before { inset: 13px; }.result-sheet::after { inset: 19px; border-color:rgba(23,61,52,.12); }
.result-sheet > button:first-child { position: absolute; z-index: 3; right: 17px; top: 17px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); background: rgba(23,38,35,.07); cursor: pointer; }
.result-sheet > p { margin: 0; color: var(--cinnabar); font-family: system-ui,sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .28em; }
.result-seal { width: 76px; height: 76px; margin: 24px 0 17px; display: grid; place-items: center; border: 2px solid var(--cinnabar); color: var(--cinnabar); font-size: 39px; transform: rotate(-2deg); }
.result-sheet h2 { margin: 0; font-size: 27px; font-weight: 500; letter-spacing: .08em; }
.result-sheet blockquote { margin: 21px 0; min-height: 80px; display: grid; align-items: center; font-size: 18px; line-height: 1.75; }
.result-action { width: 100%; padding: 14px; border-top: 1px solid rgba(23,38,35,.13); border-bottom: 1px solid rgba(23,38,35,.13); }
.result-action small { display: block; margin-bottom: 6px; color: var(--cinnabar); font-family: system-ui,sans-serif; font-size: 9px; letter-spacing: .16em; }
.result-action strong { font-size: 13px; font-weight: 500; line-height: 1.6; }
.result-sheet > span { margin-top: 18px; color: var(--ink-2); font-family: system-ui,sans-serif; font-size: 10px; }
.result-sheet > em { margin-top: 8px; color: var(--ink-3); font-family: system-ui,sans-serif; font-size: 8px; font-style: normal; }
.result-buttons { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
.result-buttons button { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.45); cursor: pointer; font-family: system-ui,sans-serif; font-size: 10px; }
.result-buttons button:first-child { color: white; border-color: var(--pine); background: var(--pine); }
.result-buttons svg { width: 16px; height: 16px; }
.result-petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.result-petals i { position: absolute; top: -20px; width: 8px; height: 13px; border-radius: 100% 0 100% 0; background: #d2725d; animation: result-petal 4s linear forwards; }
@keyframes result-petal { to { translate: 80px 105svh; rotate: 540deg; opacity:0; } }

.toast { position: fixed; z-index: 180; left: 50%; bottom: 96px; max-width: min(390px,calc(100% - 36px)); padding: 10px 16px; transform: translate(-50%,14px); border-radius: 999px; color: white; background: rgba(20,37,32,.94); box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transition: opacity .25s ease,transform .25s ease; font-family: system-ui,sans-serif; font-size: 10px; text-align: center; }
.toast.is-showing { opacity: 1; transform: translate(-50%,0); }

/* The digital wish wall keeps the public gesture warm and lightweight. */
.public-wishes { padding: 28px 16px 8px; }
.public-wishes .section-head > span, .library-count { color: var(--ink-3); font-family: system-ui,sans-serif; font-size: 10px; white-space: nowrap; }
.public-wish-list { display: grid; grid-auto-flow: column; grid-auto-columns: min(84%,340px); gap: 11px; margin: 0 -16px; padding: 0 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.public-wish-list::-webkit-scrollbar { display: none; }
.public-wish-card { min-height: 196px; padding: 17px; display: grid; align-content: start; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 20px 20px 9px 20px; background: linear-gradient(145deg,rgba(250,249,245,.88),rgba(223,223,215,.52)); box-shadow: 0 8px 26px rgba(32,43,40,.055); }
.public-wish-top { display: flex; justify-content: space-between; align-items: center; }
.public-wish-top > span { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid rgba(158,85,72,.46); color: var(--cinnabar); font-size: 17px; }
.public-wish-top small { color: var(--ink-3); font-family: system-ui,sans-serif; font-size: 9px; }
.public-wish-card blockquote { min-height: 67px; margin: 16px 0 13px; color: var(--ink); font-size: 15px; line-height: 1.75; }
.public-wish-card button { min-height: 38px; padding: 7px 11px; display: flex; align-items: center; gap: 6px; justify-self: start; border: 1px solid rgba(36,73,64,.18); border-radius: 999px; color: var(--pine); background: rgba(36,73,64,.06); cursor: pointer; font-family: system-ui,sans-serif; font-size: 10px; }
.public-wish-card button svg { width: 18px; height: 18px; }
.public-wish-card button strong { min-width: 16px; font-size: 10px; text-align: center; }
.public-wish-card button.is-blessed { color: white; border-color: var(--pine); background: var(--pine); }

.classics-section { padding-bottom: 8px; }
.book-shelf { display: grid; gap: 9px; }
.book-card { width: 100%; min-height: 92px; padding: 13px; display: grid; grid-template-columns: 54px 1fr 20px; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 19px 19px 8px 19px; text-align: left; background: rgba(250,249,245,.66); cursor: pointer; }
.book-card:nth-child(2) { background: rgba(36,73,64,.065); }
.book-card:nth-child(3) { background: rgba(169,146,104,.09); }
.book-mark { width: 54px; height: 62px; display: grid; place-items: center; position: relative; overflow: hidden; border: 1px solid rgba(36,73,64,.24); color: var(--pine); background: rgba(250,249,245,.62); font-size: 23px; }
.book-mark::after { content: ""; position: absolute; right: -18px; bottom: -18px; width: 42px; height: 42px; border: 1px solid currentColor; border-radius: 50%; opacity: .16; }
.book-card small, .book-card em { display: block; color: var(--ink-3); font-family: system-ui,sans-serif; font-size: 9px; font-style: normal; }
.book-card strong { display: block; margin: 5px 0 6px; font-size: 16px; font-weight: 500; }
.book-card > svg { width: 18px; height: 18px; color: var(--ink-3); }
.book-reader-head h2 { margin: 6px 0 5px; font-size: 27px; font-weight: 500; }
.book-reader-head > span { color: var(--ink-3); font-family: system-ui,sans-serif; font-size: 10px; }
.chapter-select { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; color: var(--ink-2); font-family: system-ui,sans-serif; font-size: 10px; }
.chapter-select select { width: 100%; min-height: 42px; padding: 8px 36px 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-light); }
.classic-reader { margin-top: 18px; padding: 22px 18px 26px; position: relative; border: 1px solid var(--line); background: rgba(250,249,245,.72); }
.classic-reader::before { content: ""; position: absolute; left: 7px; top: 7px; width: 20px; height: 20px; border-left: 1px solid rgba(158,85,72,.28); border-top: 1px solid rgba(158,85,72,.28); }
.classic-reader h3 { margin: 0 0 20px; color: var(--cinnabar); text-align: center; font-size: 18px; font-weight: 500; letter-spacing: .08em; }
.classic-reader p { margin: 0 0 13px; color: var(--ink); font-size: 16px; line-height: 2.05; text-indent: 2em; }
.reader-actions { margin-top: 14px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.reader-actions button { min-height: 42px; border: 1px solid var(--line); border-radius: 999px; color: var(--pine); background: var(--paper-light); cursor: pointer; font-family: system-ui,sans-serif; font-size: 11px; }
.reader-actions button:disabled { opacity: .35; cursor: default; }
.reader-actions button:last-child { color: white; background: var(--pine); }
.reader-actions strong { color: var(--ink-3); font-family: system-ui,sans-serif; font-size: 10px; }

.feed-card { overflow: hidden; border-color: var(--line); background: rgba(250,249,245,.7); }
.feed-card img { filter: saturate(.78) contrast(.96); }
.event-hero, .story-card, .reading-feature, .practice-cover, .hero-scene, .blessing-banner { isolation: isolate; }

/* Theme-aware surfaces. Images remain stable while paper, ink and actions change together. */
html[data-theme] .app-shell { background-color:var(--paper); transition:background-color .35s ease,color .35s ease; }
html[data-theme] .launch-screen { background:var(--pine); }
html[data-theme] .round-action { background:color-mix(in srgb,var(--paper-light) 74%,transparent); }
html[data-theme] .round-action[aria-pressed="true"] { color:white; background:var(--pine); box-shadow:0 0 0 4px color-mix(in srgb,var(--pine) 12%,transparent); }
html[data-theme] .bottom-nav > button { color:var(--ink-3); }
html[data-theme] .bottom-nav > button.is-active { color:var(--pine); }

/* 平行人格：传统时序与当代人格叙事的独立体验页。 */
.parallel-page { margin:0 -14px; padding-bottom:20px; }
.parallel-page button { cursor:pointer; }
.parallel-intro { min-height:calc(100svh - 190px); min-height:calc(100dvh - 190px); padding:24px 28px 36px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.parallel-sky { width:min(88vw,360px); aspect-ratio:1.35; margin:4px auto 20px; position:relative; overflow:hidden; border-radius:50% 50% 44% 44%; background:radial-gradient(circle at 50% 47%,rgba(231,217,184,.18) 0 12%,transparent 12.5%),radial-gradient(circle at 50% 50%,rgba(102,129,139,.42),rgba(38,57,68,.97) 62%,#1d2b34); box-shadow:0 26px 65px rgba(30,47,56,.25); }
.parallel-sky::before,.parallel-sky::after { content:""; position:absolute; inset:16% -12%; border:1px solid rgba(227,218,196,.2); border-radius:50%; transform:rotate(12deg); }
.parallel-sky::after { inset:-8% 22%; transform:rotate(-28deg); }
.parallel-sky > i { position:absolute; border:1px solid rgba(228,219,197,.13); border-radius:50%; }
.parallel-sky > i:nth-child(1) { inset:25%; }
.parallel-sky > i:nth-child(2) { width:6px; height:6px; left:21%; top:27%; border:0; background:#cfbd94; box-shadow:210px 68px 0 rgba(207,189,148,.55),120px -20px 0 rgba(255,255,255,.4),34px 105px 0 rgba(255,255,255,.32); }
.parallel-sky > i:nth-child(3) { left:50%; top:14%; bottom:13%; width:1px; border:0; background:linear-gradient(transparent,rgba(225,210,179,.32),transparent); transform:rotate(36deg); }
.parallel-self { width:64px; height:64px; display:grid; place-items:center; position:absolute; z-index:2; border:1px solid rgba(255,255,255,.2); border-radius:50%; color:#f3eddf; background:linear-gradient(145deg,#718994,#314b58); box-shadow:0 18px 30px rgba(0,0,0,.22),inset 0 0 0 5px rgba(255,255,255,.035); font-size:24px; }
.parallel-self.self-a { left:23%; top:27%; }
.parallel-self.self-b { right:22%; bottom:22%; background:linear-gradient(145deg,#a47b68,#5f4e4c); }
.parallel-kicker { margin:0 0 8px; color:var(--cinnabar); font-family:system-ui,sans-serif; font-size:9px; font-weight:750; letter-spacing:.22em; }
.parallel-intro h2 { margin:0; font-size:clamp(28px,8vw,38px); font-weight:500; line-height:1.28; letter-spacing:.06em; }
.parallel-intro > p:not(.parallel-kicker) { max-width:310px; margin:13px auto 26px; color:var(--ink-2); font-family:system-ui,sans-serif; font-size:12px; line-height:1.8; }
.parallel-primary { width:100%; min-height:54px; padding:13px 20px; display:flex; align-items:center; justify-content:center; gap:9px; border-radius:999px; color:#f8f4eb; background:linear-gradient(135deg,#3d5965,#273f4b); box-shadow:0 12px 26px rgba(32,53,62,.22); font-family:system-ui,sans-serif; font-size:14px; font-weight:700; letter-spacing:.08em; }
.parallel-primary svg { width:18px; height:18px; }
.parallel-intro .parallel-primary { max-width:330px; }
.parallel-last-link { margin-top:13px; padding:9px 15px; color:var(--ink-2); background:transparent; font-family:system-ui,sans-serif; font-size:11px; }

.parallel-form { margin:4px 14px 24px; padding:20px 18px 24px; border:1px solid var(--line); border-radius:27px; background:color-mix(in srgb,var(--paper-light) 91%,transparent); box-shadow:var(--shadow-sm); }
.parallel-form-head { display:grid; grid-template-columns:38px 1fr 30px; align-items:center; gap:10px; margin-bottom:18px; }
.parallel-form-head > button,.parallel-back-button { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--ink-2); background:rgba(255,255,255,.45); }
.parallel-form-head > button svg,.parallel-back-button svg { width:17px; height:17px; transform:rotate(180deg); }
.parallel-form-head p { margin:0 0 3px; color:var(--cinnabar); font-family:system-ui,sans-serif; font-size:9px; font-weight:700; letter-spacing:.15em; }
.parallel-form-head h2 { margin:0; font-size:21px; font-weight:500; }
.parallel-form-head > span { color:var(--gold); font-family:Georgia,serif; font-size:24px; }
.parallel-form-note { margin-bottom:17px; padding:12px 13px; display:grid; grid-template-columns:24px 1fr; gap:9px; border-radius:15px; color:var(--ink-2); background:color-mix(in srgb,var(--pine) 7%,transparent); }
.parallel-form-note svg { width:20px; height:20px; color:var(--pine); }
.parallel-form-note p { margin:0; font-family:system-ui,sans-serif; font-size:10px; line-height:1.65; }
.parallel-fields { display:grid; gap:12px; }
.parallel-fields label { display:grid; gap:7px; }
.parallel-fields label > span { display:flex; align-items:center; justify-content:space-between; font-family:system-ui,sans-serif; font-size:11px; font-weight:700; }
.parallel-fields label > span small { color:var(--ink-3); font-size:9px; font-weight:400; }
.parallel-fields input,.parallel-fields select { width:100%; height:50px; padding:0 14px; border:1px solid var(--line); border-radius:14px; outline:0; color:var(--ink); background:color-mix(in srgb,var(--paper) 72%,white); font-family:system-ui,sans-serif; font-size:14px; appearance:none; }
.parallel-fields input:focus,.parallel-fields select:focus { border-color:color-mix(in srgb,var(--pine) 52%,transparent); box-shadow:0 0 0 3px color-mix(in srgb,var(--pine) 10%,transparent); }
.field-help { margin-top:-2px; color:var(--ink-3); font-family:system-ui,sans-serif; font-size:9px; }
.parallel-consent { margin:17px 2px; display:grid; grid-template-columns:18px 1fr; gap:9px; align-items:start; color:var(--ink-2); font-family:system-ui,sans-serif; font-size:9px; line-height:1.55; }
.parallel-consent input { width:17px; height:17px; margin:0; accent-color:var(--pine); }
.parallel-method { margin:13px 7px 0; color:var(--ink-3); text-align:center; font-family:system-ui,sans-serif; font-size:8px; line-height:1.55; }

.parallel-loading { min-height:calc(100svh - 200px); min-height:calc(100dvh - 200px); padding:80px 24px 30px; place-items:center; align-content:start; text-align:center; }
.parallel-loading:not([hidden]) { display:grid; }
.parallel-loading-orbit { width:150px; height:150px; display:grid; place-items:center; position:relative; border:1px solid color-mix(in srgb,var(--pine) 24%,transparent); border-radius:50%; }
.parallel-loading-orbit::before,.parallel-loading-orbit::after { content:""; position:absolute; inset:12px -13px; border:1px solid color-mix(in srgb,var(--gold) 28%,transparent); border-radius:50%; animation:parallel-spin 4s linear infinite; }
.parallel-loading-orbit::after { inset:-13px 12px; animation-direction:reverse; animation-duration:5.5s; }
.parallel-loading-orbit i { position:absolute; inset:28px; border-radius:50%; background:radial-gradient(circle,rgba(82,116,128,.24),transparent 68%); animation:parallel-pulse 1.8s ease-in-out infinite; }
.parallel-loading-orbit span { width:66px; height:66px; display:grid; place-items:center; position:relative; z-index:1; border-radius:50%; color:#f5f1e7; background:linear-gradient(145deg,#708995,#304a57); font-size:25px; box-shadow:0 12px 28px rgba(31,50,59,.24); }
.parallel-loading p { margin:28px 0 9px; font-size:21px; line-height:1.55; letter-spacing:.06em; }
.parallel-loading small { color:var(--ink-3); font-family:system-ui,sans-serif; font-size:10px; }
@keyframes parallel-spin { to { transform:rotate(360deg); } }
@keyframes parallel-pulse { 50% { transform:scale(1.12); opacity:.55; } }

.parallel-result { padding-bottom:24px; }
.parallel-result-hero { min-height:650px; padding:24px 26px 29px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; overflow:hidden; isolation:isolate; position:relative; color:#f4f1e9; text-align:center; background:#15232d; }
.parallel-result-hero::before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,rgba(9,15,21,.08) 0%,rgba(15,26,34,.1) 39%,rgba(16,28,36,.76) 67%,#14242e 100%); }
.parallel-result-hero::after { content:""; position:absolute; z-index:-1; inset:0; opacity:.28; background:radial-gradient(circle at 18% 20%,var(--parallel-primary,#789b87),transparent 32%),radial-gradient(circle at 84% 49%,var(--parallel-secondary,#c46d57),transparent 38%); mix-blend-mode:screen; }
.parallel-cover-character { width:100%; height:100%; position:absolute; z-index:-2; inset:0; object-fit:cover; object-position:center top; filter:saturate(.83) contrast(1.04); transform:scale(1.015); }
.parallel-cover-aura { position:absolute; z-index:-1; left:50%; top:32%; width:280px; height:280px; transform:translate(-50%,-50%); pointer-events:none; }
.parallel-cover-aura i { position:absolute; inset:0; border:1px solid rgba(241,231,207,.15); border-radius:44% 56% 61% 39%/48% 38% 62% 52%; animation:parallel-spin 20s linear infinite; }
.parallel-cover-aura i:nth-child(2) { inset:35px -22px; border-color:rgba(241,231,207,.1); animation-duration:27s; animation-direction:reverse; }
.parallel-cover-aura i:nth-child(3) { inset:72px 20px; border-color:rgba(241,231,207,.08); animation-duration:16s; }
.parallel-result-hero .parallel-back-button { position:absolute; z-index:3; left:17px; top:18px; color:#ece6d8; border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.06); }
.parallel-result-hero > p { margin:0 0 12px; position:relative; z-index:2; color:#d9c89e; font-family:system-ui,sans-serif; font-size:8px; font-weight:700; letter-spacing:.16em; }
.parallel-type-mark { width:88px; height:88px; margin-bottom:12px; display:flex; align-items:center; justify-content:center; gap:0; position:relative; z-index:2; border:1px solid rgba(230,220,196,.2); border-radius:50%; }
.parallel-type-mark::before { content:""; position:absolute; inset:12px -10px; border:1px solid rgba(230,220,196,.12); border-radius:50%; transform:rotate(32deg); }
.parallel-type-mark span { width:39px; height:39px; display:grid; place-items:center; border-radius:50%; background:var(--parallel-primary,#617c87); box-shadow:0 10px 24px rgba(0,0,0,.24); font-size:16px; }
.parallel-type-mark span:last-child { margin-left:-7px; background:var(--parallel-secondary,#9c7663); }
.parallel-type-mark i { width:8px; height:1px; position:relative; z-index:2; background:#d5c39a; }
.parallel-result-hero h2,.parallel-result-hero h3,.parallel-result-hero blockquote,.parallel-birth-stamp { position:relative; z-index:2; }
.parallel-result-hero h2 { margin:0 0 4px; font-size:35px; font-weight:500; letter-spacing:.12em; text-shadow:0 3px 20px rgba(0,0,0,.35); }
.parallel-result-hero h3 { margin:0 0 8px; color:#eee3cb; font-size:18px; font-weight:450; text-shadow:0 2px 15px rgba(0,0,0,.34); }
.parallel-social-badge { margin:0 0 10px; display:flex; align-items:center; gap:7px; position:relative; z-index:2; font-family:system-ui,sans-serif; }
.parallel-social-badge span { color:rgba(244,241,233,.52); font-size:8px; letter-spacing:.12em; }
.parallel-social-badge strong { color:#f4e2b5; font-size:11px; letter-spacing:.08em; }
.parallel-result-hero blockquote { max-width:310px; margin:0; color:rgba(244,241,233,.77); font-family:system-ui,sans-serif; font-size:11px; line-height:1.7; }
.parallel-cover-tags { margin-top:12px; display:flex; gap:6px; position:relative; z-index:2; }
.parallel-cover-tags span { padding:5px 9px; border:1px solid rgba(255,255,255,.14); border-radius:999px; color:rgba(255,255,255,.75); background:rgba(255,255,255,.07); backdrop-filter:blur(9px); font-family:system-ui,sans-serif; font-size:8px; }
.parallel-birth-stamp { margin-top:16px; padding-top:12px; display:flex; align-items:center; gap:9px; border-top:1px solid rgba(255,255,255,.13); color:rgba(244,241,233,.52); font-family:system-ui,sans-serif; font-size:8px; }
.parallel-birth-stamp i { width:3px; height:3px; border-radius:50%; background:#cdbd98; }

.parallel-three-selves,.parallel-balance,.parallel-gifts,.parallel-social-profile,.parallel-chapters,.parallel-letter,.parallel-feedback,.parallel-result-actions { margin-left:14px; margin-right:14px; }
.parallel-three-selves,.parallel-balance { padding-top:27px; }
.parallel-section-title p { margin:0; color:var(--cinnabar); font-family:system-ui,sans-serif; font-size:9px; font-weight:750; letter-spacing:.18em; }
.parallel-section-title h2 { margin:4px 0 14px; font-size:21px; font-weight:500; }
.parallel-self-cards { display:grid; grid-auto-flow:column; grid-auto-columns:80%; gap:10px; margin:0 -14px; padding:0 14px 6px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.parallel-self-cards::-webkit-scrollbar { display:none; }
.parallel-self-cards article { min-height:170px; padding:17px; scroll-snap-align:start; border:1px solid var(--line); border-radius:20px; background:color-mix(in srgb,var(--paper-light) 82%,transparent); box-shadow:var(--shadow-sm); }
.parallel-self-cards small { color:var(--cinnabar); font-family:system-ui,sans-serif; font-size:9px; font-weight:750; letter-spacing:.14em; }
.parallel-self-cards strong { margin:11px 0 9px; display:block; font-size:19px; font-weight:500; }
.parallel-self-cards p { margin:0; color:var(--ink-2); font-family:system-ui,sans-serif; font-size:10px; line-height:1.75; }

.parallel-balance { padding-bottom:26px; }
.parallel-bars { display:grid; gap:9px; padding:17px; border:1px solid var(--line); border-radius:19px; background:color-mix(in srgb,var(--paper-light) 76%,transparent); }
.parallel-bar { display:grid; grid-template-columns:22px 1fr 30px; align-items:center; gap:9px; font-family:system-ui,sans-serif; font-size:9px; }
.parallel-bar > span:first-child { font-family:inherit; font-size:11px; font-weight:700; }
.parallel-bar-track { height:6px; overflow:hidden; border-radius:99px; background:var(--paper-deep); }
.parallel-bar-track i { height:100%; display:block; border-radius:inherit; transform-origin:left; animation:parallel-bar-in .8s cubic-bezier(.2,.8,.25,1) both; }
.parallel-bar > em { color:var(--ink-3); text-align:right; font-style:normal; }
@keyframes parallel-bar-in { from { transform:scaleX(0); } }
.parallel-basis-toggle { width:100%; margin-top:10px; padding:12px; display:flex; align-items:center; justify-content:center; gap:5px; border-radius:13px; color:var(--ink-2); background:transparent; font-family:system-ui,sans-serif; font-size:9px; }
.parallel-basis-toggle svg { width:14px; height:14px; transition:transform .2s; }
.parallel-basis-toggle[aria-expanded="true"] svg { transform:rotate(90deg); }
.parallel-pillars { margin-top:4px; padding:15px; grid-template-columns:repeat(4,1fr); gap:7px; border:1px solid var(--line); border-radius:17px; background:color-mix(in srgb,var(--paper-deep) 54%,transparent); }
.parallel-pillars:not([hidden]) { display:grid; }
.parallel-pillar { display:grid; justify-items:center; gap:4px; padding:9px 4px; border-radius:12px; background:color-mix(in srgb,var(--paper-light) 76%,transparent); }
.parallel-pillar small { color:var(--ink-3); font-family:system-ui,sans-serif; font-size:8px; }
.parallel-pillar strong { font-size:18px; font-weight:500; letter-spacing:.08em; }
.parallel-pillars > p { grid-column:1/-1; margin:4px 0 0; color:var(--ink-3); text-align:center; font-family:system-ui,sans-serif; font-size:8px; }

.parallel-chapters { display:grid; gap:11px; }
.parallel-chapters > article { padding:20px 18px; display:grid; grid-template-columns:32px 1fr; gap:10px; border:1px solid var(--line); border-radius:21px; background:color-mix(in srgb,var(--paper-light) 81%,transparent); }
.parallel-chapters .parallel-lead { display:block; color:#f3eee4; border:0; background:radial-gradient(circle at 90% 10%,rgba(207,189,148,.17),transparent 31%),linear-gradient(140deg,#283d47,#1e3039); }
.parallel-lead small { color:#cdbd98; font-family:system-ui,sans-serif; font-size:9px; font-weight:750; letter-spacing:.15em; }
.parallel-lead p { margin:11px 0 0; font-size:15px; line-height:1.9; }
.parallel-chapter-no { color:var(--gold); font-family:Georgia,serif; font-size:20px; }
.parallel-chapters article small { color:var(--cinnabar); font-family:system-ui,sans-serif; font-size:8px; font-weight:750; letter-spacing:.13em; }
.parallel-chapters article h2 { margin:4px 0 9px; font-size:17px; font-weight:500; }
.parallel-chapters article p { margin:0; color:var(--ink-2); font-family:system-ui,sans-serif; font-size:10px; line-height:1.85; }
.parallel-chapters article blockquote { margin:13px 0 0; padding:12px 13px; border-left:2px solid var(--gold); color:var(--ink); background:color-mix(in srgb,var(--gold-light) 20%,transparent); font-size:11px; line-height:1.8; }
.parallel-strength-card dl { margin:0; }
.parallel-strength-card dt { margin-top:11px; color:var(--gold); font-family:system-ui,sans-serif; font-size:8px; font-weight:750; }
.parallel-strength-card dd { margin:4px 0 0; color:var(--ink-2); font-family:system-ui,sans-serif; font-size:10px; line-height:1.75; }

.parallel-gifts,.parallel-social-profile { padding-top:27px; }
.parallel-gift-grid { display:grid; gap:10px; }
.parallel-gift-grid article { min-height:160px; padding:21px 19px; overflow:hidden; position:relative; border:1px solid var(--line); border-radius:22px; box-shadow:0 12px 28px rgba(55,61,58,.07); }
.parallel-gift-grid article::after { content:""; width:120px; height:120px; position:absolute; right:-48px; top:-48px; border:1px solid currentColor; border-radius:50%; opacity:.1; }
.parallel-gift-grid small { font-family:system-ui,sans-serif; font-size:9px; font-weight:750; letter-spacing:.14em; }
.parallel-gift-grid h3 { max-width:280px; margin:7px 0 10px; font-size:16px; font-weight:520; }
.parallel-gift-grid p { margin:0; color:var(--ink-2); font-family:system-ui,sans-serif; font-size:10px; line-height:1.85; }
.parallel-gift-grid .is-soft { color:#9c665e; background:linear-gradient(145deg,#f5ece7,#eee2db); }
.parallel-gift-grid .is-strong { color:#d7c79f; background:linear-gradient(145deg,#263b46,#1d2e37); }
.parallel-gift-grid .is-strong p { color:rgba(246,241,229,.72); }
.parallel-gift-grid .is-gifted { color:#3d7466; background:linear-gradient(145deg,#edf2ec,#dfe9e3); }
#parallelGiftTags { margin-top:14px; display:flex; flex-wrap:wrap; gap:6px; }
#parallelGiftTags span { padding:5px 8px; border-radius:999px; color:#f7f3e9; background:#537d70; font-family:system-ui,sans-serif; font-size:8px; }

.parallel-social-lead { padding:23px 21px; overflow:hidden; position:relative; border-radius:24px; color:#f5f0e5; background:linear-gradient(135deg,#243943,#496069); box-shadow:0 16px 36px rgba(34,53,61,.14); }
.parallel-social-lead::after { content:""; width:190px; height:190px; position:absolute; right:-88px; top:-98px; border:1px solid rgba(255,255,255,.13); border-radius:44% 56% 61% 39%; transform:rotate(22deg); }
.parallel-social-lead > span { color:#d9c89e; font-family:system-ui,sans-serif; font-size:9px; font-weight:750; letter-spacing:.18em; }
.parallel-social-lead h3 { margin:7px 0 6px; font-size:20px; font-weight:480; }
.parallel-social-lead p { margin:0; color:rgba(245,240,229,.67); font-family:system-ui,sans-serif; font-size:10px; line-height:1.7; }
.parallel-social-lead blockquote { margin:18px 0 0; padding-top:15px; border-top:1px solid rgba(255,255,255,.14); font-size:13px; line-height:1.8; }
.parallel-social-grid { display:grid; gap:9px; margin-top:10px; }
.parallel-social-grid article { padding:18px 18px 19px; border:1px solid var(--line); border-radius:20px; background:color-mix(in srgb,var(--paper-light) 82%,transparent); }
.parallel-social-grid small { color:var(--cinnabar); font-family:system-ui,sans-serif; font-size:8px; font-weight:750; letter-spacing:.12em; }
.parallel-social-grid h3 { margin:5px 0 8px; font-size:15px; font-weight:520; }
.parallel-social-grid p { margin:0; color:var(--ink-2); font-family:system-ui,sans-serif; font-size:10px; line-height:1.85; }

.parallel-letter { margin-top:12px; padding:25px 21px; position:relative; overflow:hidden; border-radius:22px; color:#f3eee4; background:linear-gradient(145deg,#8c6759,#594d4c); box-shadow:0 16px 34px rgba(65,49,46,.18); }
.parallel-letter::after { content:"另一个我"; position:absolute; right:-7px; top:12px; color:rgba(255,255,255,.055); font-size:42px; writing-mode:vertical-rl; letter-spacing:.12em; }
.parallel-letter > p { margin:0 0 12px; color:#dfcda8; font-family:system-ui,sans-serif; font-size:9px; font-weight:750; letter-spacing:.16em; }
.parallel-letter blockquote { margin:0; position:relative; z-index:1; font-size:15px; line-height:2; }
.parallel-letter > div { margin-top:19px; padding-top:14px; display:grid; gap:6px; position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.16); }
.parallel-letter > div span { color:rgba(243,238,228,.55); font-family:system-ui,sans-serif; font-size:8px; }
.parallel-letter > div strong { font-family:system-ui,sans-serif; font-size:11px; line-height:1.7; }
.parallel-feedback { padding:25px 0 12px; text-align:center; }
.parallel-feedback p { margin:0 0 11px; color:var(--ink-2); font-family:system-ui,sans-serif; font-size:10px; }
.parallel-feedback > div { display:flex; justify-content:center; gap:7px; }
.parallel-feedback button { padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:var(--ink-2); background:color-mix(in srgb,var(--paper-light) 76%,transparent); font-family:system-ui,sans-serif; font-size:9px; }
.parallel-feedback button.is-active { color:#f8f4eb; border-color:var(--pine); background:var(--pine); }
.parallel-result-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.parallel-result-actions button { min-height:47px; display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); border-radius:999px; color:var(--pine); background:color-mix(in srgb,var(--paper-light) 78%,transparent); font-family:system-ui,sans-serif; font-size:10px; font-weight:700; }
.parallel-result-actions #saveParallelPoster { grid-column:1/-1; min-height:54px; color:#f8f4eb; border-color:var(--pine); background:linear-gradient(135deg,var(--pine),#496875); box-shadow:0 12px 24px rgba(40,69,69,.16); }
.parallel-result-actions #restartParallel { grid-column:1/-1; min-height:38px; color:var(--ink-3); border:0; background:transparent; }
.parallel-result-actions svg { width:15px; height:15px; }
.parallel-result-boundary { margin:8px 30px 0; color:var(--ink-3); text-align:center; font-family:system-ui,sans-serif; font-size:8px; line-height:1.55; }
.parallel-poster-preview { padding:8px 0 4px; text-align:center; }
.parallel-poster-preview h2 { margin:0 0 5px; font-size:20px; font-weight:520; }
.parallel-poster-preview > p { margin:0 0 14px; color:var(--ink-3); font-family:system-ui,sans-serif; font-size:10px; }
.parallel-poster-preview img { width:100%; max-height:62vh; display:block; border-radius:18px; object-fit:contain; background:#1c2c35; box-shadow:0 16px 36px rgba(20,33,39,.18); -webkit-touch-callout:default; }
.parallel-poster-preview .sheet-primary { margin-top:13px; }
.menu-icon.violet { color:#5f6277; background:#e6e4eb; }
html[data-theme] .task-row,
html[data-theme] .streak-panel,
html[data-theme] .practice-cards button,
html[data-theme] .saved-wish-card,
html[data-theme] .mini-event,
html[data-theme] .feed-card,
html[data-theme] .shop-card,
html[data-theme] .book-card { background:color-mix(in srgb,var(--paper-light) 70%,transparent); }
html[data-theme] .task-row.is-done { background:color-mix(in srgb,var(--pine) 12%,var(--paper)); border-color:color-mix(in srgb,var(--pine) 28%,transparent); }
html[data-theme] .public-wish-card { background:linear-gradient(145deg,color-mix(in srgb,var(--paper-light) 90%,transparent),color-mix(in srgb,var(--paper-deep) 62%,transparent)); }
html[data-theme] .public-wish-card button { color:var(--pine); border-color:color-mix(in srgb,var(--pine) 22%,transparent); background:color-mix(in srgb,var(--pine) 7%,transparent); }
html[data-theme] .public-wish-card button.is-blessed { color:var(--paper-light); background:var(--pine); border-color:var(--pine); }
html[data-theme] .profile-hero { background:linear-gradient(145deg,var(--pine-2),var(--pine)); }
html[data-theme] .profile-clouds { color:var(--paper-light); }
html[data-theme] .member-card { color:var(--ink); background:linear-gradient(135deg,var(--paper-deep),var(--paper-light)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 22%,transparent); }
html[data-theme] .native-sheet { color:var(--ink); background:var(--paper); }
html[data-theme] .result-sheet { color:var(--ink); background:linear-gradient(150deg,var(--paper-light),var(--paper-deep)); }
html[data-theme] .sheet-secondary,
html[data-theme] .reader-actions button,
html[data-theme] .chapter-select select,
html[data-theme] .char-input-line input,
html[data-theme] .char-chips button { background:var(--paper-light); }

@media (min-width: 600px) {
  body { padding: 0; }
  .app-shell { min-height: 100svh; min-height: 100dvh; border-radius: 0; }
  .app-header { border-radius: 0; }
  .bottom-nav { bottom: 0 !important; border-radius: 0; }
  .native-sheet { bottom: 0; border-radius: 25px 25px 0 0; }
  .focus-overlay, .blessing-result { inset: 0 auto; height: 100svh; height: 100dvh; border-radius: 0; }
}

@media (max-width: 370px) {
  .header-points { min-width:52px; padding-inline:8px; }
  .header-points span { display:none; }
  .hero-scene { height: 410px; }
  .quick-icon { width: 48px; height: 48px; border-radius: 16px; }
  .quick-grid strong { font-size: 12px; }
  .blessing-hero { height: 475px; }
  .blessing-title h2 { font-size: 29px; }
  .result-sheet { min-height: 545px; padding-inline: 25px; }
  .account-panel { grid-template-columns:1fr; }
}

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