:root {
  --bg: #edf1f4;
  --paper: #ffffff;
  --panel: #f6f8fa;
  --ink: #1f252c;
  --muted: #6e7884;
  --line: #d9e1e7;
  --warm: #5f7386;
  --leaf: #4b6072;
  --sun: #b7a089;
  --sky: #72869a;
  --soft: #eef3f6;
  --rail: #171c22;
  --shadow: 0 18px 42px rgba(39, 49, 60, 0.10);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050607;
  --paper: #0d0f10;
  --panel: #121517;
  --ink: #f3f5f4;
  --muted: #9aa4aa;
  --line: #252b2f;
  --warm: #28b875;
  --leaf: #6fd0a2;
  --sun: #d79a39;
  --sky: #6d93e6;
  --soft: #111816;
  --rail: #050607;
  --shadow: 0 20px 56px rgba(0, 0, 0, 0.46);
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .workspace,
:root[data-theme="dark"] .app-area {
  background: var(--bg);
}

:root[data-theme="dark"] .window-bar,
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .post-card,
:root[data-theme="dark"] .mini-card,
:root[data-theme="dark"] .compose-card,
:root[data-theme="dark"] .modal-card,
:root[data-theme="dark"] .profile-card,
:root[data-theme="dark"] .profile-panel,
:root[data-theme="dark"] .album-detail,
:root[data-theme="dark"] .album-card,
:root[data-theme="dark"] .notebook-card,
:root[data-theme="dark"] .discover-card,
:root[data-theme="dark"] .account-menu,
:root[data-theme="dark"] .diary-today,
:root[data-theme="dark"] .week-memory,
:root[data-theme="dark"] .diary-paper-editor,
:root[data-theme="dark"] .settings-section {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}

:root[data-theme="dark"] .sidebar {
  background: #030405;
}

:root[data-theme="dark"] .search,
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .ghost-btn,
:root[data-theme="dark"] .segmented button,
:root[data-theme="dark"] .filter-bar button,
:root[data-theme="dark"] .auth-tabs,
:root[data-theme="dark"] .theme-switch {
  background: #0f1213;
  border-color: #2a3235;
  color: var(--ink);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: #717d83;
}

:root[data-theme="dark"] .comment-box,
:root[data-theme="dark"] .share-link-panel,
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .guest-profile-card,
:root[data-theme="dark"] .text-diary-entry,
:root[data-theme="dark"] .image-diary-entry,
:root[data-theme="dark"] .diary-preview-card,
:root[data-theme="dark"] .mobile-bottom-nav {
  background: #101415;
  border-color: #273033;
}

:root[data-theme="dark"] .modal {
  background: rgba(0, 0, 0, 0.72);
}

:root[data-theme="dark"] .primary-btn,
:root[data-theme="dark"] .nav-primary-action,
:root[data-theme="dark"] .mobile-publish .publish-icon {
  color: #04130c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  color: var(--ink);
  background: var(--bg);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

button, input, textarea, select { font: inherit; }
button { border: 0; cursor: pointer; }
img { display: block; }

.phone-shell {
  display: none;
}

.phone-status {
  height: 28px;
  padding: 0 12px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.phone-screen {
  height: calc(100% - 28px);
  overflow: hidden;
  border-radius: 24px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}

.mobile-top, .post-author, .topbar, .brand, .section-head, .hero-actions, .post-actions, .profile-info, .tabs {
  display: flex;
  align-items: center;
}

.mobile-top {
  justify-content: space-between;
  padding: 18px;
}

.mobile-top span, .eyebrow, .post-author span, .mobile-actions, .search span, .brand span, .message-list time {
  color: var(--muted);
  font-size: 13px;
}

.mobile-top strong {
  display: block;
  font-size: 24px;
}

.round-btn, .icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--warm);
  color: #fff;
  font-size: 22px;
}

.story-row {
  display: flex;
  gap: 14px;
  padding: 0 18px 16px;
  overflow: hidden;
}

.story-row article {
  display: grid;
  justify-items: center;
  gap: 6px;
  font-size: 12px;
}

.story-row img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--sun);
}

.mobile-post {
  margin: 0 14px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(80, 60, 42, 0.08);
}

.post-author {
  gap: 10px;
}

.post-author img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 50%;
}

.mobile-post p, .post-card p, .preview-card p {
  line-height: 1.7;
}

.mobile-photo-grid, .photo-grid {
  display: grid;
  gap: 8px;
}

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

.mobile-photo-grid img, .photo-grid img {
  width: 100%;
  height: 118px;
  object-fit: cover;
  border-radius: 8px;
}

.mobile-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.bottom-tabs {
  margin-top: auto;
  padding: 12px 10px 16px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  border-top: 1px solid var(--line);
}

.workspace {
  height: 100vh;
  margin: 0;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  background: var(--bg);
}

.sidebar {
  padding: 18px 10px;
  border-right: 0;
  background: var(--rail);
  display: flex;
  flex-direction: column;
  align-content: start;
  gap: 8px;
  color: #fff;
}

.brand {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 16px;
  text-align: center;
}

.brand-mark {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: transparent;
  color: #fff;
  font-size: 0;
  font-weight: 900;
  overflow: hidden;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
}

.brand strong {
  display: block;
  font-size: 14px;
}

.brand span {
  display: none;
}

.nav-item {
  min-height: 58px;
  padding: 6px;
  border-radius: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.68);
  background: transparent;
  font-size: 12px;
  line-height: 1.25;
}

.nav-item.active, .nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.nav-item.nav-primary-action {
  min-height: 64px;
  margin: 4px 0 8px;
  color: #fff;
  background: var(--warm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 22px rgba(22, 167, 101, 0.24);
  font-weight: 800;
}

.nav-item.nav-primary-action:hover {
  background: #12965b;
  box-shadow: 0 13px 26px rgba(22, 167, 101, 0.32);
  transform: translateY(-1px);
}

.nav-item.nav-primary-action.active {
  color: #fff;
  background: var(--warm);
  box-shadow: 0 0 0 2px var(--rail), 0 0 0 4px rgba(255, 255, 255, 0.78), 0 12px 26px rgba(22, 167, 101, 0.32);
}

.app-area {
  min-width: 0;
  height: 100vh;
  padding: 0;
  overflow: auto;
}

.window-bar {
  height: 44px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  position: sticky;
  top: 0;
  z-index: 5;
}

.window-bar strong {
  color: var(--ink);
}

.traffic-lights {
  display: flex;
  gap: 7px;
}

.traffic-lights span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #f05f57;
}

.traffic-lights span:nth-child(2) {
  background: #fdbc2e;
}

.traffic-lights span:nth-child(3) {
  background: #28c840;
}

.topbar {
  position: sticky;
  top: 44px;
  z-index: 4;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: rgba(248, 250, 251, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.search {
  width: min(620px, 100%);
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}

.search input, textarea, input, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  padding: 12px;
  outline: 0;
}

.search input {
  border: 0;
  padding: 0;
}

.top-actions, .segmented, .filter-bar, .mood-picker, .share-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.top-actions {
  align-items: center;
}

.primary-btn, .ghost-btn, .segmented button, .filter-bar button, .mood-picker button, .tabs button, .post-actions button {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 9px;
  font-weight: 800;
}

.primary-btn {
  background: var(--warm);
  color: #fff;
  box-shadow: 0 12px 24px rgba(232, 111, 82, 0.22);
}

.account-entry {
  position: relative;
}

.account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 248px;
  padding: 10px;
  display: none;
  z-index: 12;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.account-menu.open {
  display: grid;
  gap: 6px;
}

.account-card-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px;
  margin-bottom: 4px;
}

.account-card-head strong,
.account-card-head span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-card-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.account-card-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
  background: var(--green);
}

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

.account-menu button {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-weight: 800;
  cursor: pointer;
}

.account-menu button:hover {
  background: var(--soft);
}
.avatar-login {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 2px solid #fff;
  box-shadow: 0 10px 24px rgba(80, 60, 42, 0.16);
  overflow: hidden;
}

.avatar-login span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 900;
  font-size: 18px;
}

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

.ghost-btn, .segmented button, .filter-bar button, .mood-picker button, .tabs button, .post-actions button {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
}

.view { display: none; }
.view.active {
  display: block;
  padding: 20px 24px 38px;
}

.hero {
  min-height: 148px;
  padding: 22px;
  border-radius: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 420px;
  align-items: center;
  gap: 20px;
  box-shadow: var(--shadow);
}

.hero h1 {
  max-width: 680px;
  margin: 8px 0 8px;
  font-size: 30px;
  line-height: 1.16;
  letter-spacing: 0;
}

.hero p {
  max-width: 590px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 14px;
}

.hero .eyebrow { color: var(--warm); }

.mood-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mood-board span {
  padding: 14px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
}

.section-head {
  justify-content: space-between;
  gap: 16px;
  margin: 20px 0 14px;
}

h2, h3, p { margin-top: 0; }
h2 { margin-bottom: 0; font-size: 28px; }

.segmented {
  padding: 4px;
  border-radius: 12px;
  background: var(--soft);
}

.segmented .active, .filter-bar .active, .mood-picker .active, .tabs .active {
  background: var(--ink);
  color: #fff;
}

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

.timeline {
  display: grid;
  gap: 18px;
}

.post-card, .mini-card, .compose-card, .preview-card, .discover-card, .message-list article, .album-grid article {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(36, 45, 56, 0.06);
}

.post-card {
  padding: 16px;
}

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

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

.photo-grid.three img {
  height: 180px;
}

.photo-grid.two img {
  height: 220px;
}

.post-actions {
  gap: 8px;
  margin-top: 14px;
}

.post-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.post-action-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.post-action-icon.is-filled {
  fill: currentColor;
}

.like-btn {
  color: var(--ink) !important;
}

.post-actions .danger-action {
  color: #c43d33;
  border-color: rgba(196, 61, 51, 0.28);
}

.post-actions .danger-action:hover {
  background: rgba(196, 61, 51, 0.08);
}

.comment-box {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: var(--soft);
  color: var(--muted);
}

.comment-box p {
  margin: 0 0 8px;
}

.comment-box p:last-child {
  margin-bottom: 0;
}

.comment-box.muted {
  color: #9a9288;
}

.right-panel {
  display: grid;
  gap: 14px;
  align-content: start;
}

.mini-card, .compose-card, .preview-card {
  padding: 16px;
}

.user-summary {
  display: grid;
  gap: 14px;
}

.mini-card p, .discover-card p, .album-grid p {
  color: var(--muted);
  line-height: 1.7;
}

.discover-grid, .album-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.discover-card, .album-grid article {
  overflow: hidden;
}

.discover-card img, .album-grid img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.discover-card h3, .discover-card p, .album-grid h3, .album-grid p {
  padding: 0 16px;
}

.discover-card h3, .album-grid h3 {
  margin-top: 14px;
}

.compose-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
}

.compose-card {
  display: grid;
  gap: 14px;
}

.compose-card label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.compose-card textarea {
  min-height: 150px;
  resize: vertical;
}

.upload-box {
  min-height: 120px;
  padding: 18px;
  border: 2px dashed #dacfc0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fffaf1;
  position: relative;
}

.upload-box span {
  display: block;
  color: var(--muted);
  margin-top: 6px;
}

.upload-box input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.selected-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.selected-images p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
}

.selected-images article {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.selected-images img {
  width: 100%;
  height: 116px;
  object-fit: cover;
}

.selected-images button {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  background: rgba(36, 32, 29, 0.78);
}

.selected-images span {
  display: block;
  padding: 8px;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drop-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--leaf);
  color: #fff;
  font-size: 32px;
}

.progress {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line);
}

.progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--leaf), var(--sun));
  transition: width 0.25s ease;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.profile-hero {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.profile-cover {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.profile-info {
  gap: 18px;
  padding: 18px;
}

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

.profile-stats button {
  padding: 16px;
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.profile-stats strong {
  display: block;
  color: var(--ink);
  font-size: 26px;
}

.profile-stats button:hover {
  border-color: rgba(22, 167, 101, .35);
  background: rgba(22, 167, 101, .08);
}

.profile-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

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

.user-list article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
}

.user-list img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
}

.user-list span {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}


.friend-search-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
}

.friend-search-panel,
.friend-search-aside {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.friend-search-panel {
  padding: 22px;
}

.friend-search-panel h3 {
  margin: 4px 0 8px;
  font-size: 28px;
}

.friend-search-panel p,
.friend-search-tip {
  color: var(--muted);
  margin: 0;
}

.account-search-label {
  display: block;
  margin-top: 18px;
  margin-bottom: 8px;
  color: var(--muted);
  font-weight: 800;
}

.friend-search-aside {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 20px;
  background: linear-gradient(160deg, #ffffff 0%, #f4fbf6 100%);
}

.friend-search-aside strong {
  font-size: 18px;
}

.friend-search-aside span {
  color: var(--muted);
}

.friend-results-standalone {
  margin-top: 0;
}

.friend-account {
  font-weight: 800;
  color: var(--ink) !important;
}
.friend-finder {
  margin-bottom: 18px;
}

.friend-finder h3 {
  margin: 4px 0 0;
}

.friend-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px;
  margin-top: 12px;
}

.friend-results {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.friend-results article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.friend-results img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
}

.friend-results span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}


.friend-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.social-modal-card {
  width: min(760px, calc(100vw - 28px));
  overflow-y: auto;
}

.public-profile {
  display: grid;
  gap: 14px;
}

.public-profile-head {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.public-profile-head img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

.public-profile-head strong {
  display: block;
  font-size: 22px;
}

.public-profile-head span,
.public-profile-head p,
.public-profile-actions span,
.chat-message time {
  color: var(--muted);
}

.compact-stats {
  margin: 0;
}

.public-profile-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: var(--soft);
}

.public-posts {
  display: grid;
  gap: 12px;
}

.chat-card {
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr) auto;
}

.chat-thread {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 220px;
  max-height: 46vh;
  padding: 14px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}

.chat-message {
  display: grid;
  gap: 4px;
  max-width: 76%;
}

.chat-message > span {
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
}

.chat-message.mine {
  justify-self: end;
  text-align: right;
}

.chat-message.mine > span {
  color: #fff;
  background: var(--green);
  border-color: var(--warm);
}

.chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 10px;
  margin-top: 12px;
}

.chat-form textarea {
  resize: none;
}
.friend-results button:disabled {
  cursor: default;
  opacity: 0.65;
}

.empty-state {
  padding: 12px;
  border-radius: 12px;
  background: var(--soft);
  color: var(--muted);
}

.follow-inline {
  margin-left: auto;
}

.avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 5px solid var(--paper);
  object-fit: cover;
  margin-top: -52px;
}

.tabs {
  gap: 8px;
  margin: 18px 0;
}

.album-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.album-strip article {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

.album-strip img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.album-strip span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.message-list {
  display: grid;
  gap: 12px;
}

.message-list article {
  padding: 18px;
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 12px;
  align-items: center;
}

.material-form {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 1fr 0.8fr auto;
  gap: 10px;
  align-items: end;
  padding: 16px;
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  margin-bottom: 16px;
}

.material-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.material-list {
  display: grid;
  gap: 12px;
}

.material-list article {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
}

.material-list span,
.material-list p {
  display: block;
  color: var(--muted);
  margin: 6px 0 0;
}

.audit-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.metric-card {
  padding: 20px;
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
}

.metric-card strong {
  display: block;
  font-size: 36px;
}

.metric-card span {
  color: var(--muted);
}

.audit-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
}

.audit-list article {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  padding: 16px;
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
}

.audit-list span {
  display: block;
  color: var(--muted);
  margin-top: 5px;
}

.modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(36, 32, 29, 0.48);
  z-index: 8;
}

.modal.open { display: grid; }

.modal-card {
  width: min(520px, 100%);
  max-height: calc(100vh - 32px);
  padding: 22px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.auth-card {
  width: min(760px, calc(100vw - 28px));
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
}

.auth-side {
  min-height: 0;
  padding: 24px;
  color: #26333b;
  background: #dfe6e8;
  box-shadow: inset -1px 0 #cbd5d9;
  display: grid;
  align-content: space-between;
  gap: 24px;
}

.auth-side .brand-mark {
  background: #f7f9f9;
  color: #33434c;
  border: 1px solid #c8d2d6;
  box-shadow: none;
}

.auth-side h3 {
  margin: 14px 0 8px;
  font-size: 26px;
}

.auth-side p {
  margin: 0;
  color: #56666f;
  line-height: 1.55;
  font-size: 14px;
}

.auth-note {
  padding: 14px;
  border: 1px solid #c8d3d7;
  border-radius: 8px;
  background: #edf1f2;
}

.auth-note span {
  display: block;
  margin-top: 6px;
  color: #65747c;
  line-height: 1.45;
  font-size: 13px;
}

.auth-main {
  max-height: calc(100vh - 32px);
  padding: 22px;
  overflow-y: auto;
}

.modal-card .section-head {
  margin: 0 0 12px;
}

.auth-main .section-head h2 {
  font-size: 26px;
}

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

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px;
  border-radius: 12px;
  background: var(--soft);
  margin-bottom: 12px;
}

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

.auth-tabs button.active {
  background: var(--ink);
  color: #fff;
}

.login-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
  font-size: 14px;
}

.auth-main input,
.auth-main select {
  min-height: 42px;
  padding: 10px 12px;
}

.password-row {
  position: relative;
  display: block;
}

.password-row input {
  width: 100%;
  padding-right: 54px;
}

.password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 34px;
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-weight: 900;
  transform: translateY(-50%);
}

.password-toggle::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 20px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.password-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.password-toggle.is-visible {
  color: var(--warm);
}

.password-toggle.is-visible::after {
  width: 24px;
  height: 2px;
  border-radius: 999px;
  transform: translate(-50%, -50%) rotate(-38deg);
}

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

.register-field.show,
.security-field.show,
.recover-field.show,
.recover-hint.show {
  display: grid !important;
}

.security-field,
.recover-field,
.recover-hint {
  display: none !important;
}

.password-field.hide {
  display: none !important;
}

.recover-hint {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--muted);
  background: var(--soft);
  line-height: 1.6;
}

.forgot-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}

.forgot-row.hide {
  display: none;
}

.forgot-row button {
  padding: 0;
  min-height: auto;
  color: var(--warm);
  background: transparent;
  font-weight: 900;
}

.code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 10px;
}

.code-row button {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-weight: 900;
}

.code-row button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.login-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.link-box {
  margin: 14px 0;
  padding: 14px;
  border-radius: 12px;
  background: var(--soft);
  color: var(--leaf);
  font-weight: 900;
  word-break: break-all;
}

.toast {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 20;
  max-width: min(420px, calc(100vw - 32px));
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .workspace {
    grid-template-columns: 78px minmax(0, 1fr);
  }
}

