:root { color-scheme: dark; --bg: var(--tg-theme-bg-color, #111218); --card: var(--tg-theme-secondary-bg-color, #1b1d26); --text: var(--tg-theme-text-color, #f5f4fa); --muted: var(--tg-theme-hint-color, #9998a5); --accent: var(--tg-theme-button-color, #8c72ff); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 15px/1.4 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.topbar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: max(18px, env(safe-area-inset-top)) 16px 14px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(16px); }
.eyebrow { margin: 0 0 1px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
h1 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.icon-button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--card); color: var(--text); font-size: 27px; cursor: pointer; }
.feed { display: grid; gap: 14px; padding: 0 12px 16px; }
.card { overflow: hidden; border-radius: 18px; background: var(--card); box-shadow: 0 8px 28px #0003; }
.card img { display: block; width: 100%; max-height: 78vh; object-fit: cover; background: var(--card); }
.status { padding: 22px 16px 30px; color: var(--muted); text-align: center; }
.more { display: block; width: calc(100% - 24px); margin: 0 12px 24px; padding: 14px; border: 0; border-radius: 14px; background: var(--accent); color: var(--tg-theme-button-text-color, #fff); font: inherit; font-weight: 700; cursor: pointer; }