:root {
 --bg: #f4f1e8;
 --bg-elevated: #fffdf7;
 --bg-sunken: #ebe6d8;
 --brand: #4a5a4a;
 --brand-soft: rgba(74, 90, 74, 0.1);
 --brand-deep: #3a4a3a;
 --brand-glow: rgba(74, 90, 74, 0.18);
 --wood: #8a7660;
 --wood-soft: rgba(138, 118, 96, 0.12);
 --ink: #5a4a3e;
 --ink-soft: rgba(90, 74, 62, 0.1);
 --text: #3d3530;
 --text-secondary: #6a5d50;
 --text-muted: #9a8e7e;
 --border: rgba(74, 90, 74, 0.18);
 --border-strong: rgba(74, 90, 74, 0.32);
 --shadow: 0 1px 3px rgba(60, 70, 50, 0.06);
 --shadow-md: 0 4px 14px rgba(60, 70, 50, 0.08);
 --shadow-lg: 0 12px 40px rgba(60, 70, 50, 0.14);
 --radius: 12px;
 --radius-sm: 8px;
 --radius-pill: 999px;
 --serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "Georgia", serif;
 --kai: "Kaiti SC", "STKaiti", "KaiTi", serif;
 --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
 --danger: #b85450;
 --ease: cubic-bezier(0.23, 1, 0.32, 1);
 --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="dark"] {
 --bg: #1a1c19;
 --bg-elevated: #232622;
 --bg-sunken: #1e211d;
 --brand: #7a9a7a;
 --brand-soft: rgba(122, 154, 122, 0.12);
 --brand-deep: #5a7a5a;
 --brand-glow: rgba(122, 154, 122, 0.22);
 --wood: #b09a82;
 --wood-soft: rgba(176, 154, 130, 0.14);
 --ink: #c2b5a4;
 --ink-soft: rgba(194, 181, 164, 0.12);
 --text: #e0ddd5;
 --text-secondary: #a8aaa3;
 --text-muted: #7a7d74;
 --border: rgba(218, 211, 190, 0.13);
 --border-strong: rgba(218, 211, 190, 0.28);
 --shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.25);
 --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.35);
 --danger: #d06a66;
}

* { 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(--sans);
 font-size: 15px;
 line-height: 1.75;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 min-height: 100vh;
 overflow-x: hidden;
 position: relative;
}

body::before {
 content: "";
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 0;
 opacity: 0.35;
 background-image:
 radial-gradient(circle at 1px 1px, rgba(74, 90, 74, 0.04) 1px, transparent 1px),
 radial-gradient(circle at 7px 13px, rgba(138, 118, 96, 0.04) 1px, transparent 1px);
 background-size: 24px 24px, 36px 36px;
 background-position: 0 0, 12px 12px;
 mix-blend-mode: multiply;
}
[data-theme="dark"] body::before {
 opacity: 0.5;
 background-image:
 radial-gradient(circle at 1px 1px, rgba(218, 211, 190, 0.03) 1px, transparent 1px),
 radial-gradient(circle at 7px 13px, rgba(176, 154, 130, 0.025) 1px, transparent 1px);
 mix-blend-mode: screen;
}
body > * { position: relative; z-index: 1; }

.top-bar {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 100;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 1rem 1.4rem;
 pointer-events: none;
}
.top-bar > * { pointer-events: auto; }

.back-home {
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 padding: 0.5rem 0.9rem;
 background: var(--bg-elevated);
 border: 1px solid var(--border);
 border-radius: var(--radius-pill);
 color: var(--text-secondary);
 text-decoration: none;
 font-size: 0.82rem;
 font-family: var(--serif);
 letter-spacing: 0.05em;
 box-shadow: var(--shadow);
 transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease), color 0.25s var(--ease);
}
.back-home:hover {
 border-color: var(--brand);
 color: var(--brand);
 box-shadow: var(--shadow-md);
 transform: translateX(-2px);
}
.back-home .icon { width: 1em; height: 1em; }

.top-right {
 display: flex;
 align-items: center;
 gap: 0.6rem;
}

