:root { font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; color: #212121; background: #e5ebef; }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { cursor: pointer; }
.telegram-shell { min-height: 100vh; background: #e5ebef; position: relative; overflow: hidden; }
.background-pattern { position: fixed; inset: 48px 0 0; z-index: 0; opacity: 1; background:radial-gradient(circle at 15% 12%, #dbddbb 0, transparent 42%), radial-gradient(circle at 86% 19%, #6ba587 0, transparent 45%), radial-gradient(circle at 34% 86%, #d5d88d 0, transparent 49%), #88b884; }
.background-pattern::after { content:""; position:absolute; inset:0; opacity:.3; mix-blend-mode:overlay; background:url('/assets/telegram-official-pattern.svg') center/420px auto repeat; }
.topbar { height: 48px; background: rgba(255,255,255,.97); border-bottom:1px solid #d7e3ec; position: sticky; top:0; z-index:5; }
.topbar-inner { max-width: 832px; height:48px; margin: auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.channel-mini { display:flex; align-items:center; gap:8px; min-width:230px; font-size:13px; line-height:16px; }
.channel-mini b { display:block; font-weight:500; }.channel-mini span { display:block; color:#738ca7; font-size:12px; }
.avatar { width:64px; height:64px; flex:none; border-radius:50%; display:inline-block; background: #7bc862 url('/assets/mock-news-grid.png') 100% 100% / 210px 210px; border: 1px solid rgba(255,255,255,.88); }
.avatar-small { width:38px; height:38px; background-size:126px 126px; }
.search { width:312px; height:36px; display:flex; gap:9px; align-items:center; background:#f1f4f6; border-radius:6px; color:#8197af; padding:0 11px; }
.search span { font-size:26px; transform:rotate(-20deg); line-height:1; }.search input { width:100%; outline:0; border:0; color:#212121; background:transparent; font-size:14px; }
.join { border:0; border-radius:5px; color:#fff; background:#4a95de; font-size:12px; height:32px; padding:0 15px; font-weight:600; }.join.joined,.download.joined { background:#315c41; }
.join-mobile { display:none; }
.layout { position:relative; z-index:1; width:832px; margin:0 auto; display:grid; grid-template-columns:440px 312px; gap:24px; align-items:start; }
.detail-layout { width:440px; grid-template-columns:440px; }
.feed { padding:20px 0 48px; }.load-old { color:#aaa; text-align:center; font-size:12px; padding:10px; }.date { color:#a1a1a1; font-size:14px; text-align:center; padding:15px 0 11px; }
.post { display:grid; grid-template-columns:45px 1fr; margin:0 0 12px; align-items:start; }.post-side { padding-top:0; }
.bubble { position:relative; background:#fff; border:1px solid #d7e3ec; border-radius:0 8px 8px 8px; overflow:visible; box-shadow:0 1px 2px #6c829633; }.bubble::before { content:""; position:absolute; top:-1px; left:-9px; width:0; height:0; border-top:0 solid transparent; border-bottom:11px solid transparent; border-right:9px solid #fff; filter:drop-shadow(-1px 0 #d7e3ec); }.post-author { height:33px; display:flex; align-items:center; padding:0 12px; color:#4fad2d; font-size:13px; font-weight:600; }
.media { width:100%; height:226px; display:block; border:0; background-image:url('/assets/mock-news-grid.png'); background-size:200% 200%; opacity:1; }.media-city { background-image:url('/assets/message-image.jpg'); background-size:cover; background-position:center; }.media-site { background-position:100% 0; }.media-chart { background-position:0 100%; }.media-map { background-position:100% 100%; }
.post-copy { padding:8px 12px 0; color:#212121; font-size:14px; line-height:1.48; }.post-copy p { margin:9px 0 0; }.read-more { color:#2481cc; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }.tag { border:0; padding:0; background:transparent; color:#2481cc; font-weight:500; }.post-title { font-weight:500; }.follow { font-weight:500; }.follow span { color:#2481cc; font-size:20px; vertical-align:-2px; }
.post-footer { min-height:37px; padding:7px 12px 8px; display:flex; justify-content:space-between; align-items:center; gap:9px; }.reactions { display:flex; gap:5px; }.reactions button { border:0; border-radius:12px; padding:3px 7px; background:#eef4f8; color:#4d6b83; font-size:12px; }.meta { color:#8197af; font-size:11px; white-space:nowrap; }
.about-card { position:sticky; top:70px; margin-top:0; height:406px; background:#fff; border:1px solid #d7e3ec; border-radius:8px; padding:20px 16px 17px; box-shadow:0 1px 2px #6c82961c; }.about-title { display:flex; gap:12px; align-items:center; }.about-title h1 { margin:0 0 3px; font-size:17px; font-weight:500; }.about-title a,.about-copy a,.tags { color:#2481cc; }.about-title a { font-size:14px; }.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:22px 0 16px; }.stats b,.stats span { display:block; }.stats b { font-size:15px; }.stats span { color:#738ca7; font-size:11px; margin-top:5px; }.about-copy { font-size:13px; line-height:1.45; }.about-copy p { margin:12px 0; }.download { width:100%; border:0; height:40px; border-radius:6px; background:#2481cc; color:#fff; font-weight:500; letter-spacing:.2px; margin:2px 0 17px; }nav { display:flex; gap:23px; padding:0 13px; }nav a { color:#738ca7; font-size:12px; }
.empty { padding:40px 0; text-align:center; color:#aaa; }.modal-backdrop { position:fixed; z-index:10; inset:0; display:grid; place-items:center; background:#000b; padding:24px; }.media-modal { width:min(760px, 90vw); aspect-ratio:1.25; position:relative; background-image:url('/assets/mock-news-grid.png'); background-size:200% 200%; box-shadow:0 16px 50px #000; }.media-modal.media-city { background-position:0 0; }.media-modal.media-site { background-position:100% 0; }.media-modal.media-chart { background-position:0 100%; }.media-modal.media-map { background-position:100% 100%; }.close { position:absolute; right:10px; top:10px; border:0; color:white; background:#0009; width:32px; height:32px; border-radius:50%; font-size:25px; }.modal-caption { position:absolute; bottom:0; left:0; right:0; padding:20px; background:linear-gradient(transparent,#000c); font-size:15px; }
@media (max-width: 760px) { .topbar { height:50px; }.topbar-inner { padding:0 14px; gap:10px; }.channel-mini { min-width:0; }.channel-mini b { font-size:14px; }.channel-mini .avatar { width:34px; height:34px; background-size:112px 112px; }.search { width:27px; padding:0; background:transparent; }.search input { display:none; }.search span { color:#2481cc; }.join-mobile { display:block; margin-left:auto; }.layout { display:block; width:100%; }.feed { padding:0 0 30px; }.about-card { display:none; }.load-old,.date { display:none; }.post { display:block; margin:0 0 2px; }.post-side { display:none; }.bubble { border-radius:0; box-shadow:none; }.bubble::before { display:none; }.post-author { height:31px; padding-left:12px; }.media { height:252px; }.post-copy { font-size:14px; padding:8px 11px 0; }.post-footer { padding:6px 11px 8px; }.background-pattern { inset:50px 0 0; opacity:1; } }