:root {

 --paper: #f3ede0;
 --paper-2: #faf6ec;
 --paper-3: #fffcf4;
 --paper-line: #e2d8c1;
 --paper-line-soft: #ece4d0;

 --ink: #2c2924;
 --ink-2: #5a544a;
 --ink-3: #8a8275;
 --ink-4: #b3a999;

 --clay: #b06b4a;
 --clay-soft: #d49a7c;
 --leaf: #6b8068;
 --dusty: #7a8590;

 --line: rgba(120, 100, 70, 0.18);
 --line-soft: rgba(120, 100, 70, 0.10);
 --shadow: 0 1px 2px rgba(60, 50, 35, 0.04), 0 6px 24px rgba(60, 50, 35, 0.06);
 --shadow-soft: 0 1px 2px rgba(60, 50, 35, 0.03), 0 3px 12px rgba(60, 50, 35, 0.05);

 --r: 4px;
 --r-md: 6px;
 --r-lg: 10px;

 --font-serif: "Songti SC", "STSong", "SimSun", "Noto Serif SC", "Source Han Serif SC", serif;
 --font-kai: "Kaiti SC", "STKaiti", "KaiTi", "Noto Serif SC", serif;
 --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

[data-theme="dark"] {
 --paper: #1d1c19;
 --paper-2: #25231e;
 --paper-3: #2a2823;
 --paper-line: #3a352c;
 --paper-line-soft: #2f2c25;

 --ink: #e8e1d2;
 --ink-2: #b8b0a0;
 --ink-3: #807868;
 --ink-4: #5a544a;

 --clay: #d49a7c;
 --clay-soft: #b78168;
 --leaf: #98b09a;
 --dusty: #9aa6b0;

 --line: rgba(220, 200, 170, 0.16);
 --line-soft: rgba(220, 200, 170, 0.08);
 --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 24px rgba(0, 0, 0, 0.35);
 --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.2), 0 3px 12px rgba(0, 0, 0, 0.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
 background: var(--paper);
 color: var(--ink);
 font-family: var(--font-serif);
 font-size: 15px;
 line-height: 1.85;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 min-height: 100vh;
 overflow-x: hidden;

 background-image:
 radial-gradient(ellipse 800px 400px at 20% 0%, rgba(176, 107, 74, 0.04), transparent 60%),
 radial-gradient(ellipse 600px 300px at 100% 100%, rgba(107, 128, 104, 0.03), transparent 60%);
}

body::before {
 content: "";
 position: fixed;
 inset: 0;
 z-index: -1;
 pointer-events: none;
 background-image: repeating-linear-gradient(
 0deg,
 transparent 0,
 transparent 31px,
 rgba(120, 100, 70, 0.045) 31px,
 rgba(120, 100, 70, 0.045) 32px
 );
 opacity: 0.5;
}
[data-theme="dark"] body::before {
 background-image: repeating-linear-gradient(
 0deg,
 transparent 0,
 transparent 31px,
 rgba(220, 200, 170, 0.04) 31px,
 rgba(220, 200, 170, 0.04) 32px
 );
}

::selection { background: rgba(176, 107, 74, 0.18); color: var(--ink); }

.moments-header {
 position: sticky;
 top: 0;
 z-index: 80;
 background: rgba(243, 237, 224, 0.85);
 backdrop-filter: blur(12px) saturate(140%);
 -webkit-backdrop-filter: blur(12px) saturate(140%);
 border-bottom: 1px solid var(--line-soft);
}
[data-theme="dark"] .moments-header {
 background: rgba(29, 28, 25, 0.85);
}

.header-inner {
 max-width: 680px;
 margin: 0 auto;
 padding: 0.85rem 1.4rem;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
}

.back-link {
 display: inline-flex;
 align-items: center;
 gap: 0.3rem;
 color: var(--ink-2);
 text-decoration: none;
 font-family: var(--font-kai);
 font-size: 0.9rem;
 letter-spacing: 0.1em;
 transition: color 0.25s;
}
.back-link:hover { color: var(--clay); }

.brand {
 display: inline-flex;
 align-items: baseline;
 gap: 0.55rem;
 flex: 1;
 justify-content: center;
}
.brand-cn {
 font-family: var(--font-serif);
 font-size: 1.05rem;
 font-weight: 500;
 letter-spacing: 0.15em;
 color: var(--ink);
}
.brand-en {
 font-family: var(--font-sans);
 font-size: 0.65rem;
 letter-spacing: 0.3em;
 color: var(--ink-3);
 text-transform: uppercase;
 font-weight: 400;
}
.brand-stamp {
 display: inline-block;
 font-family: var(--font-serif);
 font-size: 0.7rem;
 color: var(--clay);
 border: 1.2px solid var(--clay);
 padding: 1px 5px;
 letter-spacing: 0.15em;
 transform: rotate(-4deg);
 opacity: 0.85;
 line-height: 1.2;
}

.header-actions {
 display: flex;
 align-items: center;
 gap: 0.5rem;
}
.header-user {
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 cursor: pointer;
 padding: 0.2rem 0.4rem 0.2rem 0.2rem;
 border-radius: 30px;
 transition: background 0.25s;
}
.header-user:hover { background: var(--paper-2); }
.header-user-avatar {
 width: 26px;
 height: 26px;
 border-radius: 50%;
 background: var(--paper-2);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-serif);
 font-size: 0.8rem;
 color: var(--ink-2);
 overflow: hidden;
 border: 1px solid var(--line);
}
.header-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.header-user-name {
 font-family: var(--font-serif);
 font-size: 0.85rem;
 color: var(--ink-2);
 letter-spacing: 0.04em;
}

.header-link {
 background: none;
 border: none;
 color: var(--ink-2);
 font-family: var(--font-serif);
 font-size: 0.85rem;
 letter-spacing: 0.08em;
 cursor: pointer;
 padding: 0.3rem 0.4rem;
 transition: color 0.25s;
}
.header-link:hover { color: var(--clay); }

.header-menu {
 position: relative;
}
.header-menu-btn {
 background: transparent;
 border: 1px solid var(--line);
 color: var(--ink-2);
 width: 30px;
 height: 30px;
 border-radius: 50%;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 transition: all 0.25s;
}
.header-menu-btn:hover {
 color: var(--ink);
 border-color: var(--ink-2);
 background: var(--paper-2);
}
.header-menu-panel {
 position: absolute;
 top: calc(100% + 8px);
 right: 0;
 min-width: 130px;
 background: var(--paper-3);
 border: 1px solid var(--line);
 border-radius: var(--r);
 box-shadow: var(--shadow);
 padding: 0.35rem 0;
 z-index: 90;
 animation: menuIn 0.2s ease;
}
@keyframes menuIn {
 from { opacity: 0; transform: translateY(-4px); }
 to { opacity: 1; transform: translateY(0); }
}
.header-menu-item {
 display: block;
 width: 100%;
 text-align: left;
 background: transparent;
 border: none;
 color: var(--ink-2);
 font-family: var(--font-serif);
 font-size: 0.88rem;
 letter-spacing: 0.1em;
 padding: 0.55rem 1rem;
 cursor: pointer;
 transition: background 0.2s, color 0.2s;
}
.header-menu-item:hover {
 color: var(--ink);
 background: var(--paper-2);
}
.header-menu-item:last-child {
 color: var(--clay);
}

.mode-pill {
 position: fixed;
 top: 1rem;
 right: 1.4rem;
 z-index: 90;
 font-size: 0.7rem;
 letter-spacing: 0.15em;
 color: var(--ink-2);
 cursor: pointer;
 padding: 5px 12px;
 background: rgba(255, 252, 244, 0.6);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 border: 1px solid var(--line-soft);
 border-radius: 30px;
 font-family: var(--font-serif);
 transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 user-select: none;
}
.mode-pill:hover {
 color: var(--ink);
 border-color: var(--line);
 transform: translateY(-1px);
}
[data-theme="dark"] .mode-pill {
 background: rgba(45, 43, 38, 0.6);
 color: var(--ink-2);
}
@media (max-width: 640px) {
 .mode-pill { top: 0.7rem; right: 0.8rem; font-size: 0.65rem; padding: 4px 10px; }
}

.moments-main {
 max-width: 680px;
 margin: 0 auto;
 padding: 2rem 1.4rem 5rem;
}

