:root {
  color-scheme: light;
  --ink: #20211f;
  --muted: #686c65;
  --soft: #f6f7f8;
  --paper: #ffffff;
  --line: #ded8ca;
  --accent: #ad2438;
  --accent-dark: #7d1727;
  --gold: #c9952d;
  --leaf: #456b58;
  --sky: #dce7ea;
  --shadow: 0 18px 42px rgba(58, 43, 30, .14);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}

/* Historical premium override layer. Do not append new component rules here. */
body {
  color: #333333 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9f8 54%, #ffffff 100%) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", "Noto Sans JP", sans-serif !important;
  font-weight: 400 !important;
}

.app-shell {
  max-width: 1240px !important;
  margin: 24px auto !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 18px !important;
  overflow: clip !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 24px 80px rgba(20, 43, 77, .10) !important;
}

.sake-logo,
.brand-mark,
.top-brand-logo,
.mini-avatar {
  background: url("./assets/sakelike_symbol.svg") center / contain no-repeat !important;
  box-shadow: none !important;
}

.sake-logo svg {
  display: none !important;
}

.brand-name,
#view-title {
  color: #142B4D !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 560 !important;
}

h1,
h2,
h3,
.nav-item b,
.post-title-row h3,
.trend-item strong,
.side-card strong {
  font-weight: 620 !important;
  letter-spacing: 0 !important;
}

.side-nav {
  width: 232px !important;
  background: rgba(255, 255, 255, .88) !important;
  border-right: 1px solid rgba(20, 43, 77, .10) !important;
}

.nav-item {
  min-height: 46px !important;
  border-radius: 12px !important;
  color: #1f2f43 !important;
  font-weight: 500 !important;
}

.nav-item.active {
  color: #142B4D !important;
  background: rgba(20, 43, 77, .065) !important;
}

.nav-item span img {
  width: 21px !important;
  height: 21px !important;
  object-fit: contain !important;
}

.nav-item b {
  font-size: 14px !important;
  font-weight: 560 !important;
}

.top-bar {
  grid-template-columns: minmax(180px, 250px) minmax(360px, 1fr) !important;
  min-height: 72px !important;
  padding: 14px 28px !important;
  border-bottom: 1px solid rgba(20, 43, 77, .10) !important;
  background: rgba(255, 255, 255, .88) !important;
  backdrop-filter: blur(18px) !important;
}

.top-brand-logo {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
}

.top-brand .kicker,
.quick-compose {
  display: none !important;
}

.search-box,
.auth-chip,
select {
  border: 1px solid rgba(20, 43, 77, .10) !important;
  background: rgba(247, 247, 245, .88) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

.primary-button {
  background: #142B4D !important;
  border-color: #142B4D !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(20, 43, 77, .18) !important;
  font-weight: 560 !important;
}

.feed-layout {
  grid-template-columns: minmax(0, 1fr) 290px !important;
  gap: 24px !important;
  padding: 28px !important;
}

.story-rail {
  gap: 18px !important;
  margin: 0 0 20px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid rgba(20, 43, 77, .10) !important;
}

.story-rail span {
  width: 64px !important;
  height: 64px !important;
  padding: 3px !important;
  overflow: hidden !important;
  border: 2px solid rgba(244, 167, 185, .82) !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(20, 43, 77, .08) !important;
}

.story-rail span img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.story-rail .story-add {
  color: #142B4D !important;
  font-size: 32px !important;
  font-weight: 300 !important;
}

.section-head h2 {
  color: #1f2530 !important;
  font-size: 22px !important;
  font-weight: 620 !important;
}

.section-head p {
  color: #6f7480 !important;
  font-weight: 400 !important;
}

.post-card {
  display: grid !important;
  grid-template-columns: minmax(300px, 1.05fr) minmax(300px, .95fr) !important;
  min-height: 248px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .90) !important;
  box-shadow: 0 10px 30px rgba(20, 43, 77, .075) !important;
}

/* Keep off-screen timeline cards out of style/layout/paint work without
   changing the card structure needed by the mobile photo/detail interactions. */
#post-list .post-card {
  content-visibility: auto;
  /* Reserve vertical space only. The shorthand also supplied a 560px inline
     fallback on small screens, which made cards extend beyond the viewport. */
  contain-intrinsic-block-size: 560px;
}

.timeline-load-sentinel {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 12px 0 28px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted, #657085);
  font: inherit;
  font-size: 13px;
}

.label-art {
  width: 100% !important;
  height: 100% !important;
  min-height: 248px !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}

.post-content {
  padding: 20px 22px !important;
  gap: 9px !important;
}

.post-eyebrow {
  color: #555f6f !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.post-avatar {
  width: 30px !important;
  height: 30px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  background: #fff !important;
}

.post-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.post-title-row h3 {
  color: #151a22 !important;
  font-size: 22px !important;
  font-weight: 680 !important;
}

.post-card p {
  color: #333333 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}

.post-meta {
  color: #606978 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

.tag,
.status-pill {
  border: 0 !important;
  border-radius: 6px !important;
  background: rgba(20, 43, 77, .065) !important;
  color: #40516a !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.post-actions button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #222832 !important;
  box-shadow: none !important;
  font-weight: 520 !important;
}

.post-actions button img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
}

.trend-panel,
.side-card,
.compose-panel,
.compose-preview,
.db-card,
.rank-card,
.stat-card,
.profile-hero,
.profile-setup {
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .80) !important;
  box-shadow: 0 10px 30px rgba(20, 43, 77, .075) !important;
}

.mobile-nav {
  border-top: 1px solid rgba(20, 43, 77, .10) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 -10px 26px rgba(20, 43, 77, .10) !important;
}

.mobile-nav button {
  color: #4d5767 !important;
  font-weight: 500 !important;
}

.mobile-nav button img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

.mobile-nav button.active,
.mobile-nav button[data-view="post"] {
  background: transparent !important;
  color: #142B4D !important;
}

@media (max-width: 980px) {
  .evening-compose-modal.active [data-evening-desktop-only] {
    display: none !important;
  }

  .app-shell {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .side-nav {
    display: none !important;
  }

  .top-bar {
    grid-template-columns: 1fr auto !important;
    min-height: 64px !important;
    padding: 12px 16px !important;
  }

  .top-actions {
    display: none !important;
  }

  #view-title {
    font-size: 24px !important;
  }

  .feed-layout {
    display: block !important;
    padding: 14px 12px 22px !important;
  }

  .trend-panel {
    display: none !important;
  }

  .story-rail {
    margin-right: -12px !important;
    margin-left: -12px !important;
    padding: 8px 12px 14px !important;
  }

  .post-card {
    display: block !important;
    min-height: 0 !important;
  }

  .label-art {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  .post-content {
    padding: 14px 14px 16px !important;
  }

  .post-title-row h3 {
    font-size: 18px !important;
  }
}

/* Staging-only timeline performance panel. It remains hidden unless app.js enables it. */
.timeline-performance-debug {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 10050;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.timeline-performance-debug-toggle {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(17, 18, 20, .88);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
  backdrop-filter: blur(10px);
}

.timeline-performance-debug-panel {
  width: min(248px, calc(100vw - 24px));
  margin: 8px 0 0 auto;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
  background: rgba(17, 18, 20, .93);
  color: rgba(255, 255, 255, .92);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .24);
  backdrop-filter: blur(12px);
}

.timeline-performance-debug-panel p {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, .62);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.timeline-performance-debug-panel dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 12px;
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
}

.timeline-performance-debug-panel dt { color: rgba(255, 255, 255, .65); }
.timeline-performance-debug-panel dd { margin: 0; font-weight: 700; }

/* Historical final premium override layer. Superseded by component sections near EOF. */
body {
  color: #333333 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9f8 52%, #ffffff 100%) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", "Noto Sans JP", sans-serif !important;
  font-weight: 400 !important;
}

.app-shell {
  max-width: 1240px !important;
  margin: 24px auto !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 18px !important;
  overflow: clip !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 24px 80px rgba(20, 43, 77, .10) !important;
}

.sake-logo {
  background: url("./assets/sakelike_symbol.svg") center / contain no-repeat !important;
}

.sake-logo svg {
  display: none !important;
}

.brand-mark,
.top-brand-logo,
.mini-avatar {
  background: url("./assets/sakelike_symbol.svg") center / contain no-repeat !important;
  box-shadow: none !important;
}

.brand-mark {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
}

.brand-name,
#view-title {
  color: #142B4D !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 560 !important;
}

.brand-name {
  font-size: 22px !important;
}

#view-title {
  font-size: 25px !important;
  line-height: 1.05 !important;
}

h1,
h2,
h3,
.nav-item b,
.post-title-row h3,
.trend-item strong,
.side-card strong {
  font-weight: 620 !important;
  letter-spacing: 0 !important;
}

.side-nav {
  width: 232px !important;
  background: rgba(255, 255, 255, .88) !important;
  border-right: 1px solid rgba(20, 43, 77, .10) !important;
}

.nav-item {
  min-height: 46px !important;
  border-radius: 12px !important;
  color: #1f2f43 !important;
  font-weight: 500 !important;
}

.nav-item.active {
  color: #142B4D !important;
  background: rgba(20, 43, 77, .065) !important;
}

.nav-item span,
.mobile-nav button img {
  display: inline-grid !important;
  place-items: center !important;
}

.nav-item span img {
  width: 21px !important;
  height: 21px !important;
  object-fit: contain !important;
}

.nav-item b {
  font-size: 14px !important;
  font-weight: 560 !important;
}

.top-bar {
  grid-template-columns: minmax(180px, 250px) minmax(360px, 1fr) !important;
  min-height: 72px !important;
  padding: 14px 28px !important;
  border-bottom: 1px solid rgba(20, 43, 77, .10) !important;
  background: rgba(255, 255, 255, .88) !important;
  backdrop-filter: blur(18px) !important;
}

.top-brand-logo {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
}

.top-brand .kicker,
.quick-compose {
  display: none !important;
}

.search-box,
.auth-chip,
select {
  border: 1px solid rgba(20, 43, 77, .10) !important;
  background: rgba(247, 247, 245, .88) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

.primary-button {
  background: #142B4D !important;
  border-color: #142B4D !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(20, 43, 77, .18) !important;
  font-weight: 560 !important;
}

.feed-layout {
  grid-template-columns: minmax(0, 1fr) 290px !important;
  gap: 24px !important;
  padding: 28px !important;
}

.story-rail {
  gap: 18px !important;
  margin: 0 0 20px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid rgba(20, 43, 77, .10) !important;
}

.story-rail button {
  min-width: 74px !important;
  color: #23344c !important;
  font-weight: 500 !important;
}

.story-rail span {
  width: 64px !important;
  height: 64px !important;
  padding: 3px !important;
  overflow: hidden !important;
  border: 2px solid rgba(244, 167, 185, .82) !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(20, 43, 77, .08) !important;
}

.story-rail span img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.story-rail .story-add {
  color: #142B4D !important;
  font-size: 32px !important;
  font-weight: 300 !important;
  border-color: rgba(20, 43, 77, .18) !important;
}

.section-head h2 {
  color: #1f2530 !important;
  font-size: 22px !important;
  font-weight: 620 !important;
}

.section-head p {
  color: #6f7480 !important;
  font-weight: 400 !important;
}

.post-card {
  display: grid !important;
  grid-template-columns: minmax(300px, 1.05fr) minmax(300px, .95fr) !important;
  min-height: 248px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .90) !important;
  box-shadow: 0 10px 30px rgba(20, 43, 77, .075) !important;
}

.label-art {
  width: 100% !important;
  height: 100% !important;
  min-height: 248px !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}

.post-content {
  padding: 20px 22px !important;
  gap: 9px !important;
}

.post-eyebrow {
  color: #555f6f !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.post-avatar {
  width: 30px !important;
  height: 30px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  background: #fff !important;
}

.post-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.post-title-row h3 {
  color: #151a22 !important;
  font-size: 22px !important;
  font-weight: 680 !important;
}

.post-card p {
  color: #333333 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}

.post-meta {
  color: #606978 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

.tag,
.status-pill {
  border: 0 !important;
  border-radius: 6px !important;
  background: rgba(20, 43, 77, .065) !important;
  color: #40516a !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.post-actions button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #222832 !important;
  box-shadow: none !important;
  font-weight: 520 !important;
}

.post-actions button img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
}

.trend-panel,
.side-card,
.compose-panel,
.compose-preview,
.db-card,
.rank-card,
.stat-card,
.profile-hero,
.profile-setup {
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .80) !important;
  box-shadow: 0 10px 30px rgba(20, 43, 77, .075) !important;
}

.mobile-nav {
  border-top: 1px solid rgba(20, 43, 77, .10) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 -10px 26px rgba(20, 43, 77, .10) !important;
}

.mobile-nav button {
  color: #4d5767 !important;
  font-weight: 500 !important;
}

.mobile-nav button img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

.mobile-nav button.active {
  background: transparent !important;
  color: #142B4D !important;
}

.mobile-nav button[data-view="post"] {
  background: transparent !important;
  color: #142B4D !important;
}

@media (max-width: 980px) {
  .app-shell {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .side-nav {
    display: none !important;
  }

  .top-bar {
    grid-template-columns: 1fr auto !important;
    min-height: 64px !important;
    padding: 12px 16px !important;
  }

  .top-actions {
    display: none !important;
  }

  #view-title {
    font-size: 24px !important;
  }

  .feed-layout {
    display: block !important;
    padding: 14px 12px 22px !important;
  }

  .trend-panel {
    display: none !important;
  }

  .story-rail {
    margin-right: -12px !important;
    margin-left: -12px !important;
    padding: 8px 12px 14px !important;
  }

  .post-card {
    display: block !important;
    min-height: 0 !important;
  }

  .label-art {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  .post-content {
    padding: 14px 14px 16px !important;
  }

  .post-title-row h3 {
    font-size: 18px !important;
  }
}

/* Premium visual refresh based on SakeLike Logo Set and page design */
:root {
  --indigo: #142B4D;
  --sakura: #F4A7B9;
  --seigaiha: #6FAB87;
  --paper: #fbfaf7;
  --ink: #333333;
  --muted-ink: #6f7480;
  --line-soft: rgba(20, 43, 77, .105);
  --panel-soft: rgba(255, 255, 255, .86);
  --shadow-soft: 0 18px 50px rgba(20, 43, 77, .10);
  --shadow-card: 0 10px 30px rgba(20, 43, 77, .075);
}

html {
  background: #f7f8f7;
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 0%, rgba(111, 171, 135, .10), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(244, 167, 185, .14), transparent 26%),
    linear-gradient(180deg, #fffdfa 0%, #f7f8f7 52%, #ffffff 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

h1,
h2,
h3,
.brand-name,
.nav-item b,
.post-title-row h3,
.trend-item strong,
.side-card strong {
  font-weight: 650;
  letter-spacing: 0;
}

.app-shell {
  max-width: 1240px;
  margin: 24px auto;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  overflow: clip;
  background: rgba(255, 255, 255, .64);
  box-shadow: 0 24px 80px rgba(20, 43, 77, .10);
  backdrop-filter: blur(16px);
}

.side-nav {
  width: 232px;
  padding: 24px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(251, 250, 247, .82));
  border-right: 1px solid var(--line-soft);
}

.brand-block {
  gap: 10px;
  margin-bottom: 26px;
}

.sake-logo {
  background: url("./assets/sakelike_symbol.svg") center / contain no-repeat !important;
}

.sake-logo svg {
  display: none !important;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: transparent;
  box-shadow: none;
}

.top-brand-logo,
.mini-avatar {
  background: url("./assets/sakelike_symbol.svg") center / contain no-repeat !important;
  box-shadow: none;
}

.brand-name {
  color: var(--indigo);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
}

.brand-sub {
  color: #4f5a66;
  font-size: 12px;
  font-weight: 400;
}

.nav-list {
  gap: 6px;
}

.nav-item {
  min-height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  color: #1f2f43;
  font-weight: 500;
}

.nav-item span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 0;
}

.nav-item span img {
  width: 21px;
  height: 21px;
  object-fit: contain;
}

.nav-item b {
  font-size: 14px;
  font-weight: 560;
}

.nav-item.active {
  color: var(--indigo);
  background: rgba(20, 43, 77, .065);
}

.main-panel {
  max-width: none;
  padding: 0;
  background: rgba(255, 255, 255, .54);
}

.top-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(360px, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 72px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(18px);
}

.top-brand {
  gap: 10px;
}

.top-brand-logo {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.top-brand .kicker {
  display: none;
}

#view-title {
  color: var(--indigo);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  line-height: 1.05;
  font-weight: 560;
}

.top-actions {
  justify-content: end;
  gap: 12px;
}

.search-box {
  height: 44px;
  border-color: var(--line-soft);
  background: rgba(247, 247, 245, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.global-search-shell {
  max-width: 420px;
}

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

.primary-button,
.secondary-button,
.auth-provider,
.segmented button,
.post-actions button {
  font-weight: 560;
}

.primary-button {
  background: var(--indigo);
  border-color: var(--indigo);
  box-shadow: 0 12px 26px rgba(20, 43, 77, .18);
}

.primary-button:hover {
  transform: translateY(-1px);
}

.feed-layout {
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 24px;
  padding: 28px;
}

.quick-compose {
  display: none;
}

.story-rail {
  margin: 0 0 20px;
  padding: 0 0 14px;
  gap: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.story-rail button {
  min-width: 74px;
  color: #23344c;
  font-weight: 500;
}

.story-rail span {
  width: 64px;
  height: 64px;
  padding: 3px;
  overflow: hidden;
  border: 2px solid rgba(244, 167, 185, .82);
  background: #fff;
  box-shadow: 0 8px 18px rgba(20, 43, 77, .08);
}

.story-rail span img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.story-rail .story-add {
  color: var(--indigo);
  font-size: 32px;
  font-weight: 300;
  border-color: rgba(20, 43, 77, .18);
}

.story-rail small {
  font-size: 12px;
  font-weight: 450;
}

.section-head h2 {
  color: #1f2530;
  font-size: 22px;
}

.section-head p {
  color: var(--muted-ink);
  font-weight: 400;
}

.segmented {
  padding: 3px;
  border-color: var(--line-soft);
  background: rgba(255, 255, 255, .76);
}

.segmented button {
  color: #4a5361;
  font-weight: 500;
}

.segmented button.active {
  color: var(--indigo);
  box-shadow: 0 8px 20px rgba(20, 43, 77, .08);
}

.post-list {
  gap: 18px;
}

.post-card {
  grid-template-columns: minmax(300px, 1.05fr) minmax(300px, .95fr);
  min-height: 248px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--panel-soft);
  box-shadow: var(--shadow-card);
}

.label-art {
  min-height: 248px;
  object-fit: cover;
}

.post-content {
  padding: 20px 22px;
  gap: 9px;
}

.post-eyebrow {
  gap: 8px;
  color: #555f6f;
  font-size: 12px;
  font-weight: 500;
}

.post-avatar {
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
}

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

.post-title-row h3 {
  color: #151a22;
  font-size: 22px;
  font-weight: 680;
}

.post-meta {
  color: #606978;
  font-size: 13px;
  font-weight: 400;
}

.post-card p {
  color: #333;
  font-size: 14px;
  line-height: 1.75;
}

.tag,
.status-pill {
  border: 0;
  border-radius: 6px;
  background: rgba(20, 43, 77, .065);
  color: #40516a;
  font-size: 12px;
  font-weight: 500;
}

.rating-pill {
  background: rgba(244, 167, 185, .32);
  color: #8f344f;
  font-weight: 650;
}

.post-actions {
  margin-top: 4px;
  gap: 18px;
}

.post-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #222832;
  box-shadow: none;
}

.post-actions button img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.post-actions .text-action {
  padding: 3px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
}

.post-actions .danger-action {
  color: #a33a4f !important;
  background: rgba(244, 167, 185, .18) !important;
}

.image-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  display: none !important;
}

.image-lightbox.active {
  display: block !important;
}

.image-lightbox-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(10, 18, 30, .72) !important;
  backdrop-filter: blur(10px) !important;
}

.image-lightbox-panel {
  position: absolute !important;
  inset: min(5vh, 48px) min(4vw, 48px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: #101827 !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .36) !important;
}

.image-lightbox-toolbar {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 10px !important;
  background: rgba(255, 255, 255, .08) !important;
}

.image-lightbox-toolbar button {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .12) !important;
  color: #ffffff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.image-lightbox-stage {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: auto !important;
  padding: 20px !important;
}

.image-lightbox-stage img {
  max-width: none !important;
  max-height: none !important;
  width: auto !important;
  height: auto !important;
  transform: scale(var(--lightbox-zoom, 1)) !important;
  transform-origin: center !important;
  transition: transform .14s ease !important;
}

.image-lightbox-arrow {
  position: absolute !important;
  top: 50% !important;
  z-index: 4 !important;
  display: none !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .16) !important;
  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 320 !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
  backdrop-filter: blur(12px) !important;
  cursor: pointer !important;
}

.image-lightbox.has-multiple .image-lightbox-arrow {
  display: grid !important;
}

.image-lightbox-arrow.prev {
  left: 18px !important;
}

.image-lightbox-arrow.next {
  right: 18px !important;
}

.image-lightbox-dots {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 16px !important;
  z-index: 4 !important;
  display: none !important;
  justify-content: center !important;
  gap: 7px !important;
}

.image-lightbox.has-multiple .image-lightbox-dots {
  display: flex !important;
}

.image-lightbox-dots button {
  width: 7px !important;
  height: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .46) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .28) !important;
}

.image-lightbox-dots button.active {
  width: 18px !important;
  background: #ffffff !important;
}

.trend-panel,
.side-card,
.compose-panel,
.compose-preview,
.db-card,
.rank-card,
.stat-card,
.profile-hero,
.profile-setup {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--shadow-card);
}

.trend-panel {
  position: sticky;
  top: 98px;
  align-self: start;
  padding: 22px;
}

.trend-panel h2 {
  color: #222832;
  font-size: 18px;
  font-weight: 650;
}

.trend-item {
  border-bottom-color: rgba(20, 43, 77, .10);
}

.trend-item strong {
  font-weight: 600;
}

.mobile-nav {
  border-top: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 -10px 26px rgba(20, 43, 77, .10);
  backdrop-filter: blur(18px);
}

.mobile-nav button {
  color: #4d5767;
  font-weight: 500;
}

.mobile-nav button img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.mobile-nav button.active {
  color: var(--indigo);
}

@media (max-width: 980px) {
  .app-shell {
    display: block;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .side-nav {
    display: none;
  }

  .main-panel {
    padding-bottom: 86px;
  }

  .top-bar {
    grid-template-columns: 1fr auto;
    min-height: 64px;
    padding: 12px 16px;
  }

  .top-actions {
    display: none;
  }

  .top-brand-logo {
    width: 36px;
    height: 36px;
  }

  #view-title {
    font-size: 24px;
  }

  .feed-layout {
    display: block;
    padding: 14px 12px 22px;
  }

  .trend-panel {
    display: none;
  }

  .story-rail {
    margin-right: -12px;
    margin-left: -12px;
    padding: 8px 12px 14px;
  }

  .section-head {
    align-items: start;
    gap: 12px;
  }

  .section-head h2 {
    font-size: 20px;
  }

  .segmented {
    width: 100%;
  }

  .post-card {
    display: block;
    min-height: 0;
    border-radius: 12px;
  }

  .label-art {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .post-content {
    padding: 14px 14px 16px;
  }

  .post-title-row h3 {
    font-size: 18px;
  }

  .post-actions {
    justify-content: space-between;
    padding-top: 4px;
  }

  .mobile-nav span {
    font-size: 10px;
  }
}

@media (min-width: 981px) {
  .mobile-nav {
    display: none;
  }
}

/* Social notifications: a calm inbox, with one familiar bell affordance. */
.notification-icon-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
}

.notification-badge {
  position: absolute;
  top: -7px;
  right: -10px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #b94a5a;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.notifications-page {
  width: min(760px, 100%);
  margin: 0 auto;
}

.notifications-head {
  align-items: center;
  margin-bottom: 18px;
}

.notifications-list {
  display: grid;
  gap: 22px;
}

.notification-day {
  display: grid;
  gap: 7px;
}

.notification-day h3 {
  margin: 0 2px 2px;
  color: #647084;
  font-size: .78rem;
  font-weight: 750;
}

.notification-row,
.notifications-state {
  width: 100%;
  min-height: 68px;
  border: 1px solid rgba(20, 43, 77, .10);
  border-radius: 15px;
  background: rgba(255, 255, 255, .92);
  color: #142b4d;
  text-align: left;
}

.notification-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 10px;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  font: inherit;
  cursor: pointer;
}

.notification-row:hover,
.notification-row:focus-visible {
  border-color: rgba(20, 43, 77, .28);
  background: #fff;
}

.notification-row.is-unread {
  border-color: rgba(185, 74, 90, .23);
  background: #fffaf8;
}

.notification-row.is-read {
  opacity: .66;
}

.notification-row-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f3f5f8;
  color: #142b4d;
}

.notification-row-icon img {
  width: 23px;
  height: 23px;
}

.notification-row-copy {
  min-width: 0;
  color: #49596c;
  font-size: .91rem;
  line-height: 1.45;
}

.notification-row-copy strong {
  color: #142b4d;
  font-weight: 780;
}

.notification-row-copy small {
  display: block;
  margin-top: 2px;
  color: #7b8797;
  font-size: .76rem;
}

.notification-row-unread {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b94a5a;
}

.notifications-state {
  margin: 0;
  padding: 24px 18px;
  color: #687587;
  text-align: center;
}

.mobile-notification-button {
  display: none;
}

@media (max-width: 980px) {
  .mobile-notification-button {
    grid-column: 3;
    justify-self: end;
    z-index: 3;
    display: grid !important;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border: 1px solid rgba(20, 43, 77, .12);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: #142b4d;
    box-shadow: 0 8px 20px rgba(20, 43, 77, .08);
  }

  .mobile-notification-button img {
    width: 24px;
    height: 24px;
  }

  .mobile-notification-button .notification-badge {
    top: -4px;
    right: -7px;
  }

  .mobile-admin-menu:not(.hidden-field) {
    right: max(64px, calc(64px + env(safe-area-inset-right))) !important;
  }

  .notifications-head {
    align-items: flex-start;
  }

  .notifications-head .compact-button {
    min-height: 42px;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: #ffffff;
  min-height: 100vh;
}

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

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100vh;
}

.side-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 18px;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
}

.brand-block {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 28px;
}

.brand-mark, .profile-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-weight: 800;
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .12);
}

.brand-name {
  font-size: 20px;
  font-weight: 800;
}

.brand-sub, .mini-label, .kicker {
  color: var(--muted);
  font-size: 12px;
}

.nav-list {
  display: grid;
  gap: 8px;
}

.nav-item {
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  color: var(--muted);
  text-align: left;
}

.nav-item span {
  width: 24px;
  color: var(--accent);
  text-align: center;
}

.nav-item.active {
  background: #f1e4d4;
  color: var(--ink);
}

.side-card {
  margin-top: 26px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.side-card strong {
  display: block;
  font-size: 36px;
  line-height: 1;
  margin: 8px 0;
}

.main-panel {
  min-width: 0;
  padding: 24px 28px 60px;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 26px;
}

.kicker {
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 800;
}

h1, h2, p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 30px;
  line-height: 1.15;
}

h2 {
  font-size: 18px;
  margin-bottom: 6px;
}

p {
  color: var(--muted);
  line-height: 1.65;
}

.top-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.search-box {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 260px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}

select, .primary-button, .secondary-button {
  border-radius: 8px;
  border: 1px solid var(--line);
  min-height: 42px;
  padding: 0 14px;
  background: white;
}

.primary-button {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
  font-weight: 700;
}

.secondary-button {
  color: var(--accent-dark);
  font-weight: 700;
}

.compact-button {
  min-height: 34px;
  padding: 0 10px;
}

.auth-chip {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .8);
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.post-modal-close {
  display: none;
}

.mobile-compose-fab {
  display: none;
}

.feed-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 16px;
}

.section-head.compact {
  align-items: start;
}

.segmented {
  display: flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.65);
}

.segmented button {
  border: 0;
  border-radius: 6px;
  padding: 8px 12px;
  background: transparent;
  color: var(--muted);
}

.segmented button.active {
  background: white;
  color: var(--accent-dark);
  box-shadow: 0 4px 12px rgba(60, 42, 25, .08);
}

.post-list {
  display: grid;
  gap: 14px;
}

.post-card, .trend-panel, .compose-panel, .compose-preview, .db-card, .rank-card, .profile-hero, .stat-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow);
}

.post-card {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
}

.label-art {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  object-fit: cover;
  background: var(--sky);
  border: 1px solid rgba(32, 33, 31, .12);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.post-title-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.post-title-row h3 {
  margin: 0 0 4px;
  font-size: 20px;
}

.rating-pill, .tag, .status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f0e1ce;
  color: var(--accent-dark);
  font-weight: 800;
  font-size: 13px;
}

.tag {
  background: #e2ece5;
  color: var(--leaf);
}

.status-pill {
  background: #f7ead7;
}

.post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.post-actions button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  min-height: 36px;
  padding: 0 10px;
}

.trend-panel {
  position: sticky;
  top: 24px;
  align-self: start;
  padding: 16px;
}

.trend-list {
  display: grid;
  gap: 10px;
}

.trend-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.trend-item:last-child {
  border-bottom: 0;
}

.compose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  max-width: 1180px;
}

.compose-panel, .compose-preview {
  padding: 18px;
}

.compose-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
  gap: 18px 22px;
  align-items: start;
}

.compose-panel > .section-head {
  grid-column: 1 / -1;
}

.compose-panel > .post-type-row,
.compose-panel > .ocr-box,
.compose-panel > .wide-label,
.compose-panel > .db-details,
.compose-panel > .rating-row,
.compose-panel > .form-actions,
.compose-panel > .form-status {
  grid-column: 1;
}

.image-uploader {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  grid-column: 2;
  grid-row: 2 / span 7;
  position: sticky;
  top: 18px;
  padding: 14px;
  border: 1px solid rgba(20, 43, 77, .08);
  border-radius: 10px;
  background: rgba(248, 249, 250, .74);
}

.photo-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.photo-slot {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 104px;
  padding: 10px;
  overflow: hidden;
  border: 1px dashed var(--accent);
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, .78), rgba(255, 255, 255, .78)),
    #ffffff;
  background-position: center;
  background-size: cover;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.photo-slot.drag-over {
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(63, 103, 84, .16), var(--shadow);
  transform: translateY(-2px);
}

.photo-slot::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image: inherit;
  background-position: center;
  background-size: cover;
  transform: rotate(var(--slot-rotation, 0deg)) scale(1.12);
  opacity: 0;
}

.photo-slot.has-photo::before {
  opacity: 1;
}

.photo-slot.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(20, 18, 15, .72));
}

.photo-slot input {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  opacity: 0;
  border: 0;
  pointer-events: none;
}

.photo-slot span,
.photo-slot small {
  position: relative;
  z-index: 1;
}

.photo-slot span {
  font-weight: 900;
}

.photo-slot small {
  color: var(--muted);
}

.photo-slot.has-photo span,
.photo-slot.has-photo small {
  color: white;
}