.mode-toggle {
 display: inline-flex;
 align-items: center;
 padding: 0.5rem 0.9rem;
 background: var(--bg-elevated);
 border: 1px solid var(--border);
 border-radius: var(--radius-pill);
 color: var(--text-secondary);
 font-size: 0.78rem;
 font-family: var(--serif);
 letter-spacing: 0.08em;
 cursor: pointer;
 box-shadow: var(--shadow);
 transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.2s var(--ease);
 -webkit-tap-highlight-color: transparent;
}
.mode-toggle:hover { border-color: var(--brand); color: var(--brand); }
.mode-toggle:active { transform: scale(0.96); }

.user-pill {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 padding: 4px 6px 4px 4px;
 background: var(--bg-elevated);
 border: 1px solid var(--border);
 border-radius: var(--radius-pill);
 font-size: 0.8rem;
 color: var(--text);
 box-shadow: var(--shadow);
 cursor: pointer;
 transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
 -webkit-tap-highlight-color: transparent;
}
.user-pill:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }

.user-avatar {
 width: 28px;
 height: 28px;
 border-radius: 50%;
 background: var(--brand-soft);
 color: var(--brand);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-family: var(--kai);
 font-size: 0.95rem;
 font-weight: 500;
 flex-shrink: 0;
 border: 1.2px solid var(--brand);
 overflow: hidden;
}
.user-avatar img {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 object-fit: cover;
}
.user-name { font-family: var(--serif); padding-right: 0.5rem; letter-spacing: 0.04em; }

.capsule-container {
 max-width: 680px;
 margin: 0 auto;
 padding: 5rem 1.5rem 4rem;
}

.capsule-header {
 text-align: center;
 margin-bottom: 2.5rem;
 animation: headerIn 0.7s var(--ease) both;
}

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

.capsule-chapter {
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 font-family: "Georgia", "Times New Roman", var(--serif);
 font-size: 0.78rem;
 letter-spacing: 0.18em;
 color: var(--text-muted);
 margin-bottom: 0.7rem;
}
.capsule-chapter-num {
 font-weight: 600;
 color: var(--brand);
 letter-spacing: 0.1em;
}
.capsule-chapter-dot { opacity: 0.5; font-size: 0.9rem; }
.capsule-chapter-cn {
 letter-spacing: 0.18em;
 font-family: var(--kai);
 font-size: 0.88rem;
 color: var(--brand);
}

.capsule-title {
 font-family: var(--serif);
 font-size: 2rem;
 font-weight: 600;
 letter-spacing: 0.16em;
 color: var(--text);
 margin: 0 0 0.6rem;
}

.capsule-rule {
 display: block;
 width: 56px;
 height: 1px;
 background: rgba(74, 90, 74, 0.5);
 margin: 0.5rem auto 0.8rem;
 position: relative;
}
.capsule-rule::before, .capsule-rule::after {
 content: "";
 position: absolute;
 top: 0;
 width: 0;
 height: 1px;
 background: var(--brand);
 transition: width 0.6s var(--ease);
}
.capsule-rule::before { left: 0; }
.capsule-rule::after { right: 0; transition-delay: 0.1s; }
.capsule-header:hover .capsule-rule::before,
.capsule-header:hover .capsule-rule::after { width: 18px; }

.capsule-subtitle {
 font-family: var(--serif);
 font-size: 0.9rem;
 color: var(--text-secondary);
 letter-spacing: 0.08em;
 margin: 0;
}

.auth-view {
 max-width: 420px;
 margin: 1rem auto 3rem;
 animation: cardIn 0.6s var(--ease) both;
 animation-delay: 0.15s;
}

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

.auth-card::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: linear-gradient(to right,
 var(--brand) 0%, var(--brand) 50%,
 var(--ink) 50%, var(--ink) 75%,
 var(--wood) 75%, var(--wood) 100%);
 opacity: 0.7;
}

.auth-guide {
 text-align: center;
 padding: 2.6rem 1.8rem 1.8rem;
}

.auth-guide-mark {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 68px;
 height: 68px;
 border-radius: 50%;
 background: var(--brand-soft);
 border: 1.5px solid var(--brand);
 color: var(--brand);
 margin-bottom: 1.2rem;
 position: relative;
 animation: pulseSoft 3.6s ease-in-out infinite;
}

