:root {

 --bg: #f6f1e7;
 --bg-elevated: #fffdf7;
 --bg-input: #fffefb;
 --bg-sunken: #f0ebe0;

 --text: #30312d;
 --text-secondary: #697065;
 --text-muted: #9a9d92;

 --brand: #6b9080;
 --brand-hover: #4f7669;
 --brand-light: #a4c3b2;
 --brand-bg: rgba(107, 144, 128, 0.08);
 --brand-border: rgba(107, 144, 128, 0.2);

 --accent: #b78168;
 --accent-light: #d4a78d;
 --accent-bg: rgba(183, 129, 104, 0.08);

 --danger: #c75450;
 --danger-bg: rgba(199, 84, 80, 0.08);
 --success: #6b9080;
 --warning: #c9a961;

 --border: rgba(108, 120, 98, 0.15);
 --border-light: rgba(108, 120, 98, 0.08);
 --shadow-sm: 0 1px 2px rgba(48, 49, 45, 0.04);
 --shadow: 0 1px 3px rgba(48, 49, 45, 0.04), 0 4px 16px rgba(48, 49, 45, 0.06);
 --shadow-lg: 0 4px 24px rgba(48, 49, 45, 0.1);
 --shadow-paper: 0 2px 8px rgba(48, 49, 45, 0.06), 0 8px 32px rgba(48, 49, 45, 0.08);

 --radius: 14px;
 --radius-sm: 10px;
 --radius-xs: 6px;

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

[data-theme="dark"] {
 --bg: #1a1b18;
 --bg-elevated: #252622;
 --bg-input: #2a2b27;
 --bg-sunken: #15161300;

 --text: #e4e2dc;
 --text-secondary: #a8aaa3;
 --text-muted: #6b6e66;

 --brand: #7ba88f;
 --brand-hover: #6b9080;
 --brand-light: #4a6b5c;
 --brand-bg: rgba(123, 168, 143, 0.1);
 --brand-border: rgba(123, 168, 143, 0.25);

 --accent: #c9967a;
 --accent-light: #b78168;
 --accent-bg: rgba(201, 150, 122, 0.1);

 --border: rgba(168, 170, 163, 0.15);
 --border-light: rgba(168, 170, 163, 0.08);
 --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
 --shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.3);
 --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.4);
 --shadow-paper: 0 2px 8px rgba(0, 0, 0, 0.3), 0 8px 32px rgba(0, 0, 0, 0.4);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
 background: var(--bg);
 color: var(--text);
 font-family: var(--font-sans);
 font-size: 15px;
 line-height: 1.75;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 min-height: 100vh;
 overflow-x: hidden;
}

.paper-texture {
 position: fixed;
 inset: 0;
 z-index: -1;
 background:
 radial-gradient(ellipse at 20% 10%, rgba(107, 144, 128, 0.04) 0%, transparent 50%),
 radial-gradient(ellipse at 80% 80%, rgba(183, 129, 104, 0.03) 0%, transparent 50%),
 var(--bg);
 pointer-events: none;
}

.paper-texture::before {
 content: '';
 position: absolute;
 inset: 0;
 background-image:
 repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(48, 49, 45, 0.008) 2px, rgba(48, 49, 45, 0.008) 4px);
 opacity: 0.6;
}

[data-theme="dark"] .paper-texture::before {
 background-image:
 repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.01) 2px, rgba(255, 255, 255, 0.01) 4px);
}

.moments-header {
 position: sticky;
 top: 0;
 z-index: 100;
 background: rgba(255, 253, 247, 0.85);
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--border-light);
}

[data-theme="dark"] .moments-header {
 background: rgba(37, 38, 34, 0.85);
}

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

.back-link {
 display: flex;
 align-items: center;
 gap: 0.35rem;
 color: var(--text-secondary);
 text-decoration: none;
 font-size: 0.85rem;
 font-family: var(--font-serif);
 transition: color 0.25s ease;
 flex-shrink: 0;
}

