:root {
  --cream: #fffdf5;
  --paper: #fffef9;
  --app-top-surface: rgba(255, 253, 245, .985);
  --app-top-divider: transparent;
  --pink: #f8cfe0;
  --pink-soft: #fff0f6;
  --raspberry: #c71942;
  --raspberry-dark: #9f1238;
  --sky: #cdeffc;
  --sky-deep: #58b9df;
  --ink: #33252b;
  --muted: #806d75;
  --line: rgba(128, 65, 84, 0.16);
  --success: #3c8062;
  --warning: #a96b26;
  --danger: #b6253f;
  --rose: #c71942;
  --folder-tone-0: #f8cfe0;
  --folder-tone-1: #cdeffc;
  --folder-tone-2: #fffef9;
  --shadow: 0 20px 60px rgba(119, 42, 67, 0.13);
  --radius-lg: 30px;
  --radius: 22px;
  --radius-sm: 15px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 16%, rgba(199,25,66,.035) 0 1px, transparent 1.5px) 0 0 / 20px 20px,
    var(--cream);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.shell { width: min(1160px, calc(100% - 36px)); margin: 0 auto; }
.site-header {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid rgba(199,25,66,.09);
  background: rgba(255,253,245,.9);
  backdrop-filter: blur(16px);
}
.site-nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-link { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 900; letter-spacing: .06em; }
.brand-link img { width: 42px; height: 42px; }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 700; color: #66515b; }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--raspberry); }
.button, .primary-button, .secondary-button, .text-button {
  border: 0; border-radius: 999px; min-height: 44px; padding: 0 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 850; text-decoration: none; transition: .2s ease;
}
.primary-button { background: var(--raspberry); color: white; box-shadow: 0 10px 24px rgba(199,25,66,.2); }
.primary-button:hover { background: var(--raspberry-dark); transform: translateY(-1px); }
.secondary-button { color: var(--raspberry); background: white; box-shadow: inset 0 0 0 1.5px rgba(199,25,66,.22); }
.secondary-button:hover { background: var(--pink-soft); }
.text-button { padding: 0 8px; background: transparent; color: var(--raspberry); }
.hero { min-height: 690px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; padding: 72px 0 86px; }
.hero-copy h1 { margin: 0; font-size: clamp(48px, 7vw, 84px); line-height: 1.04; letter-spacing: -.055em; max-width: 760px; }
.hero-copy p { font-size: 19px; line-height: 1.8; color: #715b65; max-width: 620px; margin: 28px 0 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin-top: 24px; color: var(--muted); font-size: 13px; display: flex; gap: 18px; flex-wrap: wrap; }
.hero-note span::before { content: "✿"; color: var(--raspberry); margin-right: 6px; }
.hero-art { min-height: 520px; position: relative; display: grid; place-items: center; }
.pink-hill { position: absolute; inset: 70px 0 0; background: var(--pink); border-radius: 48% 52% 22% 24% / 36% 36% 18% 18%; }
.hero-cat { position: absolute; width: 82%; top: 2%; right: -2%; z-index: 1; }
.phone-preview {
  position: relative; z-index: 3; width: 295px; height: 590px; padding: 13px;
  border-radius: 42px; background: #291c22; box-shadow: 0 38px 85px rgba(84,40,55,.24);
  transform: rotate(2.5deg);
}
.phone-preview::before {
  content: ""; position: absolute; top: 17px; left: 50%; transform: translateX(-50%);
  width: 82px; height: 22px; border-radius: 999px; background: #291c22; z-index: 5;
}
.phone-screen { height: 100%; border-radius: 31px; background: var(--cream); overflow: hidden; padding: 40px 15px 16px; }
.mini-home-title { font-weight: 900; font-size: 20px; margin-bottom: 11px; }
.mini-banner { background: var(--pink); border-radius: 21px; min-height: 160px; padding: 20px; position: relative; overflow: hidden; }
.mini-banner h3 { margin: 0; font-size: 25px; line-height: 1.1; width: 70%; }
.mini-banner svg { position: absolute; width: 112px; right: -4px; bottom: 2px; }
.mini-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 11px; }
.mini-card { min-height: 105px; border-radius: 18px; padding: 13px; background: white; border: 1px solid var(--line); }
.mini-card.blue { background: var(--sky); }
.mini-card b { display: block; font-size: 13px; }
.mini-card span { color: var(--muted); font-size: 10px; line-height: 1.4; display: block; margin-top: 6px; }
.mini-nav { margin-top: 13px; height: 50px; border-radius: 18px; display: flex; justify-content: space-around; align-items: center; background: white; color: var(--raspberry); font-size: 10px; }
.section { padding: 100px 0; }
.section.pink-band { background: var(--pink); }
.section.sky-band { background: var(--sky); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 480px); gap: 80px; align-items: end; margin-bottom: 56px; }
.section-heading h2 { margin: 0; font-size: clamp(36px, 5vw, 58px); line-height: 1.1; letter-spacing: -.045em; }
.section-heading p { margin: 0; color: #705a65; line-height: 1.8; font-size: 17px; }
.feature-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.flow-step { position: relative; padding: 24px 26px 22px 0; }
.flow-step:not(:last-child)::after { content: "→"; position: absolute; right: 12px; top: 52px; font-size: 28px; color: var(--raspberry); }
.step-number { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; color: white; background: var(--raspberry); font-weight: 900; font-size: 20px; }
.flow-step h3 { margin: 18px 0 8px; font-size: 19px; }
.flow-step p { margin: 0; color: #745f68; line-height: 1.65; font-size: 14px; }
.privacy-quote { max-width: 930px; margin: 0 auto; text-align: center; }
.privacy-quote blockquote { margin: 0; font-size: clamp(32px, 5vw, 58px); line-height: 1.32; font-weight: 900; letter-spacing: -.03em; }
.privacy-quote p { color: #745d68; font-size: 16px; line-height: 1.75; margin: 28px auto 0; max-width: 760px; }
.rights-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.right-item { min-height: 220px; padding: 26px; background: white; border-radius: 28px; border: 1px solid rgba(199,25,66,.12); }
.right-item .doodle { color: var(--raspberry); font-size: 32px; }
.right-item h3 { margin: 36px 0 10px; font-size: 20px; }
.right-item p { margin: 0; color: var(--muted); line-height: 1.7; font-size: 14px; }
.support-panel { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; padding: 48px; border-radius: 34px; background: var(--raspberry); color: white; }
.support-panel h2 { font-size: 42px; margin: 0 0 18px; }
.support-panel p { color: rgba(255,255,255,.82); line-height: 1.8; }
.support-links { align-self: center; display: grid; gap: 10px; }
.support-links a { background: white; color: var(--raspberry); border-radius: 18px; padding: 16px 18px; font-weight: 850; text-decoration: none; }
.site-footer { padding: 52px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.footer-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.legal-page { padding: 64px 0 110px; }
.legal-wrap { width: min(820px, calc(100% - 36px)); margin: 0 auto; }
.legal-wrap h1 { font-size: clamp(38px, 7vw, 64px); margin: 0 0 18px; }
.legal-meta { color: var(--muted); margin-bottom: 44px; }
.legal-wrap h2 { margin: 38px 0 12px; font-size: 24px; }
.legal-wrap h3 { margin: 26px 0 8px; font-size: 18px; }
.legal-wrap p, .legal-wrap li { line-height: 1.85; color: #5f4e56; }
.legal-wrap .important { padding: 22px; border-radius: 20px; background: var(--pink); color: #6c2940; font-weight: 800; }
.legal-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal-wrap th, .legal-wrap td { border: 1px solid var(--line); padding: 12px; text-align: left; vertical-align: top; line-height: 1.65; }

/* App preview */
.app-page { min-height: 100vh; background: #f6eee9; padding: 18px; display: grid; place-items: center; }
[hidden] { display: none !important; }
.preview-layout { width: min(1240px, 100%); display: grid; grid-template-columns: minmax(320px, 430px) minmax(280px, 1fr); gap: 42px; align-items: center; }
.preview-copy h1 { font-size: clamp(38px, 5vw, 66px); line-height: 1.05; margin: 0 0 20px; }
.preview-copy p { color: #765f69; line-height: 1.8; max-width: 650px; }
.preview-copy .preview-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0; }
.preview-list div { background: rgba(255,255,255,.65); border: 1px solid var(--line); border-radius: 17px; padding: 13px; font-size: 13px; font-weight: 750; }
.device-frame {
  width: min(430px, 100%); height: min(900px, calc(100vh - 36px)); min-height: 690px;
  border: 10px solid #2d2026; border-radius: 48px; background: var(--cream); box-shadow: var(--shadow);
  position: relative; overflow: hidden; justify-self: center;
}
.device-island { width: 94px; height: 24px; border-radius: 0 0 16px 16px; background: #2d2026; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 30; }
.app-status { height: 38px; padding: 13px 22px 0; display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; }
.app-shell { height: calc(100% - 38px); overflow: hidden; position: relative; }
.app-screen {
  display: none; height: 100%; overflow-y: auto; padding: 12px 17px calc(96px + env(safe-area-inset-bottom, 0px));
  scrollbar-width: none; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
}
.app-screen::-webkit-scrollbar { display: none; }
.app-screen.active { display: block; }
.app-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 3px 0 14px; }
.home-topbar { align-items: center; gap: 9px; position: sticky; top: 0; z-index: 12; padding: 8px 0 7px; background: var(--app-top-surface); backdrop-filter: blur(12px); }
.home-topbar .app-brand { min-width: 138px; }
.home-topbar .app-brand img { width: 36px; height: 36px; }
.home-topbar .app-brand h1 { font-size: 16px; }
.home-topbar .app-brand p { font-size: 9px; white-space: nowrap; }
.home-search {
  min-width: 0; flex: 1; height: 38px; padding: 0 5px 0 13px; border-radius: 999px;
  display: flex; align-items: center; gap: 5px; background: white;
  border: 1px solid rgba(199,25,66,.16); box-shadow: 0 5px 16px rgba(112,61,77,.06);
}
.home-search:focus-within { border-color: rgba(199,25,66,.45); box-shadow: 0 0 0 3px rgba(199,25,66,.08); }
.home-search input {
  min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink);
  font-size: 11px; padding: 0;
}
.home-search input::placeholder { color: #a58b95; }
.home-search button {
  width: 30px; height: 30px; flex: 0 0 auto; border: 0; border-radius: 50%;
  display: grid; place-items: center; color: white; background: var(--raspberry);
}
.home-search svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.my-collection-search {
  width: 100%; min-height: 48px; height: 48px; margin: 2px 0 14px;
  padding-left: 16px; box-shadow: 0 8px 24px rgba(112,61,77,.07);
}
.my-collection-search input { font-size: 13px; }
.my-collection-search button { width: 38px; height: 38px; }
.my-collection-item-search { margin-top: 0; }
.collection-detail-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px;
}
.collection-detail-actions button {
  min-height: 40px; border: 0; border-radius: 999px; padding: 0 14px;
  color: #fff; background: var(--raspberry); font-size: 12px; font-weight: 850;
  box-shadow: 0 8px 18px rgba(199,25,66,.16);
}
.collection-detail-actions button:active { transform: scale(.98); background: var(--raspberry-dark); }
.app-brand { display: flex; align-items: center; gap: 10px; }
.app-brand img { width: 39px; height: 39px; border-radius: 14px; }
.app-brand h1 { margin: 0; font-size: 17px; }
.app-brand p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.centered-topbar {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center;
}
.centered-topbar .app-brand { justify-content: center; text-align: center; }
.circle-button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: white; color: var(--raspberry); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; font-weight: 900; }
.back-button { width: 42px; height: 42px; padding: 0; }
.back-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; transform: translateX(-1px); }
.app-hero { min-height: 190px; border-radius: 29px; padding: 22px; background: var(--pink); position: relative; overflow: hidden; }
.app-hero h2 { font-size: 28px; line-height: 1.12; margin: 0; max-width: 250px; }
.app-hero p { margin: 10px 0 0; color: #755766; font-size: 12px; line-height: 1.65; max-width: 238px; }
.app-hero img { position: absolute; width: 178px; right: -20px; bottom: -3px; opacity: .96; }
.section-row { display: flex; align-items: end; justify-content: space-between; margin: 21px 2px 10px; gap: 10px; }
.section-row h2 { margin: 0; font-size: 17px; }
.section-row span { color: var(--muted); font-size: 10px; }
.folder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.folder-card { min-height: 118px; border: 0; border-radius: 22px; text-align: left; padding: 17px; color: var(--ink); position: relative; overflow: hidden; background: white; box-shadow: inset 0 0 0 1px var(--line); }
.folder-card.pink { background: var(--pink); }
.folder-card.blue { background: var(--sky); }
.folder-card h3 { margin: 0; font-size: 15px; max-width: 110px; }
.folder-card p { font-size: 10px; line-height: 1.55; color: #735f68; margin: 7px 0 0; max-width: 120px; }
.folder-mark { position: absolute; right: 12px; bottom: 9px; font-size: 29px; color: var(--raspberry); }
.public-topbar { position: sticky; top: 0; z-index: 12; padding: 8px 0 7px; background: var(--app-top-surface); backdrop-filter: blur(12px); }
.public-search-button { padding: 0; }
.public-search-button svg {
  width: 19px; height: 19px; display: block; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; transform: none;
}
.public-section-heading { align-items: center; }
.public-folder-grid { align-items: stretch; }
.public-folder-card { position:relative; }
.public-order-reset { margin: -4px 0 12px auto; display:block; min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:999px; background:white; color:var(--raspberry); font-size:11px; font-weight:800; }
.public-folder-card {
  min-height: 104px; padding: 17px 15px; border-radius: 20px;
  display: flex; flex-direction: column; justify-content: center; box-shadow: inset 0 0 0 1px rgba(128,65,84,.12);
}
.public-folder-grid.is-reordering { user-select:none; }
.public-folder-grid .public-folder-card.is-dragging { opacity:.72; transform:scale(.96); box-shadow:0 12px 26px rgba(117,40,68,.22); outline:2px solid var(--raspberry); z-index:2; }
.search-clear-button { flex:0 0 auto; min-height:30px; padding:0 9px; border:0; background:transparent; color:var(--raspberry); font-size:11px; font-weight:800; }
.public-folder-card.tone-0 { background: var(--folder-tone-0); }
.public-folder-card.tone-1 { background: var(--folder-tone-1); }
.public-folder-card.tone-2 { background: var(--folder-tone-2); }
.public-folder-card h3 {
  max-width: none; margin: 0; color: #21161b; font-family: inherit;
  font-size: 17px; font-weight: 900; line-height: 1.25; letter-spacing: 0;
  font-synthesis: none; -webkit-font-smoothing: antialiased;
}
.public-folder-card p { max-width: none; margin: 7px 0 0; font-size: 10.5px; line-height: 1.5; }
.public-folder-card small { margin-top: 7px; color: var(--raspberry); font-size: 8.5px; font-weight: 900; }
.folder-pin-label {
  position: absolute; top: 9px; right: 10px; min-height: 21px; padding: 0 7px;
  border-radius: 999px; display: inline-flex; align-items: center;
  background: rgba(255,255,255,.72); color: var(--raspberry); font-size: 8px; font-weight: 900;
}
.trusted-private-folders { display: grid; gap: 10px; }
.trusted-private-card {
  width: 100%; padding: 16px; border: 1px solid var(--line); border-radius: 22px;
  background: white; color: var(--ink); text-align: left;
}
.trusted-private-head, .trusted-private-stats { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.trusted-private-head span { color: var(--muted); font-size: 9px; font-weight: 800; }
.trusted-private-head b { color: var(--success); font-size: 9px; }
.trusted-private-card h3 { margin: 9px 0 6px; font-size: 16px; }
.trusted-private-card p { margin: 0; color: #6b5760; font-size: 10.5px; line-height: 1.6; }
.trusted-private-stats { justify-content: flex-start; margin-top: 11px; color: var(--muted); font-size: 9px; }
.public-folder-setting {
  min-height: 76px; margin-bottom: 11px; padding: 14px; border-radius: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--pink-soft); border: 1px solid rgba(199,25,66,.1);
}
.public-folder-setting > div { min-width: 0; }
.public-folder-setting b, .public-folder-setting span { display: block; }
.public-folder-setting b { font-size: 13px; }
.public-folder-setting span { margin-top: 4px; color: var(--muted); font-size: 9.5px; line-height: 1.5; }
.public-folder-setting button {
  flex: 0 0 auto; min-height: 34px; padding: 0 11px; border: 1px solid rgba(199,25,66,.2);
  border-radius: 999px; background: white; color: var(--raspberry); font-size: 9px; font-weight: 900;
}
.public-folder-setting button.pinned { background: var(--raspberry); color: white; }
.public-sort-tabs {
  position: sticky; top: -12px; z-index: 11; margin: 0 0 12px; padding: 4px;
  display: grid; grid-template-columns: repeat(3,1fr); border-radius: 999px;
  background: #f5e8ed; box-shadow: 0 4px 13px rgba(112,61,77,.05);
}
.public-sort-tabs button {
  min-height: 38px; border: 0; border-radius: 999px; background: transparent;
  color: var(--muted); font-size: 11px; font-weight: 900;
}
.public-sort-tabs button.active { background: white; color: var(--raspberry); box-shadow: 0 4px 12px rgba(112,61,77,.08); }
.public-search-form {
  height: 48px; padding: 0 6px 0 15px; border: 1px solid rgba(199,25,66,.18);
  border-radius: 999px; display: flex; align-items: center; gap: 8px; background: white;
}
.public-search-form input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
.public-search-form button {
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--raspberry); color: white;
}
.public-search-form svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.public-search-folder-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.public-search-folder-strip button {
  min-height: 76px; padding: 12px; border: 0; border-radius: 17px; background: var(--sky);
  color: var(--ink); text-align: left;
}
.public-search-folder-strip b, .public-search-folder-strip span { display: block; }
.public-search-folder-strip b { font-size: 13px; }
.public-search-folder-strip span { margin-top: 4px; color: #527180; font-size: 9px; line-height: 1.45; }
.post-card { background: white; border: 1px solid var(--line); border-radius: 22px; padding: 14px; margin-bottom: 11px; }
.post-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 9px; min-width:0; }
.post-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: var(--raspberry); font-weight: 900; overflow: hidden; flex: 0 0 auto; }
.post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-author { font-size: 13px; font-weight: 900; }
.post-identity { flex: 1 1 190px; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 9px; min-width: 0; }
.post-avatar-button,
.post-author-name-button { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.post-avatar-button { width: 36px; height: 36px; border-radius: 50%; }
.post-author-name-button { display: block; width: fit-content; max-width: 100%; }
.post-author-name-button:hover .post-author,
.post-author-name-button:focus-visible .post-author { color: var(--raspberry); }
.post-author-copy { min-width: 0; display:grid; gap:2px; }
.post-meta-line { display:flex; align-items:center; flex-wrap:wrap; gap:0 5px; min-width:0; }
.post-time-row { min-height:14px; }
.post-head-tools { flex: 0 1 auto; display: flex; align-items: center; justify-content:flex-end; flex-wrap:wrap; gap:5px; min-width:0; }
.post-transfer {
  flex: 0 0 auto; min-height: 31px; padding: 0 9px; border: 1px solid rgba(199,25,66,.2);
  border-radius: 999px; background: var(--pink-soft); color: var(--raspberry);
  font-size: 9.5px; font-weight: 900;
}
.post-bookmark {
  min-height: 31px; padding: 0 8px; border: 1px solid rgba(199,25,66,.16);
  border-radius: 999px; background: white; color: var(--raspberry); font-size: 9px; font-weight: 900;
}
.post-bookmark.saved { background: var(--raspberry); color: white; }
.post-open {
  width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left;
}
.post-open:hover h3, .post-open:focus-visible h3 { color: var(--raspberry); }
.post-meta { font-size: 9px; color: var(--muted); margin-top: 2px; }
.post-time-row {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}
.post-trust {
  display: inline-flex; align-items: center; gap: 3px; color: #3c8062; font-weight: 900;
}
.post-card h3 { font-size: 15px; margin: 12px 0 6px; line-height: 1.4; }
.post-card p {
  font-size: 12px; line-height: 1.62; color: #65535b; margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; user-select: text; white-space: break-spaces; overflow-wrap: anywhere;
}
.post-card h3 { user-select: text; }
.post-detail-card .post-open p {
  display: block; overflow: visible; -webkit-line-clamp: unset;
}
.post-media { margin-top: 12px; overflow: hidden; border-radius: 17px; background: var(--pink-soft); border: 1px solid var(--line); }
.post-media-trigger {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  background: transparent; color: white; overflow: hidden; text-align: left;
}
.post-media-trigger img { display: block; width: 100%; height: 190px; padding: 14px; object-fit: contain; background: #fff7fa; }
.post-media-trigger video { display: block; width: 100%; height: 190px; object-fit: contain; background: #1f181b; pointer-events: none; }
.post-media-hint {
  position: absolute; right: 9px; bottom: 9px; min-height: 27px; padding: 0 10px;
  border-radius: 999px; display: inline-flex; align-items: center; gap: 4px;
  background: rgba(51,37,43,.78); color: white; font-size: 9px; font-weight: 850;
  backdrop-filter: blur(8px);
}

.post-media-grid { display:grid; gap:5px; margin-top:10px; overflow:hidden; border-radius:16px; }
.post-media-grid.media-count-1 { grid-template-columns:minmax(0, 1fr); max-width:78%; }
.post-media-grid.media-count-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.post-media-grid.media-count-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.post-media-grid.media-count-4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.post-media-grid:not(.media-count-1):not(.media-count-2):not(.media-count-3):not(.media-count-4) { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.post-media-grid-item { min-width:0; padding:0; border:0; background:#f8e9ee; aspect-ratio:1; overflow:hidden; }
.post-media-grid.media-count-1 .post-media-grid-item { aspect-ratio:4/3; }
.post-media-grid-item img { width:100%; height:100%; object-fit:cover; display:block; }
.media-gallery-shell { width:100%; min-width:0; }
.media-gallery-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.media-gallery-head b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-gallery-head button { flex:0 0 auto; border:0; border-radius:999px; padding:8px 13px; color:white; background:var(--raspberry); }
.media-gallery-track { display:flex; width:100%; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; }
.media-gallery-track::-webkit-scrollbar { display:none; }
.media-gallery-track figure { min-width:100%; margin:0; scroll-snap-align:start; display:grid; place-items:center; gap:8px; }
.media-gallery-track img { display:block; max-width:100%; max-height:68vh; border-radius:16px; object-fit:contain; }
.media-gallery-track figcaption { color:var(--muted); font-size:12px; }
.publish-media-selection { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:9px; }
.publish-media-chip { position:relative; min-width:0; }
.publish-media-chip > span { display:block; aspect-ratio:1; overflow:hidden; border-radius:12px; background:var(--pink-soft); }
.publish-media-chip img { width:100%; height:100%; object-fit:cover; }
.publish-media-chip button { position:absolute; top:-5px; right:-5px; width:25px; height:25px; padding:0; border:2px solid white; border-radius:50%; color:white; background:var(--raspberry); font-size:17px; line-height:1; }
.publish-media-chip small { display:block; margin-top:3px; color:var(--muted); font-size:9px; text-align:center; }
.admin-unread-dot { display:inline-grid; min-width:20px; height:20px; padding:0 5px; place-items:center; border-radius:999px; color:white; background:var(--raspberry); font-size:10px; }
.post-media-hint svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.media-preview-shell { display: grid; gap: 13px; }
.media-preview-stage {
  min-height: 280px; max-height: 56vh; border-radius: 22px; overflow: hidden;
  display: grid; place-items: center; background: #251b20;
}
.media-preview-stage img { width: 100%; max-height: 56vh; object-fit: contain; }
.media-preview-stage video { width: 100%; max-height: 56vh; object-fit: contain; }
.media-download-button { text-decoration: none; display: flex; align-items: center; justify-content: center; }
.post-link {
  margin-top: 10px; min-height: 43px; padding: 10px 12px; border-radius: 14px; display: flex;
  align-items: center; justify-content: space-between; gap: 10px; background: var(--sky);
  color: #285d72; text-decoration: none; font-size: 10px; font-weight: 850;
}
.post-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-link b { color: var(--raspberry); flex: 0 0 auto; }
.post-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.post-action-group { display: flex; align-items: center; gap: 2px; }
.post-actions button { border: 0; background: transparent; color: var(--muted); font-size: 10.5px; font-weight: 800; min-height: 30px; padding: 0 6px; border-radius: 999px; }
.post-actions button:hover { background: var(--pink-soft); color: var(--raspberry); }
.post-actions button.liked { color: var(--raspberry); background: var(--pink-soft); }
.post-actions button.tip { color: var(--raspberry); }
.post-actions button.trust-rated { color: var(--success); background: #edf7f1; }
.trust-rating-value { margin: 16px 0 5px; text-align: center; color: var(--raspberry); font-size: 35px; font-weight: 900; }
.trust-range { width: 100%; accent-color: var(--raspberry); }
.post-detail-card .post-card { margin-bottom: 13px; }
.comment-composer { padding: 15px; margin-bottom: 12px; border-radius: 21px; background: var(--pink-soft); }
.comment-list { display: grid; gap: 9px; }
.comment-card { padding: 13px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.comment-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.comment-author { border: 0; padding: 0; background: transparent; color: var(--ink); font-size: 11px; font-weight: 900; }
.comment-author:hover { color: var(--raspberry); }
.comment-copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 7px; }
.comment-card p {
  min-width: 0; margin: 8px 0 9px; color: #65535b; font-size: 11px; line-height: 1.65;
  white-space: break-spaces; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
  overflow: hidden; user-select: text;
}
.comment-card.expanded p { display: block; overflow: visible; -webkit-line-clamp: unset; }
.comment-expand {
  align-self: center; min-height: 28px; margin-top: 3px; border: 0; border-radius: 999px;
  padding: 0 8px; background: var(--pink-soft); color: var(--raspberry);
  font-size: 9px; font-weight: 900; white-space: nowrap;
}
.comment-media { margin: 2px 0 9px; overflow: hidden; border-radius: 14px; background: var(--pink-soft); }
.comment-media .post-media-trigger img { width: 100%; max-height: 220px; height: auto; min-height: 120px; object-fit: contain; }
.comment-actions { display: flex; justify-content: flex-end; gap: 4px; }
.comment-actions button { min-height: 29px; border: 0; border-radius: 999px; padding: 0 8px; background: transparent; color: var(--muted); font-size: 9.5px; font-weight: 850; }
.comment-actions button.liked { color: var(--raspberry); background: var(--pink-soft); }
.comment-replies {
  margin: 10px 0 0 12px;
  padding-left: 10px;
  border-left: 2px solid rgba(199,25,66,.13);
  display: grid;
  gap: 8px;
}
.comment-thread-toggle {
  min-height: 32px; margin: 8px 0 0 12px; border: 0; padding: 0 10px;
  border-radius: 999px; background: transparent; color: var(--muted);
  font-size: 10px; font-weight: 850;
}
.comment-thread-toggle::before { content: "— "; color: rgba(199,25,66,.28); }
.comment-reply-target { margin: 6px 0 -2px; color: var(--muted); font-size: 9.5px; font-weight: 750; }
.comment-reply-card {
  background: rgba(255, 240, 246, .62);
}
.home-feed-heading { align-items: center; }
.feed-sentinel {
  min-height: 54px; margin: 4px 0 18px; display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--muted); font-size: 10px; font-weight: 750;
}
.feed-sentinel[hidden] { display: none !important; }
.feed-sentinel span {
  width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(199,25,66,.2);
  border-top-color: var(--raspberry); animation: feed-spin .8s linear infinite;
}
@keyframes feed-spin { to { transform: rotate(360deg); } }
.member-hero {
  padding: 21px; border-radius: 28px; background: var(--pink); text-align: center;
}
.member-avatar {
  width: 76px; height: 76px; margin: 0 auto 10px; border: 4px solid rgba(255,255,255,.9);
  border-radius: 50%; display: grid; place-items: center; background: var(--cream);
  color: var(--raspberry); font-size: 27px; font-weight: 900;
}
.member-hero h2 { margin: 0; font-size: 22px; }
.member-hero p { margin: 7px auto 0; max-width: 275px; color: #755766; font-size: 11px; line-height: 1.65; }
.member-stats { margin-top: 15px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.member-stats div { padding: 10px 5px; border-radius: 15px; background: rgba(255,253,245,.72); }
.member-stats b, .member-stats span { display: block; }
.member-stats b { font-size: 16px; color: var(--raspberry); }
.member-stats span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.home-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.home-entry {
  min-height: 126px; padding: 16px; border: 0; border-radius: 23px; text-align: left;
  color: var(--ink); position: relative; overflow: hidden;
}
.home-entry.lab { background: var(--sky); }
.home-entry.tree { background: var(--pink); }
.home-entry strong { display: block; font-size: 16px; line-height: 1.3; max-width: 116px; }
.home-entry span { display: block; color: #725c66; font-size: 10px; line-height: 1.55; margin-top: 7px; max-width: 125px; }
.home-entry b { position: absolute; right: 13px; bottom: 9px; color: var(--raspberry); font-size: 30px; font-weight: 500; }
.screen-back { flex: 0 0 auto; }
.lab-intro { background: var(--sky); border-radius: 27px; padding: 20px; margin-bottom: 12px; }
.lab-intro h2 { margin: 0; font-size: 23px; line-height: 1.2; }
.lab-intro p { margin: 9px 0 0; font-size: 11px; color: #4d6975; line-height: 1.65; }
.product-card { background: white; border: 1px solid var(--line); border-radius: 23px; padding: 15px; margin-bottom: 11px; }
.product-card h3 { margin: 10px 0 7px; font-size: 16px; line-height: 1.38; }
.product-card p { color: #66535b; font-size: 11px; line-height: 1.65; margin: 0; }
.product-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 9px; }
.review-labels { display: flex; flex-wrap: wrap; gap: 5px; }
.review-label {
  display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border-radius: 999px;
  color: #6d3348; background: var(--pink-soft); font-size: 9px; font-weight: 900;
}
.review-label.platform { background: var(--sky); color: #32667a; }
.review-label.partner { background: #fff0d7; color: #8a5b1e; }
.gate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.gate-item { border-radius: 15px; padding: 11px; background: #f4f8f5; color: #37664f; font-size: 10px; line-height: 1.45; }
.gate-item b { display: block; margin-bottom: 3px; }
.judgment-section { padding: 13px 0; border-bottom: 1px dashed var(--line); }
.judgment-section:last-child { border-bottom: 0; }
.judgment-section h3 { margin: 0 0 7px; font-size: 14px; }
.judgment-section p, .judgment-section li { margin: 0; color: #64515a; font-size: 11px; line-height: 1.7; }
.judgment-section ul { padding-left: 18px; margin: 0; }
.commerce-disclosure { border-radius: 16px; padding: 12px; background: #fff6e8; color: #765022; font-size: 10px; line-height: 1.6; margin: 12px 0; }
.tree-intro { background: var(--pink); border-radius: 27px; padding: 20px; position: relative; overflow: hidden; }
.tree-intro h2 { margin: 0; font-size: 23px; max-width: 220px; }
.tree-intro p { margin: 9px 0 0; font-size: 11px; color: #775563; line-height: 1.65; max-width: 245px; }
.visibility-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.visibility-option { position: relative; }
.visibility-option input { position: absolute; opacity: 0; pointer-events: none; }
.visibility-option span {
  min-height: 58px; display: grid; place-items: center; text-align: center; padding: 8px 5px;
  border: 1px solid var(--line); border-radius: 15px; background: white; color: var(--muted);
  font-size: 10px; font-weight: 850; line-height: 1.35;
}
.visibility-option input:checked + span { border-color: var(--raspberry); color: var(--raspberry); background: var(--pink-soft); }
.tree-post { background: white; border: 1px solid var(--line); border-radius: 22px; padding: 14px; margin-top: 10px; }
.tree-post .tree-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }
.tree-post > .tree-copy {
  color: #624f58; font-size: 12px; line-height: 1.68; margin: 10px 0 5px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  user-select: text; white-space: break-spaces; overflow-wrap: anywhere;
}
.tree-post.expanded > .tree-copy { display: block; overflow: visible; -webkit-line-clamp: unset; }
.tree-expand {
  border: 0; padding: 3px 0; background: transparent; color: var(--raspberry);
  font-size: 9.5px; font-weight: 900;
}
.tree-type-label { display: inline-flex; min-height: 23px; padding: 0 8px; align-items: center; border-radius: 999px; background: var(--pink-soft); color: var(--raspberry); font-size: 9px; font-weight: 900; }
.tree-type-label.question { background: var(--sky); color: #32667a; }
.warm-replies { display: grid; gap: 7px; margin-top: 8px; }
.warm-replies > b { color: #705563; font-size: 10px; }
.tree-reply {
  padding: 10px; border-radius: 14px; background: var(--pink-soft); color: #705563;
  font-size: 10px; line-height: 1.55;
}
.tree-reply .comment-actions { margin-top: 3px; }
.safety-note { background: #fff1ed; color: #8a4538; border-radius: 16px; padding: 12px; font-size: 10px; line-height: 1.65; }
.recommendation-fields { background: var(--pink-soft); border-radius: 18px; padding: 13px; }
.app-bottom-nav {
  position: absolute; left: 8px; right: 8px; bottom: max(7px, env(safe-area-inset-bottom, 0px)); height: 68px; z-index: 45;
  display: grid; grid-template-columns: repeat(4,1fr); align-items: end;
  background: rgba(255,254,249,.98); border: 1px solid rgba(199,25,66,.11);
  border-radius: 24px; box-shadow: 0 12px 35px rgba(92,52,64,.12);
}
.app-bottom-nav:not([hidden]) { display: grid; }
.home-entry, .home-search, .app-bottom-nav button, .public-search-button { pointer-events: auto; touch-action: manipulation; }
.app-bottom-nav button {
  height: 66px; border: 0; padding: 7px 2px 5px; background: transparent; color: #9c858e;
  font-size: 10px; font-weight: 800; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 3px;
}
.app-bottom-nav button.active { color: var(--raspberry); }
.nav-icon { width: 28px; height: 28px; overflow: visible; }
.nav-home { fill: none; stroke: currentColor; stroke-width: 1.15; }
.app-bottom-nav button.active .nav-home { fill: currentColor; stroke: currentColor; }
.app-bottom-nav button.active .nav-home .nav-flower-center { fill: var(--cream); stroke: var(--cream); }
.nav-collection, .nav-profile { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-bottom-nav button.active .nav-collection { fill: rgba(199,25,66,.12); stroke: currentColor; }
.nav-publish { position: relative; }
.publish-circle {
  width: 28px; height: 28px; margin: 0; border: 2px solid currentColor; border-radius: 50%;
  display: grid; place-items: center; color: inherit; background: transparent; box-shadow: none;
}
.publish-circle svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
.app-bottom-nav .nav-publish.active .publish-circle { background: rgba(199,25,66,.1); transform: none; }
.form-stack { display: grid; gap: 10px; }
.field label, .form-stack > label { display: block; font-size: 11px; font-weight: 850; margin: 0 0 6px; color: #6f5661; }
.field input, .field textarea, .field select, .form-stack > input, .form-stack > textarea, .form-stack > select {
  width: 100%; border: 1px solid var(--line); background: white; color: var(--ink); border-radius: 15px; min-height: 45px; padding: 11px 13px; outline: none;
}
.field textarea, .form-stack > textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--raspberry); box-shadow: 0 0 0 3px rgba(199,25,66,.09); }
.mobile-upload { display: grid; gap: 7px; }
.field .mobile-upload-card, .form-stack .mobile-upload-card {
  min-height: 76px; padding: 13px 14px; border: 1.5px dashed rgba(199,25,66,.3);
  border-radius: 20px; display: grid; grid-template-columns: 44px minmax(0,1fr) 30px;
  align-items: center; gap: 11px; background: linear-gradient(135deg, #fff7fa, #fff);
  color: var(--ink); cursor: pointer; transition: .18s ease; margin: 0 !important;
}
.field .mobile-upload-card:active, .form-stack .mobile-upload-card:active { transform: scale(.985); background: var(--pink-soft); }
.mobile-upload-icon {
  width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center;
  background: var(--pink); color: var(--raspberry);
}
.mobile-upload-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mobile-upload-copy { min-width: 0; }
.mobile-upload-copy b, .mobile-upload-copy small { display: block; }
.mobile-upload-copy b { font-size: 13px; }
.mobile-upload-copy small { margin-top: 3px; color: var(--muted); font-size: 9.5px; }
.mobile-upload-plus {
  width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center;
  background: white; color: var(--raspberry); box-shadow: inset 0 0 0 1px rgba(199,25,66,.2);
  font-size: 18px; font-weight: 700;
}
.mobile-upload.has-file .mobile-upload-card { border-style: solid; border-color: rgba(60,128,98,.3); background: #f3fbf7; }
.mobile-upload.has-file .mobile-upload-icon { background: #dff2e7; color: var(--success); }
.mobile-upload-name { margin: 0 4px !important; color: var(--success) !important; font-size: 9.5px !important; line-height: 1.5 !important; }
.mobile-upload-inline { padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, #fff7fa, #fff); }
.mobile-upload-inline-copy b, .mobile-upload-inline-copy small { display: block; }
.mobile-upload-inline-copy b { font-size: 12px; color: var(--ink); }
.mobile-upload-inline-copy small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.mobile-upload-inline-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.mobile-upload-inline-actions button { min-height: 38px; padding: 0 10px; border: 1px solid rgba(199,25,66,.2); border-radius: 999px; background: white; color: var(--raspberry); font-size: 10px; font-weight: 850; }
.mobile-upload-preview-card { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px; border: 1px solid rgba(60,128,98,.22); border-radius: 16px; background: #f3fbf7; }
.mobile-upload-preview-card img, .mobile-upload-preview-card > span { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; display: grid; place-items: center; background: #dff2e7; color: var(--success); font-size: 9px; }
.mobile-upload-preview-card b, .mobile-upload-preview-card small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-upload-preview-card b { font-size: 10px; color: var(--ink); }
.mobile-upload-preview-card small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.mobile-upload-preview-card button { min-height: 34px; padding: 0 11px; border: 0; border-radius: 999px; background: #fff0f2; color: var(--danger); font-size: 9px; font-weight: 850; }
.app-primary, .app-secondary, .app-danger { border: 0; width: 100%; min-height: 46px; border-radius: 999px; font-weight: 900; padding: 0 18px; }
.app-primary { background: var(--raspberry); color: white; }
.app-primary.locked { opacity: .48; box-shadow: none; }
.app-secondary { background: white; color: var(--raspberry); box-shadow: inset 0 0 0 1px rgba(199,25,66,.24); }
.app-danger { background: #fff0f2; color: var(--danger); box-shadow: inset 0 0 0 1px rgba(182,37,63,.2); }
.inline-actions { display: flex; gap: 9px; }
.inline-actions > * { flex: 1; }
.profile-card { background: var(--pink); border-radius: 28px; padding: 18px; display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: center; }
.profile-avatar { width: 68px; height: 68px; border-radius: 50%; border: 0; padding: 0; background: transparent; color: var(--raspberry); display: grid; place-items: center; font-size: 23px; font-weight: 900; overflow: hidden; position: relative; box-shadow: none; }
.profile-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; transform: scale(1.035); }
.profile-avatar::after { content: "＋"; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; background: var(--raspberry); color: white; border-radius: 50%; display: grid; place-items: center; font-size: 13px; }
.profile-info h2 { margin: 0; font-size: 18px; }
.profile-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.profile-edit-button {
  min-height: 27px; padding: 0 10px; border: 1px solid rgba(199,25,66,.18); border-radius: 999px;
  background: rgba(255,255,255,.72); color: var(--raspberry); font-size: 9px; font-weight: 900;
}
.vip-entry-banner {
  width: 100%; min-height: 34px; margin-top: 7px; padding: 6px 10px; border: 0; border-radius: 13px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: linear-gradient(110deg, #fff7d7, #fff0f5); color: #7f3f24; text-align: left;
  box-shadow: inset 0 0 0 1px rgba(169,107,38,.14);
}
.vip-entry-banner span { font-size: 10.5px; font-weight: 950; white-space: nowrap; }
.vip-entry-banner b { color: #8a5966; font-size: 8.5px; line-height: 1.35; text-align: right; }
.flower-line { margin-top: 7px; color: #82354f; font-size: 11px; font-weight: 800; }
.settings-list { background: white; border-radius: 21px; border: 1px solid var(--line); overflow: hidden; }
.settings-row { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: white; min-height: 52px; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; color: var(--ink); text-align: left; font-weight: 750; font-size: 13px; }
.settings-row:last-child { border-bottom: 0; }
.settings-row span:last-child { color: var(--muted); }
.support-welcome {
  margin-bottom: 12px; padding: 20px; border-radius: 25px; background: var(--pink);
  box-shadow: inset 0 0 0 1px rgba(199,25,66,.07);
}
.support-welcome h2 { margin: 0 0 8px; font-size: 21px; }
.support-welcome p { margin: 0; color: #71505d; font-size: 11px; line-height: 1.7; }
.field-counter { margin-top: 6px; display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 8.5px; }
.field-counter b { color: var(--raspberry); }
.support-history { display: grid; gap: 9px; }
.support-message-card { padding: 14px 15px; border: 1px solid var(--line); border-radius: 19px; background: white; }
.support-message-card > div { display: flex; justify-content: space-between; gap: 10px; }
.support-message-card b { font-size: 12px; }
.support-message-card span { color: var(--muted); font-size: 9px; }
.support-message-card p {
  display: -webkit-box; margin: 8px 0; overflow: hidden; color: #66525b; font-size: 10.5px; line-height: 1.6;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.support-message-card small { color: var(--success); font-size: 9px; font-weight: 850; }
.empty-soft { padding: 18px; border-radius: 19px; background: var(--pink-soft); color: var(--muted); font-size: 10.5px; text-align: center; }
.settings-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: white; }
.settings-control, .toggle-row {
  min-height: 62px; padding: 11px 14px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.settings-panel > :last-child { border-bottom: 0; }
.settings-control > div:first-child, .toggle-row > span { min-width: 0; display: grid; gap: 3px; }
.settings-control b, .toggle-row b { font-size: 12px; }
.settings-control span, .toggle-row small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.segmented-control { flex: 0 0 auto; display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--pink-soft); }
.segmented-control button {
  min-width: 38px; min-height: 29px; padding: 0 8px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); font-size: 9px; font-weight: 900;
}
.segmented-control button.active { background: white; color: var(--raspberry); box-shadow: 0 3px 10px rgba(112,61,77,.09); }
.toggle-row { cursor: pointer; }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-row i {
  width: 44px; height: 26px; flex: 0 0 auto; padding: 3px; border-radius: 999px;
  background: #d9d1d4; transition: .18s ease;
}
.toggle-row i::after {
  content: ""; display: block; width: 20px; height: 20px; border-radius: 50%;
  background: white; box-shadow: 0 2px 7px rgba(49,31,38,.18); transition: .18s ease;
}
.toggle-row input:checked + i { background: var(--raspberry); }
.toggle-row input:checked + i::after { transform: translateX(18px); }
.storage-card { padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: white; }
.storage-head { display: flex; justify-content: space-between; gap: 14px; }
.storage-head > div { display: grid; gap: 4px; }
.storage-head b { font-size: 12px; }
.storage-head span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.storage-head strong { color: var(--raspberry); font-size: 13px; white-space: nowrap; }
.storage-track { height: 7px; margin: 14px 0; overflow: hidden; border-radius: 999px; background: var(--pink-soft); }
.storage-track i { display: block; height: 100%; border-radius: inherit; background: var(--raspberry); transition: width .25s ease; }
.draft-entry {
  min-height: 35px; padding: 0 11px; border: 1px solid rgba(199,25,66,.17); border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px; background: white; color: var(--raspberry);
  font-size: 9.5px; font-weight: 900; white-space: nowrap;
}
.draft-entry b {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  background: var(--raspberry); color: white; font-size: 8px;
}
.draft-list { display: grid; gap: 9px; }
.draft-card {
  padding: 11px; border: 1px solid var(--line); border-radius: 18px;
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; background: white;
}
.draft-card > button:first-child { min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; }
.draft-card b, .draft-card span, .draft-card small { display: block; }
.draft-card b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.draft-card span {
  margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 9.5px; line-height: 1.45;
  text-overflow: ellipsis; white-space: nowrap;
}
.draft-card small { margin-top: 6px; color: #9a7d88; font-size: 8px; }
.draft-delete { align-self: center; min-height: 31px; padding: 0 9px; border: 0; border-radius: 999px; background: #fff0f2; color: var(--danger); font-size: 9px; font-weight: 900; }
.vip-paywall { margin: -22px; padding-bottom: 18px; }
.vip-paywall-head {
  padding: 25px 22px 21px; border-radius: 29px 29px 25px 25px;
  background: linear-gradient(145deg, #f8cfe0, #fff0d6); text-align: center;
}
.vip-paywall-head > span {
  display: inline-grid; min-width: 44px; height: 25px; padding: 0 10px; place-items: center;
  border-radius: 999px; background: #33252b; color: #ffe89a; font-size: 10px; font-weight: 950; letter-spacing: .08em;
}
.vip-paywall-head h2 { margin: 9px 0 7px; font-size: 23px; }
.vip-paywall-head p { margin: 0; color: #73515f; font-size: 10.5px; line-height: 1.65; }
.vip-benefits { margin: 13px 18px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vip-benefits div { padding: 11px; border-radius: 16px; background: white; border: 1px solid var(--line); }
.vip-benefits b, .vip-benefits span { display: block; }
.vip-benefits b { font-size: 11px; }
.vip-benefits span { margin-top: 3px; color: var(--muted); font-size: 8.5px; line-height: 1.4; }
.vip-product-grid { margin: 0 18px 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vip-product {
  min-height: 92px; padding: 12px; border: 1.5px solid var(--line); border-radius: 18px;
  position: relative; display: grid; align-content: center; background: white; color: var(--ink); text-align: left;
}
.vip-product.selected { border-color: var(--raspberry); background: var(--pink-soft); box-shadow: 0 0 0 3px rgba(199,25,66,.07); }
.vip-product small {
  position: absolute; right: 8px; top: 7px; padding: 3px 6px; border-radius: 999px;
  background: var(--raspberry); color: white; font-size: 7.5px; font-weight: 900;
}
.vip-product b { font-size: 10px; }
.vip-product strong { margin-top: 4px; color: var(--raspberry); font-size: 20px; }
.vip-product span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.vip-consent { margin: 7px 20px; display: flex; align-items: flex-start; gap: 7px; color: #705a64; font-size: 9px; line-height: 1.5; }
.vip-consent input { margin-top: 2px; accent-color: var(--raspberry); }
.vip-policy { margin: 8px 18px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.vip-policy summary { padding: 11px 13px; color: var(--raspberry); font-size: 10px; font-weight: 900; cursor: pointer; }
.vip-policy div { padding: 0 13px 10px; }
.vip-policy p { margin: 7px 0; font-size: 9.5px; line-height: 1.65; }
.vip-paywall > .app-primary, .vip-paywall > .app-secondary { width: calc(100% - 36px); margin: 10px 18px 0; }
.vip-paywall > .app-secondary { margin-top: 8px; }
.vip-close { width: 100%; min-height: 34px; border: 0; background: transparent; color: var(--muted); font-size: 9.5px; }
.vip-limit-note {
  width: 100%; min-height: 42px; padding: 10px; border: 0; border-radius: 14px;
  background: #fff7dc; color: #8a5b1e; font-size: 9.5px; font-weight: 850; line-height: 1.45;
}
.phone-step-success { margin-bottom: 10px; padding: 11px; border-radius: 14px; background: #edf7f1; color: var(--success); font-size: 10px; font-weight: 850; }
.network-layer {
  position: absolute; inset: 0; z-index: 58; padding: 52px 14px 90px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(45,32,38,.12), transparent 45%);
}
.network-card {
  max-width: 360px; min-height: 78px; margin: 0 auto; padding: 12px;
  border: 1px solid rgba(182,37,63,.18); border-radius: 20px; display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px;
  background: rgba(255,254,249,.98); box-shadow: 0 14px 35px rgba(77,38,51,.18); pointer-events: auto;
}
.network-symbol { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff0f2; color: var(--danger); font-weight: 950; }
.network-card b { font-size: 12px; }
.network-card p { margin: 3px 0 0; color: var(--muted); font-size: 8.5px; line-height: 1.45; }
.network-card button { min-height: 31px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--raspberry); color: white; font-size: 8.5px; font-weight: 900; }
.tool-panel { border-radius: 25px; padding: 17px; background: white; border: 1px solid var(--line); margin-bottom: 11px; }
.tool-panel h3 { margin: 0 0 8px; font-size: 16px; }
.upload-zone { border: 1.5px dashed rgba(199,25,66,.34); border-radius: 20px; background: var(--pink-soft); min-height: 105px; display: grid; place-items: center; color: var(--raspberry); font-weight: 850; text-align: center; padding: 16px; }
.image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.image-grid img { aspect-ratio: 1; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); }
.reminder-list { display: grid; gap: 8px; margin-top: 10px; }
.reminder-item { background: var(--pink-soft); border-radius: 14px; padding: 11px; display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }
.diary-paper { background: #fff9d9; border: 1px solid rgba(169,107,38,.2); border-radius: 27px; padding: 22px; min-height: 270px; position: relative; overflow: hidden; box-shadow: 0 10px 24px rgba(114,74,38,.09); }
.diary-paper::before { content: ""; position: absolute; inset: 0; opacity: .25; background: repeating-linear-gradient(transparent 0 29px, rgba(83,144,164,.25) 30px 31px); }
.diary-paper > * { position: relative; z-index: 1; }
.diary-paper h2 { font-size: 21px; margin: 0 0 22px; color: #8d4a33; transform: rotate(-1deg); }
.sticker-row { display: flex; gap: 7px; font-size: 24px; }
.diary-paper textarea { margin-top: 16px; width: 100%; min-height: 125px; background: transparent; border: 0; outline: none; line-height: 31px; resize: none; color: #684b45; }
.vip-ribbon { position: absolute; right: -35px; top: 17px; transform: rotate(39deg); background: var(--raspberry); color: white; font-size: 10px; font-weight: 900; padding: 6px 42px; }
.auth-panel { padding: 20px 18px 28px; min-height: calc(100% - 8px); }
#screen-auth { scroll-behavior: smooth; }
.auth-welcome { display: grid; grid-template-columns: 62px minmax(0,1fr) 62px; align-items: end; column-gap: 8px; margin: 0 18px 12px; min-height: 178px; overflow: visible; }
.auth-hero { text-align: center; padding: 4px 0 10px; position: relative; z-index: 2; }
.auth-hero img { width: 92px; margin: 0 auto 8px; }
.auth-hero h1 { font-size: 27px; margin: 0; }
.auth-hero p {
  color: var(--muted); font-size: 11px; line-height: 1.65; max-width: none;
  width: max-content; white-space: nowrap; margin-inline: 50%; transform: translateX(-50%);
}
.auth-mascot { border: 0; padding: 0; background: transparent; align-self: end; transform-origin: 50% 90%; transition: transform .25s ease; position: relative; z-index: 5; overflow: visible; }
.auth-mascot img { width: 100%; height: auto; }
.auth-mascot.dog,
.auth-mascot.cat { transform: translateY(5px); }
.auth-mascot.hello { animation: mascot-wave .7s ease-in-out 2; }
.mascot-bubble {
  position: absolute; z-index: 8; bottom: calc(100% + 7px); width: 116px; min-height: 40px;
  padding: 9px 10px; border: 1px solid rgba(199,25,66,.18); border-radius: 17px;
  display: grid; place-items: center; background: rgba(255,254,249,.98); color: #7a4054;
  box-shadow: 0 9px 24px rgba(112,61,77,.12); font-size: 10.5px; line-height: 1.45; font-weight: 850;
  opacity: 0; pointer-events: none; transform: translateY(5px) scale(.94);
  transition: opacity .22s ease, transform .22s ease;
}
.auth-mascot.dog .mascot-bubble { left: 0; }
.auth-mascot.cat .mascot-bubble { right: 0; }
.mascot-bubble::after {
  content: ""; position: absolute; bottom: -6px; width: 11px; height: 11px;
  background: inherit; border-right: 1px solid rgba(199,25,66,.18); border-bottom: 1px solid rgba(199,25,66,.18);
  transform: rotate(45deg);
}
.auth-mascot.dog .mascot-bubble::after { left: 22px; }
.auth-mascot.cat .mascot-bubble::after { right: 22px; }
.auth-mascot.bubble-visible .mascot-bubble { opacity: 1; transform: translateY(0) scale(1); }
@keyframes mascot-wave {
  0%, 100% { transform: translateY(4px) rotate(0); }
  35% { transform: translateY(-7px) rotate(-5deg); }
  70% { transform: translateY(-3px) rotate(5deg); }
}
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--pink-soft); border-radius: 999px; padding: 4px; margin-bottom: 17px; }
.auth-tabs button { border: 0; background: transparent; border-radius: 999px; min-height: 40px; color: var(--muted); font-size: 15px; font-weight: 900; }
.auth-tabs button.active { background: white; color: var(--raspberry); box-shadow: 0 4px 12px rgba(112,61,77,.09); }
.login-method-tabs { margin-bottom: 0; border: 1px solid rgba(199,25,66,.10); }
.agreement-actions { display: grid; gap: 8px; }
.agreement-actions.compact { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.agreement-button {
  width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 15px;
  background: white; color: var(--ink); padding: 0 13px; display: flex; align-items: center;
  justify-content: space-between; text-align: left; font-size: 12px; font-weight: 850;
}
.agreement-actions.compact .agreement-button {
  width: auto; min-height: 36px; padding: 0 13px; border-radius: 999px; gap: 9px;
  font-size: 11px; background: rgba(255,255,255,.52);
}
.agreement-actions.compact .agreement-button b { font-size: 9.5px; }
.agreement-help { margin: 7px 0 11px; color: var(--muted); text-align: center; font-size: 9.5px; }
.agreement-button b { color: var(--raspberry); font-size: 10px; }
.agreement-button.agreed { background: #edf7f1; border-color: rgba(60,128,98,.24); }
.agreement-button.agreed b { color: var(--success); }
.agreement-document {
  max-height: 330px; overflow-y: auto; padding: 14px; margin: 12px 0;
  border: 1px solid var(--line); border-radius: 17px; background: white;
}
.agreement-full-frame {
  display: block; width: 100%; height: min(52vh, 480px); min-height: 350px; margin: 12px 0;
  border: 1px solid var(--line); border-radius: 17px; background: white;
}
.agreement-open-full {
  display: block; margin: -3px 0 12px; color: var(--raspberry); text-align: center;
  font-size: 11px; font-weight: 850;
}
.agreement-document h3 { margin: 16px 0 6px; font-size: 14px; }
.agreement-document h3:first-child { margin-top: 0; }
.agreement-document p { margin: 0 0 8px; }
.consent-line { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; color: #6f5a63; line-height: 1.68; }
#screen-auth .field label { font-size: 12px; }
#screen-auth .field input { font-size: 16px; }
#screen-auth .app-primary, #screen-auth .app-secondary { font-size: 15px; }
.consent-line input { margin-top: 3px; accent-color: var(--raspberry); }
.startup-consent-line { margin: 14px 0 4px; padding: 12px 14px; min-height: 48px; border-radius: 16px; background: #fff8fb; align-items: center; }
.startup-consent-line input { width: 22px; height: 22px; flex: 0 0 auto; }
#privacy-agree:disabled { opacity: .45; cursor: not-allowed; filter: saturate(.55); }
.verification-current { min-height: 230px; display: grid; place-items: center; align-content: center; text-align: center; padding: 12px; }
.verification-current p { margin: 16px auto 0; max-width: 260px; color: #6d5962; font-size: 12px; line-height: 1.7; }
.verification-deadline {
  width: 100%; max-width: 290px; margin-top: 16px; padding: 12px 14px;
  border: 1px solid rgba(182,37,63,.18); border-radius: 17px;
  background: #fff0f2; color: #824052; text-align: left;
}
.verification-deadline b, .verification-deadline span { display: block; }
.verification-deadline b { color: var(--danger); font-size: 14px; }
.verification-deadline b span { display: inline; font-size: 22px; }
.verification-deadline > span { margin-top: 4px; font-size: 10px; line-height: 1.55; }
.verification-illustration {
  width: 108px; height: 108px; border-radius: 35px; display: grid; place-items: center;
  background: var(--pink); color: var(--raspberry); font-size: 42px; font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(199,25,66,.1);
}
.identity-form { width: 100%; display: grid; gap: 10px; margin-top: 18px; text-align: left; }
.identity-form .field { width: 100%; }
.identity-error { margin: 0 !important; max-width: none !important; color: var(--danger) !important; text-align: left; }
.needs-attention { animation: agreement-shake .42s ease; border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(182,37,63,.1); }
@keyframes agreement-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
.auth-scroll-cue {
  width: 100%; border: 0; background: transparent; color: var(--raspberry); margin-top: 20px;
  display: grid; place-items: center; gap: 2px; font-size: 10.5px; font-weight: 850;
  transition: transform .24s ease;
}
#screen-auth.intro-focused .auth-scroll-cue { transform: translateY(34px); }
.auth-scroll-cue b { font-size: 20px; animation: cue-bounce 1.6s ease-in-out infinite; }
@keyframes cue-bounce { 50% { transform: translateY(5px); } }
.auth-intro {
  min-height: 610px; margin: 10px -1px 0; padding: 74px 42px 50px;
  border-radius: 30px; background: var(--pink); position: relative; overflow: hidden;
  display: grid; align-content: center;
}
.intro-content { position: relative; z-index: 2; text-align: center; opacity: calc(.25 + var(--auth-progress, 0) * .75); transform: translateY(calc(30px - var(--auth-progress, 0) * 30px)); }
.intro-kicker { margin: 0 0 12px; color: var(--raspberry); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.intro-content h2 { margin: 0; font-size: 30px; line-height: 1.18; letter-spacing: -.04em; }
.intro-content > p:not(.intro-kicker) { margin: 16px 0 22px; color: #6f4f5d; font-size: 12.5px; line-height: 1.8; }
.intro-points { display: grid; gap: 8px; }
.intro-points div { background: rgba(255,253,245,.74); border-radius: 16px; padding: 11px; text-align: left; }
.intro-points b, .intro-points span { display: block; }
.intro-points b { font-size: 12px; }
.intro-points span { color: #755a65; font-size: 10px; margin-top: 3px; }
.intro-mascot { position: absolute; width: 105px; z-index: 1; transition: transform .12s linear; }
.intro-dog { left: -18px; bottom: 18px; transform: translateY(calc(36px - var(--auth-progress, 0) * 36px)) rotate(-5deg); }
.intro-cat { right: -18px; top: 15px; transform: translateY(calc(-30px + var(--auth-progress, 0) * 30px)) rotate(5deg); }
.auth-return-cue {
  position: absolute; z-index: 3; left: 50%; bottom: 12px; transform: translateX(-50%);
  min-width: 150px; min-height: 38px; padding: 4px 14px; border: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: rgba(255,253,245,.8); color: var(--raspberry); font-size: 10.5px; font-weight: 900;
}
.auth-return-cue b { font-size: 16px; animation: return-bounce 1.6s ease-in-out infinite; }
@keyframes return-bounce { 50% { transform: translateY(-4px); } }
.modal-layer { position: absolute; inset: 0; z-index: 60; display: none; place-items: end center; background: rgba(45,32,38,.48); padding: 14px; }
.modal-layer.open { display: grid; }
.modal-card { width: 100%; max-height: 86%; overflow-y: auto; border-radius: 29px; background: var(--cream); padding: 22px; box-shadow: var(--shadow); }
.modal-card h2 { margin: 0 0 10px; font-size: 21px; }
.modal-card p { color: #69555e; font-size: 12px; line-height: 1.7; }
.modal-card .important-copy { background: var(--pink); border-radius: 17px; padding: 13px; font-weight: 850; color: #762f47; }
.modal-links { display: flex; justify-content: center; gap: 16px; margin: 16px 0; font-size: 12px; color: var(--raspberry); font-weight: 850; }
.toast { position: absolute; z-index: 90; left: 50%; bottom: 88px; transform: translate(-50%, 12px); background: #33252b; color: white; border-radius: 999px; padding: 10px 14px; font-size: 11px; opacity: 0; pointer-events: none; transition: .22s ease; white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.admin-table { display: grid; gap: 9px; }
.report-item { border: 1px solid var(--line); background: white; border-radius: 17px; padding: 12px; }
.report-item h3 { margin: 0; font-size: 13px; }
.report-item p { margin: 5px 0 10px; font-size: 10px; color: var(--muted); }
.report-item .inline-actions button { min-height: 36px; font-size: 10px; }
.report-detail-card {
  display: grid;
  gap: 7px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.74);
  margin: 10px 0 12px;
}
.report-detail-card p {
  margin: 0;
}

body.app-font-small .public-folder-card h3 { font-size: 16px; }
body.app-font-small .settings-row,
body.app-font-small .post-card p,
body.app-font-small .field input,
body.app-font-small .field textarea,
body.app-font-small .field select { font-size: 11px; }
body.app-font-small .post-card h3 { font-size: 14px; }
body.app-font-large .app-brand h1,
body.app-font-large .section-row h2 { font-size: 19px; }
body.app-font-large .public-folder-card h3 { font-size: 19px; }
body.app-font-large .settings-row { min-height: 58px; font-size: 14px; }
body.app-font-large .post-card h3 { font-size: 17px; }
body.app-font-large .post-card p,
body.app-font-large .field input,
body.app-font-large .field textarea,
body.app-font-large .field select { font-size: 13px; }
body.app-font-large .settings-control b,
body.app-font-large .toggle-row b { font-size: 14px; }
body.app-font-large .settings-control span,
body.app-font-large .toggle-row small { font-size: 10.5px; }

body.app-dark {
  --cream: #21191d;
  --paper: #291f24;
  --app-top-surface: rgba(36, 27, 43, .985);
  --app-top-divider: transparent;
  --pink: #553040;
  --pink-soft: #35232c;
  --sky: #263f49;
  --ink: #fff6f8;
  --muted: #c8afb9;
  --line: rgba(255,230,239,.13);
  --success: #83c5a5;
  color-scheme: dark;
  background: #21191d;
}
body.app-dark .device-frame,
body.app-dark .app-bottom-nav,
body.app-dark .home-topbar,
body.app-dark .public-topbar,
body.app-dark .modal-card { background: var(--cream); }
body.app-dark .settings-list,
body.app-dark .settings-row,
body.app-dark .settings-panel,
body.app-dark .tool-panel,
body.app-dark .support-message-card,
body.app-dark .storage-card,
body.app-dark .post-card,
body.app-dark .trusted-private-card,
body.app-dark .circle-button,
body.app-dark .field input,
body.app-dark .field textarea,
body.app-dark .field select,
body.app-dark .form-stack > input,
body.app-dark .form-stack > textarea,
body.app-dark .form-stack > select,
body.app-dark .draft-entry,
body.app-dark .draft-card,
body.app-dark .vip-benefits div,
body.app-dark .vip-product,
body.app-dark .vip-policy { background: #2d2227; color: var(--ink); }
body.app-dark .public-folder-card.tone-2 { background: #2d2227; }
body.app-dark .public-folder-card h3 { color: var(--ink); }
body.app-dark .support-welcome p,
body.app-dark .post-card p,
body.app-dark .modal-card p { color: #dbc6ce; }
body.app-dark .segmented-control button.active,
body.app-dark .profile-edit-button { background: #47303a; }
body.app-dark .network-card { background: rgba(45,34,39,.98); color: var(--ink); }
body.app-hearing .toast { border: 2px solid white; border-radius: 15px; white-space: normal; text-align: center; }

@media (max-width: 900px) {
  .hero, .support-panel, .preview-layout { grid-template-columns: 1fr; }
  .hero { gap: 20px; padding-top: 54px; }
  .hero-art { min-height: 570px; }
  .section-heading { grid-template-columns: 1fr; gap: 18px; }
  .feature-flow, .rights-grid { grid-template-columns: 1fr 1fr; }
  .flow-step:nth-child(2)::after { display: none; }
  .preview-copy { display: none; }
  .device-frame { height: calc(100vh - 36px); }
}
@media (max-width: 620px) {
  .nav-links a:not(.primary-button) { display: none; }
  .hero { min-height: auto; }
  .hero-copy h1 { font-size: 48px; }
  .section { padding: 72px 0; }
  .feature-flow, .rights-grid { grid-template-columns: 1fr; }
  .flow-step::after { display: none; }
  .support-panel { padding: 30px 22px; }
  .app-page { padding: 0; background: var(--cream); }
  .device-frame { width: 100%; height: 100vh; border: 0; border-radius: 0; min-height: 620px; }
  .device-island { display: none; }
}

/* iOS typography and alignment system - Beta 2.4 */
.app-shell {
  --app-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --app-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --app-text-caption: 11px;
  --app-text-small: 12px;
  --app-text-body: 14px;
  --app-text-title: 17px;
  --app-text-heading: 20px;
  --app-text-display: 28px;
  --app-weight-regular: 400;
  --app-weight-medium: 500;
  --app-weight-semibold: 600;
  --app-weight-bold: 700;
  font-family: var(--app-font-ui);
  font-size: var(--app-text-body);
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.app-shell button,
.app-shell input,
.app-shell textarea,
.app-shell select {
  font-family: var(--app-font-ui);
  font-synthesis: none;
  letter-spacing: 0;
}

.app-shell img,
.app-shell svg,
.app-shell video {
  image-rendering: auto;
  shape-rendering: geometricPrecision;
}

.app-brand h1,
.home-topbar .app-brand h1,
.centered-topbar .app-brand h1 {
  font-family: var(--app-font-display);
  font-size: var(--app-text-title);
  line-height: 1.25;
  font-weight: var(--app-weight-bold);
  letter-spacing: -.01em;
}

.app-brand p,
.home-topbar .app-brand p,
.centered-topbar .app-brand p {
  margin-top: 3px;
  font-size: var(--app-text-caption);
  line-height: 1.35;
  font-weight: var(--app-weight-regular);
  letter-spacing: 0;
}

.section-row {
  min-height: 28px;
  align-items: center;
}

.section-row h2 {
  font-family: var(--app-font-display);
  font-size: var(--app-text-title);
  line-height: 1.3;
  font-weight: var(--app-weight-bold);
  letter-spacing: -.01em;
}

.section-row span {
  font-size: var(--app-text-caption);
  line-height: 1.35;
  font-weight: var(--app-weight-regular);
  text-align: right;
}

.app-hero h2,
.intro-content h2,
.tree-intro h2,
.lab-intro h2,
.support-welcome h2,
.member-hero h2,
.modal-card h2,
.vip-paywall-head h2 {
  font-family: var(--app-font-display);
  font-weight: var(--app-weight-bold);
  letter-spacing: -.02em;
}

.app-hero h2 { font-size: var(--app-text-display); line-height: 1.2; }
.tree-intro h2,
.lab-intro h2,
.support-welcome h2,
.member-hero h2,
.modal-card h2,
.vip-paywall-head h2 { font-size: var(--app-text-heading); line-height: 1.3; }

.public-folder-card h3,
.trusted-private-card h3,
.post-card h3,
.product-card h3,
.tool-panel h3,
.empty-community h3 {
  font-family: var(--app-font-display);
  font-size: var(--app-text-title);
  line-height: 1.38;
  font-weight: var(--app-weight-semibold);
  letter-spacing: -.01em;
  text-wrap: balance;
}

.public-folder-card p,
.trusted-private-card p,
.post-card p,
.product-card p,
.tree-post > .tree-copy,
.comment-copy-row p,
.tool-panel p,
.empty-community p {
  font-family: var(--app-font-ui);
  font-size: var(--app-text-body);
  line-height: 1.65;
  font-weight: var(--app-weight-regular);
  letter-spacing: 0;
}

.trusted-private-card {
  padding: 17px;
  border-radius: 20px;
  box-shadow: 0 7px 24px rgba(80, 45, 57, .045);
}

.trusted-private-head span,
.trusted-private-head b,
.trusted-private-stats {
  font-size: var(--app-text-caption);
  line-height: 1.35;
  font-weight: var(--app-weight-medium);
}

.trusted-private-head b { font-weight: var(--app-weight-semibold); }
.trusted-private-stats { gap: 12px; }

.post-author,
.comment-author,
.field label,
.form-stack > label,
.settings-control b,
.toggle-row b,
.mobile-upload-copy b {
  font-size: var(--app-text-small);
  line-height: 1.4;
  font-weight: var(--app-weight-semibold);
}

.post-meta,
.post-actions button,
.comment-actions button,
.mobile-upload-copy small,
.mobile-upload-name,
.field-counter,
.public-folder-card small {
  font-size: var(--app-text-caption);
  line-height: 1.4;
  font-weight: var(--app-weight-regular);
}

.post-trust,
.post-transfer,
.post-bookmark,
.review-label,
.tree-type-label,
.folder-pin-label {
  font-weight: var(--app-weight-semibold);
}

.settings-row,
.app-primary,
.app-secondary,
.app-danger,
.auth-tabs button,
.agreement-button {
  font-size: var(--app-text-body);
  line-height: 1.35;
  font-weight: var(--app-weight-semibold);
}

.field input,
.field textarea,
.field select,
.form-stack > input,
.form-stack > textarea,
.form-stack > select {
  font-size: 16px;
  line-height: 1.45;
  font-weight: var(--app-weight-regular);
}

.field input[readonly] {
  color: var(--raspberry);
  background: #fff8fb;
  font-weight: var(--app-weight-semibold);
}

.empty-community {
  padding: 28px 22px;
  border: 1px solid rgba(199,25,66,.12);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,240,246,.72));
  text-align: center;
}

.empty-community h3 { margin: 0 0 8px; }
.empty-community p { margin: 0 auto 17px; color: var(--muted); max-width: 310px; }
.empty-community .app-primary { width: auto; min-width: 190px; padding-inline: 22px; }

.origin-fieldset {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(199,25,66,.14);
  border-radius: 20px;
  background: rgba(255,255,255,.68);
}

.origin-fieldset legend {
  padding: 0 7px;
  color: #6f5661;
  font-size: var(--app-text-small);
  font-weight: var(--app-weight-semibold);
}

.origin-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.origin-option {
  min-width: 0;
  min-height: 76px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: white;
}

.origin-option:has(input:checked) {
  border-color: rgba(199,25,66,.46);
  background: var(--pink-soft);
  box-shadow: 0 0 0 2px rgba(199,25,66,.07);
}

.origin-option input,
.rights-confirm input {
  flex: 0 0 auto;
  margin: 3px 0 0;
  accent-color: var(--raspberry);
}

.origin-option b,
.origin-option small {
  display: block;
}

.origin-option b {
  font-size: var(--app-text-small);
  line-height: 1.35;
  font-weight: var(--app-weight-semibold);
}

.origin-option small {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--app-text-caption);
  line-height: 1.45;
}

.repost-source-fields {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.rights-confirm {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #67535c;
  font-size: var(--app-text-caption);
  line-height: 1.55;
}

.rights-guidance {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: var(--app-text-caption);
  line-height: 1.55;
}

.content-rights {
  margin-top: 11px;
  padding: 11px 12px;
  border-radius: 14px;
  font-size: var(--app-text-caption);
  line-height: 1.5;
}

.content-rights b,
.content-rights span {
  display: block;
}

.content-rights b {
  font-size: var(--app-text-small);
  font-weight: var(--app-weight-semibold);
}

.content-rights span { margin-top: 2px; color: var(--muted); }
.content-rights p {
  margin-top: 7px;
  font-size: var(--app-text-caption);
  line-height: 1.55;
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.content-rights.original { background: #eef8f2; color: #2f6d50; }
.content-rights.repost { background: #fff6e8; color: #765022; }

body.app-font-small .app-shell {
  --app-text-caption: 10px;
  --app-text-small: 11px;
  --app-text-body: 13px;
  --app-text-title: 16px;
  --app-text-heading: 19px;
  --app-text-display: 26px;
}

body.app-font-large .app-shell {
  --app-text-caption: 12px;
  --app-text-small: 13px;
  --app-text-body: 15px;
  --app-text-title: 19px;
  --app-text-heading: 22px;
  --app-text-display: 31px;
}

body.app-dark .empty-community,
body.app-dark .origin-fieldset,
body.app-dark .origin-option {
  background: #2d2227;
  color: var(--ink);
}

/* Beta 2.4 · iOS safe area, native motion and onboarding hierarchy */
html.ios-native-shell .app-status {
  display: none;
}

html.ios-native-shell .app-shell {
  height: 100%;
}

.tool-topbar {
  min-height: 52px;
  margin-bottom: 18px;
}

.tool-topbar .app-brand {
  min-width: 0;
}

.tool-topbar .app-brand > div {
  min-width: 0;
  width: 100%;
}

.tool-topbar #tool-title,
.tool-topbar #tool-subtitle {
  width: 100%;
  text-align: center;
}

.tool-topbar #tool-title {
  font-size: 20px;
  line-height: 1.25;
}

.inline-legal-button,
.modal-links button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--raspberry);
  font: inherit;
  font-weight: var(--app-weight-semibold, 600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.legal-consent-copy {
  display: block;
  text-align: center;
}

.modal-links button {
  font-size: 13px;
}

.auth-mascot {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.auth-mascot img {
  transform-origin: 50% 88%;
  will-change: transform;
  animation: mascot-idle 2.8s ease-in-out infinite;
}

.auth-mascot.cat img {
  animation-delay: -1.35s;
}

.auth-mascot.hello {
  animation: none;
}

.auth-mascot.hello img {
  animation: mascot-tap-wave .7s ease-in-out 2;
}

@keyframes mascot-idle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  35% { transform: translate3d(0, -4px, 0) rotate(-1.5deg); }
  70% { transform: translate3d(0, -1px, 0) rotate(1.5deg); }
}

@keyframes mascot-tap-wave {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  35% { transform: translate3d(0, -8px, 0) rotate(-5deg) scale(1.035); }
  70% { transform: translate3d(0, -3px, 0) rotate(5deg) scale(1.02); }
}

.auth-intro {
  min-height: clamp(590px, calc(100dvh - 140px), 620px);
  margin-bottom: 150px;
  padding: 116px 34px 82px;
  align-content: start;
  overflow: visible;
  border: 1px solid rgba(124, 58, 76, .08);
}

.intro-content {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  text-align: center;
}

.intro-kicker {
  margin: 0 0 9px;
  color: #7c3a4c;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 1px 1px rgba(62, 41, 49, .14);
}

.intro-content h2 {
  max-width: 280px;
  margin: 0 auto;
  color: #3e2931;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.035em;
  text-align: center;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-shadow: 0 1px 1px rgba(62, 41, 49, .16);
}

.intro-content > p:not(.intro-kicker) {
  max-width: 286px;
  margin: 15px auto 19px;
  color: #666666;
  font-size: 12.5px;
  line-height: 1.7;
  text-align: center;
}

.intro-points {
  width: 100%;
  max-width: 286px;
  margin: 0 auto;
  gap: 8px;
}

.intro-points div {
  width: 100%;
  min-height: 56px;
  padding: 9px 13px;
  border: 1px solid rgba(124, 58, 76, .10);
  border-radius: 18px;
  background: rgba(255, 253, 248, .88);
  box-shadow: 0 8px 22px rgba(112, 61, 77, .055);
  text-align: left;
}

.intro-points b {
  color: #3f3035;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 800;
}

.intro-points span {
  margin-top: 3px;
  color: #666666;
  font-size: 10.5px;
  line-height: 1.45;
  font-weight: 400;
}

.intro-mascot {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  width: 82px;
  opacity: .92;
  will-change: transform;
  animation: intro-mascot-float 3.4s ease-in-out infinite;
  overflow: visible;
  cursor: pointer;
}

.intro-mascot img {
  display: block;
  width: 100%;
  height: auto;
}

.intro-dog {
  left: 16px;
  bottom: 18px;
}

.intro-cat {
  right: 16px;
  top: 24px;
  animation-delay: -1.6s;
}

@keyframes intro-mascot-float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -7px; }
}

.notification-permission-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  border-radius: 18px;
  background: var(--pink-soft);
}
.notification-permission-card b,
.notification-permission-card small { display: block; }
.notification-permission-card small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.notification-permission-card .inline-actions { margin: 0; }
.notification-permission-card button { min-height: 38px; font-size: 10px; }
.period-dashboard { display: grid; gap: 12px; }
.period-hero {
  padding: 20px;
  border-radius: 28px;
  background: linear-gradient(145deg, #f8cfe0, #fff0f4);
  border: 1px solid rgba(199,25,66,.12);
}
.period-hero .period-status { color: var(--raspberry); font-size: 25px; font-weight: 800; line-height: 1.2; }
.period-hero p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.period-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.period-card { padding: 14px; border-radius: 18px; background: white; border: 1px solid var(--line); }
.period-card b, .period-card span { display: block; }
.period-card b { font-size: 11px; color: var(--muted); }
.period-card span { margin-top: 5px; font-size: 14px; font-weight: 800; color: var(--ink); }
.period-disclaimer { padding: 12px; border-radius: 16px; background: #fff7dc; color: #7c5d28; font-size: 10px; line-height: 1.65; }
.period-quick-actions { display: grid; grid-template-columns: minmax(112px,.55fr) 1fr; align-items: center; gap: 10px; margin: 10px 0 14px; }
.period-quick-actions span { color: var(--muted); font-size: 9.5px; line-height: 1.5; }
.period-symptom-fieldset { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; background: rgba(255,255,255,.68); }
.period-symptom-fieldset legend { padding: 0 6px; color: #6f5661; font-size: 11px; font-weight: 800; }
.period-symptom-fieldset label { display: flex; align-items: center; gap: 7px; color: var(--body); font-size: 10.5px; }
.period-symptom-fieldset input { accent-color: var(--raspberry); }
.period-history { display: grid; gap: 8px; margin-top: 10px; }
.period-history-row { min-height: 58px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: white; }
.period-history-row b, .period-history-row span { display: block; }
.period-history-row b { color: var(--ink); font-size: 12px; }
.period-history-row span { margin-top: 3px; color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.period-history-row button { border: 0; background: transparent; color: var(--raspberry); font-size: 10px; font-weight: 700; }

.auth-return-cue {
  bottom: 13px;
  min-width: 164px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(143, 65, 88, .10);
  border-radius: 28px;
  background: rgba(255, 253, 249, .94);
  color: #8e2446;
  box-shadow: 0 10px 28px rgba(112, 61, 77, .10);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
}

.auth-return-cue span {
  display: block;
}

@media (max-width: 390px) {
  .auth-intro {
    min-height: clamp(590px, calc(100dvh - 140px), 610px);
    padding: 112px 22px 78px;
  }

  .intro-content h2 {
    font-size: 29px;
  }

  .intro-points,
  .intro-content > p:not(.intro-kicker) {
    max-width: 282px;
  }
}

/* Baseline iPhone stability, fixed navigation and complete feature UI */
html, body {
  width: 100%;
  min-height: 100%;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

.app-page {
  min-height: 100dvh;
  touch-action: manipulation;
}

.app-shell {
  isolation: isolate;
  touch-action: manipulation;
}

.ios-native-shell .app-shell { height: 100%; }
.ios-native-shell .app-page { min-height: 100%; height: 100%; padding: 0; }
.ios-native-shell .device-frame { height: 100%; min-height: 100%; }

.app-screen {
  padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: calc(102px + env(safe-area-inset-bottom, 0px));
}

.app-bottom-nav {
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  min-height: calc(72px + env(safe-area-inset-bottom, 0px));
  padding: 0 8px max(7px, env(safe-area-inset-bottom, 0px));
  align-items: stretch;
  border-width: 1px 0 0;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 30px rgba(92,52,64,.10);
}

.app-bottom-nav button {
  height: 70px;
  min-height: 70px;
  padding: 8px 2px 8px;
  justify-content: center;
  line-height: 1.25;
}

.app-bottom-nav button span:last-child {
  min-height: 15px;
  padding-bottom: 1px;
}

.app-shell button,
.app-shell a,
.app-shell label,
.app-shell input,
.app-shell textarea,
.app-shell select {
  touch-action: manipulation;
}

@supports (-webkit-touch-callout: none) {
  .app-shell input,
  .app-shell textarea,
  .app-shell select,
  .home-search input,
  .public-search-form input,
  .support-bot-form input {
    font-size: 16px !important;
  }
}

.auth-intro {
  min-height: 650px;
  padding: 82px 34px 68px;
  align-content: center;
}

.intro-content {
  width: 100%;
}

.intro-content > p:not(.intro-kicker) {
  width: 100%;
  max-width: 302px;
  margin: 17px auto 22px;
  color: #654c57;
  line-height: 1.85;
  overflow: visible;
}

.lab-intro,
#screen-lab .review-labels {
  text-align: center;
  justify-content: center;
}

.lab-intro h2,
.lab-intro p {
  margin-left: auto;
  margin-right: auto;
}

.profile-avatar::after { display: none; content: none; }
.member-avatar { overflow: hidden; }
.member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-manage {
  min-height: 31px;
  padding: 0 9px;
  border: 1px solid rgba(199,25,66,.2);
  border-radius: 999px;
  background: white;
  color: var(--raspberry);
  font-size: 9.5px;
  font-weight: 800;
}
.own-post-note { color: var(--muted); font-size: 9px; line-height: 1.4; }
.my-post-wrapper { position: relative; }
.my-post-visibility { margin: 0 5px 6px; color: var(--muted); font-size: 10px; }
.danger-row span:first-child { color: var(--danger); }

body.app-font-small .app-shell {
  --app-text-caption: 9px;
  --app-text-small: 10px;
  --app-text-body: 12px;
  --app-text-title: 15px;
  --app-text-heading: 18px;
  --app-text-display: 24px;
}

body.app-font-large .app-shell {
  --app-text-caption: 14px;
  --app-text-small: 15px;
  --app-text-body: 18px;
  --app-text-title: 22px;
  --app-text-heading: 27px;
  --app-text-display: 36px;
}

body.app-font-large .app-bottom-nav button { font-size: 13px; }
body.app-font-small .app-bottom-nav button { font-size: 9px; }
body.app-font-small .app-brand h1,
body.app-font-small .section-row h2 { font-size: 15px; }
body.app-font-small .post-card p,
body.app-font-small .tree-post > .tree-copy,
body.app-font-small .settings-row { font-size: 11px; }
body.app-font-large .app-brand h1,
body.app-font-large .section-row h2 { font-size: 23px; }
body.app-font-large .post-card p,
body.app-font-large .tree-post > .tree-copy,
body.app-font-large .settings-row { font-size: 18px; line-height: 1.72; }
.app-shell input,
.app-shell textarea,
.app-shell select { font-size: 16px; }

.avatar-crop-stage {
  width: min(300px, 76vw);
  aspect-ratio: 1;
  margin: 12px auto;
  overflow: hidden;
  border: 5px solid white;
  border-radius: 50%;
  background: var(--pink-soft);
  box-shadow: 0 10px 30px rgba(91,48,63,.16);
}
.avatar-crop-stage canvas { width: 100%; height: 100%; display: block; }
.avatar-zoom-label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin: 14px 0; color: var(--muted); font-size: 12px; }
.avatar-zoom-label input { width: 100%; accent-color: var(--raspberry); }

.wardrobe-uploader > p,
.outfit-builder-head p { color: var(--muted); font-size: 11px; line-height: 1.65; }
.wardrobe-cover-panel { overflow: hidden; }
.wardrobe-cover-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wardrobe-cover-heading h3 { margin: 0 0 4px; }
.wardrobe-cover-heading p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.wardrobe-cover-heading > span { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: var(--pink-soft); color: var(--raspberry); font-size: 8.5px; font-weight: 850; }
.wardrobe-cover-preview { position: relative; width: 100%; aspect-ratio: 5 / 3; margin: 13px 0 10px; overflow: hidden; border: 1px solid rgba(199,25,66,.13); border-radius: 24px; background: linear-gradient(145deg, #f8cfe0, #fff1dd); box-shadow: 0 12px 28px rgba(91,48,63,.08); }
.wardrobe-cover-preview > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.wardrobe-cover-preview > span { position: absolute; left: 13px; bottom: 12px; padding: 5px 9px; border-radius: 999px; background: rgba(39,28,33,.62); color: white; font-size: 9px; font-weight: 850; backdrop-filter: blur(8px); }
.wardrobe-cover-placeholder { width: 100%; height: 100%; display: grid; align-content: center; justify-items: center; gap: 6px; color: #7c3a4c; text-align: center; }
.wardrobe-cover-placeholder::before { content: "衣"; width: 56px; height: 56px; display: grid; place-items: center; border: 2px solid rgba(199,25,66,.22); border-radius: 18px; background: rgba(255,255,255,.6); color: var(--raspberry); font-size: 27px; font-weight: 900; }
.wardrobe-cover-placeholder b { font-size: 17px; }
.wardrobe-cover-placeholder span { color: #81626d; font-size: 9.5px; }
.wardrobe-cover-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.wardrobe-cover-upload-button { display: flex; align-items: center; justify-content: center; font-size: 10px; }
.wardrobe-cover-actions button { font-size: 10px; }
.wardrobe-cover-remove { grid-column: 1 / -1; min-height: 38px; color: var(--danger); }
.wardrobe-cover-crop-stage { width: min(340px, 82vw); aspect-ratio: 5 / 3; margin: 13px auto; overflow: hidden; border: 5px solid white; border-radius: 22px; background: var(--pink-soft); box-shadow: 0 10px 30px rgba(91,48,63,.16); touch-action: none; }
.wardrobe-cover-crop-stage canvas { width: 100%; height: 100%; display: block; }
.wardrobe-cover-choice-grid { max-height: 44vh; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; overflow-y: auto; overscroll-behavior: contain; }
.wardrobe-cover-choice-grid button { min-width: 0; padding: 4px; border: 1px solid var(--line); border-radius: 15px; background: var(--pink-soft); color: var(--ink); }
.wardrobe-cover-choice-grid img { width: 100%; aspect-ratio: 1; display: block; object-fit: contain; border-radius: 11px; background: white; }
.wardrobe-cover-choice-grid span { display: block; padding: 6px 2px 3px; color: var(--raspberry); font-size: 8.5px; font-weight: 800; }
.wardrobe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 12px; }
.wardrobe-item { position: relative; min-width: 0; padding: 4px; border: 1.5px solid transparent; border-radius: 17px; background: var(--pink-soft); }
.wardrobe-item.selected { border-color: var(--raspberry); background: #fff; box-shadow: 0 0 0 3px rgba(199,25,66,.07); }
.wardrobe-select { width: 100%; padding: 0; border: 0; background: transparent; color: var(--ink); }
.wardrobe-select img { width: 100%; aspect-ratio: .82; object-fit: contain; border-radius: 13px; background: white; }
.wardrobe-select span { display: block; min-height: 24px; padding: 5px 2px 1px; color: var(--muted); font-size: 8.5px; }
.wardrobe-delete { width: 100%; min-height: 25px; border: 0; border-radius: 10px; background: transparent; color: var(--danger); font-size: 8.5px; }
.outfit-builder-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.outfit-builder-head h3 { margin-bottom: 4px; }
.outfit-builder-head > span { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: var(--pink-soft); color: var(--raspberry); font-size: 9px; font-weight: 800; }
.outfit-complete { margin-top: 12px; padding: 13px; border-radius: 18px; background: #edf7f1; color: var(--success); }
.outfit-complete b, .outfit-complete span { display: block; }
.outfit-complete span { margin: 3px 0 9px; font-size: 10px; }
.outfit-complete img { width: 100%; border-radius: 15px; }
.saved-outfits { display: grid; gap: 9px; }
.saved-outfit-card { display: grid; grid-template-columns: 82px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 19px; background: white; }
.saved-outfit-card img { width: 82px; height: 94px; border-radius: 13px; object-fit: cover; }
.saved-outfit-card b, .saved-outfit-card span { display: block; }
.saved-outfit-card b { font-size: 12px; }
.saved-outfit-card span { margin-top: 5px; color: var(--muted); font-size: 9px; }
.saved-outfit-card button { border: 0; background: transparent; color: var(--danger); font-size: 9px; }

body.app-dark .wardrobe-cover-preview { background: linear-gradient(145deg, #4c3145, #2d2737); }
body.app-dark .wardrobe-cover-placeholder { color: #f4dce7; }
body.app-dark .wardrobe-cover-placeholder span { color: var(--muted); }
body.app-dark .wardrobe-cover-placeholder::before,
body.app-dark .wardrobe-cover-choice-grid img { background: #3a2d40; }

.diary-editor-card {
  padding: 18px;
  border: 1px solid rgba(167,111,64,.18);
  border-radius: 27px;
  background: linear-gradient(160deg, #fff9df, #fff4ea);
  box-shadow: 0 12px 28px rgba(114,74,38,.08);
}
.diary-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.diary-editor-head span { color: #a05b42; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.diary-editor-head h3 { margin: 5px 0 0; color: #754c40; font-size: 20px; }
.diary-editor-head > b { padding: 5px 8px; border-radius: 999px; background: #f8cfe0; color: var(--raspberry); font-size: 8.5px; }
.diary-editor-card textarea {
  width: 100%;
  min-height: 185px;
  margin: 16px 0 12px;
  padding: 13px;
  border: 0;
  border-radius: 18px;
  outline: none;
  resize: vertical;
  color: #684b45;
  background: rgba(255,255,255,.68);
  line-height: 1.85;
}
.diary-mood-title { margin-bottom: 8px; color: #754c40; font-size: 11px; font-weight: 800; }
.diary-moods { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; margin-bottom: 13px; }
.diary-moods input { position: absolute; opacity: 0; }
.diary-moods span { min-height: 58px; display: grid; place-items: center; gap: 1px; border: 1px solid rgba(167,111,64,.15); border-radius: 15px; background: rgba(255,255,255,.72); }
.diary-moods b { font-size: 22px; }
.diary-moods small { color: #82685f; font-size: 8px; }
.diary-moods input:checked + span { border-color: var(--raspberry); background: var(--pink-soft); transform: translateY(-2px); }
.diary-existing-media { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:10px 0; }
.diary-existing-media img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; }
.diary-calendar-card { margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 25px; background: white; }
.diary-calendar-head { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; }
.diary-calendar-head h3 { margin: 0; text-align: center; font-size: 16px; }
.diary-calendar-head button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--pink-soft); color: var(--raspberry); font-size: 23px; }
.diary-weekdays, .diary-calendar-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.diary-weekdays { margin: 13px 0 6px; color: var(--muted); font-size: 8px; text-align: center; }
.diary-day { min-width: 0; aspect-ratio: .88; padding: 3px; border: 0; border-radius: 11px; display: grid; align-content: center; place-items: center; gap: 1px; background: transparent; color: var(--ink); }
.diary-day span { font-size: 9px; }
.diary-day b { min-height: 15px; font-size: 13px; }
.diary-day.has-entry { background: var(--pink-soft); }
.diary-day.selected { box-shadow: inset 0 0 0 1.5px var(--raspberry); }
.diary-day.empty { visibility: hidden; }
.diary-calendar-card > p { margin: 10px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; text-align: center; }

.checkin-entry-row { background: linear-gradient(90deg, #fff, #fff4f7); }
.checkin-hero, .checkin-group-card { overflow: hidden; border-radius: 29px; background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(91,48,63,.07); }
.checkin-hero { padding: 26px 22px; background: linear-gradient(155deg, #f8cfe0, #fff7ef); text-align: center; }
.checkin-kicker { color: var(--raspberry); font-size: 10px; font-weight: 800; }
.checkin-hero h2 { margin: 10px 0; font-size: 25px; line-height: 1.25; }
.checkin-hero p { margin: 0 0 18px; color: #6c5660; font-size: 11px; line-height: 1.75; }
.checkin-group-card { margin-bottom: 13px; }
.checkin-cover { min-height: 160px; padding: 22px; display: grid; grid-template-columns: 1fr 70px; align-items: center; gap: 8px; background: linear-gradient(145deg, #f8cfe0, #fff0d6); }
.checkin-cover span { color: var(--raspberry); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.checkin-cover h2 { margin: 8px 0 5px; font-size: 24px; line-height: 1.2; }
.checkin-cover p { margin: 0; color: #72545f; font-size: 10px; line-height: 1.55; }
.checkin-cover > b { font-size: 54px; text-align: center; }
.checkin-summary { display: grid; grid-template-columns: repeat(3,1fr); padding: 14px; gap: 6px; }
.checkin-summary div { padding: 9px 4px; border-radius: 15px; background: var(--pink-soft); text-align: center; }
.checkin-summary strong, .checkin-summary span { display: block; }
.checkin-summary strong { color: var(--raspberry); font-size: 18px; }
.checkin-summary span { margin-top: 2px; color: var(--muted); font-size: 8px; }
.checkin-actions { padding: 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.checkin-encouragement { margin: 12px 14px; padding: 12px; border-radius: 16px; background: #fff8dd; color: #805e2c; font-size: 10px; line-height: 1.6; text-align: center; }
.checkin-ranking { padding: 0 14px 15px; }
.checkin-section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.checkin-section-title b { font-size: 13px; }
.checkin-section-title button { border: 0; background: transparent; color: var(--raspberry); font-size: 9px; }
.checkin-rank-row { min-height: 43px; display: grid; grid-template-columns: 22px 70px 1fr auto; align-items: center; gap: 5px; border-top: 1px solid var(--line); }
.checkin-rank-row > span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--pink-soft); color: var(--raspberry); font-size: 8px; }
.checkin-rank-row b { font-size: 10px; }
.checkin-rank-row small { color: var(--muted); font-size: 8px; }
.checkin-rank-row strong { color: var(--raspberry); font-size: 8px; }
.checkin-timeline { margin: 0 14px 15px; padding: 14px; border: 1px solid var(--line); border-radius: 20px; background: #fffafd; }
.checkin-section-title small { color: var(--muted); font-size: 8px; text-align: right; }
.checkin-timeline-row { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); }
.checkin-timeline-row > div { min-width: 0; }
.checkin-timeline-row > div:last-child { display: flex; align-items: center; gap: 5px; }
.checkin-timeline-row b, .checkin-timeline-row small { display: block; }
.checkin-timeline-row b { font-size: 10px; }
.checkin-timeline-row small { margin-top: 3px; color: var(--muted); font-size: 8px; overflow-wrap: anywhere; }
.checkin-timeline-row button { min-width: 58px; padding: 8px 10px; font-size: 8px; }
.checkin-timeline-row .checkin-cancel { min-width: 42px; border: 0; background: transparent; color: var(--raspberry); }
.checkin-community { margin: 0 14px 15px; padding: 14px; border: 1px solid var(--line); border-radius: 20px; background: #fffafd; }
.checkin-community form { display: grid; gap: 8px; }
.checkin-community textarea { width: 100%; min-height: 86px; resize: vertical; }
.checkin-message-list { display: grid; gap: 8px; margin-top: 12px; }
.checkin-message-list article { min-width: 0; padding: 11px; border-radius: 16px; background: white; border: 1px solid var(--line); }
.checkin-message-list article > div { display: flex; justify-content: space-between; gap: 8px; }
.checkin-message-list b { font-size: 10px; }
.checkin-message-list time, .checkin-message-list small { color: var(--muted); font-size: 8px; }
.checkin-message-list p { margin: 7px 0; font-size: 10px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.checkin-message-list button { border: 0; background: transparent; color: var(--raspberry); font-size: 8px; }
.checkin-message-empty { color: var(--muted); font-size: 9px; text-align: center; }
.checkin-create-more { margin-top: 3px; }
.checkin-calendar { margin: 12px 14px 15px; padding: 14px; border: 1px solid rgba(199,25,66,.12); border-radius: 22px; background: linear-gradient(155deg, #fffafd, #fff8ef); }
.checkin-calendar-head { display: grid; gap: 10px; }
.checkin-calendar-head > div:first-child b, .checkin-calendar-head > div:first-child small { display: block; }
.checkin-calendar-head > div:first-child b { font-size: 13px; color: var(--ink); }
.checkin-calendar-head > div:first-child small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.checkin-calendar-nav { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 7px; }
.checkin-calendar-nav button { width: 34px; height: 34px; border: 1px solid rgba(199,25,66,.16); border-radius: 50%; background: white; color: var(--raspberry); font-size: 20px; line-height: 1; }
.checkin-calendar-nav button:disabled { opacity: .3; }
.checkin-calendar-nav strong { text-align: center; color: #6f4654; font-size: 10px; }
.checkin-calendar-week, .checkin-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.checkin-calendar-week { margin-top: 11px; }
.checkin-calendar-week span { color: var(--muted); text-align: center; font-size: 8px; }
.checkin-calendar-grid { margin-top: 6px; }
.checkin-calendar-day { min-width: 0; aspect-ratio: 1; border-radius: 11px; display: grid; place-items: center; position: relative; background: rgba(255,255,255,.74); color: #745d66; }
.checkin-calendar-day b { font-size: 9px; font-weight: 750; }
.checkin-calendar-day i { position: absolute; right: 2px; bottom: 2px; width: 13px; height: 13px; border-radius: 50%; display: grid; place-items: center; background: var(--raspberry); color: white; font-size: 7px; font-style: normal; }
.checkin-calendar-day.checked { background: #f8cfe0; color: var(--raspberry); box-shadow: inset 0 0 0 1px rgba(199,25,66,.12); }
.checkin-calendar-day.today { box-shadow: inset 0 0 0 2px var(--raspberry); }
.checkin-calendar-day.future { opacity: .32; }
.checkin-calendar-day.empty { visibility: hidden; }
.checkin-calendar > p { margin: 10px 0 0; display: flex; justify-content: center; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; }
.checkin-calendar > p i, .checkin-calendar > p em { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.checkin-calendar > p i { background: var(--raspberry); }
.checkin-calendar > p em { border: 2px solid var(--raspberry); background: transparent; }

body.app-dark .mobile-upload-inline,
body.app-dark .checkin-calendar,
body.app-dark .checkin-timeline,
body.app-dark .checkin-community { background: #2d2334; border-color: rgba(248,207,224,.15); }
body.app-dark .mobile-upload-inline-actions button,
body.app-dark .checkin-calendar-nav button,
body.app-dark .checkin-calendar-day,
body.app-dark .checkin-message-list article { background: #3a2d40; color: #f4dce7; }
body.app-dark .mobile-upload-preview-card { background: #263a32; }
body.app-dark .checkin-calendar-nav strong { color: #f4dce7; }

.support-bot { margin-bottom: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 23px; background: white; }
.support-bot-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.support-bot-head b, .support-bot-head span { display: block; }
.support-bot-head b { font-size: 13px; }
.support-bot-head div span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.bot-online { padding: 4px 7px; border-radius: 999px; background: #edf7f1; color: var(--success); font-size: 8px; font-weight: 800; }
.support-chat { max-height: 260px; margin: 13px 0 9px; overflow-y: auto; display: grid; gap: 7px; }
.bot-message { max-width: 86%; padding: 9px 11px; border-radius: 15px; font-size: 10.5px; line-height: 1.6; }
.bot-message.bot { justify-self: start; background: var(--pink-soft); color: #684e59; border-bottom-left-radius: 5px; }
.bot-message.user { justify-self: end; background: var(--raspberry); color: white; border-bottom-right-radius: 5px; }
.support-quick-questions { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; }
.support-quick-questions button { flex: 0 0 auto; min-height: 29px; padding: 0 9px; border: 1px solid rgba(199,25,66,.17); border-radius: 999px; background: white; color: var(--raspberry); font-size: 8.5px; }
.support-bot-form { height: 43px; display: flex; gap: 7px; }
.support-bot-form input { min-width: 0; flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 0 13px; outline: none; background: var(--cream); }
.support-bot-form button { width: 62px; border: 0; border-radius: 999px; background: var(--raspberry); color: white; font-size: 10px; font-weight: 800; }

.product-external-note {
  margin: 8px 4px 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
  text-align: center;
}

/* Mobile overlays, native media bridge, dark safe areas and compact publish screen */
body.modal-open .app-screen.active { overscroll-behavior: contain; }

.modal-layer {
  place-items: center !important;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  overflow: hidden;
  touch-action: none;
}

.modal-card {
  width: min(362px, calc(100% - 2px));
  max-height: min(78dvh, 640px) !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.toast {
  top: calc(50% - 18px) !important;
  bottom: auto !important;
  z-index: 100;
  transform: translate(-50%, 12px) !important;
  border-radius: 18px;
  white-space: normal;
  text-align: center;
  line-height: 1.45;
  box-shadow: 0 14px 36px rgba(45,32,38,.24);
}

.toast.show { transform: translate(-50%, 0) !important; }

.jump-service-entry {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(199,25,66,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--raspberry);
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 12px;
}

#screen-publish {
  padding-top: 8px;
}

#screen-publish .app-topbar {
  margin-bottom: 8px;
}

#screen-publish .form-stack {
  gap: 7px;
}

#screen-publish .field label,
#screen-publish .origin-fieldset legend {
  margin-bottom: 4px;
  font-size: 10px;
}

#screen-publish .field input,
#screen-publish .field select {
  min-height: 39px;
  padding: 8px 11px;
  border-radius: 13px;
}

#screen-publish .field textarea {
  min-height: 74px;
  max-height: 118px;
  resize: none;
  padding: 9px 11px;
  border-radius: 13px;
}

#screen-publish .origin-fieldset {
  padding: 9px;
  border-radius: 15px;
}

#screen-publish .origin-options {
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

#screen-publish .origin-option span {
  min-height: 48px;
  padding: 7px;
}

#screen-publish .origin-option small,
#screen-publish .rights-guidance {
  font-size: 8.5px;
  line-height: 1.35;
}

#screen-publish .rights-guidance {
  margin: 6px 0 0;
}

#screen-publish .mobile-upload-card {
  min-height: 58px;
  padding: 9px 11px;
  grid-template-columns: 36px minmax(0,1fr) 26px;
  gap: 8px;
}

#screen-publish .mobile-upload-icon {
  width: 36px;
  height: 36px;
  border-radius: 13px;
}

#screen-publish .mobile-upload-copy b { font-size: 11px; }
#screen-publish .mobile-upload-copy small { font-size: 8.5px; }
#screen-publish .inline-actions { margin-top: 2px; }
#screen-publish .app-primary,
#screen-publish .app-secondary { min-height: 42px; }

#screen-publish .form-stack > .inline-actions {
  position: sticky;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  z-index: 8;
  padding: 6px 0 2px;
  background: linear-gradient(to top, var(--cream) 72%, rgba(255,253,245,0));
}

body.app-dark #screen-publish .form-stack > .inline-actions {
  background: linear-gradient(to top, #211927 72%, rgba(33,25,39,0));
}

.avatar-crop-stage {
  touch-action: none;
  user-select: none;
}

html.ios-native-shell,
html.ios-native-shell body,
html.ios-native-shell .app-page,
html.ios-native-shell .preview-layout,
html.ios-native-shell .device-frame,
html.ios-native-shell .app-shell {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: var(--cream);
}

html.ios-native-shell .preview-layout {
  display: block;
}

html.ios-native-shell .app-screen {
  height: 100dvh;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}

html.ios-native-shell .app-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: calc(72px + env(safe-area-inset-bottom, 0px));
  padding-bottom: max(7px, env(safe-area-inset-bottom, 0px));
  border-radius: 24px 24px 0 0;
}

html.ios-native-shell body.app-dark,
html.ios-native-shell body.app-dark .app-page,
html.ios-native-shell body.app-dark .device-frame,
html.ios-native-shell body.app-dark .app-shell,
html.ios-native-shell body.app-dark .app-screen {
  background: #211927;
}

body.app-dark {
  --cream: #211927;
  --paper: #2a2030;
  --app-top-surface: rgba(36, 27, 43, .985);
  --app-top-divider: transparent;
  --pink: #5b3148;
  --pink-soft: #35253b;
  --sky: #243b4a;
  --ink: #fff8fb;
  --muted: #d3bdc9;
  --line: rgba(255,231,244,.14);
  background: #211927;
}

body.app-dark .app-bottom-nav,
body.app-dark .home-topbar,
body.app-dark .public-topbar,
body.app-dark .modal-card {
  background: #241b2b;
}

body.app-dark .app-bottom-nav {
  border-color: rgba(255,231,244,.12);
  box-shadow: 0 -12px 34px rgba(0,0,0,.28);
}

body.app-dark .jump-service-entry,
body.app-dark .public-folder-card.tone-2,
body.app-dark .saved-outfit-card,
body.app-dark .diary-calendar-card,
body.app-dark .support-bot,
body.app-dark .period-card {
  background: #2d2334;
  color: var(--ink);
}

@media (max-width: 390px) {
  .auth-intro { padding-left: 24px; padding-right: 24px; }
  .wardrobe-grid { grid-template-columns: repeat(2, 1fr); }
  .checkin-rank-row { grid-template-columns: 20px 62px 1fr; }
  .checkin-rank-row strong { grid-column: 3; }
}

/* TestFlight 真机收口修复 */
html, body {
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

input, textarea, select {
  font-size: 16px;
}

html.ios-native-shell * {
  -webkit-tap-highlight-color: transparent;
}

html.ios-native-shell .app-screen {
  padding-top: calc(42px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

html.ios-native-shell #screen-publish {
  padding-top: calc(76px + env(safe-area-inset-top, 0px));
}

html.ios-native-shell #screen-home {
  padding-top: 0;
}

html.ios-native-shell .home-topbar {
  position: sticky;
  top: 0;
  z-index: 35;
  margin: 0 -17px 12px;
  padding: calc(42px + env(safe-area-inset-top, 0px)) 17px 10px;
  background: var(--app-top-surface);
  border-bottom: 1px solid var(--app-top-divider);
  box-shadow: none;
  backdrop-filter: blur(16px);
}

html.ios-native-shell body.app-dark .home-topbar {
  background: var(--app-top-surface);
  border-bottom-color: var(--app-top-divider);
}

html.ios-native-shell #screen-publish .app-topbar {
  align-items: center;
  margin-bottom: 8px;
}

html.ios-native-shell #screen-publish .app-brand h1 {
  line-height: 1.08;
}

.public-topbar,
body.app-dark .public-topbar {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  backdrop-filter: none;
}

.public-sort-tabs {
  position: static;
  top: auto;
}

#screen-publish .form-stack {
  gap: 8px;
}

#screen-publish .field textarea {
  min-height: 74px;
  max-height: 118px;
}

.post-card .post-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  height: auto !important;
  min-height: 0;
  max-height: none;
  overflow: visible;
  line-height: normal;
}

body:not([data-active-screen="post"]) .post-card .post-open p {
  display: -webkit-box !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(2 * 1.65em) !important;
  margin: 0 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body:not([data-active-screen="post"]) .content-rights {
  margin-top: 9px;
  padding: 10px 12px;
}

body:not([data-active-screen="post"]) .content-rights p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

body:not([data-active-screen="post"]) .post-media-grid {
  max-height: 360px;
  overflow: hidden;
}

body[data-active-screen="post"] .post-media-grid {
  max-height: none;
}

#screen-publish .mobile-upload-card,
#screen-publish .link-field,
#screen-publish .copyright-source-card {
  margin-top: 6px;
}

#reminder-form .field input[type="date"],
#reminder-form .field input[type="time"],
#reminder-date,
#reminder-time {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-align: left;
  text-align-last: left;
  direction: ltr;
  overflow: hidden;
}

.reminder-date-time-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
  gap: 9px;
  width: 100%;
  min-width: 0;
}

.reminder-date-time-grid .field { min-width: 0; }

.modal-layer.open {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(28,18,23,.36);
  align-items: center;
  justify-items: center;
}

.modal-card {
  margin: 0 auto;
}

html.ios-native-shell .app-bottom-nav {
  background: rgba(255,254,249,.99);
  box-shadow: 0 -10px 30px rgba(92,52,64,.14);
}

html.ios-native-shell body.app-dark .app-bottom-nav {
  background: #241b2b;
}

.profile-avatar img,
.member-avatar img,
.post-avatar img,
.following-row .member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.follow-button {
  min-height: 36px;
  margin-top: 13px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--raspberry);
  color: #fff;
  font-weight: 900;
}

/* Build33: iOS 原生日期控件具有较大的固有宽度，改为上下独立布局并限制在卡片内。 */
.reminder-date-time-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

#reminder-form,
#period-form,
#reminder-form .field,
#period-form .field {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

#reminder-date,
#reminder-time,
#period-last-start {
  display: block;
  inline-size: 100% !important;
  width: 100% !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  text-align: left;
  text-align-last: left;
}

#reminder-date::-webkit-date-and-time-value,
#reminder-time::-webkit-date-and-time-value,
#period-last-start::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}

.notification-read-all {
  min-width: 68px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(207, 22, 75, .2);
  border-radius: 999px;
  background: #fff;
  color: var(--raspberry);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

#screen-notifications .centered-topbar {
  grid-template-columns: 42px minmax(0, 1fr) 68px;
}

.app-notification-list {
  display: grid;
  gap: 12px;
  padding: 8px 0 24px;
}

.app-notification-card {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(117, 82, 91, .15);
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 8px 24px rgba(92, 52, 64, .07);
}

.app-notification-card.unread {
  border-color: rgba(207, 22, 75, .26);
  background: linear-gradient(135deg, #fff 0%, #fff3f7 100%);
}

.app-notification-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: var(--blush);
  color: var(--raspberry);
  font-size: 18px;
  font-weight: 950;
}

.app-notification-copy,
.app-notification-copy small,
.app-notification-copy b,
.app-notification-copy p {
  display: block;
  min-width: 0;
}

.app-notification-copy small {
  color: #8a747d;
  font-size: 11px;
  line-height: 1.4;
}

.app-notification-copy b {
  margin-top: 3px;
  font-size: 15px;
  line-height: 1.45;
}

.app-notification-copy p {
  margin: 4px 0 0;
  color: #66545c;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.app-notification-card > i {
  color: #8c7880;
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.app-notification-card.unread > i,
#app-notification-hint.unread {
  color: var(--raspberry) !important;
  font-weight: 900;
}

body.app-dark .notification-read-all,
body.app-dark .app-notification-card {
  background: #2d2334;
  border-color: rgba(255, 176, 202, .18);
  color: #fff9fb;
}

body.app-dark .app-notification-card.unread {
  background: linear-gradient(135deg, #34273d 0%, #40273a 100%);
}

body.app-dark .app-notification-copy small,
body.app-dark .app-notification-copy p,
body.app-dark .app-notification-card > i {
  color: #d8c8d1;
}

.follow-button.following {
  background: var(--pink-soft);
  color: var(--raspberry);
  box-shadow: inset 0 0 0 1px rgba(199,25,66,.20);
}

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

.following-list,
.station-message-list {
  display: grid;
  gap: 10px;
}

.following-row {
  width: 100%;
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  background: white;
  color: var(--ink);
  text-align: left;
}

.member-avatar.mini {
  width: 42px;
  height: 42px;
  font-size: 16px;
}

.following-row b,
.following-row small {
  display: block;
}

.following-row small,
.following-row i {
  color: var(--muted);
  font-style: normal;
  font-size: 10px;
}

.settings-row .unread,
.station-message-card.unread span {
  color: var(--raspberry) !important;
  font-weight: 900;
}

.station-message-card button {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
  color: var(--ink);
  text-align: left;
}

.station-message-card b,
.station-message-card p,
.station-message-card small {
  display: block;
}

.station-message-card p {
  color: #65535b;
  line-height: 1.65;
}

.about-card {
  min-height: calc(100dvh - 150px);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: white;
}

.about-card img {
  width: 86px;
  height: 86px;
  border-radius: 24px;
}

.about-card h2 {
  margin: 16px 0 8px;
}

.about-card p {
  color: var(--muted);
  line-height: 1.75;
}

.icp-link {
  margin-top: auto;
  padding-top: 28px;
  color: #aaa;
  font-size: 11px;
  text-decoration: none;
}

body.app-dark .following-row,
body.app-dark .station-message-card button,
body.app-dark .about-card {
  background: #2d2334;
}

.icp-footer {
  margin-top: 34px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(62, 41, 49, 0.04);
  text-align: center;
  font-size: 12px;
  color: #9a8b91;
}

.icp-footer a {
  color: #9a8b91;
  text-decoration: none;
}

/* Build 11: 身份规则核验、个人收藏与发布页真机收口 */
html.ios-native-shell .app-screen {
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}

html.ios-native-shell #screen-publish {
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}

#screen-publish .form-stack > .publish-submit-actions,
html.ios-native-shell #screen-publish .form-stack > .publish-submit-actions {
  position: static;
  inset: auto;
  z-index: auto;
  margin-top: 10px;
  padding: 0;
  background: none;
}

body.app-dark #screen-publish .form-stack > .publish-submit-actions {
  background: none;
}

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

.link-import-row input { min-width: 0; }

.link-analyze-button {
  min-width: 102px;
  border: 1px solid rgba(199,25,66,.20);
  border-radius: 13px;
  padding: 0 12px;
  color: var(--rose);
  background: var(--pink-soft);
  font-size: 11px;
  font-weight: 800;
}

.link-analyze-button:disabled { opacity: .55; }

.publish-save-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(199,25,66,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
}

.publish-save-option input { margin-top: 3px; accent-color: var(--rose); }
.publish-save-option span { display: grid; gap: 3px; }
.publish-save-option b { font-size: 12px; }
.publish-save-option small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.publish-personal-folder-fields { display: grid; gap: 8px; }

.privacy-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.privacy-choice label { display: block; }
.privacy-choice input { position: absolute; opacity: 0; pointer-events: none; }
.privacy-choice span {
  display: grid;
  place-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.privacy-choice input:checked + span {
  border-color: rgba(199,25,66,.38);
  background: var(--pink-soft);
  color: var(--rose);
  box-shadow: 0 0 0 2px rgba(199,25,66,.06);
}

.my-collection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.my-collection-card {
  min-width: 0;
  min-height: 132px;
  padding: 15px;
  border: 1px solid rgba(199,25,66,.13);
  border-radius: 21px;
  text-align: left;
  background: linear-gradient(145deg, rgba(248,207,224,.84), rgba(255,255,255,.93));
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(92,52,64,.07);
}
.my-collection-card h3 { margin: 8px 0 6px; font-size: 17px; line-height: 1.25; }
.my-collection-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.my-collection-card small { color: var(--rose); font-size: 9px; font-weight: 800; }
.my-collection-privacy { float: right; color: var(--muted); }
.my-collection-comment {
  margin: 10px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
}
.my-collection-comment h3 { margin: 0 0 6px; font-size: 15px; }
.my-collection-comment p { margin: 0; color: var(--muted); line-height: 1.65; white-space: break-spaces; overflow-wrap: anywhere; }

.authored-text-input {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  tab-size: 4;
}

.public-folder-setting {
  align-items: center;
  flex-wrap: wrap;
}
.public-folder-setting .folder-setting-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
.public-folder-setting .folder-transfer-button {
  border-color: var(--raspberry) !important;
  background: var(--raspberry) !important;
  color: #fff !important;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(199,25,66,.16);
}

body.app-dark .publish-save-option,
body.app-dark .my-collection-card,
body.app-dark .my-collection-comment {
  background: #2d2334;
}

body.app-dark .comment-card,
body.app-dark .comment-composer,
body.app-dark .report-item,
body.app-dark .report-detail-card,
body.app-dark .tree-post,
body.app-dark .warm-replies,
body.app-dark .home-search,
body.app-dark .my-collection-search,
body.app-dark .mobile-upload-card,
body.app-dark .collection-detail-actions button,
body.app-dark .member-hero,
body.app-dark .post-detail-card {
  background: #2d2334;
  color: var(--ink);
  border-color: rgba(255, 231, 244, .14);
}

.budget-hero {
  padding: 22px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--pink), #fff4f8);
  box-shadow: var(--shadow);
}
.budget-hero span, .budget-hero small { display:block; color: var(--muted); font-weight:800; }
.budget-hero b { display:block; margin: 5px 0; font-size: 34px; color: var(--raspberry); letter-spacing: -.03em; }
.budget-progress { height: 10px; margin-top: 14px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.7); }
.budget-progress i { display:block; height:100%; border-radius:inherit; background: var(--raspberry); }
.budget-stats { display:grid; grid-template-columns: repeat(4,1fr); gap:8px; margin: 12px 0; }
.budget-stats div { padding: 13px 8px; border-radius: 18px; background: white; border: 1px solid var(--line); text-align:center; }
.budget-stats b { display:block; color: var(--ink); font-size: 15px; }
.budget-stats span { display:block; margin-top:4px; color: var(--muted); font-size: 10px; font-weight:800; }
.budget-type-tabs { display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }
.budget-type-tabs label { display:block; }
.budget-type-tabs input { position:absolute; opacity:0; pointer-events:none; }
.budget-type-tabs span { display:grid; min-height:42px; place-items:center; border:1px solid var(--line); border-radius:999px; background:white; color:var(--muted); font-weight:900; }
.budget-type-tabs input:checked + span { background:var(--raspberry); color:white; border-color:var(--raspberry); }
.budget-settings-panel { display:grid; gap:12px; }
.budget-inline-form,
.budget-custom-category { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:end; }
.budget-inline-form label { grid-column:1 / -1; color:var(--muted); font-weight:900; }
.budget-inline-form input,
.budget-custom-category input,
.budget-custom-category select { width:100%; min-width:0; min-height:44px; border:1px solid var(--line); border-radius:15px; background:var(--paper); color:var(--ink); padding:0 12px; font:inherit; }
.budget-custom-category > button.app-secondary { grid-column:1 / -1; width:100%; min-height:44px; }
.budget-custom-category > .app-select-trigger { grid-column:auto; width:100%; min-width:0; min-height:44px; }
.budget-list { display:grid; gap:8px; }
.budget-record { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; padding:11px; border:1px solid var(--line); border-radius:16px; background:var(--paper); }
.budget-record b, .budget-record span { display:block; }
.budget-record span { color:var(--muted); font-size:10px; margin-top:3px; }
.budget-record strong { font-size:13px; white-space:nowrap; }
.budget-record strong.income { color:var(--success); }
.budget-record strong.expense { color:var(--raspberry); }
.budget-record strong.saving { color:#7a5cc7; }
.budget-record button { min-height:28px; border:0; border-radius:999px; padding:0 9px; background:var(--pink-soft); color:var(--raspberry); font-size:9px; font-weight:900; }
@media (max-width: 390px) {
  .budget-stats { grid-template-columns: repeat(2,1fr); }
  .budget-inline-form { grid-template-columns:1fr; }
  .budget-custom-category { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
.skin-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:10px; }
.skin-card { min-height:142px; border:1px solid var(--line); border-radius:24px; padding:13px; background:white; text-align:left; display:flex; flex-direction:column; gap:7px; color:var(--ink); }
.skin-card i { display:block; height:46px; border-radius:17px; background:linear-gradient(135deg,#f8cfe0,#fff0f6); }
.skin-card b { font-size:15px; }
.skin-card span { color:var(--muted); font-size:10px; line-height:1.55; }
.skin-card em { margin-top:auto; align-self:flex-start; padding:5px 9px; border-radius:999px; background:var(--raspberry); color:white; font-style:normal; font-size:9px; font-weight:900; }
.skin-card.active { border-color:var(--raspberry); box-shadow:0 12px 28px rgba(199,25,66,.12); }
.skin-pearl i { background:linear-gradient(135deg,#f2f2ef,#ffffff); }
.skin-lavender i { background:linear-gradient(135deg,#eadcff,#fff8ff); }
.skin-mint i { background:linear-gradient(135deg,#def7ee,#fffdf7); }

.sensitive-screenshot-shield {
  position: fixed; inset: 0; z-index: 9998; display: none; place-items: center;
  padding: 28px; background: rgba(51,37,43,.88); color: white; text-align: center;
  backdrop-filter: blur(12px);
}
.sensitive-screenshot-shield.show { display: grid; }
.sensitive-screenshot-shield div { max-width: 300px; padding: 24px; border-radius: 24px; background: rgba(255,255,255,.10); }
.sensitive-screenshot-shield b { display:block; font-size: 18px; margin-bottom: 9px; }
.sensitive-screenshot-shield span { display:block; line-height:1.75; color: rgba(255,255,255,.86); }

body.app-skin-pearl {
  --cream:#f8f8f5; --paper:#ffffff; --app-top-surface:rgba(248,248,245,.985); --app-top-divider:transparent; --pink:#e9e6e1; --pink-soft:#f3f1ed; --raspberry:#8f475d; --raspberry-dark:#713749; --sky:#edf2f4; --ink:#2f2b2b; --muted:#706a68; --line:rgba(80,70,66,.16);
  --folder-tone-0:#eeeae5; --folder-tone-1:#edf2f4; --folder-tone-2:#ffffff;
}
body.app-skin-lavender {
  --cream:#fbf7ff; --paper:#fffefe; --app-top-surface:rgba(251,247,255,.985); --app-top-divider:transparent; --pink:#e8d8ff; --pink-soft:#f5edff; --raspberry:#8c4cb8; --raspberry-dark:#6f3892; --sky:#e6f1ff; --ink:#302638; --muted:#766982; --line:rgba(112,66,150,.16);
  --folder-tone-0:#eadcff; --folder-tone-1:#e5f0ff; --folder-tone-2:#fffefe;
}
body.app-skin-mint {
  --cream:#fbfff9; --paper:#ffffff; --app-top-surface:rgba(251,255,249,.985); --app-top-divider:transparent; --pink:#dff5ea; --pink-soft:#eefaf4; --raspberry:#2f8b68; --raspberry-dark:#236f52; --sky:#d9f2ff; --ink:#26332e; --muted:#63756d; --line:rgba(55,126,94,.15);
  --folder-tone-0:#ddf5e9; --folder-tone-1:#d9f2ff; --folder-tone-2:#ffffff;
}

.post-card, .post-card h3, .post-card p,
.content-rights, .content-rights p,
.comment-card, .comment-card p,
.tree-copy, .my-collection-comment p,
.report-detail-card p, .tool-panel p {
  -webkit-user-select: text;
  user-select: text;
}

body.app-dark .comment-card p,
body.app-dark .my-collection-comment p,
body.app-dark .report-item p,
body.app-dark .report-detail-card p,
body.app-dark .tree-copy,
body.app-dark .mobile-upload-copy small {
  color: #d3bdc9;
}

body.app-dark .home-search input,
body.app-dark .my-collection-search input,
body.app-dark .support-bot-form input {
  color: var(--ink);
}

body.app-dark .home-search input::placeholder,
body.app-dark .my-collection-search input::placeholder,
body.app-dark .field input::placeholder,
body.app-dark .field textarea::placeholder {
  color: #b79aaa;
}

body.app-dark .safety-note,
body.app-dark .comment-media,
body.app-dark .commerce-disclosure {
  background: rgba(255, 231, 244, .08);
  color: #ead7df;
  border-color: rgba(255, 231, 244, .14);
}

@media (max-width: 360px) {
  .link-import-row { grid-template-columns: 1fr; }
  .link-analyze-button { min-height: 38px; }
}

/* Build 12：个人收藏搜索与首页搜索保持同一套视觉语言，但占满详情页可用宽度。 */
#screen-my-collections .my-collection-search {
  width: 100%;
  max-width: none;
  min-height: 48px;
  margin: 2px 0 14px;
  padding-left: 16px;
  border: 1px solid rgba(199, 25, 66, .13);
  background: rgba(255, 255, 255, .90);
  box-shadow: 0 8px 22px rgba(92, 52, 64, .06);
}
#screen-my-collections .my-collection-search input {
  min-width: 0;
  font-size: 13px;
  font-weight: 650;
}
#screen-my-collections .my-collection-search button {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
}

.flower-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.flower-style-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 5px 2px 2px;
  border-radius: 999px;
}
.flower-style-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--rose);
}
.flower-style-button .flower-style-icon {
  width: 23px;
  height: 23px;
}
.flower-style-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.flower-style-card {
  display: grid;
  min-height: 124px;
  place-items: center;
  align-content: center;
  gap: 6px;
}
.flower-style-card h3 { margin: 0; }

body.app-dark #screen-my-collections .my-collection-search {
  background: #2d2334;
  border-color: rgba(255, 255, 255, .10);
}

/* Build 23: 发布进度、评论删除与含图草稿 */
.comment-actions .comment-delete-button {
  color: var(--rose);
  font-weight: 800;
}

.publish-progress-dialog {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 10px 2px 2px;
  text-align: center;
}

.publish-progress-dialog h2,
.publish-progress-dialog p { margin: 0; }

.publish-progress-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(199, 25, 66, .16);
  border-top-color: var(--rose);
  border-radius: 50%;
  animation: publish-progress-spin .8s linear infinite;
}

@keyframes publish-progress-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .publish-progress-spinner { animation-duration: 1.8s; }
}

/* Build 30: 真机滚动与媒体稳定性 */
.auth-scroll-cue.cue-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px);
}

.post-media-grid,
.post-media-grid-item,
.post-media-grid-item img,
.post-media-trigger,
.post-media-trigger img,
.comment-media,
.comment-media img {
  animation: none !important;
  transition: none !important;
  transform: none;
  contain: layout paint;
}

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

.checkin-actions .checkin-delete {
  grid-column: 1 / -1;
  min-height: 42px;
}

.audit-review-image {
  width: 100%;
  max-height: 320px;
  margin-top: 10px;
  border-radius: 16px;
  object-fit: contain;
  background: #fff7fa;
  border: 1px solid var(--line);
}

.admin-audit-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.admin-audit-group {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
}

.admin-audit-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 12px 16px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 800;
  list-style: none;
}

.admin-audit-group > summary::-webkit-details-marker {
  display: none;
}

.admin-audit-group > summary b {
  display: grid;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 13px;
}

.admin-audit-group[open] > summary {
  border-bottom: 1px solid var(--line);
}

.admin-audit-group-list {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 10px;
  padding: 10px;
}

.admin-audit-group-list > .admin-audit-card {
  margin: 0;
}

.admin-audit-group-list > .empty-tip {
  margin: 0;
  padding: 14px;
  text-align: center;
}

#admin-audit-flags,
#admin-audit-flags > *,
.admin-audit-card > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.admin-audit-reason,
.admin-audit-card .post-meta {
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-audit-reason {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.admin-audit-card .inline-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 100%;
}

.admin-audit-card .inline-actions > button {
  width: 100%;
  min-width: 0;
  padding: 8px 6px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

@media (max-width: 360px) {
  .admin-audit-card .inline-actions { grid-template-columns: 1fr; }
}

.admin-audit-title,
.admin-audit-excerpt {
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-audit-title {
  display: -webkit-box;
  margin: 14px 0 6px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.admin-audit-excerpt {
  display: -webkit-box;
  margin: 0 0 10px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.audit-review-thumbnail-button {
  width: 100%;
  min-width: 0;
  height: 210px;
  margin-top: 10px;
  padding: 8px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff7fa;
}

.audit-review-thumbnail-button[hidden] { display: none; }

.audit-review-thumbnail {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 13px;
}

.audit-review-thumbnail-button > span {
  position: absolute;
  right: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  padding: 7px 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(50, 36, 42, .84);
  color: #fff;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkin-invite-post-card {
  min-width: 0;
  margin-top: 12px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(199, 25, 66, .14);
  border-radius: 18px;
  background: linear-gradient(145deg, #fff3f8, #fffaf1);
}

.checkin-invite-post-card > div:first-child,
.checkin-invite-post-card span,
.checkin-invite-post-card b,
.checkin-invite-post-card small { min-width: 0; max-width: 100%; }
.checkin-invite-post-card span,
.checkin-invite-post-card b,
.checkin-invite-post-card small { display: block; overflow-wrap: anywhere; }
.checkin-invite-post-card span { color: var(--rose); font-size: 9px; font-weight: 850; }
.checkin-invite-post-card b { margin-top: 5px; color: var(--ink); font-size: 13px; }
.checkin-invite-post-card small { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.checkin-invite-post-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.checkin-invite-post-actions button { min-width: 0; min-height: 40px; padding: 0 8px; border: 1px solid rgba(199, 25, 66, .18); border-radius: 14px; background: #fff; color: var(--rose); font-size: 9px; font-weight: 800; }
.checkin-invite-post-actions button.primary { border-color: var(--rose); background: var(--rose); color: #fff; }

body.app-dark .audit-review-thumbnail-button,
body.app-dark .checkin-invite-post-card { background: #302633; border-color: rgba(248, 207, 224, .18); }

.notification-focus {
  outline: 3px solid rgba(199, 25, 66, 0.34);
  box-shadow: 0 0 0 7px rgba(199, 25, 66, 0.10), 0 14px 35px rgba(108, 39, 62, 0.16);
}

/* Build 36：账号私有书柜、小物柜与药品柜。 */
.cabinet-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid rgba(199, 25, 66, .12);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 220, 234, .92), rgba(255, 248, 243, .96));
}
.cabinet-hero span { color: var(--rose); font-size: 12px; font-weight: 800; }
.cabinet-hero h3 { margin: 4px 0; font-size: 24px; }
.cabinet-hero p { margin: 0; color: var(--muted); font-size: 13px; }
.cabinet-hero .app-primary { width: auto; min-width: 112px; padding: 0 14px; }
.cabinet-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 2px 10px;
}
.cabinet-section-heading h3, .cabinet-section-heading p { margin: 0; }
.cabinet-section-heading h3 { font-size: 18px; }
.cabinet-section-heading p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.cabinet-section-heading > span { color: var(--rose); font-weight: 850; }
.cabinet-section-heading > button {
  min-width: 64px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(199, 25, 66, .18);
  border-radius: 999px;
  color: var(--rose);
  background: #fff;
  font-weight: 800;
}
.cabinet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cabinet-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 9px 24px rgba(95, 59, 73, .05);
}
.cabinet-card.is-low-stock { border-color: rgba(199, 25, 66, .34); }
.cabinet-card.is-expiring { border-color: rgba(218, 112, 38, .42); box-shadow: 0 12px 28px rgba(161, 79, 22, .08); }
.cabinet-card-media { display: grid; place-items: center; aspect-ratio: 1.18; background: linear-gradient(145deg, #fff0f5, #f6f1ff); overflow: hidden; }
.cabinet-card-media img { width: 100%; height: 100%; object-fit: cover; }
.cabinet-card-media span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; color: var(--rose); background: rgba(255,255,255,.8); font-size: 24px; font-weight: 900; }
.cabinet-card-copy { display: grid; gap: 5px; padding: 13px 13px 8px; }
.cabinet-card-copy h3, .cabinet-card-copy p, .cabinet-card-copy small { margin: 0; }
.cabinet-card-copy h3 { font-size: 16px; }
.cabinet-card-copy p { color: var(--ink); font-size: 13px; font-weight: 750; }
.cabinet-card-copy small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.cabinet-card-copy .cabinet-location { color: var(--ink); }
.cabinet-card-copy .cabinet-expiry { color: #527566; }
.cabinet-card-copy .cabinet-expiry.urgent { color: #b55225; }
.cabinet-card-copy strong { color: var(--rose); font-size: 11px; line-height: 1.45; }
.cabinet-card-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.cabinet-card-actions button { min-height: 40px; color: var(--rose); background: transparent; font-weight: 800; }
.cabinet-card-actions button + button { border-left: 1px solid var(--line); }
.cabinet-card-actions.has-shopping { grid-template-columns: 1fr 1fr; }
.cabinet-card-actions.has-shopping button:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
.cabinet-card-actions.has-shopping button:nth-child(2) { border-left: 0; }
.cabinet-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 190px; padding: 26px; border: 1px dashed rgba(199, 25, 66, .22); border-radius: 24px; color: var(--muted); text-align: center; background: rgba(255, 247, 250, .72); }
.cabinet-empty span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; background: var(--rose); font-size: 30px; }
.cabinet-empty p, .cabinet-empty-line { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.medicine-today-panel { border-color: rgba(199, 25, 66, .14); }
.medicine-dose-list { display: grid; gap: 9px; }
.medicine-dose-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border-radius: 17px; background: #fff7fa; }
.medicine-dose-row time { color: var(--rose); font-weight: 900; }
.medicine-dose-row div { display: grid; min-width: 0; gap: 2px; }
.medicine-dose-row b { font-size: 14px; }
.medicine-dose-row span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.medicine-dose-row button { min-width: 64px; min-height: 36px; border-radius: 999px; color: #fff; background: var(--rose); font-weight: 850; }
.medicine-dose-row.is-complete { opacity: .68; }
.medicine-dose-row.is-complete button { color: #6d5961; background: #e9e3e5; }
.medicine-disclaimer { padding: 13px 15px; border-left: 4px solid var(--rose); border-radius: 13px; color: #6b5960; background: rgba(255, 240, 246, .82); font-size: 12px; line-height: 1.65; }
.cabinet-number-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cabinet-editor-form small { display: block; margin-top: 5px; color: var(--muted); line-height: 1.45; }
.cabinet-existing-image { display: block; width: 84px; height: 84px; margin-top: 8px; border-radius: 16px; object-fit: cover; }

body.app-dark .cabinet-hero { background: linear-gradient(135deg, #3b2743, #2a2433); border-color: rgba(255,255,255,.08); }
body.app-dark .cabinet-card,
body.app-dark .cabinet-section-heading > button { background: #2d2733; border-color: rgba(255,255,255,.09); }
body.app-dark .cabinet-card-media { background: linear-gradient(145deg, #3b2a3d, #292534); }
body.app-dark .medicine-dose-row,
body.app-dark .cabinet-empty { background: #332936; }
body.app-dark .medicine-disclaimer { color: #ead7df; background: rgba(119, 70, 103, .22); }

@media (max-width: 390px) {
  .cabinet-hero { grid-template-columns: 1fr; }
  .cabinet-hero .app-primary { width: 100%; }
  .cabinet-grid { grid-template-columns: 1fr; }
  .medicine-dose-row { grid-template-columns: 48px minmax(0, 1fr) auto; }
}

/* Build 36 final: prevent comment-thread horizontal drift on real iPhones. */
html,
body,
.app-page,
.preview-layout,
.device-frame,
.app-shell,
.app-screen,
.post-detail-card,
.post-card,
.comment-composer,
.comment-list,
.comment-card,
.comment-replies,
.comment-reply-card,
.comment-copy-row,
.comment-actions {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

html,
body,
.app-page,
.device-frame,
.app-shell,
.app-screen {
  overflow-x: hidden;
}

.post-detail-card,
.comment-composer,
.comment-list,
.comment-card,
.comment-replies,
.comment-reply-card {
  width: 100%;
}

#screen-post,
#post-detail-content,
#comment-list,
.comment-card,
.comment-replies {
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

.comment-replies {
  margin: 10px 0 0 4px;
  padding-left: 8px;
  overflow: hidden;
  border-left-width: 2px;
}

/* Replies are deliberately a flat list. Legacy nested markup must not add
   another level of indentation if it is still present in restored HTML. */
.comment-replies .comment-replies {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

.comment-reply-card {
  margin: 0;
  overflow: hidden;
}

.comment-head,
.comment-copy-row,
.comment-card p,
.comment-reply-target {
  min-width: 0;
  max-width: 100%;
}

.comment-card p,
.comment-reply-target,
.comment-author,
.post-meta {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.comment-copy-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.comment-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  overflow: hidden;
}

.comment-actions button {
  flex: 0 0 auto;
  max-width: 100%;
}

.tree-reply-thread,
.tree-reply,
.tree-child-replies,
.warm-replies,
.tree-copy {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.tree-reply-thread { overflow: hidden; }
.tree-child-replies {
  display: grid;
  gap: 8px;
  margin: 8px 0 0 5px;
  padding-left: 8px;
  overflow: hidden;
  border-left: 2px solid rgba(199, 25, 66, 0.13);
}
.tree-child-replies .tree-child-replies { margin-left: 0; padding-left: 0; border-left: 0; }
.tree-reply-target,
.tree-reply .comment-copy-row,
.tree-reply .comment-actions { min-width: 0; max-width: 100%; }
.tree-reply .comment-actions { flex-wrap: wrap; overflow: hidden; }

.user-content-link {
  color: var(--raspberry);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  word-break: break-all;
}

#screen-post .comment-list,
#screen-tree .warm-replies {
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}

.comment-thread-toggle {
  max-width: calc(100% - 4px);
  margin-left: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 390px) {
  .comment-card { padding: 12px 10px; }
  .comment-replies { margin-left: 2px; padding-left: 6px; }
  .comment-actions { gap: 2px; }
  .comment-actions button { padding-inline: 6px; font-size: 9px; }
}

/* Build 37 final QA: media, moderation, reactions, authored text and themes. */
.authored-text-input,
.post-copy,
.tree-copy,
.comment-card p,
.comment-reply-target,
.admin-audit-excerpt,
.admin-audit-full-copy {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  tab-size: 2;
}

.mobile-upload-preview-card {
  grid-template-columns: minmax(0, 1fr) auto;
}
.mobile-upload-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}
.mobile-upload-preview-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 12px;
  object-fit: cover;
}
.mobile-upload-preview-copy {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Multi-image composers share one real long-press drag order interaction.
   Normal vertical scrolling remains available until the long press activates. */
.selected-media-reorder-item {
  position: relative;
  min-width: 0;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.selected-media-reorder-item.is-dragging {
  z-index: 30;
  transform: translate3d(var(--media-drag-x, 0), var(--media-drag-y, 0), 0) scale(1.045);
  box-shadow: 0 14px 34px rgba(74, 35, 50, .24);
  opacity: .92;
  transition: box-shadow .12s ease, opacity .12s ease;
}
.selected-media-reorder-item.is-drop-target:not(.is-dragging) {
  box-shadow: 0 0 0 3px rgba(199, 25, 66, .28);
  transform: scale(.96);
}
body.media-reorder-active {
  overscroll-behavior: none;
}
.mobile-upload-preview-card .selected-media-preview-button,
.publish-media-chip .publish-media-preview-button {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  overflow: hidden;
  background: var(--pink-soft) !important;
  color: var(--raspberry) !important;
  cursor: grab;
  touch-action: pan-y;
}
.selected-media-preview-button:active,
.publish-media-preview-button:active {
  cursor: grabbing;
}
.selected-media-preview-button img,
.publish-media-preview-button img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 12px;
  object-fit: cover;
  pointer-events: none;
}
.selected-media-order-badge {
  position: absolute;
  left: 5px;
  bottom: 5px;
  z-index: 3;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(45, 28, 34, .15);
  font-size: 10px;
  font-weight: 900;
  pointer-events: none;
}
.mobile-upload-preview-card .selected-media-remove-button,
.publish-media-chip .selected-media-remove-button {
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  min-height: 25px;
  padding: 0;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--raspberry);
  color: white;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.selected-media-placeholder {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--pink-soft);
  color: var(--muted);
  font-size: 9px;
}
.publish-media-chip .publish-media-preview-button {
  aspect-ratio: 1;
}
.publish-media-chip > .selected-media-order-badge {
  display: grid;
  width: auto;
  height: 22px;
  aspect-ratio: auto;
  overflow: visible;
}
.publish-media-chip > small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
  text-align: center;
}
body.app-dark .selected-media-order-badge {
  background: rgba(34, 28, 37, .94);
  color: #fff7fb;
}

.reaction-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}
.reaction-icon {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  color: var(--raspberry);
  font-size: 22px;
  line-height: 1;
  transform-origin: center;
}
.reaction-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.reaction-copy b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}
.reaction-copy small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
}
.reaction-button.active .reaction-icon {
  animation: reaction-pop .34s cubic-bezier(.2,.9,.35,1.25);
}
.reaction-icon .flower-style-icon {
  width: 23px;
  height: 23px;
}
.post-engagement-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  gap: 2px;
  overflow: hidden;
}
.post-engagement-actions .post-action-group {
  display: contents;
}
.post-engagement-actions button {
  display: inline-flex;
  min-width: 0;
  width: 100%;
  padding: 0 2px;
  align-items: center;
  justify-content: center;
  writing-mode: horizontal-tb;
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: clip;
  font-size: clamp(8.5px, 2.55vw, 10.5px);
}
.post-engagement-actions .reaction-button {
  gap: 3px;
}
.post-engagement-actions .reaction-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  font-size: 20px;
}
.post-engagement-actions .reaction-icon .flower-style-icon {
  width: 22px;
  height: 22px;
}
.post-engagement-actions .reaction-copy {
  min-width: 0;
  gap: 2px;
  white-space: nowrap;
}
.post-engagement-actions .reaction-copy b {
  font-size: clamp(9px, 2.5vw, 10.5px);
  white-space: nowrap;
}
.post-engagement-actions .reaction-copy small {
  font-size: clamp(8px, 2.2vw, 9.5px);
}
.post-engagement-actions.own-post-actions {
  grid-template-columns: auto minmax(0, 1fr);
}
.post-engagement-actions.own-post-actions .own-post-note {
  min-width: 0;
  line-height: 1.35;
}
.comment-actions .comment-flower-action {
  gap: 3px;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}
.comment-actions .comment-flower-action .reaction-icon,
.comment-actions .comment-flower-action .reaction-icon .flower-style-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.comment-actions .comment-flower-action .reaction-copy b {
  font-size: 9px;
}
.comment-actions .comment-flower-action .reaction-copy small {
  font-size: 8.5px;
}
@keyframes reaction-pop {
  0% { transform: scale(.75); }
  62% { transform: scale(1.24) rotate(-6deg); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .reaction-button.active .reaction-icon { animation: none; }
}

.admin-audit-card,
.admin-audit-card * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.admin-audit-card {
  overflow: hidden;
}
.admin-audit-kind,
.admin-audit-destination,
.admin-audit-reason,
.admin-audit-link {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.admin-audit-image-grid,
.admin-audit-full-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.admin-audit-image-grid button,
.admin-audit-full-images button {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
}
.admin-audit-image-grid img,
.admin-audit-full-images img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.admin-audit-view-all {
  width: 100%;
  min-height: 40px;
  margin-top: 8px;
  border: 1px solid rgba(199,25,66,.2);
  border-radius: 14px;
}
.admin-audit-card .inline-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-audit-card .inline-actions > button {
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.comment-image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
  margin-top: 9px;
}
.comment-image-grid button {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #f8edf1;
}
.comment-image-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.period-calendar-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
}
.period-calendar-head {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 8px;
}
.period-calendar-head h3 { margin: 0; text-align: center; }
.period-calendar-head button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--raspberry);
  background: var(--surface);
  font-size: 24px;
}
.period-calendar-grid,
.period-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin-top: 10px;
}
.period-weekdays span {
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}
.period-day {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ink);
  background: transparent;
  font-size: 11px;
}
.period-day.recorded { color: #fff; background: var(--raspberry); }
.period-day.predicted:not(.recorded) { color: var(--raspberry); background: rgba(226,90,132,.12); }
.period-day.selected { border-color: var(--raspberry); box-shadow: inset 0 0 0 1px var(--raspberry); }

.diary-existing-media {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0;
}
.diary-existing-media figure {
  position: relative;
  min-width: 0;
  margin: 0;
}
.diary-existing-media .diary-media-preview {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 13px;
  overflow: hidden;
  background: transparent;
}
.diary-existing-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 13px;
  object-fit: cover;
}
.diary-existing-media button[data-remove-diary-media] {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  background: rgba(35,20,27,.72);
}
.diary-entry-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}
.diary-entry-date { margin-top: 14px; }
.diary-entry-date small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.diary-entry-actions .app-primary,
.diary-entry-actions .app-danger { margin: 0; }

/* App skins must own public-folder colours; system dark mode may be disabled
   explicitly when a skin is chosen. */
body.app-skin-lavender .folder-card:nth-child(3n+1) { background: #eadcff; }
body.app-skin-lavender .folder-card:nth-child(3n+2) { background: #e7f0ff; }
body.app-skin-lavender .folder-card:nth-child(3n) { background: #fff; }
body.app-skin-mint .folder-card:nth-child(3n+1) { background: #daf3e7; }
body.app-skin-mint .folder-card:nth-child(3n+2) { background: #dcefff; }
body.app-skin-mint .folder-card:nth-child(3n) { background: #fff; }
body.app-skin-pearl .folder-card:nth-child(3n+1),
body.app-skin-pearl .folder-card:nth-child(3n+2),
body.app-skin-pearl .folder-card:nth-child(3n) { background: #f4f3f0; }

@media (max-width: 390px) {
  .admin-audit-card .inline-actions { grid-template-columns: 1fr 1fr; }
  .admin-audit-image-grid,
  .admin-audit-full-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobile-upload-preview-grid,
  .comment-image-grid,
  .diary-existing-media { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Keep native-style forms inside every iPhone viewport. Background cards may
   fill the screen, but date fields, cabinet controls and upload actions must
   never establish a wider intrinsic size. */
.form-stack,
.form-stack > *,
.field,
.field > *,
.tool-panel,
.diary-editor-card,
.cabinet-editor-form,
.cabinet-number-grid,
.cabinet-number-grid > *,
.mobile-upload,
.mobile-upload-inline,
.mobile-upload-inline-copy,
.mobile-upload-inline-actions {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.field input,
.field textarea,
.field select,
.form-stack > input,
.form-stack > textarea,
.form-stack > select,
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.diary-entry-date {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.diary-date-input-shell {
  display: block;
  inline-size: 100%;
  width: 100%;
  min-inline-size: 0;
  min-width: 0;
  max-inline-size: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.diary-date-input-shell input[type="date"] {
  display: block;
  inline-size: 100% !important;
  width: 100% !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  -webkit-min-logical-width: 0;
  overflow: hidden;
  box-sizing: border-box !important;
}

.diary-date-input-shell input[type="date"]::-webkit-date-and-time-value {
  min-inline-size: 0;
  min-width: 0;
  text-align: center;
  margin: 0 auto;
  line-height: 1;
}

.diary-date-input-shell input[type="date"] {
  min-height: 56px;
  padding-inline: 42px 36px !important;
  text-align: center;
  line-height: 56px;
}

.diary-date-input-shell input[type="date"]::-webkit-datetime-edit {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0;
}

.diary-date-input-shell input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cabinet-number-grid {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal-card {
  min-width: 0;
  max-width: calc(100vw - 24px);
  overflow-x: hidden;
  box-sizing: border-box;
}

.mobile-upload-inline-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-upload-inline-actions button {
  min-width: 0;
  white-space: normal;
}

@media (max-width: 360px) {
  .cabinet-number-grid { grid-template-columns: 1fr; }
}

/* Build39: compact in-app selectors replace oversized platform menus. */
.app-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
}

.app-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  box-sizing: border-box;
  font: inherit;
  font-weight: 700;
  text-align: left;
}

.app-select-trigger:focus-visible {
  outline: 3px solid rgba(208, 22, 73, .18);
  outline-offset: 2px;
}

.app-select-trigger-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-select-trigger-chevron {
  flex: 0 0 auto;
  color: var(--raspberry);
  font-size: 20px;
  line-height: 1;
}

#screen-publish .app-select-trigger {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 13px;
}

.app-select-layer {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: rgba(38, 27, 33, .34);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.app-select-layer.open { display: flex; }
body.app-select-open { overflow: hidden; }

.app-select-sheet {
  display: flex;
  flex-direction: column;
  width: min(100%, 370px);
  max-height: min(72dvh, 580px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 22px 60px rgba(50, 25, 35, .20);
}

.app-select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 20px 12px;
}

.app-select-header small {
  color: var(--muted);
  font-weight: 700;
}

.app-select-header h3 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 22px;
}

.app-select-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--pink-soft);
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
}

.app-select-search-wrap { padding: 0 14px 8px; }

.app-select-search {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-sizing: border-box;
  font: inherit;
}

.app-select-options {
  overflow-y: auto;
  padding: 4px 12px 14px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.app-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 12px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  text-align: left;
}

.app-select-option:last-child { border-bottom: 0; }
.app-select-option.selected {
  border-radius: 14px;
  background: rgba(226, 90, 132, .09);
  color: var(--raspberry);
}
.app-select-check { color: var(--raspberry); font-weight: 900; opacity: 0; }
.app-select-option.selected .app-select-check { opacity: 1; }

body.app-dark .app-select-sheet,
body.app-dark .app-select-trigger,
body.app-dark .app-select-search { background: #241b2b; }

/* Date and time controls must never use their native intrinsic width to escape a card. */
.date-time-input-shell {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-sizing: border-box;
}

.date-time-input-shell input[type="date"],
.date-time-input-shell input[type="time"] {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-inline: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.post-meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  line-height: 1.4;
}

.post-region,
.post-trust {
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
  white-space: nowrap;
}

.post-trust-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.post-trust-button:focus-visible {
  outline: 2px solid rgba(199, 25, 66, .42);
  outline-offset: 2px;
  border-radius: 4px;
}
.trust-rating-count {
  margin: 4px 0 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

@media (max-width: 390px) {
  .app-select-layer { padding-inline: 12px; }
  .app-select-sheet { max-height: 76dvh; border-radius: 22px; }
  .app-select-header { padding: 17px 16px 10px; }
}

/* Build52: render the diary date through a centered visual layer. iOS keeps
   the native picker fully tappable, while its asymmetric system glyph can no
   longer shift the visible date away from the true center. */
.diary-date-input-shell {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 56px;
  overflow: hidden;
}

.diary-date-display {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 0 18px;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.diary-date-input-shell input[type="date"] {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2;
  width: 100% !important;
  height: 100% !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0.001;
  cursor: pointer;
}

.diary-date-input-shell:focus-within {
  border-color: rgba(199, 25, 66, .48);
  box-shadow: 0 0 0 3px rgba(199, 25, 66, .08);
}

/* The trust button is a sibling of the author links, never a nested button.
   Keep IP and trust together on the metadata row; time owns the next row. */
.post-identity .post-meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 5px;
  width: 100%;
}

.post-identity .post-time-row {
  display: block;
  width: 100%;
}

@media (max-width: 390px) {
  .post-identity { flex-basis: 180px; }
  .post-head-tools { margin-left: auto; }
}

/* Build53: only authored post/comment text and editable controls may be selected. */
body[data-active-screen], body[data-active-screen] * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body[data-active-screen] input,
body[data-active-screen] textarea,
body[data-active-screen] [contenteditable="true"],
body[data-active-screen] .post-open h3,
body[data-active-screen] .post-open p,
body[data-active-screen] .post-copy,
body[data-active-screen] .comment-card:not(.tree-reply) .comment-copy-row p,
body[data-active-screen] .my-collection-comment p {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
body[data-active-screen] .tree-post > .tree-copy,
body[data-active-screen] .tree-reply .comment-copy-row p {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Build53: collaborative collection and collapsed member-profile surfaces. */
.member-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.member-profile-actions { width: min(100%, 360px); margin: 13px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 9px; }
.member-profile-actions .follow-button,
.member-profile-actions .profile-trust-button { width: 100%; min-height: 42px; margin: 0; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--app-font-ui); font-size: 13px; line-height: 1.2; font-weight: 900; text-align: center; }
.profile-trust-button { border: 1px solid rgba(199,25,66,.2); background: rgba(255,255,255,.76); color: var(--raspberry); }
.collection-entry-organizer { margin: 8px 0 0 58px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.collection-entry-organizer button { padding: 0; border: 0; background: transparent; color: var(--raspberry); font: inherit; font-weight: 900; }
.tree-original-author-badge { margin-left: 6px; padding: 2px 6px; border-radius: 999px; background: var(--pink-soft); color: var(--raspberry); font-size: 9px; font-style: normal; font-weight: 900; }
@media (max-width: 360px) { .member-profile-actions { grid-template-columns: 1fr; } }
.member-collapsible-section { margin-top: 12px; }
.member-section-toggle { width: 100%; min-height: 70px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 21px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--paper); color: var(--ink); text-align: left; }
.member-section-toggle span, .member-section-toggle b, .member-section-toggle small { display: block; }
.member-section-toggle b { font-size: 17px; }
.member-section-toggle small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.member-section-toggle i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pink-soft); color: var(--raspberry); font-size: 20px; font-style: normal; }
.member-section-content { margin-top: 10px; }
.member-collection-list { display: grid; gap: 10px; }
.member-collection-card, .shared-collection-preview { padding: 15px; border: 1px solid var(--line); border-radius: 21px; background: var(--paper); }
.member-collection-head, .shared-collection-preview > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; }
.member-collection-head button, .shared-collection-preview > div:first-child b { border: 0; background: transparent; color: var(--success); font-size: 9px; font-weight: 900; }
.member-collection-open, .trusted-private-open { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.member-collection-open h3, .shared-collection-preview h3 { margin: 10px 0 6px; font-size: 16px; }
.member-collection-open p, .shared-collection-preview p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.member-collection-open small { display: block; margin-top: 10px; color: var(--raspberry); font-size: 9px; font-weight: 850; }
.collection-contributors { margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.collection-contributors > span { color: var(--muted); font-size: 9px; font-weight: 850; }
.collection-contributors button { min-height: 28px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; background: var(--paper); color: var(--ink); font-size: 9px; font-weight: 850; }
.collection-contributors img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.shared-collection-preview { margin-top: 11px; background: var(--pink-soft); }
.shared-collection-preview .inline-actions { margin-top: 12px; }
.trusted-private-head button { padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 9px; font-weight: 850; }
.trusted-private-head button:last-child { color: var(--success); }
.trusted-private-open { margin-top: 7px; }
.support-developer-reply { margin-top: 10px; padding: 11px; border-radius: 14px; background: var(--pink-soft); }
.support-developer-reply b { color: var(--raspberry); font-size: 10px; }
.support-developer-reply p { margin: 5px 0 0; display: block; overflow: visible; color: var(--ink); font-size: 11px; line-height: 1.6; }

@media (max-width: 390px) {
  .collection-detail-actions { grid-template-columns: 1fr; }
  .member-stats { gap: 5px; }
  .member-stats div { padding-inline: 2px; }
  .member-stats b { font-size: 14px; }
  .member-stats span { font-size: 8px; }
}