.photo-remove-button {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(20, 43, 77, .78) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 520 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.profile-grid-item.no-photo {
  display: grid !important;
  place-items: center !important;
  padding: 10px !important;
  background: rgba(20, 43, 77, .045) !important;
  color: rgba(20, 43, 77, .72) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

.profile-grid-item.no-photo span {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
}

.image-uploader input[type=file] {
  width: 100%;
  padding: 10px;
  border: 1px dashed var(--accent);
  border-radius: 8px;
  background: white;
}

.label-preview {
  display: grid;
  place-items: center;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #f2f4f5, #ffffff);
  color: var(--muted);
}

.label-preview img {
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  image-orientation: from-image;
  transition: filter .18s ease, transform .18s ease;
  cursor: zoom-in;
}

.tool-row, .photo-tool-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.photo-tool-row {
  grid-template-columns: 1fr 1fr;
}

.tool-row label, .form-grid label, .wide-label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

.tool-row input, .form-grid input, textarea {
  width: 100%;
}

.ocr-box {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background: #edf3f1;
  margin-bottom: 14px;
}

.ocr-box p {
  margin-bottom: 0;
  font-size: 13px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-grid input, textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 42px;
  padding: 10px 12px;
  background: white;
  color: var(--ink);
}

.sake-name-field {
  position: relative;
}

.sake-name-field > small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}

.sake-suggestions {
  position: absolute;
  z-index: 24;
  top: calc(100% - 18px);
  left: 0;
  right: 0;
  max-height: 290px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 14px 30px rgba(47, 42, 32, .16);
}

.sake-suggestion {
  display: grid;
  width: 100%;
  gap: 3px;
  padding: 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.sake-suggestion:hover,
.sake-suggestion:focus-visible {
  background: rgba(127, 88, 52, .11);
  outline: none;
}

.sake-suggestion strong {
  font-size: 14px;
}

.sake-suggestion span,
.sake-suggestion small,
.sake-suggestions-empty {
  color: var(--muted);
  font-size: 12px;
}

.sake-suggestion small {
  color: var(--accent-dark);
  font-weight: 700;
}

.sake-suggestions-empty {
  margin: 8px;
  line-height: 1.5;
}

.sake-style-field {
  min-width: 0;
}

.sake-style-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.sake-suggestions[hidden],
.sake-style-suggestions[hidden] {
  display: none;
}

.sake-style-suggestions > span {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.sake-style-suggestions button {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(127, 88, 52, .28);
  border-radius: 999px;
  background: rgba(127, 88, 52, .08);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
}

.sake-style-suggestions button:hover,
.sake-style-suggestions button:focus-visible {
  border-color: var(--accent);
  background: rgba(127, 88, 52, .14);
  outline: none;
}

textarea {
  resize: vertical;
}

.wide-label {
  margin-top: 12px;
}

.rating-row, .form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.rating-row input {
  flex: 1;
}

.form-actions {
  justify-content: space-between;
}

.toggle-line {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
}
.search-index-toggle {
  align-items: flex-start;
  max-width: 340px;
  line-height: 1.35;
}
.search-index-toggle input { margin-top: .2rem; }
.search-index-toggle b { display: block; color: var(--ink); font-size: .86rem; }
.search-index-toggle small { display: block; margin-top: .22rem; font-size: .72rem; }
.search-index-toggle.is-unavailable { opacity: .55; }

.form-status {
  min-height: 22px;
  margin: 12px 0 0;
  color: var(--accent-dark);
  font-weight: 700;
}

.db-grid, .ranking-grid, .stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.db-master-browser {
  margin: 1.25rem 0 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--line, #e4e8ef);
  border-radius: 20px;
  background: linear-gradient(145deg, #fffdf9, #f7f9fc);
}
.db-browser-head { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:1rem; }
.db-browser-head h3, .db-community-notes h3 { margin:.15rem 0 .35rem; }
.db-browser-head p { margin:0; color:var(--muted, #6b7280); }
.db-browser-head .db-master-total { display:inline-flex; width:max-content; margin-top:.6rem; padding:.32rem .58rem; border:1px solid #ead7b7; border-radius:999px; background:#fff9ef; color:#73532b; font-size:.76rem; font-weight:700; }
.db-master-count { white-space:nowrap; color:var(--muted, #6b7280); font-size:.85rem; }
.db-master-toolbar { display:grid; grid-template-columns:minmax(0, 1fr) minmax(180px, .34fr); gap:.6rem; margin:0 0 1rem; }
.db-master-toolbar .search-box { min-height:2.7rem; }
.db-master-guide { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .8rem; margin:0 0 1rem; padding:.65rem .8rem; border:1px solid #ead7b7; border-radius:12px; background:#fff9ef; color:#675334; font-size:.76rem; }
.db-master-guide strong { color:#64451f; }
.db-master-guide span { display:inline-flex; align-items:center; gap:.25rem; }
.db-master-guide-icon { display:inline-grid; place-items:center; width:1.35rem; height:1.35rem; border-radius:50%; font-size:.78rem; line-height:1; }
.db-master-guide-icon-post { background:#fff; border:1px solid #d8b477; color:#8a5c25; }
.db-master-guide-icon-stamp { background:#fff0da; color:#a86525; }
.db-master-guide-icon img { width:1rem; height:1rem; }
.jp-pref-map { margin-bottom:1rem; }
.jp-map-layout { display:grid; grid-template-columns:minmax(150px, 1fr) minmax(360px, 600px) minmax(150px, 1fr); gap:1rem; align-items:center; }
.jp-pref-map-shell { position:relative; min-width:0; }
.jp-map-reset { display:block; margin:0 0 .45rem auto; padding:.35rem .65rem; border:1px solid #475267; border-radius:999px; background:#121720; color:#dce4f0; font-size:.72rem; cursor:pointer; }
.jp-map-reset:hover { background:#202b3b; }
.jp-map-svg { display:block; width:100%; max-width:600px; height:auto; min-height:280px; margin:0 auto; border-radius:16px; background:#050608; transition:all .28s ease; }
.jp-map-svg .prefecture { cursor:pointer; opacity:.58; fill:var(--master-region-color, #596273) !important; stroke:#11151b; stroke-width:1.2; transition:opacity .18s, filter .18s, stroke .18s; }
.jp-map-svg .prefecture:hover, .jp-map-svg .prefecture:focus-visible { opacity:.95; filter:brightness(1.18); stroke:#fff; stroke-width:2.4; outline:none; }
.jp-map-svg .prefecture.master-partial { opacity:.78; }
.jp-map-svg .prefecture.master-complete { opacity:1; filter:saturate(1.25) brightness(1.05); }
.jp-map-svg .prefecture.master-active { opacity:1; stroke:#fff; stroke-width:3; filter:drop-shadow(0 0 5px rgba(255,255,255,.65)); }
.jp-map-loading { min-height:280px; display:grid; place-items:center; color:#aab4c4; font-size:.85rem; }
.jp-pref-side-list { display:grid; gap:.9rem; align-content:center; }
.jp-side-region { display:grid; gap:.18rem; }
.jp-side-region-button { display:flex; justify-content:space-between; align-items:center; padding:.35rem .2rem; border:0; border-bottom:1px solid #dfe4eb; background:transparent; color:#28364a; font-weight:800; text-align:left; cursor:pointer; }
.jp-side-region-button span { color:#9b6c2c; font-size:.68rem; font-weight:700; }
.jp-side-pref { display:flex; justify-content:space-between; gap:.4rem; width:100%; padding:.25rem .3rem; border:0; border-radius:6px; background:transparent; color:#5d6878; font-size:.72rem; text-align:left; cursor:pointer; }
.jp-side-pref small { color:#97a0ad; font-size:.64rem; white-space:nowrap; }
.jp-side-pref:hover, .jp-side-pref.active { background:#fff0d7; color:#754e24; }
.jp-map-tooltip { position:absolute; z-index:3; pointer-events:none; display:grid; gap:.2rem; min-width:145px; padding:.55rem .65rem; border:1px solid #4d5b72; border-radius:9px; background:rgba(8, 12, 20, .94); color:#f6f8fb; box-shadow:0 8px 20px rgba(0,0,0,.25); font-size:.75rem; }
.jp-map-tooltip span { color:#ccd6e5; font-size:.68rem; }
.jp-region-modal[hidden] { display:none; }
.jp-region-modal { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:1rem; }
.jp-region-modal-backdrop { position:absolute; inset:0; background:rgba(5,8,13,.78); backdrop-filter:blur(5px); }
.jp-region-modal-card { position:relative; z-index:2; width:min(920px, 96vw); min-height:62vh; max-height:92vh; overflow:auto; padding:1.25rem; border:1px solid #4b5669; border-radius:22px; background:#0d121b; box-shadow:0 24px 80px rgba(0,0,0,.42); }
.jp-region-modal-card h3 { margin:0 0 .75rem; color:#f4f7fb; }
.jp-region-modal-close { position:absolute; top:.7rem; right:.8rem; width:2.2rem; height:2.2rem; border:1px solid #4b5669; border-radius:50%; background:#171e2a; color:#f4f7fb; font-size:1.35rem; cursor:pointer; }
.jp-region-modal-map { position:relative; min-height:52vh; display:grid; place-items:center; border-radius:14px; background:#050608; overflow:hidden; }
.jp-region-modal-svg { width:100%; max-width:850px; height:min(68vh, 680px); background:#050608; }
.jp-region-modal-svg .prefecture { cursor:pointer; transition:filter .18s, stroke .18s; }
.jp-region-modal-svg .prefecture:hover, .jp-region-modal-svg .prefecture:focus-visible { filter:brightness(1.2); stroke:#fff; stroke-width:2.4; outline:none; }
.jp-region-map-tooltip { position:absolute; z-index:3; pointer-events:none; display:grid; gap:.2rem; min-width:145px; padding:.55rem .65rem; border:1px solid #4d5b72; border-radius:9px; background:rgba(8, 12, 20, .96); color:#f6f8fb; box-shadow:0 8px 20px rgba(0,0,0,.3); font-size:.75rem; }
.jp-region-map-tooltip span { color:#ccd6e5; font-size:.68rem; }
.jp-pref-button { min-height:3.05rem; padding:.35rem .25rem; border:1px solid var(--line, #e4e8ef); border-radius:10px; background:#fff; color:var(--ink, #162033); cursor:pointer; }
.jp-pref-button span, .jp-pref-button small { display:block; }
.jp-pref-button span { font-size:.78rem; font-weight:700; }
.jp-pref-button small { margin-top:.12rem; color:var(--muted, #7a8496); font-size:.68rem; }
.jp-pref-button:hover, .jp-pref-button.active { border-color:#b98b4b; background:#fff4df; color:#6f4b1f; }
.db-master-grid { display:grid; grid-template-columns:1fr; gap:.75rem; }
.db-master-card { padding:1rem; border:1px solid var(--line, #e4e8ef); border-radius:14px; background:#fff; }
.db-master-card-head { display:grid; grid-template-columns:2rem minmax(0, 1fr) 2rem; gap:.65rem; align-items:center; }
.db-master-card-head h4 { margin:.35rem 0 .65rem; font-size:1rem; }
.db-master-brewery-address { margin:-.4rem 0 .65rem; color:var(--muted, #7a8496); font-size:.74rem; }
.db-master-brewery-description { margin:-.35rem 0 .65rem; color:#566579; font-size:.74rem; line-height:1.45; }
.db-master-brewery-post { display:grid; place-items:center; width:2rem; height:2rem; padding:0; border:1px solid #d8b477; border-radius:50%; background:#fff8eb; color:#8a5c25; font-size:1.15rem; cursor:pointer; }
.db-master-products { display:grid; gap:.45rem; }
.db-master-product-wrap { display:grid; grid-template-columns:2.45rem 2.15rem 2.15rem minmax(0, 1fr); align-items:stretch; min-width:0; }
.db-master-share { display:grid; place-items:center; border:1px solid #d8b477; border-left:0; border-radius:0; background:#fff8eb; color:#8a5c25; font-size:1rem; cursor:pointer; }
.db-master-product { display:grid; min-width:0; gap:.1rem; text-align:left; padding:.5rem .7rem; border:1px solid #e5e7eb; border-left:0; border-radius:0 9px 9px 0; background:#fafafa; cursor:pointer; }
.db-master-product:hover { border-color:#b98b4b; background:#fff8eb; }
.db-master-product strong { min-width:0; overflow:hidden; font-size:.86rem; text-overflow:ellipsis; white-space:nowrap; }
.db-master-product small { color:var(--muted, #7a8496); font-size:.7rem; }
.db-master-stamp { display:grid; place-items:center; border:1px solid #e5e7eb; border-radius:9px 0 0 9px; background:#fff; cursor:pointer; }
.db-master-stamp img { width:1.12rem; height:1.12rem; opacity:.48; }
.db-master-stamp.active { background:#fff0da; color:#a86525; }
.db-master-stamp.active img { opacity:1; }
.db-master-post { border:1px solid #d8b477; border-left:0; border-radius:0; background:#fff8eb; color:#8a5c25; font-size:1.15rem; cursor:pointer; }
.db-master-post:hover { background:#fbe5bd; }
.db-master-empty { grid-column:1/-1; padding:1rem; color:var(--muted, #7a8496); }
.db-community-notes { margin-top:1.25rem; }
@media (max-width: 620px) {
  .db-master-browser { padding:.9rem; border-radius:15px; }
  .db-master-toolbar { grid-template-columns:1fr; }
  .jp-map-svg { min-height:260px; }
  .jp-map-layout { display:block; }
  .jp-pref-side-list { display:none; }
  .jp-map-reset { margin-right:0; }
  .jp-pref-button { min-height:2.7rem; }
  .db-master-grid { grid-template-columns:1fr; }
  .mobile-nav button { min-width:0; padding-inline:2px; font-size:.62rem; }
}

.db-card, .rank-card, .stat-card {
  padding: 16px;
}

.db-card h3, .rank-card h3, .stat-card h3 {
  margin: 0 0 8px;
}

.db-card dl {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 6px 10px;
  margin: 12px 0 0;
  font-size: 14px;
}

.db-card dt {
  color: var(--muted);
}

.rank-number {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--gold);
  color: white;
  font-weight: 900;
  margin-bottom: 10px;
}

.profile-hero {
  display: flex;
  gap: 28px;
  align-items: center;
  padding: 26px 6px 24px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(20, 43, 77, .10);
}

.profile-hero-instagram {
  box-shadow: none;
}

.profile-avatar {
  flex: 0 0 auto;
  width: 116px;
  height: 116px;
  font-size: 24px;
}

.profile-summary {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.profile-name-row {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.profile-username {
  margin: 0 0 4px;
  color: #6f7378;
  font-size: 14px;
  font-weight: 500;
}

.profile-name-row h2 {
  margin: 0;
  color: #15233a;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0;
}

.profile-edit-button {
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
}

.profile-menu-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.profile-menu-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: 1px solid rgba(20, 43, 77, .10);
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  color: #142B4D;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.profile-menu-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: none;
  min-width: 148px;
  padding: 8px;
  border: 1px solid rgba(20, 43, 77, .10);
  border-radius: 10px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 16px 36px rgba(20, 43, 77, .16);
}

.profile-menu-popover.active {
  display: grid;
  gap: 2px;
}

.profile-menu-popover button {
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #142B4D;
  font-size: 13px;
  font-weight: 520;
  text-align: left;
  cursor: pointer;
}

.profile-menu-popover button:hover,
.profile-menu-popover button:focus-visible {
  background: rgba(20, 43, 77, .06);
  outline: 0;
}

.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-meta span {
  border: 1px solid rgba(20, 43, 77, .10);
  border-radius: 999px;
  padding: 5px 10px;
  background: #f8f8f8;
  color: #4e5560;
  font-size: 12px;
  font-weight: 500;
}

.profile-bio-text {
  max-width: 560px;
  margin: 0;
  color: #34383f;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}

.profile-external-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.profile-social-link,
.profile-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-social-link {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(20, 43, 77, .13);
  border-radius: 50%;
  background: #fff;
  color: #142B4D;
  text-decoration: none;
}

.profile-social-link:hover,
.profile-social-link:focus-visible {
  border-color: rgba(20, 43, 77, .36);
  background: rgba(20, 43, 77, .05);
}

.profile-social-icon {
  width: 22px;
  height: 22px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
}

.profile-social-icon.instagram { font-size: 21px; font-weight: 500; }
.profile-social-icon.facebook { font-family: Arial, sans-serif; font-size: 20px; font-weight: 800; }
.profile-social-icon.youtube { font-size: 13px; }

.mobile-nav {
  display: none;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .side-nav {
    display: none;
  }

  .main-panel {
    padding: 18px 14px 88px;
  }

  .top-bar, .section-head, .top-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .search-box {
    min-width: 0;
  }

  .feed-layout, .compose-grid {
    grid-template-columns: 1fr;
  }

  .trend-panel {
    position: static;
  }

  .post-card {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
  }

  .post-title-row {
    flex-direction: column;
  }

  .form-grid, .tool-row, .db-grid, .ranking-grid, .stats-grid {
    grid-template-columns: 1fr;
  }

  .mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(16px);
  }

  .mobile-nav button {
    display: grid;
    gap: 3px;
    place-items: center;
    min-height: 62px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 17px;
  }

  .mobile-nav span {
    font-size: 11px;
  }

  .mobile-nav button.active {
    color: var(--accent);
    font-weight: 800;
  }
}

@media (max-width: 560px) {
  h1 {
    font-size: 24px;
  }

  .post-card {
    grid-template-columns: 1fr;
  }

  .label-art {
    max-height: 340px;
  }

  .form-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

body.profile-required::before {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: rgba(0, 0, 0, .48) !important;
  backdrop-filter: blur(8px) !important;
  pointer-events: none !important;
  content: "" !important;
}

body.profile-required .app-shell {
  position: relative !important;
  z-index: 1 !important;
}

body.profile-required .profile-setup {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 9010 !important;
  width: min(540px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 40px) !important;
  overflow: auto !important;
  transform: translate(-50%, -50%) !important;
  padding: clamp(22px, 4vw, 32px) !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .16) !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif !important;
}

body.profile-required .onboarding-wizard-head {
  display: grid !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}

.onboarding-progress {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 6px !important;
}

.onboarding-progress span {
  height: 4px !important;
  border-radius: 999px !important;
  background: #e6e6e6 !important;
}

.onboarding-progress span.active {
  background: #111111 !important;
}

body:not(.profile-required) .onboarding-wizard-head,
body:not(.profile-required) .onboarding-welcome,
body:not(.profile-required) .onboarding-skip-button {
  display: none !important;
}

body.profile-required .onboarding-welcome {
  display: none !important;
  gap: 14px !important;
}

body.profile-required .profile-setup[data-onboarding-step="0"] .onboarding-welcome {
  display: grid !important;
}

body.profile-required .profile-setup[data-onboarding-step="0"] > div:not(.onboarding-wizard-head):not(.onboarding-welcome),
body.profile-required .profile-setup[data-onboarding-step="0"] .profile-setup-grid,
body.profile-required .profile-setup[data-onboarding-step="0"] .onboarding-actions,
body.profile-required .profile-setup[data-onboarding-step="0"] #profile-status {
  display: none !important;
}

body.profile-required .profile-setup-grid {
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

body.profile-required .profile-basic-fields {
  display: grid !important;
  gap: 14px !important;
}

body.profile-required .profile-setup h2 {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

body.profile-required .profile-setup p {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #666 !important;
}

body.profile-required .profile-setup label {
  display: grid !important;
  gap: 10px !important;
  color: #222 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.profile-required .profile-setup-grid > *,
body.profile-required .profile-basic-fields > *,
body.profile-required .profile-preference-row,
body.profile-required .profile-preference-row > *,
body.profile-required .profile-link-field,
body.profile-required .account-deletion-panel {
  display: none !important;
}

body.profile-required .profile-setup[data-onboarding-step="1"] .profile-basic-fields,
body.profile-required .profile-setup[data-onboarding-step="1"] .profile-username-field,
body.profile-required .profile-setup[data-onboarding-step="2"] .profile-basic-fields,
body.profile-required .profile-setup[data-onboarding-step="2"] .profile-display-field,
body.profile-required .profile-setup[data-onboarding-step="3"] .avatar-upload {
  display: grid !important;
}

body.profile-required .avatar-save-button {
  display: none !important;
}

.required-field em {
  margin-left: 4px !important;
  color: #ad2438 !important;
  font-style: normal !important;
  font-weight: 650 !important;
}

.profile-setup input[aria-invalid="true"] {
  border-color: #ad2438 !important;
  box-shadow: 0 0 0 3px rgba(173, 36, 56, .10) !important;
}

body.profile-required .profile-setup label:has(#profile-username)::after {
  content: "3〜30文字。先頭・末尾の記号と連続記号は使えません。" !important;
  color: #888888 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

.profile-url-preview,
.profile-username-status,
.profile-username-suggestions {
  display: block !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

.profile-url-preview {
  padding: 9px 10px !important;
  border-radius: 12px !important;
  background: #f5f5f5 !important;
  color: #333333 !important;
}

.profile-username-status[data-status="ok"] {
  color: #16794a !important;
}

.profile-username-status[data-status="error"] {
  color: #ad2438 !important;
}

.profile-username-status[data-status="checking"] {
  color: #666666 !important;
}

.profile-username-suggestions {
  display: grid !important;
  gap: 7px !important;
}

.profile-username-suggestions button {
  width: fit-content !important;
  min-height: 32px !important;
  padding: 0 11px !important;
  border: 1px solid #dddddd !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-size: 12px !important;
}

body.profile-required .profile-setup input,
body.profile-required .profile-setup textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  border: 1px solid #dddddd !important;
  border-radius: 12px !important;
  padding: 11px 12px !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  outline: none !important;
}

body.profile-required .profile-setup input:focus,
body.profile-required .profile-setup textarea:focus {
  border-color: #111111 !important;
}

body.profile-required .profile-setup .primary-button {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  margin-top: 4px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #111111 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.onboarding-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

@media (max-width: 700px) {
  body.profile-required::before {
    display: none !important;
  }

  body.profile-required .app-shell {
    min-height: 100dvh !important;
  }

  body.profile-required .profile-setup {
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    padding: max(18px, env(safe-area-inset-top)) 20px 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.profile-required .onboarding-wizard-head {
    flex: 0 0 auto !important;
    padding-top: 4px !important;
  }

  body.profile-required .profile-setup > div:not(.onboarding-wizard-head):not(.onboarding-welcome) {
    flex: 0 0 auto !important;
    padding-top: 22px !important;
  }

  body.profile-required .profile-setup-grid {
    flex: 1 1 auto !important;
    align-content: start !important;
    padding: 22px 0 120px !important;
  }

  body.profile-required .onboarding-welcome {
    flex: 1 1 auto !important;
    align-content: center !important;
    padding: 36px 0 120px !important;
  }

  body.profile-required .onboarding-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 3 !important;
    flex: 0 0 auto !important;
    margin: auto -20px 0 !important;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(0, 0, 0, .06) !important;
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(16px) !important;
  }

  body.profile-required .profile-setup h2 {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }

  body.profile-required .profile-setup p,
  body.profile-required .profile-setup small,
  body.profile-required .profile-url-preview,
  body.profile-required .profile-username-status,
  body.profile-required .profile-username-suggestions {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  body.profile-required .profile-setup label {
    gap: 12px !important;
    font-size: 15px !important;
  }

  body.profile-required .profile-setup input,
  body.profile-required .profile-setup textarea,
  body.profile-required .profile-setup select {
    min-height: 48px !important;
    padding: 12px 13px !important;
    font-size: 16px !important;
  }

  body.profile-required .profile-setup .primary-button,
  body.profile-required .profile-setup .secondary-button {
    min-height: 50px !important;
    font-size: 16px !important;
  }
}

body.profile-required .profile-status,
body.profile-required #profile-status {
  margin: 0 !important;
  color: #666666 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.avatar-upload {
  align-content: start;
  display: grid;
  gap: 8px;
}

.avatar-file-label {
  display: inline-flex;
  width: fit-content;
  color: #1f3657;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.avatar-editor {
  display: none;
  gap: 8px;
}

.avatar-editor.active {
  display: grid;
}

.avatar-save-button {
  display: none;
  width: fit-content;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
}

.avatar-editor.active + .avatar-save-button {
  display: inline-flex;
}

.avatar-editor.saved-avatar + .avatar-save-button {
  display: none !important;
}

.avatar-preview-frame {
  position: relative;
  width: min(180px, 100%);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(20, 43, 77, .12);
  border-radius: 999px;
  background: #f6f7f8;
  touch-action: none;
  cursor: grab;
}

.avatar-preview-frame:active {
  cursor: grabbing;
}

.avatar-preview-frame img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  user-select: none;
  -webkit-user-drag: none;
}

.avatar-editor p {
  max-width: 220px;
  margin: 0;
  color: #7a8087;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.avatar-editor.saved-avatar p {
  display: none !important;
}

.avatar-editor.active:not(.saved-avatar) {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 2147481800 !important;
  display: grid !important;
  justify-items: center !important;
  width: min(420px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 40px) !important;
  overflow: auto !important;
  padding: 22px !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow:
    0 24px 80px rgba(10, 18, 30, .28),
    0 0 0 100vmax rgba(10, 18, 30, .42) !important;
  transform: translate(-50%, -50%) !important;
}

.avatar-editor.active:not(.saved-avatar)::before {
  content: "" !important;
  position: fixed !important;
  inset: -100vmax !important;
  z-index: -1 !important;
  background: rgba(10, 18, 30, .42) !important;
}

.avatar-editor.active:not(.saved-avatar) .avatar-preview-frame {
  width: min(320px, calc(100vw - 92px)) !important;
  max-width: 320px !important;
}

.avatar-editor.active:not(.saved-avatar) p {
  max-width: 320px !important;
  color: rgba(20, 43, 77, .58) !important;
  font-size: 12px !important;
}

.avatar-editor.active:not(.saved-avatar) + .avatar-save-button {
  position: fixed !important;
  top: min(calc(50% + 230px), calc(100dvh - 76px)) !important;
  left: 50% !important;
  bottom: auto !important;
  z-index: 2147481801 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: min(320px, calc(100vw - 64px)) !important;
  min-height: 46px !important;
  border-color: transparent !important;
  background: #142B4D !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(10, 18, 30, .22) !important;
  transform: translate(-50%, -50%) !important;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.app-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 10050;
  max-width: min(360px, calc(100vw - 32px));
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(17, 17, 17, .92);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .22s ease, transform .22s ease;
}

.app-toast.active {
  opacity: 1;
  transform: translate(-50%, 0);
}

.pwa-update-notice {
  position: fixed;
  z-index: 10100;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 14px 12px 16px;
  border: 1px solid rgba(184, 137, 47, .38);
  border-radius: 14px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 12px 32px rgba(36, 33, 29, .16);
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}

.pwa-update-notice[hidden] { display: none; }

.environment-badge {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 2147483647;
  display: none;
  padding: 6px 10px;
  border-radius: 999px;
  background: #7a5318;
  color: #fff;
  font: 700 11px/1 system-ui;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

html[data-environment="staging"] .environment-badge {
  display: block;
}

.pwa-update-button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 12px;
  border: 0;
  border-radius: 9px;
  background: var(--accent-dark);
  color: #fff;
  font: inherit;
  font-weight: 700;
}

.pwa-update-button:disabled { opacity: .6; }

.pwa-check-update-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid rgba(20, 43, 77, .12);
  border-radius: 10px;
  background: rgba(255, 255, 255, .72);
  color: #142b4d;
  font: inherit;
  font-size: 12px;
  font-weight: 680;
}

.pwa-check-update-button:disabled,
[data-pwa-check-update]:disabled {
  opacity: .62;
}

@media (max-width: 520px) {
  .pwa-update-notice {
    left: 16px;
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

/* SakeLike social UI refresh */
:root {
  --ink: #24211d;
  --muted: #706c64;
  --soft: #f6f7f8;
  --paper: #ffffff;
  --line: #e3dacb;
  --accent: #a1283a;
  --accent-dark: #6f1827;
  --gold: #b8892f;
  --leaf: #3f6754;
  --sky: #dfe9e7;
  --shadow: 0 14px 34px rgba(55, 43, 31, .12);
}

body {
  background: #ffffff;
}

.app-shell {
  grid-template-columns: 248px minmax(0, 1fr);
}

.side-nav {
  padding: 22px 16px;
  background: rgba(255, 255, 255, .94);
}

.brand-mark {
  background: linear-gradient(155deg, var(--accent), var(--accent-dark));
}

.brand-sub {
  max-width: 150px;
}

.nav-item {
  min-height: 46px;
}

.nav-item.active {
  background: #f3e5d3;
  box-shadow: inset 3px 0 0 var(--accent);
}

.main-panel {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 22px 26px 64px;
}

.top-bar {
  position: sticky;
  top: 0;
  z-index: 12;
  margin: -22px -26px 20px;
  padding: 18px 26px;
  border-bottom: 1px solid rgba(227, 218, 203, .72);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(18px);
}

.auth-panel {
  display: none;
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 460px);
  gap: 22px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.auth-panel.active {
  display: grid;
}

body.auth-modal-open {
  min-height: 100vh !important;
  overflow: hidden !important;
}

body.auth-modal-open #auth-panel,
body.auth-modal-open #auth-panel.active {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 440px) !important;
  place-content: center !important;
  margin: 0 !important;
  padding: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background-image:
    linear-gradient(rgba(5, 9, 15, .58), rgba(5, 9, 15, .68)),
    image-set(
      url("./assets/auth_background.webp") type("image/webp"),
      url("./assets/auth_background.svg") type("image/svg+xml")
    ) !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow: none !important;
}

body > #auth-panel.active,
body.auth-modal-open > #auth-panel,
body.auth-required > #auth-panel {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 440px) !important;
  place-content: center !important;
  margin: 0 !important;
  padding: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background-image:
    linear-gradient(rgba(5, 9, 15, .58), rgba(5, 9, 15, .68)),
    image-set(
      url("./assets/auth_background.webp") type("image/webp"),
      url("./assets/auth_background.svg") type("image/svg+xml")
    ) !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow: none !important;
}

body > #auth-panel.active .auth-copy,
body.auth-modal-open > #auth-panel .auth-copy,
body.auth-required > #auth-panel .auth-copy {
  display: none !important;
}

body > #auth-panel.active .auth-card,
body.auth-modal-open > #auth-panel .auth-card,
body.auth-required > #auth-panel .auth-card {
  display: grid !important;
  gap: 14px !important;
  width: min(440px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 36px) !important;
  overflow: auto !important;
  padding: 28px !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  border-radius: 14px !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .36) !important;
}

body.auth-modal-open #auth-panel .auth-copy {
  display: none !important;
}

body.auth-modal-open #auth-panel .auth-card {
  display: grid !important;
  gap: 14px !important;
  width: min(440px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 36px) !important;
  overflow: auto !important;
  padding: 28px !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  border-radius: 14px !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .36) !important;
}

body.auth-modal-open #auth-panel .auth-card,
body.auth-modal-open #auth-panel .auth-card * {
  pointer-events: auto !important;
}

#auth-button,
.auth-chip,
.auth-chip *,
.auth-mode-tabs button,
.auth-provider,
.auth-email-form,
.auth-email-form *,
#auth-email-submit {
  pointer-events: auto !important;
}

.auth-background,
.auth-background::before,
.auth-background::after,
.auth-visual,
.auth-visual::before,
.auth-visual::after,
.auth-ornament,
.auth-ornament::before,
.auth-ornament::after,
.auth-overlay,
.auth-overlay::before,
.auth-overlay::after,
.auth-copy,
.auth-copy::before,
.auth-copy::after,
.auth-benefits,
.auth-benefits::before,
.auth-benefits::after {
  pointer-events: none !important;
}

.auth-card,
.auth-card *,
#auth-button {
  pointer-events: auto !important;
}

#auth-button {
  position: relative !important;
  z-index: 100200 !important;
}

.auth-gate-launch {
  position: fixed !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  bottom: max(86px, calc(env(safe-area-inset-bottom) + 22px)) !important;
  z-index: 100300 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(20, 43, 77, .16) !important;
  border-radius: 999px !important;
  background: #142B4D !important;
  color: #ffffff !important;
  box-shadow: 0 14px 36px rgba(20, 43, 77, .24) !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

body.auth-signed-in .auth-gate-launch,
body.auth-modal-open .auth-gate-launch,
body.auth-booting .auth-gate-launch,
body.profile-required .auth-gate-launch {
  display: none !important;
}

body.auth-signed-out .auth-gate-launch {
  display: inline-flex !important;
}

body.auth-booting {
  min-height: 100vh;
  overflow: hidden;
  background: #f7f4ef;
}

body.auth-booting::before {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  display: grid;
  place-items: center;
  background: #f7f4ef;
  color: #142B4D;
  content: attr(data-auth-boot-message);
  font-size: 14px;
  font-weight: 700;
  pointer-events: auto;
}

body.auth-booting .app-shell,
body.auth-booting #auth-panel {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#auth-panel.active {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#auth-panel.active .auth-card,
#auth-panel.active .auth-card * {
  pointer-events: auto !important;
}

.auth-copy {
  display: grid;
  align-content: center;
  gap: 10px;
}

.auth-copy h2 {
  margin: 0;
  font-size: 28px;
}

.auth-copy p {
  color: var(--muted);
}

.auth-benefits {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.auth-benefits li {
  position: relative;
  padding-left: 22px;
  color: var(--ink);
  font-weight: 800;
}

.auth-benefits li::before {
  position: absolute;
  left: 0;
  color: var(--accent);
  content: "✓";
}

.auth-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(227, 218, 203, .9);
  border-radius: 8px;
  background: #ffffff;
}

.auth-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.auth-mode-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.auth-mode-tabs button.active {
  background: var(--accent);
  color: #ffffff;
}

.auth-provider-stack {
  display: grid;
  gap: 10px;
}

.auth-provider {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 900;
}

.auth-provider.google {
  border-color: #d8dde6;
  background: #ffffff;
}

.auth-provider.disabled {
  border-color: #d8dce1;
  background: #f3f5f6;
  color: #7a8087;
}

.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.auth-divider::before,
.auth-divider::after {
  height: 1px;
  background: var(--line);
  content: "";
}

.auth-email-form {
  display: grid;
  gap: 10px;
}

.auth-reset-form,
.auth-update-password-form {
  display: grid;
  gap: 12px;
}

.auth-form-copy {
  display: grid;
  gap: 6px;
}

.auth-form-copy h3 {
  margin: 0;
  color: #142B4D;
  font-size: 18px;
}

.auth-form-copy p {
  margin: 0;
  color: rgba(20, 43, 77, .66);
  font-size: 13px;
  line-height: 1.6;
}

.auth-text-button {
  width: fit-content;
  min-height: 34px;
  border: 0;
  background: transparent;
  color: #142B4D;
  font-size: 13px;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.auth-email-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.auth-email-form input {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
}

.full-button {
  width: 100%;
}

.auth-dev-link {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.top-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.global-search-shell {
  min-width: min(420px, 38vw);
}

.search-box:focus-within {
  border-color: rgba(161, 40, 58, .42);
  box-shadow: 0 0 0 3px rgba(161, 40, 58, .09);
}

.primary-button {
  box-shadow: 0 10px 22px rgba(161, 40, 58, .18);
}

.global-search-panel {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow);
}

.global-search-panel.active {
  display: grid;
}

.global-search-panel h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--accent-dark);
}

.global-search-panel button {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  text-align: left;
}

.feed-layout {
  grid-template-columns: minmax(0, 1fr) 300px;
}

.quick-compose {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow);
}

.quick-compose button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--muted);
  text-align: left;
  padding: 0 14px;
}

.quick-compose span {
  color: var(--muted);
  font-size: 13px;
}

.mini-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--leaf);
  color: white;
  font-weight: 900;
}

.post-card, .trend-panel, .compose-panel, .compose-preview, .db-card, .rank-card, .profile-hero, .stat-card {
  background: rgba(255, 255, 255, .96);
}

.post-card {
  grid-template-columns: 156px minmax(0, 1fr);
  padding: 12px;
}

.post-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.label-art {
  border-radius: 8px;
}

.post-actions button {
  min-height: 34px;
  background: #ffffff;
}

.trend-divider {
  height: 1px;
  margin: 16px 0;
  background: var(--line);
}

.post-type-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.post-type-row label {
  position: relative;
}

.post-type-row input {
  position: absolute;
  opacity: 0;
}

.post-type-row span {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--muted);
  font-weight: 800;
}

.post-type-row input:checked + span {
  border-color: rgba(161, 40, 58, .42);
  background: #f4e1d5;
  color: var(--accent-dark);
}

.db-details {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(246, 241, 232, .52);
}

.db-details summary {
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 900;
}

.db-details .form-grid {
  margin-top: 12px;
}

.field-line {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-weight: 800;
}

.field-line select {
  min-height: 36px;
}

.hidden-field {
  display: none !important;
}

.db-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.db-toolbar .search-box {
  flex: 1;
}

.ranking-tabs, .profile-tabs {
  display: inline-flex;
  margin-bottom: 14px;
}

.rank-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}

.ranking-post-list {
  display: grid;
  gap: 28px;
  width: min(100%, 640px);
  margin: 0 auto;
}

.timeline-empty-note {
  margin: 28px auto;
  color: rgba(20, 43, 77, .56);
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

.profile-content {
  margin-top: 14px;
}

.profile-timeline-list {
  display: grid;
  gap: 26px;
  width: min(100%, 640px);
  margin: 0 auto;
}

.profile-timeline-list .post-card {
  width: 100%;
}

/* 2026-07-08: compact top header and profile page cleanup. */
.top-bar {
  align-items: center !important;
  gap: 14px !important;
  min-height: 44px !important;
  margin-bottom: 14px !important;
}

.top-brand {
  flex: 0 0 auto !important;
}

.side-account {
  display: block !important;
  margin: 12px 0 0 !important;
}

.side-account .pwa-check-update-button {
  margin-bottom: 8px;
}

.side-account #auth-button {
  width: 100% !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .74) !important;
  color: #142B4D !important;
  font-size: 13px !important;
  font-weight: 520 !important;
  white-space: nowrap !important;
}

.side-profile {
  display: flex !important;
  justify-content: flex-start !important;
  margin: 8px 0 18px !important;
}

.side-profile .profile-shortcut {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
}

.side-compose-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 14px 0 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #142B4D !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(20, 43, 77, .18) !important;
  font-size: 14px !important;
  font-weight: 560 !important;
  cursor: pointer !important;
}

.side-compose-button img {
  width: 18px !important;
  height: 18px !important;
  filter: brightness(0) invert(1) !important;
}

.top-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: 100% !important;
  margin-left: 0 !important;
}

.top-actions .global-search-shell {
  width: min(420px, 100%) !important;
}

.profile-hero {
  margin-bottom: 12px !important;
}

@media (max-width: 980px) {
  .top-bar {
    min-height: 52px !important;
    margin-bottom: 12px !important;
  }

  .top-actions {
    display: none !important;
  }
}

.profile-setup {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.profile-setup.collapsed {
  display: none;
}

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

.profile-setup label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.profile-setup input {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
}

.profile-section-title {
  margin: 18px 0 10px;
  color: #20242a;
  font-size: 14px;
  font-weight: 650;
}

.profile-pinned-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 18px;
}

.profile-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.instagram-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 18px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.instagram-tabs button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 42px !important;
  border: 0 !important;
  border-top: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #737982 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.instagram-tabs button.active {
  border-top-color: #142B4D !important;
  color: #142B4D !important;
  box-shadow: none !important;
}

.profile-grid-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: #f4f4f4;
  cursor: pointer;
}

.post-detail-modal.opening .post-detail-panel,
.image-lightbox.opening .image-lightbox-panel,
.evening-compose-modal.opening .evening-compose-panel,
.follow-list-modal.opening .follow-list-panel,
.draft-list-modal.opening .draft-list-panel {
  transform-origin: var(--modal-origin-x, center) var(--modal-origin-y, center) !important;
  animation: sakelikeModalIn 260ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  will-change: transform, opacity !important;
}

.post-detail-panel.is-closing,
.image-lightbox-panel.is-closing,
.evening-compose-panel.is-closing,
.follow-list-panel.is-closing,
.draft-list-panel.is-closing {
  transform-origin: var(--modal-origin-x, center) var(--modal-origin-y, center) !important;
  animation: sakelikeModalOut 180ms ease-in both !important;
  will-change: transform, opacity !important;
}

.post-detail-modal.slide-next .post-detail-panel {
  animation: detailSlideUp .22s ease both;
}

.post-detail-modal.slide-prev .post-detail-panel {
  animation: detailSlideDown .22s ease both;
}

@keyframes sakelikeModalIn {
  from {
    opacity: 0;
    transform: translate(var(--modal-shift-x, 0px), var(--modal-shift-y, 12px)) scale(.94);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes sakelikeModalOut {
  from {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(var(--modal-shift-x, 0px), var(--modal-shift-y, 12px)) scale(.96);
  }
}

@keyframes detailSlideUp {
  from {
    opacity: .4;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes detailSlideDown {
  from {
    opacity: .4;
    transform: translateY(-28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-detail-modal.opening .post-detail-panel,
  .image-lightbox.opening .image-lightbox-panel,
  .evening-compose-modal.opening .evening-compose-panel,
  .follow-list-modal.opening .follow-list-panel,
  .draft-list-modal.opening .draft-list-panel,
  .post-detail-panel.is-closing,
  .image-lightbox-panel.is-closing,
  .evening-compose-panel.is-closing,
  .follow-list-panel.is-closing,
  .draft-list-panel.is-closing {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 980px) {
  #sake-firefly-view.active.is-dismiss-swiping {
    opacity: var(--sake-firefly-dismiss-opacity, 1) !important;
    transform: translateY(var(--sake-firefly-dismiss-y, 0px)) scale(var(--sake-firefly-dismiss-scale, 1)) !important;
    transform-origin: center top !important;
  }

  #sake-firefly-view.active.is-dismissing {
    transition: transform 200ms ease-in, opacity 200ms ease-in !important;
  }
}

.profile-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease, filter .25s ease;
}

.profile-grid-item:hover img {
  filter: brightness(.88);
  transform: scale(1.02);
}

.profile-empty {
  margin: 30px 0;
  color: #7a8087;
  font-size: 14px;
  text-align: center;
}

@media (max-width: 1120px) {
  .top-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .global-search-shell {
    flex: 1;
    min-width: 280px;
  }
}

@media (max-width: 640px) {
  .profile-hero {
    align-items: flex-start;
    gap: 16px;
    padding: 18px 0 20px;
  }

  .profile-avatar {
    width: 84px;
    height: 84px;
  }

  .profile-name-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .profile-name-row h2 {
    font-size: 19px;
  }

  .profile-bio-text {
    font-size: 13px;
  }

  .profile-pinned-row,
  .profile-photo-grid {
    gap: 3px;
  }
}

@media (max-width: 980px) {
  .main-panel {
    max-width: none;
    padding: 14px 12px 92px;
  }

  .top-bar {
    position: static;
    margin: -14px -12px 14px;
    padding: 14px 12px;
  }

  .global-search-panel {
    grid-template-columns: 1fr 1fr;
  }

  .quick-compose {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .quick-compose span {
    grid-column: 2;
  }

  .auth-chip {
    width: 100%;
    justify-content: space-between;
  }

  .auth-panel {
    grid-template-columns: 1fr;
  }

  .profile-setup-grid {
    grid-template-columns: 1fr;
  }

  .mobile-nav {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 640px) {
  h1 {
    font-size: 22px;
  }

  .top-actions {
    gap: 8px;
  }

  .global-search-shell, .top-actions select, .top-actions .primary-button {
    width: 100%;
  }

  .global-search-panel {
    grid-template-columns: 1fr;
  }

  .post-card {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .label-art {
    width: 100%;
    max-height: none;
    aspect-ratio: 1 / 1;
  }

  .post-type-row, .db-toolbar {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .photo-slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .photo-slot {
    min-height: 126px;
  }

  .post-type-row {
    display: grid;
  }

  .form-actions {
    gap: 10px;
  }

  .field-line {
    align-items: stretch;
    flex-direction: column;
  }

  .field-line select {
    width: 100%;
  }
}

/* Complete responsive pass */
@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .side-nav {
    padding-inline: 14px;
  }

  .feed-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .compose-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  .app-shell {
    display: block;
  }

  .side-nav {
    display: none;
  }

  .main-panel {
    width: 100%;
    padding: 0 16px 28px;
  }

  .top-bar {
    position: sticky;
    top: 0;
    z-index: 15;
    display: grid;
    gap: 12px;
    margin: 0 -16px 16px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(18px);
  }

  .top-bar h1 {
    max-width: 100%;
    font-size: 25px;
    line-height: 1.18;
  }

  .top-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    width: 100%;
  }

  .global-search-shell {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .top-actions select {
    width: 100%;
    min-width: 118px;
  }

  .auth-chip {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .top-actions > .primary-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .global-search-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auth-panel {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .auth-copy h2 {
    font-size: 24px;
  }

  .feed-layout,
  .compose-grid {
    grid-template-columns: 1fr;
  }

  .compose-panel {
    grid-template-columns: 1fr;
  }

  .compose-panel > .section-head,
  .compose-panel > .post-type-row,
  .compose-panel > .image-uploader,
  .compose-panel > .ocr-box,
  .compose-panel > .wide-label,
  .compose-panel > .db-details,
  .compose-panel > .rating-row,
  .compose-panel > .form-actions,
  .compose-panel > .form-status {
    grid-column: 1;
  }

  .image-uploader {
    grid-row: auto;
    position: static;
  }

  .trend-panel,
  .compose-preview {
    position: static;
  }

  .section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .segmented,
  .ranking-tabs,
  .profile-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .post-card {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .label-art {
    align-self: start;
  }

  .form-grid,
  .tool-row,
  .profile-setup-grid {
    grid-template-columns: 1fr;
  }

  .db-grid,
  .ranking-grid,
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .photo-slot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mobile-nav {
    position: fixed;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    min-height: 68px;
    padding: 6px;
    border: 1px solid rgba(227, 218, 203, .86);
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 40px rgba(55, 43, 31, .2);
    backdrop-filter: blur(18px);
  }

  .mobile-nav button {
    display: grid;
    grid-template-rows: 24px auto;
    gap: 3px;
    place-items: center;
    min-width: 0;
    min-height: 56px;
    padding: 6px 2px 5px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.1;
  }

  .mobile-nav svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-nav span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-nav button.active {
    background: #f5e8dc;
    color: var(--accent-dark);
  }
}

@media (max-width: 720px) {
  .main-panel {
    padding-inline: 12px;
  }

  .top-bar {
    margin-inline: -12px;
    padding-inline: 12px;
  }

  .quick-compose {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .quick-compose span {
    grid-column: 2;
  }

  .auth-benefits {
    display: none;
  }

  .auth-panel {
    gap: 12px;
    margin-bottom: 12px;
  }

  .auth-copy {
    gap: 4px;
  }

  .auth-copy .mini-label {
    display: none;
  }

  .auth-copy h2 {
    font-size: 21px;
  }

  .auth-copy p {
    margin: 0;
    font-size: 14px;
  }

  .post-card {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }

  .label-art {
    width: 100%;
    max-height: none;
    aspect-ratio: 1 / 1;
  }

  .post-title-row {
    flex-direction: row;
    align-items: center;
  }

  .post-actions button {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }

  .compose-panel,
  .compose-preview,
  .trend-panel,
  .profile-setup {
    padding: 14px;
  }

  .compose-preview {
    display: none;
  }

  .post-type-row,
  .db-toolbar,
  .form-actions,
  .field-line {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .db-grid,
  .ranking-grid,
  .stats-grid,
  .global-search-panel {
    grid-template-columns: 1fr;
  }

  .photo-slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .photo-slot {
    min-height: 128px;
  }

  .tool-row,
  .photo-tool-row,
  .rating-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

@media (max-width: 430px) {
  .main-panel {
    padding-inline: 10px;
  }

  .top-bar {
    margin-inline: -10px;
    padding: 10px;
  }

  .kicker {
    font-size: 11px;
  }

  .top-bar h1 {
    font-size: 21px;
  }

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

  .global-search-shell,
  .auth-chip,
  .top-actions > .primary-button {
    grid-column: 1 / -1;
  }

  .top-actions select {
    min-width: 0;
  }

  .auth-chip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .auth-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .auth-panel {
    padding: 12px;
  }

  .auth-card {
    padding: 12px;
  }

  .quick-compose {
    padding: 10px;
  }

  .quick-compose button {
    padding-inline: 10px;
  }

  .trend-panel {
    display: none;
  }

  .auth-mode-tabs button,
  .auth-provider,
  .auth-email-form input,
  .primary-button,
  .secondary-button {
    min-height: 46px;
  }

  .segmented,
  .ranking-tabs,
  .profile-tabs {
    grid-template-columns: 1fr;
  }

  .mobile-nav {
    right: 6px;
    left: 6px;
    gap: 2px;
    padding: 5px;
    border-radius: 16px;
  }

  .mobile-nav button {
    font-size: 10.5px;
  }

  .mobile-nav svg {
    width: 22px;
    height: 22px;
  }
}

/* Mobile app UI: timeline-first, social-feed layout */
@media (max-width: 760px) {
  :root {
    --shadow: 0 8px 22px rgba(30, 24, 18, .08);
  }

  html,
  body {
    width: 100%;
    overflow-x: hidden;
    background: #ffffff;
  }

  body {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }

  .app-shell,
  .main-panel,
  .feed-layout,
  .compose-grid,
  .form-grid,
  .tool-row,
  .photo-tool-row,
  .db-grid,
  .ranking-grid,
  .stats-grid,
  .profile-setup-grid,
  .global-search-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .view {
    display: none !important;
  }

  .view.active {
    display: block !important;
  }

  body.post-modal-open {
    overflow: hidden;
    padding-bottom: 0;
  }

  #post-view.active {
    position: fixed;
    inset: 0;
    z-index: 2147482600;
    display: block !important;
    width: 100vw !important;
    height: 100dvh;
    padding: calc(14px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(248, 250, 250, .98);
    animation: postModalZoomIn .24s cubic-bezier(.2, .72, .2, 1) both;
  }

  #post-view.active::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 249, 248, .98)),
      radial-gradient(circle at 50% -10%, rgba(111, 171, 135, .14), transparent 42%);
  }

  .post-modal-close {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0 0 10px auto;
    border: 1px solid rgba(20, 43, 77, .10);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 20px rgba(20, 43, 77, .10);
    color: #142B4D;
    font-size: 24px;
    line-height: 1;
  }

  #post-view .compose-grid,
  #post-view .compose-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  #post-view .compose-panel {
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(20, 43, 77, .14);
  }

  @keyframes postModalZoomIn {
    from {
      opacity: 0;
      transform: scale(.96) translateY(16px);
    }

    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  .side-nav,
  .trend-panel,
  .compose-preview,
  .quick-compose span,
  .kicker {
    display: none !important;
  }

  .main-panel {
    padding: 0 0 18px !important;
  }

  .top-bar {
    position: sticky !important;
    top: 0;
    z-index: 25;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin: 0 !important;
    padding: 10px 12px 8px !important;
    border-bottom: 1px solid rgba(227, 218, 203, .7);
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(18px);
  }

  .top-bar > div:first-child {
    min-width: 0;
  }

  .top-bar h1 {
    margin: 0;
    font-size: 22px !important;
    line-height: 1.05;
    letter-spacing: 0;
  }

  .top-actions {
    display: contents !important;
  }

  .global-search-shell {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px;
    padding: 9px 12px;
    border-radius: 999px;
    background: #f6f3ee;
  }

  .global-search-shell input {
    font-size: 15px;
  }

  .top-actions select {
    display: none;
  }

  .auth-chip {
    grid-column: 2;
    grid-row: 1;
    display: block !important;
    width: auto !important;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
  }

  .auth-chip .compact-button {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--accent-dark);
    font-size: 13px;
    font-weight: 900;
  }

  .top-actions > .primary-button {
    position: fixed;
    right: 14px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    z-index: 29;
    width: auto !important;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 999px;
    box-shadow: 0 14px 34px rgba(161, 40, 58, .28);
  }

  .global-search-panel {
    margin: 10px 10px 12px;
    width: auto !important;
  }

  .auth-panel {
    position: fixed;
    right: 10px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    left: 10px;
    z-index: 35;
    max-height: min(76vh, 620px);
    overflow: auto;
    display: none;
    grid-template-columns: 1fr !important;
    gap: 10px;
    margin: 0;
    padding: 12px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(28, 22, 18, .26);
  }

  .auth-panel.active {
    display: grid !important;
  }

  .auth-copy {
    gap: 4px;
  }

  .auth-copy .mini-label,
  .auth-benefits {
    display: none;
  }

  .auth-copy h2 {
    font-size: 20px;
  }

  .auth-copy p,
  .auth-note {
    font-size: 13px;
  }

  .auth-card {
    padding: 10px;
    background: #ffffff;
  }

  .view {
    padding: 0 10px;
  }

  .quick-compose {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 10px;
    margin: 10px 0 14px;
    padding: 10px;
    border-radius: 14px;
    box-shadow: none;
  }

  .quick-compose button {
    min-width: 0;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 999px;
    background: #ffffff;
    font-size: 14px;
  }

  .section-head {
    display: grid !important;
    gap: 10px;
    margin-bottom: 12px;
  }

  .section-head h2 {
    font-size: 20px;
  }

  .section-head p {
    margin: 0;
    font-size: 14px;
  }

  .segmented,
  .ranking-tabs,
  .profile-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100%;
    border-radius: 999px;
  }

  .segmented button,
  .ranking-tabs button,
  .profile-tabs button {
    min-width: 0;
    padding: 9px 6px;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
  }

  .post-list {
    gap: 10px;
  }

  .post-card {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 10px;
    padding: 12px 0;
    border-width: 0 0 1px;
    border-radius: 0;
    background: #ffffff !important;
    box-shadow: none;
  }

  .label-art {
    width: 88px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
  }

  .post-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
  }

  .post-title-row h3 {
    font-size: 17px;
    line-height: 1.25;
  }

  .post-meta,
  .post-eyebrow {
    gap: 5px;
    font-size: 12px;
  }

  .post-card p {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.55;
  }

  .tag,
  .status-pill,
  .rating-pill {
    min-height: 23px;
    padding: 0 7px;
    font-size: 11px;
  }

  .post-actions {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .post-actions::-webkit-scrollbar {
    display: none;
  }

  .post-actions button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
  }

  .compose-panel,
  .profile-hero,
  .profile-setup,
  .db-card,
  .rank-card,
  .stat-card {
    padding: 14px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: none;
  }

  .photo-slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .photo-slot {
    min-height: 120px;
  }

  .form-actions,
  .field-line,
  .rating-row,
  .db-toolbar,
  .post-type-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch;
  }

  .mobile-nav {
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    min-height: 66px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .97);
  }

  .mobile-nav button {
    min-height: 54px;
    font-size: 10.5px;
  }

  .mobile-nav button[data-view="post"] {
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(161, 40, 58, .25);
  }

  .mobile-nav button[data-view="post"].active {
    background: var(--accent-dark);
    color: #ffffff;
  }
}

/* SakeLike brand guide refresh */
:root {
  --ink: #333333;
  --muted: #6e7378;
  --soft: #f3f6f5;
  --paper: #faf8f3;
  --line: rgba(20, 43, 77, .12);
  --accent: #142b4d;
  --accent-dark: #0c1f3a;
  --sakura: #f4a7b9;
  --seigaiha: #6fab87;
  --gold: #d0a64f;
  --leaf: #6fab87;
  --sky: #dbeaf0;
  --shadow: 0 18px 50px rgba(20, 43, 77, .11);
}

body {
  background:
    radial-gradient(circle at 8% 8%, rgba(244, 167, 185, .16), transparent 28%),
    linear-gradient(180deg, #fffdf9 0%, var(--paper) 100%);
  color: var(--ink);
}

.app-shell {
  grid-template-columns: 252px minmax(0, 1fr);
}

.side-nav {
  border-right: 1px solid rgba(20, 43, 77, .09);
  background: rgba(250, 248, 243, .88);
}

.brand-block {
  align-items: center;
  gap: 14px;
}

.brand-name {
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0;
}

.brand-sub {
  color: var(--accent);
  font-weight: 700;
}

.sake-logo {
  background: #fffdf8;
  color: var(--accent);
}

.sake-logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sake-logo circle {
  fill: #fffdf8;
  stroke: var(--accent);
  stroke-width: 3.4;
}

.sake-logo .logo-wave {
  fill: none;
  stroke: #6f9fb3;
  stroke-width: 3;
  stroke-linecap: round;
}

.sake-logo .logo-bottle,
.sake-logo .logo-cup {
  fill: var(--accent);
}

.sake-logo .logo-label {
  fill: #fffdf8;
}

.sake-logo .logo-sakura {
  fill: var(--sakura);
  stroke: none;
}

.brand-mark {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(20, 43, 77, .12);
}

.nav-list {
  gap: 10px;
}

.nav-item {
  min-height: 48px;
  border-radius: 16px;
  color: #263b58;
  font-weight: 800;
}

.nav-item span {
  color: var(--accent);
  font-size: 20px;
}

.nav-item.active {
  background: rgba(20, 43, 77, .08);
  box-shadow: none;
  color: var(--accent);
}

.side-card,
.trend-panel,
.compose-panel,
.compose-preview,
.db-card,
.rank-card,
.stat-card,
.profile-hero,
.profile-setup {
  border: 1px solid rgba(20, 43, 77, .08);
  border-radius: 20px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 14px 34px rgba(20, 43, 77, .08);
}

.main-panel {
  max-width: 1120px;
  padding-top: 28px;
}

.top-bar {
  border-bottom: 0;
  background: rgba(250, 248, 243, .72);
}

.top-brand {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.top-brand-logo {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.kicker {
  color: var(--seigaiha);
}

h1,
h2 {
  color: var(--accent);
}

.search-box,
.auth-chip,
select {
  border: 1px solid rgba(20, 43, 77, .10);
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
}

.search-box span {
  color: var(--accent);
}

.primary-button {
  border-color: var(--accent);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 12px 28px rgba(20, 43, 77, .22);
}

.secondary-button {
  border-radius: 999px;
  color: var(--accent);
}

.auth-provider {
  border-radius: 16px;
}

.auth-provider.google {
  border-color: rgba(20, 43, 77, .14);
}

.quick-compose {
  border: 1px solid rgba(20, 43, 77, .08);
  border-radius: 22px;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 12px 28px rgba(20, 43, 77, .08);
}

.mini-avatar {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(20, 43, 77, .10);
}

.quick-compose button {
  border-radius: 999px;
}

.story-rail {
  display: flex;
  gap: 16px;
  margin: 0 0 18px;
  padding: 4px 2px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.story-rail::-webkit-scrollbar {
  display: none;
}

.story-rail button {
  display: grid;
  gap: 6px;
  justify-items: center;
  min-width: 54px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 800;
}

.story-rail span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(20, 43, 77, .18);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(20, 43, 77, .08);
  color: #142B4D;
  font-size: 24px;
  font-weight: 520;
  line-height: 1;
}

.story-rail small {
  color: #37465a;
  font-size: 12px;
  white-space: nowrap;
}

.segmented {
  border-color: rgba(20, 43, 77, .10);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
}

.segmented button {
  border-radius: 999px;
  color: var(--accent);
  font-weight: 900;
}

.segmented button.active {
  background: #ffffff;
  color: var(--accent);
  box-shadow: 0 8px 22px rgba(20, 43, 77, .10);
}

.post-list {
  gap: 18px;
}

.post-card {
  grid-template-columns: minmax(280px, 48%) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(20, 43, 77, .08);
  border-radius: 24px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 18px 44px rgba(20, 43, 77, .10);
}

.label-art {
  width: 100%;
  height: 100%;
  min-height: 290px;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}

.post-content {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px;
}

.post-eyebrow {
  align-items: center;
  color: var(--muted);
  font-weight: 800;
}

.post-avatar {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent), #315579);
  color: white;
  font-size: 13px;
  font-weight: 900;
}

.post-title-row h3 {
  color: #1f2833;
  font-size: 24px;
  line-height: 1.25;
}

.post-card p {
  color: #3a3a3a;
}

.rating-pill {
  background: rgba(244, 167, 185, .35);
  color: #8f2842;
}

.tag {
  background: rgba(111, 171, 135, .18);
  color: #2f704e;
}

.status-pill {
  background: rgba(20, 43, 77, .08);
  color: var(--accent);
}

.post-actions button {
  min-height: 38px;
  border-color: rgba(20, 43, 77, .10);
  border-radius: 999px;
  color: var(--accent);
  font-weight: 900;
}

.post-actions .like-action {
  color: #b8405e;
  background: rgba(244, 167, 185, .18);
}

.trend-item {
  border-color: rgba(20, 43, 77, .10);
}

.photo-slot {
  border-color: rgba(20, 43, 77, .18);
  border-radius: 18px;
}

@media (max-width: 980px) {
  .top-bar {
    background: rgba(250, 248, 243, .92);
  }
}

@media (max-width: 760px) {
  body {
    background: var(--paper);
  }

  .top-bar {
    background: rgba(250, 248, 243, .96) !important;
  }

  .top-bar h1 {
    font-family: Georgia, "Times New Roman", serif;
    color: var(--accent);
  }

  .top-brand-logo {
    display: block;
  }

  .post-card {
    display: block !important;
    padding: 0;
    border: 1px solid rgba(20, 43, 77, .08);
    border-radius: 22px;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(20, 43, 77, .09);
  }

  .label-art {
    width: 100%;
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 22px 22px 0 0;
  }

  .post-content {
    padding: 14px;
  }

  .post-title-row h3 {
    font-size: 19px;
  }

  .mobile-nav {
    border-color: rgba(20, 43, 77, .08);
    background: rgba(255, 255, 255, .96);
  }

  .mobile-nav button.active {
    background: rgba(20, 43, 77, .09);
    color: var(--accent);
  }

  .mobile-nav button[data-view="post"] {
    background: var(--accent);
    color: #ffffff;
  }
}

/* Historical premium lock layer. Final component rules live near EOF. */
body {
  color: #333333 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9f8 54%, #ffffff 100%) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", "Noto Sans JP", sans-serif !important;
  font-weight: 400 !important;
}

.app-shell {
  max-width: 1240px !important;
  margin: 24px auto !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 24px 80px rgba(20, 43, 77, .10) !important;
}

.sake-logo,
.brand-mark,
.top-brand-logo,
.mini-avatar {
  background: url("./assets/sakelike_symbol.svg") center / contain no-repeat !important;
  box-shadow: none !important;
}

.sake-logo svg {
  display: none !important;
}

.brand-name,
#view-title {
  color: #142B4D !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 560 !important;
}

h1,
h2,
h3,
.nav-item b,
.post-title-row h3,
.trend-item strong,
.side-card strong {
  font-weight: 620 !important;
  letter-spacing: 0 !important;
}

.top-bar {
  border-bottom: 1px solid rgba(20, 43, 77, .10) !important;
  background: rgba(255, 255, 255, .88) !important;
}

.primary-button {
  background: #142B4D !important;
  border-color: #142B4D !important;
  color: #ffffff !important;
  font-weight: 560 !important;
}

.post-card {
  display: grid !important;
  grid-template-columns: minmax(300px, 1.05fr) minmax(300px, .95fr) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .90) !important;
  box-shadow: 0 10px 30px rgba(20, 43, 77, .075) !important;
}

.label-art {
  min-height: 248px !important;
}

.label-art {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}

.post-title-row h3 {
  color: #151a22 !important;
  font-size: 22px !important;
  font-weight: 680 !important;
}

.post-actions button {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 520 !important;
}

.post-actions button img,
.mobile-nav button img,
.nav-item span img {
  object-fit: contain !important;
}

.mobile-nav button.active,
.mobile-nav button[data-view="post"] {
  background: transparent !important;
  color: #142B4D !important;
}

@media (max-width: 980px) {
  .app-shell {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .side-nav,
  .trend-panel,
  .top-actions {
    display: none !important;
  }

  .feed-layout {
    display: block !important;
    padding: 14px 12px 22px !important;
  }

  .post-card {
    display: block !important;
    min-height: 0 !important;
  }

  .label-art {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
}

/* SakeLike SVG asset polish */
.brand-block {
  min-height: 74px !important;
  gap: 12px !important;
}

.brand-home {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}

.brand-mark {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
}

.brand-name {
  font-size: 24px !important;
  line-height: 1 !important;
}

.brand-sub {
  margin-top: 5px !important;
  color: #667285 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.top-brand {
  min-width: max-content !important;
  max-width: 100% !important;
}

.top-bar {
  grid-template-columns: minmax(230px, max-content) minmax(0, 1fr) !important;
}

.top-brand-logo {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
}

#view-title {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.auth-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px !important;
}

.profile-shortcut {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.profile-shortcut img {
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
}

.story-rail {
  align-items: start !important;
}

.story-rail button {
  min-width: 54px !important;
  color: #142B4D !important;
}

.story-rail span {
  width: 38px !important;
  height: 38px !important;
  border-color: rgba(20, 43, 77, .18) !important;
  background: #ffffff !important;
}

.story-rail small {
  color: #4d596b !important;
  font-weight: 560 !important;
}

.empty-state {
  display: grid !important;
  justify-items: center !important;
  gap: 16px !important;
  padding: 44px 22px !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 249, 248, .88)) !important;
  box-shadow: 0 10px 30px rgba(20, 43, 77, .06) !important;
  text-align: center !important;
}

.empty-state img {
  width: min(180px, 64vw) !important;
  height: auto !important;
}

.empty-state p {
  max-width: 28rem !important;
  margin: 0 !important;
  color: #5f6877 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

.empty-state .primary-button {
  min-height: 42px !important;
  padding: 0 20px !important;
}

.trend-empty {
  padding: 14px 0 !important;
  color: #737b87 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.post-avatar {
  background: #ffffff !important;
}

.post-card p {
  word-break: break-word !important;
}

.rating-pill {
  min-width: 44px !important;
  border-radius: 999px !important;
  background: rgba(244, 167, 185, .28) !important;
  color: #9b2f4c !important;
}

.profile-avatar {
  background: url("./assets/sakelike_symbol.svg") center / contain no-repeat #ffffff !important;
  color: transparent !important;
}

@media (max-width: 980px) {
  .top-brand-logo {
    display: block !important;
  }

  .top-bar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .top-brand {
    min-width: 0 !important;
    gap: 10px !important;
  }

  .story-rail {
    margin-top: 4px !important;
    padding-bottom: 16px !important;
  }

  .empty-state {
    margin-top: 8px !important;
    padding: 36px 18px !important;
  }

  .mobile-nav {
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    min-height: 66px !important;
    padding: 6px !important;
    border: 1px solid rgba(20, 43, 77, .10) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 -10px 28px rgba(20, 43, 77, .11) !important;
  }

  .mobile-nav button {
    min-height: 52px !important;
    border-radius: 16px !important;
    color: #5a6371 !important;
    font-size: 10px !important;
    font-weight: 560 !important;
  }

  .mobile-nav button.active {
    background: rgba(20, 43, 77, .08) !important;
    color: #142B4D !important;
  }

  .mobile-nav button[data-view="post"] {
    background: #142B4D !important;
    color: #ffffff !important;
  }

  .mobile-nav button[data-view="post"].active {
    background: #0c1f3a !important;
    color: #ffffff !important;
  }
}

@media (max-width: 560px) {
  .section-head h2 {
    font-size: 19px !important;
  }

  .section-head p {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  .story-rail {
    gap: 12px !important;
  }

  .story-rail button {
    min-width: 62px !important;
  }

  .story-rail span {
    width: 56px !important;
    height: 56px !important;
  }

  .post-content {
    padding: 14px !important;
  }
}

/* Photo-first posting UI */
body {
  font-size: 14px !important;
}

.top-brand > div:last-child,
.top-brand h1,
.top-brand .kicker {
  min-width: 0 !important;
  white-space: nowrap !important;
}

.top-brand h1 {
  max-width: 34vw !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 18px !important;
  font-weight: 560 !important;
}

.nav-item b,
.brand-sub,
.post-card,
.post-card p,
.post-meta,
.post-author-row span {
  font-size: 12px !important;
  font-weight: 430 !important;
}

.post-list {
  display: grid !important;
  gap: 14px !important;
  max-width: 540px !important;
}

.feed-layout {
  grid-template-columns: minmax(0, 560px) minmax(250px, 320px) !important;
  align-items: start !important;
}

.post-card {
  display: block !important;
  width: 100% !important;
  overflow: visible !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 8px 24px rgba(20, 43, 77, .055) !important;
}

.post-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 52px !important;
  padding: 9px 12px !important;
}

.post-author-row,
.post-detail-author {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
}

.post-author-row strong,
.post-detail-author strong {
  display: block !important;
  color: #132036 !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  line-height: 1.25 !important;
}

.post-author-row span,
.post-detail-author span {
  display: block !important;
  color: #6a7381 !important;
  line-height: 1.35 !important;
}

.post-avatar {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  background: #f6f8fb !important;
  box-shadow: none !important;
}

button.post-avatar,
.profile-avatar-link {
  padding: 0 !important;
  border: 0 !important;
  cursor: pointer !important;
}

.profile-avatar-link:hover {
  filter: brightness(.96);
}

.label-art {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  object-fit: cover !important;
  object-position: var(--frame-x, 50%) var(--frame-y, 50%) !important;
  transform: scale(var(--frame-zoom, 1)) rotate(var(--image-rotation, 0deg)) !important;
  transform-origin: center !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.post-content {
  display: grid !important;
  gap: 8px !important;
  padding: 10px 12px 12px !important;
}

.post-title-row {
  align-items: start !important;
}

.post-title-row h3 {
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 560 !important;
}

.post-card p {
  margin: 0 !important;
  color: #202733 !important;
  line-height: 1.55 !important;
}

.post-card p strong {
  font-weight: 560 !important;
}

.post-meta {
  gap: 5px !important;
  color: #6a7381 !important;
}

.tag,
.status-pill,
.rating-pill {
  min-height: 22px !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 450 !important;
}

.post-actions {
  display: flex !important;
  gap: 14px !important;
  padding-top: 2px !important;
}

.post-actions button,
.post-menu-button,
.post-menu-popover button,
.icon-tool-button,
.text-tool-button,
.slim-tool-button {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #132036 !important;
  font-weight: 520 !important;
}

.post-actions button {
  min-height: 28px !important;
  padding: 0 !important;
  font-size: 13px !important;
}

.post-actions button img {
  width: 18px !important;
  height: 18px !important;
}

.post-menu {
  position: relative !important;
}

.post-menu-button {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

.post-menu-popover {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  right: 0 !important;
  z-index: 20 !important;
  display: none !important;
  min-width: 128px !important;
  padding: 6px !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 30px rgba(20, 43, 77, .12) !important;
}

.post-menu.active .post-menu-popover {
  display: grid !important;
}

.post-menu-popover button {
  min-height: 34px !important;
  padding: 0 10px !important;
  text-align: left !important;
  font-size: 12px !important;
}

.post-menu-popover .danger-action {
  color: #a23a42 !important;
}

.label-preview {
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #f3f5f7 !important;
  cursor: grab !important;
  touch-action: none !important;
}

.label-preview:active {
  cursor: grabbing !important;
}

.label-preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--frame-x, 50%) var(--frame-y, 50%) !important;
  transform: scale(var(--frame-zoom, 1)) rotate(var(--image-rotation, 0deg)) !important;
  transform-origin: center !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.direct-photo-tools {
  justify-content: center !important;
  gap: 28px !important;
  padding: 4px 0 2px !important;
}

.icon-tool-button,
.text-tool-button {
  min-width: 34px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: 18px !important;
}

.text-tool-button {
  min-width: 44px !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

.ocr-box {
  display: none !important;
  padding: 6px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.ocr-box.active {
  display: block !important;
}

.ocr-box strong {
  display: none !important;
}

.ocr-box p {
  margin: 0 !important;
  color: #6a7381 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.post-preview .post-card {
  box-shadow: none !important;
}

.post-detail-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 80 !important;
  display: none !important;
  place-items: center !important;
  padding: 20px !important;
}

.post-detail-modal.active {
  display: grid !important;
}

.post-detail-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(10, 18, 30, .42) !important;
}

.post-detail-panel {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 620px) minmax(260px, 340px) !important;
  align-items: stretch !important;
  width: min(960px, 94vw) !important;
  height: min(680px, 88vh) !important;
  max-height: 88vh !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}

.post-detail-photo-shell {
  position: relative !important;
  display: grid !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: 8px !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  background: #f3f5f7 !important;
  touch-action: pan-y !important;
}

.post-detail-photo-shell.no-photo {
  display: none !important;
}

.post-detail-panel:has(.post-detail-photo-shell.no-photo) {
  grid-template-columns: minmax(280px, 520px) !important;
}

.detail-photo-main {
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f3f5f7 !important;
  cursor: zoom-in !important;
}

.post-detail-modal:not(.banshaku-detail) .detail-photo-main .label-art {
  object-fit: contain !important;
}

.post-detail-photo-shell.photo-next .label-art {
  animation: detailPhotoNext .18s ease both;
}

.post-detail-photo-shell.photo-prev .label-art {
  animation: detailPhotoPrev .18s ease both;
}

@keyframes detailPhotoNext {
  from {
    opacity: .5;
    transform: translateX(18px) scale(var(--frame-zoom, 1)) rotate(var(--image-rotation, 0deg));
  }
}

@keyframes detailPhotoPrev {
  from {
    opacity: .5;
    transform: translateX(-18px) scale(var(--frame-zoom, 1)) rotate(var(--image-rotation, 0deg));
  }
}

.detail-photo-arrow {
  position: absolute !important;
  top: 50% !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .34) !important;
  color: #ffffff !important;
  font-size: 26px !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
}

.detail-photo-arrow.prev {
  left: 12px !important;
}

.detail-photo-arrow.next {
  right: 12px !important;
}

.detail-photo-dots {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 12px !important;
  z-index: 3 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  pointer-events: none !important;
}

.detail-photo-dots span {
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .58) !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .26) !important;
  transition: transform .18s ease, background .18s ease !important;
}

.detail-photo-dots span.active {
  background: #ffffff !important;
  transform: scale(1.45) !important;
}

.detail-photo-thumbs {
  display: flex !important;
  gap: 7px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  padding: 2px 1px !important;
  scrollbar-width: none !important;
}

.detail-photo-thumbs::-webkit-scrollbar {
  display: none !important;
}

.detail-photo-thumbs button {
  flex: 0 0 54px !important;
  width: 54px !important;
  height: 54px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 2px solid transparent !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  opacity: .72 !important;
  cursor: pointer !important;
}

.detail-photo-thumbs button.active {
  border-color: #142B4D !important;
  opacity: 1 !important;
}

.detail-photo-thumbs img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.post-detail-body {
  display: grid !important;
  align-content: start !important;
  gap: 14px !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 18px !important;
}

.post-detail-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.post-detail-body h2 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 560 !important;
}

.post-detail-body p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

.post-detail-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  padding-top: 4px !important;
}

.post-detail-actions button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 30px !important;
  border: 0 !important;
  background: transparent !important;
  color: #132036 !important;
  font-size: 13px !important;
  font-weight: 520 !important;
  cursor: pointer !important;
}

.post-actions .like-action.active,
.post-detail-actions .like-action.active {
  color: #d6294c !important;
}

.post-actions .like-action.active img,
.post-detail-actions .like-action.active img {
  filter: invert(26%) sepia(91%) saturate(2453%) hue-rotate(331deg) brightness(92%) contrast(93%) !important;
}

.post-actions .save-action.active,
.post-detail-actions .save-action.active {
  color: #142B4D !important;
}

.post-actions .save-action.active img,
.post-detail-actions .save-action.active img {
  filter: invert(13%) sepia(41%) saturate(1546%) hue-rotate(184deg) brightness(91%) contrast(95%) !important;
}

.post-actions button[data-post-repost].active,
.post-detail-actions button[data-post-repost].active {
  color: #2f7d52 !important;
}

.post-detail-actions img {
  width: 19px !important;
  height: 19px !important;
}

.post-actions button[data-post-repost],
.post-detail-actions button[data-post-repost] {
  font-size: 13px !important;
  letter-spacing: 0 !important;
}

.post-detail-comments {
  display: grid !important;
  gap: 12px !important;
  padding-top: 4px !important;
}

.comment-item {
  display: grid !important;
  gap: 6px !important;
}

.comment-item.is-reply {
  margin-left: 34px !important;
  padding-left: 12px !important;
  border-left: 1px solid rgba(20, 43, 77, .10) !important;
}

.comment-author {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) auto !important;
  gap: 9px !important;
  align-items: center !important;
}

.comment-avatar {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(20, 43, 77, .06) !important;
  padding: 0 !important;
}

.comment-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.comment-author strong {
  display: block !important;
  color: #142B4D !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  line-height: 1.2 !important;
}

.comment-author span {
  display: block !important;
  margin-top: 2px !important;
  color: rgba(21, 21, 21, .48) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.comment-item p {
  margin: 0 !important;
  color: #252a32 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  white-space: pre-wrap !important;
}

.comment-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.comment-like-button,
.comment-reply-button {
  justify-self: start !important;
  min-height: 24px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(20, 43, 77, .62) !important;
  font-size: 12px !important;
  font-weight: 520 !important;
  padding: 0 !important;
}

.comment-like-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.comment-like-button.active {
  color: #d6294c !important;
}

.post-detail-comments .muted {
  color: #89909a !important;
}

.comment-menu {
  position: relative !important;
}

.comment-menu-button {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(20, 43, 77, .52) !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

.comment-menu-popover {
  position: absolute !important;
  top: 32px !important;
  right: 0 !important;
  z-index: 30 !important;
  display: none !important;
  min-width: 116px !important;
  padding: 8px !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(20, 43, 77, .16) !important;
}

.comment-menu.active .comment-menu-popover {
  display: grid !important;
  gap: 4px !important;
}

.comment-menu-popover button {
  justify-content: flex-start !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #142B4D !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: left !important;
}

.comment-menu-popover .danger-action {
  color: #9c2234 !important;
}

.post-detail-comment-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  border-top: 1px solid rgba(20, 43, 77, .08) !important;
  padding-top: 12px !important;
}

.post-detail-comment-form textarea {
  width: 100% !important;
  min-height: 82px !important;
  resize: vertical !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(20, 43, 77, .14) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px 0 10px !important;
  color: #252a32 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.post-detail-comment-form textarea:focus {
  outline: 0 !important;
  border-bottom-color: rgba(20, 43, 77, .34) !important;
}

.comment-compose-state {
  color: rgba(20, 43, 77, .58) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.comment-compose-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.post-detail-comment-form button {
  min-height: 36px !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  background: #142B4D !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

.post-detail-comment-form .ghost-button {
  border: 1px solid rgba(20, 43, 77, .12) !important;
  background: rgba(255, 255, 255, .72) !important;
  color: #142B4D !important;
}

.post-detail-close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 2 !important;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .86) !important;
  font-size: 20px !important;
}

.post-detail-swipe-handle {
  display: none;
}

@media (max-width: 900px) {
  .feed-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .post-list {
    max-width: 100% !important;
  }

  .post-detail-panel {
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: 88vh !important;
    overflow: auto !important;
  }

  .post-detail-photo-shell {
    height: auto !important;
    max-height: 72vh !important;
    aspect-ratio: var(--post-photo-aspect, 1 / 1) !important;
  }

  .post-detail-body {
    height: auto !important;
    max-height: none !important;
  }
}

@media (max-width: 640px) {
  .profile-pinned-row,
  .profile-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .post-detail-modal {
    padding: 0 !important;
    place-items: stretch !important;
    background: #ffffff !important;
  }

  .post-detail-backdrop {
    background: #ffffff !important;
  }

  .post-detail-panel {
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
    overflow: auto !important;
  }

  .post-detail-photo-shell {
    border-radius: 0 !important;
  }

  .post-detail-close {
    top: 10px !important;
    right: 10px !important;
    background: rgba(255, 255, 255, .92) !important;
  }

  .detail-photo-arrow {
    display: none !important;
  }

  .post-detail-body {
    max-height: none !important;
    overflow: visible !important;
    padding: 14px 16px calc(92px + env(safe-area-inset-bottom)) !important;
  }
}

/* Auth gate: WebP background is the final asset, SVG is temporary fallback. */
body.auth-required {
  min-height: 100vh !important;
  overflow: hidden !important;
}

body.auth-required::before {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
  background-image:
    linear-gradient(rgba(5, 9, 15, .58), rgba(5, 9, 15, .68)),
    image-set(
      url("./assets/auth_background.webp") type("image/webp"),
      url("./assets/auth_background.svg") type("image/svg+xml")
    ) !important;
  background-position: center !important;
  background-size: cover !important;
  content: "" !important;
}

body.auth-required .top-bar,
body.auth-required .side-nav,
body.auth-required .mobile-nav {
  opacity: .18 !important;
}

body.auth-required .image-lightbox,
body.auth-required .post-detail-modal,
body.profile-required .image-lightbox,
body.profile-required .post-detail-modal {
  display: none !important;
  pointer-events: none !important;
}

body.auth-required .auth-panel {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 440px) !important;
  place-content: center !important;
  margin: 0 !important;
  padding: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

body.auth-required .auth-copy {
  display: none !important;
}

body.auth-required .auth-card {
  gap: 14px !important;
  width: min(440px, calc(100vw - 32px)) !important;
  padding: 28px !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .36) !important;
  backdrop-filter: blur(18px) !important;
}

.auth-brand-lockup {
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  padding-bottom: 2px !important;
  text-align: center !important;
}

.auth-brand-lockup img {
  width: min(220px, 70vw) !important;
  height: auto !important;
}

.auth-brand-lockup p {
  max-width: 22rem !important;
  margin: 0 !important;
  color: #596270 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

body.auth-required .auth-mode-tabs {
  border-radius: 999px !important;
  background: #f2f4f6 !important;
}

.auth-language-field {
  display: grid !important;
  gap: 6px !important;
  color: #596270 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.auth-language-field select {
  width: 100% !important;
  min-height: 38px !important;
  border: 1px solid rgba(20, 43, 77, .14) !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  background: #ffffff !important;
  color: #142B4D !important;
  font-size: 14px !important;
}

body.auth-required .auth-mode-tabs button {
  border-radius: 999px !important;
  font-weight: 560 !important;
}

body.auth-required .auth-provider,
body.auth-required .auth-email-form input,
body.auth-required .full-button {
  border-radius: 8px !important;
}

body.auth-required .auth-provider.google::before {
  content: "G";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 50%;
  background: #ffffff;
  color: #315579;
  font-weight: 700;
}

body.auth-required .auth-dev-link {
  display: none !important;
}

body.auth-required .auth-note {
  text-align: center !important;
  font-size: 12px !important;
}

.auth-debug {
  display: none;
  max-height: 180px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(20, 43, 77, .12);
  border-radius: 10px;
  background: #f6f8fb;
  color: #344054;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;
  text-align: left;
  white-space: pre-wrap;
}

.auth-debug.active {
  display: none;
}

.auth-legal-links {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: -2px 0 0;
  color: #7a8087;
  font-size: 11px;
}

.auth-legal-links a {
  color: inherit;
  text-decoration: none;
}

.auth-legal-links a:hover {
  color: #142B4D;
}

.auth-resend-button {
  display: none;
  min-height: 38px;
  border: 1px solid rgba(20, 43, 77, .18);
  border-radius: 999px;
  background: #ffffff;
  color: #142B4D;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

body.auth-required .auth-panel.email-sent .auth-resend-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.auth-required .auth-panel.email-sent .auth-provider-stack,
body.auth-required .auth-panel.email-sent .auth-divider,
body.auth-required .auth-panel.email-sent .auth-email-form,
body.auth-required .auth-panel.email-sent #forgot-password-button,
body.auth-required .auth-panel.email-sent .auth-reset-form,
body.auth-required .auth-panel.email-sent .auth-update-password-form {
  display: none !important;
}

body.auth-required .auth-panel.email-sent .auth-note {
  display: block !important;
  padding: 18px !important;
  border: 1px solid rgba(111, 171, 135, .28) !important;
  border-radius: 10px !important;
  background: rgba(111, 171, 135, .12) !important;
  color: #203b2d !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

@media (max-width: 560px) {
  body.auth-required {
    overflow: auto !important;
  }

  body.auth-required .auth-panel {
    align-content: center !important;
    min-height: 100dvh !important;
    padding: 18px !important;
  }

  body.auth-required .auth-card {
    width: min(100%, 390px) !important;
    max-height: calc(100dvh - 36px) !important;
    overflow: auto !important;
    padding: 22px !important;
  }
}

/* Auth gate layer fix: keep background and card in the same fixed panel. */
body.auth-required::before {
  display: none !important;
}

body.auth-required .app-shell {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99990 !important;
  max-width: none !important;
  width: 100vw !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

body.auth-required .auth-background,
body.auth-required .auth-visual,
body.auth-required .auth-overlay {
  pointer-events: none !important;
}

body.auth-required .top-bar,
body.auth-required .top-actions,
body.auth-required .auth-chip,
body.auth-required #auth-button {
  pointer-events: auto !important;
}

body.auth-required .top-actions {
  display: flex !important;
  pointer-events: auto !important;
}

body.auth-required .auth-chip,
body.auth-required #auth-button {
  display: inline-flex !important;
  pointer-events: auto !important;
}

body.auth-required #auth-panel,
body.auth-required .auth-panel {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 100000 !important;
  background-image:
    linear-gradient(rgba(5, 9, 15, .58), rgba(5, 9, 15, .68)),
    image-set(
      url("./assets/auth_background.webp") type("image/webp"),
      url("./assets/auth_background.svg") type("image/svg+xml")
    ) !important;
  background-position: center !important;
  background-size: cover !important;
}

body.auth-required .auth-card,
body.auth-required .auth-card * {
  pointer-events: auto !important;
}

.profile-social-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 8px 0 10px;
}

.profile-social-stats button {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #20242a;
  font: inherit;
  cursor: pointer;
}

.profile-social-stats strong {
  font-size: 14px;
  font-weight: 650;
}

.profile-social-stats span {
  color: #646b77;
  font-size: 13px;
  font-weight: 400;
}

.profile-follow-button.active {
  background: #f3f5f7 !important;
  color: #1d2736 !important;
}

.profile-chat-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-chat-button img {
  width: 18px;
  height: 18px;
}

.post-author-name { display:inline-flex; min-width:0; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.post-author-name:hover strong, .post-author-name:focus-visible strong { text-decoration:underline; text-underline-offset:3px; }

.chat-page { display:grid; grid-template-columns:minmax(180px, .42fr) minmax(0, 1fr); min-height:520px; border:1px solid rgba(20,43,77,.12); border-radius:18px; overflow:hidden; background:#fff; }
.chat-page:not(.chat-thread-open) { display:block; max-width:680px; margin:0 auto; }
.chat-page:not(.chat-thread-open) .chat-list-panel { border-right:0; }.chat-page:not(.chat-thread-open) .chat-thread-panel { display:none; }
.chat-page.chat-thread-open { display:block; }.chat-page.chat-thread-open .chat-list-panel { display:none; }
.chat-list-panel { padding:16px; border-right:1px solid rgba(20,43,77,.1); background:#faf8f3; }
.chat-conversation-list { display:grid; gap:7px; }
.chat-conversation { display:flex; justify-content:space-between; gap:8px; padding:12px; border:0; border-radius:12px; background:transparent; color:#142b4d; text-align:left; font:inherit; }
.chat-conversation.active { background:#fff; box-shadow:0 4px 14px rgba(20,43,77,.08); }
.chat-conversation small { color:#7b8797; font-size:.75rem; }
.chat-thread-panel { display:flex; flex-direction:column; min-width:0; padding:18px; }
.chat-thread-head { display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid rgba(20,43,77,.1); color:#142b4d; }.chat-back-button { width:34px; height:34px; padding:0; border:0; border-radius:999px; background:#f3f5f7; color:#142b4d; font-size:28px; line-height:1; cursor:pointer; }
.chat-messages { display:flex; flex:1; flex-direction:column; min-height:220px; padding:0; overflow:auto; }
.chat-message { width:100%; padding:15px 2px; border-bottom:1px solid rgba(20,43,77,.1); color:#182536; }
.chat-message.own { color:#182536; }
.chat-message-meta { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px; color:#728093; font-size:.78rem; }
.chat-message-author { display:inline-flex; align-items:center; min-width:0; gap:7px; }.chat-message-author img { width:24px; height:24px; flex:0 0 24px; border-radius:999px; object-fit:cover; background:#f1f4f7; }
.chat-message-meta strong { color:#142b4d; font-size:.85rem; font-weight:700; }.chat-message.own .chat-message-meta strong { color:#4d7659; }
.chat-message-meta time { white-space:nowrap; }
.chat-message p { margin:0; color:inherit; line-height:1.7; overflow-wrap:anywhere; }
.chat-message-actions { margin-top:7px; }.chat-message-actions button { padding:0; border:0; background:transparent; color:#728093; font:inherit; font-size:.78rem; text-decoration:underline; }
.chat-compose { position:sticky; bottom:0; display:flex; gap:8px; padding-top:12px; border-top:1px solid rgba(20,43,77,.1); background:#fff; }.chat-compose textarea { flex:1; min-height:44px; resize:none; }
.chat-empty { margin:auto; color:#728093; text-align:center; }
.chat-start-panel { display:grid; gap:12px; max-width:420px; margin:auto; padding:20px; border:1px solid rgba(20,43,77,.12); border-radius:14px; background:#faf8f3; }.chat-start-panel h3,.chat-start-panel p { margin:0; }.chat-start-panel p { color:#687587; font-size:.9rem; line-height:1.6; }.chat-start-panel select { width:100%; min-height:44px; padding:0 12px; border:1px solid rgba(20,43,77,.18); border-radius:10px; background:#fff; color:#142b4d; font:inherit; }
@media (max-width: 720px) { .chat-page { grid-template-columns:1fr; min-height:0; }.chat-list-panel { border-right:0; border-bottom:1px solid rgba(20,43,77,.1); }.chat-conversation-list { max-height:160px; overflow:auto; }.chat-thread-panel { min-height:0; }.chat-messages { min-height:180px; }.chat-message { max-width:88%; } }

.verified-mark,
.official-mini-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  border-radius: 999px;
  background: #142B4D;
  color: #fff;
  font-style: normal;
  font-weight: 650;
}

.verified-mark {
  width: 18px;
  height: 18px;
  font-size: 11px;
  vertical-align: middle;
}

.official-mini-badge {
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1.2;
}

.account-session-panel,
.account-deletion-panel,
.account-recovery-panel {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(20, 43, 77, .10);
}

.account-session-panel {
  justify-items: start;
}

.account-recovery-panel {
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid rgba(20, 43, 77, .10);
  border-radius: 12px;
  background: #fff;
}

.account-deletion-panel h3,
.account-recovery-panel h2 {
  margin: 0;
  color: #1f2530;
  font-size: 15px;
  font-weight: 620;
}

.account-deletion-panel p,
.account-recovery-panel p {
  margin: 0;
  color: #68707d;
  font-size: 13px;
  line-height: 1.65;
}

.danger-outline-button {
  justify-self: start;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(173, 36, 56, .35);
  border-radius: 999px;
  background: transparent;
  color: #9c2234;
  font-size: 13px;
  font-weight: 560;
  cursor: pointer;
}

.follow-list-modal,
.draft-list-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  place-items: center;
  padding: 24px;
}

.follow-list-modal.active,
.draft-list-modal.active {
  display: grid;
}

.follow-list-backdrop,
.draft-list-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(8px);
}

.follow-list-panel,
.draft-list-panel {
  position: relative;
  width: min(420px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 48px));
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .16);
}

.follow-list-panel header,
.draft-list-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(20, 43, 77, .10);
}

.follow-list-panel h2,
.draft-list-panel h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 620;
}

.follow-list-panel header button,
.draft-list-panel header button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}

.follow-list-body,
.draft-list-body {
  display: grid;
  max-height: 540px;
  overflow: auto;
  padding: 8px;
}

.draft-list-body {
  gap: 8px;
}

.draft-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border: 1px solid rgba(20, 43, 77, .08);
  border-radius: 12px;
  background: rgba(247, 248, 249, .78);
}

.draft-list-main {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.draft-list-thumb {
  display: block;
  width: 52px;
  height: 68px;
  overflow: hidden;
  border-radius: 8px;
  background: #e8ebef;
}

.draft-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.draft-list-copy {
  min-width: 0;
}

.draft-list-copy strong,
.draft-list-copy small {
  display: block;
}

.draft-list-copy strong {
  overflow: hidden;
  color: #152033;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.draft-list-copy small {
  margin-top: 4px;
  color: #69717d;
  font-size: 12px;
  line-height: 1.35;
}

.draft-list-delete {
  min-width: 52px;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(156, 34, 52, .08);
  color: #9c2234;
  font-size: 12px;
  font-weight: 620;
  cursor: pointer;
}

.follow-user-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.follow-user-item:hover {
  background: #f7f8f9;
}

.follow-user-item strong,
.follow-user-item small {
  display: block;
}

.follow-user-item strong {
  color: #152033;
  font-size: 14px;
  font-weight: 600;
}

.follow-user-item small,
.follow-list-empty {
  color: #69717d;
  font-size: 13px;
}

.feed-segmented {
  display: inline-grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center;
  gap: 3px;
  width: auto !important;
  max-width: 100%;
  padding: 3px !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .72) !important;
}

.feed-segmented button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px !important;
  min-height: 34px;
  padding: 0 14px !important;
  border-radius: 999px !important;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}

.feed-segmented button.active {
  background: #ffffff !important;
  box-shadow: 0 6px 16px rgba(20, 43, 77, .10) !important;
}

.mobile-nav button[data-view="post"]:not(.active) {
  background: transparent !important;
  color: #5a6371 !important;
}

.mobile-nav button[data-view="post"]:not(.active) img {
  filter: none !important;
}

.mobile-nav button.active {
  background: rgba(20, 43, 77, .08) !important;
  color: #142B4D !important;
}

.mobile-nav button[data-view="post"].active {
  background: #142B4D !important;
  color: #ffffff !important;
}

@media (max-width: 980px) {
  .mobile-compose-fab {
    position: fixed !important;
    right: 22px !important;
    bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    z-index: 75 !important;
    display: grid !important;
    place-items: center !important;
    width: 58px !important;
    height: 58px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #142B4D !important;
    box-shadow: 0 14px 30px rgba(20, 43, 77, .28) !important;
    color: #ffffff !important;
    font-size: 34px !important;
    font-weight: 360 !important;
    line-height: 1 !important;
  }

  body.post-modal-open .mobile-compose-fab,
  body.auth-required .mobile-compose-fab,
  body.profile-required .mobile-compose-fab {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .feed-segmented {
    width: 100% !important;
  }

  .feed-segmented button {
    min-width: 0 !important;
    padding: 0 8px !important;
    font-size: 13px;
  }

  .profile-social-stats {
    gap: 14px;
  }

  .follow-list-modal {
    align-items: end;
    padding: 0;
  }

  .follow-list-panel {
    width: 100%;
    max-height: 78vh;
    border-radius: 18px 18px 0 0;
  }
}

/* Story rail and compact search */
.evening-place-section {
  margin: 0 0 14px !important;
}

.evening-place-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 0 2px !important;
}

.evening-place-head h2 {
  margin: 0 !important;
  color: #142B4D !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

.user-story-rail {
  display: flex !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: 0 -2px 12px !important;
  padding: 10px 2px 12px !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: none !important;
  scroll-snap-type: x proximity !important;
}

/* Timeline sake-time rail: izakaya menu cards with filmstrip-like continuity. */
.evening-place-section .user-story-rail {
  gap: 10px !important;
  margin: 0 -12px 14px !important;
  padding: 10px 12px 16px !important;
  background: linear-gradient(180deg, #f8f0df 0%, #f2e7cf 100%) !important;
  border-top: 1px solid rgba(126, 91, 42, .18) !important;
  border-bottom: 1px solid rgba(126, 91, 42, .18) !important;
  scroll-snap-type: x mandatory !important;
}
.evening-place-section .user-story-item {
  flex-basis: 116px !important;
  padding: 7px 7px 8px !important;
  border: 1px solid rgba(126, 91, 42, .2) !important;
  border-radius: 4px !important;
  background: rgba(255, 251, 242, .92) !important;
  box-shadow: 0 4px 10px rgba(87, 57, 20, .08) !important;
  scroll-snap-align: center !important;
}
.evening-place-section .user-story-open { gap: 5px !important; }
.evening-place-section .user-story-avatar {
  width: 102px !important;
  height: 78px !important;
  border-radius: 2px !important;
  padding: 0 !important;
  background: #ded0b6 !important;
  box-shadow: none !important;
}
.evening-place-section .user-story-avatar img,
.evening-place-section .user-story-avatar > span { border: 0 !important; border-radius: 1px !important; }
.evening-place-section .user-story-item small { color: #654a2b !important; font-size: 10px !important; }
.evening-place-section .user-story-item em { display:block; width:100%; overflow:hidden; color:#9a6b2d; font-size:10px; font-style:normal; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.evening-place-section .own-story-item:first-child .user-story-avatar { background: #fffaf0 !important; border: 1px dashed rgba(126, 91, 42, .42) !important; }

.user-story-rail::-webkit-scrollbar {
  display: none !important;
}

.user-story-item {
  flex: 0 0 68px !important;
  display: grid !important;
  justify-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #142B4D !important;
  scroll-snap-align: start !important;
}

.user-story-open {
  display: grid !important;
  justify-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer !important;
}

.user-story-avatar {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 58px !important;
  padding: 2px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(196, 163, 90, .44), rgba(21, 21, 21, .82)) !important;
  box-shadow: 0 8px 18px rgba(20, 43, 77, .12) !important;
}

.own-story-avatar i {
  position: absolute !important;
  right: -2px !important;
  bottom: -2px !important;
  display: grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  background: #142B4D !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-style: normal !important;
  line-height: 1 !important;
}

.user-story-avatar img,
.user-story-avatar > span {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  border: 2px solid #ffffff !important;
  border-radius: inherit !important;
  background: #ffffff !important;
  color: #142B4D !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  object-fit: cover !important;
}

.banshaku-cover img {
  object-fit: cover !important;
  overflow: hidden !important;
  clip-path: inset(0 round 18px) !important;
}

.banshaku-empty-cover {
  font-size: 24px !important;
  font-weight: 420 !important;
  color: rgba(21, 21, 21, .58) !important;
}

.banshaku-create-cover {
  background: rgba(255, 255, 255, .92) !important;
  border-color: rgba(111, 94, 69, .32) !important;
}

.banshaku-create-cover .banshaku-empty-cover {
  font-size: 34px !important;
  color: rgba(21, 21, 21, .78) !important;
}

.user-story-item small {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  color: #4d596b !important;
  font-size: 11px !important;
  font-weight: 620 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.user-story-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 3px !important;
  width: 70px !important;
}

.user-story-actions button {
  display: grid !important;
  grid-template-columns: 12px minmax(0, auto) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  min-height: 22px !important;
  padding: 0 2px !important;
  border: 1px solid rgba(20, 43, 77, .08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .82) !important;
  color: #53606a !important;
  font-size: 10px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.user-story-actions button.active {
  border-color: rgba(244, 167, 185, .55) !important;
  background: rgba(244, 167, 185, .16) !important;
  color: #9b2f4c !important;
}

.user-story-actions img {
  width: 12px !important;
  height: 12px !important;
}

.user-story-actions span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

.evening-compose-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: none !important;
  place-items: center !important;
  padding: 18px !important;
}

.evening-compose-modal.active {
  display: grid !important;
}

.evening-compose-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(8, 10, 14, .78) !important;
  backdrop-filter: blur(12px) !important;
}

.evening-compose-panel {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 420px) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 0 !important;
  width: min(1120px, 96vw) !important;
  height: min(760px, 92dvh) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 20px !important;
  background: #111318 !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .32) !important;
}

.evening-compose-header {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 20px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  background: #111318 !important;
}

.evening-compose-header h2 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 22px !important;
  letter-spacing: 0 !important;
}

.evening-compose-header button {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .10) !important;
  color: #ffffff !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

.evening-preview-area {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 430px) 74px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 24px !important;
}

.evening-compose-stage {
  position: relative !important;
  min-height: 0 !important;
  width: min(430px, 100%) !important;
  max-height: 100% !important;
  overflow: hidden !important;
  border: 10px solid rgba(255, 255, 255, .04) !important;
  border-radius: 28px !important;
  background: radial-gradient(circle at 50% 0%, rgba(40, 54, 70, .62), #05070b 58%) !important;
  aspect-ratio: 9 / 16 !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .48) !important;
  touch-action: none !important;
}

.evening-compose-stage.photo-selected::after {
  content: "";
  position: absolute !important;
  inset: 10px !important;
  z-index: 3 !important;
  border: 1px solid rgba(255, 255, 255, .46) !important;
  border-radius: 14px !important;
  pointer-events: none !important;
}

.evening-compose-stage input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.evening-photo-empty {
  display: none !important;
}

.evening-photo-empty span {
  display: inline-grid !important;
  place-items: center !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .12) !important;
  backdrop-filter: blur(8px) !important;
}

.evening-stage-rail {
  display: grid !important;
  gap: 10px !important;
  align-content: center !important;
}

.evening-stage-rail button {
  display: grid !important;
  justify-items: center !important;
  gap: 5px !important;
  width: 68px !important;
  min-height: 68px !important;
  padding: 8px 4px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .10) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22) !important;
  cursor: pointer !important;
}

.evening-stage-rail button:hover {
  background: rgba(255, 255, 255, .16) !important;
}

.evening-stage-rail button span {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .12) !important;
  font-size: 19px !important;
  font-weight: 820 !important;
}

.evening-tool-icon img {
  display: block !important;
  width: 58px !important;
  height: 58px !important;
}

.evening-stage-rail .evening-tool-icon {
  width: 58px !important;
  height: 58px !important;
  background: transparent !important;
}

.evening-stage-rail button small {
  max-width: 58px !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, .78) !important;
  font-size: 10px !important;
  font-weight: 680 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.evening-mobile-tool-button,
.evening-mobile-tool-sheet {
  display: none !important;
}

.evening-compose-stage > img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform-origin: center !important;
  will-change: transform !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
}

.evening-compose-stage > img.active {
  display: block !important;
}

.evening-overlay-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.evening-overlay-item {
  position: absolute !important;
  display: block !important;
  max-width: 86% !important;
  min-width: 36px !important;
  padding: 4px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 820 !important;
  line-height: 1.18 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .42) !important;
  white-space: pre-wrap !important;
  touch-action: none !important;
  outline: 0 !important;
  cursor: grab !important;
  pointer-events: auto !important;
}

.evening-rotate-handle {
  position: absolute !important;
  z-index: 4 !important;
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(255, 255, 255, .62) !important;
  border-radius: 999px !important;
  background: rgba(18, 20, 22, .70) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .26) !important;
  cursor: grab !important;
  pointer-events: auto !important;
  touch-action: none !important;
  backdrop-filter: blur(12px) !important;
}

.evening-overlay-item.text {
  font-size: 24px !important;
}

.evening-overlay-item.sticker {
  font-size: 42px !important;
}

.evening-overlay-item.active {
  outline: 1px solid rgba(255, 255, 255, .64) !important;
  outline-offset: 5px !important;
  background: transparent !important;
}

.evening-overlay-item.text.editing {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .56);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.evening-overlay-item[contenteditable="true"] {
  -webkit-user-select: text !important;
  user-select: text !important;
}

.evening-text-editor {
  position: absolute !important;
  right: 12px !important;
  bottom: 88px !important;
  left: 12px !important;
  z-index: 7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 8px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 999px !important;
  background: rgba(12, 14, 16, .62) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .20) !important;
  backdrop-filter: blur(14px) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.evening-text-editor.hidden-field {
  display: none !important;
}

.evening-text-editor::-webkit-scrollbar {
  display: none !important;
}

.evening-text-editor select,
.evening-text-editor button,
.evening-text-editor input {
  display: grid !important;
  place-items: center !important;
  height: 34px !important;
  min-width: 34px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .10) !important;
  color: #ffffff !important;
  font: inherit !important;
  flex: 0 0 auto !important;
}

.evening-text-editor select {
  max-width: 96px !important;
  padding: 0 10px !important;
}

.evening-text-editor input[type="color"] {
  width: 38px !important;
  padding: 4px !important;
}

.evening-text-editor button.active {
  background: rgba(255, 255, 255, .28) !important;
}

.evening-color-palette {
  display: none !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 34px !important;
  padding: 0 4px !important;
}

.evening-text-editor.color-open .evening-color-palette {
  display: flex !important;
}

.evening-color-palette button {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  background: var(--swatch) !important;
}

.evening-color-palette button.active {
  outline: 2px solid #ffffff !important;
  outline-offset: 2px !important;
}

.evening-trash-zone {
  position: absolute !important;
  left: 50% !important;
  bottom: 16px !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 58px !important;
  border: 2px solid rgba(255, 255, 255, .42) !important;
  border-radius: 999px !important;
  background: rgba(10, 18, 30, .58) !important;
  color: #ffffff !important;
  font-size: 24px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) scale(.92) !important;
  transition: opacity .14s ease, transform .14s ease, background .14s ease !important;
}

.evening-trash-zone.active {
  opacity: 1 !important;
  transform: translateX(-50%) scale(1) !important;
}

.evening-trash-zone.armed {
  background: rgba(155, 47, 76, .92) !important;
  transform: translateX(-50%) scale(1.12) !important;
}

.evening-compose-tools {
  display: grid !important;
  align-content: start !important;
  gap: 14px !important;
  min-height: 0 !important;
  padding: 20px !important;
  border-left: 1px solid rgba(255, 255, 255, .08) !important;
  background: #181b20 !important;
  overflow: auto !important;
}

.evening-compose-tools label {
  display: grid !important;
  gap: 7px !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .04) !important;
  color: #ffffff !important;
  font-weight: 720 !important;
}

.evening-caption-field,
.evening-media-card {
  display: none !important;
}

.evening-compose-tools textarea {
  width: 100% !important;
  min-height: 98px !important;
  resize: vertical !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #ffffff !important;
  font: inherit !important;
}

.evening-tool-card {
  display: grid !important;
  gap: 10px !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .04) !important;
}

.evening-tool-card .mini-label {
  margin: 0 !important;
  color: rgba(255, 255, 255, .72) !important;
}

.evening-tool-card small {
  color: rgba(255, 255, 255, .62) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}

.evening-media-button {
  display: grid !important;
  place-items: center !important;
  min-height: 48px !important;
  width: 100% !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #1da1ff, #7558ff) !important;
  color: #ffffff !important;
  font-weight: 820 !important;
  box-shadow: 0 14px 30px rgba(34, 128, 255, .22) !important;
}

.evening-tool-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.evening-tool-row button {
  display: inline-grid !important;
  place-items: center !important;
  min-height: 38px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #ffffff !important;
  font-weight: 720 !important;
}

.evening-mention-suggestions {
  display: grid !important;
  gap: 6px !important;
  padding: 8px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .05) !important;
}

.evening-mention-suggestions button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #ffffff !important;
  text-align: left !important;
}

.evening-mention-suggestions span {
  color: rgba(255, 255, 255, .62) !important;
  font-size: 12px !important;
}

.evening-sticker-row {
  display: none !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.evening-sticker-row button {
  display: grid !important;
  place-items: center !important;
  min-width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #ffffff !important;
  font-size: 20px !important;
}

.evening-sticker-picker {
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .05) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16) !important;
}

.evening-sticker-picker.hidden-field {
  display: none !important;
}

.evening-sticker-picker-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #ffffff !important;
}

.evening-sticker-picker-head button {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #ffffff !important;
  font-size: 20px !important;
}

.evening-sticker-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.evening-sticker-grid button {
  display: grid !important;
  place-items: center !important;
  min-height: 44px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 780 !important;
}

.evening-compose-tools {
  inset: 0 !important;
  pointer-events: none !important;
}

.evening-compose-tools > * {
  pointer-events: auto !important;
}

.evening-compose-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding-top: 4px !important;
}

.global-search-toggle,
.global-search-clear,
.mobile-header-actions {
  display: none !important;
}

.global-search-shell {
  grid-template-columns: 1fr !important;
}

.global-search-shell input {
  min-width: 0 !important;
}

.image-lightbox {
  z-index: 2147483200 !important;
}

.image-lightbox-stage {
  overflow: hidden !important;
}

.image-lightbox-stage img {
  max-width: min(100%, 760px) !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 980px) {
  .evening-place-section {
    margin: 0 0 10px !important;
  }

  .evening-place-head {
    padding: 0 2px !important;
  }

  .mobile-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-self: end !important;
  }

  .mobile-header-search,
  .mobile-search-button,
  .mobile-profile-shortcut {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border: 1px solid rgba(20, 43, 77, .12) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .94) !important;
    color: #142B4D !important;
    box-shadow: 0 8px 20px rgba(20, 43, 77, .08) !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  .mobile-profile-shortcut img {
    width: 20px !important;
    height: 20px !important;
  }

  .global-search-shell {
    display: none !important;
  }

  .global-search-shell.active {
    position: fixed !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    right: 12px !important;
    left: 12px !important;
    z-index: 2147482500 !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px !important;
    border: 1px solid rgba(20, 43, 77, .12) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 18px 40px rgba(20, 43, 77, .18) !important;
  }

  .global-search-shell.active .global-search-toggle,
  .global-search-shell.active .global-search-clear {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(20, 43, 77, .07) !important;
    color: #142B4D !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  .global-search-shell.active input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 4px !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    font-size: 15px !important;
  }

  .global-search-panel.active {
    position: fixed !important;
    top: calc(70px + env(safe-area-inset-top)) !important;
    right: 12px !important;
    left: 12px !important;
    z-index: 2147482490 !important;
    max-height: 52dvh !important;
    overflow: auto !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 40px rgba(20, 43, 77, .18) !important;
  }

  .user-story-rail {
    margin-right: -18px !important;
    margin-left: -18px !important;
    padding: 8px 18px 14px !important;
  }

  .quick-compose {
    display: none !important;
  }

  .image-lightbox-panel {
    inset: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)) !important;
    border-radius: 14px !important;
  }

  .image-lightbox-stage {
    padding: 10px !important;
  }

  .image-lightbox-stage img {
    max-width: 100% !important;
    max-height: calc(100dvh - 104px) !important;
  }

  .evening-compose-modal {
    padding: 0 !important;
  }

  .evening-compose-panel {
    position: relative !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: #000000 !important;
  }

  .evening-compose-header {
    position: absolute !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    right: 12px !important;
    left: 12px !important;
    z-index: 8 !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  .evening-compose-header h2 {
    display: none !important;
  }

  .evening-compose-header button {
    pointer-events: auto !important;
    width: 58px !important;
    height: 58px !important;
    border: 0 !important;
    background: rgba(0, 0, 0, .42) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25) !important;
    font-size: 38px !important;
  }

  .evening-preview-area {
    position: absolute !important;
    inset: 0 !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: #000000 !important;
  }

  .evening-compose-stage {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    aspect-ratio: auto !important;
  }

  .evening-stage-rail {
    display: none !important;
  }

  .evening-mobile-tool-button {
    position: absolute !important;
    right: 14px !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    z-index: 8 !important;
    display: grid !important;
    place-items: center !important;
    width: 58px !important;
    height: 58px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .52) !important;
    color: #ffffff !important;
    font-size: 34px !important;
    line-height: 1 !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .32) !important;
    backdrop-filter: blur(10px) !important;
  }

  .evening-compose-tools {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 6 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: end !important;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .74) 18%, #000000 100%) !important;
    overflow: visible !important;
  }

  .evening-media-card,
  .evening-sticker-row {
    grid-column: 1 / -1 !important;
  }

  .evening-media-card,
  .evening-sticker-row {
    display: none !important;
  }

  .evening-mobile-tool-sheet {
    position: fixed !important;
    right: 12px !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    z-index: 2147483050 !important;
    display: grid !important;
    gap: 8px !important;
    min-width: 184px !important;
    padding: 10px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 22px !important;
    background: rgba(20, 20, 22, .90) !important;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .42) !important;
    backdrop-filter: blur(16px) !important;
  }

  .evening-mobile-tool-sheet.hidden-field {
    display: none !important;
  }

  .evening-mobile-tool-sheet button {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 46px !important;
    border: 0 !important;
    border-radius: 16px !important;
    padding: 6px 10px !important;
    background: rgba(255, 255, 255, .10) !important;
    color: #ffffff !important;
    text-align: left !important;
  }

  .evening-mobile-tool-sheet span {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    background: transparent !important;
  }

  .evening-mobile-tool-sheet .evening-tool-icon img {
    width: 42px !important;
    height: 42px !important;
  }

  .evening-mobile-tool-sheet strong {
    overflow: hidden !important;
    font-size: 14px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .evening-sticker-picker {
    position: fixed !important;
    right: 12px !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    z-index: 2147483060 !important;
    display: grid !important;
    max-height: min(44dvh, 320px) !important;
    padding: 14px !important;
    border-radius: 22px !important;
    background: rgba(20, 20, 22, .92) !important;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .46) !important;
    backdrop-filter: blur(16px) !important;
    overflow: auto !important;
  }

  .evening-sticker-picker.hidden-field {
    display: none !important;
  }

  .evening-sticker-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .evening-compose-tools label {
    grid-column: 1 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .evening-compose-tools .evening-caption-field {
    display: none !important;
  }

  .evening-compose-tools label > span {
    display: none !important;
  }

  .evening-compose-tools textarea {
    min-height: 46px !important;
    max-height: 86px !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 13px 18px !important;
    background: rgba(255, 255, 255, .12) !important;
    color: #ffffff !important;
    font-size: 16px !important;
  }

  .evening-compose-tools textarea::placeholder {
    color: rgba(255, 255, 255, .78) !important;
  }

  .evening-mention-suggestions {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    align-self: end !important;
    margin-bottom: 58px !important;
  }

  .evening-compose-actions {
    grid-column: 2 !important;
    display: grid !important;
    padding: 0 !important;
  }

  .evening-compose-actions .secondary-button {
    display: none !important;
  }

  .evening-compose-actions .primary-button {
    display: grid !important;
    place-items: center !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #209BFF, #6C4DFF) !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  .evening-compose-actions .primary-button::before {
    content: "→";
    color: #ffffff !important;
    font-size: 38px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 560px) {
  .user-story-item {
    flex-basis: 70px !important;
  }

  .user-story-avatar {
    width: 56px !important;
    height: 56px !important;
  }
}

/* SakeLike Design 2.0: photo-first gallery layer */
:root {
  --design2-ink: #151515;
  --design2-muted: #77736d;
  --design2-paper: #f8f8f6;
  --design2-line: rgba(21, 21, 21, .08);
  --design2-accent: #6f5e45;
}

body {
  background: var(--design2-paper) !important;
  color: var(--design2-ink) !important;
  font-family: Inter, "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: 0 !important;
}

.app-shell {
  display: grid !important;
  grid-template-columns: 188px minmax(0, 1fr) !important;
  min-height: 100dvh !important;
  background: var(--design2-paper) !important;
}

.side-nav {
  position: sticky !important;
  top: 0 !important;
  width: 188px !important;
  height: 100dvh !important;
  padding: 42px 18px !important;
  border: 0 !important;
  background: rgba(248, 248, 246, .88) !important;
  backdrop-filter: blur(18px) !important;
}

.brand-block {
  display: none !important;
}

.brand-mark {
  width: 34px !important;
  height: 34px !important;
}

.brand-name {
  color: var(--design2-ink) !important;
  font-size: 18px !important;
  font-weight: 620 !important;
}

.brand-sub,
.side-card,
.quick-compose,
.trend-panel,
.section-head p,
.post-title-row,
.post-meta,
.rating-pill,
.status-pill {
  display: none !important;
}

.nav-list {
  gap: 10px !important;
  margin-top: 56px !important;
}

.nav-item {
  min-height: 42px !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(21, 21, 21, .52) !important;
  box-shadow: none !important;
}

.nav-item span {
  width: 28px !important;
  height: 28px !important;
  background: transparent !important;
}

.nav-item img {
  width: 18px !important;
  height: 18px !important;
  opacity: .66 !important;
}

.nav-item b {
  font-size: 13px !important;
  font-weight: 520 !important;
}

.nav-item.active,
.nav-item:hover {
  color: var(--design2-ink) !important;
  background: transparent !important;
}

.nav-item.active b {
  font-weight: 720 !important;
}

.main-panel {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 32px 112px !important;
  background: var(--design2-paper) !important;
}

.top-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  max-width: 780px !important;
  margin: 0 auto !important;
  padding: 22px 0 16px !important;
  border: 0 !important;
  background: rgba(248, 248, 246, .86) !important;
  backdrop-filter: blur(18px) !important;
}

.top-brand {
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.top-brand-logo {
  width: 32px !important;
  height: 32px !important;
}

.top-brand .kicker {
  display: none !important;
}

.top-brand h1 {
  color: var(--design2-ink) !important;
  font-size: 20px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

.top-actions {
  gap: 10px !important;
}

.top-actions .primary-button,
.auth-gate-launch,
.secondary-button,
.primary-button,
.compact-button {
  border: 1px solid var(--design2-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .64) !important;
  color: var(--design2-ink) !important;
  box-shadow: none !important;
}

.top-actions > .primary-button {
  min-height: 38px !important;
  padding: 0 16px !important;
  background: var(--design2-ink) !important;
  color: #ffffff !important;
}

.search-box input,
#language-select {
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: none !important;
}

.evening-place-section {
  max-width: 780px !important;
  margin: 8px auto 30px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.evening-place-head {
  display: none !important;
}

.user-story-rail {
  gap: 18px !important;
  padding: 8px 0 4px !important;
}

.user-story-item {
  flex: 0 0 76px !important;
}

.user-story-open {
  gap: 8px !important;
  color: var(--design2-ink) !important;
}

.user-story-avatar {
  width: 64px !important;
  height: 64px !important;
  border: 1px solid rgba(21, 21, 21, .12) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.own-story-avatar {
  border-color: rgba(111, 94, 69, .42) !important;
}

.own-story-avatar i {
  background: var(--design2-ink) !important;
  color: #ffffff !important;
}

.user-story-item small {
  color: var(--design2-muted) !important;
  font-size: 11px !important;
  font-weight: 520 !important;
}

.user-story-actions {
  display: none !important;
}

.view {
  max-width: 780px !important;
  margin: 0 auto !important;
}

.feed-layout {
  display: block !important;
  max-width: 780px !important;
  margin: 0 auto !important;
}

.section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 18px 0 26px !important;
}

.section-head h2 {
  margin: 0 !important;
  color: var(--design2-ink) !important;
  font-size: 18px !important;
  font-weight: 640 !important;
}

.feed-segmented {
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.feed-segmented button {
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(21, 21, 21, .46) !important;
  font-size: 13px !important;
  font-weight: 520 !important;
}

.feed-segmented button.active {
  background: transparent !important;
  color: var(--design2-ink) !important;
  font-weight: 720 !important;
}

.post-list {
  display: grid !important;
  gap: 54px !important;
}

.post-card {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.post-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 44px !important;
  padding: 0 0 14px !important;
  border: 0 !important;
  background: transparent !important;
}

.post-author-row {
  gap: 10px !important;
}

.post-avatar,
.post-avatar img {
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.post-author-row strong {
  display: block !important;
  color: var(--design2-ink) !important;
  font-size: 14px !important;
  font-weight: 640 !important;
  line-height: 1.35 !important;
}

.post-author-row span {
  display: block !important;
  color: var(--design2-muted) !important;
  font-size: 12px !important;
  font-weight: 430 !important;
  line-height: 1.35 !important;
}

.post-menu-button {
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(21, 21, 21, .50) !important;
}

.post-content {
  display: grid !important;
  gap: 12px !important;
  padding: 14px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.post-card p {
  margin: 0 !important;
  color: var(--design2-ink) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

.post-card p strong {
  font-weight: 680 !important;
}

/* Keep the timeline scannable while preserving a post's authored line breaks in detail. */
.post-comment {
  overflow-wrap: anywhere;
}

.post-comment.is-collapsed {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.post-comment-more {
  justify-self: start;
  min-height: 32px;
  margin: -4px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--design2-accent, var(--accent));
  font: inherit;
  font-size: 13px;
  font-weight: 680;
  cursor: pointer;
}

.post-comment-more:hover,
.post-comment-more:focus-visible {
  text-decoration: underline;
}

.post-detail-copy {
  overflow-wrap: anywhere;
}

.post-actions {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 0 !important;
  border: 0 !important;
}

.post-actions button {
  min-height: 34px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(21, 21, 21, .64) !important;
  font-size: 13px !important;
  font-weight: 520 !important;
  box-shadow: none !important;
}

.post-actions img {
  width: 17px !important;
  height: 17px !important;
  opacity: .78 !important;
}

.like-action.active,
.save-action.active,
.post-actions button.active {
  color: var(--design2-ink) !important;
  background: rgba(21, 21, 21, .06) !important;
}

@media (min-width: 1180px) {
  .app-shell {
    grid-template-columns: minmax(164px, 1fr) minmax(0, 860px) minmax(164px, 1fr) !important;
  }

  .side-nav {
    grid-column: 1 !important;
    justify-self: end !important;
  }

  .main-panel {
    grid-column: 2 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

@media (max-width: 980px) {
  body {
    background: #ffffff !important;
  }

  .app-shell,
  .main-panel,
  .feed-layout,
  .view {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    background: #ffffff !important;
  }

  .side-nav {
    display: none !important;
  }

  .main-panel {
    padding: 0 0 88px !important;
  }

  .top-bar {
    max-width: none !important;
    padding: max(12px, env(safe-area-inset-top)) 16px 10px !important;
    background: rgba(255, 255, 255, .84) !important;
  }

  .top-actions {
    display: none !important;
  }

  .mobile-header-actions {
    display: flex !important;
  }

  .evening-place-section {
    max-width: none !important;
    margin: 4px 0 18px !important;
    padding: 0 0 0 16px !important;
  }

  .user-story-rail {
    padding-right: 16px !important;
  }

  .section-head {
    margin: 8px 16px 16px !important;
  }

  .section-head h2 {
    display: none !important;
  }

  .feed-segmented {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    overflow-x: auto !important;
  }

  .feed-segmented button {
    padding: 0 !important;
    white-space: nowrap !important;
  }

  .post-list {
    gap: 34px !important;
  }

  .post-card-head {
    padding: 0 16px 12px !important;
  }

  .post-content {
    padding: 12px 16px 0 !important;
  }

  .post-card p {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  .post-actions {
    margin-left: -8px !important;
  }

  .mobile-nav {
    position: fixed !important;
    right: 18px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    left: 18px !important;
    z-index: 70 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-height: 58px !important;
    padding: 6px !important;
    border: 1px solid rgba(21, 21, 21, .08) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .84) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .10) !important;
    backdrop-filter: blur(18px) !important;
  }

  .mobile-nav button {
    min-height: 46px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(21, 21, 21, .52) !important;
    font-size: 11px !important;
    font-weight: 560 !important;
  }

  .mobile-nav button.active {
    background: rgba(21, 21, 21, .08) !important;
    color: var(--design2-ink) !important;
  }

  .mobile-nav img {
    width: 18px !important;
    height: 18px !important;
    opacity: .72 !important;
    filter: none !important;
  }

  .mobile-compose-fab {
    right: 20px !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    width: 54px !important;
    height: 54px !important;
    border: 1px solid rgba(255, 255, 255, .36) !important;
    background: rgba(21, 21, 21, .88) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .20) !important;
    backdrop-filter: blur(10px) !important;
  }
}

/* Design 2.0 typography: quiet structure over loud emphasis */
.brand-name,
.top-brand h1,
.section-head h2,
.post-author-row strong,
.post-card p strong,
.nav-item.active b,
.feed-segmented button.active,
.mobile-nav button.active,
.official-mini-badge {
  font-weight: 600 !important;
}

.nav-item b,
.feed-segmented button,
.mobile-nav button,
.post-author-row span,
.post-card p,
.post-actions button,
.user-story-item small,
.brand-sub,
.mini-label,
.status-pill,
.tag,
.rating-pill {
  font-weight: 400 !important;
}

.post-author-row strong {
  font-size: 13px !important;
}

.post-author-row span {
  font-size: 11px !important;
}

.post-card p {
  max-width: 58em !important;
  color: rgba(21, 21, 21, .82) !important;
  font-size: 14px !important;
}

.post-actions button {
  color: rgba(21, 21, 21, .54) !important;
}

.section-head h2 {
  font-size: 16px !important;
}

.top-brand h1 {
  font-size: 18px !important;
}

.brand-name {
  font-size: 17px !important;
}

.evening-compose-panel,
.evening-compose-panel *,
.auth-card,
.auth-card *,
.post-detail-panel,
.post-detail-panel *,
.profile-hero,
.profile-hero *,
.compose-panel,
.compose-panel * {
  font-weight: 400 !important;
}

.evening-compose-header h2,
.evening-sticker-picker-head strong,
.auth-card h2,
.post-detail-panel h2,
.profile-hero h2,
.compose-panel h2,
.compose-panel h3 {
  font-weight: 600 !important;
}

.evening-overlay-item.text,
.evening-overlay-item.sticker {
  font-weight: 500 !important;
}

/* Banjokoro canvas editor: toolbox over form. */
.evening-compose-panel {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  width: min(680px, 96vw) !important;
  height: min(920px, 94dvh) !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: #000000 !important;
}

.evening-compose-header {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: 14px !important;
  z-index: 10 !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}

.evening-compose-header h2 {
  display: none !important;
}

.evening-compose-header button {
  pointer-events: auto !important;
  width: 48px !important;
  height: 48px !important;
  border: 0 !important;
  background: rgba(0, 0, 0, .44) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(12px) !important;
}

.evening-preview-area {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  background: #000000 !important;
}

.evening-compose-stage {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  aspect-ratio: auto !important;
}

.evening-stage-rail {
  display: none !important;
}

.evening-mobile-tool-button {
  position: absolute !important;
  right: 18px !important;
  bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  z-index: 9 !important;
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 58px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .48) !important;
  color: #ffffff !important;
  font-size: 34px !important;
  line-height: 1 !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(14px) !important;
}

.evening-compose-tools {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 8 !important;
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.evening-compose-tools > * {
  pointer-events: auto !important;
}

.evening-mobile-tool-sheet {
  position: absolute !important;
  right: 84px !important;
  bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  z-index: 12 !important;
  display: flex !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 8px !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 999px !important;
  background: rgba(12, 14, 16, .62) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .30) !important;
  backdrop-filter: blur(16px) !important;
}

.evening-mobile-tool-sheet.hidden-field {
  display: none !important;
}

.evening-mobile-tool-sheet button {
  display: grid !important;
  place-items: center !important;
  width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #ffffff !important;
}

.evening-mobile-tool-sheet strong,
.evening-mobile-tool-sheet small,
.evening-stage-rail small {
  display: none !important;
}

.evening-mobile-tool-sheet .evening-tool-icon,
.evening-mobile-tool-sheet .evening-tool-icon img {
  width: 48px !important;
  height: 48px !important;
}

.evening-compose-actions {
  position: absolute !important;
  right: 16px !important;
  bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  z-index: 11 !important;
  display: grid !important;
  padding: 0 !important;
}

.evening-compose-actions .secondary-button {
  display: none !important;
}

.evening-compose-actions .primary-button {
  display: grid !important;
  place-items: center !important;
  min-width: 58px !important;
  width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .92) !important;
  color: transparent !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .26) !important;
  font-size: 0 !important;
  backdrop-filter: blur(10px) !important;
}

.evening-compose-actions .primary-button::before {
  content: "→";
  color: #151515 !important;
  font-size: 34px !important;
  line-height: 1 !important;
}

/* Banshaku Editor UX refinements: direct canvas editing, quiet publish action. */
.evening-caption-field,
.evening-compose-tools textarea,
#evening-caption {
  display: none !important;
}

.evening-overlay-item.active {
  outline: 1px solid rgba(255, 255, 255, .72) !important;
  outline-offset: 7px !important;
  box-shadow: none !important;
}

.evening-overlay-item.active::before,
.evening-overlay-item.active::after {
  content: "" !important;
  position: absolute !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .28) !important;
  pointer-events: none !important;
}

.evening-overlay-item.active::before {
  top: -12px !important;
  left: -12px !important;
}

.evening-overlay-item.active::after {
  right: -12px !important;
  bottom: -12px !important;
}

.evening-overlay-item.text.editing {
  min-width: 1.4em !important;
  min-height: 1.25em !important;
  caret-color: #ffffff !important;
  text-decoration: none !important;
}

.evening-overlay-item.text.editing:empty::before {
  content: "" !important;
}

.evening-overlay-item.text {
  width: 86% !important;
  max-width: 86% !important;
  min-width: 1.4em !important;
  color: var(--evening-text-color, #ffffff) !important;
  font-family: var(--evening-text-font, system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans JP", sans-serif) !important;
  font-size: var(--evening-text-size, 24px) !important;
  font-weight: var(--evening-text-weight, 450) !important;
  font-style: var(--evening-text-style, normal) !important;
  line-height: var(--evening-text-line, 1.18) !important;
  text-align: var(--evening-text-align, center) !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.evening-text-editor {
  right: 18px !important;
  bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  left: 18px !important;
  z-index: 12 !important;
  max-width: calc(100% - 36px) !important;
  padding: 7px !important;
  background: rgba(16, 17, 18, .58) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .20) !important;
}

.evening-compose-actions {
  top: calc(18px + env(safe-area-inset-top)) !important;
  right: 18px !important;
  bottom: auto !important;
  z-index: 14 !important;
}

.evening-compose-actions .primary-button {
  width: auto !important;
  min-width: 68px !important;
  height: 42px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #151515 !important;
  font-size: 14px !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18) !important;
}

.evening-compose-actions .primary-button::before {
  content: none !important;
}

.evening-mobile-tool-button {
  display: none !important;
}

.evening-mobile-tool-sheet,
.evening-mobile-tool-sheet.hidden-field {
  left: 50% !important;
  right: auto !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  z-index: 14 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  max-width: calc(100% - 28px) !important;
  padding: 7px !important;
  border-radius: 999px !important;
  background: rgba(14, 15, 16, .64) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(18px) !important;
}

.evening-mobile-tool-sheet button {
  width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .06) !important;
}

.evening-mobile-tool-sheet button[data-evening-publish] {
  background: rgba(255, 255, 255, .90) !important;
  color: #151515 !important;
}

.evening-tool-publish {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 22px !important;
  font-weight: 520 !important;
  line-height: 1 !important;
}

.evening-compose-actions {
  display: none !important;
}

.evening-text-editor {
  bottom: calc(82px + env(safe-area-inset-bottom)) !important;
}

.banshaku-cover img,
.banshaku-cover > span {
  border-radius: 18px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 18px) !important;
}

/* Banshaku Canvas 1.0: paper-first creative canvas refinements */
.evening-compose-modal.active {
  background: #F6F4EF !important;
}

.evening-compose-panel,
.evening-preview-area {
  background: #F6F4EF !important;
}

.evening-compose-backdrop {
  background: rgba(246, 244, 239, .94) !important;
}

.evening-compose-stage {
  background: #FAF8F4 !important;
  border: 0 !important;
  border-radius: 28px !important;
  box-shadow: 0 24px 80px rgba(58, 45, 28, .16), 0 1px 2px rgba(58, 45, 28, .08) !important;
}

.evening-compose-stage::after {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  z-index: 1 !important;
  border-radius: 23px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42) !important;
  pointer-events: none !important;
}

.evening-compose-stage > img.active {
  inset: 5px !important;
  width: calc(100% - 10px) !important;
  height: calc(100% - 10px) !important;
  border-radius: 22px !important;
}

.evening-compose-stage.photo-framed > img.active {
  inset: 13px !important;
  width: calc(100% - 26px) !important;
  height: calc(100% - 26px) !important;
  padding: 8px !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 30px rgba(58, 45, 28, .14) !important;
  box-sizing: border-box !important;
}

.evening-overlay-item.text {
  white-space: pre-wrap !important;
  text-wrap: pretty !important;
}

.evening-mobile-tool-sheet,
.evening-mobile-tool-sheet.hidden-field {
  width: min(540px, calc(100vw - 28px)) !important;
  max-width: min(540px, calc(100vw - 28px)) !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 9px 10px !important;
  background: rgba(22, 21, 19, .68) !important;
  box-shadow: 0 18px 52px rgba(30, 24, 18, .30) !important;
}

.evening-mobile-tool-sheet button {
  position: relative !important;
  flex: 1 1 0 !important;
  width: auto !important;
  height: 58px !important;
  min-width: 0 !important;
  min-height: 58px !important;
  overflow: hidden !important;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease !important;
}

.evening-mobile-tool-sheet button::after {
  content: "" !important;
  position: absolute !important;
  inset: 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .18) !important;
  opacity: 0 !important;
  transform: scale(.55) !important;
  transition: opacity .22s ease, transform .22s ease !important;
  pointer-events: none !important;
}

.evening-mobile-tool-sheet button:active,
.evening-mobile-tool-sheet button.tool-pulse {
  transform: translateY(-3px) scale(1.03) !important;
  background: rgba(255, 255, 255, .16) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18) !important;
}

.evening-mobile-tool-sheet button:active::after,
.evening-mobile-tool-sheet button.tool-pulse::after {
  opacity: 1 !important;
  transform: scale(1.2) !important;
}

.evening-tool-icon img,
.evening-tool-publish img {
  display: block !important;
  width: 46px !important;
  height: 46px !important;
}

.evening-tool-icon img {
  filter: invert(1) brightness(1.8) !important;
  opacity: .92 !important;
}

.evening-tool-publish img {
  filter: none !important;
  opacity: .88 !important;
}

.evening-tool-publish {
  width: 46px !important;
  height: 46px !important;
}

.evening-compose-modal.saving .evening-compose-stage::before {
  content: "保存しています" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 86px !important;
  z-index: 20 !important;
  transform: translateX(-50%) !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background: rgba(21, 21, 21, .72) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 520 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .22) !important;
  animation: savingFloat 1.1s ease-in-out infinite alternate !important;
}

.evening-mobile-tool-sheet button.saving {
  opacity: .78 !important;
  pointer-events: none !important;
}

.evening-mobile-tool-sheet button.saving .evening-tool-publish {
  animation: savingSpin 1s linear infinite !important;
}

@keyframes savingFloat {
  from { transform: translateX(-50%) translateY(0); opacity: .82; }
  to { transform: translateX(-50%) translateY(-4px); opacity: 1; }
}

@keyframes savingSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 980px) {
  .mobile-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .mobile-compose-fab,
  .mobile-profile-shortcut,
  .quick-compose,
  .evening-place-section {
    display: none !important;
  }
}

/* Banshaku artwork viewer: keep the created paper ratio in detail view. */
.post-detail-modal.banshaku-detail {
  place-items: center !important;
  padding: 0 !important;
  background: rgba(10, 10, 10, .92) !important;
}

.post-detail-modal.banshaku-detail .post-detail-backdrop {
  background: rgba(10, 10, 10, .92) !important;
}

.post-detail-modal.banshaku-detail .post-detail-panel {
  display: block !important;
  width: min(520px, 92vw, calc(92vh * 9 / 16)) !important;
  height: auto !important;
  max-width: none !important;
  max-height: 92vh !important;
  aspect-ratio: 9 / 16 !important;
  overflow: visible !important;
  border-radius: 24px !important;
  background: transparent !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .34) !important;
}

.post-detail-modal.banshaku-detail .post-detail-photo-shell {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  aspect-ratio: 9 / 16 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: #000000 !important;
  touch-action: pan-x pan-y !important;
}

.post-detail-modal.banshaku-detail .detail-photo-main {
  width: 100% !important;
  height: 100% !important;
  border-radius: 24px !important;
  background: #000000 !important;
}

.post-detail-modal.banshaku-detail .detail-photo-main .label-art {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  background: #000000 !important;
}

.post-detail-modal.banshaku-detail .post-detail-close {
  top: 14px !important;
  right: auto !important;
  left: 14px !important;
  z-index: 8 !important;
  width: 42px !important;
  height: 42px !important;
  background: rgba(0, 0, 0, .42) !important;
  color: #ffffff !important;
  backdrop-filter: blur(12px) !important;
}

.post-detail-modal.banshaku-detail .post-detail-body {
  position: absolute !important;
  inset: 0 !important;
  z-index: 7 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.post-detail-modal.banshaku-detail .post-detail-header {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 9 !important;
  display: flex !important;
  justify-content: flex-end !important;
  pointer-events: auto !important;
}

.post-detail-modal.banshaku-detail .post-detail-author,
.post-detail-modal.banshaku-detail .post-detail-body h2,
.post-detail-modal.banshaku-detail .post-detail-body p,
.post-detail-modal.banshaku-detail .post-meta,
.post-detail-modal.banshaku-detail .post-detail-actions,
.post-detail-modal.banshaku-detail .post-detail-comments,
.post-detail-modal.banshaku-detail .post-detail-comment-form {
  display: none !important;
}

.post-detail-modal.banshaku-detail .post-detail-menu {
  display: block !important;
  position: relative !important;
  z-index: 10 !important;
  width: 42px !important;
  height: 42px !important;
  pointer-events: auto !important;
}

.post-detail-modal.banshaku-detail .post-menu-button {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .42) !important;
  color: #ffffff !important;
  font-size: 0 !important;
  line-height: 1 !important;
  backdrop-filter: blur(12px) !important;
}

.post-detail-modal.banshaku-detail .post-menu-button::before {
  content: "..." !important;
  display: block !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transform: translateY(-4px) !important;
}

.post-detail-modal.banshaku-detail .post-menu-popover {
  right: 0 !important;
  left: auto !important;
  top: 50px !important;
  z-index: 12 !important;
}

@media (max-width: 980px) {
  .post-detail-modal.banshaku-detail {
    place-items: stretch !important;
  }

  .post-detail-modal.banshaku-detail .post-detail-panel {
    width: 100dvw !important;
    height: 100dvh !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .post-detail-modal.banshaku-detail .post-detail-photo-shell,
  .post-detail-modal.banshaku-detail .detail-photo-main {
    border-radius: 0 !important;
  }
}

.evening-center-guide {
  position: absolute !important;
  z-index: 3 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .16s ease !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 0 18px rgba(255, 255, 255, .28) !important;
}

.evening-center-guide.active {
  opacity: 1 !important;
}

.evening-center-guide.vertical {
  top: 18% !important;
  bottom: 18% !important;
  left: 50% !important;
  width: 1px !important;
  transform: translateX(-50%) !important;
}

.evening-center-guide.horizontal {
  left: 18% !important;
  right: 18% !important;
  top: 50% !important;
  height: 1px !important;
  transform: translateY(-50%) !important;
}

/* 2026-07-07: PC search and Banshaku artwork viewing refinements */
@media (min-width: 981px) {
  .top-actions > .global-search-shell {
    display: none !important;
  }

  .side-global-search-shell {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) 28px !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 18px 0 8px !important;
    padding: 6px 8px !important;
    border: 1px solid rgba(21, 21, 21, .08) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .74) !important;
    box-shadow: none !important;
  }

  .side-global-search-shell .global-search-toggle,
  .side-global-search-shell .global-search-clear {
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(21, 21, 21, .46) !important;
    font-size: 17px !important;
    line-height: 1 !important;
  }

  .side-global-search-shell input {
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--design2-ink) !important;
    font-size: 12px !important;
    font-weight: 430 !important;
  }

  #timeline-view .section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: start !important;
    justify-items: start !important;
    gap: 14px !important;
  }

  #timeline-view .feed-segmented {
    justify-self: start !important;
    margin: 0 !important;
  }
}

@media (max-width: 980px) {
  .side-global-search-shell {
    display: none !important;
  }
}

.banshaku-detail-nav {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 14px !important;
  pointer-events: none !important;
}

.banshaku-detail-dots {
  position: absolute !important;
  left: 50% !important;
  bottom: 16px !important;
  z-index: 8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  transform: translateX(-50%) !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(12px) !important;
  pointer-events: none !important;
}

.banshaku-detail-dots span {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .42) !important;
  transition: width .18s ease, height .18s ease, background .18s ease, opacity .18s ease !important;
}

.banshaku-detail-dots span.active {
  width: 18px !important;
  height: 8px !important;
  background: rgba(255, 255, 255, .96) !important;
}

.banshaku-detail-nav button {
  pointer-events: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(21, 21, 21, .56) !important;
  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 320 !important;
  line-height: 1 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18) !important;
}

@media (max-width: 980px) {
  .post-detail-modal.banshaku-detail {
    padding: 0 !important;
    place-items: stretch !important;
    background: #000000 !important;
  }

  .post-detail-modal.banshaku-detail .post-detail-backdrop {
    background: #000000 !important;
  }

  .post-detail-modal.banshaku-detail .post-detail-panel {
    display: block !important;
    width: 100dvw !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: #000000 !important;
  }

  .post-detail-modal.banshaku-detail .post-detail-photo-shell {
    width: 100% !important;
    height: 100dvh !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    background: #000000 !important;
    touch-action: pan-y pan-x !important;
  }

  .post-detail-modal.banshaku-detail .detail-photo-main {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
  }

  .post-detail-modal.banshaku-detail .detail-photo-main .label-art {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000000 !important;
  }

  .post-detail-modal.banshaku-detail .post-detail-body {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 7 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  .post-detail-modal.banshaku-detail .post-detail-body h2,
  .post-detail-modal.banshaku-detail .post-detail-body p,
  .post-detail-modal.banshaku-detail .post-meta,
  .post-detail-modal.banshaku-detail .post-detail-actions,
  .post-detail-modal.banshaku-detail .post-detail-comments,
  .post-detail-modal.banshaku-detail .post-detail-comment-form {
    display: none !important;
  }

  .post-detail-modal.banshaku-detail .post-detail-header {
    top: max(12px, env(safe-area-inset-top)) !important;
    right: 12px !important;
    display: flex !important;
  }

  .post-detail-modal.banshaku-detail .banshaku-detail-nav {
    display: flex !important;
    padding: 0 10px !important;
  }

  .post-detail-modal.banshaku-detail .banshaku-detail-nav button {
    width: 38px !important;
    height: 38px !important;
    background: rgba(0, 0, 0, .40) !important;
  }

  .post-detail-modal.banshaku-detail .banshaku-detail-dots {
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }

  .post-detail-modal.banshaku-detail .post-detail-close {
    top: max(12px, env(safe-area-inset-top)) !important;
    left: 12px !important;
    right: auto !important;
    background: rgba(0, 0, 0, .46) !important;
    color: #ffffff !important;
  }
}

/* 2026-07-08: restore mobile Banshaku rail and make PC side search icon-first. */
@media (min-width: 981px) {
  .side-global-search-shell {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    grid-template-columns: 50px 0 0 !important;
    justify-content: start !important;
    min-height: 62px !important;
    padding: 6px !important;
    overflow: hidden !important;
    transition: width .22s ease, max-width .22s ease, background .22s ease !important;
  }

  .side-global-search-shell .global-search-toggle {
    width: 50px !important;
    height: 50px !important;
  }

  .side-global-search-shell .global-search-toggle img {
    display: block !important;
    width: 46px !important;
    height: 46px !important;
  }

  .side-global-search-shell input,
  .side-global-search-shell .global-search-clear {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .side-global-search-shell.active,
  .side-global-search-shell:focus-within {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 50px minmax(0, 1fr) 28px !important;
    background: rgba(255, 255, 255, .88) !important;
  }

  .side-global-search-shell.active input,
  .side-global-search-shell:focus-within input,
  .side-global-search-shell.active .global-search-clear,
  .side-global-search-shell:focus-within .global-search-clear {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 980px) {
  .view:not(.active) {
    display: none !important;
  }

  #timeline-view.active {
    display: block !important;
  }

  .mobile-compose-fab,
  .mobile-profile-shortcut,
  .quick-compose {
    display: none !important;
  }

  .evening-place-section:not(.hidden-field) {
    display: block !important;
  }
}

/* 2026-07-08: SakeLike UI Touch Pass 1 - tactile sizing and readable density. */
:root {
  --ui-icon-sm: 18px;
  --ui-icon-md: 22px;
  --ui-icon-lg: 26px;
  --ui-hit-sm: 36px;
  --ui-hit-md: 44px;
  --ui-font-meta: 12px;
  --ui-font-body: 14px;
  --ui-font-title: 16px;
  --ui-space-xs: 4px;
  --ui-space-sm: 8px;
  --ui-space-md: 12px;
  --ui-space-lg: 16px;
}

.nav-item,
.mobile-nav button,
.post-actions button,
.post-menu-button,
.profile-social-stats button,
.instagram-tabs button,
.feed-segmented button,
.user-story-open,
.user-story-actions button,
.detail-photo-thumbs button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.nav-item span,
.nav-item span img,
.mobile-nav img,
.post-actions img,
.post-menu-button img,
.profile-shortcut img {
  width: var(--ui-icon-md) !important;
  height: var(--ui-icon-md) !important;
}

.nav-item {
  min-height: var(--ui-hit-md) !important;
  gap: 12px !important;
}

.nav-item b {
  font-size: var(--ui-font-body) !important;
  line-height: 1.25 !important;
}

.post-list {
  gap: 42px !important;
}

.post-card-head {
  min-height: 46px !important;
  padding-bottom: 12px !important;
}

.post-author-row strong,
.post-detail-author strong {
  font-size: var(--ui-font-body) !important;
  font-weight: 620 !important;
}

.post-author-row span,
.post-detail-author span,
.post-meta {
  font-size: var(--ui-font-meta) !important;
}

.post-card p {
  font-size: var(--ui-font-body) !important;
  line-height: 1.68 !important;
}

.post-title-row h3 {
  font-size: var(--ui-font-title) !important;
  line-height: 1.35 !important;
}

.post-actions {
  gap: 4px !important;
  margin-left: -8px !important;
}

.post-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: var(--ui-hit-sm) !important;
  min-height: var(--ui-hit-md) !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.post-actions button img,
.post-actions .action-glyph {
  width: var(--ui-icon-md) !important;
  height: var(--ui-icon-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 var(--ui-icon-md) !important;
  opacity: .82 !important;
}

.post-actions .action-glyph {
  font-size: 20px !important;
  line-height: 1 !important;
  transform: translateY(-1px);
}

.post-actions button:hover,
.post-actions button:focus-visible,
.post-menu-button:hover,
.post-menu-button:focus-visible,
.profile-social-stats button:hover,
.profile-social-stats button:focus-visible {
  background: rgba(20, 43, 77, .055) !important;
  color: #142B4D !important;
  outline: none !important;
}

.post-menu-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--ui-hit-md) !important;
  height: var(--ui-hit-md) !important;
  min-width: var(--ui-hit-md) !important;
  min-height: var(--ui-hit-md) !important;
  border-radius: 999px !important;
}

.post-menu-button img {
  opacity: .68 !important;
}

.post-detail-modal.banshaku-detail .post-menu-button::before {
  content: none !important;
  display: none !important;
}

.post-detail-modal.banshaku-detail .post-menu-button img {
  display: block !important;
  filter: invert(1) !important;
  opacity: .92 !important;
}

.post-menu-popover button {
  min-height: 40px !important;
  padding: 0 14px !important;
  font-size: var(--ui-font-body) !important;
  line-height: 1.2 !important;
}

.profile-hero {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.profile-name-row h2,
.profile-hero h2 {
  font-size: 20px !important;
  line-height: 1.25 !important;
}

.profile-username,
.profile-bio-text,
.profile-link,
.profile-meta span {
  font-size: var(--ui-font-body) !important;
  line-height: 1.5 !important;
}

.profile-social-stats {
  gap: 20px !important;
  margin: 10px 0 12px !important;
}

.profile-social-stats button {
  min-height: var(--ui-hit-sm) !important;
  padding: 0 2px !important;
}

.profile-social-stats strong {
  font-size: 15px !important;
  font-weight: 650 !important;
}

.profile-social-stats span {
  font-size: var(--ui-font-meta) !important;
}

.instagram-tabs {
  margin-top: 16px !important;
}

.instagram-tabs button {
  min-height: var(--ui-hit-md) !important;
  font-size: var(--ui-font-meta) !important;
  letter-spacing: 0 !important;
}

.profile-pinned-row,
.profile-photo-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 3px !important;
}

@media (max-width: 640px) {
  .profile-pinned-row,
  .profile-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.profile-grid-item {
  border-radius: 5px !important;
  background: #f0f2f4 !important;
}

.profile-grid-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: inherit;
  pointer-events: none;
}

@media (max-width: 980px) {
  .post-list {
    gap: 30px !important;
  }

  .post-card-head {
    min-height: 48px !important;
    padding: 0 14px 10px !important;
  }

  .post-avatar,
  .post-avatar img {
    width: 32px !important;
    height: 32px !important;
  }

  .post-content {
    gap: 10px !important;
    padding: 12px 14px 0 !important;
  }

  .post-actions {
    gap: 2px !important;
    margin-left: -8px !important;
  }

  .post-actions button {
    min-width: 42px !important;
    min-height: var(--ui-hit-md) !important;
    padding: 0 8px !important;
  }

  .mobile-nav {
    min-height: 60px !important;
    padding: 6px !important;
  }

  .mobile-nav button {
    min-height: 48px !important;
    gap: 2px !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
  }

  .mobile-nav img {
    width: 21px !important;
    height: 21px !important;
  }

  .mobile-nav button > span[aria-hidden="true"] {
    display: grid !important;
    place-items: center !important;
    width: 21px !important;
    height: 21px !important;
    font-size: 21px !important;
    line-height: 1 !important;
  }

  .profile-hero {
    padding: 16px 14px !important;
  }

  .profile-social-stats {
    gap: 18px !important;
  }

  .instagram-tabs button {
    min-height: 46px !important;
  }

  .profile-pinned-row,
  .profile-photo-grid {
    gap: 2px !important;
  }
}

/* 2026-07-08: Header profile affordance. */
.top-actions .profile-shortcut {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-color: rgba(20, 43, 77, .13) !important;
}

.top-actions .profile-shortcut img,
.mobile-header-actions .profile-shortcut img {
  width: 28px !important;
  height: 28px !important;
}

@media (max-width: 980px) {
  .mobile-header-actions {
    gap: 10px !important;
  }

  .mobile-header-search,
  .mobile-profile-shortcut {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  .mobile-profile-shortcut img {
    width: 28px !important;
    height: 28px !important;
  }
}

/* 2026-07-08: mobile header profile-left and brand-center layout. */
.mobile-header-brand {
  display: none !important;
}

.mobile-admin-menu {
  display: none;
}

@media (max-width: 980px) {
  .mobile-admin-menu:not(.hidden-field) {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    z-index: 5;
    display: block;
    grid-column: 3;
    justify-self: end;
  }

  .mobile-admin-menu-toggle {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(20, 43, 77, .12);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 20px rgba(20, 43, 77, .08);
    place-content: center;
    gap: 4px;
  }

  .mobile-admin-menu-toggle span {
    display: block;
    width: 18px;
    height: 1.8px;
    border-radius: 999px;
    background: #142B4D;
  }

  .mobile-admin-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    min-width: 156px;
    padding: 6px;
    border: 1px solid rgba(20, 43, 77, .12);
    border-radius: 14px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 14px 32px rgba(20, 43, 77, .16);
  }

  .mobile-admin-menu-panel[hidden] {
    display: none;
  }

  .mobile-admin-menu-panel button {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #142B4D;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    text-align: left;
    white-space: nowrap;
  }

  .mobile-admin-menu-panel button:active {
    background: rgba(20, 43, 77, .08);
  }

  .mobile-admin-menu-panel img {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 980px) {
  .mobile-admin-menu:not(.hidden-field) { position:fixed !important; top:max(10px, env(safe-area-inset-top)) !important; right:max(10px, env(safe-area-inset-right)) !important; z-index:1500 !important; }
  .evening-compose-modal,
  .evening-compose-modal.active,
  .evening-compose-modal .evening-compose-panel,
  .evening-compose-modal .evening-compose-stage { zoom: 1 !important; }
  .evening-compose-modal.active { touch-action: none !important; }
  .evening-compose-modal.active .evening-compose-panel { transform: none !important; }
}

@media (max-width: 980px) {
  .top-bar {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px 44px !important;
    align-items: center !important;
    min-height: 54px !important;
  }

  .mobile-header-actions {
    display: contents !important;
  }

  .mobile-profile-shortcut {
    grid-column: 1 !important;
    justify-self: start !important;
    z-index: 3 !important;
    display: grid !important;
    place-items: center !important;
    pointer-events: auto !important;
  }

  .mobile-header-brand {
    grid-column: 2 !important;
    justify-self: center !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .mobile-header-brand img {
    width: 34px !important;
    height: 34px !important;
    display: block !important;
  }

  .mobile-search-button {
    grid-column: 3 !important;
    justify-self: end !important;
  }

  .mobile-notification-button {
    grid-column: 4 !important;
    justify-self: end !important;
  }

  .mobile-header-actions:has(.mobile-admin-menu:not(.hidden-field)) .mobile-notification-button,
  .mobile-header-actions:has(.mobile-admin-menu:not(.hidden-field)) .mobile-search-button {
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    z-index: 1501 !important;
  }

  .mobile-header-actions:has(.mobile-admin-menu:not(.hidden-field)) .mobile-notification-button {
    right: max(112px, calc(112px + env(safe-area-inset-right))) !important;
  }

  .mobile-header-actions:has(.mobile-admin-menu:not(.hidden-field)) .mobile-search-button {
    right: max(64px, calc(64px + env(safe-area-inset-right))) !important;
  }

  .mobile-header-actions:has(.mobile-admin-menu:not(.hidden-field)) .mobile-admin-menu {
    right: max(10px, env(safe-area-inset-right)) !important;
  }

  .mobile-search-button,
  .mobile-notification-button,
  .mobile-profile-shortcut,
  .mobile-nav button,
  .primary-button,
  .secondary-button,
  .post-actions button,
  .post-detail-actions button,
  .global-search-toggle,
  .global-search-clear {
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, opacity .12s ease, background-color .12s ease, box-shadow .12s ease !important;
  }

  .mobile-search-button:active,
  .mobile-notification-button:active,
  .mobile-profile-shortcut:active,
  .mobile-nav button:active,
  .primary-button:active,
  .secondary-button:active,
  .post-actions button:active,
  .post-detail-actions button:active,
  .global-search-toggle:active,
  .global-search-clear:active {
    transform: scale(.95) !important;
    opacity: .76 !important;
  }

  .top-bar > .top-actions {
    display: none !important;
  }

  .top-bar > .top-actions.mobile-search-active {
    position: fixed !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    right: 12px !important;
    left: 12px !important;
    z-index: 2147482500 !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
  }

  .top-bar > .top-actions.mobile-search-active .global-search-shell.active {
    position: static !important;
    display: grid !important;
  }
}

/* 2026-07-08: post page single-flow simplification and calmer menu typography. */
@media (min-width: 981px) {
  .app-shell {
    grid-template-columns: 224px minmax(0, 1fr) !important;
  }

  .side-nav {
    position: sticky !important;
    display: flex !important;
    flex-direction: column !important;
    width: 224px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .admin-nav-list {
    margin-top: auto !important;
    padding-top: 20px !important;
  }
}

.nav-item {
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding-right: 6px !important;
}

.nav-item b,
.nav-item.active b {
  overflow: visible !important;
  color: inherit !important;
  font-weight: 430 !important;
  white-space: nowrap !important;
}

.post-menu-popover {
  width: max-content !important;
  min-width: 188px !important;
  max-width: min(260px, calc(100vw - 32px)) !important;
  padding: 10px !important;
}

.post-menu-popover button {
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  color: #142B4D !important;
  font-size: 13px !important;
  font-weight: 460 !important;
  line-height: 1.32 !important;
  text-align: left !important;
}

.post-menu-popover button:not([data-post-edit-locked]) {
  white-space: nowrap !important;
}

.post-menu-popover .danger-action {
  color: #9c2234 !important;
}

#post-view .compose-grid {
  display: block !important;
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}

#post-view .compose-panel {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 22px !important;
  padding: 24px !important;
}

#post-view .compose-panel > * {
  grid-column: auto !important;
  grid-row: auto !important;
}

#post-view .compose-panel > .section-head {
  margin-bottom: 0 !important;
}

#post-view .image-uploader {
  position: static !important;
  order: 1 !important;
  display: grid !important;
  grid-column: auto !important;
  grid-row: auto !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#post-view .post-photo-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 2px !important;
}

#post-view .post-photo-actions input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#post-view .post-photo-action-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(20, 43, 77, .12) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .86) !important;
  color: #142B4D !important;
  font-size: 13px !important;
  font-weight: 520 !important;
  cursor: pointer !important;
}

#post-view .post-photo-action-button span {
  display: grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
}

#post-view .post-photo-action-button img {
  width: 20px !important;
  height: 20px !important;
}

#post-view .post-photo-action-button b {
  font-weight: 520 !important;
}

#post-view .post-photo-actions small {
  color: rgba(21, 21, 21, .50) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

#post-view .photo-upload-status {
  min-height: 1.4em !important;
  margin: 2px 0 0 !important;
  color: rgba(20, 43, 77, .72) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

#post-view .post-caption-field {
  order: 2 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#post-view .compose-event-block {
  order: 3 !important;
  display: grid !important;
  gap: 12px !important;
  padding: 16px !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .66) !important;
}

#post-view .compose-event-block p {
  margin: 4px 0 0 !important;
  color: rgba(21, 21, 21, .58) !important;
  font-size: 12px !important;
}

#post-view .event-at-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 12px !important;
}

#post-view .event-at-controls label {
  display: grid !important;
  gap: 6px !important;
}