.back-link:hover { color: var(--brand); }

.moments-brand {
 display: flex;
 align-items: center;
 gap: 0.4rem;
 flex: 1;
 justify-content: center;
}

.brand-leaf {
 font-size: 1.2rem;
 filter: drop-shadow(0 1px 2px rgba(107, 144, 128, 0.2));
}

.moments-title {
 font-family: var(--font-serif);
 font-size: 1.15rem;
 font-weight: 600;
 letter-spacing: 0.08em;
 color: var(--text);
}

.header-actions {
 display: flex;
 gap: 0.4rem;
 align-items: center;
 flex-shrink: 0;
}

.user-name {
 font-size: 0.82rem;
 color: var(--text-secondary);
 margin-right: 0.3rem;
 font-family: var(--font-serif);
}

.btn-primary, .btn-ghost {
 border: none;
 border-radius: var(--radius-sm);
 font-size: 0.88rem;
 font-family: var(--font-sans);
 cursor: pointer;
 transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.35rem;
 white-space: nowrap;
}

.btn-primary {
 background: var(--brand);
 color: #fff;
 padding: 0.6rem 1.4rem;
 box-shadow: 0 2px 8px rgba(107, 144, 128, 0.2);
 font-weight: 500;
}

.btn-primary:hover {
 background: var(--brand-hover);
 transform: translateY(-1px);
 box-shadow: 0 4px 12px rgba(107, 144, 128, 0.3);
}

.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-ghost {
 background: transparent;
 color: var(--brand);
 border: 1px solid var(--border);
 padding: 0.5rem 1rem;
}

.btn-ghost:hover {
 border-color: var(--brand);
 background: var(--brand-bg);
}

.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
.btn-block { width: 100%; }

.moments-main {
 max-width: 640px;
 margin: 0 auto;
 padding: 1.8rem 1.2rem 4rem;
 animation: fadeInUp 0.5s ease;
}

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

.auth-view {
 max-width: 440px;
 margin: 1.5rem auto 3rem;
 animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.auth-hero {
 text-align: center;
 margin-bottom: 2rem;
 position: relative;
}

.auth-hero-mark {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 88px;
 height: 88px;
 border-radius: 50%;
 background: radial-gradient(circle at 30% 30%, rgba(107, 144, 128, 0.12), rgba(183, 129, 104, 0.06));
 border: 1px solid rgba(107, 144, 128, 0.18);
 color: var(--brand);
 margin-bottom: 1.2rem;
 position: relative;
 animation: heroBreath 4s ease-in-out infinite;
}

.auth-hero-mark::before {
 content: '';
 position: absolute;
 inset: -6px;
 border-radius: 50%;
 border: 1px dashed rgba(107, 144, 128, 0.2);
 animation: heroRotate 30s linear infinite;
}

@keyframes heroBreath {
 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(107, 144, 128, 0); }
 50% { transform: scale(1.03); box-shadow: 0 0 24px 4px rgba(107, 144, 128, 0.12); }
}

@keyframes heroRotate {
 to { transform: rotate(360deg); }
}

.auth-hero-title {
 font-family: var(--font-serif);
 font-size: 1.65rem;
 font-weight: 600;
 color: var(--text);
 margin-bottom: 0.6rem;
 letter-spacing: 0.08em;
 position: relative;
 display: inline-block;
}