@media (max-width: 920px) {
  .workspace {
    grid-template-columns: 1fr;
  }

  .sidebar {
    background: var(--rail);
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .brand {
    grid-column: 1 / -1;
  }

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

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

  .auth-side {
    display: none;
  }

  .discover-grid, .album-grid, .album-strip {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .app-area {
    padding: 16px;
  }

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

  .topbar, .section-head, .profile-info, .message-list article {
    align-items: stretch;
    flex-direction: column;
  }

  .hero {
    padding: 26px;
  }

  .mood-board, .photo-grid.three, .photo-grid.two, .discover-grid, .album-grid, .album-strip, .form-row {
    grid-template-columns: 1fr;
  }

  .selected-images, .profile-stats, .user-list, .material-form, .audit-board {
    grid-template-columns: 1fr;
  }

  .friend-search-shell,
  .friend-search-row,
  .friend-actions,
  .public-profile-actions,
  .chat-form,
  .friend-results article {
    grid-template-columns: 1fr;
  }

  .modal {
    padding: 10px;
  }

  .auth-card {
    width: min(440px, calc(100vw - 20px));
  }

  .auth-main {
    max-height: calc(100vh - 20px);
    padding: 18px;
  }

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

  .password-row {
    display: block;
  }

  .photo-grid img, .photo-grid.three img, .photo-grid.two img {
    height: 230px;
  }
}




.share-password {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: var(--muted);
}

.share-password[hidden] {
  display: none;
}

.share-password strong {
  color: var(--text);
  letter-spacing: .08em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.feed-composer {
  min-height: 108px;
  padding: 16px 18px;
  margin-bottom: 18px;
  grid-template-columns: minmax(300px, 1fr) minmax(320px, 520px);
  box-shadow: 0 12px 30px rgba(22, 33, 46, .08);
}

.composer-main {
  display: grid;
  gap: 8px;
}

.composer-prompt {
  width: min(520px, 100%);
  min-height: 48px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.composer-prompt:hover {
  border-color: rgba(22, 167, 101, .35);
  background: rgba(22, 167, 101, .08);
}

.feed-composer .mood-board.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feed-composer .mood-board.compact span {
  padding: 10px 12px;
  min-height: 42px;
  display: flex;
  align-items: center;
  border-radius: 10px;
}


.feed-composer.single {
  grid-template-columns: 1fr;
}

.compact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.profile-editor {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(120px, .7fr) minmax(220px, 1.4fr) auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  margin: 14px 0;
}

.profile-editor label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 700;
}

.profile-editor input,
.profile-editor textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  padding: 10px 12px;
  font: inherit;
}

.friend-request-list {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.friend-request-item {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.friend-request-item img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.friend-request-item span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 900px) {
  .profile-editor,
  .friend-request-item {
    grid-template-columns: 1fr;
  }
  .profile-actions {
    margin-left: 0;
  }
}

.user-list-card {
  cursor: pointer;
}

.user-list-card:hover {
  border-color: rgba(22, 167, 101, .35);
  background: rgba(22, 167, 101, .06);
}




.edit-post-card {
  width: min(620px, calc(100vw - 28px));
}

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

.edit-post-form label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-weight: 700;
}

.edit-post-form textarea,
.edit-post-form input,
.edit-post-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  padding: 12px 14px;
  outline: none;
}

.edit-post-form textarea:focus,
.edit-post-form input:focus,
.edit-post-form select:focus {
  border-color: var(--warm);
  box-shadow: 0 0 0 3px rgba(22, 167, 101, 0.12);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}



.post-actions {
  align-items: center;
}

.post-manage {
  position: relative;
  display: inline-flex;
}

.post-actions .more-action {
  width: 44px;
  padding-inline: 0;
  font-size: 20px;
  line-height: 1;
}

.post-manage-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  min-width: 190px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.post-manage-menu button {
  width: 100%;
  justify-content: flex-start;
  border: 0;
  background: transparent;
}

.post-visibility-control {
  display: grid;
  gap: 6px;
  padding: 4px 4px 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.post-visibility-control select {
  width: 100%;
  height: 38px;
  padding: 0 34px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--paper);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.post-visibility-control select:focus-visible {
  outline: 2px solid rgba(22, 167, 101, 0.28);
  outline-offset: 1px;
}

.post-visibility-control select:disabled {
  cursor: wait;
  opacity: 0.65;
}

.post-manage-divider {
  display: block;
  height: 1px;
  margin: 2px 4px 4px;
  background: var(--line);
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 2px;
}

.tag-chip {
  border: 1px solid rgba(22, 167, 101, 0.24);
  border-radius: 999px;
  background: rgba(22, 167, 101, 0.08);
  color: var(--warm);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.tag-chip:hover {
  background: rgba(22, 167, 101, 0.14);
}

/* interaction polish */
button,
.nav-item,
.post-card,
.discover-card,
.mini-card,
.user-list-card,
.friend-result,
.account-menu button,
.tag-chip,
.upload-box,
.selected-images article {
  transition: transform 160ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease;
}

button:active,
.nav-item:active,
.tag-chip:active,
.upload-box:active {
  transform: scale(0.97);
}

.primary-btn:hover,
.ghost-btn:hover,
.post-actions button:hover,
.filter-bar button:hover,
.tabs button:hover,
.account-menu button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(36, 45, 56, 0.10);
}

.primary-btn:focus-visible,
.ghost-btn:focus-visible,
.nav-item:focus-visible,
.tag-chip:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(22, 167, 101, 0.22);
  outline-offset: 2px;
}

.post-card:hover,
.discover-card:hover,
.mini-card:hover,
.user-list-card:hover,
.friend-result:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 46px rgba(36, 45, 56, 0.14);
}

.post-card img,
.discover-card img,
.album-strip img,
.selected-images img {
  transition: transform 240ms ease, filter 240ms ease;
}

.post-card:hover .photo-grid img,
.discover-card:hover img,
.album-strip article:hover img {
  transform: scale(1.015);
}

.view.active {
  animation: viewFadeIn 220ms ease both;
}

.modal.open .modal-card {
  animation: modalRise 180ms ease both;
}

.toast.show {
  animation: toastPop 220ms ease both;
}

.tap-pop {
  animation: tapPop 220ms ease both;
}

.post-card.action-pulse {
  animation: cardPulse 480ms ease both;
}

.tag-chip.is-searching {
  background: rgba(22, 167, 101, 0.18);
  box-shadow: 0 0 0 6px rgba(22, 167, 101, 0.08);
}

