/* Start:/local/templates/main/css/style.css?175562812410284*/
/* style.css — image-based cards */
/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

:root{
  --bg: #ffffff;
  --bg-soft: #f6f7f9;
  --text: #0f172a;
  --muted: #5b6475;
  --accent: #2563eb;
  --card: #ffffff;
  --border: #e5e7eb;
  --ring: #93c5fd;
  --shadow: 0 10px 24px rgba(2,6,23,.08);
  --radius: 16px;
}

/* BG cascade fix */
body, .page { background: var(--bg); color: var(--text); }
body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.6; }
.page{ min-height: 100dvh; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.topbar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border); }
.nav { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .2px; }
.logo-mark{ width: 32px; height: 32px; border-radius: 8px; background: conic-gradient(from 180deg at 50% 50%, var(--accent), #7c3aed, var(--accent)); box-shadow: var(--shadow); }
.logo-text{ font-size: 18px; }

.search{ flex:1; display:flex; align-items:center; gap:8px; max-width:580px; margin:0 12px; background:var(--bg-soft); border:1px solid var(--border); border-radius:999px; padding:8px 12px }
.search input{ border:none; outline:none; background:transparent; width:100% }
.search:focus-within{ box-shadow:0 0 0 3px var(--ring) }

.nav-links{ display:flex; gap:12px; color:var(--muted) }
.nav-links a{ padding:8px 10px; border-radius:10px }
.nav-links a:hover{ background: var(--bg-soft); color: var(--text) }

.hero{ position:relative; padding:52px 0 24px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,rgba(124,58,237,.06),transparent) }
.hero h1{ font-size: clamp(28px, 4.5vw, 44px); line-height:1.15; margin: 0 0 10px; }
.hero p{ margin:0; color: var(--muted); font-size:clamp(14px, 1.9vw, 18px) }
.hero-quick{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-top: 18px }
.chip{ display:flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--card); border-radius:999px; padding:10px 12px }
.chip .dot{ width:8px; height:8px; border-radius:999px; background:var(--accent) }

.section{ padding: 26px 0; }
.page-title{ font-size: 22px; margin: 0 0 12px; }

.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px }

.category-card{ grid-column:span 3; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition: transform .2s ease }
.category-card:hover{ transform: translateY(-3px) }
@media (max-width:1024px){ .category-card{ grid-column: span 4 } }
@media (max-width:768px){ .category-card{ grid-column: span 6 } }
@media (max-width:520px){ .category-card{ grid-column: span 12 } }
.category-card img.thumb-wide{ width:100%; aspect-ratio: 16 / 10; object-fit: cover; }

.category-body{ padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px }
.category-title{ font-weight:700 }
.count{ color: var(--muted); font-size:14px }

.cards .card{ grid-column:span 3; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .2s ease }
.cards .card:hover{ transform: translateY(-3px) }
@media (max-width:1024px){ .cards .card{ grid-column: span 4 } }
@media (max-width:768px){ .cards .card{ grid-column: span 6 } }
@media (max-width:520px){ .cards .card{ grid-column: span 12 } }

.card img.thumb-square{ width:100%; aspect-ratio: 1 / 1; object-fit: cover; }

