:root {
  --bg: #0F1419; --card: #182028; --card2: #22303F; --border: #243040;
  --text: #E8EEF4; --muted: #8A9BAD; --accent: #4C9EEB; --on-accent: #0B1218;
  --red: #F0786E; --red-bg: #3A2224; --red-line: #5A2F33;
  --yellow: #E5B04A; --yellow-bg: #33291A;
  --green: #5DBB8F; --green-bg: #1E3A2E;
  --avatar: #24405C; --switch-off: #3A4757;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
:root[data-theme="light"] {
  --bg: #F3F6F9; --card: #FFFFFF; --card2: #E9EFF5; --border: #DDE4EB;
  --text: #14202B; --muted: #66788A; --accent: #2481CC; --on-accent: #FFFFFF;
  --red: #D64B3F; --red-bg: #FBE9E7; --red-line: #F0C4BF;
  --yellow: #A06A0B; --yellow-bg: #FBF1DC;
  --green: #2E8B63; --green-bg: #E3F4EC;
  --avatar: #D6E8F7; --switch-off: #B7C3CF;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 15px/21px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; }
.app { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: calc(24px + var(--safe-bottom)); }

.header { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 4px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 5; }
.header.root { padding-left: 16px; }
.header h1 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header .titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.header .titles b { font-size: 16px; line-height: 22px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header .titles span { font-size: 13px; line-height: 18px; color: var(--muted); }
.icon-btn { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--accent); border-radius: 22px; padding: 0; }
.avatar { flex: none; width: 44px; height: 44px; border-radius: 22px; background: var(--avatar); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }
.avatar.small { width: 40px; height: 40px; font-size: 15px; }

.content { padding: 12px 16px 0; display: flex; flex-direction: column; gap: 10px; }
.section-title { margin: 10px 4px 0; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border-radius: 16px; overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 64px; background: var(--card); border: 0; width: 100%; text-align: left; }
.row .grow { flex: 1; min-width: 0; }
.row .grow .t { font-size: 16px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .grow .s { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted); }
.row .side { flex: none; font-size: 13px; color: var(--muted); }
.row .chev { flex: none; color: var(--muted); display: flex; }
.chip-del { color: var(--red); } .chip-edit { color: var(--yellow); }

.card { padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); }
.card.big { padding: 18px; border-radius: 20px; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 12px; line-height: 16px; font-weight: 600; background: var(--green-bg); color: var(--green); }
.badge.warn { background: var(--yellow-bg); color: var(--yellow); }
.badge.bad { background: var(--red-bg); color: var(--red); }
.big-text { margin-top: 12px; font-size: 26px; line-height: 32px; font-weight: 700; }
.muted { color: var(--muted); font-size: 14px; line-height: 20px; }
.muted.small { font-size: 13px; line-height: 18px; }
.center { text-align: center; }

.btn { min-height: 48px; padding: 0 20px; border: 0; border-radius: 14px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.btn.secondary { background: var(--card2); color: var(--text); font-weight: 600; }
.btn.danger { background: var(--card); color: var(--red); border: 1px solid var(--red-line); font-weight: 600; }
.btn.danger-fill { background: var(--red); color: #fff; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-row { display: flex; gap: 10px; }

.switch { flex: none; width: 52px; height: 32px; padding: 3px; border: 0; border-radius: 16px; background: var(--switch-off); display: flex; align-items: center; justify-content: flex-start; transition: background .15s; }
.switch[aria-checked="true"] { background: var(--accent); justify-content: flex-end; }
.switch i { display: block; width: 26px; height: 26px; border-radius: 13px; background: #fff; }

.tabs { display: flex; gap: 4px; margin: 14px 16px 0; padding: 4px; background: var(--card); border-radius: 12px; }
.tab { flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; }
.tab[aria-pressed="true"] { background: var(--border); color: var(--text); }

.event { display: flex; gap: 12px; padding: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; }
.event .ico-box { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.event.deleted .ico-box { background: var(--red-bg); color: var(--red); }
.event.edited .ico-box { background: var(--yellow-bg); color: var(--yellow); }
.event .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.event .top { display: flex; justify-content: space-between; gap: 8px; }
.event .kind { font-size: 12px; line-height: 21px; font-weight: 600; }
.event.deleted .kind { color: var(--red); } .event.edited .kind { color: var(--yellow); }
.event .time { font-size: 13px; line-height: 21px; color: var(--muted); }
.event .who { font-size: 13px; line-height: 18px; color: var(--muted); }
.event .text { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.event .was, .event .now { display: flex; gap: 8px; align-items: baseline; }
.event .lbl { flex: none; width: 44px; font-size: 12px; color: var(--muted); }
.event .was .val { color: var(--muted); text-decoration: line-through; overflow-wrap: anywhere; white-space: pre-wrap; min-width: 0; }
.event .now .val { overflow-wrap: anywhere; white-space: pre-wrap; min-width: 0; }
.media-box { margin-top: 2px; min-height: 80px; border-radius: 10px; background: var(--card2); color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 13px; padding: 10px; text-align: center; border: 0; width: 100%; }
.media-box img, .media-box video { max-width: 100%; max-height: 320px; border-radius: 8px; display: block; }
.media-box audio { width: 100%; }
.media-box.plain { min-height: 0; padding: 0; background: none; }

.state { padding: 48px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); }
.state b { color: var(--text); font-size: 17px; }
.steps { display: flex; flex-direction: column; gap: 10px; }
.steps .step { display: flex; gap: 12px; align-items: flex-start; }
.steps .n { flex: none; width: 24px; height: 24px; border-radius: 12px; background: var(--avatar); color: var(--accent); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.features { display: flex; flex-direction: column; gap: 12px; }
.features .f { display: flex; gap: 12px; align-items: flex-start; }
.features .f .ico { color: var(--green); flex: none; margin-top: 1px; }
.banner { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--yellow-bg); border: 1px solid var(--border); }
.banner b { color: var(--yellow); }
.ico { display: inline-flex; }
.skeleton { height: 64px; border-radius: 16px; background: var(--card); opacity: .6; }

/* ===== Весёлая тема: градиенты, эмодзи, мягкие тени, анимация ===== */
:root {
  --grad: linear-gradient(135deg, #4C9EEB 0%, #7C6CFF 100%);
  --grad-del: linear-gradient(135deg, #FF6B6B 0%, #FF9A5A 100%);
  --grad-edit: linear-gradient(135deg, #FFC24A 0%, #FF9A3C 100%);
  --shadow: 0 6px 18px rgba(0, 0, 0, .28);
  --glow: radial-gradient(120% 60% at 50% -10%, rgba(124, 108, 255, .22), transparent 60%);
}
:root[data-theme="light"] {
  --grad: linear-gradient(135deg, #2F9BFF 0%, #7C5CFF 100%);
  --shadow: 0 6px 18px rgba(60, 90, 130, .14);
  --glow: radial-gradient(120% 60% at 50% -10%, rgba(124, 92, 255, .14), transparent 60%);
}
body { background: var(--bg) var(--glow) no-repeat; background-attachment: fixed; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.content > *, .list > * { animation: pop .35s ease both; }
.content > *:nth-child(2) { animation-delay: .04s; } .content > *:nth-child(3) { animation-delay: .08s; }
.content > *:nth-child(4) { animation-delay: .12s; } .content > *:nth-child(5) { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) { .content > *, .list > *, .big-emoji { animation: none !important; } }

.header { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.logo { flex: none; width: 40px; height: 40px; border-radius: 13px; display: block; box-shadow: var(--shadow); }
.header.root .titles h1 { flex: none; font-size: 22px; line-height: 26px; }
.tagline { font-size: 13px; line-height: 17px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header h1 { font-weight: 800; letter-spacing: -.01em; }

.avatar { color: #fff; overflow: hidden; background: var(--grad); text-shadow: 0 1px 2px rgba(0, 0, 0, .25); box-shadow: 0 3px 10px rgba(0, 0, 0, .2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av0 { background: linear-gradient(135deg, #FF7E5F, #FEB47B); } .av1 { background: linear-gradient(135deg, #6A82FB, #FC5C7D); }
.av2 { background: linear-gradient(135deg, #11998E, #38EF7D); } .av3 { background: linear-gradient(135deg, #F7971E, #FFD200); }
.av4 { background: linear-gradient(135deg, #8E2DE2, #4A00E0); } .av5 { background: linear-gradient(135deg, #00C6FF, #0072FF); }
.av6 { background: linear-gradient(135deg, #F953C6, #B91D73); } .av7 { background: linear-gradient(135deg, #43CEA2, #185A9D); }

.list { gap: 8px; background: none; border-radius: 0; overflow: visible; }
.row { border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--border); transition: transform .12s ease; }
button.row:active { transform: scale(.98); }
.row .emo { flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--card2); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.pills { display: inline-flex; gap: 6px; }
.pill { padding: 1px 9px; border-radius: 10px; font-size: 12px; line-height: 18px; font-weight: 700; }
.pill.del { background: var(--red-bg); color: var(--red); } .pill.edit { background: var(--yellow-bg); color: var(--yellow); }
.row .grow .s { margin-top: 4px; }

.section-title { color: var(--accent); }
.btn { background: var(--grad); color: #fff; box-shadow: 0 8px 20px rgba(76, 110, 255, .35); transition: transform .12s ease; }
.btn:active { transform: scale(.97); }
.btn.secondary { background: var(--card2); color: var(--text); box-shadow: none; }
.btn.danger { background: var(--card); color: var(--red); box-shadow: none; }
.btn.danger-fill { background: var(--grad-del); color: #fff; box-shadow: 0 8px 20px rgba(255, 107, 107, .35); }
.switch[aria-checked="true"] { background: var(--grad); }

.tabs { box-shadow: var(--shadow); border: 1px solid var(--border); }
.tab { transition: background .15s, color .15s; }
.tab[aria-pressed="true"] { background: var(--grad); color: #fff; }

.event { border-radius: 20px; box-shadow: var(--shadow); }
.event.deleted .ico-box { background: var(--grad-del); color: #fff; }
.event.edited .ico-box { background: var(--grad-edit); color: #fff; }
.event .ico-box { border-radius: 14px; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.event .kind { font-size: 13px; font-weight: 700; }
.event .text { font-size: 16px; }
.media-box img.zoomable, .media-box video { cursor: zoom-in; }
.media-box.plain img { max-width: 100%; max-height: 360px; object-fit: contain; border-radius: 12px; }
button.media-box { transition: transform .12s ease; } button.media-box:active { transform: scale(.98); }

.card.hero { background: var(--grad); border: 0; color: #fff; box-shadow: 0 12px 28px rgba(110, 90, 255, .35); }
.card.hero .muted { color: rgba(255, 255, 255, .85); }
.card.hero .badge { background: rgba(255, 255, 255, .22); color: #fff; }
.banner { background: linear-gradient(135deg, var(--yellow-bg), var(--card)); box-shadow: var(--shadow); }

.big-emoji { font-size: 64px; line-height: 72px; animation: bob 3s ease-in-out infinite; }
.state { padding-top: 56px; }

.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .92); display: flex; align-items: center; justify-content: center; animation: pop .2s ease both; touch-action: pinch-zoom; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox-close { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; width: 44px; height: 44px; border-radius: 22px; border: 0; background: rgba(255, 255, 255, .18); color: #fff; display: flex; align-items: center; justify-content: center; }

/* ===== Индикатор новых событий ===== */
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, .55); } 70% { box-shadow: 0 0 0 8px rgba(255, 107, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); } }
.side-col { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.unread { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--grad-del); color: #fff; font-size: 13px; line-height: 24px; font-weight: 800; text-align: center; animation: pulse 2s infinite; }
.row .grow .t.fresh { font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .unread { animation: none; } }

/* ===== Голосовые и превью видео ===== */
@keyframes flash { 0%, 100% { box-shadow: var(--shadow); } 30% { box-shadow: 0 0 0 3px var(--accent), 0 0 24px rgba(76, 158, 235, .6); } }
.event.flash { animation: flash 1.8s ease 1; }
.voice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border: 0; border-radius: 16px; background: var(--card2); text-align: left; }
.play-circle { flex: none; width: 44px; height: 44px; border-radius: 22px; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(76, 110, 255, .4); }
.vmid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vlabel { font-size: 13px; line-height: 16px; color: var(--muted); font-weight: 600; }
.track { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 35%, transparent); overflow: hidden; }
.track i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 3px; }
.voice .dur { flex: none; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.vthumb { position: relative; display: block; width: 100%; max-width: 320px; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, var(--card2), var(--border)); color: var(--muted); }
.vthumb.round { width: 200px; height: 200px; aspect-ratio: 1; border-radius: 50%; }
.thumb-slot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.thumb-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.play-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 52px; height: 52px; padding: 0 12px; border-radius: 26px; background: rgba(0, 0, 0, .55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dur-badge { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 10px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; line-height: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vthumb.round .dur-badge { right: 50%; transform: translateX(50%); bottom: 14px; }
.event video { max-width: 100%; max-height: 360px; border-radius: 14px; display: block; background: #000; }
.event video.round { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; }

/* ===== Страница «Это безопасно?» ===== */
.big-emoji.small { font-size: 44px; line-height: 50px; }
.big-text.tight { margin-top: 6px; }
.card.fact { display: flex; gap: 14px; align-items: flex-start; }
.fact-emoji { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--card2); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.fact-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fact-body b { font-size: 16px; line-height: 22px; }
.limits { display: flex; flex-direction: column; gap: 8px; }
a.btn { text-decoration: none; }

/* ===== Намёк для закрытого доступа и ссылка «Это безопасно?» ===== */
@keyframes swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.teaser { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 14px; border-radius: 20px; border: 1px solid var(--border); background: linear-gradient(135deg, var(--yellow-bg), var(--card)); box-shadow: var(--shadow); text-align: left; }
.teaser-head { display: flex; justify-content: space-between; font-weight: 800; font-size: 14px; color: var(--yellow); }
.teaser-body { display: flex; gap: 12px; min-height: 84px; }
.teaser-body.swap { animation: swap .35s ease both; }
.teaser-ico { flex: none; width: 40px; height: 40px; border-radius: 13px; color: #fff; display: flex; align-items: center; justify-content: center; }
.teaser-ico.deleted { background: var(--grad-del); } .teaser-ico.edited { background: var(--grad-edit); }
.teaser-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.teaser-top { display: flex; justify-content: space-between; gap: 8px; }
.teaser-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teaser-top .time { font-size: 13px; color: var(--muted); }
.teaser-kind { font-size: 13px; font-weight: 700; }
.teaser-kind.deleted { color: var(--red); } .teaser-kind.edited { color: var(--yellow); }
.teaser-media { font-size: 13px; color: var(--muted); }
.blurred { filter: blur(6px); user-select: none; -webkit-user-select: none; pointer-events: none; overflow-wrap: anywhere; margin-top: 2px; }
.dots { display: flex; justify-content: center; gap: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--border); transition: width .2s, background .2s; }
.dots i.on { width: 18px; background: var(--yellow); }
.teaser-cta { text-align: center; padding: 10px; border-radius: 12px; background: var(--grad); color: #fff; font-weight: 800; }
.safety-link { align-self: center; display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 16px; border-radius: 20px; border: 1px solid var(--border); background: var(--card); color: var(--accent); font-weight: 700; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .teaser-body.swap { animation: none; } }

.btn.small-btn { min-height: 40px; font-size: 14px; width: auto; }

/* ===== Поддержка ===== */
.id-card { display: flex; align-items: center; gap: 12px; }
.id-card .grow-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.big-id { font-size: 22px; line-height: 28px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }