:root{
  --bg: var(--tg-theme-bg-color, #0f1116);
  --text: var(--tg-theme-text-color, #eceff4);
  --hint: var(--tg-theme-hint-color, #a3a3a3);
  --card: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.15);
  --btn: var(--tg-theme-button-color, #2a9d8f);
  --btn-text: var(--tg-theme-button-text-color, #fff);
  --danger: #ef4444;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:linear-gradient(to bottom, rgba(0,0,0,.25), transparent), var(--bg);backdrop-filter: blur(8px);z-index:2}
.pill{background:var(--card);border:1px solid var(--border);padding:6px 10px;border-radius:999px;display:flex;gap:6px;align-items:center}
.ghost{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:12px;padding:8px 12px;cursor:pointer}
.primary{background:var(--btn);color:var(--btn-text);border:none;border-radius:12px;padding:8px 12px;cursor:pointer}
.grid{
  display:grid;
  /* сколько влезет колонок; минимум ~160–220px на плитку */
  grid-template-columns: repeat(auto-fit, minmax(clamp(160px, 30vw, 220px), 1fr));
  gap: clamp(8px, 2vw, 14px);
  /* убираем жесткий max-width, чтобы сетка дышала */
  max-width: none;
  margin: 16px auto;
  padding: 0 14px;
  align-items: stretch;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  gap: 10px;
  cursor: pointer;
  transition: transform .06s;

  /* одинаковая форма */
  flex-direction: column;
  justify-content: center;

  /* вместо aspect-ratio */
  min-height: clamp(60px, 12vh, 100px);
}

.card .icon{ font-size: clamp(22px, 4.5vw, 32px); }
.hint{ font-size: clamp(12px, 1.8vw, 14px); }
.btn{display:inline-block;padding:10px 14px;border-radius:12px;background:var(--btn);color:var(--btn-text);text-decoration:none;font-weight:700}
.panel{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.panel header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);position:static;background:transparent;backdrop-filter:none}
.panel h3{margin:0;font-size:16px}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--danger);color:#fff;font-weight:700;font-size:12px;vertical-align:middle;margin-left:8px}
.newslist{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto}
.newslist li{display:flex;gap:10px;padding:10px 12px;border-bottom:1px dashed var(--border);align-items:flex-start}
.newslist li:last-child{border-bottom:none}
.newslist .dot{width:8px;height:8px;border-radius:999px;background:var(--danger);margin-top:9px;flex:0 0 auto}
.newslist .dot.read{background:transparent;border:1px solid var(--border)}
.newslist .meta{font-size:12px;color:var(--hint)}