.badges{ position:absolute; left:10px; top:10px; display:flex; gap:6px }
.badge{ font-size:12px; background:rgba(255,255,255,.9); padding:4px 8px; border-radius:999px; border:1px solid var(--border) }
.card-body{ padding:12px 14px; display:flex; flex-direction:column; gap:8px }
.card-title{ font-weight:700 }
.meta{ display:flex; gap:10px; color:var(--muted); font-size:13px }
.actions{ display:flex; gap:8px; margin-top:auto }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--bg-soft) }
.btn.primary{ background: var(--accent); color:#fff; border-color: transparent }
.more{ margin-top:14px; display:flex; justify-content:center }
.more a{ display:inline-block; border:1px solid var(--border); background:var(--card); padding:12px 16px; border-radius:12px }

/* Breadcrumbs, detail, etc. (short) */
.breadcrumbs{ font-size:14px; color: var(--muted); padding: 14px 0; }
.sep{ margin: 0 6px; opacity:.6; }
.detail{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
@media (max-width: 980px){ .detail{ grid-template-columns: 1fr; } }
.preview img{ width:100%; aspect-ratio:1/1; object-fit: cover; border-radius: 12px; border:1px solid var(--border) }
.downloads, .info{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; }
.btns{ display:flex; flex-wrap:wrap; gap:8px; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{ border:1px solid var(--border); background: var(--card); padding:8px 10px; border-radius:999px; color: var(--muted) }

footer{ border-top:1px solid var(--border); margin-top: 28px }
.footer-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px; padding:24px 0 }
.foot-col{ grid-column: span 3 }
@media (max-width:920px){ .foot-col{ grid-column: span 6 } }
@media (max-width:520px){ .foot-col{ grid-column: span 12 } }
.foot-title{ font-weight: 800; margin-bottom: 10px }
.foot-links{ display:flex; flex-direction:column; gap:8px; color: var(--muted) }


/* ===== Dark theme (CSS-only toggle) ===== */
#theme-toggle:checked ~ .page{
  --bg:#0b0f1a;
  --bg-soft:#0f172a;
  --text:#e5e7eb;
  --muted:#a7b0c2;
  --accent:#60a5fa;
  --card:#0b1220;
  --border:#1f2937;
  --ring:#1d4ed8;
  --shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* Topbar translucency in dark */
#theme-toggle:checked ~ .page .topbar{ background: rgba(11,15,26,.9); border-bottom-color: var(--border); }

/* Chips & badges contrast */
#theme-toggle:checked ~ .page .badge{ background: rgba(11,18,32,.9); color: var(--text); }
#theme-toggle:checked ~ .page .chip{ background: var(--card); border-color: var(--border); }

/* Toggle button */
.theme-switch{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background: var(--card); padding:8px 12px; border-radius:999px; cursor:pointer; }
.theme-switch:hover{ filter:brightness(.98); }


/* ===== Pretty toggle (Sun/Moon) ===== */
.toggle{ --w:56px; --h:30px; --p:3px; --r:14px; position:relative; display:inline-flex; align-items:center; gap:8px; padding:0; width:var(--w); height:var(--h); border-radius:999px; background:var(--bg-soft); border:1px solid var(--border); cursor:pointer; user-select:none; transition:background .2s ease, border-color .2s ease }
.toggle .knob{ position:absolute; top:var(--p); left:var(--p); width:calc(var(--h) - var(--p)*2); height:calc(var(--h) - var(--p)*2); border-radius:999px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.15); transition: left .25s ease, background .2s ease }
.toggle .sun, .toggle .moon{ position:absolute; top:50%; transform:translateY(-50%); font-size:14px; opacity:.8 }
.toggle .sun{ left:8px }
.toggle .moon{ right:8px }

/* Move knob when checked */
#theme-toggle:checked + .page .topbar .toggle .knob{ left:calc(var(--w) - var(--h) + var(--p)) }
#theme-toggle:checked + .page .topbar .toggle{ background:#0f172a; border-color:var(--border) }
#theme-toggle:checked + .page .topbar .toggle .knob{ background:#111827 }

/* Ensure layout for header */
.topbar .toggle{ margin-left:8px }


/* Prefer dark on initial paint for header toggle visuals */
@media (prefers-color-scheme: dark){
  .topbar .toggle{ background:#0f172a; border-color:#1f2937 }
  .topbar .toggle .knob{ background:#111827 }
}


/* ===== JS-driven dark theme (body.dark) ===== */
body.dark .page{
  --bg:#0b0f1a;
  --bg-soft:#0f172a;
  --text:#e5e7eb;
  --muted:#a7b0c2;
  --accent:#60a5fa;
  --card:#0b1220;
  --border:#1f2937;
  --ring:#1d4ed8;
  --shadow: 0 10px 26px rgba(0,0,0,.35);
}
body.dark .topbar{ background: rgba(11,15,26,.9); border-bottom-color: var(--border); }
body.dark .badge{ background: rgba(11,18,32,.9); color: var(--text); }
body.dark .chip{ background: var(--card); border-color: var(--border); }

/* Toggle visuals when dark (knob to the right) */
body.dark .topbar .toggle .knob{ left:calc(var(--w) - var(--h) + var(--p)); background:#111827 }
body.dark .topbar .toggle{ background:#0f172a; border-color:var(--border) }

body, .page { transition: background-color .25s ease, color .25s ease; }

/* Download button style */
.download-btn {
  display:inline-block;
  margin: 16px 0;
  padding: 12px 20px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.download-btn:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

a.btn.primary.block {
  display: inline-flex;          /* делаем flex */
  align-items: center;           /* центрируем по вертикали */
  justify-content: center;       /* центрируем по горизонтали */
  padding: 20px 40px;            /* увеличенные отступы (↑↓ 20px, ←→ 40px) */
  font-size: 18px;               /* чуть больше текст */
  line-height: 1.2;
  border-radius: 8px;            /* скругление */
  background-color: #007bff;     /* цвет как у Bootstrap primary */
  color: #fff;
  text-decoration: none;         /* убираем подчёркивание */
  transition: background 0.3s;
}

a.btn.primary.block:hover {
  background-color: #0056b3;     /* цвет при наведении */
}
.red
{
  color:red;
}

/* End */
/* /local/templates/main/css/style.css?175562812410284 */