.auth-hero-title::after {
 content: '';
 position: absolute;
 bottom: -8px;
 left: 50%;
 transform: translateX(-50%);
 width: 32px;
 height: 2px;
 background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.auth-hero-subtitle {
 font-size: 0.86rem;
 color: var(--text-secondary);
 line-height: 1.9;
 font-family: var(--font-serif);
 margin-top: 1rem;
 letter-spacing: 0.04em;
}

.auth-hero-deco {
 display: flex;
 justify-content: center;
 gap: 0.5rem;
 margin-top: 1.2rem;
}

.auth-hero-deco span {
 width: 5px;
 height: 5px;
 border-radius: 50%;
 background: var(--brand);
 opacity: 0.4;
 animation: decoPulse 2s ease-in-out infinite;
}

.auth-hero-deco span:nth-child(2) { animation-delay: 0.3s; }
.auth-hero-deco span:nth-child(3) { animation-delay: 0.6s; }

@keyframes decoPulse {
 0%, 100% { opacity: 0.3; transform: scale(1); }
 50% { opacity: 0.7; transform: scale(1.3); }
}

.auth-card {
 background: var(--bg-elevated);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 box-shadow: var(--shadow-paper);
 overflow: hidden;
 position: relative;
}

.auth-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 50%, var(--brand) 100%);
 opacity: 0.7;
}

.auth-card-stamp {
 position: absolute;
 top: 14px;
 right: 16px;
 font-family: var(--font-hand);
 font-size: 0.72rem;
 color: var(--accent);
 opacity: 0.5;
 border: 1px solid var(--accent);
 padding: 2px 8px;
 border-radius: 4px;
 transform: rotate(8deg);
 letter-spacing: 0.15em;
 pointer-events: none;
 z-index: 2;
}

.auth-tabs {
 display: flex;
 position: relative;
 border-bottom: 1px solid var(--border-light);
 background: var(--bg-sunken);
}

.auth-tab {
 flex: 1;
 padding: 1.05rem 1rem;
 border: none;
 background: transparent;
 color: var(--text-muted);
 font-size: 0.92rem;
 font-family: var(--font-serif);
 cursor: pointer;
 transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
 position: relative;
 z-index: 1;
 letter-spacing: 0.08em;
}

.auth-tab:hover {
 color: var(--text-secondary);
}

.auth-tab.active {
 color: var(--brand);
 font-weight: 600;
 background: var(--bg-elevated);
}

.auth-tab-indicator {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 50%;
 height: 2px;
 background: linear-gradient(90deg, var(--brand), var(--accent));
 transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-tab-indicator.right { transform: translateX(100%); }

.auth-form {
 padding: 1.8rem;
 animation: fadeIn 0.4s ease;
}

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

.auth-footer-note {
 text-align: center;
 margin-top: 1.5rem;
 font-family: var(--font-hand);
 font-size: 0.85rem;
 color: var(--text-muted);
 letter-spacing: 0.2em;
 opacity: 0.7;
}

.form-field {
 margin-bottom: 1.15rem;
}

.form-label {
 display: block;
 font-size: 0.78rem;
 color: var(--text-secondary);
 margin-bottom: 0.45rem;
 font-family: var(--font-serif);
 letter-spacing: 0.06em;
}

.input-wrap {
 position: relative;
 display: flex;
 align-items: center;
}

.input-wrap.flex-1 { flex: 1; }

.input-icon {
 position: absolute;
 left: 0.85rem;
 color: var(--text-muted);
 pointer-events: none;
 transition: color 0.25s ease;
 flex-shrink: 0;
}

.form-input, .form-textarea {
 width: 100%;
 padding: 0.75rem 0.9rem 0.75rem 2.4rem;
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 background: var(--bg-input);
 color: var(--text);
 font-size: 0.92rem;
 font-family: var(--font-sans);
 transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.form-textarea {
 padding: 0.75rem 0.9rem;
 resize: vertical;
 min-height: 80px;
 line-height: 1.7;
}

.input-wrap:focus-within .input-icon {
 color: var(--brand);
}

.form-input:focus, .form-textarea:focus {
 outline: none;
 border-color: var(--brand);
 box-shadow: 0 0 0 3px var(--brand-bg);
 background: var(--bg-elevated);
}

.form-input:disabled {
 background: var(--bg-sunken);
 color: var(--text-muted);
 cursor: not-allowed;
}

.form-input::placeholder {
 color: var(--text-muted);
 opacity: 0.7;
}

.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;
}

.auth-submit {
 width: 100%;
 margin-top: 0.8rem;
 padding: 0.85rem;
 font-size: 0.95rem;
 font-family: var(--font-serif);
 letter-spacing: 0.15em;
 position: relative;
 overflow: hidden;
}

.auth-submit::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
 transition: left 0.6s ease;
}