#post-view .event-at-controls input {
  min-height: 42px !important;
}

#post-view #event-at-status {
  min-height: 1.3em !important;
  color: rgba(20, 43, 77, .72) !important;
  font-size: 12px !important;
}

#post-view .compose-location-block {
  order: 4 !important;
}

#post-view .db-details {
  order: 5 !important;
}

#post-view .form-actions {
  order: 6 !important;
}

#post-view .post-policy-note {
  order: 7 !important;
}

#post-view .form-status {
  order: 8 !important;
}

@media (max-width: 640px) {
  #post-view .event-at-controls {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
}

#post-view .photo-slot-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  max-width: 100% !important;
}

#post-view .photo-slot {
  min-height: 118px !important;
  aspect-ratio: 4 / 5 !important;
}

#post-view .photo-slot .photo-order {
  position: absolute !important;
  top: 7px !important;
  left: 7px !important;
  z-index: 3 !important;
  display: none !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: rgba(20, 43, 77, .92) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 650 !important;
  line-height: 24px !important;
  text-align: center !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .16) !important;
}

#post-view .photo-slot.has-photo .photo-order {
  display: block !important;
}

#post-view .photo-slot.drag-ready {
  cursor: grab !important;
}

#post-view .photo-slot.dragging {
  opacity: .58 !important;
  cursor: grabbing !important;
  transform: scale(.98) !important;
}