.post-manage-menu:not([hidden]) {
  animation: menuDrop 160ms ease both;
}

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes modalRise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastPop {
  from { opacity: 0; transform: translate(-50%, 10px) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes tapPop {
  0% { transform: scale(1); }
  45% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

@keyframes cardPulse {
  0% { box-shadow: 0 0 0 rgba(22, 167, 101, 0); }
  35% { box-shadow: 0 0 0 6px rgba(22, 167, 101, 0.10), var(--shadow); }
  100% { box-shadow: var(--shadow); }
}

@keyframes menuDrop {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

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

.action-dashboard {
  gap: 16px;
}

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

.action-card {
  display: grid;
  gap: 12px;
}

.card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.card-title-row h3,
.continue-card h3 {
  margin: 0;
}

.micro-btn {
  min-height: 32px;
  padding: 6px 10px !important;
  font-size: 13px;
}

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

.action-list p,
.action-card-body p,
.continue-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.dashboard-item,
.recommend-tile {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px;
}

.dashboard-item:hover,
.recommend-tile:hover {
  border-color: rgba(22, 167, 101, 0.28);
  background: rgba(22, 167, 101, 0.05);
}

.dashboard-item img,
.recommend-tile img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 10px;
}

.dashboard-item span,
.recommend-tile span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.dashboard-item strong,
.recommend-tile strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-item small,
.recommend-tile small {
  color: var(--muted);
  font-size: 12px;
}

.recommend-tile {
  grid-template-columns: 72px minmax(0, 1fr);
  padding: 10px;
  background: linear-gradient(135deg, rgba(22, 167, 101, 0.10), #fff);
}

.recommend-tile img {
  width: 72px;
  height: 72px;
}

.dashboard-item.text-only,
.recommend-tile.text-only {
  grid-template-columns: minmax(0, 1fr);
}

.recommend-tile.text-only {
  min-height: 76px;
  padding: 14px;
}

.continue-card {
  background: linear-gradient(135deg, rgba(22, 167, 101, 0.12), rgba(79, 126, 219, 0.10)), var(--paper);
  border-color: rgba(22, 167, 101, 0.18);
  display: grid;
  gap: 10px;
}

/* messaging center */
.nav-with-badge {
  position: relative;
}

.nav-badge,
.unread-count {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: #e5484d;
  font-size: 11px;
  font-weight: 800;
}

.nav-badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

.message-page-head,
.message-head-actions,
.chat-header,
.chat-header-actions,
.panel-title,
.conversation-row,
.message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.connection-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.connection-state::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9ca3af;
  content: "";
}

.connection-state[data-state="online"]::before { background: #16a765; }
.connection-state[data-state="connecting"]::before,
.connection-state[data-state="reconnecting"]::before { background: #e5a72e; }
.connection-state[data-state="offline"]::before { background: #e5484d; }

.message-center {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr);
  gap: 16px;
}

.conversation-panel,
.notification-panel {
  min-height: 520px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  overflow: hidden;
}

.panel-title {
  min-height: 72px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.panel-title strong,
.panel-title span {
  display: block;
}

.panel-title span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.conversation-list {
  display: grid;
}

.conversation-item {
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border-bottom: 1px solid var(--line);
  transition: background .18s ease, transform .18s ease;
}

.conversation-item:hover {
  background: rgba(22, 167, 101, .07);
}

.conversation-item:active {
  transform: scale(.99);
}

.conversation-item.is-unread {
  background: rgba(22, 167, 101, .05);
}

.conversation-item img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.conversation-copy,
.conversation-preview {
  min-width: 0;
}

.conversation-row + .conversation-row {
  margin-top: 7px;
}

.conversation-row time,
.conversation-preview {
  color: var(--muted);
  font-size: 12px;
}

.conversation-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blocked-label {
  display: inline-block;
  margin-top: 6px;
  color: #b4232a;
  font-size: 11px;
}

.notification-panel .message-list {
  padding: 8px 16px;
}

.notification-panel .message-list article {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.notification-panel .message-list article span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.notification-panel .message-list article.is-unread strong::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #16a765;
  content: "";
}

.chat-card {
  width: min(900px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  grid-template-rows: auto auto minmax(260px, 1fr) auto auto auto;
}

.chat-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.chat-header h2 {
  margin: 4px 0;
  font-size: 20px;
}

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

.danger-text {
  color: #c7353c;
}

.load-older-btn {
  justify-self: center;
  padding: 8px 12px;
  color: var(--warm);
  background: transparent;
}

.chat-thread {
  min-height: 300px;
  max-height: 52vh;
  border-radius: 8px;
}

.chat-bubble {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.chat-message.mine .chat-bubble {
  color: #fff;
  border-color: var(--warm);
  background: var(--green);
}

.chat-bubble-text {
  display: block;
  padding: 10px 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-image {
  width: min(320px, 100%);
  max-height: 360px;
  object-fit: contain;
  background: #eef2f3;
}

.message-meta {
  justify-content: flex-start;
  color: var(--muted);
  font-size: 11px;
}

.chat-message.mine .message-meta {
  justify-content: flex-end;
}

.chat-message .message-meta span {
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
}

.message-report {
  padding: 0;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  opacity: 0;
  transition: opacity .18s ease;
}

.chat-message:hover .message-report,
.message-report:focus-visible {
  opacity: 1;
}

.chat-disabled-note,
.chat-image-preview {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--muted);
  background: var(--soft);
  font-size: 13px;
}

.chat-form {
  grid-template-columns: 68px minmax(0, 1fr) 86px;
}

.chat-image-button {
  min-height: 48px;
}

@media (max-width: 780px) {
  .message-center {
    grid-template-columns: 1fr;
  }

  .conversation-panel,
  .notification-panel {
    min-height: auto;
  }

  .chat-header,
  .message-page-head {
    align-items: flex-start;
  }

  .chat-form {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .chat-form .primary-btn {
    grid-column: 1 / -1;
  }
}

.notification-card {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px 0 !important;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.notification-card:hover,
.notification-card:focus-visible {
  background: rgba(22, 167, 101, 0.06);
  outline: none;
  transform: translateX(2px);
}

.notification-card img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: #171c20;
}

.notification-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.notification-copy strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
}

.notification-copy span {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-side {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 76px;
}

.notification-side time {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.notification-side em {
  color: #16a765;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.notification-card.is-unread .notification-copy strong::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #16a765;
  content: "";
  vertical-align: 2px;
}

.post-card.is-highlighted {
  animation: postPulse 1.5s ease;
}

@keyframes postPulse {
  0%, 100% { box-shadow: var(--shadow); }
  35% { box-shadow: 0 0 0 4px rgba(22, 167, 101, 0.16), var(--shadow); }
}

@media (max-width: 720px) {
  .notification-card {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  .notification-side {
    grid-column: 2;
    justify-items: start;
    grid-auto-flow: column;
    justify-content: start;
  }

  .notification-copy span {
    white-space: normal;
  }
}

.nav-badge[hidden],
.unread-count[hidden] {
  display: none !important;
}


.album-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.2fr);
  gap: 18px;
  align-items: start;
}

.album-sidebar,
.album-detail {
  min-height: 560px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  overflow: hidden;
}

.album-form {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(22, 167, 101, 0.05);
}

.album-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 800;
}

.album-form input,
.album-form select {
  width: 100%;
}

.album-sidebar .album-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.album-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.album-card:hover,
.album-card.active {
  background: rgba(22, 167, 101, 0.07);
}

.album-card.active {
  box-shadow: inset 4px 0 0 #16a765;
}

.album-cover {
  position: relative;
  width: 96px;
  height: 76px;
  border-radius: 8px;
  overflow: hidden;
  background: #e9f3ef;
}

.album-cover-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #e9f3ef;
}

.album-cover-placeholder::before,
.album-cover-placeholder::after {
  content: "";
  position: absolute;
  width: 48px;
  height: 38px;
  border: 1px solid rgba(22, 134, 97, 0.22);
  border-radius: 6px;
}

.album-cover-placeholder::before {
  transform: translate(-5px, -4px);
  background: rgba(255, 255, 255, 0.54);
}

.album-cover-placeholder::after {
  transform: translate(5px, 5px);
  background: #f8fbfa;
}

.album-cover-mark {
  position: relative;
  z-index: 1;
  color: #168661;
  font-size: 18px;
  font-weight: 800;
}

.album-cover img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.album-card h3 {
  margin: 3px 0 8px;
  font-size: 18px;
}

.album-card p,
.album-card span,
.album-detail-head p {
  color: var(--muted);
  line-height: 1.5;
}

.album-detail {
  padding: 20px;
  display: grid;
  gap: 18px;
}

.album-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.album-detail-head h3 {
  margin: 4px 0 8px;
  font-size: 28px;
}

.album-photo-grid,
.album-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.album-photo-grid article,
.album-library-grid button {
  position: relative;
  min-height: 138px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.album-photo-grid img,
.album-library-grid img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.album-photo-grid article:hover img,
.album-library-grid button:hover img {
  transform: scale(1.04);
}

.album-photo-grid button {
  position: absolute;
  right: 8px;
  bottom: 8px;
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.62);
  font-weight: 800;
  cursor: pointer;
}

.album-library {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.album-library .panel-title.compact {
  min-height: auto;
  padding: 0 0 12px;
  border-bottom: 0;
}

.album-library-grid button {
  padding: 0;
  cursor: pointer;
}

.album-library-grid button::after {
  position: absolute;
  inset: auto 8px 8px auto;
  padding: 6px 9px;
  border-radius: 999px;
  color: #fff;
  background: rgba(22, 167, 101, 0.92);
  font-size: 12px;
  font-weight: 900;
  content: "加入";
}

.compact-empty {
  min-height: auto;
  padding: 18px;
}

@media (max-width: 960px) {
  .album-workspace {
    grid-template-columns: 1fr;
  }

  .album-sidebar,
  .album-detail {
    min-height: auto;
  }
}

.discover-card[data-discover-post-id] {
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.discover-card[data-discover-post-id]:hover,
.discover-card[data-discover-post-id]:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(22, 167, 101, .42);
  box-shadow: 0 16px 34px rgba(36, 45, 56, .12);
  outline: none;
}

.discover-card-body { padding-bottom: 14px; }

.discover-card-author {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 0;
  color: var(--muted);
  font-size: 13px;
}

.discover-card-author img { width: 26px; height: 26px; border-radius: 50%; }
.discover-card-author strong { margin-left: auto; color: var(--warm); }

.post-author-profile {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

.post-author-profile > span { min-width: 0; display: grid; gap: 3px; }
.post-author-profile small { color: var(--muted); font: inherit; font-size: 13px; }
.post-author-profile:hover strong { color: var(--warm); }

.post-detail-modal-card {
  width: min(820px, calc(100vw - 28px));
  max-height: min(880px, calc(100vh - 28px));
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.post-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.post-detail-toolbar h2 { margin: 3px 0 0; font-size: 22px; }
.post-detail-content { padding: 18px; overflow-y: auto; background: var(--soft); }
.post-detail-content .post-card { box-shadow: none; }

.post-detail-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.post-detail-comment-form textarea { min-height: 48px; max-height: 120px; resize: vertical; }

@media (max-width: 640px) {
  .post-detail-comment-form { grid-template-columns: 1fr; }
}

#shareModal, #userProfileModal, #loginModal, #editPostModal, #chatModal, #settingsModal { z-index: 10; }

.feed-quick-compose {
  min-height: 78px;
  margin-bottom: 24px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 10px 24px rgba(36, 45, 56, .06);
}

.feed-quick-compose > img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

.feed-quick-compose .composer-prompt {
  width: 100%;
  min-height: 48px;
  display: grid;
  align-content: center;
  gap: 2px;
  font-size: 15px;
  font-weight: 400;
}

.feed-quick-compose .composer-prompt strong {
  color: var(--ink);
  font-size: 15px;
}

.feed-quick-compose .composer-prompt span {
  color: var(--muted);
  font-size: 12px;
}

.quick-compose-add {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(22, 167, 101, .22);
  background: rgba(22, 167, 101, .1);
  color: var(--warm);
  font-size: 25px;
  line-height: 1;
}

.quick-compose-add:hover {
  color: #fff;
  background: var(--warm);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .feed-quick-compose {
    grid-template-columns: 40px minmax(0, 1fr) 38px;
    padding: 12px;
  }

  .feed-quick-compose > img { width: 40px; height: 40px; }
  .quick-compose-add { width: 38px; height: 38px; }
}
.profile-layout {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.profile-card {
  position: sticky;
  top: 118px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 10px 24px rgba(36, 45, 56, .06);
}

.profile-card .profile-cover {
  width: 100%;
  height: 112px;
  object-fit: cover;
}

.profile-card .profile-info {
  display: grid;
  justify-items: center;
  gap: 0;
  margin-top: -38px;
  padding: 0 18px 14px;
  text-align: center;
}

.profile-card .profile-info .avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 4px solid var(--paper);
  object-fit: cover;
  box-shadow: 0 6px 16px rgba(36, 45, 56, .16);
}

.profile-copy {
  min-width: 0;
}

.profile-copy h2 {
  margin: 8px 0 4px;
  font-size: 21px;
}

.profile-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.profile-card .profile-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 14px 14px;
}

.profile-card .profile-stats button {
  min-width: 0;
  padding: 9px 4px;
  border-radius: 8px;
  background: var(--panel);
  text-align: center;
}

.profile-card .profile-stats strong {
  font-size: 20px;
}

.profile-card .profile-stats span {
  font-size: 12px;
}

.profile-card .profile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 14px 16px;
}

.profile-card .profile-actions button {
  min-height: 36px;
  padding: 0 10px;
  font-size: 13px;
}

.profile-content {
  min-width: 0;
}

.profile-content > .tabs {
  margin-top: 0;
}

.profile-content .profile-editor {
  margin: 0 0 14px;
}

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

  .profile-card {
    position: static;
    width: min(420px, 100%);
  }
}
.profile-editor[hidden] { display: none !important; }
#profileAlbums { display: none; }

#feed > .feed-quick-compose,
#feed > .section-head,
#feed > .feed-layout {
  width: min(100%, 1200px);
  margin-left: auto;
  margin-right: auto;
}

.feed-layout {
  grid-template-columns: minmax(0, 860px) 320px;
  justify-content: center;
  align-items: start;
}

.photo-grid.single {
  grid-template-columns: 1fr;
  overflow: hidden;
  border-radius: 10px;
  background: #f4f6f7;
}

.photo-grid.single .post-image {
  width: 100%;
  height: min(520px, 60vh);
  object-fit: contain;
}

.post-image {
  cursor: zoom-in;
}

.post-author-profile small {
  color: #58636f;
  font-size: 14px;
  line-height: 1.45;
}

.comment-box {
  border: 1px solid #e7ecef;
  border-left: 3px solid rgba(22, 167, 101, .34);
  background: #f8faf9;
  color: #5d6873;
}

.comment-box.muted {
  border-left-color: #d8dfe4;
  color: #78838e;
}

.image-preview-modal {
  z-index: 14;
  padding: 24px;
  background: rgba(20, 24, 28, .88);
}

.image-preview-stage {
  position: relative;
  width: min(1180px, 100%);
  height: min(88vh, 900px);
  display: grid;
  place-items: center;
}

.image-preview-stage > img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

.image-preview-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  color: #fff;
  border-color: rgba(255, 255, 255, .32);
  background: rgba(0, 0, 0, .38);
}

.feed-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .feed-layout {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 700px) {
  .action-dashboard {
    grid-template-columns: 1fr;
  }

  .photo-grid.single .post-image {
    height: min(440px, 56vh);
  }

  .image-preview-modal {
    padding: 12px;
  }
}
.report-actions{display:flex;gap:8px;align-items:center}.report-actions select{min-height:38px;border:1px solid var(--line,#ddd);border-radius:10px;padding:0 10px;background:#fff}.report-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}.report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.report-day-card{background:#fff;border:1px solid var(--line,#e7e1dc);border-radius:18px;padding:18px}.report-day-head,.report-meta{display:flex;justify-content:space-between;gap:10px;align-items:center}.report-day-head span,.report-meta,.report-tags{color:#8b8179;font-size:12px}.report-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}.report-kpi-grid div{background:#faf7f4;border-radius:12px;padding:12px}.report-kpi-grid strong,.report-kpi-grid span{display:block}.report-kpi-grid span{color:#8b8179;font-size:12px;margin-top:5px}.report-meta{justify-content:flex-start;flex-wrap:wrap}.report-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.report-tags span{background:#f4eee9;border-radius:999px;padding:5px 8px}@media(max-width:900px){.report-summary,.report-grid{grid-template-columns:1fr}.report-actions{flex-wrap:wrap}}

/* Product feedback */
.audit-board {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feedback-card {
  width: min(620px, calc(100vw - 28px));
  overflow-y: auto;
}

.feedback-form {
  display: grid;
  gap: 16px;
}

.feedback-form > label,
.feedback-rating legend {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.feedback-form input,
.feedback-form select,
.feedback-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.feedback-form textarea {
  min-height: 120px;
  resize: vertical;
}

.feedback-form input:focus,
.feedback-form select:focus,
.feedback-form textarea:focus {
  border-color: var(--warm);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(22, 167, 101, .12);
}

.feedback-rating {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.feedback-rating legend {
  margin-bottom: 8px;
}

.feedback-rating-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.feedback-rating-options label {
  min-width: 0;
  cursor: pointer;
}

.feedback-rating-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.feedback-rating-options span {
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-size: 18px;
  font-weight: 900;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.feedback-rating-options small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.feedback-rating-options label:hover span {
  border-color: rgba(22, 167, 101, .45);
  transform: translateY(-1px);
}

.feedback-rating-options input:checked + span {
  color: #fff;
  border-color: var(--warm);
  background: var(--warm);
}

.feedback-rating-options input:checked + span small {
  color: rgba(255, 255, 255, .82);
}

.feedback-privacy {
  margin: -6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.audit-list-heading,
.feedback-admin-meta,
.feedback-admin-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.audit-list-heading {
  padding: 10px 2px 0;
}

.audit-list-heading h3 {
  margin: 0;
  font-size: 20px;
}

.audit-list-heading span {
  margin: 0;
}

.audit-list .feedback-admin-item {
  align-items: flex-start;
}

.feedback-admin-copy {
  min-width: 0;
  flex: 1;
}

.feedback-admin-copy p {
  margin: 10px 0;
  color: var(--ink);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.feedback-admin-copy small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.feedback-admin-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .audit-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audit-list .feedback-admin-item {
    display: grid;
  }

  .feedback-admin-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .feedback-rating-options {
    gap: 5px;
  }

  .feedback-rating-options span {
    min-height: 52px;
    font-size: 16px;
  }

  .feedback-rating-options small {
    font-size: 10px;
  }
}
.guest-feed-guide {
  justify-items: center;
  align-content: center;
  gap: 9px;
  padding: 34px 24px;
  text-align: center;
}

.guest-feed-guide h3 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
}

.guest-feed-guide p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.guest-guide-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 8px;
}

@media (max-width: 520px) {
  .guest-feed-guide {
    padding: 28px 18px;
  }

  .guest-feed-guide h3 {
    font-size: 19px;
  }
}
[data-admin-only][hidden],
[data-admin-qualified][hidden] {
  display: none !important;
}

.permission-state {
  grid-column: 1 / -1;
  width: min(560px, 100%);
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.permission-state strong {
  color: var(--ink);
  font-size: 20px;
}

.permission-state p {
  margin: 0 0 6px;
  color: var(--muted);
  line-height: 1.6;
}
.auth-main.admin-auth-mode .auth-tabs {
  display: none;
}
/* Diary-first experience */
#feed > .diary-today,
#feed > .week-memory,
#feed > .diary-section-head,
#feed > .feed-layout {
  width: min(100%, 1120px);
  margin-left: auto;
  margin-right: auto;
}

.diary-today {
  position: relative;
  min-height: 168px;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 24px 28px;
  overflow: hidden;
  border: 1px solid #d9e1df;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(37, 48, 53, .07);
}

.diary-today::after {
  position: absolute;
  right: 28px;
  bottom: 18px;
  left: 156px;
  height: 1px;
  background: #e8eeec;
  content: "";
}

.date-ticket {
  width: 104px;
  height: 116px;
  display: grid;
  place-content: center;
  gap: 2px;
  border-radius: 8px;
  border: 1px solid #cfe1d9;
  color: #235646;
  background: linear-gradient(180deg, #eef7f2, #dceee7);
  text-align: center;
}

.date-ticket strong {
  font-size: 46px;
  line-height: 1;
  font-weight: 900;
}

.date-ticket span {
  margin-top: 7px;
  color: #6b8178;
  font-size: 12px;
}

.diary-today-copy {
  position: relative;
  z-index: 1;
}

.diary-today-copy h1 {
  margin: 5px 0 8px;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: 0;
}

.diary-today-copy p {
  margin: 0;
  color: #647079;
  line-height: 1.6;
}

.diary-write-button {
  position: relative;
  z-index: 1;
  min-height: 44px;
  border: 1px solid #bfd9ce;
  background: #e8f5ef;
  color: #235646;
  box-shadow: none;
}

.diary-write-button:hover {
  border-color: #9fcdbc;
  background: #ddf0e8;
  transform: translateY(-1px);
}

.week-memory {
  margin-top: 14px;
  margin-bottom: 28px;
  padding: 16px 18px;
  border: 1px solid #d9e1df;
  border-radius: 8px;
  background: #f9fbfa;
}

.week-memory-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.week-memory-head > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.week-memory-head strong {
  color: var(--ink);
  font-size: 15px;
}

.diary-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(54px, 1fr));
  gap: 8px;
}

.diary-calendar button {
  position: relative;
  min-width: 0;
  height: 68px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #66727b;
  background: #fff;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.diary-calendar button small {
  font-size: 11px;
}

.diary-calendar button strong {
  color: var(--ink);
  font-size: 18px;
}

.diary-calendar button span {
  width: 5px;
  height: 5px;
  margin-top: 3px;
  border-radius: 50%;
  background: transparent;
}

.diary-calendar button.has-entry {
  cursor: pointer;
  border-color: #c8ddd5;
}

.diary-calendar button.has-entry span {
  background: #e86f52;
}

.diary-calendar button.today {
  border-color: #137f5b;
}

.diary-calendar button.selected {
  color: #fff;
  border-color: #137f5b;
  background: #137f5b;
}

.diary-calendar button.selected strong,
.diary-calendar button.selected small {
  color: #fff;
}

.diary-calendar button:not(:disabled):hover {
  transform: translateY(-2px);
}

.diary-calendar button:disabled {
  opacity: .5;
  cursor: default;
}

.diary-section-head {
  margin-bottom: 14px;
}

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

#compose .compose-card > label:first-child textarea {
  min-height: 180px;
  line-height: 1.8;
}

@media (max-width: 760px) {
  .diary-today {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
  }

  .date-ticket {
    width: 78px;
    height: 92px;
  }

  .date-ticket strong {
    font-size: 36px;
  }

  .diary-write-button {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .diary-today::after {
    display: none;
  }

  .diary-calendar {
    gap: 4px;
  }

  .diary-calendar button {
    height: 58px;
    padding: 4px 2px;
  }

  .diary-calendar button small {
    font-size: 10px;
  }

  .diary-calendar button strong {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .diary-today-copy h1 {
    font-size: 23px;
  }

  .week-memory {
    padding: 14px 10px;
  }

  .week-memory-head {
    align-items: flex-start;
  }
}
/* Refined diary composer: text and photo modes */
.diary-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 240px));
  gap: 10px;
  margin: 2px 0 16px;
}

.diary-mode-switch button {
  display: grid;
  gap: 3px;
  min-height: 66px;
  padding: 12px 16px;
  text-align: left;
  color: #68737d;
  border: 1px solid #d6dee2;
  border-radius: 8px;
  background: #fff;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.diary-mode-switch button strong {
  color: #202831;
  font-size: 16px;
}

.diary-mode-switch button span {
  font-size: 13px;
}

.diary-mode-switch button:hover {
  border-color: #85bca9;
  transform: translateY(-1px);
}

.diary-mode-switch button.active {
  color: #32725e;
  border-color: #168661;
  background: #edf8f4;
  box-shadow: inset 3px 0 0 #168661;
}

.diary-compose-layout {
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
}

.diary-compose-card {
  gap: 16px;
  padding: 18px;
  border-radius: 8px;
}

.diary-paper-editor {
  position: relative;
  min-height: 410px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.diary-paper-editor header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 34px;
  margin-bottom: 18px;
}

#composerDateLabel {
  color: #6c7780;
  font-size: 13px;
  font-weight: 700;
}

.mood-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.mood-options button {
  min-height: 30px;
  padding: 4px 10px;
  color: #66717a;
  font-size: 12px;
  border: 1px solid #dbe2e5;
  border-radius: 999px;
  background: rgba(255, 255, 255, .84);
}

.mood-options button.active {
  color: #fff;
  border-color: #168661;
  background: #168661;
}

.diary-title-input,
.diary-paper-editor textarea {
  width: 100%;
  color: #26313a;
  border: 1px solid #d8e0e3;
  border-radius: 8px;
  outline: 0;
  background: #fff;
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.diary-title-input {
  height: 54px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 54px;
}

.diary-paper-editor textarea {
  min-height: 320px;
  margin-top: 12px;
  padding: 18px 16px;
  resize: vertical;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.8;
}

.diary-title-input:hover,
.diary-paper-editor textarea:hover {
  border-color: #b8c8c4;
}

.diary-title-input:focus,
.diary-paper-editor textarea:focus {
  border-color: #168661;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(22, 134, 97, .12);
}

.diary-title-input::placeholder,
.diary-paper-editor textarea::placeholder {
  color: #98a2aa;
}

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

.diary-add-image-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 12px;
  color: #32725e;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid #cbdcd6;
  border-radius: 8px;
  background: #f7fbf9;
}

.diary-add-image-btn span {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

.diary-add-image-btn:hover {
  color: #116f50;
  border-color: #7eb6a3;
  background: #edf8f4;
}

#diaryImageCount {
  color: #7a858d;
  font-size: 13px;
}

.diary-photo-fields[hidden],
#simulateUpload[hidden] {
  display: none !important;
}

.diary-photo-fields {
  display: grid;
  gap: 12px;
}

.diary-settings {
  padding-top: 2px;
}

.diary-tag-field input {
  font-weight: 500;
}

.diary-save-button {
  justify-self: end;
  min-width: 124px;
}

.diary-preview-card {
  position: sticky;
  top: 88px;
  min-height: 430px;
  padding: 24px;
  overflow: hidden;
  border-radius: 8px;
  background: #f8faf9;
}

.diary-preview-card::before {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin-bottom: 24px;
  background: #e16e55;
}

.diary-preview-card time {
  display: block;
  margin: 12px 0 24px;
  color: #7a858d;
  font-size: 12px;
}

.diary-preview-card h3 {
  margin: 0 0 18px;
  color: #202830;
  font-family: "STSong", "SimSun", serif;
  font-size: 25px;
  line-height: 1.35;
}

.diary-preview-card > p {
  min-height: 160px;
  margin: 0;
  color: #4a5660;
  font-family: "STSong", "SimSun", serif;
  font-size: 16px;
  line-height: 2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.diary-preview-mood {
  display: inline-flex;
  margin-top: 18px;
  padding: 5px 10px;
  color: #32725e;
  font-size: 12px;
  border: 1px solid #cde0d9;
  border-radius: 999px;
  background: #fff;
}

.diary-preview-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 16px;
}

.diary-preview-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}

.text-diary-card {
  border-radius: 8px;
}

.text-diary-entry {
  position: relative;
  margin: 12px 0 4px;
  padding: 24px 26px 44px;
  border: 1px solid #e2e7e8;
  border-radius: 8px;
  background: #fbfcfc;
}

.text-diary-entry .text-diary-date {
  position: absolute;
  right: 22px;
  bottom: 16px;
  color: #7b868e;
  font-size: 12px;
  line-height: 1;
}

.text-diary-entry h3 {
  margin: 0 0 13px;
  color: #202830;
  font-family: "STSong", "SimSun", serif;
  font-size: 24px;
  line-height: 1.4;
}

.text-diary-entry p {
  margin: 0;
  color: #46525b;
  font-family: "STSong", "SimSun", serif;
  font-size: 17px;
  line-height: 2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.text-diary-mood {
  display: inline-flex;
  margin-top: 18px;
  color: #32725e;
  font-size: 12px;
}

.image-diary-entry {
  position: relative;
  padding-bottom: 34px;
}

.image-diary-entry .image-diary-date {
  position: absolute;
  right: 4px;
  bottom: 8px;
  color: #7b868e;
  font-size: 12px;
  line-height: 1;
}
.image-diary-title {
  margin: 14px 0 8px;
  font-size: 21px;
}

@media (max-width: 1080px) {
  .diary-compose-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .diary-preview-card {
    position: static;
    min-height: 280px;
  }

  .diary-preview-card > p {
    min-height: 100px;
  }
}

@media (max-width: 640px) {
  .diary-mode-switch {
    grid-template-columns: 1fr 1fr;
  }

  .diary-mode-switch button {
    min-height: 62px;
    padding: 10px;
  }

  .diary-paper-editor {
    min-height: 360px;
    padding: 0;
    background: transparent;
  }

  .diary-paper-editor header {
    align-items: flex-start;
    flex-direction: column;
  }

  .mood-options {
    justify-content: flex-start;
  }

  .diary-title-input {
    font-size: 23px;
  }

  .diary-paper-editor textarea {
    min-height: 260px;
    font-size: 16px;
    line-height: 1.8;
  }

  .diary-settings {
    grid-template-columns: 1fr;
  }

  .diary-save-button {
    width: 100%;
  }

  .text-diary-entry {
    padding: 20px 16px 18px 26px;
  }
}
/* Avatar crop editor */
.avatar-editor-card {
  width: min(520px, calc(100vw - 28px));
  padding: 22px;
  border-radius: 8px;
}

.avatar-editor-tip {
  margin: 0 0 18px;
  color: #66727b;
  font-size: 14px;
  line-height: 1.6;
}

.avatar-crop-stage {
  position: relative;
  width: min(320px, 76vw);
  aspect-ratio: 1;
  margin: 0 auto 20px;
  overflow: hidden;
  border: 6px solid #fff;
  border-radius: 50%;
  background: #e7edef;
  box-shadow: 0 0 0 1px #cfd8dc, 0 18px 38px rgba(31, 42, 50, .16);
  touch-action: none;
  cursor: grab;
}

.avatar-crop-stage:active {
  cursor: grabbing;
}

.avatar-crop-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
}

.avatar-crop-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.avatar-zoom-field {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: #4d5962;
  font-size: 14px;
  font-weight: 700;
}

.avatar-zoom-field input[type="range"] {
  width: 100%;
  accent-color: #168661;
}

.avatar-editor-actions {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.avatar-editor-actions .danger-text {
  color: #b64a40;
}

#profileAvatar {
  background: #edf2f1;
  box-shadow: 0 0 0 1px rgba(34, 45, 53, .08);
}

@media (max-width: 520px) {
  .avatar-editor-card {
    padding: 18px;
  }

  .avatar-editor-actions {
    grid-template-columns: 1fr 1fr;
  }

  .avatar-editor-actions span {
    display: none;
  }

  #removeAvatar {
    grid-column: 1 / -1;
  }
}
.discover-sort {
  width: max-content;
  margin: 0 0 12px;
}

.discover-sort button {
  min-width: 72px;
}

.discover-pagination {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 0 4px;
  color: var(--muted);
  font-size: 13px;
}

.discover-pagination button[hidden] {
  display: none;
}


/* Optional and custom diary moods. */
.mood-options .mood-add-button,.mood-options .custom-mood-confirm{width:32px;min-width:32px;padding:0;font-size:17px}
.custom-mood-input{width:96px;min-width:96px;height:32px;padding:0 10px;border:1px solid #a8d8c6;border-radius:999px;background:#fff;color:var(--ink);font-size:12px;outline:none}
.custom-mood-input:focus{border-color:#168661;box-shadow:0 0 0 3px rgba(22, 134, 97,.1)}


/* Guest profile state. */
.guest-profile-state{max-width:620px;padding:28px 4px}.guest-profile-state h3{margin:8px 0;font-size:24px}.guest-profile-state p{max-width:520px;margin:0 0 18px;color:var(--muted);line-height:1.7}.guest-profile-state>div{display:flex;flex-wrap:wrap;gap:8px}


/* Respect guest-only hidden profile controls. */
#profile .profile-actions[hidden],#profile .tabs[hidden],#profile .profile-editor[hidden]{display:none!important}

/* Profile background editor */
.profile-cover-wrap {
  position: relative;
  height: 112px;
  overflow: hidden;
  background: var(--panel);
}
.profile-card .profile-cover { display: block; height: 100%; }
.profile-cover-action {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 8px;
  color: #fff;
  background: rgba(28,34,38,.72);
  box-shadow: 0 4px 12px rgba(0,0,0,.14);
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(8px);
  transition: transform 160ms ease, background 160ms ease;
}
.profile-cover-action:hover,
.profile-cover-action:focus-visible { background: rgba(20,25,29,.88); transform: translateY(-1px); }
.cover-editor-card { width: min(680px, 100%); }
.cover-preview-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 6;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.cover-preview-stage img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cover-preview-stage span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 8px;
  border-radius: 6px;
  color: #fff;
  background: rgba(25,31,35,.68);
  font-size: 12px;
}
.cover-editor-tip { margin: 12px 0; color: var(--muted); font-size: 13px; }
.cover-editor-actions { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 8px; align-items: center; }
/* Centered guest profile composition */
.profile-layout.guest-mode {
  width: min(100%, 1040px);
  margin: 34px auto 0;
  grid-template-columns: 360px minmax(0, 520px);
  justify-content: center;
  align-items: center;
  gap: 48px;
}
.profile-layout.guest-mode .profile-card {
  position: static;
  top: auto;
  width: 360px;
  box-shadow: 0 16px 36px rgba(36,45,56,.10);
}
.profile-layout.guest-mode .profile-cover-wrap { height: 146px; }
.profile-layout.guest-mode .profile-info { margin-top: -48px; padding-bottom: 22px; }
.profile-layout.guest-mode .profile-info .avatar { width: 96px; height: 96px; }
.profile-layout.guest-mode .profile-copy h2 { margin-top: 9px; font-size: 25px; }
.profile-layout.guest-mode .profile-copy p { font-size: 14px; }
.profile-layout.guest-mode .profile-content { align-self: center; }
.profile-layout.guest-mode .guest-profile-state { max-width: 520px; padding: 24px 0; }
.profile-layout.guest-mode .guest-profile-state h3 { margin: 8px 0 10px; font-size: 34px; line-height: 1.2; }
.profile-layout.guest-mode .guest-profile-state p { max-width: 520px; margin-bottom: 22px; font-size: 17px; line-height: 1.75; }
.profile-layout.guest-mode .guest-profile-state > div { gap: 10px; }
.profile-layout.guest-mode .guest-profile-state button { min-height: 46px; padding: 0 20px; font-size: 15px; }
@media (max-width: 980px) {
  .profile-layout.guest-mode {
    width: min(100%, 620px);
    margin-top: 12px;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 16px;
  }
  .profile-layout.guest-mode .guest-profile-state { text-align: center; }
  .profile-layout.guest-mode .guest-profile-state > div { justify-content: center; }
}
/* Diary location permission and manual fallback */
.location-settings {
  border: 1px solid #d7e2df;
  background: #f7fbfa;
  padding: 16px;
  display: grid;
  gap: 12px;
}
.location-settings[hidden] { display: none; }
.location-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.location-settings-head > div { display: grid; gap: 3px; }
.location-settings-head strong { font-size: 15px; color: #20262d; }
.location-settings-head span,
.location-settings p { color: #6b7886; font-size: 13px; }
.location-settings label { display: grid; gap: 7px; font-weight: 700; color: #536170; }
.location-settings input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d7e0e7;
  background: #fff;
  padding: 0 13px;
  font: inherit;
}
.location-settings input:focus {
  outline: 2px solid rgba(22, 167, 101, .18);
  border-color: #16a765;
}
.location-settings p { margin: 0; }
.location-settings button { min-height: 42px; white-space: nowrap; }

/* Single-column discovery feed keeps complete posts visible and interactive. */
#discover .discover-sort,
#discover .filter-bar,
#discover .discover-grid,
#discover .discover-pagination {
  width: min(100%, 820px);
  margin-left: auto;
  margin-right: auto;
}

#discover .discover-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

#discover .discover-feed-post {
  width: 100%;
  min-width: 0;
  padding: 20px;
}

#discover .discover-feed-post:hover {
  transform: none;
  box-shadow: 0 14px 34px rgba(36, 45, 56, 0.09);
}

#discover .discover-feed-post .photo-grid.single .post-image {
  height: auto;
  max-height: 760px;
  object-fit: contain;
}

#discover .discover-feed-post .photo-grid.two img,
#discover .discover-feed-post .photo-grid.three img {
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Distinct discovery presentation for text-only diaries */
#discover .discover-grid { align-items: start; }
.discover-text-entry {
  cursor: pointer;
  min-width: 0;
  padding: 18px 12px 12px;
  border: 0;
  border-top: 2px solid #20262d;
  border-bottom: 1px solid #d6dde2;
  background: transparent;
  box-shadow: none;
  color: #20262d;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.discover-text-entry:hover,
.discover-text-entry:focus-visible {
  background: rgba(255,255,255,.6);
  border-top-color: #16a765;
  outline: none;
}
.discover-text-content { min-height: 132px; display: flex; flex-direction: column; }
.discover-text-content time { color: #788492; font-size: 12px; }
.discover-text-copy {
  margin: 18px 0 14px;
  padding: 0;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 20px;
  line-height: 1.75;
  color: #20262d;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.discover-text-mood { align-self: flex-start; margin-top: auto; color: #168661; font-size: 12px; }
.discover-text-meta { margin: 10px 0 0; padding: 0; color: #74808d; font-size: 12px; }
.discover-text-entry .discover-card-author { padding: 12px 0 0; border-top: 1px solid rgba(139,151,161,.25); }


/* Separate photo albums from diary notebooks */
.image-album-section {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid #d8e0e5;
}
.compact-section-head { margin-bottom: 14px; }
.compact-section-head h3 { margin: 4px 0 0; font-size: 22px; }
.notebook-card-cover {
  width: 108px;
  min-width: 108px;
  height: 78px;
  display: grid;
  place-items: center;
  background: #eef5f2;
  color: #168661;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 16px;
}
.notebook-section + .notebook-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid #e1e7ea; }
.notebook-post-list { display: grid; gap: 8px; margin-top: 12px; }
.notebook-post-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #dfe6ea;
  background: #fff;
}
.notebook-post-item > img,
.notebook-text-mark {
  width: 56px;
  height: 56px;
  object-fit: cover;
}
.notebook-text-mark { display: grid; place-items: center; background: #edf4f1; color: #168661; font-family: serif; font-size: 20px; }
.notebook-post-copy { min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; }
.notebook-post-copy strong,
.notebook-post-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notebook-post-copy strong { color: #20262d; font-size: 14px; }
.notebook-post-copy span { margin-top: 5px; color: #71808d; font-size: 12px; }

/* Photo album information architecture */
.album-list-head {
  padding: 16px 18px;
  border-bottom: 1px solid #d9e1e5;
  background: #fff;
}

.album-list-head > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.album-list-head strong {
  color: #20262d;
  font-size: 18px;
}

.album-list-head span {
  padding: 3px 8px;
  border-radius: 999px;
  background: #e9f3ef;
  color: #168661;
  font-size: 12px;
  font-weight: 800;
}

.album-list-head p {
  margin: 5px 0 0;
  color: #71808d;
  font-size: 13px;
}

.photo-album-sidebar,
.photo-album-detail {
  border-color: #d4dde1;
  box-shadow: 0 8px 24px rgba(31, 45, 52, 0.06);
}

.photo-album-sidebar .album-form[hidden] {
  display: none;
}

.photo-album-sidebar .album-form {
  margin: 12px 12px 0;
  border: 1px solid #cfe0d9;
  border-radius: 6px;
}

.photo-album-sidebar .album-grid {
  min-height: 260px;
  padding: 10px;
  gap: 8px;
  align-content: start;
  background: #f6f8f9;
}

.photo-album-sidebar .album-card {
  position: relative;
  padding: 12px 54px 12px 12px;
  border: 1px solid #d8e0e4;
  border-radius: 6px;
  background: #fff;
}

.photo-album-sidebar .album-card:hover {
  border-color: #a9c9bd;
  background: #fbfdfc;
}

.photo-album-sidebar .album-card.active {
  border-color: #16a765;
  background: #eff8f4;
  box-shadow: inset 4px 0 0 #16a765, 0 4px 14px rgba(28, 55, 45, 0.07);
}

.photo-album-sidebar .album-card.active::after {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #168661;
  color: #fff;
  content: "当前";
  font-size: 11px;
  font-weight: 800;
}

.photo-album-sidebar .album-card:focus-visible {
  outline: 3px solid rgba(22, 167, 101, 0.2);
  outline-offset: 2px;
}

.album-pane-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -20px -20px 0;
  padding: 14px 20px;
  border-bottom: 1px solid #d9e1e5;
  background: #f7f9fa;
}

.album-pane-label span {
  color: #20262d;
  font-size: 15px;
  font-weight: 800;
}

.album-pane-label strong {
  color: #71808d;
  font-size: 12px;
}

.album-content-section {
  display: grid;
  gap: 12px;
}

.album-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.album-subhead strong {
  color: #20262d;
  font-size: 16px;
}

.album-subhead span {
  color: #71808d;
  font-size: 13px;
}

@media (max-width: 720px) {
  .photo-album-sidebar .album-grid { min-height: 0; }
  .photo-album-sidebar .album-card { padding-right: 48px; }
}
/* Real image library */
.image-library-panel {
  margin-bottom: 32px;
  border: 1px solid #d4dde1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(31, 45, 52, 0.05);
  overflow: hidden;
}

.image-library-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid #d9e1e5;
}

.image-library-head h3 {
  margin: 3px 0 5px;
  color: #20262d;
  font-size: 22px;
}

.image-library-head p {
  margin: 0;
  color: #71808d;
  font-size: 14px;
}

.image-library-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.image-library-actions > span {
  color: #65737f;
  font-size: 13px;
  font-weight: 800;
}

.image-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  padding: 16px;
  background: #f6f8f9;
}

.image-library-grid > .empty-state {
  grid-column: 1 / -1;
  min-height: 150px;
}

.image-library-item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d8e0e4;
  border-radius: 6px;
  background: #fff;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.image-library-item:hover {
  border-color: #a9c9bd;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(31, 45, 52, 0.08);
}

.image-library-preview {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #edf1f2;
  cursor: zoom-in;
}

.image-library-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.image-library-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px 7px;
}

.image-library-meta span {
  min-width: 0;
  overflow: hidden;
  color: #6e7c87;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-library-meta strong {
  color: #8a6b20;
  font-size: 11px;
  white-space: nowrap;
}

.image-library-meta strong.is-organized {
  color: #168661;
}

.image-library-organize {
  width: calc(100% - 20px);
  margin: 0 10px 10px;
  padding: 8px 10px;
  border: 1px solid #d5e2dd;
  border-radius: 6px;
  background: #f5faf8;
  color: #137f5b;
  font-size: 12px;
  font-weight: 800;
}

.image-library-organize:hover {
  border-color: #16a765;
  background: #eaf6f1;
}

@media (max-width: 720px) {
  .image-library-head { align-items: flex-start; flex-direction: column; }
  .image-library-actions { width: 100%; justify-content: space-between; }
  .image-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
}

.mobile-collection-switch {
  display: none;
}

/* Atmosphere-first diary composer and low-pressure post presentation. */
.atmosphere-compose-head p { margin: 6px 0 0; color: #68757d; }
.composer-day { display: grid; gap: 3px; }
.composer-day small { color: #8b969c; font-size: 12px; font-weight: 500; }
.atmosphere-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.atmosphere-fields input[type="datetime-local"] { min-height: 48px; }

.privacy-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
.privacy-picker legend { margin-bottom: 8px; color: #64717a; font-weight: 800; }
.privacy-picker label { position: relative; display: block; cursor: pointer; }
.privacy-picker input { position: absolute; opacity: 0; pointer-events: none; }
.privacy-picker label > span { display: grid; gap: 3px; min-height: 72px; padding: 12px; border: 1px solid #d8e0e3; border-radius: 7px; background: #fff; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.privacy-picker strong { color: #26313a; font-size: 14px; }
.privacy-picker small { color: #7c878e; font-size: 11px; font-weight: 500; line-height: 1.45; }
.privacy-picker input:checked + span { border-color: #168661; background: #edf8f4; box-shadow: inset 3px 0 0 #168661; }
.privacy-picker input:focus-visible + span { outline: 3px solid rgba(22, 134, 97, .16); outline-offset: 2px; }

.photo-style-panel { display: grid; gap: 10px; padding: 12px; border: 1px solid #dce4e6; border-radius: 7px; background: #f7f9f8; }
.photo-style-panel fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; }
.photo-style-panel legend { float: left; width: 54px; margin-right: 4px; color: #68757d; font-size: 12px; font-weight: 800; line-height: 32px; }
.photo-style-panel label { position: relative; display: inline-flex; cursor: pointer; }
.photo-style-panel input { position: absolute; opacity: 0; }
.photo-style-panel label span { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 10px; border: 1px solid #d8e0e3; border-radius: 6px; color: #64717a; background: #fff; font-size: 12px; }
.photo-style-panel input:checked + span { color: #fff; border-color: #26313a; background: #26313a; }
.photo-style-panel input:focus-visible + span { outline: 3px solid rgba(22, 134, 97, .16); outline-offset: 2px; }

.draft-status-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; color: #7b878e; font-size: 12px; }
.draft-status-bar .text-button { padding: 4px 0; color: #66737b; background: transparent; font-size: 12px; font-weight: 700; }
.draft-status-bar .text-button:hover { color: #202830; }

.diary-preview-atmosphere,.post-atmosphere { display: flex; flex-wrap: wrap; gap: 0; color: #728079; font-size: 12px; }
.diary-preview-atmosphere { margin: 14px 0 0; }
.post-atmosphere { margin: 10px 0 12px; }
.diary-preview-atmosphere span + span::before,.post-atmosphere span + span::before { content: "·"; margin: 0 7px; color: #a4ada9; }
.diary-preview-card > p.is-placeholder { color: #9aa4aa; }

.photo-grid.layout-carousel,.diary-preview-photos.layout-carousel { display: flex; grid-template-columns: none; gap: 8px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.photo-grid.layout-carousel img,.diary-preview-photos.layout-carousel img { flex: 0 0 min(82%, 620px); scroll-snap-align: start; }
.photo-grid.layout-story,.diary-preview-photos.layout-story { display: grid; grid-template-columns: minmax(0, 1fr) !important; }
.photo-grid.ratio-original img,.diary-preview-photos.ratio-original img { height: auto !important; max-height: 760px; object-fit: contain; background: #f3f5f4; }
.photo-grid.ratio-square img,.diary-preview-photos.ratio-square img { width: 100%; height: auto !important; aspect-ratio: 1; object-fit: cover; }
.photo-grid.ratio-portrait img,.diary-preview-photos.ratio-portrait img { width: 100%; height: auto !important; aspect-ratio: 4 / 5; object-fit: cover; }
.photo-grid.filter-warm img,.diary-preview-photos.filter-warm img { filter: saturate(.92) sepia(.14) brightness(1.03); }
.photo-grid.filter-cool img,.diary-preview-photos.filter-cool img { filter: saturate(.78) hue-rotate(8deg) contrast(.96); }
.photo-grid.filter-mono img,.diary-preview-photos.filter-mono img { filter: grayscale(1) contrast(.94); }
.photo-grid.frame-paper,.diary-preview-photos.frame-paper { gap: 12px; padding: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e3e7e6; }
.photo-grid.frame-paper img,.diary-preview-photos.frame-paper img { border-radius: 2px; }

.image-diary-copy { max-width: 760px; margin: 12px 0 8px; font-size: 16px; line-height: 1.8; white-space: pre-wrap; }
.low-pressure-actions { gap: 2px; padding-top: 4px; border-top: 1px solid #edf0ef; }
.low-pressure-actions button { min-width: 42px; height: 42px; padding: 0 10px; border-color: transparent; background: transparent; color: #68747c; }
.low-pressure-actions button:hover { border-color: #dce3e2; background: #f6f8f7; }
.low-pressure-actions button > span { font-size: 11px; font-weight: 600; }
.low-pressure-actions .post-manage { margin-left: auto; }
.post-card .comment-box { padding: 10px 12px; border: 1px solid #e4ebe8; background: #f8faf9; }
.text-diary-entry .post-atmosphere { margin-bottom: 0; }
.weather-only-field { width: min(100%, 320px); grid-template-columns: minmax(0, 1fr); }
.weather-only-field input { width: 100%; }

/* Mature share panel */
.share-card {
  width: min(560px, calc(100vw - 28px));
  padding: 22px;
}

.share-head {
  align-items: flex-start;
  margin-bottom: 16px;
}

.share-head p {
  max-width: 380px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

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

.share-channel {
  display: grid;
  gap: 4px;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.share-channel span {
  font-size: 14px;
  font-weight: 800;
}

.share-channel small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.share-channel.active {
  border-color: rgba(22, 167, 101, .35);
  background: var(--soft);
  box-shadow: inset 3px 0 0 var(--warm);
}

.share-channel:disabled {
  cursor: not-allowed;
  opacity: .6;
}

.share-link-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dce6e1;
  border-radius: 10px;
  background: #f8fbf9;
}

.share-link-meta,
.share-footnote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.share-link-meta strong {
  color: var(--leaf);
  font-size: 12px;
}

.share-card .link-box {
  overflow-wrap: anywhere;
  padding: 12px 14px;
  border: 1px solid #cfe1d9;
  border-radius: 8px;
  background: #fff;
  color: var(--leaf);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.share-card .share-password {
  border-color: #d5e3de;
  background: #fff;
  color: var(--muted);
}

.share-card .share-password strong {
  color: var(--ink);
}

.share-footnote {
  justify-content: flex-start;
  margin: 12px 0 14px;
  line-height: 1.6;
}

.share-copy-btn {
  width: 100%;
  min-height: 44px;
}

@media (max-width: 640px) {
  .share-card { padding: 18px; }
  .share-channel-list { grid-template-columns: 1fr; }
  .share-channel { min-height: 54px; }
}
.settings-card {
  width: min(760px, calc(100vw - 28px));
  max-height: min(860px, calc(100vh - 36px));
  overflow-y: auto;
}

.settings-section {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.settings-section strong,
.settings-section span {
  display: block;
}

.settings-section-heading {
  display: grid;
  gap: 2px;
}

.record-preference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.settings-field {
  display: grid;
  align-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
}

.settings-field span,
.settings-field strong,
.settings-field small {
  display: block;
}

.settings-field small {
  min-height: 38px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.settings-field select {
  width: 100%;
  min-height: 42px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
}

.record-toggle-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 2px;
}

.settings-actions > span {
  margin: 0;
  font-size: 13px;
}

.settings-actions .primary-btn {
  flex: 0 0 auto;
}

:root[data-theme="dark"] .settings-field {
  background: #0f1314;
  border-color: #283033;
}

:root[data-theme="dark"] .settings-field select {
  background: #111718;
  border-color: #354044;
  color: #eef2f1;
}

.settings-section span {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}

.theme-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}

.theme-switch button {
  min-height: 42px;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.theme-switch button.active {
  background: var(--ink);
  color: var(--paper);
}

:root[data-theme="dark"] .theme-switch button.active {
  background: #f3f5f4;
  color: #050607;
}
/* Dark theme comfort adjustments for diary hero and calendar. */
:root[data-theme="dark"] .diary-today,
:root[data-theme="dark"] .week-memory {
  background: #090b0c;
  border-color: #20282a;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}

:root[data-theme="dark"] .date-ticket {
  background: #121a18;
  border: 1px solid #263733;
  color: #dceee8;
  box-shadow: none;
}

:root[data-theme="dark"] .date-ticket strong {
  color: #dceee8;
}

:root[data-theme="dark"] .date-ticket span,
:root[data-theme="dark"] .diary-today-copy p,
:root[data-theme="dark"] .week-memory-head .eyebrow {
  color: #8d9b9f;
}

:root[data-theme="dark"] .diary-write-button {
  background: #17221f;
  border: 1px solid #2b423b;
  color: #e8f4f0;
  box-shadow: none;
}

:root[data-theme="dark"] .diary-write-button:hover {
  background: #1d2d28;
  border-color: #3b5b50;
}

:root[data-theme="dark"] .diary-calendar button {
  background: #121416;
  border-color: #252d30;
  color: #7f8a8e;
  box-shadow: none;
}

:root[data-theme="dark"] .diary-calendar button strong {
  color: #a6b0b4;
}

:root[data-theme="dark"] .diary-calendar button small {
  color: #6f797d;
}

:root[data-theme="dark"] .diary-calendar button.has-entry {
  background: #151d1b;
  border-color: #284038;
}

:root[data-theme="dark"] .diary-calendar button.today,
:root[data-theme="dark"] .diary-calendar button.selected {
  background: #1b2b26;
  border-color: #4f8873;
}

:root[data-theme="dark"] .diary-calendar button.today strong,
:root[data-theme="dark"] .diary-calendar button.selected strong,
:root[data-theme="dark"] .diary-calendar button.today small,
:root[data-theme="dark"] .diary-calendar button.selected small {
  color: #e6f3ef;
}
.follow-inline.is-following,
.public-profile-actions .is-following {
  border-color: #cfd8d6;
  background: #f5f7f6;
  color: #60706c;
}

.follow-inline.is-following:hover,
.public-profile-actions .is-following:hover {
  border-color: #e1b6b6;
  background: #fff6f6;
  color: #a64040;
}

:root[data-theme="dark"] .follow-inline.is-following,
:root[data-theme="dark"] .public-profile-actions .is-following {
  border-color: #364240;
  background: #131817;
  color: #9aa8a4;
}

:root[data-theme="dark"] .follow-inline.is-following:hover,
:root[data-theme="dark"] .public-profile-actions .is-following:hover {
  border-color: #684444;
  background: #221717;
  color: #d79a9a;
}
.refined-profile-head {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.refined-profile-head p {
  margin: 6px 0 0;
  line-height: 1.55;
}

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

.compact-stats > span {
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

.compact-stats strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.compact-stats small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

:root[data-theme="dark"] .refined-profile-head,
:root[data-theme="dark"] .compact-stats > span {
  background: #101415;
  border-color: #273033;
}
.profile-editor label {
  position: relative;
}

.profile-bio-hint {
  justify-self: end;
  margin-top: -4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

#editProfileBio {
  border-color: rgba(22, 167, 101, .26);
  color: var(--leaf);
}

#editProfileBio:hover {
  background: var(--soft);
}
/* Front-end share landing */
body.share-mode {
  min-height: 100vh;
  background: linear-gradient(135deg, #eef4f2 0%, #f8faf9 48%, #edf2f0 100%);
}
body.share-mode .workspace,
body.share-mode .phone-shell {
  display: none !important;
}
.share-landing[hidden] { display: none !important; }
.share-landing {
  min-height: 100vh;
  padding: 38px 18px;
  display: grid;
  place-items: center;
  color: var(--ink);
}
.share-landing-shell {
  width: min(760px, 100%);
  display: grid;
  gap: 16px;
}
.share-landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid rgba(35, 47, 42, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  color: #31423b;
  font-weight: 900;
  box-shadow: 0 10px 26px rgba(31, 42, 50, .08);
  backdrop-filter: blur(14px);
}
.share-landing-brand img { width: 28px; height: 28px; border-radius: 9px; }
.share-landing-card,
.share-target-card,
.share-landing-actions {
  border: 1px solid rgba(35, 47, 42, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 22px 58px rgba(31, 42, 50, .12);
  backdrop-filter: blur(18px);
}
.share-landing-card {
  display: grid;
  gap: 18px;
  padding: 26px;
}
.share-landing-intro h1 {
  margin: 6px 0 8px;
  font-size: clamp(28px, 6vw, 44px);
  line-height: 1.08;
  letter-spacing: 0;
}
.share-landing-intro p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}
.share-access-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.share-access-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 800;
}
.share-access-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #d8e2de;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.share-access-form.is-verified { opacity: .78; }
.share-landing-status {
  min-height: 24px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eef7f3;
  color: #51655d;
  font-size: 14px;
}
.share-target-card {
  overflow: hidden;
}
.share-public-card {
  display: grid;
  background: #fff;
}
.share-public-cover {
  width: 100%;
  max-height: 420px;
  overflow: hidden;
  background: #f3f6f5;
}
.share-public-cover img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: contain;
}
.share-public-body {
  display: grid;
  gap: 14px;
  padding: 22px;
}
.share-public-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.share-public-author img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.share-public-author strong { display: block; font-size: 15px; }
.share-public-author span { color: var(--muted); font-size: 13px; }
.share-public-body h2 {
  margin: 0;
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1.25;
}
.share-public-body p {
  margin: 0;
  color: #34413d;
  font-size: 17px;
  line-height: 1.85;
  white-space: pre-wrap;
}
.share-public-meta {
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: #edf7f2;
  color: #4f665d;
  font-size: 13px;
  font-weight: 800;
}
.share-target-photos {
  display: grid;
  gap: 8px;
}
.share-target-photos.single { grid-template-columns: minmax(0, 1fr); }
.share-target-photos.multi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.share-target-photos img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  border-radius: 10px;
  background: #f4f7f6;
}
.share-public-body footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  color: var(--muted);
  font-size: 13px;
}
.share-landing-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 12px;
}
.share-empty { padding: 24px; }

:root[data-theme="dark"] body.share-mode,
:root[data-theme="dark"] .share-landing {
  background: #050607;
}
:root[data-theme="dark"] .share-landing-brand,
:root[data-theme="dark"] .share-landing-card,
:root[data-theme="dark"] .share-target-card,
:root[data-theme="dark"] .share-landing-actions,
:root[data-theme="dark"] .share-public-card {
  border-color: rgba(255,255,255,.1);
  background: rgba(15, 17, 18, .94);
}
:root[data-theme="dark"] .share-access-form input,
:root[data-theme="dark"] .share-public-cover,
:root[data-theme="dark"] .share-target-photos img {
  background: #0b0d0e;
  border-color: #293035;
  color: #f4f6f5;
}
:root[data-theme="dark"] .share-landing-status,
:root[data-theme="dark"] .share-public-meta { background: #111817; color: #b8c6c0; }
:root[data-theme="dark"] .share-public-body p { color: #d9dedc; }

/* Voice notes */
.diary-voice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 12px;
  color: #56666f;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid #d6e1dc;
  border-radius: 8px;
  background: #fff;
}

.diary-voice-btn:hover {
  color: #1f2a31;
  border-color: #b8c8c4;
  background: #f7fbf9;
}

.diary-voice-btn.is-recording {
  color: #fff;
  border-color: #1aa56e;
  background: #1aa56e;
}
.voice-recorder,
.comment-voice-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid #dce7e1;
  border-radius: 10px;
  background: #f7fbf9;
  color: var(--muted);
  font-size: 13px;
}
.voice-recorder audio,
.comment-voice-row audio {
  width: min(280px, 100%);
  height: 34px;
}
.voice-player {
  display: grid;
  gap: 7px;
  width: min(420px, 100%);
  margin: 10px 0;
  padding: 11px 12px;
  border: 1px solid #dce7e1;
  border-radius: 12px;
  background: #f7fbf9;
}
.voice-player span {
  color: #56666f;
  font-size: 13px;
  font-weight: 800;
}
.voice-player audio {
  width: 100%;
  height: 36px;
}
.post-detail-comment-form {
  gap: 10px;
}
.comment-voice-row .ghost-btn {
  min-height: 34px;
  padding: 0 12px;
}
:root[data-theme="dark"] .diary-voice-btn {
  color: #d4dcdf;
  border-color: #2d3539;
  background: #101415;
}

:root[data-theme="dark"] .diary-voice-btn:hover {
  border-color: #465157;
  background: #151a1c;
}

:root[data-theme="dark"] .voice-recorder,
:root[data-theme="dark"] .comment-voice-row,
:root[data-theme="dark"] .voice-player {
  border-color: #252c30;
  background: #0d1112;
}
:root[data-theme="dark"] .voice-player span { color: #b8c3c8; }



/* Creator-style profile page */
#profile .profile-layout:not(.guest-mode) {
  width: min(100%, 1280px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

#profile .profile-layout:not(.guest-mode) .profile-card {
  position: relative;
  top: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  min-height: 238px;
  overflow: hidden;
  border-radius: 14px;
  background: #151a1f;
  color: #fff;
  box-shadow: 0 18px 42px rgba(23, 31, 38, .12);
}

#profile .profile-layout:not(.guest-mode) .profile-cover-wrap {
  position: absolute;
  inset: 0;
  height: auto;
  background: #151a1f;
}

#profile .profile-layout:not(.guest-mode) .profile-cover-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,13,16,.72), rgba(10,13,16,.42) 42%, rgba(10,13,16,.72));
}

#profile .profile-layout:not(.guest-mode) .profile-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) brightness(.82);
  transform: scale(1.02);
}

#profile .profile-layout:not(.guest-mode) .profile-cover-action {
  z-index: 3;
}

#profile .profile-layout:not(.guest-mode) .profile-info {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 42px 34px 30px;
  text-align: left;
}

#profile .profile-layout:not(.guest-mode) .profile-info .avatar {
  width: 104px;
  height: 104px;
  border: 4px solid rgba(255,255,255,.88);
  box-shadow: 0 16px 34px rgba(0,0,0,.26);
}

#profile .profile-layout:not(.guest-mode) .profile-copy h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 31px;
  line-height: 1.12;
}

#profile .profile-layout:not(.guest-mode) .profile-copy p {
  max-width: 560px;
  color: rgba(255,255,255,.78);
  font-size: 14px;
}

#profile .profile-layout:not(.guest-mode) .profile-stats {
  position: relative;
  z-index: 2;
  display: flex;
  align-self: end;
  gap: 18px;
  margin: 0;
  padding: 0 34px 34px 0;
}

#profile .profile-layout:not(.guest-mode) .profile-stats button {
  min-width: 74px;
  padding: 0;
  border: 0;
  color: rgba(255,255,255,.74);
  background: transparent;
  text-align: left;
}

#profile .profile-layout:not(.guest-mode) .profile-stats strong {
  color: #fff;
  font-size: 25px;
}

#profile .profile-layout:not(.guest-mode) .profile-stats span {
  color: rgba(255,255,255,.7);
  font-size: 13px;
}

#profile .profile-layout:not(.guest-mode) .profile-actions {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -22px 34px 28px 156px;
}

#profile .profile-layout:not(.guest-mode) .profile-actions button {
  min-height: 38px;
  min-width: 112px;
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.12);
  color: #fff;
  backdrop-filter: blur(10px);
}

#profile .profile-layout:not(.guest-mode) .profile-actions .primary-btn {
  border-color: #18a96f;
  background: #18a96f;
}

#profile .profile-content {
  display: grid;
  gap: 14px;
}

#profile .profile-content > .tabs {
  display: flex;
  gap: 10px;
  padding: 2px 0 10px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

#profile .profile-content > .tabs button {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
}

#profile .profile-content .profile-editor {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, .75fr) minmax(240px, 1.4fr) auto;
  align-items: end;
  gap: 12px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 10px 26px rgba(36,45,56,.06);
}

#profile .profile-panel {
  min-height: 260px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#profile .profile-panel .post-card {
  margin-bottom: 12px;
}

:root[data-theme="dark"] #profile .profile-layout:not(.guest-mode) .profile-card {
  border-color: #252b2f;
  background: #090b0c;
}

:root[data-theme="dark"] #profile .profile-content .profile-editor {
  background: #101415;
}

@media (max-width: 860px) {
  #profile .profile-layout:not(.guest-mode) .profile-card {
    grid-template-columns: minmax(0, 1fr);
    min-height: 260px;
  }
  #profile .profile-layout:not(.guest-mode) .profile-info {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
    padding: 34px 18px 18px;
  }
  #profile .profile-layout:not(.guest-mode) .profile-info .avatar {
    width: 82px;
    height: 82px;
  }
  #profile .profile-layout:not(.guest-mode) .profile-copy h2 { font-size: 24px; }
  #profile .profile-layout:not(.guest-mode) .profile-stats {
    padding: 0 18px 20px;
    gap: 14px;
  }
  #profile .profile-layout:not(.guest-mode) .profile-actions {
    margin: 0 18px 22px;
  }
  #profile .profile-layout:not(.guest-mode) .profile-actions button {
    flex: 1 1 calc(50% - 8px);
  }
  #profile .profile-content .profile-editor {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Quiet diary mood: lower social pressure and reduce bright action color. */