.auth-guide-mark svg { width: 1.8rem; height: 1.8rem; }

@keyframes pulseSoft {
 0%, 100% { box-shadow: 0 0 0 0 var(--brand-glow); }
 50% { box-shadow: 0 0 0 14px transparent; }
}

.auth-guide-title {
 font-family: var(--serif);
 font-size: 1.32rem;
 letter-spacing: 0.12em;
 color: var(--text);
 margin: 0 0 0.6rem;
 font-weight: 600;
}

.auth-guide-desc {
 font-size: 0.88rem;
 line-height: 1.85;
 color: var(--text-secondary);
 font-family: var(--serif);
 margin: 0 0 1.6rem;
 letter-spacing: 0.04em;
}

.auth-guide-divider {
 display: flex;
 align-items: center;
 gap: 0.6rem;
 margin: 0 auto 1.4rem;
 max-width: 180px;
 color: var(--text-muted);
 font-size: 0.7rem;
 letter-spacing: 0.2em;
 font-family: var(--kai);
}
.auth-guide-divider::before,
.auth-guide-divider::after {
 content: "";
 flex: 1;
 height: 1px;
 background: var(--border);
}

.auth-footer-note {
 text-align: center;
 margin-top: 1.4rem;
 font-family: var(--kai);
 font-size: 0.82rem;
 color: var(--text-muted);
 letter-spacing: 0.18em;
}

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

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

.form-label {
 display: flex;
 align-items: center;
 gap: 0.4rem;
 font-size: 0.78rem;
 color: var(--text-secondary);
 margin-bottom: 0.45rem;
 font-family: var(--serif);
 letter-spacing: 0.06em;
 font-weight: 500;
}

.form-input,
.form-textarea {
 width: 100%;
 padding: 0.7rem 0.85rem;
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 background: var(--bg);
 color: var(--text);
 font-size: 0.92rem;
 font-family: var(--sans);
 transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}
.form-textarea { resize: vertical; min-height: 110px; line-height: 1.8; }
.form-input:focus,
.form-textarea:focus {
 outline: none;
 border-color: var(--brand);
 box-shadow: 0 0 0 3px var(--brand-soft);
 background: var(--bg-elevated);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-muted); opacity: 0.75; }
.form-hint {
 font-size: 0.74rem;
 color: var(--text-muted);
 margin-top: 0.4rem;
 font-family: var(--kai);
 letter-spacing: 0.03em;
}
.form-counter {
 text-align: right;
 font-size: 0.74rem;
 color: var(--text-muted);
 margin-top: 0.3rem;
 font-family: var(--sans);
}