#post-view .photo-slot.drag-over {
  outline: 2px solid rgba(20, 43, 77, .30) !important;
  outline-offset: 3px !important;
}

/* 2026-07-08: rename visible Banshaku surface to Sake Time. */
.evening-place-head {
  display: block !important;
  margin: 0 0 10px !important;
}

.evening-place-head h2 {
  margin: 0 !important;
  color: var(--design2-ink) !important;
  font-size: 16px !important;
  font-weight: 520 !important;
  line-height: 1.35 !important;
}

.evening-place-head p {
  display: block !important;
  margin: 3px 0 0 !important;
  color: rgba(21, 21, 21, .52) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

#post-view .post-caption-field textarea {
  display: block !important;
  min-height: 190px !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding: 4px 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(20, 43, 77, .12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* Sake Time menu rail: keep the cards, remove the backing sheet. */
.main-panel > .evening-place-section:not(.hidden-field) {
  width: 100% !important;
  margin-left: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.main-panel > .evening-place-section .evening-place-head h2 {
  color: #593d22 !important;
  font-family: "Kaiti SC", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-shadow: .4px .4px 0 rgba(89,61,34,.18) !important;
}

/* Sake Time: remove the strip backing beneath the menu cards. */
.main-panel > .evening-place-section .user-story-rail {
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

#post-view .post-caption-field textarea:focus {
  outline: 0 !important;
  border-bottom-color: rgba(20, 43, 77, .32) !important;
}

#post-view .post-caption-field > span {
  display: none !important;
}

#post-view .form-grid.compact-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, .8fr) !important;
}

@media (max-width: 980px) {
  #post-view .compose-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  #post-view .compose-panel {
    gap: 18px !important;
    padding: 18px 14px calc(96px + env(safe-area-inset-bottom)) !important;
  }

  #post-view .photo-slot-grid {
    grid-template-columns: repeat(5, minmax(64px, 1fr)) !important;
  }

  #post-view .photo-slot {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 90px !important;
  }

  #post-view .form-grid.compact-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mobile-nav,
  body.admin-user .mobile-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  .mobile-nav > button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  #post-view .post-photo-actions {
    display: none !important;
  }

  #post-view .post-photo-mobile-bar {
    position: fixed !important;
    left: 50% !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    z-index: 90 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: min(270px, calc(100vw - 32px)) !important;
    padding: 8px !important;
    border: 1px solid rgba(20, 43, 77, .10) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 14px 36px rgba(20, 43, 77, .18) !important;
    transform: translateX(-50%) !important;
    backdrop-filter: blur(14px) !important;
  }

  #post-view .post-photo-mobile-bar button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 42px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(20, 43, 77, .06) !important;
    color: #142B4D !important;
    font-size: 12px !important;
    font-weight: 520 !important;
  }

  #post-view .post-photo-mobile-bar img {
    width: 20px !important;
    height: 20px !important;
  }

  .mobile-compose-fab {
    position: fixed !important;
    right: 18px !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    z-index: 88 !important;
    display: grid !important;
    place-items: center !important;
    width: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #142B4D !important;
    box-shadow: 0 14px 30px rgba(20, 43, 77, .24) !important;
    color: #ffffff !important;
    font-size: 32px !important;
    font-weight: 360 !important;
    line-height: 1 !important;
  }

  body.post-modal-open .mobile-compose-fab,
  body.auth-required .mobile-compose-fab,
  body.profile-required .mobile-compose-fab {
    display: none !important;
  }
}