.nav-secondary { opacity: .72; }
.nav-secondary:hover { opacity: 1; }
.primary-btn,
.diary-write-button,
.diary-save-button,
.nav-primary-action,
.quick-compose-add,
.mobile-fab,
.avatar-login {
  background: #5f7386 !important;
  border-color: #5f7386 !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(57, 70, 83, .14) !important;
}

.primary-btn:hover,
.diary-write-button:hover,
.diary-save-button:hover,
.nav-primary-action:hover {
  background: #4d6173 !important;
  border-color: #4d6173 !important;
}

.diary-today,
.week-memory,
.continue-card,
.action-card,
.feed-empty,
.guest-feed-guide {
  background: linear-gradient(180deg, #ffffff, #f5f8fa) !important;
}

.diary-today .date-ticket {
  background: #e7eef3 !important;
  color: #354452 !important;
}

.segmented button.active,
.filter-bar button.active,
.tabs button.active {
  background: #1f252c !important;
  border-color: #1f252c !important;
  color: #fff !important;
}

.post-actions button,
.mobile-actions span {
  color: #6e7884;
}

.post-actions button strong,
.post-actions button span {
  font-weight: 650;
}

.action-dashboard .mini-card h3,
.continue-card h3 {
  color: #26313a;
}

:root[data-theme="dark"] .primary-btn,
:root[data-theme="dark"] .diary-write-button,
:root[data-theme="dark"] .diary-save-button,
:root[data-theme="dark"] .nav-primary-action,
:root[data-theme="dark"] .quick-compose-add,
:root[data-theme="dark"] .mobile-fab,
:root[data-theme="dark"] .avatar-login {
  background: #6f8395 !important;
  border-color: #6f8395 !important;
  color: #050607 !important;
}


/* Tag suggestions for the diary composer. */
.tag-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: -4px;
  padding: 10px 12px;
  border: 1px solid #d9e1e7;
  border-radius: 10px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 30px rgba(39,49,60,.08);
}
.tag-suggestions[hidden] { display: none !important; }
.tag-suggestions button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #d7e0e6;
  border-radius: 999px;
  background: #f6f8fa;
  color: #536576;
  font-size: 12px;
  font-weight: 700;
}
.tag-suggestions button:hover,
.tag-suggestions button:focus-visible {
  border-color: #9aabb8;
  background: #edf2f5;
  color: #27313a;
}
.text-diary-entry {
  padding-bottom: 58px;
}
.text-diary-entry p {
  padding-right: min(22%, 180px);
  padding-bottom: 12px;
}
.text-diary-entry .text-diary-date {
  right: 26px;
  bottom: 22px;
}
.image-diary-entry {
  padding-bottom: 48px;
}
.image-diary-entry .image-diary-date {
  right: 10px;
  bottom: 14px;
}
:root[data-theme="dark"] .tag-suggestions {
  border-color: #2a3235;
  background: rgba(15,18,19,.9);
}
:root[data-theme="dark"] .tag-suggestions button {
  border-color: #30393e;
  background: #111517;
  color: #aab5bb;
}