.section-stamp {
 text-align: center;
 margin-bottom: 1.4rem;
 font-family: var(--font-sans);
 font-size: 0.68rem;
 letter-spacing: 0.5em;
 color: var(--ink-3);
 text-transform: uppercase;
 position: relative;
}
.section-stamp::before,
.section-stamp::after {
 content: "";
 display: inline-block;
 width: 30px;
 height: 1px;
 background: var(--line);
 vertical-align: middle;
 margin: 0 14px;
 transform: translateY(-2px);
}

.auth-view {
 animation: paperIn 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.auth-letter {
 position: relative;
 background: var(--paper-2);
 border: 1px solid var(--line);
 border-radius: var(--r);
 padding: 3rem 2.4rem 2.6rem;
 box-shadow: var(--shadow);
 margin: 0 auto 1.5rem;
 max-width: 520px;

 background-image:
 radial-gradient(circle at 18px 16px, var(--clay) 0, var(--clay) 1.5px, transparent 1.6px),
 radial-gradient(circle at 18px calc(100% - 16px), var(--clay) 0, var(--clay) 1.5px, transparent 1.6px),
 repeating-linear-gradient(
 to bottom,
 transparent 0,
 transparent 5px,
 var(--paper-line) 5px,
 var(--paper-line) 6px
 );
 background-size: 100% 100%, 100% 100%, 100% 32px;
 background-position: 0 0, 0 0, 0 24px;
 background-repeat: no-repeat, no-repeat, repeat;
}
[data-theme="dark"] .auth-letter {
 background-image:
 radial-gradient(circle at 18px 16px, var(--clay) 0, var(--clay) 1.5px, transparent 1.6px),
 radial-gradient(circle at 18px calc(100% - 16px), var(--clay) 0, var(--clay) 1.5px, transparent 1.6px),
 repeating-linear-gradient(
 to bottom,
 transparent 0,
 transparent 5px,
 rgba(220, 200, 170, 0.05) 5px,
 rgba(220, 200, 170, 0.05) 6px
 );
 background-size: 100% 100%, 100% 100%, 100% 32px;
 background-position: 0 0, 0 0, 0 24px;
 background-repeat: no-repeat, no-repeat, repeat;
}

.auth-letter-quote {
 font-family: var(--font-kai);
 font-size: 1.1rem;
 color: var(--ink);
 letter-spacing: 0.15em;
 line-height: 1.8;
 text-indent: 2em;
 margin-bottom: 0.8rem;
 position: relative;
}
.auth-letter-quote::before {
 content: "「";
 position: absolute;
 left: -8px;
 top: -6px;
 font-family: var(--font-serif);
 font-size: 1.6rem;
 color: var(--clay);
 opacity: 0.5;
}
.auth-letter-quote::after {
 content: "」";
 margin-left: 4px;
 color: var(--clay);
 opacity: 0.5;
}

.auth-letter-from {
 font-family: var(--font-kai);
 font-size: 0.85rem;
 color: var(--ink-2);
 letter-spacing: 0.2em;
 text-align: right;
 margin-top: 1rem;
}
.auth-letter-from strong {
 font-weight: 400;
 color: var(--clay);
}

.auth-letter-stamp {
 position: absolute;
 top: 22px;
 right: 24px;
 font-family: var(--font-serif);
 font-size: 0.7rem;
 letter-spacing: 0.25em;
 color: var(--clay);
 border: 1.5px solid var(--clay);
 padding: 4px 8px;
 transform: rotate(8deg);
 opacity: 0.7;
 line-height: 1.2;
 background: var(--paper-2);
}

.auth-hero {
 text-align: center;
 margin-bottom: 2.4rem;
}
.auth-hero-title {
 font-family: var(--font-serif);
 font-size: 1.6rem;
 font-weight: 500;
 color: var(--ink);
 letter-spacing: 0.2em;
 margin-bottom: 0.6rem;
 line-height: 1.4;
}
.auth-hero-title small {
 display: block;
 font-family: var(--font-sans);
 font-size: 0.65rem;
 letter-spacing: 0.4em;
 color: var(--ink-3);
 font-weight: 400;
 margin-top: 0.6rem;
 text-transform: uppercase;
}
.auth-hero-sub {
 font-family: var(--font-kai);
 font-size: 0.9rem;
 color: var(--ink-2);
 letter-spacing: 0.12em;
 line-height: 1.9;
}
.auth-hero-sub::before,
.auth-hero-sub::after {
 content: "·";
 margin: 0 0.5em;
 color: var(--ink-3);
}

.auth-action {
 text-align: center;
 margin-top: 2rem;
}

.auth-btn {
 display: inline-flex;
 align-items: center;
 gap: 0.6rem;
 background: transparent;
 color: var(--ink);
 font-family: var(--font-serif);
 font-size: 0.95rem;
 letter-spacing: 0.25em;
 border: 1px solid var(--ink);
 padding: 0.75rem 2rem;
 cursor: pointer;
 border-radius: var(--r-sm, 2px);
 transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
 position: relative;
 overflow: hidden;
}
.auth-btn::before {
 content: "";
 position: absolute;
 inset: 0;
 background: var(--ink);
 transform: scaleX(0);
 transform-origin: left center;
 transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
 z-index: 0;
}
.auth-btn span,
.auth-btn svg {
 position: relative;
 z-index: 1;
 transition: color 0.35s;
}
.auth-btn:hover { color: var(--paper); }
.auth-btn:hover::before { transform: scaleX(1); }

.auth-foot {
 text-align: center;
 margin-top: 1.8rem;
 font-family: var(--font-kai);
 font-size: 0.8rem;
 letter-spacing: 0.3em;
 color: var(--ink-3);
}
.auth-foot::before,
.auth-foot::after {
 content: "—";
 margin: 0 0.8em;
 color: var(--ink-4);
}

.compose-box {
 position: relative;
 background: var(--paper-3);
 border: 1px solid var(--line);
 border-radius: var(--r);
 padding: 1.4rem 1.4rem 1.1rem;
 box-shadow: var(--shadow-soft);
 margin-bottom: 2rem;
 transition: box-shadow 0.4s;
}
.compose-box:focus-within {
 box-shadow: var(--shadow);
}
.compose-box::before {
 content: "";
 position: absolute;
 top: 14px;
 left: 14px;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--clay);
 opacity: 0.7;
}

.compose-header {
 display: flex;
 align-items: flex-start;
 gap: 0.75rem;
 margin-bottom: 0.6rem;
}
.compose-avatar {
 width: 36px;
 height: 36px;
 border-radius: 50%;
 background: var(--paper);
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-serif);
 font-size: 0.9rem;
 color: var(--ink-2);
 overflow: hidden;
 flex-shrink: 0;
 border: 1px solid var(--line);
}
.compose-avatar img { width: 100%; height: 100%; object-fit: cover; }

.compose-textarea {
 flex: 1;
 border: none;
 background: transparent;
 color: var(--ink);
 font-family: var(--font-serif);
 font-size: 0.98rem;
 line-height: 1.85;
 resize: none;
 min-height: 70px;
 padding: 0.2rem 0;
 letter-spacing: 0.03em;
}
.compose-textarea:focus { outline: none; }
.compose-textarea::placeholder {
 color: var(--ink-4);
 font-family: var(--font-kai);
 letter-spacing: 0.1em;
 font-size: 0.95rem;
}

.compose-images {
 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem;
 margin: 0.4rem 0 0.6rem;
}

.compose-media-item {
 position: relative;
 width: 76px;
 height: 76px;
 border-radius: var(--r-md);
 overflow: hidden;
 background: var(--paper);
 border: 1px solid var(--line);
 flex-shrink: 0;
 animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.compose-media-item img,
.compose-media-item video {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}
.compose-media-item img.compose-media-previewable {
 cursor: zoom-in;
 transition: transform 0.25s ease, opacity 0.25s ease;
}
.compose-media-item img.compose-media-previewable:hover {
 transform: scale(1.04);
 opacity: 0.92;
}
@keyframes popIn {
 from { transform: scale(0.85); opacity: 0; }
 to { transform: scale(1); opacity: 1; }
}
.compose-media-badge {
 position: absolute;
 top: 3px;
 left: 3px;
 font-family: var(--font-serif);
 font-size: 0.65rem;
 color: #fff;
 background: rgba(0, 0, 0, 0.55);
 padding: 1px 5px;
 border-radius: 2px;
 letter-spacing: 0.05em;
}
.compose-media-remove {
 position: absolute;
 top: 3px;
 right: 3px;
 width: 18px;
 height: 18px;
 border-radius: 50%;
 background: rgba(0, 0, 0, 0.55);
 color: #fff;
 border: none;
 font-size: 0.7rem;
 line-height: 1;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-sans);
 transition: background 0.2s;
}
.compose-media-remove:hover { background: var(--ink-2); }