@media (min-width: 981px) {
  #post-view .post-photo-mobile-bar {
    display: none !important;
  }
}

/* 2026-07-08: mobile post view uses bottom nav area for photo actions. */
@media (max-width: 980px) {
  body.post-modal-open .mobile-nav {
    display: none !important;
  }

  body.post-modal-open #post-view .compose-panel {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  body.post-modal-open #post-view .post-photo-mobile-bar {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1200 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(66px + env(safe-area-inset-bottom)) !important;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom)) !important;
    border: 1px solid rgba(20, 43, 77, .10) !important;
    border-width: 1px 0 0 !important;
    border-radius: 18px 18px 0 0 !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 -16px 36px rgba(20, 43, 77, .14) !important;
    transform: none !important;
    backdrop-filter: blur(14px) !important;
  }

  body.post-modal-open #post-view .post-photo-mobile-bar button {
    min-height: 48px !important;
    border-radius: 14px !important;
    background: rgba(20, 43, 77, .06) !important;
    color: #142B4D !important;
    font-size: 12px !important;
    font-weight: 560 !important;
  }

  body.post-modal-open #post-view .post-photo-mobile-bar img {
    width: 22px !important;
    height: 22px !important;
  }
}

/* 2026-07-10: SakeLike operations surface with compact PLB-style density. */
#admin-view {
  color: #142B4D !important;
}