.btn {
 position: relative;
 overflow: hidden;
 border: none;
 border-radius: var(--radius-sm);
 font-size: 0.88rem;
 font-family: var(--sans);
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.45rem;
 white-space: nowrap;
 padding: 0.7rem 1.4rem;
 transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.15s var(--ease), box-shadow 0.25s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-stamp {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 1.1rem;
 height: 1.1rem;
 font-family: var(--kai);
 font-size: 0.72rem;
 border: 1.2px solid currentColor;
 border-radius: 2px;
 transform: rotate(-3deg);
 letter-spacing: 0;
 flex-shrink: 0;
}
.btn-icon { width: 1rem; height: 1rem; flex-shrink: 0; }

.btn-primary {
 background: var(--brand);
 color: #fff;
 font-weight: 500;
 box-shadow: 0 2px 6px var(--brand-glow);
}
.btn-primary:hover { background: var(--brand-deep); box-shadow: 0 4px 14px var(--brand-glow); }

.btn-ghost {
 background: transparent;
 color: var(--text-secondary);
 border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

.btn-danger {
 background: transparent;
 color: var(--danger);
 border: 1px solid rgba(184, 84, 80, 0.3);
}
.btn-danger:hover { border-color: var(--danger); background: rgba(184, 84, 80, 0.08); }

.btn-sm { padding: 0.45rem 0.9rem; font-size: 0.82rem; }
.btn-block { width: 100%; }

.btn-submit {
 width: 100%;
 margin-top: 0.4rem;
 padding: 0.95rem 1rem;
 font-size: 0.96rem;
 font-family: var(--serif);
 letter-spacing: 0.18em;
 border-radius: var(--radius);
 background: var(--brand);
 color: #fff;
 font-weight: 500;
 box-shadow: 0 4px 14px var(--brand-glow);
 transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.25s var(--ease);
}
.btn-submit:hover { background: var(--brand-deep); transform: translateY(-1px); box-shadow: 0 6px 18px var(--brand-glow); }
.btn-submit:active { transform: translateY(0); }
.btn-submit .btn-stamp { width: 1.3rem; height: 1.3rem; font-size: 0.85rem; color: #fff; border-color: rgba(255, 255, 255, 0.85); }

.btn .ripple,
.btn-submit .ripple {
 position: absolute;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.25) 16%, transparent 38%);
 pointer-events: none;
 transform: scale(0);
 opacity: 1;
 z-index: 0;
 mix-blend-mode: screen;
}
.btn .ripple.is-rippling,
.btn-submit .ripple.is-rippling {
 transform: scale(2.4);
 opacity: 0;
 transition: transform 1.7s var(--ease), opacity 1.7s var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn-submit > * { position: relative; z-index: 1; }

.feed-view { animation: cardIn 0.5s var(--ease) both; }

.compose-capsule {
 position: relative;
 background: var(--bg-elevated);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 1.4rem 1.4rem 1.5rem;
 margin-bottom: 1.6rem;
 box-shadow: var(--shadow);
 animation: cardIn 0.5s var(--ease) both;
 animation-delay: 0.05s;
 transition: box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.compose-capsule:focus-within {
 border-color: var(--brand);
 box-shadow: 0 6px 24px var(--brand-glow);
}

.compose-title {
 font-family: var(--serif);
 font-size: 1.05rem;
 font-weight: 600;
 color: var(--text);
 margin: 0 0 1.2rem;
 letter-spacing: 0.08em;
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

.compose-notice {
 margin-top: 1rem;
 padding: 0.75rem 0.9rem;
 background: var(--wood-soft);
 border-left: 3px solid var(--wood);
 border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 font-size: 0.8rem;
 color: var(--text-secondary);
 font-family: var(--kai);
 line-height: 1.7;
 display: flex;
 align-items: flex-start;
 gap: 0.5rem;
}
.compose-notice svg {
 width: 1rem;
 height: 1rem;
 color: var(--wood);
 flex-shrink: 0;
 margin-top: 0.18rem;
}

.capsules-list { display: flex; flex-direction: column; gap: 1rem; }

.list-head {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 1rem 1.2rem;
 margin-bottom: 1rem;
 padding: 0 0.2rem;
}

.list-head-left {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 0.4rem;
 min-width: 0;
 flex: 1 1 auto;
}

.list-chapter {
 display: inline-flex;
 align-items: center;
 gap: 0.35rem;
 font-family: "Georgia", "Times New Roman", var(--serif);
 font-size: 0.72rem;
 letter-spacing: 0.18em;
 color: var(--text-muted);
}
.list-chapter-num {
 font-weight: 600;
 color: var(--brand);
 letter-spacing: 0.1em;
}
.list-chapter-dot { opacity: 0.5; }
.list-chapter-cn {
 font-family: var(--kai);
 color: var(--brand);
 letter-spacing: 0.2em;
}

.list-title {
 font-family: var(--serif);
 font-size: 1.15rem;
 color: var(--text);
 letter-spacing: 0.14em;
 font-weight: 600;
 margin: 0;
 line-height: 1.3;
}

.list-rule {
 display: block;
 width: 36px;
 height: 1px;
 background: var(--brand);
 opacity: 0.6;
 transition: width 0.5s var(--ease);
}
.list-head:hover .list-rule { width: 64px; }

.list-count {
 font-family: var(--kai);
 font-size: 0.78rem;
 color: var(--text-muted);
 letter-spacing: 0.1em;
 margin-top: 0.1rem;
}

.list-filter {
 display: inline-flex;
 align-items: center;
 gap: 1.2rem;
 padding-bottom: 0.2rem;
 border-bottom: 1px solid var(--border);
}

.list-filter-chip {
 position: relative;
 display: inline-flex;
 align-items: center;
 gap: 0.32rem;
 padding: 0.2rem 0;
 background: none;
 border: none;
 color: var(--text-muted);
 font-family: var(--serif);
 font-size: 0.86rem;
 cursor: pointer;
 letter-spacing: 0.1em;
 transition: color 0.25s var(--ease);
 -webkit-tap-highlight-color: transparent;
}
.list-filter-chip::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: -3px;
 height: 1.5px;
 background: var(--brand);
 transform: scaleX(0);
 transform-origin: center;
 transition: transform 0.3s var(--ease);
}
.list-filter-chip:hover { color: var(--text); }
.list-filter-chip:hover::after { transform: scaleX(0.6); opacity: 0.5; }
.list-filter-chip.active {
 color: var(--brand);
 font-weight: 500;
}
.list-filter-chip.active::after { transform: scaleX(1); }

.list-filter-chip .chip-num {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 1.4rem;
 height: 1.1rem;
 padding: 0 0.32rem;
 background: var(--bg-sunken);
 color: var(--text-muted);
 border-radius: var(--radius-pill);
 font-family: var(--sans);
 font-size: 0.7rem;
 font-weight: 500;
 letter-spacing: 0;
}
.list-filter-chip.active .chip-num {
 background: var(--brand-soft);
 color: var(--brand);
}

.capsule-card {
 position: relative;
 background: var(--bg-elevated);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 1.1rem 1.3rem 1rem;
 box-shadow: var(--shadow);
 transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.4s var(--ease), opacity 0.3s var(--ease);
 animation: cardIn 0.5s var(--ease) both;
 overflow: hidden;
}

.capsule-card:hover {
 box-shadow: var(--shadow-md);
 border-color: var(--brand);
 transform: translateY(-2px);
}

.capsule-card.filtered-out { display: none; }

.capsule-card-head {
 display: flex;
 align-items: center;
 gap: 0.7rem;
 margin-bottom: 0.7rem;
 min-height: 1.4rem;
}

.capsule-card-head-meta {
 flex: 1;
 display: flex;
 align-items: center;
 gap: 0.45rem;
 min-width: 0;
 font-family: var(--kai);
 font-size: 0.8rem;
 color: var(--text-muted);
 letter-spacing: 0.04em;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.capsule-card-date { color: var(--text-secondary); }
.capsule-card-date-sep {
 color: var(--text-muted);
 opacity: 0.55;
 font-family: var(--sans);
 font-size: 0.78rem;
}
.capsule-card-date-target { color: var(--brand); }

.capsule-delete {
 background: none;
 border: none;
 color: var(--text-muted);
 cursor: pointer;
 padding: 0.3rem;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 border-radius: var(--radius-sm);
 transition: color 0.25s var(--ease), background 0.25s var(--ease), transform 0.3s var(--ease);
}
.capsule-delete:hover { color: var(--danger); background: rgba(184, 84, 80, 0.08); transform: scale(1.1); }
.capsule-delete:active { transform: scale(0.9); }
.capsule-delete svg { width: 0.95rem; height: 0.95rem; }

.capsule-card-title {
 font-family: var(--serif);
 font-size: 1.04rem;
 font-weight: 600;
 color: var(--text);
 letter-spacing: 0.05em;
 margin: 0 0 0.55rem;
 word-break: break-word;
 line-height: 1.5;
}
.capsule-card-title.empty {
 color: var(--text-muted);
 font-style: italic;
 font-weight: 400;
 font-family: var(--kai);
}

.capsule-countdown {
 margin-bottom: 0.5rem;
 font-size: 0.92rem;
 color: var(--text-secondary);
 font-family: var(--kai);
 display: flex;
 align-items: baseline;
 gap: 0.4rem;
 letter-spacing: 0.04em;
 flex-wrap: wrap;
}
.countdown-suffix {
 color: var(--text-muted);
 font-size: 0.82rem;
 letter-spacing: 0.12em;
 margin-left: 0.1rem;
}
.countdown-text { letter-spacing: 0.04em; }
.countdown-text .num {
 color: var(--brand);
 font-weight: 600;
 font-family: var(--serif);
 display: inline-block;
 min-width: 1.4em;
 text-align: center;
 font-variant-numeric: tabular-nums;
 font-size: 1rem;
 letter-spacing: 0.02em;
}

.capsule-hint {
 margin-bottom: 0.55rem;
 font-size: 0.82rem;
 color: var(--text-secondary);
 font-family: var(--kai);
 display: flex;
 align-items: baseline;
 gap: 0.3rem;
 letter-spacing: 0.03em;
}
.hint-mark {
 color: var(--brand);
 font-weight: 600;
 font-size: 0.95rem;
}
.hint-text {
 color: var(--text-secondary);
 font-style: italic;
}

.capsule-ready {
 margin-bottom: 0.7rem;
 font-family: var(--kai);
 font-size: 0.88rem;
 color: var(--text-secondary);
 letter-spacing: 0.08em;
 display: inline-flex;
 align-items: baseline;
 gap: 0.05rem;
}
.ready-mark { color: var(--brand); opacity: 0.6; }
.ready-text { color: var(--text-secondary); margin: 0 0.15rem; }

.capsule-status {
 display: inline-flex;
 align-items: center;
 font-size: 0.74rem;
 padding: 0.2rem 0.7rem;
 border-radius: var(--radius-pill);
 font-family: var(--serif);
 letter-spacing: 0.08em;
 border: 1px solid;
 font-weight: 500;
}
.capsule-status.locked {
 background: var(--wood-soft);
 color: var(--wood);
 border-color: rgba(138, 118, 96, 0.3);
}
.capsule-status.unlocked {
 background: var(--brand-soft);
 color: var(--brand);
 border-color: rgba(74, 90, 74, 0.32);
}

.capsule-card-foot {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 0.6rem;
 margin-top: 0.4rem;
 padding-top: 0.7rem;
 border-top: 1px dashed var(--border);
}
.capsule-card-foot .btn-sm { padding: 0.42rem 1.1rem; }

.empty-state {
 text-align: center;
 padding: 3.5rem 1.4rem 3rem;
 color: var(--text-muted);
 border: 1px dashed var(--border);
 border-radius: var(--radius);
 background: var(--bg-elevated);
 position: relative;
 overflow: hidden;
}
.empty-state::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: linear-gradient(to right,
 var(--brand) 0%, var(--brand) 50%,
 var(--ink) 50%, var(--ink) 75%,
 var(--wood) 75%, var(--wood) 100%);
 opacity: 0.5;
}
.empty-state-icon {
 font-size: 2.6rem;
 margin-bottom: 1rem;
 opacity: 0.85;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 72px;
 height: 72px;
 border-radius: 50%;
 background: var(--brand-soft);
 border: 1.5px dashed var(--brand);
 color: var(--brand);
 position: relative;
 animation: gentleFloat 4s ease-in-out infinite;
}
@keyframes gentleFloat {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-4px); }
}
.empty-state-icon svg { width: 1.9rem; height: 1.9rem; }
.empty-state-text {
 font-size: 0.98rem;
 font-family: var(--serif);
 letter-spacing: 0.08em;
 color: var(--text);
 margin-top: 0.5rem;
 font-weight: 500;
}
.empty-state-desc {
 font-size: 0.84rem;
 margin-top: 0.5rem;
 font-family: var(--kai);
 letter-spacing: 0.06em;
 color: var(--text-secondary);
 line-height: 1.7;
}

.loading-state {
 text-align: center;
 padding: 3rem 0;
 color: var(--text-muted);
}
.loading-envelope {
 width: 44px;
 height: 32px;
 margin: 0 auto 0.9rem;
 position: relative;
 display: block;
}

.loading-envelope::before {
 content: "";
 position: absolute;
 inset: 0;
 border: 1.4px solid var(--brand);
 border-radius: 2px;
 background: transparent;
}

.loading-envelope::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 16px;
 background: linear-gradient(to bottom, transparent 49.5%, var(--brand) 49.5%, var(--brand) 50.5%, transparent 50.5%);
 clip-path: polygon(0 0, 100% 0, 50% 100%);
 transform-origin: top center;
 animation: envelopeOpen 2.4s var(--ease) infinite;
}