.auth-submit:hover::before {
 left: 100%;
}

.auth-link-btn {
 display: block;
 width: 100%;
 margin-top: 0.6rem;
 padding: 0.3rem 0;
 font-size: 0.8rem;
 font-family: var(--serif, "Songti SC", "Georgia", serif);
 color: var(--muted, #8b7355);
 background: transparent;
 border: none;
 cursor: pointer;
 transition: color 0.25s ease;
}
.auth-link-btn:hover {
 color: var(--sage, #6b9080);
}

.compose-box {
 background: var(--bg-elevated);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 1.1rem;
 margin-bottom: 1.5rem;
 box-shadow: var(--shadow);
 transition: box-shadow 0.3s ease;
}

.compose-box:focus-within {
 box-shadow: var(--shadow-paper);
 border-color: var(--brand-border);
}

.compose-header {
 display: flex;
 gap: 0.7rem;
 align-items: flex-start;
}

.compose-avatar {
 width: 38px;
 height: 38px;
 border-radius: 50%;
 background: var(--brand-bg);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1rem;
 color: var(--brand);
 overflow: hidden;
 flex-shrink: 0;
 font-family: var(--font-serif);
 font-weight: 600;
}

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

.compose-textarea {
 flex: 1;
 border: none;
 background: transparent;
 color: var(--text);
 font-size: 0.95rem;
 font-family: var(--font-sans);
 resize: none;
 line-height: 1.75;
 padding: 0.3rem 0;
}

.compose-textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); }
.compose-textarea::placeholder { color: var(--text-muted); }

.compose-images {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
 margin: 0.8rem 0 0.5rem 3rem;
}

.compose-image-thumb {
 position: relative;
 width: 64px;
 height: 64px;
 border-radius: var(--radius-sm);
 overflow: hidden;
 box-shadow: var(--shadow-sm);
 animation: scaleIn 0.25s ease;
}

@keyframes scaleIn {
 from { transform: scale(0.8); opacity: 0; }
 to { transform: scale(1); opacity: 1; }
}

.compose-image-thumb img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.compose-image-thumb .remove-img {
 position: absolute;
 top: 3px;
 right: 3px;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background: rgba(0, 0, 0, 0.6);
 color: #fff;
 border: none;
 font-size: 0.7rem;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: background 0.2s;
}

.compose-image-thumb .remove-img:hover { background: var(--danger); }

.compose-actions {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-top: 0.8rem;
 padding-top: 0.8rem;
 border-top: 1px solid var(--border-light);
 margin-left: 3rem;
}

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

.image-url-input {
 flex: 1;
 max-width: 200px;
 padding: 0.35rem 0.6rem;
 border: 1px solid var(--border);
 border-radius: var(--radius-xs);
 background: var(--bg-input);
 color: var(--text);
 font-size: 0.78rem;
 font-family: var(--font-sans);
 transition: border-color 0.2s;
}

.image-url-input:focus { outline: none; border-color: var(--brand); }
.image-url-input::placeholder { color: var(--text-muted); }

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

.post-card {
 background: var(--bg-elevated);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 1.3rem;
 box-shadow: var(--shadow);
 transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 animation: fadeInUp 0.4s ease;
 position: relative;
}

.post-card:hover {
 box-shadow: var(--shadow-paper);
 transform: translateY(-1px);
}

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

.post-avatar {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: var(--brand-bg);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.05rem;
 color: var(--brand);
 overflow: hidden;
 flex-shrink: 0;
 font-family: var(--font-serif);
 font-weight: 600;
 border: 2px solid var(--bg-elevated);
 box-shadow: 0 0 0 1px var(--border);
}

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