@media (max-width: 760px) {
  .text-diary-entry p { padding-right: 0; }
  .text-diary-entry { padding-bottom: 62px; }
}

/* Refine diary date spacing: keep the text natural, put time on its own quiet row. */
.text-diary-entry {
  display: grid;
  gap: 12px;
  padding: 24px 26px 22px;
}
.text-diary-entry p {
  padding-right: 0;
  padding-bottom: 0;
}
.text-diary-entry .text-diary-date {
  position: static;
  justify-self: end;
  margin-top: 6px;
  color: #72808a;
  line-height: 1.4;
}
.text-diary-entry .post-atmosphere {
  margin: 0;
}
.image-diary-entry {
  display: grid;
  gap: 10px;
  padding-bottom: 18px;
}
.image-diary-entry .image-diary-date {
  position: static;
  justify-self: end;
  margin-top: 2px;
  color: #72808a;
  line-height: 1.4;
}

/* Diary meta row: mood on the left, time on the right. */
.text-diary-entry {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}
.text-diary-entry h3,
.text-diary-entry p,
.text-diary-entry .voice-player {
  grid-column: 1 / -1;
}
.text-diary-entry .post-atmosphere {
  grid-column: 1;
  align-self: center;
  margin: 4px 0 0;
}
.text-diary-entry .text-diary-date {
  grid-column: 2;
  align-self: center;
  justify-self: end;
  margin-top: 4px;
  white-space: nowrap;
}
.image-diary-entry {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}
.image-diary-entry h3,
.image-diary-entry p,
.image-diary-entry .voice-player,
.image-diary-entry .photo-grid {
  grid-column: 1 / -1;
}
.image-diary-entry .post-atmosphere {
  grid-column: 1;
  align-self: center;
  margin: 4px 0 0;
}
.image-diary-entry .image-diary-date {
  grid-column: 2;
  align-self: center;
  justify-self: end;
  margin-top: 4px;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .text-diary-entry,
  .image-diary-entry { grid-template-columns: minmax(0, 1fr); }
  .text-diary-entry .text-diary-date,
  .image-diary-entry .image-diary-date { grid-column: 1; justify-self: start; }
}