.compose-actions {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-top: 0.5rem;
 padding-top: 0.6rem;
 border-top: 1px dashed var(--line-soft);
}

.compose-tools {
 display: flex;
 gap: 0.2rem;
 align-items: center;
 flex: 1;
}

.tool-btn {
 display: inline-flex;
 align-items: center;
 gap: 0.3rem;
 background: transparent;
 border: none;
 color: var(--ink-3);
 font-family: var(--font-serif);
 font-size: 0.82rem;
 letter-spacing: 0.05em;
 padding: 0.35rem 0.55rem;
 cursor: pointer;
 border-radius: var(--r-md);
 transition: background 0.25s, color 0.25s;
}
.tool-btn:hover {
 color: var(--ink);
 background: var(--paper);
}
.tool-btn svg { flex-shrink: 0; }

.image-url-input {
 flex: 1;
 max-width: 220px;
 padding: 0.35rem 0.6rem;
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 background: var(--paper-2);
 color: var(--ink);
 font-size: 0.78rem;
 font-family: var(--font-sans);
 margin-left: 0.4rem;
}
.image-url-input:focus { outline: none; border-color: var(--ink-2); }
.image-url-input::placeholder { color: var(--ink-4); }

.post-btn {
 background: var(--ink);
 color: var(--paper);
 border: none;
 font-family: var(--font-serif);
 font-size: 0.88rem;
 letter-spacing: 0.2em;
 padding: 0.45rem 1.2rem;
 cursor: pointer;
 border-radius: var(--r);
 transition: opacity 0.25s, transform 0.25s;
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
}
.post-btn:hover { opacity: 0.85; }
.post-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.cancel-edit-btn {
 background: transparent;
 border: 1px solid var(--line);
 color: var(--ink-2);
 font-family: var(--font-serif);
 font-size: 0.82rem;
 letter-spacing: 0.1em;
 padding: 0.4rem 0.8rem;
 cursor: pointer;
 border-radius: var(--r);
 margin-left: 0.4rem;
 transition: all 0.25s;
}
.cancel-edit-btn:hover { color: var(--ink); border-color: var(--ink-2); }

.upload-progress {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.35rem 0.7rem;
 background: var(--paper-2);
 border: 1px dashed var(--line);
 border-radius: var(--r-md);
 font-size: 0.78rem;
 color: var(--ink-2);
 font-family: var(--font-serif);
 letter-spacing: 0.05em;
}
.upload-progress-spinner {
 width: 12px;
 height: 12px;
 border: 1.5px solid var(--line);
 border-top-color: var(--clay);
 border-radius: 50%;
 animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.posts-list {
 display: flex;
 flex-direction: column;
 gap: 1.4rem;
}

.post-card {
 position: relative;
 background: var(--paper-2);
 border: 1px solid var(--line);
 border-radius: var(--r);
 padding: 1.4rem 1.4rem 1rem;
 box-shadow: var(--shadow-soft);
 transition: box-shadow 0.4s, transform 0.4s;
 animation: postIn 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes postIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
}
.post-card:hover {
 box-shadow: var(--shadow);
}

.post-card:nth-child(even)::after {
 content: "";
 position: absolute;
 top: 18px;
 right: 20px;
 width: 22px;
 height: 22px;
 border: 1px solid var(--clay-soft);
 opacity: 0.3;
 transform: rotate(15deg);
 pointer-events: none;
}

.post-head {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 margin-bottom: 0.7rem;
}

.post-avatar {
 width: 38px;
 height: 38px;
 border-radius: 50%;
 background: var(--paper);
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-serif);
 font-size: 0.95rem;
 color: var(--ink-2);
 overflow: hidden;
 flex-shrink: 0;
 border: 1px solid var(--line);
}
.post-avatar img { width: 100%; height: 100%; object-fit: cover; }

.post-meta { flex: 1; min-width: 0; }
.post-author {
 display: flex;
 align-items: center;
 gap: 0.4rem;
 font-family: var(--font-serif);
 font-size: 0.95rem;
 color: var(--ink);
 letter-spacing: 0.05em;
 line-height: 1.2;
}
.admin-badge {
 font-family: var(--font-serif);
 font-size: 0.6rem;
 color: var(--clay);
 border: 1px solid var(--clay);
 padding: 0 4px;
 letter-spacing: 0.1em;
 line-height: 1.4;
 border-radius: 2px;
}
.post-time {
 font-family: var(--font-sans);
 font-size: 0.7rem;
 color: var(--ink-3);
 margin-top: 0.15rem;
 letter-spacing: 0.05em;
 font-variant-numeric: tabular-nums;
}

.post-edit,
.post-delete {
 background: none;
 border: none;
 color: var(--ink-4);
 cursor: pointer;
 padding: 0.2rem;
 font-size: 0.75rem;
 font-family: var(--font-serif);
 transition: color 0.25s;
}
.post-edit:hover { color: var(--ink-2); }
.post-delete:hover { color: var(--clay); }

.post-content {
 font-family: var(--font-serif);
 font-size: 0.98rem;
 color: var(--ink);
 line-height: 1.95;
 letter-spacing: 0.04em;
 white-space: pre-wrap;
 word-break: break-word;
 margin: 0 0 0.8rem;
 text-align: justify;
}

.post-images {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 0.4rem;
 margin: 0.4rem 0 0.9rem;
}
.post-images.single { grid-template-columns: 1fr; max-width: 380px; }
.post-images.two { grid-template-columns: repeat(2, 1fr); max-width: 500px; }

.post-image {
 width: 100%;
 height: auto;
 object-fit: contain;
 border-radius: var(--r-md);
 background: var(--paper-2);
 cursor: pointer;
 display: block;
 border: 1px solid var(--line-soft);
 transition: filter 0.4s, opacity 0.4s, transform 0.3s;
}
.post-image[data-loading] {
 filter: blur(6px);
 opacity: 0.5;
 min-height: 180px;
}
.post-image.img-failed {
 filter: none;
 opacity: 1;
 min-height: 180px;
 object-fit: contain;
 position: relative;
}
.post-image.img-failed::after {
 content: "图片走丢了";
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-kai);
 font-size: 0.9rem;
 color: var(--ink-3);
 letter-spacing: 0.2em;
 background:
 radial-gradient(circle at center, transparent 32px, var(--clay-soft) 32px, var(--clay-soft) 33px, transparent 33px) center/240px 160px no-repeat,
 var(--paper-2);
 border: 1px dashed var(--line);
 border-radius: var(--r-md);
}
.post-image:hover { transform: scale(1.015); }

.post-image-failed {
 width: 100%;
 min-height: 180px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-kai);
 font-size: 0.9rem;
 color: var(--ink-3);
 letter-spacing: 0.2em;
 background:
 radial-gradient(circle at center, transparent 32px, var(--clay-soft) 32px, var(--clay-soft) 33px, transparent 33px) center/240px 160px no-repeat,
 var(--paper-2);
 border: 1px dashed var(--line);
 border-radius: var(--r-md);
}
.post-image-failed span { opacity: 0.75; }

.post-media-video {
 width: 100%;
 max-height: 380px;
 border-radius: var(--r-md);
 background: #000;
 margin: 0.4rem 0 0.9rem;
 border: 1px solid var(--line-soft);
 display: block;
}

.post-actions {
 position: relative;
 display: flex;
 align-items: center;
 gap: 0.7rem;
 padding-top: 0.85rem;
 border-top: 1px dashed var(--line-soft);
 margin-top: 0.4rem;
}

