/* Reference-led emotion entry: black stage, scarlet 3D visual, luminous inputs. */
.app.write-theme { background: #080808; color: #f7f7f7; padding-bottom: calc(110px + env(safe-area-inset-bottom)); min-height: 100dvh; }
.write-theme .bottom-nav { display: flex; background: #101010; border-top-color: #342925; }
.write-theme .header { background: #080808; border-bottom-color: #252120; color: #d8d8d8; }
.write-theme .brand > span { color: #f0ecea; }
.write-theme .nav-item { color: #c2b8b1; }
.write-theme .bottom-nav .nav-item.active { color: #ff8b77; }
.write-logo { color: #ff2b13; font-size: 34px; font-weight: 950; letter-spacing: -2.5px; line-height: 1; }
.write-theme .write-page { padding: 0; }
.write-landing-panel { min-height: calc(100dvh - 112px); display: flex; flex-direction: column; align-items: center; padding-bottom: 27px; }
.write-landing-title { text-align: center; padding: 36px 18px 0; position: relative; z-index: 1; }
.write-landing-title h1 { font-size: 34px; font-weight: 800; letter-spacing: -.045em; line-height: 1.4; }
.write-landing-title p { color: #d0d0d0; font-size: 17px; margin-top: 9px; letter-spacing: -.035em; }
.write-hero-image { width: 100%; aspect-ratio: 1; object-fit: contain; margin: 8px 0 0; mix-blend-mode: screen; mask-image: linear-gradient(transparent, #000 7%, #000 94%, transparent); }
.write-mode-options { display: flex; justify-content: center; gap: 56px; margin-top: 2px; padding: 0 24px; }
.write-mode-options button { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 0; }
.write-mode-options button > span { display: grid; place-items: center; width: 74px; height: 74px; background: linear-gradient(145deg,#2b2b2be8,#151515); border: 1px solid #484848; border-radius: 25px; box-shadow: inset 0 1px 2px #ffffff10,0 5px 16px #0008; transition: border-color .15s,background .15s; }
.write-mode-options .icon { width: 34px; height: 34px; color: #eee; stroke-width: 1.6; }
.write-mode-options strong { color: #e4e4e4; font-size: 16px; font-weight: 600; }
.write-mode-options button:hover > span { border-color: #a64435; background: #292020; }
.write-editor { padding: 4px 24px 28px; }
.write-editor > .text-button { color: #c9c1bc; }
.write-theme .write-heading { padding-top: 15px; }
.write-theme .write-heading p, .write-theme .field-help, .write-theme .save-note, .write-theme legend span { color: #b7b0ac; }
.write-theme .write-page .chip { background: #1c1b1b; color: #d1c9c4; border-color: #403835; }
.write-theme .write-page .chip.selected { color: #fff0ec; background: #66271e; border-color: #f86b51; }
.write-theme .emotion-details { background: #171311; border: 1px solid #302420; }
.write-theme .emotion-selection { color: #ff9b86; }
.write-theme .emotion-selection span { color: #c5ada4; }
.write-theme .writing-box { background: #151515; border-color: #3c3532; }
.write-theme .writing-box textarea { color: #f4f0ed; }
.write-theme .writing-box textarea::placeholder { color: #b0a6a0; }
.write-theme .writing-footer, .write-theme .photo-add { color: #bab0aa; }
.write-theme .visibility-options span { background: #1c1a19; color: #c4bbb5; border-color: #423733; }
.write-theme .visibility-options input:checked + span { background: #59271e; border-color: #ff775c; color: #fff0ea; }
.write-theme .primary { background: #dc2d1c; }
.write-theme .form-error { color: #ff9f8d; }
@media (max-width:359px) {
  .write-landing-title { padding-top: 26px; }
  .write-landing-title h1 { font-size: 30px; }
  .write-landing-title p { font-size: 16px; }
  .write-mode-options { gap: 44px; }
  .write-mode-options button > span { width: 66px; height: 66px; border-radius: 22px; }
  .write-editor { padding-inline: 18px; }
}
@media (min-height:900px) { .write-landing-title { padding-top: 58px; } .write-mode-options { margin-top: 18px; } }

/* Home shares the same dark surface and red visual language. */
.app.home-theme {
  --text-secondary: #b7b0ac;
  --text-accent: #ff8d79;
  --muted: #b7b0ac;
  background: #080808;
  color: #f7f7f7;
}
.home-theme .header { background: #080808; border-bottom-color: #252120; }
.home-theme .brand > span { color: #f0ecea; }
.home-theme .brand, .home-theme .home-intro .red { color: #ff4932; }
.home-theme .avatar.small { color: #ff9a83; background: #35211c; }
.home-theme .home-intro { padding-top: 26px; }
.home-theme .home-intro h1 { font-size: 32px; }
.home-theme .home-intro p { color: #c2b9b3; }
.home-theme .greeting { color: #dfb1a4; background: #241713; border: 1px solid #3d251f; }
.home-theme .live-dot { background: #ff6a4d; }
.home-hero-image { width: calc(100% + 48px); max-width: none; height: 325px; object-fit: contain; margin: 5px -24px 0; mix-blend-mode: screen; mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent); }
.home-theme .primary { background: #dc2d1c; box-shadow: 0 7px 24px #ef291825; }
.home-theme .hero-cta { margin-top: 0; }
.home-theme .quick-grid button { background: linear-gradient(145deg,#1e1b1a,#121111); border-color: #39302c; box-shadow: inset 0 1px 0 #ffffff08; }
.home-theme .quick-grid strong { color: #f1eae6; }
.home-theme .quick-grid small { color: #c0b4ad; }
.home-theme .quick-icon { background: #38221c; color: #ff9c86; border: 1px solid #503026; }
.home-theme .eyebrow { color: #c29d90; }
.home-theme .text-button { color: #ff9b86; }
.home-theme .home-feed .post-card { background: #151313; border-color: #342b27; box-shadow: none; }
.home-theme .tag { color: #ffb09c; background: #3c211b; }
.home-theme .post-actions { color: #c0b4ad; }
.home-theme .post-actions .liked { color: #ff8b77; }
.home-theme .post-actions .liked .icon { fill: #ff4932; stroke: #ff4932; }
.home-theme .empty > span { background: #2d1c17; color: #f5a58b; }
.home-theme .empty p, .home-theme .gentle-note, .home-theme .loading { color: #b7b0ac; }
.home-theme .bottom-nav { background: #101010f5; border-top-color: #342925; }
.home-theme .nav-item { color: #c2b8b1; }
.home-theme .bottom-nav .nav-item.active { color: #ff8b77; }
.home-theme .nav-write > span { background: linear-gradient(145deg,#f34429,#cf2116); box-shadow: 0 4px 20px #ec2a2438; }
body:has(.home-theme), body:has(.write-theme) { background: #101010; }
body:has(.home-theme) .desktop-note, body:has(.write-theme) .desktop-note { color: #f3eeeb; }
body:has(.home-theme) .desktop-note .brand > span, body:has(.write-theme) .desktop-note .brand > span { color: #f3eeeb; }
body:has(.home-theme) .desktop-note > small, body:has(.write-theme) .desktop-note > small { color: #bfaaa0; }
body:has(.home-theme) .desktop-orbit, body:has(.write-theme) .desktop-orbit { color: #5a221b; }
@media (max-width:359px) {
  .home-theme .home-intro h1 { font-size: 28px; }
  .home-hero-image { width: calc(100% + 34px); height: 280px; margin-inline: -17px; }
}