.admin-hero {
  align-items: flex-end !important;
  gap: 14px !important;
  padding: 18px !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(248, 244, 235, .64)),
    rgba(255, 255, 255, .74) !important;
}

.admin-kicker,
.admin-scope-badge {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  border: 1px solid rgba(93, 113, 73, .20) !important;
  border-radius: 999px !important;
  background: rgba(94, 113, 73, .10) !important;
  color: #5d7149 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  padding: 0 10px !important;
}

.admin-scope-badge {
  background: rgba(20, 43, 77, .06) !important;
  border-color: rgba(20, 43, 77, .12) !important;
  color: rgba(20, 43, 77, .68) !important;
  white-space: nowrap !important;
}

.admin-panel {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

.admin-card {
  min-width: 0 !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .72) !important;
  padding: 13px !important;
}

.admin-card strong {
  display: block !important;
  color: rgba(20, 43, 77, .58) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.admin-card p {
  margin: 5px 0 0 !important;
  overflow-wrap: anywhere !important;
  color: #142B4D !important;
  font-size: 20px !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
}

.admin-users-panel {
  display: grid !important;
  gap: 14px !important;
  margin-top: 22px !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .52) !important;
  padding: 14px !important;
}

.admin-users-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.admin-users-head h3 {
  margin: 0 !important;
  color: #142B4D !important;
  font-size: 16px !important;
  font-weight: 560 !important;
  line-height: 1.35 !important;
}

.admin-user-toolbar {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(118px, .26fr) minmax(138px, .30fr) !important;
  gap: 8px !important;
  align-items: center !important;
}

.admin-user-toolbar input,
.admin-user-toolbar select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  border: 1px solid rgba(20, 43, 77, .12) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .82) !important;
  color: #142B4D !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  outline: 0 !important;
  padding: 0 11px !important;
}

.admin-user-toolbar input:focus,
.admin-user-toolbar select:focus {
  border-color: rgba(93, 113, 73, .42) !important;
  box-shadow: 0 0 0 3px rgba(93, 113, 73, .10) !important;
}

.admin-users-table-wrap {
  overflow-x: auto !important;
  border: 1px solid rgba(20, 43, 77, .08) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .78) !important;
}

.admin-users-table {
  width: 100% !important;
  min-width: 620px !important;
  border-collapse: collapse !important;
  color: #142B4D !important;
  font-size: 13px !important;
}

.admin-users-table th,
.admin-users-table td {
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(20, 43, 77, .07) !important;
  text-align: left !important;
  vertical-align: middle !important;
}

.admin-users-table th {
  background: rgba(20, 43, 77, .035) !important;
  color: rgba(20, 43, 77, .64) !important;
  font-weight: 520 !important;
}

.admin-user-row {
  cursor: pointer !important;
}

.admin-user-row:hover,
.admin-user-row:focus-visible,
.admin-user-row.expanded {
  background: rgba(20, 43, 77, .045) !important;
  outline: 0 !important;
}

.admin-user-row code {
  display: block !important;
  margin-top: 5px !important;
  color: #142B4D !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.admin-user-name {
  display: inline-flex !important;
  min-width: 0 !important;
  margin-right: 10px !important;
  color: #142B4D !important;
  font-weight: 520 !important;
}

.admin-user-status {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  margin: 2px 4px 2px 0 !important;
  padding: 0 8px !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 999px !important;
  background: rgba(20, 43, 77, .045) !important;
  color: rgba(20, 43, 77, .64) !important;
  font-size: 11px !important;
  font-weight: 620 !important;
  white-space: nowrap !important;
}

.admin-user-status.complete,
.admin-user-status.public {
  border-color: rgba(93, 113, 73, .22) !important;
  background: rgba(93, 113, 73, .10) !important;
  color: #5d7149 !important;
}

.admin-user-status.incomplete,
.admin-user-status.private {
  border-color: rgba(172, 115, 50, .22) !important;
  background: rgba(172, 115, 50, .10) !important;
  color: #8c622f !important;
}

.admin-user-status.admin {
  border-color: rgba(20, 43, 77, .18) !important;
  background: rgba(20, 43, 77, .08) !important;
  color: #142B4D !important;
}

.admin-user-status.active {
  border-color: rgba(93, 113, 73, .22) !important;
  background: rgba(93, 113, 73, .10) !important;
  color: #5d7149 !important;
}

.admin-user-status.suspended {
  border-color: rgba(143, 57, 57, .24) !important;
  background: rgba(143, 57, 57, .10) !important;
  color: #8f3939 !important;
}

.admin-user-inline-metrics {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  vertical-align: middle !important;
}

.admin-user-inline-metrics span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: rgba(20, 43, 77, .055) !important;
  color: rgba(20, 43, 77, .64) !important;
  font-size: 11px !important;
  font-weight: 520 !important;
}

.admin-user-detail-row td {
  padding: 0 14px 14px !important;
  background: rgba(20, 43, 77, .025) !important;
}

.admin-user-detail-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(20, 43, 77, .08) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .82) !important;
}

.admin-user-detail-grid div {
  min-width: 0 !important;
}

.admin-user-detail-grid dt {
  margin: 0 0 4px !important;
  color: rgba(20, 43, 77, .54) !important;
  font-size: 11px !important;
  font-weight: 520 !important;
}

.admin-user-detail-grid dd {
  margin: 0 !important;
  color: #142B4D !important;
  font-size: 15px !important;
  font-weight: 560 !important;
}

.admin-user-moderation-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.admin-user-moderation-actions .secondary-button {
  min-height: 36px;
  padding: 7px 11px;
  color: #8f3939;
  border-color: rgba(143, 57, 57, .22);
}

@media (max-width: 980px) {
  .admin-hero {
    align-items: flex-start !important;
  }

  .admin-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .admin-user-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-users-table {
    min-width: 560px !important;
  }

  .admin-users-table th,
  .admin-users-table td {
    padding: 11px 10px !important;
  }

  .admin-user-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .admin-panel {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-users-panel {
    margin-left: -4px !important;
    margin-right: -4px !important;
    padding: 12px !important;
  }

  .admin-users-table {
    min-width: 520px !important;
  }

  .admin-user-detail-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* 2026-07-08: Label scan mode for light OCR-first posting. */
.label-preview.scan-active {
  position: relative !important;
  background:
    linear-gradient(45deg, rgba(20, 43, 77, .05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(20, 43, 77, .05) 25%, transparent 25%),
    #f3f5f7 !important;
  background-size: 18px 18px !important;
}

.label-preview.scan-active img {
  position: relative !important;
  z-index: 1 !important;
}

.label-preview.scan-active::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .10);
}

.label-preview.scan-processed::before {
  content: none;
}

.label-scan-frame {
  position: absolute;
  inset: 10px;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(20, 43, 77, .14),
    0 14px 36px rgba(20, 43, 77, .12);
}

.label-scan-frame::before,
.label-scan-frame::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(255, 255, 255, .45);
  border-radius: 6px;
}

.label-scan-frame::after {
  inset: 50% 12px auto;
  height: 0;
  border-width: 1px 0 0;
  border-radius: 0;
}

#label-scan-toggle.active {
  min-width: 54px !important;
  background: rgba(20, 43, 77, .08) !important;
  color: #142B4D !important;
  font-weight: 650 !important;
}

.db-details:not([open]) {
  border-color: rgba(20, 43, 77, .08) !important;
  background: rgba(255, 255, 255, .62) !important;
}

/* 2026-07-08: SNS-first post flow with lightweight place privacy. */
.post-caption-field {
  position: relative !important;
}

.post-caption-field textarea {
  min-height: 132px !important;
  resize: vertical !important;
}

.post-caption-field small {
  display: block !important;
  margin-top: 6px !important;
  color: rgba(21, 21, 21, .46) !important;
  font-size: 12px !important;
  text-align: right !important;
}

.compose-location-block {
  display: grid !important;
  gap: 12px !important;
  padding: 14px !important;
  border: 1px solid rgba(20, 43, 77, .08) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .70) !important;
}

.compose-location-block strong {
  display: block !important;
  color: var(--design2-ink) !important;
  font-size: 14px !important;
  font-weight: 680 !important;
}

.compose-location-block p {
  margin: 4px 0 0 !important;
  color: rgba(21, 21, 21, .52) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.compact-grid {
  gap: 10px !important;
}

.want-again-line {
  min-height: 42px !important;
  align-self: end !important;
}

.compose-step-title,
.post-caption-field > b {
  display: block !important;
  margin: 0 0 12px !important;
  color: var(--design2-ink) !important;
  font-size: 15px !important;
  font-weight: 720 !important;
  line-height: 1.35 !important;
}

#post-view .label-preview,
#post-view .direct-photo-tools {
  display: none !important;
}

#post-view .photo-slot-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#post-view .photo-slot {
  aspect-ratio: 3 / 4 !important;
  min-height: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
}

#post-view .photo-slot span {
  font-size: 12px !important;
}

#post-view .photo-slot small {
  font-size: 10.5px !important;
}

.post-policy-note {
  margin: 4px 0 0 !important;
  padding-left: 18px !important;
  color: rgba(21, 21, 21, .58) !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}

@media (max-width: 980px) {
  #post-view .photo-slot-grid {
    grid-template-columns: repeat(5, minmax(62px, 1fr)) !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  #post-view .photo-slot {
    width: 70px !important;
    min-width: 70px !important;
    height: 92px !important;
    aspect-ratio: auto !important;
  }

  .compose-location-block {
    padding: 12px !important;
  }
}

/* 2026-07-08: use full wordmark logos in desktop sidebar and mobile header. */
.brand-block {
  justify-content: flex-start !important;
}

.brand-logo-full {
  display: block !important;
  width: min(168px, 100%) !important;
  height: auto !important;
  max-height: 48px !important;
  object-fit: contain !important;
}

@media (max-width: 980px) {
  .mobile-header-brand {
    width: min(150px, 46vw) !important;
    height: 44px !important;
    min-width: 116px !important;
    border-radius: 0 !important;
  }

  .mobile-header-brand img {
    width: 100% !important;
    height: 32px !important;
    object-fit: contain !important;
  }
}

/* 2026-07-08: finished compact profile settings form. */
.profile-setup {
  gap: 16px !important;
  padding: 22px 24px !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 38px rgba(20, 43, 77, .08) !important;
}

.profile-setup .section-head {
  margin-bottom: 2px !important;
}

.profile-setup-grid {
  grid-template-columns: 132px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 16px !important;
}

.profile-setup-grid > * {
  min-width: 0 !important;
}

.profile-basic-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  min-width: 0 !important;
  align-items: start !important;
}

.profile-basic-fields > label {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
}

.profile-basic-fields > label > :first-child {
  min-height: 17px;
}

.profile-basic-fields > label > input {
  flex: 0 0 40px;
}

.profile-preference-row {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.profile-setup .wide-label {
  grid-column: 2 !important;
}

.profile-external-links-field {
  display: grid;
  gap: 12px;
}

.profile-external-links-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-external-links-head > div {
  display: grid;
  gap: 3px;
}

.profile-link-add-button {
  min-height: 34px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

.profile-link-type-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(20, 43, 77, .10);
  border-radius: 10px;
  background: rgba(20, 43, 77, .025);
}

.profile-link-type-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(20, 43, 77, .13);
  border-radius: 999px;
  background: #fff;
  color: #142B4D;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}

.profile-link-type-option span {
  width: 16px;
  text-align: center;
}

.profile-link-editor-list {
  display: grid;
  gap: 10px;
}

.profile-link-editor-row {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(20, 43, 77, .10);
  border-radius: 10px;
  background: rgba(20, 43, 77, .018);
}

.profile-link-editor-row label,
.profile-link-visibility-field {
  display: grid;
  gap: 5px;
}

.profile-link-editor-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #142B4D;
}

.profile-link-editor-title .profile-social-icon {
  border-radius: 50%;
  background: rgba(20, 43, 77, .07);
}

.profile-link-remove-button {
  margin-left: auto;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: rgba(20, 43, 77, .58);
  font: inherit;
  font-size: 12px;
}

.profile-link-remove-button:hover,
.profile-link-remove-button:focus-visible {
  color: #9d3446;
}

.profile-setup-grid > label:not(.wide-label):not(.required-field),
.profile-setup-grid > label.profile-optional-later {
  grid-column: 2 !important;
}

.profile-setup label {
  gap: 6px !important;
  color: rgba(20, 43, 77, .70) !important;
  font-size: 12px !important;
  font-weight: 560 !important;
}

.profile-setup input,
.profile-setup textarea,
.profile-setup select {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 40px !important;
  border: 1px solid rgba(20, 43, 77, .12) !important;
  border-radius: 8px !important;
  padding: 8px 11px !important;
  background: #ffffff !important;
  color: #142B4D !important;
  font-size: 14px !important;
  font-weight: 440 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}

.profile-setup textarea {
  min-height: 88px !important;
  resize: vertical !important;
}

.profile-setup small {
  display: block !important;
  color: rgba(20, 43, 77, .46) !important;
  font-size: 11px !important;
  font-weight: 420 !important;
  line-height: 1.45 !important;
}

.avatar-upload {
  grid-row: span 2 !important;
  gap: 10px !important;
  width: 132px !important;
  min-width: 0 !important;
  justify-items: center !important;
}

.avatar-upload input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.avatar-file-label {
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(20, 43, 77, .12) !important;
  border-radius: 999px !important;
  background: rgba(20, 43, 77, .04) !important;
  color: #142B4D !important;
  font-size: 12px !important;
  font-weight: 560 !important;
}

.avatar-preview-frame {
  width: 96px !important;
  max-width: 96px !important;
  margin: 0 auto !important;
}

.avatar-editor p {
  max-width: 132px !important;
  font-size: 10.5px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

.avatar-save-button {
  justify-self: center !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}

.profile-setup > .primary-button {
  justify-self: end !important;
  min-width: 160px !important;
  min-height: 42px !important;
  border-radius: 999px !important;
}

@media (min-width: 761px) {
  .profile-setup-grid > label.profile-optional-later:not(.profile-link-field) {
    width: min(100%, 360px) !important;
  }

  .profile-link-field {
    width: 100% !important;
  }
}

@media (max-width: 760px) {
  .profile-setup {
    padding: 18px 14px !important;
  }

  .profile-setup-grid,
  .profile-preference-row,
  .profile-basic-fields {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .profile-external-links-head {
    align-items: flex-start;
  }

  .avatar-upload {
    grid-row: auto !important;
    justify-items: start !important;
    width: 100% !important;
  }

  .avatar-preview-frame {
    margin: 0 !important;
  }

  .profile-setup .wide-label,
  .profile-preference-row,
  .profile-setup-grid > label:not(.wide-label):not(.required-field),
  .profile-setup-grid > label.profile-optional-later {
    grid-column: auto !important;
  }

  .profile-setup > .primary-button {
    justify-self: stretch !important;
    width: 100% !important;
  }
}

/* 2026-07-08: remove mobile search box remnants and match ranking posts to timeline scale. */
/* 2026-07-09: strict 3-step onboarding wizard. Keep profile edit form separate. */
body.auth-required .side-rail,
body.auth-required .main-panel > :not(#auth-panel),
body.auth-modal-open .side-rail,
body.auth-modal-open .main-panel > :not(#auth-panel) {
  filter: blur(12px) saturate(.85) !important;
  opacity: .58 !important;
  pointer-events: none !important;
  user-select: none !important;
}

body.auth-required #auth-panel,
body.auth-modal-open #auth-panel {
  filter: none !important;
  opacity: 1 !important;
}

body.profile-required .profile-shortcut,
body.profile-required .side-profile-name {
  visibility: hidden !important;
}

body.auth-mode-reset .auth-mode-tabs,
body.auth-mode-reset .auth-provider-stack,
body.auth-mode-reset .auth-divider,
body.auth-mode-reset .auth-email-form,
body.auth-mode-reset #forgot-password-button,
body.auth-mode-reset .auth-update-password-form,
body.auth-mode-update-password .auth-mode-tabs,
body.auth-mode-update-password .auth-provider-stack,
body.auth-mode-update-password .auth-divider,
body.auth-mode-update-password .auth-email-form,
body.auth-mode-update-password #forgot-password-button,
body.auth-mode-update-password .auth-reset-form,
body.auth-mode-update-password .auth-resend-button {
  display: none !important;
}

body.auth-mode-reset .auth-reset-form,
body.auth-mode-update-password .auth-update-password-form {
  display: grid !important;
}

.account-password-panel {
  display: grid !important;
  gap: 12px !important;
  padding: 16px !important;
  border: 1px solid rgba(20, 43, 77, .10) !important;
  border-radius: 10px !important;
  background: rgba(20, 43, 77, .03) !important;
}

.account-password-panel.hidden-field {
  display: none !important;
}

.account-password-panel h3,
.account-deletion-panel h3 {
  margin: 0 !important;
  color: #142B4D !important;
  font-size: 15px !important;
}

.account-password-panel p {
  margin: 0 !important;
  color: rgba(20, 43, 77, .66) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.account-password-fields {
  display: grid !important;
  gap: 10px !important;
}

body.profile-required .onboarding-progress {
  grid-template-columns: repeat(3, 1fr) !important;
}

body.profile-required .profile-setup {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 9010 !important;
  display: grid !important;
  width: min(540px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 40px) !important;
  overflow: auto !important;
  transform: translate(-50%, -50%) !important;
  padding: clamp(22px, 4vw, 32px) !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .16) !important;
}

body.profile-required .profile-setup-grid,
body.profile-required .profile-basic-fields {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px !important;
}

body.profile-required .profile-setup-grid > *,
body.profile-required .profile-basic-fields > *,
body.profile-required .profile-bio-field,
body.profile-required .profile-link-field,
body.profile-required .profile-preference-row,
body.profile-required .profile-preference-row > *,
body.profile-required .account-password-panel,
body.profile-required .account-deletion-panel {
  display: none !important;
}

body.profile-required .profile-setup[data-onboarding-step="1"] .profile-basic-fields,
body.profile-required .profile-setup[data-onboarding-step="1"] .profile-username-field,
body.profile-required .profile-setup[data-onboarding-step="2"] .profile-basic-fields,
body.profile-required .profile-setup[data-onboarding-step="2"] .profile-display-field,
body.profile-required .profile-setup[data-onboarding-step="3"] .avatar-upload {
  display: grid !important;
}

body.profile-required .profile-setup[data-onboarding-step="1"] .profile-display-field,
body.profile-required .profile-setup[data-onboarding-step="1"] .profile-bio-field,
body.profile-required .profile-setup[data-onboarding-step="1"] .profile-link-field,
body.profile-required .profile-setup[data-onboarding-step="1"] .profile-preference-row,
body.profile-required .profile-setup[data-onboarding-step="1"] .avatar-upload,
body.profile-required .profile-setup[data-onboarding-step="2"] .profile-username-field,
body.profile-required .profile-setup[data-onboarding-step="2"] .profile-bio-field,
body.profile-required .profile-setup[data-onboarding-step="2"] .profile-link-field,
body.profile-required .profile-setup[data-onboarding-step="2"] .profile-preference-row,
body.profile-required .profile-setup[data-onboarding-step="2"] .avatar-upload,
body.profile-required .profile-setup[data-onboarding-step="3"] .profile-basic-fields,
body.profile-required .profile-setup[data-onboarding-step="3"] .profile-bio-field,
body.profile-required .profile-setup[data-onboarding-step="3"] .profile-link-field,
body.profile-required .profile-setup[data-onboarding-step="3"] .profile-preference-row {
  display: none !important;
}

body.profile-required [data-onboarding-step="1"] .profile-display-field,
body.profile-required [data-onboarding-step="1"] .profile-bio-field,
body.profile-required [data-onboarding-step="1"] .profile-link-field,
body.profile-required [data-onboarding-step="1"] .avatar-upload,
body.profile-required [data-onboarding-step="1"] .profile-preference-row,
body.profile-required [data-onboarding-step="1"] .account-deletion-panel,
body.profile-required [data-onboarding-step="1"] .account-password-panel,
body.profile-required [data-onboarding-step="2"] .profile-username-field,
body.profile-required [data-onboarding-step="2"] .profile-bio-field,
body.profile-required [data-onboarding-step="2"] .profile-link-field,
body.profile-required [data-onboarding-step="2"] .avatar-upload,
body.profile-required [data-onboarding-step="2"] .profile-preference-row,
body.profile-required [data-onboarding-step="2"] .account-deletion-panel,
body.profile-required [data-onboarding-step="2"] .account-password-panel,
body.profile-required [data-onboarding-step="3"] .profile-basic-fields,
body.profile-required [data-onboarding-step="3"] .profile-username-field,
body.profile-required [data-onboarding-step="3"] .profile-display-field,
body.profile-required [data-onboarding-step="3"] .profile-bio-field,
body.profile-required [data-onboarding-step="3"] .profile-link-field,
body.profile-required [data-onboarding-step="3"] .profile-preference-row,
body.profile-required [data-onboarding-step="3"] .account-deletion-panel {
  display: none !important;
}

body.profile-required [data-onboarding-step="3"] .account-password-panel {
  display: none !important;
}

body.profile-required [data-onboarding-step="1"] .profile-basic-fields,
body.profile-required [data-onboarding-step="2"] .profile-basic-fields {
  display: grid !important;
}

body.profile-required [data-onboarding-step="1"] .profile-username-field,
body.profile-required [data-onboarding-step="2"] .profile-display-field {
  display: block !important;
}

body.profile-required [data-onboarding-step="3"] .avatar-upload {
  display: grid !important;
}

body.profile-required .profile-setup[data-onboarding-step="0"] .onboarding-welcome {
  display: grid !important;
}

body.profile-required .profile-setup[data-onboarding-step="0"] > div:not(.onboarding-wizard-head):not(.onboarding-welcome),
body.profile-required .profile-setup[data-onboarding-step="0"] .profile-setup-grid,
body.profile-required .profile-setup[data-onboarding-step="0"] .onboarding-actions,
body.profile-required .profile-setup[data-onboarding-step="0"] #profile-status {
  display: none !important;
}

body.profile-required .avatar-upload {
  grid-row: auto !important;
  width: 100% !important;
  justify-items: center !important;
}

body.profile-required .avatar-save-button {
  display: none !important;
}

body.profile-required .onboarding-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

@media (max-width: 700px) {
  body.profile-required .profile-setup {
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    padding: max(18px, env(safe-area-inset-top)) 20px 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.profile-required .profile-setup-grid {
    flex: 1 1 auto !important;
    align-content: start !important;
    padding: 22px 0 120px !important;
  }

  body.profile-required .onboarding-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 3 !important;
    flex: 0 0 auto !important;
    margin: auto -20px 0 !important;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(0, 0, 0, .06) !important;
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(16px) !important;
  }
}

.ranking-grid {
  display: block !important;
}

.ranking-post-list {
  width: min(100%, 640px) !important;
  max-width: 640px !important;
  gap: 54px !important;
}

.ranking-post-list .post-card {
  width: 100% !important;
}

@media (max-width: 980px) {
  .top-bar > .top-actions:not(.mobile-search-active),
  .top-bar > .top-actions:not(.mobile-search-active) .global-search-shell,
  #global-search-shell:not(.active) {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .global-search-panel:not(.active) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  .top-bar > .top-actions.mobile-search-active {
    display: block !important;
  }

  .top-bar > .top-actions.mobile-search-active #global-search-shell.active {
    display: grid !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #ranking-view .ranking-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  #ranking-view .ranking-post-list {
    width: min(100%, 640px) !important;
    max-width: 640px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body.post-detail-open .mobile-compose-fab {
    display: none !important;
  }
}

/* 2026-07-08: larger touch targets for primary navigation and Sake Time. */
@media (min-width: 981px) {
  .app-shell {
    grid-template-columns: 270px minmax(0, 1fr) !important;
  }

  .side-nav {
    width: 270px !important;
    padding-inline: 26px !important;
  }

  .nav-list {
    gap: 12px !important;
  }

  .nav-item {
    min-height: 54px !important;
    padding: 0 16px !important;
    gap: 14px !important;
    border-radius: 18px !important;
  }

  .nav-item span {
    width: 28px !important;
    height: 28px !important;
    font-size: 24px !important;
  }

  .nav-item span img {
    width: 25px !important;
    height: 25px !important;
  }

  .nav-item b {
    font-size: 15px !important;
    font-weight: 520 !important;
  }

  .side-nav .primary-button,
  .side-nav button[data-view="post"].nav-item {
    min-height: 52px !important;
  }

  .user-story-rail {
    gap: 14px !important;
    padding-top: 12px !important;
    padding-bottom: 14px !important;
  }

  .user-story-item {
    flex-basis: 82px !important;
  }

  .user-story-avatar {
    width: 70px !important;
    height: 70px !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 24px rgba(20, 43, 77, .14) !important;
  }

  .banshaku-cover img {
    clip-path: inset(0 round 22px) !important;
  }

  .own-story-avatar i {
    width: 22px !important;
    height: 22px !important;
    font-size: 16px !important;
  }

  .user-story-item small {
    font-size: 12px !important;
  }
}

@media (max-width: 980px) {
  .mobile-nav {
    min-height: 72px !important;
    padding: 7px !important;
  }

  .mobile-nav button {
    min-height: 58px !important;
    gap: 3px !important;
    border-radius: 17px !important;
    font-size: 10.5px !important;
  }

  .mobile-nav button img {
    width: 25px !important;
    height: 25px !important;
  }

  .user-story-rail {
    gap: 13px !important;
    padding-top: 12px !important;
    padding-bottom: 14px !important;
  }

  .user-story-item {
    flex-basis: 76px !important;
  }

  .user-story-avatar {
    width: 66px !important;
    height: 66px !important;
    border-radius: 22px !important;
  }

  .banshaku-cover img {
    clip-path: inset(0 round 20px) !important;
  }

  .own-story-avatar i {
    width: 22px !important;
    height: 22px !important;
    font-size: 16px !important;
  }

  .user-story-item small {
    font-size: 11.5px !important;
  }
}

/* 2026-07-08: trial scale-up for navigation icons and Sake Time interactions. */
@media (min-width: 981px) {
  .nav-item {
    min-height: 68px !important;
    gap: 16px !important;
  }

  .nav-item span {
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
  }

  .nav-item span img {
    width: 50px !important;
    height: 50px !important;
  }

  .side-profile {
    margin-bottom: 22px !important;
  }

  .side-profile .profile-shortcut {
    display: inline-flex !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    height: 52px !important;
    min-width: 0 !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
  }

  .side-profile .profile-shortcut img {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }

  .side-profile-name {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: #142B4D !important;
    font-size: 13px !important;
    font-weight: 520 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 980px) {
  .mobile-nav {
    min-height: 82px !important;
  }

  .mobile-nav button {
    min-height: 68px !important;
  }

  .mobile-nav button img {
    width: 38px !important;
    height: 38px !important;
  }
}

.post-detail-modal.banshaku-detail .banshaku-detail-author-chip {
  position: absolute !important;
  top: 14px !important;
  left: 64px !important;
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: calc(100% - 132px) !important;
  min-height: 42px !important;
  padding: 4px 12px 4px 5px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .38) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(14px) !important;
  pointer-events: auto !important;
}

.post-detail-modal.banshaku-detail .banshaku-detail-author-chip .post-avatar,
.post-detail-modal.banshaku-detail .banshaku-detail-author-chip img {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border-radius: 999px !important;
}

.post-detail-modal.banshaku-detail .banshaku-detail-author-chip strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.post-detail-modal.banshaku-detail .post-detail-actions {
  position: absolute !important;
  right: 14px !important;
  bottom: 78px !important;
  left: 14px !important;
  z-index: 9 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 18px !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .30) !important;
  backdrop-filter: blur(14px) !important;
  pointer-events: auto !important;
}

.post-detail-modal.banshaku-detail .post-detail-actions button {
  color: #ffffff !important;
}

.post-detail-modal.banshaku-detail .post-detail-actions img {
  width: 24px !important;
  height: 24px !important;
  filter: brightness(0) invert(1) !important;
}

.post-detail-modal.banshaku-detail .post-detail-actions .like-action.active {
  color: #ff7d9a !important;
}

.post-detail-modal.banshaku-detail .post-detail-comments {
  position: absolute !important;
  right: 14px !important;
  bottom: 136px !important;
  left: 14px !important;
  z-index: 9 !important;
  display: grid !important;
  max-height: min(28dvh, 210px) !important;
  overflow-y: auto !important;
  padding: 0 !important;
  pointer-events: auto !important;
  scrollbar-width: none !important;
}

.post-detail-modal.banshaku-detail .post-detail-comments::-webkit-scrollbar {
  display: none !important;
}

.post-detail-modal.banshaku-detail .comment-item {
  padding: 10px !important;
  border-radius: 16px !important;
  background: rgba(0, 0, 0, .34) !important;
  color: #ffffff !important;
  backdrop-filter: blur(14px) !important;
}

.post-detail-modal.banshaku-detail .comment-author strong,
.post-detail-modal.banshaku-detail .comment-author span,
.post-detail-modal.banshaku-detail .comment-item p,
.post-detail-modal.banshaku-detail .comment-actions button,
.post-detail-modal.banshaku-detail .post-detail-comments .muted {
  color: #ffffff !important;
}

.post-detail-modal.banshaku-detail .post-detail-comment-form {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  left: 14px !important;
  z-index: 9 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 18px !important;
  background: rgba(0, 0, 0, .34) !important;
  backdrop-filter: blur(14px) !important;
  pointer-events: auto !important;
}

.post-detail-modal.banshaku-detail .post-detail-comment-form textarea {
  min-height: 42px !important;
  max-height: 96px !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #142B4D !important;
  resize: vertical !important;
}

.post-detail-modal.banshaku-detail .comment-compose-state {
  grid-column: 1 / -1 !important;
  color: #ffffff !important;
}

.post-detail-modal.banshaku-detail .comment-compose-actions {
  align-self: end !important;
}

.post-detail-modal.banshaku-detail .post-detail-comment-form button {
  min-height: 42px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #142B4D !important;
}