/* Dark theme post readability polish. */
:root[data-theme="dark"] .post-card {
  background: #0c0f10;
  border-color: #242b2f;
  box-shadow: none;
}

:root[data-theme="dark"] .post-author-profile strong,
:root[data-theme="dark"] .post-card h3,
:root[data-theme="dark"] .image-diary-entry h3,
:root[data-theme="dark"] .text-diary-entry h3 {
  color: #dfe5e8;
}

:root[data-theme="dark"] .post-author-profile small,
:root[data-theme="dark"] .post-card .muted,
:root[data-theme="dark"] .text-diary-date,
:root[data-theme="dark"] .image-diary-date {
  color: #9aa7af;
}

:root[data-theme="dark"] .text-diary-entry,
:root[data-theme="dark"] .image-diary-entry {
  background: #101516;
  border-color: #2a3338;
}

:root[data-theme="dark"] .text-diary-entry p,
:root[data-theme="dark"] .image-diary-entry p {
  color: #c7d0d5;
}

:root[data-theme="dark"] .text-diary-entry .post-atmosphere,
:root[data-theme="dark"] .image-diary-entry .post-atmosphere {
  color: #aebbc1;
}

:root[data-theme="dark"] .post-actions {
  border-top-color: #2a3338;
}

:root[data-theme="dark"] .post-actions button {
  color: #9ba8b0;
  background: transparent;
  border-color: transparent;
}

:root[data-theme="dark"] .post-actions button:hover {
  color: #dce3e7;
  background: #14191b;
  border-color: #2a3338;
}

/* Final dark homepage cards override. */
:root[data-theme="dark"] .diary-today,
:root[data-theme="dark"] .week-memory,
:root[data-theme="dark"] .continue-card,
:root[data-theme="dark"] .action-card,
:root[data-theme="dark"] .feed-empty,
:root[data-theme="dark"] .guest-feed-guide {
  background: #0b0e10 !important;
  border-color: #242d32 !important;
  color: #dce3e7 !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .diary-today::after {
  display: none;
}

:root[data-theme="dark"] .diary-today-copy h1,
:root[data-theme="dark"] .week-memory-head strong,
:root[data-theme="dark"] .action-dashboard .mini-card h3,
:root[data-theme="dark"] .continue-card h3 {
  color: #e5ebee !important;
}

:root[data-theme="dark"] .date-ticket,
:root[data-theme="dark"] .diary-today .date-ticket {
  background: #151b1e !important;
  border-color: #303b42 !important;
  color: #cbd6dc !important;
}

:root[data-theme="dark"] .date-ticket strong {
  color: #dfe8ec !important;
}

:root[data-theme="dark"] .date-ticket span,
:root[data-theme="dark"] .diary-today-copy p,
:root[data-theme="dark"] .week-memory-head .eyebrow,
:root[data-theme="dark"] .week-memory-head span {
  color: #99a7af !important;
}

:root[data-theme="dark"] .diary-write-button {
  background: #6f8395 !important;
  border-color: #6f8395 !important;
  color: #061014 !important;
}

:root[data-theme="dark"] .diary-calendar button {
  background: #15191b !important;
  border-color: #2b3439 !important;
  color: #8d9aa3 !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .diary-calendar button strong {
  color: #b8c4ca !important;
}

:root[data-theme="dark"] .diary-calendar button small {
  color: #7f8c94 !important;
}

:root[data-theme="dark"] .diary-calendar button.has-entry,
:root[data-theme="dark"] .diary-calendar button.today,
:root[data-theme="dark"] .diary-calendar button.selected {
  background: #182124 !important;
  border-color: #40505a !important;
}

:root[data-theme="dark"] .diary-calendar button.today strong,
:root[data-theme="dark"] .diary-calendar button.selected strong,
:root[data-theme="dark"] .diary-calendar button.today small,
:root[data-theme="dark"] .diary-calendar button.selected small {
  color: #e2eaee !important;
}

/* Clean recorder preview: avoid native audio duration glitches. */
.voice-recorder audio[hidden],
.comment-voice-row audio[hidden] {
  display: none !important;
}

.voice-preview-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: min(420px, 100%);
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #dce5e7;
  border-radius: 999px;
  background: #ffffff;
}

.voice-preview-card[hidden] {
  display: none !important;
}

.voice-preview-card.compact {
  width: min(360px, 100%);
}

.voice-play-button {
  min-width: 58px;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid #d2dce1;
  border-radius: 999px;
  background: #f5f7f8;
  color: #26313a;
  font-size: 13px;
  font-weight: 800;
}

.voice-preview-track {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbe3e7;
}

.voice-preview-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #5f7386;
  transition: width .12s linear;
}

.voice-preview-duration {
  min-width: 38px;
  color: #66737b;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.voice-recorder > .ghost-btn,
.comment-voice-row > .ghost-btn {
  width: auto;
  min-height: 34px;
  padding: 0 14px;
}

:root[data-theme="dark"] .voice-preview-card {
  border-color: #293238;
  background: #111618;
}

:root[data-theme="dark"] .voice-play-button {
  border-color: #303a40;
  background: #171d20;
  color: #d8e1e5;
}

:root[data-theme="dark"] .voice-preview-track {
  background: #2a3338;
}

:root[data-theme="dark"] .voice-preview-track span {
  background: #8799a8;
}

:root[data-theme="dark"] .voice-preview-duration {
  color: #a7b4bc;
}

/* Moments-style profile cover: make the cover the visual center. */
#profile .profile-layout:not(.guest-mode) .profile-card {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 18px 42px rgba(23, 31, 38, .10);
}

#profile .profile-layout:not(.guest-mode) .profile-cover-wrap {
  position: relative;
  inset: auto;
  height: clamp(230px, 32vw, 360px);
  background: #14191d;
}

#profile .profile-layout:not(.guest-mode) .profile-cover-wrap::after {
  background: linear-gradient(180deg, rgba(10, 13, 16, .08), rgba(10, 13, 16, .16) 48%, rgba(10, 13, 16, .48));
}

#profile .profile-layout:not(.guest-mode) .profile-cover {
  display: block;
  height: 100%;
  object-fit: cover;
  filter: saturate(.96) brightness(.92);
  transform: none;
}

#profile .profile-layout:not(.guest-mode) .profile-cover-action {
  top: 16px;
  right: 16px;
  border-color: rgba(255,255,255,.28);
  background: rgba(22, 27, 31, .56);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.16);
}

#profile .profile-layout:not(.guest-mode) .profile-info {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 18px;
  align-items: end;
  margin: -58px 24px 0;
  padding: 0 0 18px;
  text-align: left;
}

#profile .profile-layout:not(.guest-mode) .profile-info .avatar {
  width: 118px;
  height: 118px;
  border: 5px solid var(--paper);
  box-shadow: 0 16px 30px rgba(0,0,0,.18);
}

#profile .profile-layout:not(.guest-mode) .profile-copy {
  min-width: 0;
  padding: 0 0 10px;
  background: transparent;
}

#profile .profile-layout:not(.guest-mode) .profile-copy h2 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.12;
}

#profile .profile-layout:not(.guest-mode) .profile-copy p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

#profile .profile-layout:not(.guest-mode) .profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 24px 14px;
  padding: 0;
}

#profile .profile-layout:not(.guest-mode) .profile-stats button {
  min-width: 0;
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  text-align: center;
}

#profile .profile-layout:not(.guest-mode) .profile-stats strong {
  color: var(--ink);
  font-size: 24px;
}

#profile .profile-layout:not(.guest-mode) .profile-stats span {
  color: var(--muted);
  font-size: 13px;
}

#profile .profile-layout:not(.guest-mode) .profile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 24px 24px;
}

#profile .profile-layout:not(.guest-mode) .profile-actions button {
  min-width: 0;
  min-height: 40px;
  border-color: var(--line);
  background: var(--paper);
  color: var(--ink);
  backdrop-filter: none;
}

#profile .profile-layout:not(.guest-mode) .profile-actions .primary-btn {
  border-color: var(--accent-soft);
  background: var(--accent-soft);
  color: var(--ink);
}

:root[data-theme="dark"] #profile .profile-layout:not(.guest-mode) .profile-card {
  background: #101415;
  color: #d8e0df;
}

:root[data-theme="dark"] #profile .profile-layout:not(.guest-mode) .profile-info .avatar {
  border-color: #101415;
}

:root[data-theme="dark"] #profile .profile-layout:not(.guest-mode) .profile-copy h2,
:root[data-theme="dark"] #profile .profile-layout:not(.guest-mode) .profile-stats strong,
:root[data-theme="dark"] #profile .profile-layout:not(.guest-mode) .profile-actions button {
  color: #d8e0df;
}

:root[data-theme="dark"] #profile .profile-layout:not(.guest-mode) .profile-stats button,
:root[data-theme="dark"] #profile .profile-layout:not(.guest-mode) .profile-actions button {
  border-color: #263033;
  background: #151a1d;
}

/* Compact profile stats: keep counts readable without dominating the profile card. */
#profile .profile-layout:not(.guest-mode) .profile-stats {
  gap: 6px;
  margin: 0 24px 12px;
}

#profile .profile-layout:not(.guest-mode) .profile-stats button {
  min-height: 54px;
  padding: 8px 6px;
  border-radius: 8px;
}

#profile .profile-layout:not(.guest-mode) .profile-stats strong {
  font-size: 20px;
  line-height: 1.05;
}

#profile .profile-layout:not(.guest-mode) .profile-stats span {
  margin-top: 4px;
  font-size: 12px;
}

/* Dark mode polish for notebooks and photo albums. */
:root[data-theme="dark"] #album .section-head,
:root[data-theme="dark"] #materials .section-head {
  background: transparent;
}

:root[data-theme="dark"] .image-library-panel,
:root[data-theme="dark"] .photo-album-sidebar,
:root[data-theme="dark"] .photo-album-detail,
:root[data-theme="dark"] #album .album-sidebar,
:root[data-theme="dark"] #album .album-detail {
  border-color: #263033;
  background: #101415;
  box-shadow: none;
}

:root[data-theme="dark"] .image-library-head,
:root[data-theme="dark"] .album-list-head {
  border-color: #263033;
  background: #101415;
}

:root[data-theme="dark"] .image-library-head h3,
:root[data-theme="dark"] .album-list-head strong,
:root[data-theme="dark"] .album-pane-label span,
:root[data-theme="dark"] .album-subhead strong,
:root[data-theme="dark"] .notebook-card h3,
:root[data-theme="dark"] .album-card h3,
:root[data-theme="dark"] .notebook-post-copy strong {
  color: #d8e0df;
}

:root[data-theme="dark"] .image-library-head p,
:root[data-theme="dark"] .image-library-actions > span,
:root[data-theme="dark"] .album-list-head p,
:root[data-theme="dark"] .album-pane-label strong,
:root[data-theme="dark"] .album-subhead span,
:root[data-theme="dark"] .notebook-post-copy span {
  color: #94a1a4;
}

:root[data-theme="dark"] .image-library-item,
:root[data-theme="dark"] .photo-album-sidebar .album-card,
:root[data-theme="dark"] #album .album-card,
:root[data-theme="dark"] .notebook-post-item {
  border-color: #263033;
  background: #151a1d;
}

:root[data-theme="dark"] .image-library-item:hover,
:root[data-theme="dark"] .photo-album-sidebar .album-card:hover,
:root[data-theme="dark"] #album .album-card:hover {
  border-color: #3a474b;
  background: #182022;
  box-shadow: none;
}

:root[data-theme="dark"] .photo-album-sidebar .album-card.active,
:root[data-theme="dark"] #album .album-card.active {
  border-color: #6f8390;
  background: #1b2428;
  box-shadow: inset 4px 0 0 #7f96a6;
}

:root[data-theme="dark"] .album-cover-placeholder,
:root[data-theme="dark"] .notebook-text-mark {
  background: #202a2d;
  color: #a9bac3;
}

:root[data-theme="dark"] .album-cover-placeholder::before {
  background: rgba(255,255,255,.10);
}

:root[data-theme="dark"] .album-cover-placeholder::after {
  background: #172023;
}

:root[data-theme="dark"] .image-library-meta span,
:root[data-theme="dark"] .album-card p,
:root[data-theme="dark"] .album-card span,
:root[data-theme="dark"] .album-detail-head p {
  color: #94a1a4;
}

:root[data-theme="dark"] .image-library-meta strong,
:root[data-theme="dark"] .image-library-meta strong.is-organized {
  color: #a9bac3;
}

:root[data-theme="dark"] .image-library-organize {
  border-color: #2b373a;
  background: #101415;
  color: #d8e0df;
}

:root[data-theme="dark"] .image-library-organize:hover {
  border-color: #6f8390;
  background: #182022;
}

:root[data-theme="dark"] .album-form {
  border-color: #263033;
  background: #101415;
}

/* Keep profile name and bio inside the cover safe area. */
#profile .profile-layout:not(.guest-mode) .profile-cover-wrap::after {
  background: linear-gradient(180deg, rgba(10,13,16,.02), rgba(10,13,16,.10) 46%, rgba(10,13,16,.72));
}

#profile .profile-layout:not(.guest-mode) .profile-info {
  z-index: 3;
  align-items: end;
  margin: -118px 24px 0;
  padding: 0 0 24px;
}

#profile .profile-layout:not(.guest-mode) .profile-copy {
  padding-bottom: 18px;
}

#profile .profile-layout:not(.guest-mode) .profile-copy h2 {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.28);
}

#profile .profile-layout:not(.guest-mode) .profile-copy p {
  color: rgba(255,255,255,.78);
  text-shadow: 0 1px 8px rgba(0,0,0,.24);
}

/* Privacy settings */
.privacy-toggle-list {
  display: grid;
  gap: 10px;
}

.privacy-toggle-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
}

.privacy-toggle-row span,
.privacy-toggle-row strong,
.privacy-toggle-row small {
  display: block;
}

.privacy-toggle-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.privacy-toggle-row input {
  appearance: none;
  position: relative;
  width: 46px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #cfd7dc;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.privacy-toggle-row input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .22);
  transition: transform .18s ease;
}

.privacy-toggle-row input:checked {
  background: #607282;
  border-color: #607282;
}

.privacy-toggle-row input:checked::after {
  transform: translateX(20px);
}

:root[data-theme="dark"] .privacy-toggle-row {
  background: #0f1314;
  border-color: #283033;
}

:root[data-theme="dark"] .privacy-toggle-row input {
  background: #2b3337;
  border-color: #3b454a;
}

:root[data-theme="dark"] .privacy-toggle-row input:checked {
  background: #7c8d9b;
  border-color: #7c8d9b;
}

/* Profile cover layout fix: keep cover, identity and stats in separate layers. */
#profile .profile-layout:not(.guest-mode) .profile-card {
  overflow: hidden;
}

#profile .profile-layout:not(.guest-mode) .profile-cover-wrap {
  height: clamp(230px, 30vw, 340px);
}

#profile .profile-layout:not(.guest-mode) .profile-cover-wrap::after {
  background: linear-gradient(180deg, rgba(8, 10, 12, .02), rgba(8, 10, 12, .12) 50%, rgba(8, 10, 12, .66));
}

#profile .profile-layout:not(.guest-mode) .profile-info {
  position: relative;
  z-index: 2;
  margin: -104px 24px 0;
  padding: 0 0 28px;
  min-height: 132px;
  align-items: end;
}

#profile .profile-layout:not(.guest-mode) .profile-info .avatar {
  width: 112px;
  height: 112px;
  min-width: 112px;
}

#profile .profile-layout:not(.guest-mode) .profile-copy {
  padding-bottom: 18px;
}

#profile .profile-layout:not(.guest-mode) .profile-stats {
  position: relative;
  z-index: 1;
  margin: 0 24px 14px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
}

#profile .profile-layout:not(.guest-mode) .profile-stats button {
  min-height: 52px;
  background: var(--panel);
}

:root[data-theme="dark"] #profile .profile-layout:not(.guest-mode) .profile-stats {
  border-top-color: #263033;
}

:root[data-theme="dark"] #profile .profile-layout:not(.guest-mode) .profile-stats button {
  background: #151a1d;
}

/* Profile edit consolidation and cleaner stats */
#profile .profile-layout:not(.guest-mode) .profile-cover,
#profile .profile-layout:not(.guest-mode) .profile-info .avatar {
  cursor: pointer;
}

#profile .profile-layout:not(.guest-mode) .profile-cover-wrap::before {
  content: "点击更换背景";
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 3;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(15, 18, 21, .42);
  color: rgba(255,255,255,.9);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

#profile .profile-layout:not(.guest-mode) .profile-cover-wrap:hover::before {
  opacity: 1;
  transform: translateY(0);
}

#profile .profile-layout:not(.guest-mode) .profile-info .avatar:hover {
  filter: brightness(.92);
}

#profile .profile-layout:not(.guest-mode) .profile-stats {
  display: flex;
  justify-content: flex-start;
  gap: 28px;
  margin: 0 24px 18px;
  padding: 4px 0 0;
  border-top: 0;
}

#profile .profile-layout:not(.guest-mode) .profile-stats button {
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  text-align: left;
}

#profile .profile-layout:not(.guest-mode) .profile-stats button:hover {
  background: transparent;
  color: var(--ink);
}

#profile .profile-layout:not(.guest-mode) .profile-stats strong {
  font-size: 18px;
  line-height: 1.1;
}

#profile .profile-layout:not(.guest-mode) .profile-stats span {
  margin-top: 3px;
  font-size: 12px;
}

#profile .profile-layout:not(.guest-mode) .profile-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#profile .profile-layout:not(.guest-mode) .profile-editor {
  grid-template-columns: minmax(140px, .55fr) minmax(160px, .75fr) minmax(220px, 1fr) auto;
}

:root[data-theme="dark"] #profile .profile-layout:not(.guest-mode) .profile-stats button {
  background: transparent;
  border-color: transparent;
}

:root[data-theme="dark"] #profile .profile-layout:not(.guest-mode) .profile-stats button:hover {
  color: #eef3f2;
}

/* Final dark-mode polish for photo albums: remove light seams and make panes consistent. */
:root[data-theme="dark"] .image-album-section {
  border-top-color: #263033;
}

:root[data-theme="dark"] .photo-album-workspace,
:root[data-theme="dark"] #album .album-workspace {
  background: transparent;
}

:root[data-theme="dark"] .photo-album-sidebar,
:root[data-theme="dark"] .photo-album-detail,
:root[data-theme="dark"] #album .album-sidebar,
:root[data-theme="dark"] #album .album-detail {
  color: #d8e0df;
  border-color: #263033;
  background: #0f1314;
  box-shadow: none;
}