.loading-letter {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 26px;
 height: 18px;
 margin-left: -13px;
 margin-top: -9px;
 background: var(--bg-elevated);
 border: 1px solid var(--brand);
 border-radius: 1px;
 transform: translateY(0);
 animation: letterSlide 2.4s var(--ease) infinite;
 z-index: -1;
}
.loading-letter::before,
.loading-letter::after {
 content: "";
 position: absolute;
 left: 4px;
 right: 4px;
 height: 1px;
 background: var(--brand);
 opacity: 0.45;
}
.loading-letter::before { top: 5px; }
.loading-letter::after { top: 10px; width: 60%; }

@keyframes envelopeOpen {
 0%, 100% { transform: rotateX(0deg); }
 35%, 65% { transform: rotateX(-180deg); }
}
@keyframes letterSlide {
 0%, 20% { transform: translateY(0); }
 50% { transform: translateY(-12px); }
 80%, 100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
 .loading-envelope::after,
 .loading-letter { animation: none; }
}
.loading-state p {
 font-size: 0.85rem;
 font-family: var(--kai);
 letter-spacing: 0.12em;
 color: var(--text-secondary);
}

.overlay {
 position: fixed;
 inset: 0;
 z-index: 200;
 background: rgba(40, 38, 33, 0.5);
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 1.5rem;
 opacity: 0;
 transition: opacity 0.3s var(--ease);
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
}
.overlay.open { opacity: 1; }