@media (max-width: 560px) {
  .post-detail-modal.banshaku-detail .banshaku-detail-author-chip {
    top: max(12px, env(safe-area-inset-top)) !important;
    left: 60px !important;
    max-width: calc(100% - 120px) !important;
  }

  .post-detail-modal.banshaku-detail .post-detail-comments {
    bottom: calc(136px + env(safe-area-inset-bottom)) !important;
    max-height: 24dvh !important;
  }

  .post-detail-modal.banshaku-detail .post-detail-actions {
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  }

  .post-detail-modal.banshaku-detail .post-detail-comment-form {
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
}

/* 2026-07-08: normal post photo grids. Photo taps open post detail/comments, not a lightbox. */
.post-photo-grid {
  display: grid !important;
  gap: 3px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background: rgba(20, 43, 77, .06) !important;
}

.post-photo-carousel {
  position: relative;
  width: 100%;
  max-height: min(72vh, 680px);
  aspect-ratio: var(--post-photo-aspect, 4 / 5);
  overflow: hidden;
  background: #f3f5f7;
  touch-action: pan-y;
}

.post-photo-carousel-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.post-photo-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translate3d(var(--post-photo-carousel-x, 0%), 0, 0);
  transition: transform 440ms cubic-bezier(.18, .92, .22, 1);
  will-change: transform;
}

.post-photo-carousel.is-dragging .post-photo-carousel-track {
  transition: none;
}

.post-photo-carousel-slide {
  position: relative;
  display: block;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #f3f5f7;
}

.post-photo-carousel-slide .label-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  user-select: none;
  -webkit-user-drag: none;
}

.post-photo-carousel-status {
  position: absolute;
  right: 12px;
  bottom: 11px;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.post-photo-carousel-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .24);
  backdrop-filter: blur(8px);
}

.post-photo-carousel-dots i {
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .58);
  transition: width 260ms ease, background 220ms ease;
}

.post-photo-carousel-dots i.active {
  width: 15px;
  background: #fff;
}

.post-photo-carousel-count {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}

.post-detail-modal.opening .post-detail-panel {
  animation-duration: 420ms !important;
}

.post-photo-tile {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f3f5f7 !important;
  cursor: pointer !important;
}

.post-photo-tile .label-art {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}

.post-photo-grid-single {
  max-height: min(72vh, 680px) !important;
  aspect-ratio: var(--post-photo-aspect, 4 / 5) !important;
}

.post-photo-grid-double {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  aspect-ratio: 4 / 3 !important;
}

.post-photo-grid-triple {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1.18fr) minmax(0, .82fr) !important;
  aspect-ratio: 4 / 5 !important;
}

.post-photo-grid-triple .post-photo-tile.main {
  grid-column: 1 / -1 !important;
}

.post-photo-grid-multi {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  aspect-ratio: 1 / 1 !important;
}

.post-photo-more {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(0, 0, 0, .38) !important;
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 620 !important;
}

@media (max-width: 760px) {
  .post-photo-grid {
    border-radius: 0 !important;
  }
}

/* 2026-07-08: app canvas width for regular timeline/ranking views. */
.app-shell {
  width: 100% !important;
  max-width: none !important;
}

.main-panel {
  width: 100% !important;
  max-width: none !important;
  padding-right: clamp(16px, 3vw, 44px) !important;
  padding-left: clamp(16px, 3vw, 44px) !important;
}

.view {
  width: 100% !important;
  max-width: none !important;
}

#timeline-view .feed-layout,
#ranking-view .ranking-grid {
  width: 100% !important;
  max-width: none !important;
}

#timeline-view .post-list {
  width: min(100%, 680px) !important;
  max-width: 680px !important;
}

#ranking-view .ranking-post-list {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
}

/* Ranking is for discovering bottles at a glance, not reading a timeline. */
#ranking-view .ranking-photo-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  width: min(100%, 900px) !important;
  margin: 0 auto !important;
}

.ranking-grid-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  padding: 0;
  background: #eef1f3;
  color: #fff;
  cursor: pointer;
}

.ranking-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ranking-grid-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 35, .36), transparent 42%, rgba(8, 20, 35, .64));
  pointer-events: none;
}

.ranking-grid-no-photo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 12px;
  color: #53606a;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.ranking-grid-rank,
.ranking-grid-metric {
  position: absolute;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.ranking-grid-rank {
  top: 8px;
  left: 8px;
  font-size: 15px;
  font-weight: 750;
}

.ranking-grid-metric {
  right: 8px;
  bottom: 8px;
  font-size: 11px;
  font-weight: 650;
}

.ranking-grid-item.no-photo::after {
  background: linear-gradient(180deg, rgba(20, 43, 77, .15), transparent 46%, rgba(20, 43, 77, .34));
}

.ranking-grid-item.no-photo .ranking-grid-rank,
.ranking-grid-item.no-photo .ranking-grid-metric {
  color: #314150;
  text-shadow: none;
}

/* Reuse the timeline card's proven media path, but keep ranking visually photo-first. */
.ranking-card-tile {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 5px;
  background: #eef1f3;
}

.ranking-card-tile .post-card {
  height: 100%;
  min-height: 0;
  margin: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: inherit !important;
  background: #eef1f3 !important;
}

.ranking-card-tile .post-card-head,
.ranking-card-tile .post-content {
  display: none !important;
}

.ranking-card-tile .post-photo-grid,
.ranking-card-tile .post-photo-carousel,
.ranking-card-tile .post-photo-carousel-viewport,
.ranking-card-tile .post-photo-carousel-track,
.ranking-card-tile .post-photo-carousel-slide {
  height: 100% !important;
  min-height: 0 !important;
  border-radius: inherit !important;
}

.ranking-card-tile .post-photo-grid {
  display: block !important;
}

.ranking-card-tile .post-photo-grid .post-photo-tile {
  display: none !important;
  height: 100% !important;
}

.ranking-card-tile .post-photo-grid .post-photo-tile.main,
.ranking-card-tile .post-photo-carousel {
  display: block !important;
}

.ranking-card-tile .post-photo-carousel-viewport {
  overflow: hidden !important;
}

.ranking-card-tile .post-photo-carousel-track {
  display: flex !important;
}

.ranking-card-tile .post-photo-carousel-slide {
  flex: 0 0 100% !important;
}

.ranking-card-tile .post-photo-carousel-status {
  display: none !important;
}

.ranking-card-tile .post-photo-grid img,
.ranking-card-tile .post-photo-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ranking-tile-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: #eef1f3;
  cursor: pointer;
}

.ranking-tile-media .label-art {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
}

/* Ranking tiles are cropped photo windows: never preserve letterbox margins. */
.ranking-card-tile .post-photo-tile .label-art,
.ranking-card-tile .post-photo-carousel-slide .label-art {
  object-fit: cover !important;
}

/* Portrait uploads can include a capture canvas beside the photo.  Ranking is
   a square photo browser, so crop that canvas here without changing the
   timeline or detail framing. */
.ranking-tile-media.ranking-portrait-media .label-art {
  object-position: 50% 50% !important;
  transform: scale(max(1.8, var(--frame-zoom, 1))) rotate(var(--image-rotation, 0deg)) !important;
}

.ranking-card-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 20, 35, .34), transparent 42%, rgba(8, 20, 35, .62));
}

.ranking-card-tile .ranking-grid-rank,
.ranking-card-tile .ranking-grid-metric {
  z-index: 1;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

@media (max-width: 640px) {
  #ranking-view .ranking-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }
}

.post-text-link {
  color: #1d5d91 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  overflow-wrap: anywhere !important;
}

.post-text-link:hover {
  color: #123f69 !important;
}

/* 2026-07-08: tighten the timeline spacing below the Sake Time rail. */
.evening-place-section:not(.hidden-field) {
  margin-bottom: 12px !important;
}

#timeline-view .section-head {
  margin-top: 8px !important;
}

@media (max-width: 980px) {
  .evening-place-section:not(.hidden-field) {
    margin-bottom: 8px !important;
  }

  #timeline-view .section-head {
    margin-top: 6px !important;
  }
}

/* 2026-07-08: final navigation and mobile compose polish. */
@media (min-width: 981px) {
  .side-nav {
    min-height: 100dvh !important;
    overflow-y: auto !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }

  .side-account {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    padding-bottom: 4px !important;
  }

  .side-account #auth-button {
    width: 100% !important;
    min-height: 46px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 980px) {
  .mobile-nav {
    align-items: center !important;
    height: calc(58px + env(safe-area-inset-bottom)) !important;
    min-height: calc(58px + env(safe-area-inset-bottom)) !important;
    max-height: calc(58px + env(safe-area-inset-bottom)) !important;
    padding: 4px max(7px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)) !important;
  }

  .mobile-nav button {
    display: grid !important;
    place-items: center !important;
    align-self: center !important;
    grid-template-rows: 1fr !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .mobile-nav button > span:not([aria-hidden="true"]) {
    display: none !important;
  }

  .mobile-nav button img {
    display: block !important;
    grid-row: 1 !important;
    grid-column: 1 !important;
    place-self: center !important;
    align-self: center !important;
    justify-self: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    transform: none !important;
  }

  #post-view .image-uploader {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;
  }

  #post-view .compose-panel {
    overflow: visible !important;
  }

  #post-view .photo-slot-grid {
    width: 100% !important;
    max-width: none !important;
    padding: 0 0 2px !important;
    overflow-x: auto !important;
    scroll-padding-inline: 0 !important;
  }

  #post-view .photo-slot {
    min-height: clamp(116px, 31vw, 150px) !important;
  }
}

/* 2026-07-08: mobile post detail photo area and swipeable lightbox. */
@media (max-width: 640px) {
  .post-detail-modal:not(.banshaku-detail) .post-detail-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .post-detail-modal:not(.banshaku-detail) .post-detail-photo-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: min(64dvh, 560px) !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    grid-template-rows: minmax(0, 1fr) !important;
    aspect-ratio: var(--post-photo-aspect, 1 / 1) !important;
    border-radius: 0 !important;
  }

  .post-detail-modal:not(.banshaku-detail) .detail-photo-main {
    border-radius: 0 !important;
  }

  .post-detail-modal:not(.banshaku-detail) .detail-photo-thumbs {
    position: absolute !important;
    right: 0 !important;
    bottom: 8px !important;
    left: 0 !important;
    z-index: 4 !important;
    padding: 0 10px !important;
  }

  .post-detail-modal:not(.banshaku-detail) .detail-photo-thumbs button {
    flex-basis: 46px !important;
    width: 46px !important;
    height: 46px !important;
    border-color: rgba(255, 255, 255, .26) !important;
    background: rgba(0, 0, 0, .28) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .22) !important;
  }

  .post-detail-modal:not(.banshaku-detail) .detail-photo-thumbs button.active {
    border-color: #ffffff !important;
  }

  .image-lightbox-panel {
    inset: 0 !important;
    border-radius: 0 !important;
    display: block !important;
  }

  .image-lightbox-toolbar {
    position: absolute !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    z-index: 5 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .image-lightbox-toolbar button {
    width: 42px !important;
    height: 42px !important;
    background: rgba(0, 0, 0, .36) !important;
    backdrop-filter: blur(12px) !important;
  }

  .image-lightbox-stage {
    position: absolute !important;
    inset: 0 !important;
    padding: 0 !important;
    touch-action: pan-y !important;
  }

  .image-lightbox-stage img {
    max-width: 100vw !important;
    max-height: 100dvh !important;
  }

  .image-lightbox.has-multiple .image-lightbox-arrow {
    display: none !important;
  }

  .image-lightbox-dots {
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }
}

/* 2026-07-09: Sake Time text/sticker decoration tools. */
.evening-text-editor.sticker-selected [data-evening-text-only] {
  display: none !important;
}

.evening-overlay-item {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .42) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: max-content !important;
  max-width: 86% !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  outline: 0 !important;
}

.evening-overlay-item.text {
  min-width: 0 !important;
}

.evening-overlay-item.sticker {
  min-width: 0 !important;
  min-height: 0 !important;
}

.evening-overlay-item::before {
  content: "" !important;
  position: absolute !important;
  inset: -16px !important;
  z-index: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  pointer-events: auto !important;
}

.evening-overlay-item::after {
  display: none !important;
}

.evening-overlay-content {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 4px 8px !important;
  color: var(--evening-text-color, #ffffff) !important;
  font-family: var(--evening-text-font, inherit) !important;
  font-size: var(--evening-text-size, 24px) !important;
  font-style: var(--evening-text-style, normal) !important;
  font-weight: var(--evening-text-weight, 450) !important;
  letter-spacing: var(--evening-letter-spacing, 0em) !important;
  line-height: var(--evening-text-line, 1.18) !important;
  overflow-wrap: anywhere !important;
  text-align: var(--evening-text-align, center) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .42) !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

.evening-overlay-item.text.no-text-shadow,
.evening-overlay-item.text.no-text-shadow .evening-overlay-content {
  text-shadow: none !important;
}

.evening-overlay-item.text.has-backplate .evening-overlay-content {
  padding: .24em .52em !important;
  border-radius: var(--evening-backplate-radius, .45em) !important;
  background: transparent !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
  isolation: isolate !important;
}

.evening-overlay-item.text.has-backplate .evening-overlay-content::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  background: var(--evening-backplate-color, #111111) !important;
  opacity: var(--evening-backplate-opacity, .64) !important;
  pointer-events: none !important;
}

.evening-overlay-item.sticker .evening-overlay-content {
  padding: 2px 4px !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans JP", sans-serif !important;
  font-size: 42px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.evening-overlay-item.active {
  outline: 0 !important;
}

.evening-overlay-item.active .evening-overlay-content {
  outline: 1px solid rgba(255, 255, 255, .72) !important;
  outline-offset: 5px !important;
}

.evening-overlay-item.text.editing {
  text-decoration: none !important;
}

.evening-overlay-item.text.editing .evening-overlay-content {
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 255, 255, .56) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: .18em !important;
}

.evening-overlay-content[contenteditable="true"] {
  -webkit-user-select: text !important;
  user-select: text !important;
}

.evening-overlay-content:empty::before {
  content: attr(data-placeholder) !important;
  color: rgba(255, 255, 255, .68) !important;
}

.evening-compose-stage.photo-selected::after {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  z-index: 5 !important;
  border: 1.5px solid rgba(255, 255, 255, .72) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 0 0 1px rgba(9, 13, 20, .14), 0 0 0 1px rgba(9, 13, 20, .16) !important;
  pointer-events: none !important;
}

.evening-rotate-handle {
  position: absolute !important;
  z-index: 2147483028 !important;
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(255, 255, 255, .62) !important;
  border-radius: 999px !important;
  background: rgba(18, 20, 22, .70) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .26) !important;
  cursor: grab !important;
  pointer-events: auto !important;
  touch-action: none !important;
  backdrop-filter: blur(12px) !important;
}

.evening-style-handle {
  position: absolute !important;
  z-index: 2147483029 !important;
  display: grid !important;
  place-items: center !important;
  min-width: 52px !important;
  height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255, 255, 255, .66) !important;
  border-radius: 999px !important;
  background: rgba(18, 20, 22, .82) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  letter-spacing: .04em !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  backdrop-filter: blur(12px) !important;
}

.evening-text-editor .evening-color-palette {
  display: none !important;
}

.evening-text-editor.color-open .evening-color-palette {
  display: flex !important;
}

.evening-text-editor-grip {
  display: block !important;
  width: 10px !important;
  min-width: 10px !important;
  height: 30px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .62) 1.5px, transparent 2px) 0 3px / 5px 7px,
    radial-gradient(circle, rgba(255, 255, 255, .62) 1.5px, transparent 2px) 5px 3px / 5px 7px !important;
  cursor: grab !important;
  touch-action: none !important;
  opacity: .82 !important;
}

@media (min-width: 981px) {
  .evening-compose-modal.active {
    place-items: stretch !important;
    padding: 0 !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(54, 58, 68, .34), transparent 40%),
      linear-gradient(180deg, #08090c 0%, #030304 100%) !important;
  }

  .evening-compose-modal.active .evening-compose-backdrop {
    background: transparent !important;
    backdrop-filter: none !important;
  }

  .evening-compose-modal.active .evening-compose-panel {
    position: relative !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .evening-compose-modal.active .evening-preview-area {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    padding: clamp(18px, 3vw, 42px) 700px clamp(18px, 3vw, 42px) 96px !important;
    background: transparent !important;
  }

  .evening-compose-modal.active .evening-compose-stage {
    width: min(440px, calc((100dvh - 72px) * 9 / 16)) !important;
    height: auto !important;
    max-height: calc(100dvh - 72px) !important;
    aspect-ratio: 9 / 16 !important;
    border: 10px solid #0b0c0f !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% 12%, rgba(82, 91, 108, .32), transparent 36%),
      linear-gradient(180deg, #26282e 0%, #17191f 58%, #111216 100%) !important;
    box-shadow:
      0 30px 90px rgba(0, 0, 0, .46),
      0 0 0 1px rgba(255, 255, 255, .06),
      inset 0 0 0 1px rgba(255, 255, 255, .05) !important;
  }

  .evening-compose-modal.active .evening-compose-stage::before {
    content: "" !important;
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    z-index: 6 !important;
    width: 76px !important;
    height: 21px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .72) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .08), 0 6px 18px rgba(0, 0, 0, .22) !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
  }

  .evening-compose-modal.active .evening-compose-stage > img.active {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 21px !important;
  }

  .evening-compose-modal.active .evening-compose-actions {
    top: auto !important;
    right: auto !important;
    bottom: 28px !important;
    left: 34px !important;
    z-index: 2147483032 !important;
    display: flex !important;
  }

  .evening-compose-modal.active .evening-text-editor {
    position: fixed !important;
    top: 50% !important;
    right: max(24px, calc((100vw - 440px) / 2 - 382px)) !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 2147483030 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 44px) !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    width: calc(100vw - 16px) !important;
    max-width: 184px !important;
    max-height: min(78dvh, 680px) !important;
    overflow-y: auto !important;
    padding: 12px !important;
    border: 1px solid rgba(255, 255, 255, .68) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(246, 246, 247, .76)) !important;
    box-shadow:
      0 24px 60px rgba(37, 42, 48, .18),
      0 1px 1px rgba(255, 255, 255, .74) inset,
      0 0 0 1px rgba(18, 22, 28, .04) !important;
    transform: translateY(-50%) !important;
    backdrop-filter: blur(24px) saturate(1.18) !important;
  }

  .evening-compose-modal.active .evening-text-editor-grip {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: 36px !important;
    height: 8px !important;
    min-width: 36px !important;
    cursor: default !important;
    transform: rotate(90deg) !important;
    opacity: .26 !important;
    filter: invert(1) grayscale(1) !important;
  }

  .evening-compose-modal.active .evening-text-editor.hidden-field {
    display: grid !important;
  }

  .evening-compose-modal.active .evening-text-editor select,
  .evening-compose-modal.active .evening-text-editor button {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .72) !important;
    border: 1px solid rgba(17, 24, 39, .08) !important;
    color: #20242a !important;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 1px 0 rgba(255, 255, 255, .72) inset !important;
    font-size: 15px !important;
    line-height: 1 !important;
    transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease, opacity 160ms ease !important;
  }

  .evening-compose-modal.active .evening-text-editor button:hover,
  .evening-compose-modal.active .evening-text-editor select:hover {
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 6px 16px rgba(17, 24, 39, .10), 0 1px 0 rgba(255, 255, 255, .82) inset !important;
    transform: translateY(-1px) !important;
  }

  .evening-compose-modal.active .evening-text-editor button.active {
    background: #1d1d1f !important;
    border-color: #1d1d1f !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(29, 29, 31, .18) !important;
  }

  .evening-compose-modal.active .evening-text-editor select {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    padding: 0 12px !important;
  }

  .evening-compose-modal.active .evening-color-palette {
    grid-column: 1 / -1 !important;
    display: none !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 7px !important;
  }

  .evening-compose-modal.active .evening-text-editor.color-open .evening-color-palette {
    display: grid !important;
  }

  .evening-compose-modal.active .evening-text-editor.no-selection {
    opacity: .88 !important;
  }

  .evening-compose-modal.active .evening-text-editor.no-selection::before {
    content: "テキストを追加すると、この設定で編集できます" !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 9px 11px !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .065) !important;
    color: rgba(255, 255, 255, .58) !important;
    font-size: 12px !important;
    font-weight: 620 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  .evening-compose-modal.active .evening-text-editor {
    grid-template-columns: minmax(220px, 250px) minmax(290px, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
    width: min(620px, calc(100vw - 48px)) !important;
    max-width: min(620px, calc(100vw - 48px)) !important;
    max-height: calc(100dvh - 40px) !important;
    right: 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 13px !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 26px !important;
    background:
      linear-gradient(180deg, rgba(40, 42, 48, .92), rgba(20, 21, 25, .88)),
      rgba(21, 22, 25, .92) !important;
    box-shadow:
      0 28px 80px rgba(0, 0, 0, .34),
      0 1px 0 rgba(255, 255, 255, .08) inset,
      0 0 0 1px rgba(0, 0, 0, .26) !important;
    color: #f7f7f8 !important;
    scrollbar-color: rgba(255, 255, 255, .24) transparent !important;
    scrollbar-width: thin !important;
  }

  .evening-compose-modal.active .type-section,
  .evening-compose-modal.active .backplate-section,
  .evening-compose-modal.active .transform-section,
  .evening-compose-modal.active #evening-text-done {
    grid-column: 1 !important;
  }

  .evening-compose-modal.active .evening-text-editor.no-selection .type-section {
    grid-row: 2 !important;
  }

  .evening-compose-modal.active .evening-text-editor.no-selection .backplate-section {
    grid-row: 3 !important;
  }

  .evening-compose-modal.active .evening-text-editor.no-selection .transform-section {
    grid-row: 4 !important;
  }

  .evening-compose-modal.active .evening-text-editor.no-selection #evening-text-done {
    grid-row: 5 !important;
  }

  .evening-compose-modal.active .color-section {
    grid-column: 2 !important;
    grid-row: 1 / span 4 !important;
    align-self: start !important;
    min-height: 0 !important;
  }

  .evening-editor-section {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 9px !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .055) !important;
  }

  .evening-inline-section {
    display: grid !important;
    gap: 7px !important;
    padding-top: 9px !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
  }

  .evening-editor-label {
    color: rgba(255, 255, 255, .56) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  .evening-editor-control-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 7px !important;
  }

  .evening-compose-modal.active .align-section .evening-editor-control-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .evening-compose-modal.active .evening-text-editor select,
  .evening-compose-modal.active .evening-text-editor button,
  .evening-compose-modal.active .evening-text-editor input[type="color"] {
    width: 100% !important;
    height: 40px !important;
    min-width: 0 !important;
    min-height: 40px !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #f7f7f8 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset !important;
  }

  .evening-compose-modal.active .evening-text-editor select {
    grid-column: auto !important;
    padding: 0 12px !important;
  }

  .evening-compose-modal.active .evening-text-editor button:hover,
  .evening-compose-modal.active .evening-text-editor select:hover,
  .evening-compose-modal.active .evening-text-editor input[type="color"]:hover {
    background: rgba(255, 255, 255, .14) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22), 0 1px 0 rgba(255, 255, 255, .08) inset !important;
  }

  .evening-compose-modal.active .evening-text-editor button.active {
    background: rgba(255, 255, 255, .92) !important;
    border-color: rgba(255, 255, 255, .92) !important;
    color: #15161a !important;
  }

  .evening-color-picker {
    display: grid !important;
    grid-template-columns: 52px 1fr !important;
    align-items: center !important;
    gap: 10px !important;
    color: rgba(255, 255, 255, .72) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
  }

  .evening-current-color-button {
    display: grid !important;
    grid-template-columns: 24px 1fr !important;
    align-items: center !important;
    gap: 10px !important;
    justify-items: start !important;
    padding: 0 12px !important;
  }

  .evening-color-target-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 7px !important;
  }

  .evening-compose-modal.active .evening-color-target-row button {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
  }

  .evening-current-color-chip {
    width: 20px !important;
    height: 20px !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 999px !important;
    background: var(--current-color, #ffffff) !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .26) inset !important;
  }

  .evening-color-popover {
    display: grid !important;
    gap: 9px !important;
  }

  .evening-compose-modal.active .evening-text-editor.color-open .evening-color-popover {
    display: grid !important;
  }

  .evening-backplate-row {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
  }

  .evening-compose-modal.active .evening-backplate-toggle {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 720 !important;
  }

  .evening-compose-modal.active .evening-backplate-toggle.active {
    background: rgba(255, 255, 255, .92) !important;
    color: #15161a !important;
  }

  .evening-backplate-opacity,
  .evening-backplate-radius {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    color: rgba(255, 255, 255, .62) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
  }

  .evening-backplate-opacity input[type="range"],
  .evening-backplate-radius input[type="range"] {
    width: 100% !important;
    height: 6px !important;
    min-height: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.92)) !important;
  }

  .evening-backplate-opacity input[type="range"]::-webkit-slider-thumb,
  .evening-backplate-radius input[type="range"]::-webkit-slider-thumb {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #ffffff !important;
    border-radius: 999px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #1f2127 !important;
    box-shadow: 0 8px 16px rgba(0,0,0,.24) !important;
  }

  .evening-compose-modal.active .evening-shadow-toggle {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 720 !important;
  }

  .evening-compose-modal.active .evening-shadow-toggle.active {
    background: rgba(255, 255, 255, .92) !important;
    color: #15161a !important;
  }

  .evening-color-field {
    position: relative !important;
    width: 100% !important;
    height: min(190px, 28dvh) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 16px !important;
    background:
      linear-gradient(0deg, #000000, transparent),
      linear-gradient(90deg, #ffffff, var(--picker-hue-color, #ff0000)) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .08) inset,
      0 12px 26px rgba(0, 0, 0, .20) !important;
    cursor: crosshair !important;
    touch-action: none !important;
  }

  .evening-color-field-cursor {
    position: absolute !important;
    left: var(--picker-x, 0%) !important;
    top: var(--picker-y, 0%) !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #ffffff !important;
    border-radius: 999px !important;
    background: var(--picker-color, #ffffff) !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .56), 0 8px 18px rgba(0, 0, 0, .28) !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
  }

  .evening-hue-slider {
    width: 100% !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) !important;
    cursor: pointer !important;
  }

  .evening-hue-slider::-webkit-slider-thumb {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #ffffff !important;
    border-radius: 999px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: hsl(var(--picker-hue, 0), 100%, 50%) !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .48), 0 8px 16px rgba(0, 0, 0, .22) !important;
  }

  .evening-hue-slider::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #ffffff !important;
    border-radius: 999px !important;
    background: hsl(var(--picker-hue, 0), 100%, 50%) !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .48), 0 8px 16px rgba(0, 0, 0, .22) !important;
  }

  .evening-compose-modal.active .evening-text-editor input[type="color"] {
    padding: 4px !important;
    cursor: pointer !important;
  }

  .evening-compose-modal.active .evening-color-palette {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 6px !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .evening-favorite-colors {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 6px !important;
    min-height: 26px !important;
  }

  .evening-favorite-colors button,
  .evening-color-palette button {
    background: var(--swatch, #ffffff) !important;
    color: transparent !important;
  }

  .evening-favorite-colors span {
    grid-column: 1 / -1 !important;
    color: rgba(255, 255, 255, .38) !important;
    font-size: 12px !important;
  }

  .evening-save-color-button {
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

  .evening-compose-modal.active .evening-color-palette button {
    height: 26px !important;
    min-height: 26px !important;
    border-radius: 999px !important;
    background: var(--swatch, #ffffff) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    color: transparent !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .32) inset !important;
  }

  .evening-compose-modal.active .evening-favorite-colors button[data-evening-text-color],
  .evening-compose-modal.active .evening-color-palette button[data-evening-text-color] {
    background-color: var(--swatch, #ffffff) !important;
    background-image: none !important;
    color: transparent !important;
  }

  .evening-compose-modal.active .transform-section .evening-editor-control-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .evening-compose-modal.active #evening-text-done {
    width: 100% !important;
    border-radius: 16px !important;
  }

  .evening-compose-modal.active .evening-text-editor-grip {
    display: none !important;
  }

  .evening-compose-modal.active .evening-text-editor.no-selection::before {
    background: rgba(255, 255, 255, .065) !important;
    color: rgba(255, 255, 255, .52) !important;
  }
}

@media (min-width: 981px) and (max-width: 1320px) {
  .evening-compose-modal.active .evening-preview-area {
    padding-right: 560px !important;
    padding-left: 42px !important;
  }

  .evening-compose-modal.active .evening-text-editor {
    grid-template-columns: minmax(200px, 230px) minmax(250px, 1fr) !important;
    width: min(540px, calc(100vw - 36px)) !important;
    max-width: min(540px, calc(100vw - 36px)) !important;
    right: 18px !important;
  }

  .evening-compose-modal.active .evening-compose-stage {
    width: min(390px, calc((100dvh - 72px) * 9 / 16)) !important;
  }
}

@media (max-width: 980px) {
  .evening-compose-modal.active [data-evening-desktop-only] {
    display: none !important;
  }

  .evening-compose-modal.active .evening-editor-section {
    display: contents !important;
  }

  .evening-compose-modal.active .evening-inline-section {
    display: contents !important;
  }

  .evening-compose-modal.active .evening-editor-label,
  .evening-compose-modal.active .evening-color-target-row,
  .evening-compose-modal.active .evening-color-picker,
  .evening-compose-modal.active .evening-color-field,
  .evening-compose-modal.active .evening-hue-slider,
  .evening-compose-modal.active .evening-favorite-colors,
  .evening-compose-modal.active .evening-backplate-opacity,
  .evening-compose-modal.active .evening-backplate-radius,
  .evening-compose-modal.active .evening-save-color-button {
    display: none !important;
  }

  .evening-compose-modal.active .evening-color-popover {
    display: contents !important;
  }

  .evening-compose-modal.active .evening-current-color-button {
    display: grid !important;
    place-items: center !important;
  }

  .evening-compose-modal.active .evening-current-color-button span:not(.evening-current-color-chip) {
    display: none !important;
  }

  .evening-compose-modal.active .evening-current-color-chip {
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    background: var(--current-color, #ffffff) !important;
  }

  .evening-compose-modal.active .evening-editor-control-row {
    display: contents !important;
  }

  .evening-compose-modal.active .evening-text-editor {
    position: fixed !important;
    top: var(--evening-editor-top, 72%) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--evening-editor-left, 50%) !important;
    z-index: 2147483030 !important;
    display: grid !important;
    grid-template-columns: 14px repeat(6, 40px) !important;
    grid-auto-rows: 40px !important;
    gap: 6px !important;
    width: auto !important;
    max-width: calc(100vw - 18px) !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding: 8px !important;
    border-radius: 22px !important;
    background: rgba(12, 13, 15, .80) !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .34) !important;
    transform: translate(-50%, -50%) !important;
    backdrop-filter: blur(18px) !important;
    scrollbar-width: none !important;
    touch-action: none !important;
  }

  .evening-compose-modal.active .evening-text-editor.hidden-field {
    display: none !important;
  }

  .evening-compose-modal.active .evening-text-editor::-webkit-scrollbar {
    display: none !important;
  }

  .evening-compose-modal.active .evening-text-editor select,
  .evening-compose-modal.active .evening-text-editor button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .evening-compose-modal.active .evening-text-editor select {
    grid-column: span 2 !important;
    width: 86px !important;
    padding: 0 10px !important;
  }

  .evening-compose-modal.active .evening-color-palette {
    grid-column: 1 / -1 !important;
    display: none !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 6px !important;
    padding: 4px 0 0 !important;
  }

  .evening-compose-modal.active .evening-text-editor.color-open .evening-color-palette {
    display: grid !important;
  }

  .evening-compose-modal.active .evening-text-editor-grip {
    grid-row: span 2 !important;
    align-self: stretch !important;
    height: auto !important;
    margin: 0 2px 0 0 !important;
  }

  .evening-compose-modal.active .evening-text-editor.sticker-selected {
    grid-template-columns: 14px repeat(3, 40px) !important;
  }

  .evening-compose-modal.active .evening-text-editor.sticker-selected .evening-text-editor-grip {
    grid-row: span 1 !important;
  }
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* ==================================================
   Sake Time fixed fullscreen viewer
   Keep this section at EOF.
================================================== */
body.sake-time-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html:has(body.sake-time-open),
html:has(body.sake-firefly-open),
body.sake-time-open,
body.sake-firefly-open {
  margin: 0 !important;
  background: #050604 !important;
}

body.sake-time-open .app-shell,
body.sake-firefly-open .app-shell,
body.sake-time-open .main-panel,
body.sake-firefly-open .main-panel {
  width: 100vw !important;
  max-width: none !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #050604 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.sake-time-open .side-nav,
body.sake-firefly-open .side-nav,
body.sake-time-open .top-bar,
body.sake-firefly-open .top-bar,
body.sake-time-open .mobile-nav,
body.sake-firefly-open .mobile-nav,
body.sake-time-open .mobile-compose-fab,
body.sake-firefly-open .mobile-compose-fab {
  display: none !important;
}

body.sake-time-open #auth-panel,
body.sake-time-open #auth-panel.active,
body.sake-time-open.auth-modal-open #auth-panel,
body.sake-time-open.auth-modal-open #auth-panel.active,
body.sake-time-open.auth-required #auth-panel,
body.sake-time-open .auth-panel,
body.sake-time-open .auth-panel.active,
body.sake-time-open .auth-gate,
body.sake-time-open .auth-button,
body.sake-time-open [data-auth-open] {
  display: none !important;
}

#sake-time-view.active {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
  display: block !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #101010 !important;
  color: #ffffff !important;
  pointer-events: auto !important;
}

#sake-time-view.active.is-dismiss-swiping {
  background: rgba(16, 16, 16, var(--sake-time-backdrop-opacity, 1)) !important;
}

.sake-time-close-button {
  position: fixed !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  z-index: 9020 !important;
  display: none !important;
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .38) !important;
  color: #ffffff !important;
  font-size: 28px !important;
  font-weight: 360 !important;
  line-height: 1 !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(14px) !important;
}

#sake-time-view.active .sake-time-close-button {
  display: grid !important;
  place-items: center !important;
}

#sake-time-view.active .sake-time-view-head {
  position: relative !important;
  z-index: 9010 !important;
  display: none !important;
  width: min(100%, 1080px) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: max(16px, env(safe-area-inset-top)) 72px 0 clamp(18px, 3vw, 42px) !important;
  color: #ffffff !important;
}

#sake-time-view.active .sake-time-view-head h2 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  line-height: 1.2 !important;
}

#sake-time-view.active .sake-time-view-head p {
  margin: 5px 0 0 !important;
  color: rgba(255, 255, 255, .72) !important;
  font-size: 13px !important;
}

#sake-time-view.active .sake-time-inline-viewer {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  align-items: center !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
}

#sake-time-view.active #sake-time-archive-list {
  display: none !important;
}

#sake-time-view.active .sake-time-inline-stage {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

#sake-time-view.active .sake-time-inline-card {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: var(--z) !important;
  width: min(29vw, 440px, calc(84dvh * 9 / 16)) !important;
  max-height: 84dvh !important;
  aspect-ratio: 9 / 16 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: var(--opacity) !important;
  transform:
    translate(calc(-50% + var(--offset-x)), -50%)
    scale(var(--scale)) !important;
  transition:
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms ease,
    filter 420ms ease !important;
  filter: brightness(var(--brightness)) saturate(var(--saturate)) !important;
  will-change: transform, opacity, filter !important;
}

#sake-time-view.active .sake-time-inline-card.active {
  z-index: 5 !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  filter: none !important;
}

#sake-time-view.active .sake-time-inline-card.active.focus-entering {
  opacity: .74 !important;
  filter: brightness(.78) saturate(.9) blur(1px) !important;
  transform:
    translate(
      calc(-50% + var(--sake-time-arrive-x, 0px)),
      calc(-50% + var(--sake-time-arrive-y, 0px))
    )
    scale(var(--sake-time-arrive-scale, .82)) !important;
  transition: none !important;
  transform-origin: center center !important;
}

#sake-time-view.active .sake-time-inline-card.active.focus-entering.focus-arriving {
  opacity: 1 !important;
  filter: none !important;
  transform: translate(-50%, -50%) scale(1) !important;
  transition:
    transform 680ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 520ms ease,
    filter 520ms ease !important;
}

#sake-time-view.active .sake-time-inline-card.active.focus-entering .sake-time-inline-art {
  box-shadow: 0 10px 28px rgba(0, 0, 0, .26) !important;
  transition: box-shadow 680ms ease !important;
}

#sake-time-view.active .sake-time-inline-card.active.focus-entering.focus-arriving .sake-time-inline-art {
  box-shadow:
    0 0 42px rgba(244, 223, 106, .18),
    0 22px 68px rgba(0, 0, 0, .38) !important;
}

#sake-time-view.active .sake-time-inline-art {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000000 !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .34) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

#sake-time-view.active .sake-time-inline-art img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#sake-time-view.active .sake-time-inline-author {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: calc(100% - 24px) !important;
  padding: 4px 10px 4px 4px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .24) !important;
  color: #ffffff !important;
  backdrop-filter: blur(12px) !important;
  pointer-events: auto !important;
}

#sake-time-view.active .sake-time-inline-author .sake-time-author-avatar,
#sake-time-view.active .sake-time-inline-author .sake-time-author-avatar img {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .18) !important;
  padding: 0 !important;
}

#sake-time-view.active .sake-time-inline-author .sake-time-author-avatar img {
  display: block !important;
  object-fit: cover !important;
}

#sake-time-view.active .sake-time-inline-author strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 560 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#sake-time-view.active .sake-time-inline-author span {
  color: rgba(255, 255, 255, .68) !important;
  font-size: 11px !important;
  font-weight: 420 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

#sake-time-view.active .sake-time-inline-reactions {
  position: absolute !important;
  left: 50% !important;
  bottom: 14px !important;
  display: inline-flex !important;
  transform: translateX(-50%) !important;
}