:root[data-theme="dark"] .photo-album-sidebar .album-grid,
:root[data-theme="dark"] #album .album-grid {
  background: #0b0e0f;
  border-top: 1px solid #263033;
}

:root[data-theme="dark"] .album-list-head,
:root[data-theme="dark"] .album-pane-label,
:root[data-theme="dark"] .album-detail-head {
  color: #d8e0df;
  border-color: #263033;
  background: #0f1314;
}

:root[data-theme="dark"] .album-list-head strong,
:root[data-theme="dark"] .album-pane-label strong,
:root[data-theme="dark"] .album-detail-head h3 {
  color: #edf2f1;
}

:root[data-theme="dark"] .album-list-head span,
:root[data-theme="dark"] .album-list-head p,
:root[data-theme="dark"] .album-pane-label span,
:root[data-theme="dark"] .album-detail-head p {
  color: #94a1a4;
}

:root[data-theme="dark"] .photo-album-sidebar .album-card,
:root[data-theme="dark"] #album .album-card {
  border-color: #283236;
  background: #151a1d;
  color: #d8e0df;
}

:root[data-theme="dark"] .photo-album-sidebar .album-card.active,
:root[data-theme="dark"] #album .album-card.active {
  border-color: #7f96a6;
  background: #172124;
  box-shadow: inset 4px 0 0 #7f96a6;
}

:root[data-theme="dark"] .photo-album-sidebar .album-card.active::after {
  background: #7f96a6;
  color: #081012;
}

:root[data-theme="dark"] .album-cover,
:root[data-theme="dark"] .album-cover-placeholder {
  border-color: #2b383d;
  background: #1a2225;
}

:root[data-theme="dark"] .album-detail .empty-state,
:root[data-theme="dark"] .album-sidebar .empty-state {
  color: #94a1a4;
  background: #111719;
  border-color: #263033;
}

