.live-gate { display:grid; place-items:center; }
.live-gate > .card { width:100%; padding:28px 22px; text-align:center; }
.live-gate .room-icon { margin:0 auto 16px; }
.live-gate h2 { font-size:24px; }
.live-gate p { color:var(--muted); line-height:1.8; font-size:13px; }
.live-unavailable { padding:24px 0; text-align:center; width:100%; font-size:13px; color:var(--muted); }
.live-refresh { margin-top:16px; }
.live-letter-body { white-space:pre-wrap; overflow-wrap:anywhere; }
.live-post-images { display:grid; grid-template-columns:repeat(auto-fit,minmax(95px,1fr)); gap:7px; margin-top:12px; }
.live-post-images img { width:100%; height:auto; max-height:420px; object-fit:contain; border-radius:8px; background:var(--surface-alt); }
.live-read-only { color:var(--muted); font-size:12px; gap:8px; align-items:center; }
.live-read-only span { margin-left:auto; }
.quota-card { flex-wrap:wrap; }
.quota-half { min-width:0; flex:1 1 45%; }
:root[data-pixel="true"] .quota-half:nth-child(n+3) { grid-column:1 / -1; border-left:0; border-top:1px solid var(--line); padding-top:14px; margin-top:10px; }
.quota-half:only-child { grid-column:1 / -1; }
.quota-card > .live-unavailable { grid-column:1 / -1; }
.quota-reset { overflow-wrap:anywhere; }
.letter-meta { flex-wrap:wrap; }
.letter-meta time { margin-left:auto; font-size:10px; }
.profile-image { display:inline-grid; place-items:center; overflow:hidden; flex:none; }
.profile-image img { width:100%; height:100%; object-fit:cover; display:block; }
:root[data-pixel="true"] .post-avatar { width:42px; height:42px; border-radius:9px; font-size:20px; }
.post-author time { line-height:1.5; }
.post-text { white-space:pre-wrap; }
.post-actions .post-delete { margin-right:auto; font-size:11px; }
.post-actions button { min-height:44px; }
.moments-toolbar { display:flex; align-items:center; justify-content:space-between; margin:-6px 0 14px; font-size:12px; color:var(--muted); }
.compose-button { display:flex; align-items:center; gap:7px; min-height:44px; color:var(--accent-dark); font-size:13px; }
.compose-button .icon { width:18px; height:18px; }
:root[data-pixel="true"] .mail-tabs { display:grid; grid-template-columns:1fr 1fr; margin:16px 0 12px; padding:0; border:0; border-bottom:1px solid var(--line); background:none; gap:0; }
.mail-tabs button { min-height:44px; padding:10px 2px; text-align:center; }
.mail-tabs button.active::after { left:25%; right:25%; }
.modal-close { display:grid; place-items:center; width:44px; height:44px; padding:0; flex:none; color:var(--muted); border:0; border-radius:8px; background:none; }
.modal-close .icon { width:18px; height:18px; }
.modal-head h2:focus { outline:none; }
:root[data-pixel="true"] .modal-head h2 { font-size:18px; }
.modal-head { margin-bottom:18px; }
.profile-settings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:4px 0 22px; border-bottom:1px solid var(--line); }
.profile-settings button { display:flex; flex-direction:column; align-items:center; gap:7px; }
.settings-avatar { width:62px; height:62px; border-radius:14px; border:1px solid var(--line); background:var(--soft); color:var(--accent); font-size:24px; }
.profile-settings strong { font-size:12px; font-weight:550; }
.profile-settings small { font-size:11px; color:var(--muted); }
.settings-section-title { margin:22px 0 5px; font-size:13px; font-weight:550; color:var(--muted); }
.logout-button { display:block; margin:20px auto -4px; min-height:44px; font-size:12px; color:var(--muted); }
.avatar-preview { display:grid; place-items:center; margin:10px auto 24px; }
.avatar-preview > img,.avatar-preview .settings-avatar { width:128px; height:128px; object-fit:cover; border-radius:20px; }
.avatar-picker { justify-content:center; }
#social-text { width:100%; min-height:140px; max-height:40vh; resize:vertical; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); font-size:16px; line-height:1.6; }
.photo-picker { display:flex; align-items:center; gap:8px; min-height:44px; margin-top:12px; color:var(--accent); font-size:13px; cursor:pointer; position:relative; }
.photo-picker input { position:absolute; width:100%; height:100%; inset:0; opacity:0; cursor:pointer; }
.photo-picker span { color:var(--muted); font-size:11px; margin-left:auto; }
.photo-previews { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
.photo-previews > div { position:relative; }
.photo-previews img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; }
.photo-previews button { position:absolute; top:-6px; right:-6px; min-height:32px; width:32px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); border-radius:50%; }
.photo-previews .icon { width:16px; height:16px; }
.form-feedback { color:var(--accent-dark); font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.form-feedback:empty { display:none; }
#social-form .primary-button { margin-top:20px; }
.calendar { padding:10px 14px 14px; }
.calendar-head { display:flex; align-items:center; justify-content:space-between; font-size:15px; }
.calendar-head .icon { width:17px; height:17px; }
.calendar-caption { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:11px; }
.calendar-caption button { min-height:44px; padding:8px; color:var(--accent); }
.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px 2px; }
.weekday { text-align:center; color:var(--muted); font-size:11px; line-height:28px; }
.calendar-day { min-height:40px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:1px solid transparent; border-radius:8px; font-size:14px; }
.calendar-day i { display:block; width:4px; height:4px; border-radius:50%; }
.calendar-day i.marked { background:var(--accent); }
.calendar-day.today { border-color:var(--line); }
.calendar-day.selected { background:var(--accent); color:var(--surface); }
.calendar-day.selected i.marked { background:var(--surface); }
.calendar-summary { border-top:1px solid var(--line); margin-top:14px; padding-top:14px; display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; align-items:center; font-size:11px; }
.calendar-summary strong { font-size:12px; color:var(--accent-dark); font-weight:550; }
.calendar-summary span { color:var(--muted); }
.anniversary-book { margin-top:20px; padding:0 16px; }
.anniversary-book h2 { font-size:15px; font-weight:550; margin:0; padding:20px 0 8px; }
.anniversary-book h2 small { font-weight:400; font-size:10px; color:var(--muted); margin-left:8px; }
.anniversary-entry + .anniversary-entry { border-top:1px solid var(--line); }
.anniversary-toggle { width:100%; display:flex; justify-content:space-between; align-items:center; text-align:left; gap:12px; padding:18px 0; }
.anniversary-toggle span { display:flex; flex-direction:column; gap:7px; min-width:0; }
.anniversary-toggle small { color:var(--accent); font-size:11px; }
.anniversary-toggle strong { font-size:16px; font-weight:600; overflow-wrap:anywhere; }
.anniversary-toggle time { color:var(--muted); font-size:11px; }
.anniversary-toggle .icon { width:16px; height:16px; }
.anniversary-content { padding:0 0 20px; }
.anniversary-content > p { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.9; margin:0 0 16px; }
.anniversary-link { display:flex; align-items:center; gap:10px; min-height:48px; background:var(--soft); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:12px; }
.anniversary-link span { flex:1; }
.anniversary-link .icon { width:17px; height:17px; }
.anniversary-audio { margin-top:16px; }
.anniversary-audio label { display:block; color:var(--muted); font-size:11px; margin-bottom:8px; }
.anniversary-audio audio { width:100%; height:40px; }
.audio-error { font-size:11px; color:var(--muted); }
.audio-error a { text-decoration:underline; }
@media(max-width:760px) {
  .telegram-bar { --top:max(env(safe-area-inset-top),var(--space-safe-top,0px)); height:calc(48px + var(--top)); padding-top:var(--top); }
  .bottom-nav { --bottom:max(env(safe-area-inset-bottom),var(--space-safe-bottom,0px)); height:calc(52px + var(--bottom)); padding-bottom:calc(4px + var(--bottom)); }
}