.post-action {
 position: relative;
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 background: transparent;
 border: 1px solid var(--line);
 color: var(--ink-2);
 font-family: var(--font-serif);
 font-size: 0.82rem;
 letter-spacing: 0.15em;
 cursor: pointer;
 padding: 0.42rem 0.85rem 0.42rem 0.7rem;
 border-radius: 30px;
 transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.2s;
 user-select: none;
 -webkit-tap-highlight-color: transparent;
 overflow: visible;
}
.post-action::before {
 content: "";
 position: absolute;
 inset: 0;
 background: var(--ink);
 border-radius: inherit;
 transform: scaleX(0);
 transform-origin: left center;
 transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
 z-index: 0;
 opacity: 0.06;
}
.post-action > * { position: relative; z-index: 1; }
.post-action:hover {
 color: var(--ink);
 border-color: var(--ink-2);
}
.post-action:active { transform: translateY(1px); }

.post-action .icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 18px;
 height: 18px;
 transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.post-action:hover .icon { transform: scale(1.1); }

.post-action .count {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 22px;
 height: 18px;
 padding: 0 6px;
 font-family: var(--font-sans);
 font-size: 0.7rem;
 font-weight: 600;
 font-variant-numeric: tabular-nums;
 color: var(--ink-2);
 background: var(--paper-3);
 border: 1px solid var(--line);
 border-radius: 3px;
 letter-spacing: 0;
 transition: color 0.3s, background 0.3s, border-color 0.3s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 transform: rotate(-2deg);
}