.sheet-panel {
 background: var(--bg-elevated);
 width: 100%;
 max-width: 520px;
 max-height: 85vh;
 border-radius: var(--radius);
 display: flex;
 flex-direction: column;
 box-shadow: var(--shadow-lg);

 transform-origin: top center;
 transform: translateY(-32px) scaleY(0.7);
 opacity: 0;
 transition: transform 0.55s cubic-bezier(0.22, 1, 0.32, 1), opacity 0.35s var(--ease);
 overflow: hidden;
 position: relative;
}

.sheet-panel::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: linear-gradient(to right,
 var(--brand) 0%, var(--brand) 50%,
 var(--ink) 50%, var(--ink) 75%,
 var(--wood) 75%, var(--wood) 100%);
 opacity: 0.7;
 z-index: 1;
}

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

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

.sheet-title {
 font-family: var(--serif);
 font-size: 1rem;
 font-weight: 600;
 letter-spacing: 0.08em;
 color: var(--text);
 display: flex;
 align-items: center;
 gap: 0.5rem;
}
.sheet-title svg { width: 1.1rem; height: 1.1rem; color: var(--brand); }

.sheet-close {
 background: none;
 border: none;
 cursor: pointer;
 color: var(--text-muted);
 padding: 0.35rem;
 border-radius: 50%;
 width: 28px;
 height: 28px;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: color 0.2s var(--ease), background 0.2s var(--ease), transform 0.3s var(--ease);
}
.sheet-close:hover { color: var(--text); background: var(--bg-sunken); transform: rotate(90deg); }
.sheet-close svg { width: 1rem; height: 1rem; }

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

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