.post-author-info {
 flex: 1;
 min-width: 0;
}

.post-author {
 font-size: 0.92rem;
 font-weight: 500;
 color: var(--text);
 font-family: var(--font-serif);
 display: flex;
 align-items: center;
 gap: 0.4rem;
}

.admin-badge {
 font-size: 0.65rem;
 background: var(--accent);
 color: #fff;
 padding: 0.1rem 0.45rem;
 border-radius: var(--radius-xs);
 font-weight: 400;
 letter-spacing: 0.03em;
}

.post-time {
 font-size: 0.75rem;
 color: var(--text-muted);
 margin-top: 0.1rem;
}

.post-delete, .post-edit {
 color: var(--text-muted);
 background: none;
 border: none;
 cursor: pointer;
 padding: 0.3rem;
 font-size: 0.8rem;
 transition: color 0.2s;
 font-family: var(--font-sans);
}

.post-delete:hover { color: var(--danger); }
.post-edit:hover { color: var(--primary); }

.post-content {
 font-size: 0.94rem;
 color: var(--text);
 line-height: 1.8;
 white-space: pre-wrap;
 word-break: break-word;
 margin-bottom: 0.7rem;
 font-family: var(--font-sans);
}

.post-images {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 0.5rem;
 margin-bottom: 0.8rem;
}

.post-images.single { grid-template-columns: 1fr; max-width: 360px; }
.post-images.two { grid-template-columns: repeat(2, 1fr); max-width: 480px; }

.post-image {
 width: 100%;

 height: auto;
 object-fit: contain;
 border-radius: var(--radius-sm);
 background: var(--bg-sunken);
 cursor: pointer;
 display: block;
 transition: filter 0.4s ease, opacity 0.4s ease, transform 0.3s ease;
}

.post-image[data-loading] {
 filter: blur(6px);
 opacity: 0.55;
 min-height: 180px;
}

.post-image.img-failed {
 filter: none;
 opacity: 1;
 min-height: 140px;
 object-fit: contain;
}

.post-image:hover { transform: scale(1.03); }

.post-actions {
 display: flex;
 gap: 1.2rem;
 padding-top: 0.7rem;
 border-top: 1px solid var(--border-light);
}

.post-action {
 display: flex;
 align-items: center;
 gap: 0.4rem;
 color: var(--text-muted);
 font-size: 0.82rem;
 cursor: pointer;
 background: none;
 border: none;
 font-family: var(--font-sans);
 transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
 padding: 0.3rem 0.5rem;
 border-radius: var(--radius-sm);
 letter-spacing: 0.02em;
}