#sake-time-view.active .sake-time-inline-reactions button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .36) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 560 !important;
  backdrop-filter: blur(12px) !important;
}

#sake-time-view.active .sake-time-inline-reactions img {
  width: 24px !important;
  height: 24px !important;
  filter: brightness(0) invert(1) !important;
}

#sake-time-view.active .sake-time-inline-reactions .like-action.active {
  color: #ff86a1 !important;
}

#sake-time-view.active .sake-time-inline-delete {
  position: absolute !important;
  right: 12px !important;
  bottom: 14px !important;
  z-index: 8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 52px !important;
  min-height: 42px !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .36) !important;
  color: #ffd9df !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  line-height: 1 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .20) !important;
  backdrop-filter: blur(12px) !important;
  pointer-events: auto !important;
}

.sake-time-arrow {
  position: fixed !important;
  top: 50% !important;
  z-index: 9020 !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .18) !important;
  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 320 !important;
  line-height: 1 !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(12px) !important;
  transform: translateY(-50%) !important;
}

.sake-time-arrow.prev {
  left: 24px !important;
}

.sake-time-arrow.next {
  right: 24px !important;
}

@media (max-width: 980px) {
  body.sake-time-open .mobile-nav,
  body.sake-time-open .mobile-compose-fab,
  body.sake-time-open .top-bar {
    display: none !important;
  }

  #sake-time-view.active {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  #sake-time-view.active .sake-time-view-head {
    display: none !important;
    padding: max(12px, env(safe-area-inset-top)) 64px 0 max(14px, env(safe-area-inset-left)) !important;
  }

  #sake-time-view.active .sake-time-view-head h2 {
    font-size: 18px !important;
  }

  #sake-time-view.active .sake-time-view-head p {
    display: none !important;
  }

  #sake-time-view.active .sake-time-inline-viewer {
    padding: 0 0 max(8px, env(safe-area-inset-bottom)) !important;
  }

  #sake-time-view.active .sake-time-inline-stage {
    perspective: 1100px !important;
    touch-action: none !important;
    pointer-events: auto !important;
  }

  #sake-time-view.active.is-dismiss-swiping {
    opacity: var(--sake-time-dismiss-opacity, 1) !important;
    transform:
      translateY(var(--sake-time-dismiss-y, 0px))
      rotateX(var(--sake-time-dismiss-angle, 0deg))
      scale(var(--sake-time-dismiss-scale, 1)) !important;
    transform-origin: top center !important;
    will-change: transform, opacity !important;
  }

  #sake-time-view.active .sake-time-inline-card {
    width: min(96vw, calc((94dvh - 54px) * 9 / 16)) !important;
    max-height: calc(94dvh - 54px) !important;
    opacity: .82 !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
  }

  #sake-time-view.active .sake-time-inline-card.active {
    width: min(96vw, calc((94dvh - 54px) * 9 / 16)) !important;
    max-height: calc(94dvh - 54px) !important;
  }

  #sake-time-view.active .sake-time-inline-card[data-offset="0"] {
    opacity: 1 !important;
    transform:
      translate(-50%, -50%)
      rotateY(var(--sake-time-drag-angle, 0deg))
      scale(1) !important;
    transform-origin: center center !important;
    filter: none !important;
  }

  #sake-time-view.active .sake-time-inline-card[data-offset="-1"] {
    transform:
      translate(calc(-50% - 100vw + var(--sake-time-drag-x, 0vw)), -50%)
      rotateY(calc(-72deg + var(--sake-time-drag-angle, 0deg)))
      scale(.98) !important;
    transform-origin: right center !important;
  }

  #sake-time-view.active .sake-time-inline-card[data-offset="1"] {
    transform:
      translate(calc(-50% + 100vw + var(--sake-time-drag-x, 0vw)), -50%)
      rotateY(calc(72deg + var(--sake-time-drag-angle, 0deg)))
      scale(.98) !important;
    transform-origin: left center !important;
  }

  #sake-time-view.active .sake-time-inline-card.active.focus-entering {
    opacity: .74 !important;
    filter: brightness(.78) saturate(.9) blur(1px) !important;
    transform:
      translate(
        calc(-50% + var(--sake-time-arrive-x, 0px)),
        calc(-50% + var(--sake-time-arrive-y, 0px))
      )
      scale(var(--sake-time-arrive-scale, .82)) !important;
    transition: none !important;
    transform-origin: center center !important;
  }

  #sake-time-view.active .sake-time-inline-card.active.focus-entering.focus-arriving {
    opacity: 1 !important;
    filter: none !important;
    transform: translate(-50%, -50%) scale(1) !important;
    transition:
      transform 680ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 520ms ease,
      filter 520ms ease !important;
    transform-origin: center center !important;
  }

  #sake-time-view.active .sake-time-inline-stage.is-swiping .sake-time-inline-card {
    transition: none !important;
  }

  #sake-time-view.active .sake-time-inline-stage.is-closing-swipe .sake-time-inline-card:not([data-offset="0"]) {
    opacity: 0 !important;
  }

  #sake-time-view.active .sake-time-inline-stage.is-dismissing .sake-time-inline-card {
    transition:
      transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 180ms ease,
      filter 180ms ease !important;
  }

  #sake-time-view.active.is-dismissing {
    transition:
      transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 180ms ease !important;
  }

  #sake-time-view.active .sake-time-inline-art {
    border-radius: 0 !important;
  }

  #sake-time-view.active .sake-time-inline-delete {
    right: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }

  .sake-time-arrow {
    display: none !important;
  }

  .sake-time-close-button {
    width: 42px !important;
    height: 42px !important;
    font-size: 27px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sake-time-view.active .sake-time-inline-card {
    transition: none !important;
    animation: none !important;
  }
}


/* ==================================================
   Sake Time Firefly Mode trial view
================================================== */
body.sake-firefly-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

#sake-firefly-view.active {
  position: fixed !important;
  inset: 0 !important;
  z-index: 8900 !important;
  display: block !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 21% 18%, rgba(255, 236, 112, .16), transparent 20%),
    radial-gradient(circle at 78% 64%, rgba(255, 221, 87, .12), transparent 22%),
    radial-gradient(circle at 54% 48%, rgba(244, 223, 106, .09), transparent 26%),
    radial-gradient(circle at 50% 120%, rgba(244, 223, 106, .11), transparent 34%),
    #050604 !important;
  color: #fff !important;
  pointer-events: auto !important;
}

.sake-firefly-close-button {
  position: fixed !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  z-index: 8930 !important;
  display: none !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .38) !important;
  color: #ffffff !important;
  font-size: 28px !important;
  font-weight: 360 !important;
  line-height: 1 !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(14px) !important;
}

#sake-firefly-view.active .sake-firefly-close-button {
  display: grid !important;
}

.sake-firefly-head {
  position: fixed !important;
  top: max(18px, env(safe-area-inset-top)) !important;
  left: max(18px, env(safe-area-inset-left)) !important;
  right: calc(max(18px, env(safe-area-inset-right)) + 56px) !important;
  z-index: 8920 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  pointer-events: none !important;
}

.sake-firefly-head > * {
  pointer-events: auto !important;
}

.sake-firefly-head h2,
.sake-firefly-head p,
.sake-firefly-head .mini-label {
  color: inherit;
}

.sake-firefly-head p:not(.mini-label) {
  color: rgba(255, 255, 255, .68);
}

.sake-firefly-field {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 18% 74%, rgba(255, 236, 112, .09), transparent 22%),
    radial-gradient(circle at 70% 34%, rgba(255, 236, 112, .08), transparent 28%),
    radial-gradient(circle at 52% 48%, rgba(255, 234, 120, .08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)) !important;
  box-shadow: none !important;
  isolation: isolate !important;
}

.sake-firefly-field::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle, rgba(255,255,255,.08) 0 1px, transparent 1.8px) 0 0 / 38px 38px,
    linear-gradient(102deg, transparent 4%, rgba(255, 232, 104, .055) 18%, transparent 34%, rgba(255, 217, 80, .045) 58%, transparent 76%);
  opacity: .22;
  content: "";
  animation: sakeFireflyRiver 18s ease-in-out infinite alternate;
}

.sake-firefly-card {
  position: absolute;
  left: var(--firefly-x);
  top: var(--firefly-y);
  z-index: var(--firefly-z);
  display: block;
  width: clamp(132px, 16vw, 260px);
  aspect-ratio: 4 / 5.25;
  overflow: hidden;
  border: 1px solid rgba(255, 246, 202, calc(.16 + var(--firefly-glow) * .28));
  border-radius: 0;
  background: #111;
  opacity: var(--firefly-opacity);
  box-shadow:
    0 0 calc(8px + 48px * var(--firefly-glow)) rgba(255, 230, 101, calc(.08 + var(--firefly-glow) * .36)),
    0 28px 70px rgba(0, 0, 0, .38);
  filter: brightness(var(--firefly-brightness)) blur(var(--firefly-blur));
  transform:
    translate(
      calc(-50% + var(--firefly-age-x, 0px)),
      calc(-50% + var(--firefly-age-y, 0px))
    )
    rotate(var(--firefly-rotate))
    scale(var(--firefly-scale));
  transform-origin: center;
  animation: sakeFireflyFloat 8.8s ease-in-out infinite both;
  animation-delay: var(--firefly-delay);
  cursor: pointer;
  will-change: transform, opacity, filter;
}

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

.sake-firefly-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, .58));
  content: "";
  pointer-events: none;
}

.sake-firefly-person {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

.sake-firefly-person .post-avatar,
.sake-firefly-person img {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
}

.sake-firefly-person strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sake-firefly-time {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.34);
  color: rgba(255,255,255,.76);
  font-size: 11px;
  backdrop-filter: blur(10px);
}

.sake-firefly-sparks span {
  position: absolute;
  left: var(--spark-x);
  top: var(--spark-y);
  z-index: 1;
  width: var(--spark-size, 7px);
  height: var(--spark-size, 7px);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 255, 230, .98) 0 18%, rgba(255, 241, 118, .92) 30%, rgba(255, 219, 72, .10) 72%, transparent 100%);
  box-shadow:
    0 0 var(--spark-blur, 18px) calc(var(--spark-size, 7px) * .62) rgba(255, 226, 75, calc(var(--spark-alpha, .56) * .72)),
    0 0 calc(var(--spark-blur, 18px) * 1.9) calc(var(--spark-size, 7px) * 1.2) rgba(255, 241, 118, calc(var(--spark-alpha, .56) * .28));
  opacity: var(--spark-alpha, .56);
  transform: translate3d(0, 0, 0) scale(.72);
  animation: sakeFireflySpark var(--spark-duration, 4.8s) ease-in-out infinite both;
  animation-delay: var(--spark-delay);
  will-change: transform, opacity, filter;
}

.sake-firefly-sparks span.depth-0 {
  filter: blur(.2px);
}

.sake-firefly-sparks span.depth-1 {
  filter: blur(.8px);
  opacity: calc(var(--spark-alpha, .56) * .74);
}

.sake-firefly-sparks span.depth-2 {
  filter: blur(1.5px);
  opacity: calc(var(--spark-alpha, .56) * .52);
}

.sake-firefly-empty {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  color: rgba(255,255,255,.78);
  text-align: center;
}

.sake-firefly-empty img {
  width: 92px;
  filter: drop-shadow(0 0 24px rgba(255, 236, 120, .28));
}

.evening-compose-modal.firefly-compose .evening-compose-panel {
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 236, 128, .13), transparent 24%),
    #090a08;
  color: #fff;
}

.evening-compose-modal.firefly-compose .evening-compose-header h2 {
  color: #fff;
}

.evening-compose-modal.firefly-compose .evening-compose-stage {
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 237, 121, .08), transparent 36%),
    #050604;
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 202, .10),
    0 24px 90px rgba(0, 0, 0, .42);
}

.evening-compose-stage.drag-over {
  outline: 3px solid rgba(244, 223, 106, .72) !important;
  outline-offset: -12px !important;
}

.evening-compose-stage.drag-over::before {
  position: absolute !important;
  inset: 18px !important;
  z-index: 18 !important;
  width: auto !important;
  height: auto !important;
  border: 1px dashed rgba(255, 246, 202, .72) !important;
  border-radius: 18px !important;
  background: rgba(255, 238, 136, .10) !important;
  box-shadow: inset 0 0 44px rgba(255, 236, 128, .14) !important;
  content: "" !important;
  transform: none !important;
  pointer-events: none;
}

.evening-compose-modal.firefly-compose .evening-photo-empty {
  color: rgba(255, 255, 255, .72);
  text-align: center;
}

.evening-compose-modal.firefly-compose .evening-photo-empty::before {
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: rgba(255, 236, 128, .86);
  box-shadow: 0 0 28px 8px rgba(255, 236, 128, .38);
  content: "";
}

.evening-compose-modal.firefly-compose .evening-stage-rail button:not([data-evening-photo-pick]),
.evening-compose-modal.firefly-compose .evening-mobile-tool-sheet button:not([data-evening-photo-pick]):not([data-evening-publish]),
.evening-compose-modal.firefly-compose .evening-text-editor,
.evening-compose-modal.firefly-compose .evening-sticker-row,
.evening-compose-modal.firefly-compose .evening-sticker-picker,
.evening-compose-modal.firefly-compose .evening-mention-suggestions {
  display: none !important;
}

.evening-compose-modal.firefly-compose .evening-stage-rail {
  justify-content: center;
}

.evening-compose-modal.firefly-compose .evening-compose-actions .primary-button {
  background: #f4df6a;
  color: #121006;
}

@keyframes sakeFireflyFloat {
  0%, 100% {
    margin-top: 0;
    margin-left: 0;
  }
  42% {
    margin-top: -12px;
    margin-left: calc(var(--firefly-breath-x, 5px) * .7);
  }
  72% {
    margin-top: -4px;
    margin-left: calc(var(--firefly-breath-x, 5px) * -0.34);
  }
}

@keyframes sakeFireflySpark {
  0%, 100% {
    opacity: calc(var(--spark-alpha, .56) * .34);
    transform: translate3d(0, 0, 0) scale(.62);
  }
  38% {
    opacity: var(--spark-alpha, .56);
    transform: translate3d(calc(var(--spark-drift, 0px) * .45), -10px, 0) scale(1.18);
  }
  68% {
    opacity: calc(var(--spark-alpha, .56) * .72);
    transform: translate3d(var(--spark-drift, 0px), -4px, 0) scale(.86);
  }
}

@keyframes sakeFireflyRiver {
  0% {
    transform: translate3d(-18px, 0, 0);
    opacity: .16;
  }
  100% {
    transform: translate3d(22px, -8px, 0);
    opacity: .28;
  }
}

@media (max-width: 980px) {
  body.sake-firefly-open .mobile-nav,
  body.sake-firefly-open .mobile-compose-fab,
  body.sake-firefly-open .top-bar {
    display: none !important;
  }

  #sake-firefly-view.active {
    min-height: 100dvh !important;
    padding: 0 !important;
    touch-action: none !important;
  }

  .sake-firefly-head {
    top: max(14px, env(safe-area-inset-top)) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: calc(max(12px, env(safe-area-inset-right)) + 50px) !important;
    display: grid !important;
    gap: 12px !important;
  }

  .sake-firefly-field {
    min-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .sake-firefly-card {
    width: clamp(112px, 38vw, 190px);
    border-radius: 0;
  }

  .sake-firefly-person strong {
    font-size: 13px;
  }

  .mobile-nav button {
    min-width: 0;
  }

  .mobile-nav button span {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sake-firefly-card,
  .sake-firefly-sparks span {
    animation: none;
  }
}

/* 2026-07-22: shared press feedback for buttons and icon controls. */
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
a.button-like {
  -webkit-tap-highlight-color: transparent;
  transition: transform 150ms ease, filter 150ms ease, opacity 150ms ease;
}

button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active,
a.button-like:active {
  transform: scale(.965);
  filter: brightness(.94) saturate(1.04);
  opacity: .9;
}

@media (prefers-reduced-motion: reduce) {
  button:not(:disabled),
  [role="button"]:not([aria-disabled="true"]),
  a.button-like {
    transition: none !important;
  }
}

.admin-reports-panel { margin-top: 20px; }
.admin-reports-list { display: grid; gap: 10px; }
.admin-reports-empty { margin: 0; padding: 18px; color: var(--muted); text-align: center; }
.admin-report-card { padding: 14px; border: 1px solid rgba(20, 43, 77, .12); border-radius: 14px; background: rgba(255, 255, 255, .78); }
.admin-report-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-report-head strong { color: var(--accent-dark); }
.admin-report-head time { color: var(--muted); font-size: 12px; }
.admin-report-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; }
.admin-report-card dt { color: var(--muted); font-size: 11px; }
.admin-report-card dd { margin: 2px 0 0; overflow-wrap: anywhere; font-size: 12px; }
.admin-report-card p { margin: 10px 0 0; font-size: 13px; }
.admin-report-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.admin-report-actions .secondary-button { min-height: 38px; padding: 8px 12px; font-size: 12px; }
.admin-report-dismiss { color: #7b2b2b; border-color: rgba(123, 43, 43, .22); }
.admin-report-card dd .secondary-button { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 9px; font-size: 11px; white-space: nowrap; }

.report-compose-modal { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; padding: 20px; }
.report-compose-modal.active { display: grid; }
.report-compose-backdrop { position: absolute; inset: 0; background: rgba(12, 20, 34, .46); backdrop-filter: blur(5px); }
.report-compose-panel { position: relative; width: min(100%, 440px); max-height: min(680px, calc(100dvh - 40px)); overflow: auto; padding: 20px; border: 1px solid rgba(20, 43, 77, .12); border-radius: 20px; background: #fff; box-shadow: 0 24px 70px rgba(12, 20, 34, .25); transform-origin: var(--modal-origin-x, center) var(--modal-origin-y, center); }
.report-compose-modal.opening .report-compose-panel { animation: report-compose-in .32s cubic-bezier(.2, .8, .2, 1) both; }
.report-compose-panel.is-closing { animation: report-compose-out .19s ease both; }
.report-compose-panel header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.report-compose-panel h2 { margin: 0; color: var(--ink); font-size: 20px; }
.report-compose-panel header button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 999px; background: rgba(20, 43, 77, .06); color: var(--ink); font-size: 22px; cursor: pointer; }
.report-compose-panel form { display: grid; gap: 14px; }
.report-confirmation { display: grid; gap: 14px; }
.report-confirmation h3 { margin: 0; color: var(--ink); font-size: 16px; }
.report-confirmation dl { display: grid; gap: 10px; margin: 0; }
.report-confirmation dl > div { padding: 11px 12px; border-radius: 12px; background: rgba(20, 43, 77, .05); }
.report-confirmation dt { color: var(--muted); font-size: 11px; }
.report-confirmation dd { margin: 4px 0 0; color: var(--ink); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.report-compose-target { margin: 0; color: var(--muted); font-size: 13px; }
.report-compose-panel label { display: grid; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 700; }
.report-compose-panel select, .report-compose-panel textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(20, 43, 77, .16); border-radius: 12px; padding: 11px 12px; background: #fff; color: var(--ink); font: inherit; font-weight: 500; }
.report-compose-panel textarea { resize: vertical; min-height: 96px; }
.report-compose-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.report-compose-actions { display: flex; justify-content: flex-end; gap: 8px; }
.report-compose-actions button { min-height: 42px; }
.account-safety-panel { margin-top: 16px; padding: 16px; border: 1px solid rgba(20, 43, 77, .12); border-radius: 14px; background: rgba(255, 255, 255, .78); }
.account-safety-panel h3 { margin: 0 0 6px; color: var(--ink); font-size: 16px; }
.account-safety-panel > p { margin: 0; font-size: 13px; }
.account-safety-lists { display: grid; gap: 12px; margin-top: 14px; }
.account-safety-lists section { padding-top: 12px; border-top: 1px solid rgba(20, 43, 77, .08); }
.account-safety-lists h4 { margin: 0 0 8px; color: var(--ink); font-size: 13px; }
.account-safety-lists p { margin: 0; font-size: 12px; }
.account-safety-lists ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.account-safety-lists li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.account-safety-lists li span { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-safety-lists .secondary-button { min-height: 34px; padding: 6px 10px; font-size: 12px; }
@keyframes report-compose-in { from { opacity: 0; transform: translate(var(--modal-shift-x, 0), var(--modal-shift-y, 10px)) scale(.96); } to { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes report-compose-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (max-width: 600px) { .report-compose-modal { align-items: end; padding: 10px; } .report-compose-panel { width: 100%; max-height: min(720px, calc(100dvh - 20px)); border-radius: 20px 20px 14px 14px; padding: 18px; } }


/* 2026-07-16: Balanced sake information controls and familiar star rating. */
#post-view .db-details .form-grid {
  align-items: start !important;
}

#post-view .db-details .form-grid > label,
#post-view .db-details .sake-name-field,
#post-view .db-details .sake-style-field {
  min-width: 0;
  align-self: start !important;
}

#post-view .db-details .form-grid > label:not(.want-again-line),
#post-view .db-details .sake-name-field > label,
#post-view .db-details .sake-style-field > label {
  align-content: start;
}

#post-view .db-details .sake-name-field {
  grid-column: 1 / -1;
}

#post-view .db-details .want-again-line {
  grid-column: 1 / -1;
  display: inline-flex !important;
  width: auto !important;
  min-height: 38px !important;
  margin: 0;
  padding: 7px 11px;
  justify-self: start;
  align-self: start !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(20, 43, 77, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: var(--ink);
  cursor: pointer;
}

#post-view .db-details .want-again-line input {
  width: 18px !important;
  height: 18px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 18px;
  accent-color: var(--accent);
}

#post-view .db-details .want-again-line span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

#post-view .rating-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-height: 42px;
}

#post-view .rating-row > span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.star-rating {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.star-rating button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.star-rating button span {
  color: transparent;
  background: linear-gradient(90deg, #f4b400 var(--star-fill, 0%), #d7dce3 var(--star-fill, 0%));
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 29px;
  line-height: 1;
  transition: transform .15s ease, background .15s ease;
}

.star-rating button:hover span,
.star-rating button:focus-visible span {
  transform: scale(1.12);
}

.star-rating button:focus-visible {
  outline: 2px solid rgba(244, 180, 0, .38);
  outline-offset: 1px;
}

#post-view .rating-row #rating-value {
  min-width: 30px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  #post-view .rating-row {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
  }

  .star-rating {
    justify-self: start;
  }

  .star-rating button {
    width: 32px;
  }
}

/* 2026-07-20: standalone sake-information editor. */
.sake-info-edit-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: none;
  place-items: center;
  padding: 20px;
}

.sake-info-edit-modal.active {
  display: grid;
}

.sake-info-edit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 20, 34, .48);
  backdrop-filter: blur(5px);
}

.sake-info-edit-panel {
  position: relative;
  width: min(100%, 720px);
  max-height: min(800px, calc(100dvh - 40px));
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(20, 43, 77, .12);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 72px rgba(12, 20, 34, .28);
  transform-origin: var(--modal-origin-x, center) var(--modal-origin-y, center);
}

.sake-info-edit-modal.opening .sake-info-edit-panel {
  animation: report-compose-in .32s cubic-bezier(.2, .8, .2, 1) both;
}

.sake-info-edit-panel.is-closing {
  animation: report-compose-out .19s ease both;
}

.sake-info-edit-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.sake-info-edit-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.sake-info-edit-panel h2 {
  margin: 0;
  color: var(--ink);
  font-size: 21px;
}

.sake-info-edit-panel > header > button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 43, 77, .06);
  color: var(--ink);
  font-size: 23px;
  cursor: pointer;
}

.sake-info-edit-panel form {
  display: grid;
  gap: 18px;
}

.sake-info-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.sake-info-edit-grid label {
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.sake-info-edit-name-field,
.sake-info-edit-url {
  grid-column: 1 / -1;
}

.sake-info-edit-grid input,
.sake-info-edit-grid select {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid rgba(20, 43, 77, .16);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
}

.sake-info-edit-grid input:focus,
.sake-info-edit-grid select:focus {
  outline: 2px solid rgba(31, 87, 142, .18);
  border-color: rgba(31, 87, 142, .52);
}

.sake-info-edit-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

.sake-info-edit-suggestions {
  position: absolute;
  top: 71px;
  right: 0;
  left: 0;
  z-index: 4;
  max-height: 280px;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(20, 43, 77, .14);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(12, 20, 34, .18);
}

.sake-info-edit-suggestions[hidden] {
  display: none;
}

.sake-info-edit-suggestions button {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.sake-info-edit-suggestions button:hover,
.sake-info-edit-suggestions button:focus-visible {
  background: rgba(31, 87, 142, .08);
  outline: none;
}

.sake-info-edit-suggestions button span,
.sake-info-edit-suggestions .sake-suggestions-empty {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.sake-info-edit-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.sake-info-edit-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.sake-info-edit-stars button {
  width: 34px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #d7dce3;
  font-size: 29px;
  line-height: 1;
  cursor: pointer;
}

.sake-info-edit-stars button.active {
  color: #f4b400;
}

.sake-info-edit-stars button:hover,
.sake-info-edit-stars button:focus-visible {
  transform: scale(1.1);
  outline: 2px solid rgba(244, 180, 0, .28);
}

.sake-info-edit-rating-row > strong {
  min-width: 30px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.sake-info-edit-status {
  min-height: 18px;
  margin: -7px 0 0;
  color: #a43a3a;
  font-size: 12px;
}

.sake-info-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.sake-info-edit-actions button {
  min-height: 44px;
}

@media (max-width: 640px) {
  .sake-info-edit-modal {
    align-items: end;
    padding: 10px;
  }

  .sake-info-edit-panel {
    width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 18px;
    border-radius: 20px 20px 14px 14px;
  }

  .sake-info-edit-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sake-info-edit-name-field,
  .sake-info-edit-url {
    grid-column: auto;
  }

  .sake-info-edit-actions button {
    flex: 1 1 0;
  }
}

/* 2026-07-20: resolution-aware lightbox zoom. */
.image-lightbox-toolbar output {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.image-lightbox-toolbar button:disabled {
  cursor: default !important;
  opacity: .34;
}

.image-lightbox-stage {
  display: block !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-x pan-y !important;
}

.image-lightbox-canvas {
  display: grid;
  place-items: center;
  width: max(100%, var(--lightbox-canvas-width, 100%));
  min-width: 100%;
  height: max(100%, var(--lightbox-canvas-height, 100%));
  min-height: 100%;
}

.image-lightbox-stage #lightbox-image {
  display: block !important;
  width: var(--lightbox-render-width, auto) !important;
  height: var(--lightbox-render-height, auto) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  image-rendering: auto !important;
  transform: none !important;
  transition: width .16s ease, height .16s ease !important;
  cursor: default;
  user-select: none;
  -webkit-user-drag: none;
}

.image-lightbox-stage #lightbox-image.can-zoom-in {
  cursor: zoom-in;
}

.image-lightbox-stage #lightbox-image.can-zoom-out {
  cursor: zoom-out;
}

@media (max-width: 640px) {
  .image-lightbox-toolbar output {
    min-width: 72px;
    padding-inline: 8px;
    background: rgba(0, 0, 0, .36);
    backdrop-filter: blur(12px);
  }
}

@keyframes postDetailDismissDown {
  to {
    opacity: 0;
    transform: translateY(18vh) scale(.98);
  }
}

@media (max-width: 640px) {
  .post-detail-modal.swipe-dismiss .post-detail-panel.is-closing {
    animation: postDetailDismissDown .2s ease-in both !important;
  }

  /* Installed PWA: keep the close target out of the rounded display edge. */
  .post-detail-modal:not(.banshaku-detail) .post-detail-close {
    position: fixed !important;
    top: max(12px, calc(env(safe-area-inset-top) + 8px)) !important;
    right: max(12px, calc(env(safe-area-inset-right) + 8px)) !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 2147482000 !important;
    touch-action: manipulation !important;
  }

  body.post-detail-open {
    position: fixed !important;
    top: var(--post-detail-lock-top, 0) !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior-y: none !important;
  }

  .post-detail-modal,
  .post-detail-panel {
    overscroll-behavior: contain !important;
  }

  .post-detail-swipe-handle {
    position: fixed !important;
    top: max(5px, env(safe-area-inset-top)) !important;
    left: 50% !important;
    z-index: 12 !important;
    display: grid !important;
    place-items: center !important;
    width: 76px !important;
    height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    transform: translateX(-50%) !important;
    touch-action: none !important;
  }

  .post-detail-swipe-handle::before {
    width: 42px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: rgba(20, 43, 77, .30) !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .10) !important;
    content: "" !important;
  }

  .post-detail-modal:not(.banshaku-detail) .post-detail-photo-shell {
    touch-action: none !important;
  }

  .post-detail-modal.swipe-dragging .post-detail-panel {
    transform: translateY(var(--detail-dismiss-y, 0)) scale(.995) !important;
    transition: none !important;
    will-change: transform !important;
  }
}

/* ==================================================
   Sake Time editor controls — compact, non-overlapping layout
   Keep after previous canvas editor rules.
================================================== */
.evening-compose-modal.active .evening-compose-actions {
  position: fixed !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  right: 16px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 2147483040 !important;
  display: flex !important;
  padding: 0 !important;
}

.evening-compose-modal.active .evening-compose-actions .secondary-button {
  display: none !important;
}

.evening-compose-modal.active .evening-compose-actions .primary-button {
  display: grid !important;
  place-items: center !important;
  width: auto !important;
  min-width: 64px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(255, 255, 255, .54) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #161719 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(16px) !important;
}

.evening-compose-modal.active .evening-compose-actions .primary-button::before {
  content: none !important;
}

.evening-compose-modal.active .evening-mobile-tool-sheet,
.evening-compose-modal.active .evening-mobile-tool-sheet.hidden-field {
  position: fixed !important;
  top: 50% !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 2147483035 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  width: 50px !important;
  min-width: 50px !important;
  padding: 5px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 25px !important;
  background: rgba(13, 14, 17, .64) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28) !important;
  transform: translateY(-50%) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
}

.evening-compose-modal.active .evening-mobile-tool-sheet button {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .055) !important;
}

.evening-compose-modal.active .evening-mobile-tool-sheet button[data-evening-publish] {
  display: none !important;
}

.evening-compose-modal.active .evening-mobile-tool-sheet .evening-tool-icon,
.evening-compose-modal.active .evening-mobile-tool-sheet .evening-tool-icon img {
  width: 32px !important;
  height: 32px !important;
}

.evening-compose-modal.active .evening-mobile-tool-sheet strong,
.evening-compose-modal.active .evening-mobile-tool-sheet small {
  display: none !important;
}

.evening-compose-modal.active .evening-stage-rail,
.evening-compose-modal.active .evening-mobile-tool-button {
  display: none !important;
}

.evening-editor-actions {
  display: grid !important;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
  gap: 8px !important;
}

.evening-compose-modal.active .evening-editor-actions #evening-text-delete {
  border-color: rgba(255, 109, 109, .28) !important;
  background: rgba(255, 92, 92, .10) !important;
  color: #ffb5b5 !important;
}

.evening-compose-modal.active .evening-editor-actions #evening-text-done {
  background: rgba(255, 255, 255, .94) !important;
  color: #17181a !important;
  font-weight: 760 !important;
}

@media (min-width: 981px) {
  .evening-compose-modal.active .evening-preview-area {
    padding: 24px 460px 24px 84px !important;
  }

  .evening-compose-modal.active .evening-mobile-tool-sheet,
  .evening-compose-modal.active .evening-mobile-tool-sheet.hidden-field {
    top: var(--evening-tool-top, 50%) !important;
    right: auto !important;
    left: var(--evening-tool-left, max(18px, calc(50% - 468px))) !important;
  }

  .evening-compose-modal.active .evening-text-editor {
    top: 50% !important;
    right: 20px !important;
    bottom: auto !important;
    left: auto !important;
    grid-template-columns: minmax(180px, .92fr) minmax(210px, 1.08fr) !important;
    gap: 10px !important;
    width: min(420px, calc(100vw - 36px)) !important;
    max-width: min(420px, calc(100vw - 36px)) !important;
    max-height: calc(100dvh - 90px) !important;
    padding: 11px !important;
    border-radius: 22px !important;
    transform: translateY(-50%) !important;
  }

  .evening-compose-modal.active .evening-text-editor.hidden-field {
    display: none !important;
  }

  .evening-compose-modal.active .evening-editor-actions {
    grid-column: 1 / -1 !important;
  }

  .evening-compose-modal.active .evening-editor-actions button {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 13px !important;
  }
}

@media (max-width: 980px) {
  .evening-compose-modal.active .evening-mobile-tool-sheet,
  .evening-compose-modal.active .evening-mobile-tool-sheet.hidden-field {
    top: 50% !important;
    right: max(7px, env(safe-area-inset-right)) !important;
  }

  .evening-compose-modal.active .evening-text-editor {
    position: fixed !important;
    top: auto !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    left: 8px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(44dvh, 330px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 12px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 20px !important;
    background: rgba(17, 18, 21, .93) !important;
    box-shadow: 0 -12px 42px rgba(0, 0, 0, .34) !important;
    transform: none !important;
    backdrop-filter: blur(22px) saturate(1.12) !important;
    touch-action: pan-y !important;
  }

  .evening-compose-modal.active .evening-text-editor.hidden-field {
    display: none !important;
  }

  .evening-compose-modal.active .evening-text-editor-grip {
    display: block !important;
    grid-row: auto !important;
    justify-self: center !important;
    width: 38px !important;
    height: 4px !important;
    margin: -2px 0 2px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .28) !important;
    transform: none !important;
    touch-action: auto !important;
    order: -2 !important;
  }

  .evening-compose-modal.active .evening-editor-section,
  .evening-compose-modal.active .evening-inline-section {
    display: grid !important;
    gap: 7px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .evening-compose-modal.active .type-section {
    grid-template-columns: 92px minmax(0, 1fr) !important;
  }

  .evening-compose-modal.active .type-section > #evening-text-font {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 92px !important;
    height: 40px !important;
    padding: 0 9px !important;
    border-radius: 12px !important;
  }

  .evening-compose-modal.active .type-section > .evening-editor-control-row {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(38px, 1fr)) !important;
    gap: 6px !important;
  }

  .evening-compose-modal.active .align-section {
    grid-column: 1 / -1 !important;
  }

  .evening-compose-modal.active .align-section .evening-editor-control-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  .evening-compose-modal.active .evening-text-editor select,
  .evening-compose-modal.active .evening-text-editor button {
    width: 100% !important;
    height: 40px !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
  }

  .evening-compose-modal.active .color-section {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .evening-compose-modal.active .evening-color-popover {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .evening-compose-modal.active .evening-current-color-button {
    width: 42px !important;
  }

  .evening-compose-modal.active .evening-color-palette {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(22px, 1fr)) !important;
    gap: 5px !important;
    padding: 0 !important;
  }

  .evening-compose-modal.active .evening-color-palette button {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: var(--swatch, #fff) !important;
    color: transparent !important;
  }

  .evening-compose-modal.active .backplate-section {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 7px !important;
  }

  .evening-compose-modal.active .evening-backplate-row {
    display: block !important;
  }

  .evening-compose-modal.active .transform-section {
    display: none !important;
  }

  .evening-compose-modal.active .evening-editor-actions {
    grid-column: auto !important;
    order: -1 !important;
  }

  .evening-compose-modal.active:has(.evening-text-editor:not(.hidden-field)) .evening-mobile-tool-sheet {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .evening-compose-modal.active .spacing-section[data-evening-desktop-only] {
    display: none !important;
  }

  .evening-compose-modal.active .evening-compose-actions {
    display: none !important;
  }

  .evening-compose-modal.active .evening-mobile-tool-sheet button[data-evening-publish] {
    display: grid !important;
    background: rgba(255, 255, 255, .92) !important;
    color: #17181a !important;
  }

  .evening-compose-modal.active .evening-mobile-tool-sheet button[data-evening-publish] .evening-tool-publish {
    display: none !important;
  }

  .evening-compose-modal.active .evening-mobile-tool-sheet button[data-evening-publish] strong {
    display: block !important;
    color: #17181a !important;
    font-size: 10px !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
  }
}

/* Keep the notification bell and the administrator menu as separate controls. */
@media (max-width: 980px) {
  .top-bar .mobile-notification-button {
    position: relative !important;
    z-index: 1501 !important;
  }

  .top-bar .mobile-admin-menu:not(.hidden-field) {
    right: max(64px, calc(64px + env(safe-area-inset-right))) !important;
    z-index: 1500 !important;
  }
}

/* PWA bottom navigation: keep the rail compact and leave a consistent gap for
   the primary compose button above the safe-area inset. */
@media (max-width: 980px) {
  .mobile-nav {
    bottom: 0 !important;
    height: calc(54px + env(safe-area-inset-bottom)) !important;
    min-height: calc(54px + env(safe-area-inset-bottom)) !important;
    max-height: calc(54px + env(safe-area-inset-bottom)) !important;
    padding: 4px max(7px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)) !important;
  }

  .mobile-nav button {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
  }

  .mobile-compose-fab {
    bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }
}

/* Profile editing keeps the primary save action visually distinct, while the
   onboarding flow retains its single-column progression. */
body:not(.profile-required) .profile-setup .onboarding-actions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: stretch;
}

body:not(.profile-required) .profile-edit-cancel-button {
  grid-column: 1;
  min-height: 44px;
  border-color: rgba(20, 43, 77, .16) !important;
  background: #f2f4f7 !important;
  color: #40506a !important;
}

body:not(.profile-required) .profile-setup .onboarding-actions .primary-button {
  grid-column: 2;
  min-height: 44px;
  margin-top: 0 !important;
  border-color: #142B4D !important;
  background: #142B4D !important;
  color: #ffffff !important;
}