.unlock-meta {
 margin-bottom: 0.7rem;
 font-size: 0.82rem;
 color: var(--text-muted);
 line-height: 1.7;
}
.unlock-meta strong {
 color: var(--text);
 font-family: var(--serif);
 font-weight: 600;
 display: block;
 margin-bottom: 0.4rem;
 font-size: 1.05rem;
 letter-spacing: 0.04em;
}

.unlock-hint-box {
 margin-bottom: 1rem;
 padding: 0.7rem 0.85rem;
 background: var(--bg-sunken);
 border-left: 2px solid var(--brand);
 border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 font-size: 0.82rem;
 color: var(--text-secondary);
 font-family: var(--kai);
 letter-spacing: 0.03em;
}
.unlock-hint-box .label { color: var(--text-muted); margin-right: 0.3rem; }

.unlock-tip {
 font-size: 0.8rem;
 color: var(--text-secondary);
 font-family: var(--kai);
 margin-bottom: 0.8rem;
 line-height: 1.75;
 padding: 0.6rem 0.8rem;
 background: var(--brand-soft);
 border-radius: var(--radius-sm);
 letter-spacing: 0.03em;
}

.content-display {
 white-space: pre-wrap;
 word-break: break-word;
 font-size: 0.95rem;
 line-height: 2;
 color: var(--text);
 font-family: var(--serif);
 padding: 1.2rem 1rem;
 background: var(--bg-sunken);
 border-radius: var(--radius-sm);
 border-left: 3px solid var(--brand);
 letter-spacing: 0.02em;
 position: relative;
}
.content-display::before {
 content: "“";
 position: absolute;
 top: 0;
 left: 8px;
 font-size: 2rem;
 color: var(--brand);
 opacity: 0.3;
 line-height: 1;
 font-family: var(--serif);
}