/* Unified visitor profile: mirrors the personal Moments-style profile. */
#userProfileModal .social-modal-card {
  width: min(980px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
}
#userProfileModal .section-head {
  margin: 0;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line);
}
#userProfileModal .public-profile {
  gap: 18px;
  max-height: min(82vh, 860px);
  padding: 18px 20px 24px;
  overflow-y: auto;
}
.public-profile-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 18px 42px rgba(23, 31, 38, .1);
}
.public-profile-cover-wrap {
  position: relative;
  height: clamp(230px, 30vw, 340px);
  overflow: hidden;
  background: #14191d;
}
.public-profile-cover-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 10, 12, .02), rgba(8, 10, 12, .12) 50%, rgba(8, 10, 12, .68));
  pointer-events: none;
}
.public-profile-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.96) brightness(.92);
}
.public-profile-identity {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: end;
  min-height: 130px;
  margin: -104px 24px 0;
  padding-bottom: 26px;
}
.public-profile-avatar {
  width: 112px;
  height: 112px;
  border: 5px solid var(--paper);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .2);
}
.public-profile-copy {
  min-width: 0;
  padding-bottom: 16px;
}
.public-profile-copy strong {
  display: block;
  color: #fff;
  font-size: 30px;
  line-height: 1.12;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .34);
}
.public-profile-copy span,
.public-profile-copy p {
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .28);
}
.public-profile-copy span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
}
.public-profile-copy p {
  max-width: 560px;
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 1.55;
}
.public-profile-stats {
  display: flex;
  gap: 30px;
  margin: 0 24px 18px;
}
.public-profile-stats > span {
  display: grid;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
}
.public-profile-stats strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.1;
}
.public-profile-stats small {
  color: var(--muted);
  font-size: 12px;
}
#userProfileModal .public-profile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 24px 22px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
#userProfileModal .public-profile-actions:has(> button:only-child) {
  grid-template-columns: minmax(0, 240px);
}
#userProfileModal .public-profile-actions button {
  width: 100%;
}
.public-profile-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid var(--line);
}
.public-profile-section-title strong {
  color: var(--ink);
  font-size: 19px;
}
.public-profile-section-title span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}
:root[data-theme="dark"] .public-profile-card {
  border-color: #273033;
  background: #0d1112;
  box-shadow: none;
}
:root[data-theme="dark"] .public-profile-avatar {
  border-color: #0d1112;
}
/* Threaded comment interactions */
.post-detail-comments {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  overflow: hidden;
}
.post-detail-comments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.post-detail-comments-head span { color: var(--muted); font-size: 13px; }
.post-detail-comments-scroll {
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #aeb9c0 transparent;
}
.post-detail-comments-scroll::-webkit-scrollbar { width: 7px; }
.post-detail-comments-scroll::-webkit-scrollbar-thumb { border-radius: 8px; background: #aeb9c0; }
.detail-comment {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  touch-action: pan-y;
  user-select: none;
}
.detail-comment:last-child { border-bottom: 0; }
.detail-comment > img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.detail-comment-body { min-width: 0; }
.detail-comment-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.detail-comment-head time { flex: none; color: var(--muted); font-size: 12px; }
.detail-comment-body p { margin: 5px 0 6px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; user-select: text; }
.detail-comment-reply-label { margin-top: 3px; color: var(--muted); font-size: 12px; }
.detail-comment-reply-label span { color: var(--ink); }
.detail-comment-reply {
  min-height: 28px;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
}
.detail-comment-reply:hover { color: var(--ink); }
.comment-reply-target {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--muted);
  background: var(--soft);
  font-size: 13px;
}
.comment-reply-target[hidden] { display: none; }
.comment-reply-target strong { color: var(--ink); }
.comment-reply-target button { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 20px; }
.comment-action-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(12, 16, 19, .42);
}
.comment-action-sheet {
  width: min(340px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}
.comment-action-sheet > div { display: grid; gap: 3px; padding: 8px 8px 12px; }
.comment-action-sheet > div span { color: var(--muted); font-size: 12px; }
.comment-action-sheet > button { width: 100%; min-height: 44px; margin-top: 6px; border-radius: 7px; }
.comment-delete-action { border: 1px solid #e5bcbc; color: #b43838; background: #fff8f8; }
.comment-cancel-action { border: 1px solid var(--line); color: var(--ink); background: var(--soft); }
:root[data-theme="dark"] .post-detail-comments-scroll { scrollbar-color: #526069 transparent; }
:root[data-theme="dark"] .comment-delete-action { border-color: #5b3030; color: #ef9b9b; background: #1b1010; }


/* Desktop editorial workspace: warm, quiet and diary-led. */
.desktop-nav-group{display:none}
@media (min-width:761px){
.workspace{grid-template-columns:248px minmax(0,1fr);background:#f8f4ed}
.sidebar{z-index:8;padding:30px 22px 24px;gap:4px;overflow-y:auto;color:#493e35;background:#f2ece2;border-right:1px solid #e2d7c8}
.brand{grid-template-columns:48px minmax(0,1fr);justify-items:start;align-items:center;gap:14px;margin:0 4px 30px;text-align:left}
.brand-mark{width:48px;height:48px;border-radius:10px}.brand strong{color:#28221d;font-family:"Songti SC","STSong","SimSun",serif;font-size:24px}.brand span{display:block;margin-top:3px;color:#9a705b;font-size:9px;letter-spacing:2px}
.desktop-nav-group{display:block;margin:18px 14px 7px;color:#a58c7a;font-size:10px;font-weight:700;letter-spacing:1.8px}
.nav-item{position:relative;min-height:42px;padding:0 14px 0 44px;border-radius:6px;text-align:left;color:#705f51;font-size:14px;line-height:42px}
.nav-item::before{position:absolute;left:17px;top:50%;width:9px;height:9px;border:1px solid currentColor;border-radius:50%;content:"";transform:translateY(-50%)}
.nav-item.active,.nav-item:hover{color:#2d2722;background:#fffaf3}.nav-item.active{font-weight:800;box-shadow:0 8px 22px rgba(72,52,36,.06)}.nav-item.active::before{border-color:#d86b4a;background:#d86b4a;box-shadow:inset 0 0 0 2px #fffaf3}
.nav-item.nav-primary-action,.nav-item.nav-primary-action:hover,.nav-item.nav-primary-action.active{min-height:42px;margin:0;color:#705f51!important;background:transparent!important;border:0!important;box-shadow:none!important;transform:none}
.nav-item.nav-primary-action:hover,.nav-item.nav-primary-action.active{color:#2d2722!important;background:#fffaf3!important}.nav-item.nav-primary-action::before{border:0;border-radius:0;background:transparent;box-shadow:none;content:"+";font-size:18px}
.app-area{background:#fbf8f2}.window-bar{display:none}.topbar{top:0;min-height:82px;padding:18px 38px;background:rgba(251,248,242,.96);border-color:#e7ddd0;backdrop-filter:blur(18px)}
.topbar::before{color:#907766;content:"日迹 / 记录生活的片刻";font-size:12px;white-space:nowrap}.topbar .search{width:min(300px,26vw);min-height:44px;margin-left:auto;border-color:#e2d6c7;border-radius:7px;background:#fffaf4}.topbar .search>span{display:none}
.top-actions{width:auto;flex:0 0 auto}.top-actions .ghost-btn{min-height:40px;padding-inline:13px;border-color:#e2d6c7;background:#fffaf4}.avatar-login{border-color:#dca07f!important;background:#dca07f!important;color:#fff!important;box-shadow:none!important}
.view.active{padding:42px 42px 56px}
#feed.active{width:min(100%,1430px);margin:0 auto;display:grid;grid-template-columns:minmax(0,920px) minmax(280px,330px);grid-template-rows:auto auto auto;align-items:start;column-gap:26px;row-gap:22px}
#feed>.diary-today,#feed>.week-memory,#feed>.diary-section-head,#feed>.feed-layout{width:auto;margin:0}
#feed>.diary-section-head{grid-column:1;grid-row:1;align-items:end}.diary-section-head .eyebrow{color:#d56543;font-size:11px;font-weight:800;letter-spacing:1.6px}.diary-section-head h2{margin-top:6px;color:#27221e;font-family:"Songti SC","STSong","SimSun",serif;font-size:clamp(38px,4vw,58px);line-height:1}
.diary-section-head .segmented{padding:0;gap:4px;background:transparent}.diary-section-head .segmented button{min-height:36px;padding:0 15px;border:0;border-bottom:2px solid transparent;border-radius:0;color:#8a7565;background:transparent}.diary-section-head .segmented button.active{color:#27221e!important;background:transparent!important;border-color:#d56543!important}
#feed>.diary-today{grid-column:1;grid-row:2}.diary-today{min-height:92px;grid-template-columns:58px minmax(0,1fr) auto;gap:16px;padding:16px 20px;border-color:#e4d8ca;border-radius:7px;background:#fffaf4!important;box-shadow:0 14px 32px rgba(77,56,39,.06)}.diary-today::after{display:none}
.diary-today .date-ticket{width:50px;height:58px;border:0;border-radius:50%;color:#fff!important;background:#dea47d!important}.diary-today .date-ticket strong{font-size:21px}.diary-today .date-ticket span,.diary-today-copy .eyebrow{display:none}.diary-today-copy h1{margin:0 0 4px;font-family:"Songti SC","STSong","SimSun",serif;font-size:20px}.diary-today-copy p{color:#8b7667;font-size:13px}
.diary-write-button,.diary-write-button:hover{min-height:42px;padding:0 18px;border-color:#2d2925!important;border-radius:6px;background:#2d2925!important;color:#fff!important;box-shadow:0 8px 18px rgba(45,41,37,.14)!important}
#feed>.week-memory{grid-column:2;grid-row:1/span 2}.week-memory{min-height:232px;padding:22px;border:0;border-radius:8px;color:#fff8ed;background:#2d2925!important;box-shadow:none}.week-memory .eyebrow{color:#c7aa8d}.week-memory-head{align-items:flex-start;margin-bottom:22px}.week-memory-head>div{display:grid;gap:5px}.week-memory-head strong{color:#fff8ed;font-family:"Songti SC","STSong","SimSun",serif;font-size:22px}.week-memory .ghost-btn{border-color:#5c5148;color:#fff8ed;background:#38322d}
.week-memory .diary-calendar{gap:5px}.week-memory .diary-calendar button{height:54px;padding:4px 1px;color:#b9aa9d;background:#38332e}.week-memory .diary-calendar button strong{color:#fff8ed;font-size:14px}.week-memory .diary-calendar button.has-entry{border-color:#b88d68}
#feed>.feed-layout{display:contents}#feed .timeline{grid-column:1;grid-row:3;gap:18px}#feed .right-panel{grid-column:2;grid-row:3;gap:16px}
#feed .post-card{padding:22px 24px;border-color:#e4d8ca;border-radius:7px;background:#fffdf9;box-shadow:0 14px 34px rgba(77,56,39,.055)}#feed .post-author{margin-bottom:15px}#feed .post-author-profile img{width:42px;height:42px}#feed .post-author-profile strong{color:#332b25;font-size:15px}#feed .post-author-profile small{color:#988275;font-size:12px}
#feed .text-diary-entry,#feed .image-diary-entry{border-color:#eadfd2;background:#fffaf4}#feed .post-actions{padding-top:12px;border-top:1px solid #eee4d8}#feed .post-actions button{border:0;color:#877466;background:transparent}#feed .comment-box{border-color:#eadfd2;background:#f8f2ea}
#feed .mini-card{padding:18px;border-color:#e4d8ca;border-radius:7px;background:#fffdf9;box-shadow:none}#feed .mini-card h3{color:#332b25;font-family:"Songti SC","STSong","SimSun",serif}#feed .mini-card p{color:#8c786a}#feed .continue-card{background:#f3e7d8!important}#feed .continue-card .primary-btn{border-color:#d56543!important;background:#d56543!important;color:#fff!important;box-shadow:none!important}
:root[data-theme="dark"] .sidebar{background:#11100f;border-color:#2c2925}:root[data-theme="dark"] .brand strong,:root[data-theme="dark"] .nav-item.active,:root[data-theme="dark"] .nav-item:hover{color:#f5ede4}:root[data-theme="dark"] .nav-item.active,:root[data-theme="dark"] .nav-item:hover{background:#201d1a}
:root[data-theme="dark"] .app-area,:root[data-theme="dark"] .workspace,:root[data-theme="dark"] .topbar{background:#0b0a09}:root[data-theme="dark"] #feed .post-card,:root[data-theme="dark"] #feed .mini-card,:root[data-theme="dark"] #feed .diary-today{border-color:#2b2723;background:#11100f!important}:root[data-theme="dark"] .diary-section-head h2,:root[data-theme="dark"] #feed .post-author-profile strong,:root[data-theme="dark"] #feed .mini-card h3{color:#f4ede4}:root[data-theme="dark"] #feed .text-diary-entry,:root[data-theme="dark"] #feed .image-diary-entry,:root[data-theme="dark"] #feed .comment-box{border-color:#2b2723;background:#171513}
}
/* Desktop editorial responsive corrections. */
@media (min-width:1151px){
  #feed.active{grid-template-columns:minmax(0,1fr) minmax(260px,300px)}
  .week-memory .diary-calendar{grid-template-columns:repeat(7,minmax(0,1fr))}
}
@media (min-width:761px) and (max-width:1150px){
  .workspace{grid-template-columns:210px minmax(0,1fr)}
  .sidebar{padding-right:16px;padding-left:16px}
  .view.active{padding:32px 28px 48px}
  #feed.active{grid-template-columns:minmax(0,1fr);row-gap:18px}
  #feed>.diary-section-head{grid-column:1;grid-row:1}
  #feed>.diary-today{grid-column:1;grid-row:2}
  #feed>.week-memory{grid-column:1;grid-row:3}
  #feed>.feed-layout{display:contents}
  #feed .timeline{grid-column:1;grid-row:4}
  #feed .right-panel{grid-column:1;grid-row:5;grid-template-columns:repeat(2,minmax(0,1fr))}
  .week-memory .diary-calendar{grid-template-columns:repeat(7,minmax(0,1fr))}
}
/* Keep the diary timeline visible without letting it dominate the desktop page. */
@media (min-width:761px){
  .week-memory{min-height:0;padding:14px 16px}
  .week-memory-head{align-items:center;margin-bottom:10px}
  .week-memory-head>div{display:flex;align-items:baseline;gap:8px}
  .week-memory-head strong{font-size:17px}
  .week-memory .ghost-btn{min-height:32px;padding:0 10px;font-size:12px}
  .week-memory .diary-calendar{gap:4px}
  .week-memory .diary-calendar button{height:42px;padding:3px 1px}
  .week-memory .diary-calendar button small{font-size:9px}
  .week-memory .diary-calendar button strong{font-size:13px}
}
/* The timeline belongs to the diary heading, not the supporting right rail. */
@media (min-width:761px){
  #feed>.week-memory{grid-column:1;grid-row:2}
  #feed>.diary-today{grid-column:1;grid-row:3}
  #feed .timeline{grid-column:1;grid-row:4}
  #feed .right-panel{grid-column:2;grid-row:2/span 3}
}
@media (min-width:761px) and (max-width:1150px){
  #feed>.week-memory{grid-column:1;grid-row:2}
  #feed>.diary-today{grid-column:1;grid-row:3}
  #feed .timeline{grid-column:1;grid-row:4}
  #feed .right-panel{grid-column:1;grid-row:5}
}
/* Desktop diary rhythm refinements. */
@media (min-width:761px){
  .nav-item.nav-primary-action,
  .nav-item.nav-primary-action:hover,
  .nav-item.nav-primary-action.active{display:flex;align-items:center;gap:13px;padding-left:14px;line-height:1}
  .nav-item.nav-primary-action::before{position:static;display:grid;width:16px;height:16px;place-items:center;line-height:1;transform:none}
  .week-memory{color:#5f554d;background:#eee8e0!important;border:1px solid #e3d9ce}
  .week-memory .eyebrow{color:#97877a}
  .week-memory-head strong{color:#403832}
  .week-memory .ghost-btn{border-color:#d5c9bc;color:#5b5149;background:#f7f2ec}
  .week-memory .diary-calendar button{color:#9b8f84;background:#e8e0d7}
  .week-memory .diary-calendar button strong{color:#61574f}
  .week-memory .diary-calendar button.has-entry{border-color:#c6a98f}
  .week-memory .diary-calendar button.today,
  .week-memory .diary-calendar button.selected{border-color:#bda28c;background:#f7f2ec}
  :root[data-theme="dark"] .week-memory{color:#b8aea5;background:#171513!important;border-color:#2c2925}
  :root[data-theme="dark"] .week-memory .eyebrow{color:#8f8379}
  :root[data-theme="dark"] .week-memory-head strong{color:#e5ddd5}
  :root[data-theme="dark"] .week-memory .ghost-btn{border-color:#39342f;color:#d3c9c0;background:#201d1a}
  :root[data-theme="dark"] .week-memory .diary-calendar button{color:#827970;background:#201d1a}
  :root[data-theme="dark"] .week-memory .diary-calendar button strong{color:#c7bdb4}
}
@media (min-width:1151px){
  #feed.active{position:relative}
  #feed .right-panel{position:absolute;top:116px;right:0;width:min(300px,21vw)}
}
/* Clearer desktop navigation and calmer calendar typography. */
@media (min-width:761px){
  .sidebar{box-shadow:10px 0 30px rgba(65,49,35,.035)}
  .desktop-nav-group{margin-top:14px;color:#806d5f;font-size:10px;font-weight:800;letter-spacing:0}
  .nav-item{min-height:44px;color:#5f5146;font-size:15px;font-weight:500;line-height:44px}
  .nav-item:hover{background:#faf5ed}
  .nav-item.active{color:#241f1b;background:#fffaf3;box-shadow:0 9px 24px rgba(72,52,36,.09)}
  .nav-item.active::after{position:absolute;top:10px;bottom:10px;left:0;width:3px;border-radius:0 3px 3px 0;background:#c87758;content:""}
  .week-memory,.week-memory button{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
  .week-memory-head .eyebrow{font-size:11px;font-weight:600}
  .week-memory-head strong{font-size:16px;font-weight:700}
  .week-memory .diary-calendar button small{color:#93877c;font-size:10px;font-weight:500}
  .week-memory .diary-calendar button strong{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums}
  .week-memory .diary-calendar button.today strong,.week-memory .diary-calendar button.selected strong{color:#342e29}
  :root[data-theme="dark"] .nav-item{color:#bdb3aa}
  :root[data-theme="dark"] .nav-item.active{color:#f5ede4;background:#201d1a}
  :root[data-theme="dark"] .week-memory .diary-calendar button small{color:#8e847b}
  :root[data-theme="dark"] .week-memory .diary-calendar button.today strong,:root[data-theme="dark"] .week-memory .diary-calendar button.selected strong{color:#eee6de}
}
/* One-piece desktop search field. */
@media (min-width:761px){
  .topbar .search{width:min(420px,36vw);min-height:46px;gap:0;padding:0 16px;border:1px solid #ddd1c3;border-radius:9px;background:#fffaf4;box-shadow:none}
  .topbar .search::before{display:none}
  .topbar .search>span{position:relative;display:block;flex:0 0 17px;width:17px;height:17px;margin-right:11px;font-size:0}
  .topbar .search>span::before{position:absolute;top:1px;left:1px;width:9px;height:9px;border:1.7px solid #8e7e71;border-radius:50%;content:""}
  .topbar .search>span::after{position:absolute;top:11px;left:11px;width:6px;height:1.7px;border-radius:2px;background:#8e7e71;content:"";transform:rotate(45deg);transform-origin:left center}
  .topbar .search input{min-width:0;height:44px;padding:0;border:0;border-radius:0;background:transparent;color:#433a33;font-size:14px;line-height:44px;box-shadow:none}
  .topbar .search input::placeholder{color:#9a8c81;opacity:1}
  .topbar .search:focus-within{border-color:#b9a492;box-shadow:0 0 0 3px rgba(185,164,146,.14)}
  :root[data-theme="dark"] .topbar .search{border-color:#35302c;background:#141210}
  :root[data-theme="dark"] .topbar .search>span::before{border-color:#8e847b}
  :root[data-theme="dark"] .topbar .search>span::after{background:#8e847b}
  :root[data-theme="dark"] .topbar .search input{background:transparent;color:#e6ded6}
  :root[data-theme="dark"] .topbar .search input::placeholder{color:#81776f}
}
/* Left-aligned feed filters and neutral search focus. */
@media (min-width:761px){
  #feed>.diary-section-head{align-items:flex-start;flex-direction:column;justify-content:flex-start;gap:14px}
  .diary-section-head .segmented{align-self:flex-start}
  .topbar .search input:focus,.topbar .search input:focus-visible{outline:0;outline-offset:0;border-color:transparent;box-shadow:none}
  .topbar .search:focus-within{border-color:#aa9787;box-shadow:0 0 0 3px rgba(138,117,101,.13)}
  :root[data-theme="dark"] .topbar .search:focus-within{border-color:#5a514a;box-shadow:0 0 0 3px rgba(142,132,123,.12)}
}




/* Profile cover interaction fix */
#profile .profile-layout:not(.guest-mode) .profile-cover-wrap::after { pointer-events: none; }
#profile .profile-layout:not(.guest-mode) .profile-cover-wrap[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

/* Compact desktop diary composer: every tool stays visible without a long form. */
@media (min-width: 901px) {
  #compose.active { padding-top: 24px; padding-bottom: 28px; }
  #compose .atmosphere-compose-head { margin-bottom: 12px; }
  #compose .atmosphere-compose-head h2 { margin-top: 3px; font-size: 31px; }
  #compose .atmosphere-compose-head p { margin-top: 2px; font-size: 13px; }
  #compose .diary-compose-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); gap: 18px; }
  #compose .diary-compose-card { gap: 10px; padding: 14px 16px 12px; }
  #compose .diary-paper-editor { min-height: 0; }
  #compose .diary-paper-editor header { min-height: 30px; margin-bottom: 8px; }
  #compose .diary-paper-editor textarea { height: clamp(148px, 21vh, 190px); min-height: 148px; max-height: 190px; margin-top: 4px; padding: 14px 15px; line-height: 1.7; }
  #compose .diary-editor-actions { min-height: 36px; margin-top: 8px; }
  #compose .voice-recorder { min-height: 48px; padding: 7px 10px; }
  #compose .diary-photo-fields { max-height: 172px; overflow-y: auto; }
  #compose .diary-compact-settings { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(190px, 1fr) minmax(220px, 1.25fr); gap: 9px 10px; padding-top: 2px; }
  #compose .privacy-picker { grid-column: 1 / -1; display: grid; grid-template-columns: 86px repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; margin: 0; padding: 0; border: 0; }
  #compose .privacy-picker legend { display: flex; align-items: center; margin: 0; padding: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
  #compose .privacy-picker label { min-height: 46px; }
  #compose .privacy-picker label > span { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 7px 10px; text-align: center; }
  #compose .privacy-picker small { display: none; }
  #compose .weather-only-field, #compose .diary-location-mode, #compose .diary-tag-composer { width: auto; min-width: 0; margin: 0; }
  #compose .weather-only-field label, #compose .diary-location-mode, #compose .diary-tag-field { gap: 5px; font-size: 12px; }
  #compose .weather-only-field input, #compose .diary-location-mode select, #compose .diary-tag-field input { width: 100%; min-height: 42px; height: 42px; padding-top: 0; padding-bottom: 0; }
  #compose .diary-tag-composer { position: relative; }
  #compose .diary-tag-composer .tag-suggestions { top: calc(100% + 4px); right: 0; left: 0; }
  #compose .location-settings { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr); padding: 10px 12px; }
  #compose .location-settings-head { grid-column: 1 / -1; }
  #compose .location-settings p { align-self: center; }
  #compose .diary-publish-bar { position: sticky; bottom: 10px; z-index: 7; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 54px; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--paper) 94%, transparent); box-shadow: 0 12px 28px rgba(45, 41, 37, .12); backdrop-filter: blur(16px); }
  #compose .draft-status-bar { margin: 0; }
  #compose .diary-save-button { min-width: 132px; min-height: 40px; }
  #compose .diary-preview-card { top: 98px; min-height: 0; height: min(520px, calc(100vh - 132px)); padding: 20px; }
  #compose .diary-preview-card::before { margin-bottom: 16px; }
  #compose .diary-preview-card time { margin: 9px 0 16px; }
  #compose .diary-preview-card > p { min-height: 84px; }
  :root[data-theme="dark"] #compose .diary-publish-bar { border-color: #2d3336; background: rgba(13, 17, 18, .94); }
}

#diaryVoicePanel[hidden] { display: none !important; }


/* Keep draft and publish actions together so none of them overlap. */
@media (min-width: 761px) {
  #compose.active .diary-publish-bar {
    position: static;
    width: 100%;
    min-height: 38px;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  #compose.active .diary-save-button {
    position: static;
    min-width: 112px;
    min-height: 36px;
  }
  #compose.active .diary-publish-actions .ghost-btn,
  #compose.active .diary-publish-actions .text-button {
    min-height: 36px;
    padding: 0 10px;
  }
}

.diary-publish-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#compose .diary-publish-actions .ghost-btn,
#compose .diary-publish-actions .text-button {
  min-height: 40px;
  padding: 0 12px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  #compose .diary-publish-bar { gap: 8px; }
  #compose .diary-publish-actions {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    width: 100%;
    gap: 7px;
  }
  #compose .diary-publish-actions .diary-save-button { width: 100%; }
}

@media (min-width: 761px) and (max-width: 1150px) {
  #compose .diary-compose-layout { grid-template-columns: minmax(0, 1fr); }
  #compose .diary-preview-card { display: none; }
}

/* The composer is the product surface; the redundant live preview has been removed. */
#compose .diary-compose-layout { grid-template-columns: minmax(0, 1fr); }

/* Stronger desktop navigation selection without turning the rail into buttons. */
@media (min-width: 761px) {
  .sidebar .nav-item.active {
    color: #241f1b;
    border: 1px solid #e7d8c9;
    background: #fffdf9;
    box-shadow: 0 10px 26px rgba(72, 52, 36, .1);
  }
  .sidebar .nav-item.active::after {
    top: 7px;
    bottom: 7px;
    width: 4px;
    background: #d56543;
  }
  .sidebar .nav-item.active::before {
    border-color: #d56543;
    background: #d56543;
    box-shadow: 0 0 0 3px #f6e8dc;
  }
  .sidebar .nav-item.nav-primary-action.active::before {
    color: #d56543;
    background: transparent;
    box-shadow: none;
    font-weight: 900;
  }
  :root[data-theme="dark"] .sidebar .nav-item.active {
    color: #f5ede4;
    border-color: #413832;
    background: #211d1a;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
  }
  :root[data-theme="dark"] .sidebar .nav-item.active::before { box-shadow: 0 0 0 3px #38261f; }
  :root[data-theme="dark"] .sidebar .nav-item.nav-primary-action.active::before { box-shadow: none; }
}

/* Ensure the primary diary action uses the same clear selected state. */
@media (min-width: 761px) {
  .sidebar .nav-item.nav-primary-action.active {
    color: #241f1b !important;
    border: 1px solid #e7d8c9 !important;
    background: #fffdf9 !important;
    box-shadow: 0 10px 26px rgba(72, 52, 36, .1) !important;
  }
  .sidebar .nav-item:focus-visible {
    outline: 2px solid #c87758;
    outline-offset: 2px;
  }
  :root[data-theme="dark"] .sidebar .nav-item.nav-primary-action.active {
    color: #f5ede4 !important;
    border-color: #413832 !important;
    background: #211d1a !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .24) !important;
  }
}

/* Integrated message workspace: conversation list + active thread. */
#messages.active {
  padding-top: 26px;
}

#messages .message-center {
  width: min(1280px, 100%);
  height: clamp(520px, calc(100dvh - 192px), 760px);
  margin: 0 auto;
  grid-template-columns: 390px minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid #e5d8ca;
  border-radius: 14px;
  background: #fffdf9;
  box-shadow: 0 18px 48px rgba(72, 52, 36, .08);
}

#messages .conversation-panel,
#messages .notification-panel,
#messages .message-chat-pane {
  min-height: 0;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: #fffdf9;
}

#messages .conversation-panel {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e5d8ca;
}

#messages .panel-title,
#messages .message-detail-header,
#messages .chat-header {
  min-height: 94px;
  padding: 20px 22px;
  border-bottom: 1px solid #e5d8ca;
  background: rgba(255, 253, 249, .96);
}

#messages .panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

#messages .panel-title strong {
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 27px;
  letter-spacing: 0;
}

#messages .message-refresh {
  padding: 7px 10px;
  color: #846f5e;
  border: 1px solid #e5d8ca;
  border-radius: 7px;
  background: transparent;
  font-size: 12px;
}

#messages .conversation-list {
  display: block;
  min-height: 0;
  overflow-y: auto;
}

#messages .conversation-item {
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 13px;
  width: calc(100% - 28px);
  margin: 8px 14px 0;
  padding: 13px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
}

#messages .conversation-item:hover,
#messages .conversation-item.is-unread {
  background: #f6eee5;
}

#messages .conversation-item.active {
  background: #f2e5d8;
  box-shadow: inset 3px 0 #d56f4e;
}

#messages .conversation-item img {
  width: 50px;
  height: 50px;
  border: 1px solid #eadfd5;
  background: #fff;
}

#messages .conversation-row strong {
  font-size: 15px;
}

#messages .conversation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#messages .system-conversation {
  margin-top: 10px;
  margin-bottom: 14px;
}

#messages .message-detail-stack {
  position: relative;
  min-width: 0;
  height: 100%;
}

#messages .notification-panel,
#messages .message-chat-pane {
  position: absolute;
  inset: 0;
}

#messages .message-center.chat-open .notification-panel,
#messages .message-chat-pane:not(.open) {
  display: none;
}

#messages .message-chat-pane.open {
  display: grid;
}

#messages .message-detail-header,
#messages .chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

#messages .message-person {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

#messages .message-person img {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  object-fit: cover;
  border: 1px solid #eadfd5;
  border-radius: 50%;
  background: #fff;
}

#messages .message-person strong,
#messages .message-person h2 {
  display: block;
  margin: 0;
  color: #241f1b;
  font-size: 17px;
}

#messages .message-person > div > span:not(.connection-state) {
  display: block;
  margin-top: 4px;
  color: #8c7b6d;
  font-size: 12px;
}

#messages .notification-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

#messages .notification-panel .message-list {
  min-height: 0;
  padding: 16px 24px;
  overflow-y: auto;
  background: #fbf7f2;
}

#messages .chat-card {
  width: 100%;
  max-height: none;
  padding: 0;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  box-shadow: none;
}

#messages .chat-header h2 {
  font-size: 17px;
}

#messages .chat-header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

#messages .chat-header-actions .micro-btn {
  min-height: 32px;
  padding: 6px 9px;
  border-color: transparent;
  color: #8c7b6d;
  background: transparent;
  font-size: 12px;
}

#messages #closeChat {
  display: none;
}

#messages .chat-thread {
  min-height: 0;
  max-height: none;
  padding: 30px;
  gap: 18px;
  border: 0;
  border-radius: 0;
  background: #fbf7f2;
}

#messages .chat-message {
  max-width: 72%;
}

#messages .chat-bubble {
  border: 0;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(80, 55, 35, .04);
}

#messages .chat-message.mine .chat-bubble {
  color: #3a2e26;
  border: 0;
  background: #efe0d2;
}

#messages .chat-bubble-text {
  padding: 13px 17px;
  line-height: 1.55;
}

#messages .message-meta {
  padding: 0 4px;
  opacity: .72;
}

#messages .load-older-btn {
  position: absolute;
  top: 102px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
}

#messages .chat-disabled-note,
#messages .chat-image-preview {
  margin: 8px 18px 0;
}

#messages .chat-form {
  grid-template-columns: 48px minmax(0, 1fr) 66px;
  gap: 9px;
  margin: 0;
  padding: 14px 18px 16px;
  border-top: 1px solid #e5d8ca;
  background: #fffdf9;
}

#messages .chat-form textarea {
  min-height: 46px;
  max-height: 104px;
  padding: 11px 14px;
  resize: none;
  border-color: #e5d8ca;
  border-radius: 9px;
  background: #fff;
}

#messages .chat-image-button,
#messages .chat-form .primary-btn {
  min-height: 46px;
  padding: 0 10px;
  border-radius: 9px;
}

:root[data-theme="dark"] #messages .message-center,
:root[data-theme="dark"] #messages .conversation-panel,
:root[data-theme="dark"] #messages .notification-panel,
:root[data-theme="dark"] #messages .message-chat-pane,
:root[data-theme="dark"] #messages .panel-title,
:root[data-theme="dark"] #messages .message-detail-header,
:root[data-theme="dark"] #messages .chat-header,
:root[data-theme="dark"] #messages .chat-form {
  border-color: #302b27;
  background: #11100f;
}

:root[data-theme="dark"] #messages .conversation-item.active,
:root[data-theme="dark"] #messages .conversation-item:hover,
:root[data-theme="dark"] #messages .conversation-item.is-unread {
  background: #28221e;
}

:root[data-theme="dark"] #messages .notification-panel .message-list,
:root[data-theme="dark"] #messages .chat-thread {
  background: #0c0b0a;
}

:root[data-theme="dark"] #messages .message-person strong,
:root[data-theme="dark"] #messages .message-person h2 {
  color: #f4eee8;
}

:root[data-theme="dark"] #messages .chat-bubble {
  background: #1b1917;
}

:root[data-theme="dark"] #messages .chat-message.mine .chat-bubble {
  color: #f4eee8;
  background: #41342b;
}

@media (max-width: 760px) {
  #messages.active {
    padding: 0;
  }

  #messages .message-center {
    width: 100%;
    height: calc(100dvh - 151px - env(safe-area-inset-bottom));
    display: block;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #messages .conversation-panel {
    height: 100%;
    border-right: 0;
  }

  #messages .panel-title {
    min-height: 68px;
    padding: 12px 16px;
  }

  #messages .panel-title strong {
    font-size: 23px;
  }

  #messages .conversation-item {
    width: calc(100% - 20px);
    margin-right: 10px;
    margin-left: 10px;
  }

  #messages .message-detail-stack {
    display: none;
    height: 100%;
  }

  #messages .message-center.chat-open .conversation-panel,
  #messages .message-center.notification-open .conversation-panel {
    display: none;
  }

  #messages .message-center.chat-open .message-detail-stack,
  #messages .message-center.notification-open .message-detail-stack {
    display: block;
  }

  #messages .notification-panel {
    display: none;
  }

  #messages .message-center.notification-open .notification-panel {
    display: grid;
  }

  #messages .message-detail-header,
  #messages .chat-header {
    min-height: 68px;
    padding: 9px 12px;
  }

  #messages .message-person img {
    width: 42px;
    height: 42px;
  }

  #messages .chat-header-actions .micro-btn {
    display: none;
  }

  #messages #closeChat {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #5f5147;
    border: 1px solid #dfd2c6;
    background: transparent;
  }

  #messages .chat-thread {
    padding: 18px 14px;
  }

  #messages .chat-message {
    max-width: 84%;
  }

  #messages .chat-form {
    grid-template-columns: 44px minmax(0, 1fr) 54px;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  }

  #messages .chat-form .primary-btn {
    grid-column: auto;
  }

  #messages .chat-image-button,
  #messages .chat-form .primary-btn {
    min-height: 42px;
    font-size: 13px;
  }

  #messages .chat-form textarea {
    min-height: 42px;
    padding: 9px 11px;
    font-size: 16px;
  }

  #messages .notification-panel .message-list {
    padding: 10px 14px;
  }
}
#messages .message-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

#messages #closeNotifications {
  display: none;
}

@media (max-width: 760px) {
  #messages #closeNotifications {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #5f5147;
    border: 1px solid #dfd2c6;
    background: transparent;
  }
}