.post-action.liked {
 color: var(--clay);
 border-color: var(--ink-3);
 background: rgba(108, 120, 108, 0.04);
}
.post-action.liked .count {
 color: var(--ink-2);
 background: rgba(80, 78, 64, 0.08);
 border-color: var(--ink-3);
 transform: rotate(2deg);
}
.post-action.liked .icon {
 animation: likePop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes likePop {
 0% { transform: scale(1); }
 35% { transform: scale(1.45); }
 60% { transform: scale(0.92); }
 100% { transform: scale(1); }
}

.post-action .count.bump { animation: countBump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes countBump {
 0% { transform: rotate(-2deg) scale(1); }
 40% { transform: rotate(2deg) scale(1.25); }
 100% { transform: rotate(-2deg) scale(1); }
}

.heart-burst {
 position: absolute;
 left: 0.7rem;
 top: 50%;
 width: 18px;
 height: 18px;
 pointer-events: none;
 z-index: 2;
}
.heart-burst svg {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 opacity: 0;
}
.heart-burst.play svg {
 animation: heartRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.heart-burst.play svg:nth-child(1) { animation-delay: 0s; }
.heart-burst.play svg:nth-child(2) { animation-delay: 0.08s; }
@keyframes heartRise {
 0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
 20% { transform: translate(-2px, -8px) scale(0.9); opacity: 0.9; }
 100% { transform: translate(6px, -42px) scale(0.4); opacity: 0; }
}

.post-action[data-action="comment"] .icon { transform: translateY(-1px); }
.post-action[data-action="comment"]:hover .icon { transform: scale(1.1) translateY(-1px); }

.post-actions-right {
 margin-left: auto;
 display: inline-flex;
 gap: 0.4rem;
}
.post-action-mini {
 width: 30px;
 height: 30px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: transparent;
 border: 1px solid var(--line);
 color: var(--ink-3);
 border-radius: 50%;
 cursor: pointer;
 transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.2s;
}
.post-action-mini:hover { color: var(--ink); border-color: var(--ink-2); }
.post-action-mini:active { transform: scale(0.92); }

.post-comments {
 display: grid;
 grid-template-rows: 0fr;
 opacity: 0;
 margin-top: 0;
 transition: grid-template-rows 0.34s cubic-bezier(0.22, 1, 0.36, 1),
 opacity 0.28s ease,
 margin-top 0.34s cubic-bezier(0.22, 1, 0.36, 1);
 pointer-events: none;
}
.post-comments > .post-comments-inner {
 min-height: 0;
 overflow: hidden;
}
.post-comments.expanded {
 grid-template-rows: 1fr;
 opacity: 1;
 margin-top: 0.85rem;
 pointer-events: auto;
}

.post-comments-inner {
 background: var(--paper-3);
 border: 1px solid var(--line);
 border-radius: 8px;
 padding: 0.55rem 0.85rem 0.5rem;
 position: relative;
 box-shadow: var(--shadow-soft);
}

.post-comments-inner::before {
 content: "";
 position: absolute;
 top: -3px;
 left: 14px;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--clay-soft);
 border: 1px solid var(--clay);
 box-shadow: 0 0 0 2px var(--paper-3);
}

.post-comments-list {
 display: flex;
 flex-direction: column;
 gap: 0.55rem;
 max-height: 360px;
 overflow-y: auto;
 padding-right: 2px;
 scrollbar-width: thin;
 scrollbar-color: var(--line) transparent;
}
.post-comments-list::-webkit-scrollbar { width: 4px; }
.post-comments-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.post-comments-empty,
.post-comments-loading {
 position: relative;
 text-align: center;
 font-family: var(--font-kai);
 font-size: 0.88rem;
 color: var(--ink-4);
 letter-spacing: 0.18em;
 padding: 1.1rem 0.4rem 1.2rem;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0.7rem;
}

.post-comments-empty::before,
.post-comments-empty::after {
 content: "";
 flex: 0 0 18px;
 height: 1px;
 background: linear-gradient(90deg, transparent 0%, var(--line) 50%, transparent 100%);
 opacity: 0.6;
}
.post-comments-loading { display: flex; justify-content: center; }
.post-comments-loading .spinner {
 width: 16px; height: 16px;
 border: 1.5px solid var(--line);
 border-top-color: var(--clay);
 border-radius: 50%;
 animation: pcSpin 0.8s linear infinite;
}
@keyframes pcSpin { to { transform: rotate(360deg); } }

.pc-item {
 position: relative;
 display: flex;
 gap: 0.55rem;
 align-items: flex-start;
 padding: 0.4rem 0.3rem;
 border-radius: 4px;
 transition: background 0.25s, opacity 0.24s, transform 0.24s;
}
.pc-item:hover { background: rgba(108, 120, 108, 0.05); }
.pc-item.removing {
 opacity: 0;
 transform: translateX(-8px);
}

.pc-item-new {
 animation: pcItemAppear 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pcItemAppear {
 from { opacity: 0; transform: translateY(-6px); }
 to { opacity: 1; transform: translateY(0); }
}

.pc-item-reply {
 margin-left: 1.4rem;
 padding-left: 0.7rem;
 position: relative;
}
.pc-item-reply::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0.5rem;
 bottom: 0.5rem;
 width: 2px;
 background: var(--line-soft);
 border-radius: 1px;
}
.pc-item-reply .pc-avatar {
 width: 22px;
 height: 22px;
 font-size: 0.68rem;
}

.pc-avatar {
 width: 26px;
 height: 26px;
 border-radius: 50%;
 background: var(--paper);
 border: 1px solid var(--line);
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-serif);
 font-size: 0.72rem;
 color: var(--ink-2);
 flex-shrink: 0;
 overflow: hidden;
}
.pc-avatar img { width: 100%; height: 100%; object-fit: cover; }

.pc-body {
 flex: 1;
 min-width: 0;
 line-height: 1.55;
 font-family: var(--font-serif);
 padding-right: 0.3rem;
}
.pc-name {
 display: inline;
 font-size: 0.82rem;
 color: var(--clay);
 letter-spacing: 0.02em;
 font-weight: 500;
}

.pc-reply-mark {
 display: inline;
 font-size: 0.76rem;
 color: var(--ink-4);
 margin-left: 0.2rem;
 letter-spacing: 0.04em;
}
.pc-reply-to {
 display: inline;
 font-size: 0.78rem;
 color: var(--clay-soft);
 margin: 0 0.1rem;
 font-weight: 500;
}
.pc-colon {
 display: inline;
 color: var(--ink-3);
}
.pc-text {
 display: inline;
 font-size: 0.88rem;
 color: var(--ink);
 letter-spacing: 0.03em;
 word-break: break-word;
 white-space: pre-wrap;
}

.pc-meta {
 display: flex;
 align-items: center;
 gap: 0.7rem;
 margin-top: 0.2rem;
 font-family: var(--font-sans);
}
.pc-time {
 font-size: 0.7rem;
 color: var(--ink-4);
 letter-spacing: 0.05em;
}
.pc-reply-btn {
 background: transparent;
 border: none;
 padding: 0;
 font-size: 0.72rem;
 color: var(--ink-4);
 cursor: pointer;
 letter-spacing: 0.05em;
 transition: color 0.2s;
 font-family: var(--font-sans);
}
.pc-reply-btn:hover { color: var(--clay); }

.pc-delete {
 background: transparent;
 border: none;
 color: var(--ink-4);
 cursor: pointer;
 opacity: 0;
 transition: opacity 0.2s, color 0.2s, transform 0.2s;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 padding: 0;
 width: 14px;
 height: 14px;
}
.pc-item:hover .pc-delete { opacity: 0.7; }
.pc-delete:hover { color: var(--clay); opacity: 1; transform: scale(1.15); }

.pc-reply-hint {
 display: none;
 align-items: center;
 justify-content: space-between;
 gap: 0.5rem;
 margin-top: 0.45rem;
 padding: 0.3rem 0.7rem;
 background: var(--paper-3);
 border-left: 2px solid var(--ink-3);
 border-radius: 3px;
 font-size: 0.76rem;
 color: var(--ink-3);
 font-family: var(--font-sans);
 animation: pcHintSlide 0.25s ease;
}
.pc-reply-hint.active { display: flex; }
@keyframes pcHintSlide {
 from { opacity: 0; transform: translateY(-4px); }
 to { opacity: 1; transform: translateY(0); }
}
.pc-reply-hint-text {
 flex: 1;
 letter-spacing: 0.03em;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.pc-reply-hint-cancel {
 background: transparent;
 border: none;
 color: var(--ink-4);
 font-size: 0.72rem;
 cursor: pointer;
 padding: 0.1rem 0.3rem;
 border-radius: 3px;
 transition: color 0.2s, background 0.2s;
}
.pc-reply-hint-cancel:hover { color: var(--clay); background: var(--paper); }

.post-comments-text.pc-input-pulse {
 animation: pcPulse 0.6s ease;
}
@keyframes pcPulse {
 0%, 100% { box-shadow: 0 0 0 0 rgba(108, 120, 108, 0); }
 50% { box-shadow: 0 0 0 4px rgba(108, 120, 108, 0.14); }
}

.post-comments-input {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 margin-top: 0.55rem;
 padding-top: 0.55rem;
 border-top: 1px dashed var(--line-soft);
}
.post-comments-avatar {
 width: 28px;
 height: 28px;
 border-radius: 50%;
 background: var(--paper-2);
 border: 1px solid var(--line);
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-kai);
 font-size: 0.78rem;
 color: var(--ink-2);
 flex-shrink: 0;
 overflow: hidden;
 box-shadow: inset 0 0 0 1px var(--paper-3);
}
.post-comments-avatar img { width: 100%; height: 100%; object-fit: cover; }

.post-comments-text {
 flex: 1;
 min-width: 0;
 position: relative;
 background: var(--paper-2);
 border: 1px solid var(--line);
 border-radius: 20px;
 padding: 0.4rem 0.9rem 0.4rem 1.65rem;
 font-family: var(--font-serif);
 font-size: 0.86rem;
 color: var(--ink);
 letter-spacing: 0.04em;
 outline: none;
 transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

.post-comments-text::before {
 content: "";
 position: absolute;
 left: 0.65rem;
 top: 50%;
 width: 12px;
 height: 1px;
 background: var(--ink-4);
 transform: translateY(-50%);
 opacity: 0.55;
 transition: width 0.3s, opacity 0.3s, background 0.3s;
}
.post-comments-text:hover { border-color: var(--ink-3); }
.post-comments-text:hover::before { width: 18px; opacity: 0.85; }
.post-comments-text::placeholder { color: var(--ink-4); }
.post-comments-text:focus {
 border-color: var(--ink-3);
 background: var(--paper-3);
 box-shadow: 0 0 0 2px rgba(108, 120, 108, 0.12);
}
.post-comments-text:focus::before {
 width: 22px;
 background: var(--ink-3);
 opacity: 1;
}

.post-comments-send {
 position: relative;
 width: 30px;
 height: 30px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: var(--clay);
 color: var(--paper);
 border: none;
 border-radius: 50%;
 cursor: pointer;
 flex-shrink: 0;
 transition: background 0.3s, transform 0.25s, box-shadow 0.3s;
 padding: 0;
 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18),
 0 1px 3px rgba(80, 78, 64, 0.2);
 overflow: hidden;
}
.post-comments-send svg {
 transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.post-comments-send:hover {
 background: var(--clay-soft);
 transform: scale(1.06);
 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28),
 0 3px 10px rgba(80, 78, 64, 0.25);
}

.post-comments-send:hover svg {
 transform: translate(1px, -1px) rotate(-12deg);
}
.post-comments-send:active { transform: scale(0.94); }
.post-comments-send:active svg { transform: translate(2px, 1px) rotate(8deg); }
.post-comments-send:disabled {
 opacity: 0.45;
 cursor: not-allowed;
 transform: none;
 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.post-action[aria-expanded="true"] {
 color: var(--ink-2);
 border-color: var(--ink-3);
 background: rgba(108, 120, 108, 0.08);
}

[data-theme="dark"] .post-comments-inner,
.dark-mode .post-comments-inner {
 background: rgba(255, 255, 255, 0.03);
 border-color: var(--line);
}
[data-theme="dark"] .post-comments-inner::before,
.dark-mode .post-comments-inner::before {
 box-shadow: 0 0 0 2px rgba(28, 26, 24, 0.6);
}
[data-theme="dark"] .post-comments-text,
.dark-mode .post-comments-text {
 background: rgba(255, 255, 255, 0.04);
 color: var(--paper-2);
 border-color: var(--line);
}
[data-theme="dark"] .post-comments-text:focus,
.dark-mode .post-comments-text:focus {
 background: rgba(255, 255, 255, 0.07);
 border-color: var(--ink-3);
 box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .pc-name,
.dark-mode .pc-name { color: var(--clay-soft); }
[data-theme="dark"] .pc-text,
.dark-mode .pc-text { color: var(--paper-2); }
[data-theme="dark"] .pc-avatar,
[data-theme="dark"] .post-comments-avatar,
.dark-mode .pc-avatar,
.dark-mode .post-comments-avatar {
 background: rgba(255, 255, 255, 0.05);
 color: var(--paper-2);
}
[data-theme="dark"] .pc-item:hover,
.dark-mode .pc-item:hover { background: rgba(108, 120, 108, 0.08); }

.post-card.is-editing {
 border-color: var(--ink-2);
 box-shadow: 0 0 0 1px var(--ink-3), 0 6px 24px -10px rgba(80, 78, 64, 0.18);
 transition: box-shadow 0.3s, border-color 0.3s;
}

.inline-edit {
 margin: 0.3rem 0 0.4rem;
 padding: 0;
 background: var(--paper);
 border: 1px solid var(--ink-3);
 border-radius: 10px;
 position: relative;
 overflow: hidden;
 animation: inlineEditAppear 0.32s cubic-bezier(0.22, 1, 0.36, 1);
 box-shadow: 0 4px 18px -8px rgba(80, 78, 64, 0.18);
}
.inline-edit.is-leaving {
 animation: inlineEditLeave 0.22s ease forwards;
}
@keyframes inlineEditAppear {
 from { opacity: 0; transform: translateY(-6px) scale(0.985); }
 to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes inlineEditLeave {
 from { opacity: 1; transform: translateY(0); max-height: 600px; }
 to { opacity: 0; transform: translateY(-4px); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; }
}

.inline-edit-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 0.6rem;
 padding: 0.55rem 0.9rem;
 background: linear-gradient(180deg, var(--paper-2, rgba(108, 120, 108, 0.06)) 0%, transparent 100%);
 border-bottom: 1px dashed var(--line);
}
.inline-edit-header-left {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 font-family: var(--font-serif);
}
.inline-edit-pulse {
 display: inline-block;
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--ink-2);
 box-shadow: 0 0 0 0 rgba(108, 120, 108, 0.55);
 animation: inlineEditPulse 1.8s ease-in-out infinite;
}
@keyframes inlineEditPulse {
 0%, 100% { box-shadow: 0 0 0 0 rgba(108, 120, 108, 0.45); }
 50% { box-shadow: 0 0 0 5px rgba(108, 120, 108, 0); }
}
.inline-edit-title {
 font-size: 0.84rem;
 color: var(--ink-2);
 letter-spacing: 0.18em;
 font-weight: 500;
}
.inline-edit-header-right {
 display: flex;
 align-items: center;
 gap: 0.45rem;
}
.inline-edit-counter {
 font-size: 0.7rem;
 color: var(--ink-4);
 letter-spacing: 0.08em;
 font-family: var(--font-sans);
 font-variant-numeric: tabular-nums;
 padding: 0.1rem 0.45rem;
 background: var(--paper-2, rgba(0, 0, 0, 0.025));
 border-radius: 8px;
 transition: color 0.2s, background 0.2s;
}
.inline-edit-counter.is-warning {
 color: var(--ink-2);
 background: rgba(80, 78, 64, 0.08);
}
.inline-edit-restore {
 background: transparent;
 border: 1px solid var(--ink-3);
 color: var(--ink-2);
 font-size: 0.72rem;
 font-family: var(--font-sans);
 padding: 0.1rem 0.55rem;
 border-radius: 8px;
 cursor: pointer;
 letter-spacing: 0.06em;
 transition: background 0.2s, color 0.2s, transform 0.2s;
}
.inline-edit-restore:hover {
 background: var(--ink-2);
 color: var(--paper);
}
.inline-edit-restore:active { transform: scale(0.96); }

.inline-edit-close {
 background: transparent;
 border: none;
 color: var(--ink-4);
 cursor: pointer;
 width: 22px;
 height: 22px;
 border-radius: 50%;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 0;
 transition: color 0.2s, background 0.2s;
}
.inline-edit-close:hover {
 color: var(--ink-2);
 background: rgba(80, 78, 64, 0.06);
}

.inline-edit-text {
 display: block;
 width: 100%;
 border: none;
 background: transparent;
 color: var(--ink);
 font-family: var(--font-serif);
 font-size: 0.96rem;
 line-height: 1.95;
 resize: vertical;
 min-height: 80px;
 max-height: 320px;
 padding: 0.7rem 0.9rem 0.5rem;
 letter-spacing: 0.03em;
 outline: none;
 transition: background 0.25s;
}
.inline-edit-text::placeholder {
 color: var(--ink-4);
 font-family: var(--font-kai);
 letter-spacing: 0.1em;
}
.inline-edit-text:focus { background: rgba(80, 78, 64, 0.025); }

.inline-edit-media {
 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem;
 padding: 0.4rem 0.9rem 0.6rem;
 min-height: 0;
}
.inline-edit-media:empty { display: none; }
.inline-edit-media-item {
 position: relative;
 width: 64px;
 height: 64px;
 border-radius: 6px;
 overflow: hidden;
 border: 1px solid var(--line);
 background: var(--paper-2, rgba(0, 0, 0, 0.03));
 animation: mediaItemAppear 0.3s ease;
}
@keyframes mediaItemAppear {
 from { opacity: 0; transform: scale(0.85); }
 to { opacity: 1; transform: scale(1); }
}
.inline-edit-media-item img,
.inline-edit-media-item video {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.inline-edit-media-item img.inline-edit-media-previewable {
 cursor: zoom-in;
 transition: transform 0.25s ease, opacity 0.25s ease;
}
.inline-edit-media-item img.inline-edit-media-previewable:hover {
 transform: scale(1.04);
 opacity: 0.92;
}
.inline-edit-media-badge {
 position: absolute;
 bottom: 2px;
 left: 2px;
 background: rgba(0, 0, 0, 0.6);
 color: #fff;
 font-size: 0.6rem;
 padding: 0.05rem 0.3rem;
 border-radius: 3px;
 letter-spacing: 0.05em;
}
.inline-edit-media-remove {
 position: absolute;
 top: 2px;
 right: 2px;
 width: 16px;
 height: 16px;
 background: rgba(0, 0, 0, 0.6);
 color: #fff;
 border: none;
 border-radius: 50%;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 0;
 transition: background 0.2s, transform 0.2s;
}
.inline-edit-media-remove:hover { background: var(--ink-2); transform: scale(1.12); }

.inline-edit-progress {
 display: flex;
 align-items: center;
 gap: 0.4rem;
 padding: 0.2rem 0.4rem;
 font-size: 0.78rem;
 color: var(--ink-3);
 font-family: var(--font-sans);
}
.inline-edit-progress .spinner {
 width: 12px;
 height: 12px;
 border-width: 1.5px;
}

.inline-edit-toolbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 0.6rem;
 padding: 0.5rem 0.9rem;
 border-top: 1px dashed var(--line);
 background: var(--paper-2, rgba(0, 0, 0, 0.015));
}
.inline-edit-tools {
 display: flex;
 align-items: center;
 gap: 0.3rem;
 flex-wrap: wrap;
}
.inline-edit-tool {
 display: inline-flex;
 align-items: center;
 gap: 0.3rem;
 background: transparent;
 border: 1px solid var(--line);
 color: var(--ink-3);
 font-size: 0.78rem;
 font-family: var(--font-sans);
 padding: 0.25rem 0.6rem;
 border-radius: 14px;
 cursor: pointer;
 letter-spacing: 0.05em;
 transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.15s;
}
.inline-edit-tool svg { opacity: 0.75; }
.inline-edit-tool:hover {
 color: var(--ink);
 border-color: var(--ink-3);
 background: rgba(108, 120, 108, 0.04);
}
.inline-edit-tool:active { transform: scale(0.97); }
.inline-edit-url {
 margin-left: 0.3rem;
 border: 1px solid var(--ink-3);
 background: var(--paper);
 color: var(--ink);
 font-size: 0.78rem;
 padding: 0.25rem 0.55rem;
 border-radius: 6px;
 width: 180px;
 font-family: var(--font-sans);
 outline: none;
 transition: border-color 0.2s, box-shadow 0.2s;
}
.inline-edit-url:focus {
 border-color: var(--ink-2);
 box-shadow: 0 0 0 2px rgba(108, 120, 108, 0.1);
}

.inline-edit-actions {
 display: flex;
 align-items: center;
 gap: 0.4rem;
}
.inline-edit-cancel {
 background: transparent;
 color: var(--ink-3);
 border: 1px solid var(--line);
 padding: 0.32rem 0.95rem;
 font-size: 0.82rem;
 font-family: var(--font-sans);
 letter-spacing: 0.08em;
 cursor: pointer;
 border-radius: 16px;
 transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.inline-edit-cancel:hover {
 color: var(--ink);
 border-color: var(--ink-3);
 background: var(--paper-2, rgba(0, 0, 0, 0.02));
}

.inline-edit-save {
 background: var(--ink-2);
 color: var(--paper);
 border: none;
 padding: 0.32rem 1.25rem;
 font-size: 0.82rem;
 font-family: var(--font-sans);
 letter-spacing: 0.12em;
 cursor: pointer;
 border-radius: 16px;
 box-shadow: 0 2px 6px -1px rgba(80, 78, 64, 0.25);
 transition: transform 0.18s, box-shadow 0.18s, opacity 0.2s;
}
.inline-edit-save:hover {
 transform: translateY(-1px);
 box-shadow: 0 4px 10px -2px rgba(80, 78, 64, 0.35);
}
.inline-edit-save:active { transform: scale(0.96); }
.inline-edit-save:disabled {
 opacity: 0.55;
 cursor: not-allowed;
 transform: none;
 box-shadow: none;
}

.inline-edit-footnote {
 padding: 0.35rem 0.9rem 0.5rem;
 background: var(--paper-2, rgba(0, 0, 0, 0.015));
 border-top: 1px dashed var(--line-soft);
 text-align: right;
}
.inline-edit-hint {
 font-size: 0.68rem;
 color: var(--ink-4);
 letter-spacing: 0.05em;
 font-family: var(--font-sans);
}
.inline-edit-hint kbd {
 display: inline-block;
 padding: 0.05rem 0.32rem;
 font-size: 0.66rem;
 font-family: var(--font-sans);
 color: var(--ink-3);
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: 3px;
 margin: 0 0.1rem;
 letter-spacing: 0.05em;
}

[data-theme="dark"] .inline-edit,
.dark-mode .inline-edit {
 background: rgba(28, 26, 24, 0.65);
 border-color: var(--ink-3);
 box-shadow: 0 4px 20px -8px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .inline-edit-text,
.dark-mode .inline-edit-text { color: var(--paper-2); }
[data-theme="dark"] .inline-edit-text:focus,
.dark-mode .inline-edit-text:focus { background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .inline-edit-toolbar,
.dark-mode .inline-edit-toolbar { background: rgba(255, 255, 255, 0.02); }
[data-theme="dark"] .inline-edit-footnote,
.dark-mode .inline-edit-footnote { background: rgba(255, 255, 255, 0.02); }
[data-theme="dark"] .inline-edit-counter,
.dark-mode .inline-edit-counter { background: rgba(255, 255, 255, 0.05); }
[data-theme="dark"] .post-card.is-editing,
.dark-mode .post-card.is-editing {
 border-color: var(--ink-2);
 box-shadow: 0 0 0 1px var(--ink-3), 0 8px 28px -10px rgba(0, 0, 0, 0.4);
}

.loading-state,
.empty-state {
 text-align: center;
 padding: 3.5rem 1rem;
 color: var(--ink-3);
 font-family: var(--font-serif);
}
.empty-state {
 border: 1px dashed var(--line);
 background: var(--paper-2);
 border-radius: var(--r);
}
.empty-state-glyph {
 font-family: var(--font-kai);
 font-size: 1.8rem;
 color: var(--ink-3);
 letter-spacing: 0.4em;
 margin-bottom: 0.6rem;
 opacity: 0.6;
}
.empty-state-text {
 font-size: 0.95rem;
 letter-spacing: 0.15em;
 color: var(--ink-2);
 margin-bottom: 0.3rem;
}
.empty-state-desc {
 font-family: var(--font-kai);
 font-size: 0.85rem;
 color: var(--ink-3);
 letter-spacing: 0.1em;
}

.spinner {
 width: 26px;
 height: 26px;
 border: 1.5px solid var(--line);
 border-top-color: var(--clay);
 border-radius: 50%;
 margin: 0 auto 0.7rem;
 animation: spin 0.9s linear infinite;
}

.load-more {
 text-align: center;
 padding: 1.4rem 0 0.4rem;
}
.load-more-btn {
 background: transparent;
 color: var(--ink-2);
 font-family: var(--font-serif);
 font-size: 0.85rem;
 letter-spacing: 0.2em;
 border: 1px solid var(--line);
 padding: 0.5rem 1.4rem;
 cursor: pointer;
 border-radius: var(--r);
 transition: all 0.3s;
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
}
.load-more-btn:hover {
 color: var(--ink);
 border-color: var(--ink-2);
 background: var(--paper-2);
}

.overlay {
 position: fixed;
 inset: 0;
 z-index: 200;
 background: rgba(45, 41, 36, 0.42);
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
 display: flex;
 align-items: flex-end;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s;
}
.overlay.open { opacity: 1; }

.sheet {
 background: var(--paper-2);
 width: 100%;
 max-width: 600px;
 max-height: 82vh;
 border-radius: var(--r-lg) var(--r-lg) 0 0;
 display: flex;
 flex-direction: column;
 transform: translateY(100%);
 transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
 border: 1px solid var(--line);
 box-shadow: 0 -8px 32px rgba(60, 50, 35, 0.18);
}
.overlay.open .sheet { transform: translateY(0); }

.sheet-head {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 1.05rem 1.3rem 0.9rem;
 position: relative;
 border-bottom: 1px solid var(--line-soft);
}
.sheet-head::after {
 content: "";
 position: absolute;
 bottom: -1px;
 left: 50%;
 transform: translateX(-50%);
 width: 32px;
 height: 1.5px;
 background: var(--clay);
 border-radius: 1px;
 opacity: 0.6;
}
.sheet-title {
 font-family: var(--font-serif);
 font-size: 1rem;
 font-weight: 500;
 color: var(--ink);
 letter-spacing: 0.2em;
}
.sheet-close {
 background: none;
 border: none;
 color: var(--ink-3);
 cursor: pointer;
 padding: 0.3rem;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: color 0.2s, background 0.2s;
}
.sheet-close:hover { color: var(--ink); background: var(--paper); }

.sheet-body {
 flex: 1;
 overflow-y: auto;
 padding: 1.1rem 1.3rem;
 -webkit-overflow-scrolling: touch;
}
.sheet-foot {
 display: flex;
 gap: 0.5rem;
 padding: 0.85rem 1.3rem;
 border-top: 1px solid var(--line-soft);
 background: var(--paper-2);
}
.sheet-input {
 flex: 1;
 padding: 0.55rem 0.85rem;
 border: 1px solid var(--line);
 border-radius: var(--r);
 background: var(--paper-3);
 color: var(--ink);
 font-size: 0.9rem;
 font-family: var(--font-serif);
 letter-spacing: 0.04em;
}
.sheet-input:focus { outline: none; border-color: var(--ink-2); }
.sheet-input::placeholder { color: var(--ink-4); }

.profile-hero {
 display: flex;
 align-items: center;
 gap: 1.1rem;
 padding: 1.3rem 1.4rem;
 background: var(--paper-3);
 border-bottom: 1px solid var(--line-soft);
}
.profile-avatar-wrap {
 position: relative;
 width: 64px;
 height: 64px;
 flex-shrink: 0;
}
.profile-avatar-wrap img {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 object-fit: cover;
 border: 1px solid var(--line);
}
.profile-avatar-placeholder {
 position: absolute;
 inset: 0;
 border-radius: 50%;
 background: var(--paper);
 border: 1px solid var(--line);
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-serif);
 font-size: 1.5rem;
 color: var(--ink-2);
}
.profile-avatar-edit {
 position: absolute;
 bottom: -2px;
 right: -2px;
 width: 22px;
 height: 22px;
 border-radius: 50%;
 background: var(--ink);
 color: var(--paper);
 border: 2px solid var(--paper-3);
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
}
.profile-avatar-edit:hover { opacity: 0.85; }
.profile-hero-info { flex: 1; min-width: 0; }
.profile-hero-name {
 font-family: var(--font-serif);
 font-size: 1.05rem;
 color: var(--ink);
 letter-spacing: 0.08em;
 margin-bottom: 0.15rem;
}
.profile-hero-email {
 font-family: var(--font-sans);
 font-size: 0.75rem;
 color: var(--ink-3);
 word-break: break-all;
 letter-spacing: 0.04em;
}
.profile-hero-notify {
 font-family: var(--font-kai);
 font-size: 0.75rem;
 color: var(--ink-3);
 margin-top: 0.25rem;
 letter-spacing: 0.1em;
}

.profile-tabs {
 display: flex;
 position: relative;
 border-bottom: 1px solid var(--line-soft);
 background: var(--paper-2);
}
.profile-tab {
 flex: 1;
 padding: 0.85rem 0.5rem;
 border: none;
 background: transparent;
 color: var(--ink-3);
 font-family: var(--font-serif);
 font-size: 0.88rem;
 letter-spacing: 0.15em;
 cursor: pointer;
 transition: color 0.25s;
 position: relative;
 z-index: 1;
}
.profile-tab:hover { color: var(--ink-2); }
.profile-tab.active { color: var(--ink); }
.profile-tab-indicator {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 25%;
 height: 1.5px;
 background: var(--clay);
 transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.profile-tab-indicator.tab-1 { transform: translateX(100%); }
.profile-tab-indicator.tab-2 { transform: translateX(200%); }
.profile-tab-indicator.tab-3 { transform: translateX(300%); }

.form-field { margin-bottom: 1rem; }
.form-label {
 display: block;
 font-family: var(--font-serif);
 font-size: 0.78rem;
 color: var(--ink-2);
 margin-bottom: 0.4rem;
 letter-spacing: 0.15em;
}
.input-wrap {
 position: relative;
 display: flex;
 align-items: center;
}
.input-icon {
 position: absolute;
 left: 0.85rem;
 color: var(--ink-3);
 pointer-events: none;
 flex-shrink: 0;
 transition: color 0.25s;
}
.input-wrap:focus-within .input-icon { color: var(--ink-2); }

.form-input,
.form-textarea {
 width: 100%;
 padding: 0.7rem 0.9rem 0.7rem 2.3rem;
 border: 1px solid var(--line);
 border-radius: var(--r);
 background: var(--paper-3);
 color: var(--ink);
 font-size: 0.92rem;
 font-family: var(--font-serif);
 letter-spacing: 0.04em;
 transition: border-color 0.25s, background 0.25s;
}
.form-textarea {
 padding: 0.7rem 0.9rem;
 resize: vertical;
 min-height: 76px;
 line-height: 1.75;
}
.form-input:focus,
.form-textarea:focus {
 outline: none;
 border-color: var(--ink-2);
 background: var(--paper-2);
}
.form-input:disabled { background: var(--paper); color: var(--ink-3); cursor: not-allowed; }
.form-input::placeholder,
.form-textarea::placeholder { color: var(--ink-4); }

.form-row { display: flex; gap: 0.5rem; align-items: stretch; }
.form-row .form-input { flex: 1; }
.send-code-btn {
 white-space: nowrap;
 min-width: 100px;
 padding: 0 0.9rem;
 background: transparent;
 border: 1px solid var(--line);
 color: var(--ink-2);
 font-family: var(--font-serif);
 font-size: 0.82rem;
 letter-spacing: 0.1em;
 cursor: pointer;
 border-radius: var(--r);
 transition: all 0.25s;
}
.send-code-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-2); }
.send-code-btn:disabled { color: var(--ink-4); cursor: not-allowed; }

.btn-primary {
 width: 100%;
 background: var(--ink);
 color: var(--paper);
 border: none;
 font-family: var(--font-serif);
 font-size: 0.92rem;
 letter-spacing: 0.25em;
 padding: 0.75rem 1rem;
 cursor: pointer;
 border-radius: var(--r);
 transition: opacity 0.25s;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.4rem;
}
.btn-primary:hover { opacity: 0.85; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-ghost {
 background: transparent;
 border: 1px solid var(--line);
 color: var(--ink-2);
 font-family: var(--font-serif);
 font-size: 0.85rem;
 letter-spacing: 0.15em;
 padding: 0.5rem 1rem;
 cursor: pointer;
 border-radius: var(--r);
 transition: all 0.25s;
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-2); background: var(--paper-2); }

.notify-hint {
 font-family: var(--font-kai);
 font-size: 0.85rem;
 color: var(--ink-2);
 margin-bottom: 0.9rem;
 line-height: 1.75;
 letter-spacing: 0.1em;
}
.notify-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 padding: 0.85rem 1rem;
 border: 1px solid var(--line-soft);
 background: var(--paper-3);
 border-radius: var(--r);
 margin-bottom: 0.7rem;
 cursor: pointer;
 transition: border-color 0.25s, background 0.25s;
}
.notify-row:hover {
 border-color: var(--line);
 background: var(--paper-2);
}
.notify-info { flex: 1; min-width: 0; }
.notify-title {
 font-family: var(--font-serif);
 font-size: 0.9rem;
 color: var(--ink);
 letter-spacing: 0.08em;
 margin-bottom: 0.1rem;
}
.notify-desc {
 font-family: var(--font-kai);
 font-size: 0.75rem;
 color: var(--ink-3);
 letter-spacing: 0.08em;
}

.toggle {
 position: relative;
 display: inline-block;
 width: 38px;
 height: 22px;
 flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
 position: absolute;
 inset: 0;
 background: var(--paper-line);
 border: 1px solid var(--line);
 border-radius: 11px;
 cursor: pointer;
 transition: background 0.3s, border-color 0.3s;
}
.toggle-slider::before {
 content: "";
 position: absolute;
 top: 2px;
 left: 2px;
 width: 16px;
 height: 16px;
 background: var(--paper-3);
 border-radius: 50%;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.toggle input:checked + .toggle-slider { background: var(--ink); border-color: var(--ink); }
.toggle input:checked + .toggle-slider::before { transform: translateX(16px); }

.contact-hint {
 font-family: var(--font-kai);
 font-size: 0.88rem;
 color: var(--ink-2);
 margin-bottom: 0.9rem;
 line-height: 1.75;
 letter-spacing: 0.1em;
}
.contact-textarea {
 width: 100%;
 padding: 0.85rem 0.9rem;
 border: 1px solid var(--line);
 border-radius: var(--r);
 background: var(--paper-3);
 color: var(--ink);
 font-size: 0.92rem;
 font-family: var(--font-serif);
 resize: vertical;
 min-height: 130px;
 line-height: 1.85;
 letter-spacing: 0.04em;
}
.contact-textarea:focus { outline: none; border-color: var(--ink-2); }
.contact-textarea::placeholder { color: var(--ink-4); }
.contact-counter {
 text-align: right;
 font-family: var(--font-sans);
 font-size: 0.7rem;
 color: var(--ink-3);
 margin-top: 0.4rem;
 letter-spacing: 0.05em;
}

.lightbox {
 position: fixed;
 inset: 0;
 z-index: 300;
 background: rgba(45, 41, 36, 0.94);
 backdrop-filter: blur(8px);
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 2rem;
 cursor: zoom-out;
 opacity: 0;
 transition: opacity 0.3s;
}
.lightbox.open { opacity: 1; }
.lightbox-img-wrap {
 position: relative;
 display: inline-block;
 max-width: 90%;
 max-height: 85vh;
}
.lightbox-img-wrap img {
 max-width: 100%;
 max-height: 85vh;
 border-radius: var(--r-md);
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 opacity: 0;
 transition: opacity 0.4s;
 display: block;
}
.lightbox-img-wrap img.loaded { opacity: 1; }
.lightbox-loading {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 display: none;
}
.lightbox-loading.show { display: flex; }
.lightbox-loading .spinner {
 width: 32px;
 height: 32px;
 border: 2px solid rgba(255, 255, 255, 0.2);
 border-top-color: #fff;
}
.lightbox-close {
 position: absolute;
 top: 1.4rem;
 right: 1.4rem;
 background: rgba(255, 255, 255, 0.1);
 border: none;
 color: #fff;
 cursor: pointer;
 padding: 0.5rem;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: background 0.2s;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }

.toast-container {
 position: fixed;
 bottom: 2rem;
 left: 50%;
 transform: translateX(-50%);
 z-index: 400;
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
 align-items: center;
 pointer-events: none;
}
.toast {
 background: var(--ink);
 color: var(--paper);
 padding: 0.55rem 1.3rem;
 border-radius: var(--r);
 font-size: 0.85rem;
 font-family: var(--font-serif);
 letter-spacing: 0.1em;
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
 transform: translateY(60px);
 opacity: 0;
 transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s;
 pointer-events: auto;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { background: var(--clay); }

.moments-legal-foot {
 max-width: 680px;
 margin: 3rem auto 0;
 padding: 1.2rem 1rem 1.4rem;
 border-top: 1px dashed var(--line);
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 font-size: 0.78rem;
 color: var(--ink-3);
 font-family: var(--font-serif);
 letter-spacing: 0.1em;
}
.moments-legal-foot a {
 color: var(--ink-2);
 text-decoration: none;
 border-bottom: 1px dashed var(--line);
 padding-bottom: 1px;
 transition: color 0.25s, border-color 0.25s;
}
.moments-legal-foot a:hover { color: var(--clay); border-bottom-color: var(--clay); }
.moments-legal-foot span { color: var(--ink-4); font-size: 0.7rem; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

@media (max-width: 640px) {
 .header-inner { padding: 0.7rem 1rem; }
 .moments-main { padding: 1.4rem 1rem 4rem; }
 .brand-en { display: none; }

 .auth-letter { padding: 2.2rem 1.6rem 1.8rem; }
 .auth-hero-title { font-size: 1.3rem; }
 .auth-letter-quote { font-size: 1rem; }

 .post-card { padding: 1.1rem 1.1rem 0.9rem; }
 .post-content { font-size: 0.95rem; }
 .compose-box { padding: 1.1rem 1.1rem 0.9rem; }
 .compose-actions { flex-wrap: wrap; }
 .compose-tools { flex-wrap: wrap; }

 .post-images { grid-template-columns: repeat(2, 1fr); gap: 0.35rem; }
 .post-images.single { max-width: 100%; }
 .post-images.two { max-width: 100%; }

 .sheet { max-height: 88vh; }
 .profile-hero { padding: 1.1rem 1.2rem; }
 .tool-btn span { display: none; }
}

@media (max-width: 420px) {
 .auth-letter-stamp { top: 14px; right: 14px; font-size: 0.6rem; padding: 2px 5px; }
 .post-head { gap: 0.5rem; }
 .post-avatar { width: 34px; height: 34px; }
 .post-actions { gap: 1rem; }
 .post-action { font-size: 0.78rem; }
}

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