.content-meta {
 margin-bottom: 1.2rem;
 padding-bottom: 1rem;
 border-bottom: 1px dashed var(--border);
}
.content-meta-row {
 display: flex;
 gap: 0.4rem;
 font-size: 0.82rem;
 color: var(--text-muted);
 margin-bottom: 0.3rem;
 font-family: var(--kai);
}
.content-meta-row .label { color: var(--text-muted); min-width: 4rem; }
.content-meta-row .value { color: var(--text-secondary); }
.content-meta-row .value.title {
 color: var(--text);
 font-family: var(--serif);
 font-weight: 600;
 font-size: 0.95rem;
 letter-spacing: 0.04em;
}

.toast-container {
 position: fixed;
 top: 4.5rem;
 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.7rem 1.6rem;
 border-radius: var(--radius-pill);
 font-size: 0.86rem;
 font-family: var(--serif);
 box-shadow: var(--shadow-lg);
 transform: translateY(-80px);
 opacity: 0;
 transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
 pointer-events: auto;
 max-width: 90vw;
 text-align: center;
 letter-spacing: 0.04em;
 border: 1px solid var(--border);
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { background: var(--danger); color: #fff; border-color: transparent; }
.toast.success { background: var(--brand); color: #fff; border-color: transparent; }

.capsule-footer {
 text-align: center;
 margin-top: 3rem;
 padding-top: 2rem;
 border-top: 1px dashed var(--border);
}
.capsule-footer p {
 font-family: var(--kai);
 font-size: 0.85rem;
 color: var(--text-muted);
 margin-bottom: 0.6rem;
 letter-spacing: 0.08em;
}
.footer-link {
 font-size: 0.82rem;
 color: var(--brand);
 text-decoration: none;
 font-family: var(--serif);
 letter-spacing: 0.06em;
 transition: opacity 0.25s var(--ease);
}
.footer-link:hover { opacity: 0.7; }

@media (max-width: 640px) {
 .capsule-container { padding: 4.5rem 1rem 3rem; }
 .top-bar { padding: 0.8rem 1rem; }
 .back-home span, .mode-toggle { display: none; }
 .back-home { padding: 0.5rem; }
 .mode-toggle { padding: 0.5rem; }
 .user-name { display: none; }
 .user-pill { padding: 3px 4px 3px 3px; }

 .capsule-title { font-size: 1.65rem; letter-spacing: 0.12em; }
 .capsule-title-stamp { width: 1.9rem; height: 1.9rem; font-size: 1.1rem; }

 .auth-view { margin: 0.5rem auto 2rem; }
 .auth-guide { padding: 2rem 1.4rem 1.5rem; }
 .auth-guide-mark { width: 60px; height: 60px; }
 .auth-guide-title { font-size: 1.18rem; }

 .compose-capsule { padding: 1.1rem 1.1rem 1.2rem; }
 .capsule-card { padding: 1rem 1.1rem 0.9rem; }
 .capsule-card-stamp { width: 1.4rem; height: 1.4rem; font-size: 0.8rem; }
 .capsule-meta { gap: 0.3rem 0.8rem; }

 .sheet-panel { max-height: 92vh; }
 .sheet-body { padding: 1rem; }
}

@media (max-width: 380px) {
 .capsule-title { font-size: 1.45rem; }
}

::-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(--border-strong); }

::selection { background: var(--brand-soft); color: var(--text); }

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