/* Portions Copyright 2026 The Hollycast Authors */

:root {
  --accent: #5f7cff;
  --accent-rgb: 95, 124, 255;
  --hc-line: rgba(153, 174, 207, 0.18);
  --hc-line-strong: rgba(153, 174, 207, 0.3);
  --hc-text: #f3f6fc;
  --hc-muted: #9aa9bf;
}

body.theme-red { --accent: #d55364; --accent-rgb: 213, 83, 100; }
body.theme-yellow { --accent: #d6cf55; --accent-rgb: 214, 207, 85; }
body.theme-green { --accent: #72c2a8; --accent-rgb: 114, 194, 168; }

html { scroll-behavior: smooth; }

html body {
  --max: 1380px;
  min-height: 100vh;
  color: var(--hc-text);
  background: linear-gradient(180deg, #aeb7c0 0%, #c8cdd1 46%, #e3e5e5 100%);
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}

body .shell { width: min(calc(100% - 40px), var(--max)); }

body .spine {
  border-bottom: 1px solid var(--hc-line);
  background: rgba(8, 14, 24, 0.96);
  box-shadow: 0 8px 30px rgba(4, 8, 15, 0.16);
  backdrop-filter: blur(16px);
}

body .spine-inner { min-height: 68px; gap: 22px; }

body .brand {
  flex: 0 0 auto;
  gap: 11px;
  color: var(--hc-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 650;
}

body .brand .swirl {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.72);
  color: #fff;
  font-family: inherit;
  font-weight: 500;
}

body .brand small {
  margin-top: 2px;
  color: var(--hc-muted);
  font: 600 9px/1.15 inherit;
  letter-spacing: .08em;
}

body .tabs {
  flex: 1 1 auto;
  gap: 3px;
  justify-content: center;
}

body .tabs a {
  position: relative;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: #aebbd0;
  font: 600 12px/1 inherit;
  letter-spacing: 0;
  text-transform: none;
  transition: color 140ms ease, background 140ms ease;
}

body .tabs a:hover,
body .tabs a[aria-current="page"] {
  color: #fff;
  background: rgba(255,255,255,.06);
}

body .tabs a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 4px;
  left: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

body .cta,
body .module-cta {
  border: 1px solid rgba(var(--accent-rgb), .48);
  border-radius: 6px;
  background: rgba(var(--accent-rgb), .12);
  box-shadow: none;
  color: #f7f9ff;
  font-family: inherit;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  transition: background 140ms ease, border-color 140ms ease;
}

body .cta:hover,
body .module-cta:hover {
  border-color: rgba(var(--accent-rgb), .8);
  background: rgba(var(--accent-rgb), .2);
}

body .theme-picker { flex: 0 0 auto; gap: 7px; }
body .theme-dot {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
body .theme-dot:hover { transform: scale(1.12); }
body .theme-dot.active {
  box-shadow: 0 0 0 2px #0b1220, 0 0 0 3px rgba(255,255,255,.72);
}

body .case {
  margin: 28px auto 34px;
  border: 1px solid rgba(126, 146, 177, .34);
  border-radius: 8px;
  background: #0a111d;
  box-shadow: 0 22px 60px rgba(23, 32, 43, .2);
}

body .case-top {
  min-height: 38px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--hc-line);
  background: rgba(18, 27, 43, .96);
}

body .case-top strong {
  color: #b9c6d9;
  font: 650 11px/1 inherit;
  letter-spacing: .08em;
}

body .case-top .badge-row { display: none; }

body .hero { padding: 42px 34px 24px; }
body h1 {
  color: var(--hc-text);
  font-family: inherit;
  font-weight: 680;
  letter-spacing: 0;
}
body .lede { color: var(--hc-muted); }

/* Homepage cover */
body .cover {
  grid-template-columns: 54px 1fr;
  min-height: 390px;
  border-bottom: 1px solid var(--hc-line);
}

body .spine-strip {
  border-right: 1px solid var(--hc-line);
  background: rgba(var(--accent-rgb), .08);
}

body .spine-label {
  color: rgba(221, 229, 241, .48);
  font: 600 10px/1 inherit;
  letter-spacing: .12em;
}

body .front {
  padding: 48px 42px;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .85fr);
  gap: 56px;
  background: #0a111d;
  align-items: center;
}

body .front .eyebrow {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font: 650 11px/1.2 inherit;
  letter-spacing: .08em;
}

body .front h1 {
  margin: 15px 0 14px;
  font-size: clamp(3.2rem, 6vw, 5.8rem);
  line-height: .92;
}

body .front .lede {
  max-width: 52ch;
  color: #c1cada;
  font-size: 17px;
  line-height: 1.65;
}

body .quick { margin-top: 25px; gap: 18px; }
body .quick span {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #8999b0;
  font-size: 12px;
}

body .front-panel {
  padding: 20px;
  border: 1px solid var(--hc-line-strong);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  box-shadow: none;
}

body .front-panel h3,
body .panel h2,
body .branch h2,
body .download-branch h3 {
  color: #bac6d8;
  font-family: inherit;
  font-weight: 650;
  letter-spacing: .08em;
}

body .meter-grid { gap: 8px; background: transparent; }
body .meter {
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--hc-line);
  border-radius: 5px;
  background: #0b1321;
}
body .meter b { color: #fff; font-size: 18px; }
body .meter span { color: #8797ae; font-size: 10px; }

/* Content modules */
body .sections {
  padding: 34px 32px 42px;
  gap: 34px;
  background: #0d1522;
}

body .module {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body .module-head {
  padding: 0 0 11px;
  border: 0;
  border-bottom: 1px solid var(--hc-line-strong);
  background: transparent;
}

body .module-head h2 {
  color: #f0f3f8;
  font: 650 13px/1.2 inherit;
  letter-spacing: .06em;
}

body .module-note { color: #7f8ea4; }
body .module-body { padding: 14px 0 0; }

body .item,
body .quick-card,
body .video-item,
body .gallery-feature,
body .gallery-item,
body .forum-post,
body .download-branch,
body .link-row,
body .panel,
body .branch,
body .doc,
body .thread,
body .stat,
body .category,
body .video-card,
body .card,
body .image-card,
body .row {
  border-color: var(--hc-line);
  border-radius: 6px;
  background: rgba(7, 13, 23, .58);
  box-shadow: none;
}

body a.quick-card,
body a.video-item,
body a.video-card,
body a.card,
body a.image-card {
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

body a.quick-card:hover,
body a.video-item:hover,
body a.video-card:hover,
body a.card:hover,
body a.image-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), .48);
  background: rgba(var(--accent-rgb), .07);
}

body .quick-card { border-top: 2px solid var(--accent); }
body .quick-card:nth-child(2) { border-top-color: var(--dc-red); }
body .quick-card:nth-child(3) { border-top-color: var(--dc-yellow); }
body .quick-card:nth-child(4) { border-top-color: var(--dc-green); }

body .panel h2,
body .branch h2,
body .download-branch h3 {
  border-bottom-color: var(--hc-line);
  background: rgba(255,255,255,.025);
}

body .go,
body .dl,
body .post-badge,
body .stat-badge,
body .download-badge,
body .copy-btn,
body .gallery-nav button,
body .cat,
body .chip,
body .pill,
body .action,
body .link,
body .pager button {
  border-color: var(--hc-line-strong);
  border-radius: 5px;
  background: rgba(255,255,255,.035);
  color: #c8d2e0;
  font-family: inherit;
  letter-spacing: 0;
}

body footer,
body .footer { color: rgba(46, 58, 72, .48); }

body a:focus-visible,
body button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body *, body *::before, body *::after { transition: none !important; }
}

@media (max-width: 1050px) {
  body .spine-inner { padding: 10px 0; flex-wrap: wrap; gap: 10px 16px; }
  body .tabs { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  body .front { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 700px) {
  html body { font-size: 14px; }
  body .shell { width: min(calc(100% - 20px), var(--max)); }
  body .spine-inner { min-height: 60px; }
  body .brand .swirl { width: 30px; height: 30px; }
  body .cta { display: none; }
  body .theme-picker { margin-left: auto; }
  body .case { margin: 14px auto 24px; }
  body .case-top { padding-inline: 13px; }
  body .cover { grid-template-columns: 1fr; min-height: 0; }
  body .spine-strip { display: none; }
  body .front { padding: 38px 22px 28px; }
  body .front h1 { font-size: clamp(3rem, 17vw, 4.4rem); }
  body .front .lede { font-size: 15px; }
  body .hero { padding: 32px 20px 18px; }
  body .sections { padding: 28px 18px 34px; gap: 30px; }
  body .module-head { align-items: flex-start; flex-direction: column; }
  body .module-note { font-size: 11px; }
  body .news,
  body .quick-grid,
  body .media-grid-home,
  body .downloads-layout,
  body .split,
  body .grid,
  body .layout { grid-template-columns: 1fr; }
}