/* Midnight — generated for maximhot.ru from crm_site_templates.midnight
   Do not hand-edit: regenerate with theme-render.php after changing the spec. */
:root{
  --bg:#1e1e28;
  --surface:#272733;
  --accent:#e0356b;
  --text:#f2f2f5;
  --muted:#9a9aa8;
  --radius:14px;
  --gap:12px;
  --card-ratio:3/2;
  --grid-min:180px;
  --grid-min-wide:220px;
  --pad:12px;
}
html,body{background:var(--bg);color:var(--text);
  font-family:Roboto, system-ui, sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.muted,.small-muted{color:var(--muted)}

/* card grid — mobile first */
#thumbs{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(var(--grid-min),1fr));
  gap:var(--gap)}
@media(min-width:900px){
  #thumbs{grid-template-columns:repeat(auto-fill,minmax(var(--grid-min-wide),1fr))}
}
#thumbs li{margin:0;padding:0}
#thumbs li a{display:flex;flex-direction:column;border-radius:var(--radius);
  overflow:hidden;background:var(--surface);
  transition:transform .14s ease,box-shadow .14s ease}
#thumbs li a:hover{transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.35)}
#thumbs li a picture,.thumb{display:block;width:100%;
  aspect-ratio:var(--card-ratio);background:#000;overflow:hidden;position:relative}
#thumbs li a picture img,.thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* title + meta */
.card-body{padding:var(--pad)}
.card-title{font-size:14px;line-height:1.3;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{font-size:12px;color:var(--muted);margin-top:4px}
/* chrome: header / footer / buttons / titles */
:root{ --card:#272733; }
header{background:#272733 !important;border-bottom:1px solid rgba(128,128,128,.18)}
header a,header p,header span{color:#f2f2f5}
footer{background:#272733 !important;border-top:1px solid rgba(128,128,128,.18)}
footer p,footer a,footer span{color:#9a9aa8 !important}
.btn-link{background:#e0356b !important;color:#1e1e28 !important;
  border-radius:calc(var(--radius) - 4px)}
.btn-link:hover{filter:brightness(1.08)}
.ttr{color:#f2f2f5 !important;background:#272733}
.ttr:hover{color:#e0356b !important}
/* accents */
.btn,.pill-accent{background:var(--accent);color:#1e1e28;
  border-radius:999px;padding:6px 14px;font-weight:700;display:inline-block}
h1,h2,h3{color:var(--text)}
h2 span,.accent{color:var(--accent)}