.post-action svg {
 transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.post-action:hover {
 color: var(--brand);
 background: var(--brand-bg);
}

.post-action:hover svg {
 transform: scale(1.15);
}

.post-action.liked {
 color: var(--accent);
}

.post-action.liked svg {
 animation: likePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes likePop {
 0% { transform: scale(1); }
 50% { transform: scale(1.3); }
 100% { transform: scale(1); }
}

.loading-state {
 text-align: center;
 padding: 3rem 0;
 color: var(--text-muted);
}

.spinner {
 width: 32px;
 height: 32px;
 border: 2px solid var(--border);
 border-top-color: var(--brand);
 border-radius: 50%;
 margin: 0 auto 0.8rem;
 animation: spin 0.8s linear infinite;
}

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

.loading-state p {
 font-size: 0.85rem;
 font-family: var(--font-serif);
}

.load-more {
 text-align: center;
 padding: 1.5rem 0;
}

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

.overlay.open { opacity: 1; }

.sheet-panel {
 background: var(--bg-elevated);
 width: 100%;
 max-width: 640px;
 max-height: 80vh;
 border-radius: var(--radius) var(--radius) 0 0;
 display: flex;
 flex-direction: column;
 transform: translateY(100%);
 transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 box-shadow: 0 -8px 32px rgba(48, 49, 45, 0.15);
}

.overlay.open .sheet-panel { transform: translateY(0); }

.sheet-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 1.1rem 1.3rem;
 border-bottom: 1px solid var(--border-light);
 position: relative;
}

.sheet-header::after {
 content: '';
 position: absolute;
 bottom: -1px;
 left: 1.3rem;
 width: 40px;
 height: 2px;
 background: var(--brand);
 border-radius: 1px;
}

.sheet-title {
 font-size: 1rem;
 font-weight: 600;
 font-family: var(--font-serif);
 letter-spacing: 0.03em;
}

.sheet-close {
 background: none;
 border: none;
 cursor: pointer;
 color: var(--text-muted);
 padding: 0.3rem;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sheet-close:hover {
 color: var(--text);
 background: var(--bg-sunken);
}

.sheet-body {
 flex: 1;
 overflow-y: auto;
 padding: 1.2rem 1.3rem;
 -webkit-overflow-scrolling: touch;
}

.sheet-panel-wide {
 max-width: 480px;
}

.profile-hero {
 display: flex;
 align-items: center;
 gap: 1rem;
 padding: 1.2rem 1.3rem;
 border-bottom: 1px solid var(--border-light);
 background: linear-gradient(180deg, var(--bg-sunken), var(--bg-elevated));
}

.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: 2px solid var(--bg-elevated);
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-avatar-placeholder {
 position: absolute;
 inset: 0;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--brand), var(--accent));
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 font-family: var(--font-serif);
 font-size: 1.5rem;
 font-weight: 600;
}

.profile-avatar-wrap img:not([src=""]) ~ .profile-avatar-placeholder {
 display: none;
}

.profile-avatar-edit {
 position: absolute;
 bottom: -2px;
 right: -2px;
 width: 24px;
 height: 24px;
 border-radius: 50%;
 background: var(--brand);
 color: #fff;
 border: 2px solid var(--bg-elevated);
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: transform 0.2s ease, background 0.2s ease;
}

.profile-avatar-edit:hover {
 transform: scale(1.1);
 background: var(--brand-dark);
}

.profile-hero-info {
 flex: 1;
 min-width: 0;
}

.profile-hero-name {
 font-family: var(--font-serif);
 font-size: 1.05rem;
 font-weight: 600;
 color: var(--text);
 margin-bottom: 0.2rem;
}

.profile-hero-email {
 font-size: 0.78rem;
 color: var(--text-muted);
 word-break: break-all;
}

.profile-hero-notify {
 font-size: 0.72rem;
 color: var(--text-muted);
 margin-top: 0.25rem;
 font-family: var(--font-serif);
 letter-spacing: 0.04em;
}

.profile-tabs {
 display: flex;
 position: relative;
 border-bottom: 1px solid var(--border-light);
 background: var(--bg-elevated);
}

.profile-tab {
 flex: 1;
 padding: 0.85rem 0.5rem;
 border: none;
 background: transparent;
 color: var(--text-muted);
 font-size: 0.88rem;
 font-family: var(--font-serif);
 cursor: pointer;
 transition: color 0.25s ease;
 position: relative;
 z-index: 1;
 letter-spacing: 0.06em;
}

.profile-tab:hover { color: var(--text-secondary); }
.profile-tab.active { color: var(--brand); font-weight: 600; }

.profile-tab-indicator {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 25%;
 height: 2px;
 background: linear-gradient(90deg, var(--brand), var(--accent));
 transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 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%); }

.profile-pane {
 animation: fadeIn 0.3s ease;
}

.upload-progress {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.5rem 0.8rem;
 background: var(--brand-bg);
 border-radius: var(--radius-sm);
 font-size: 0.82rem;
 color: var(--brand);
 margin-bottom: 0.5rem;
}

.upload-progress-spinner {
 width: 14px;
 height: 14px;
 border: 2px solid var(--brand-bg);
 border-top-color: var(--brand);
 border-radius: 50%;
 animation: spin 0.8s linear infinite;
}

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

.compose-media-item {
 position: relative;
 width: 80px;
 height: 80px;
 border-radius: var(--radius-sm);
 overflow: hidden;
 flex-shrink: 0;
 background: var(--bg-sunken);
}

.compose-media-item img,
.compose-media-item video {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.compose-media-badge {
 position: absolute;
 top: 2px;
 left: 2px;
 background: rgba(0, 0, 0, 0.6);
 color: #fff;
 font-size: 0.65rem;
 padding: 1px 5px;
 border-radius: 3px;
}

.compose-media-remove {
 position: absolute;
 top: 2px;
 right: 2px;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background: rgba(0, 0, 0, 0.6);
 color: #fff;
 border: none;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 0.7rem;
 line-height: 1;
}

.compose-media-remove:hover { background: rgba(0, 0, 0, 0.8); }

.post-media-video {
 width: 100%;
 max-height: 400px;
 border-radius: var(--radius-sm);
 background: #000;
 margin-top: 0.6rem;
}

.sheet-footer {
 display: flex;
 gap: 0.5rem;
 padding: 0.9rem 1.3rem;
 border-top: 1px solid var(--border-light);
 background: var(--bg-elevated);
}

.sheet-input {
 flex: 1;
 padding: 0.55rem 0.85rem;
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 background: var(--bg-input);
 color: var(--text);
 font-size: 0.9rem;
 font-family: var(--font-sans);
 transition: border-color 0.2s;
}

.sheet-input:focus { outline: none; border-color: var(--brand); }

.comment-item {
 display: flex;
 gap: 0.7rem;
 margin-bottom: 1.1rem;
 animation: fadeInUp 0.3s ease;
}

.comment-avatar {
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background: var(--brand-bg);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 0.82rem;
 color: var(--brand);
 flex-shrink: 0;
 overflow: hidden;
 font-family: var(--font-serif);
 font-weight: 600;
}

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

.comment-body { flex: 1; min-width: 0; }

.comment-author {
 font-size: 0.84rem;
 font-weight: 500;
 color: var(--text);
 font-family: var(--font-serif);
}

.comment-text {
 font-size: 0.88rem;
 color: var(--text-secondary);
 line-height: 1.7;
 margin-top: 0.15rem;
 word-break: break-word;
}

.comment-meta {
 display: flex;
 align-items: center;
 gap: 0.6rem;
 margin-top: 0.25rem;
}

.comment-time {
 font-size: 0.72rem;
 color: var(--text-muted);
}

.comment-delete {
 font-size: 0.72rem;
 color: var(--text-muted);
 background: none;
 border: none;
 cursor: pointer;
 font-family: var(--font-sans);
 transition: color 0.2s;
}

.comment-delete:hover { color: var(--danger); }

.lightbox {
 position: fixed;
 inset: 0;
 z-index: 300;
 background: rgba(48, 49, 45, 0.92);
 backdrop-filter: blur(8px);
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 2rem;
 cursor: zoom-out;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.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(--radius-sm);
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 opacity: 0;
 transition: opacity 0.35s ease;
 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: 36px;
 height: 36px;
 border: 2px solid rgba(255, 255, 255, 0.2);
 border-top-color: #fff;
}

.lightbox-close {
 position: absolute;
 top: 1.5rem;
 right: 1.5rem;
 background: rgba(255, 255, 255, 0.1);
 border: none;
 color: #fff;
 cursor: pointer;
 padding: 0.6rem;
 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(--text);
 color: var(--bg-elevated);
 padding: 0.65rem 1.5rem;
 border-radius: var(--radius-sm);
 font-size: 0.85rem;
 font-family: var(--font-serif);
 box-shadow: var(--shadow-lg);
 transform: translateY(100px);
 opacity: 0;
 transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 pointer-events: auto;
}

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

.toast.error { background: var(--danger); }
.toast.success { background: var(--brand); }

.empty-state {
 text-align: center;
 padding: 3.5rem 1rem;
 color: var(--text-muted);
}

.empty-state-icon {
 font-size: 2.8rem;
 margin-bottom: 0.8rem;
 opacity: 0.7;
}

.empty-state-text {
 font-size: 0.92rem;
 font-family: var(--font-serif);
 letter-spacing: 0.02em;
}

.empty-state-desc {
 font-size: 0.82rem;
 margin-top: 0.3rem;
 color: var(--text-muted);
}

.contact-hint {
 font-size: 0.85rem;
 color: var(--text-secondary);
 font-family: var(--font-serif);
 margin-bottom: 0.9rem;
 line-height: 1.75;
 letter-spacing: 0.03em;
}

.contact-textarea {
 width: 100%;
 padding: 0.85rem 0.9rem;
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 background: var(--bg-input);
 color: var(--text);
 font-size: 0.92rem;
 font-family: var(--font-sans);
 resize: vertical;
 min-height: 140px;
 line-height: 1.75;
 transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-textarea:focus {
 outline: none;
 border-color: var(--brand);
 box-shadow: 0 0 0 3px var(--brand-bg);
 background: var(--bg-elevated);
}

.contact-textarea::placeholder {
 color: var(--text-muted);
 opacity: 0.7;
}

.contact-counter {
 text-align: right;
 font-size: 0.75rem;
 color: var(--text-muted);
 margin-top: 0.45rem;
 font-family: var(--font-serif);
}

.notify-hint {
 font-size: 0.85rem;
 color: var(--text-secondary);
 font-family: var(--font-serif);
 margin-bottom: 1rem;
 line-height: 1.75;
 letter-spacing: 0.03em;
}

.notify-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 padding: 0.9rem 1rem;
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 background: var(--bg-input);
 margin-bottom: 0.8rem;
 cursor: pointer;
 transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.notify-row:hover {
 border-color: var(--brand-border);
 background: var(--bg-elevated);
}

.notify-info {
 display: flex;
 flex-direction: column;
 flex: 1;
 min-width: 0;
}

.notify-title {
 font-size: 0.9rem;
 color: var(--text);
 font-family: var(--font-serif);
 font-weight: 500;
 margin-bottom: 0.15rem;
}

.notify-desc {
 font-size: 0.78rem;
 color: var(--text-muted);
}

.toggle {
 position: relative;
 display: inline-block;
 width: 42px;
 height: 24px;
 flex-shrink: 0;
}

.toggle input {
 opacity: 0;
 width: 0;
 height: 0;
 position: absolute;
}

.toggle-slider {
 position: absolute;
 inset: 0;
 background: var(--border);
 border-radius: 12px;
 cursor: pointer;
 transition: background 0.3s ease;
}

.toggle-slider::before {
 content: '';
 position: absolute;
 top: 3px;
 left: 3px;
 width: 18px;
 height: 18px;
 background: #fff;
 border-radius: 50%;
 box-shadow: 0 1px 3px 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(--brand);
}

.toggle input:checked + .toggle-slider::before {
 transform: translateX(18px);
}

.toggle input:focus-visible + .toggle-slider {
 box-shadow: 0 0 0 3px var(--brand-bg);
}

@media (max-width: 640px) {
 .header-inner { padding: 0.7rem 0.9rem; }
 .moments-main { padding: 1.2rem 0.9rem 3rem; }
 .back-link span { display: none; }
 .moments-title { font-size: 1.05rem; }

 .auth-view { margin: 1rem auto; }
 .auth-hero-title { font-size: 1.3rem; }
 .auth-form { padding: 1.4rem; }

 .post-card { padding: 1.1rem; }
 .compose-actions { margin-left: 0; }
 .compose-images { margin-left: 0; }

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

 .sheet-panel { max-height: 85vh; }
}

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

::selection {
 background: var(--brand-bg);
 color: var(--brand-hover);
}