@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap");

/* v120: self-hosted user-owned Scratchmeow5 font.
   It is intentionally scoped ONLY to the sidebar. Page headings, the top
   header, buttons, project content and admin forms keep the normal site font. */
@font-face {
  font-family: "Scratchmeow5";
  src:
    url("../fonts/Scratchmeow5-Regular.woff2") format("woff2"),
    url("../fonts/Scratchmeow5-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

.app-sidebar .brand strong,
.app-sidebar .sidebar-nav a span {
  font-family: "Scratchmeow5", "Rajdhani", "Arial Narrow", Arial, sans-serif;
  font-weight: 400;
  font-synthesis: none;
}

.app-sidebar .brand strong {
  line-height: 1.05;
  letter-spacing: .025em;
}

.app-sidebar .sidebar-nav a span {
  min-width: 0;
  line-height: 1.12;
  letter-spacing: .01em;
}

/* v128: Scratchmeow5 sidebar text is genuinely 20px. The previous larger
   rule appeared before the base navigation rule and was overwritten back to
   13px. Both rules now agree, so browser refresh actually shows the change. */
.sidebar-nav a {
  gap: 10px;
  padding-inline: 12px;
  font-size: 20px;
  letter-spacing: 0;
}
.sidebar-nav a span {
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}
.sidebar-nav a svg {
  width: 18px;
  height: 18px;
}

:root {
  --bg: #05040b;
  --bg-2: #090712;
  --panel: rgba(12, 9, 22, .94);
  --panel-2: rgba(18, 12, 31, .94);
  --line: rgba(202, 174, 255, .18);
  --line-strong: rgba(176, 105, 255, .48);
  --violet: #9d46ff;
  --violet-2: #6e26e8;
  --pink: #e95cff;
  --cyan: #62d9ff;
  --green: #73e7a5;
  --red: #ff416d;
  --text: #f7f1ff;
  --muted: #b9aecb;
  --soft: #867a99;
  --shadow: 0 20px 55px rgba(0, 0, 0, .36);
  --sidebar: 252px;
  --radius: 12px;
  --font: "Rajdhani", "Arial Narrow", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  background:
    radial-gradient(circle at 82% 4%, rgba(118, 32, 255, .16), transparent 29rem),
    radial-gradient(circle at 8% 60%, rgba(80, 16, 155, .12), transparent 32rem),
    linear-gradient(180deg, #07050e, #040309 75%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .34;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, #000, transparent 78%);
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  display: flex;
  width: var(--sidebar);
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(7,5,15,.99), rgba(5,4,11,.98));
  box-shadow: 18px 0 54px rgba(0,0,0,.24);
}
.brand {
  display: flex;
  height: 78px;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  color: #fff;
  white-space: nowrap;
}
.brand img { width: 38px; height: 38px; border-radius: 50%; filter: drop-shadow(0 0 14px rgba(173,84,255,.48)); }
.brand strong { font-size: 1.58rem; font-weight: 700; letter-spacing: .03em; }
.sidebar-nav { display: grid; gap: 6px; padding: 20px 12px; }
.sidebar-nav a {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #c7bdd5;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.sidebar-nav a svg { width: 18px; height: 18px; flex: 0 0 auto; stroke-width: 1.8; }
.sidebar-nav a .sidebar-image-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(157,70,255,.16));
}
.sidebar-nav a:hover { color: #fff; background: rgba(139,61,255,.1); border-color: rgba(180,115,255,.18); }
.sidebar-nav a.active {
  color: #fff;
  border-color: rgba(199,135,255,.72);
  background: linear-gradient(90deg, rgba(136,45,255,.42), rgba(113,23,218,.14));
  box-shadow: inset 3px 0 0 #c278ff, 0 0 24px rgba(122,34,255,.16);
}
.sidebar-footer { margin-top: auto; padding: 16px 20px 24px; color: var(--soft); }
.sidebar-chibi { display: block; width: 118px; margin: 0 auto 4px; opacity: .8; filter: drop-shadow(0 0 20px rgba(137,57,255,.3)); }
.sidebar-socials { display: flex; justify-content: center; gap: 12px; margin: 8px 0 13px; }
.sidebar-socials a { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: #d8c9eb; }
.sidebar-footer small { display: block; text-align: center; font-size: .75rem; }

.app-shell { min-width: 0; margin-left: var(--sidebar); }
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  min-height: 78px;
  grid-template-columns: minmax(240px, 480px) 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 12px 26px;
  border-bottom: 1px solid var(--line);
  background: rgba(5,4,11,.88);
  backdrop-filter: blur(18px);
}
.mobile-menu { display: none !important; }
.mobile-brand { display: none; color: #fff; font-size: 1.15rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.search-button {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: var(--soft);
  cursor: pointer;
}
.search-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-spacer { min-width: 0; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.icon-button, .top-link, .live-chip {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: #e6dff2;
  font-weight: 600;
  white-space: nowrap;
}
.icon-button { width: 42px; padding: 0; cursor: pointer; }
.top-link, .live-chip { padding: 0 14px; }
.live-chip { border-color: rgba(168,88,255,.45); background: linear-gradient(135deg, rgba(145,48,255,.28), rgba(92,28,186,.16)); }
.live-chip.live { border-color: rgba(255,65,109,.62); box-shadow: 0 0 24px rgba(255,65,109,.16); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #81778c; }
.live-chip.live .live-dot { background: var(--red); box-shadow: 0 0 12px var(--red); }

.page-content { width: min(1540px, calc(100% - 42px)); margin: 0 auto; padding: 24px 0 50px; }
.page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.page-title-row h1 { margin: 0; font-size: clamp(2rem, 3vw, 3rem); line-height: 1; font-weight: 700; letter-spacing: .015em; }
.page-title-row p { max-width: 760px; margin: 7px 0 0; color: var(--muted); }
.eyebrow { margin: 0 0 6px; color: #c98bff; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.dashboard-top { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:16px; align-items:stretch; }
.dashboard-top > .panel { height:100%; }
.dashboard-columns { display:grid; grid-template-columns:minmax(280px,.85fr) minmax(440px,1.35fr) minmax(280px,.85fr); gap:16px; margin-top:16px; align-items:start; }
.dashboard-column { display:grid; gap:16px; align-content:start; min-width:0; }
.panel {
  position: relative;
  min-width: 0;
  align-self: start;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 35%), var(--panel);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.035);
}
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(176,105,255,.025);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.panel-head a, .panel-head button { border: 0; background: none; color: #bf77ff; font-size: .8rem; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.panel-body { min-width: 0; padding: 17px; }

.live-panel { min-height:340px; }

.profile-layout { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 22px; align-items: center; min-height: 270px; }
.profile-avatar-wrap { position: relative; width: 154px; height: 154px; margin: auto; border-radius: 50%; padding: 5px; background: conic-gradient(from 10deg, #e05cff, #7b33ff, #56c8ff, #e05cff); box-shadow: 0 0 34px rgba(157,70,255,.26); }
.profile-avatar { width: 100%; height: 100%; border: 5px solid #0b0714; border-radius: 50%; object-fit: cover; background: #100a1b; }
.profile-copy { min-width: 0; }
.profile-copy h2 { margin: 0; font-size: clamp(2rem, 3vw, 2.85rem); line-height: 1; font-weight: 700; white-space: nowrap; }
.profile-copy .role { margin: 7px 0 13px; color: #d260ff; font-size: 1.18rem; font-weight: 600; }
.profile-copy .description { margin: 0; color: var(--muted); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag { display: inline-flex; min-height: 28px; align-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; color: #d8c9e9; font-size: .76rem; font-weight: 600; text-transform: uppercase; }
.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--line); }
.stat-strip article { min-width: 0; padding: 14px 12px; text-align: center; border-right: 1px solid var(--line); }
.stat-strip article:last-child { border-right: 0; }
.stat-strip small { display: block; color: var(--soft); font-size: .72rem; text-transform: uppercase; }
.stat-strip strong { display: block; margin-top: 4px; font-size: 1.38rem; white-space: nowrap; }

.live-visual { position: absolute; inset: 0; background-position: center; background-size: cover; }
.live-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,3,9,.9) 0%, rgba(4,3,9,.45) 54%, rgba(4,3,9,.16)), linear-gradient(0deg, rgba(4,3,9,.84), transparent 64%); }
.live-content { position: relative; z-index: 1; display: flex; min-height: 340px; flex-direction: column; justify-content: space-between; padding: 18px; }
.status-badge { display: inline-flex; width: fit-content; min-height: 30px; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; background: rgba(5,3,10,.72); font-size: .8rem; font-weight: 700; text-transform: uppercase; }
.status-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: #7f768b; }
.status-badge.live .dot { background: var(--red); box-shadow: 0 0 12px var(--red); }
.live-copy { max-width: 620px; }
.live-copy h2 { margin: 0 0 4px; font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.03; }
.live-copy p { margin: 0 0 14px; color: #cfc4dc; }
.button-row { display: flex; flex-wrap: wrap; gap: 9px; }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.045); color: #fff; font-weight: 700; cursor: pointer; }
.button.primary { border-color: rgba(196,126,255,.66); background: linear-gradient(135deg, #8d31f5, #5d20c9); box-shadow: 0 0 24px rgba(132,42,255,.18); }
.button:hover { transform: translateY(-1px); border-color: var(--line-strong); }

.mini-list { display: grid; gap: 10px; }
.mini-media { display: grid; grid-template-columns: 112px minmax(0,1fr) auto; gap: 12px; align-items: center; min-width: 0; padding: 8px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.mini-media:hover { border-color: var(--line); background: rgba(255,255,255,.025); }
.mini-media img { width: 112px; height: 64px; object-fit: cover; border-radius: 6px; background: #100b18; }
.mini-media-copy { min-width: 0; }
.mini-media h3 { margin: 0; overflow: hidden; color: #f2eafa; font-size: .98rem; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.mini-media p { margin: 5px 0 0; color: var(--soft); font-size: .78rem; }
.mini-media time { color: #b89dcf; font-size: .78rem; white-space: nowrap; }

.metric-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.metric { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); }
.metric small { display: block; color: var(--soft); font-size: .68rem; text-transform: uppercase; }
.metric strong { display: block; margin-top: 4px; overflow: hidden; font-size: 1.42rem; text-overflow: ellipsis; white-space: nowrap; }
.chart-wrap { min-height: 230px; }
.chart-wrap svg { display: block; width: 100%; height: 230px; overflow: visible; }
.chart-empty { display: grid; min-height: 210px; place-items: center; color: var(--soft); text-align: center; }

.steam-card { display: grid; gap: 14px; }
.steam-profile { display: grid; grid-template-columns: 78px minmax(0,1fr); gap: 13px; align-items: center; }
.steam-profile img { width: 78px; height: 78px; border: 1px solid var(--line); border-radius: 12px; object-fit: cover; }
.steam-profile h3 { margin: 0; font-size: 1.34rem; white-space: nowrap; }
.steam-profile p { margin: 4px 0 0; color: var(--muted); }
.info-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.info-pairs div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 7px; }
.info-pairs small { display: block; color: var(--soft); font-size: .67rem; text-transform: uppercase; }
.info-pairs strong { display: block; margin-top: 3px; overflow: hidden; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }

.game-mix { display: grid; gap: 12px; }
.game-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(120px, 2fr) auto; gap: 12px; align-items: center; }
.game-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-bar { height: 8px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.055); }
.game-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7b2aea, #dc5cff); box-shadow: 0 0 16px rgba(173,72,255,.28); }
.game-row em { color: #c8b5d9; font-style: normal; }
.clip-category-row {
  grid-template-columns: 34px minmax(0,1fr) auto;
  min-height: 56px;
  padding: 8px 0;
}
.clip-category-row + .clip-category-row { border-top: 1px solid var(--line); }
.clip-category-rank {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(213,96,255,.5);
  border-radius: 50%;
  color: #f2d7ff;
  background: rgba(147,42,234,.16);
  font-size: .78rem;
  font-weight: 800;
}
.clip-category-copy { min-width: 0; }
.clip-category-copy strong,
.clip-category-copy small { display: block; }
.clip-category-copy small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clip-category-row em { font-size: .8rem; white-space: nowrap; }
.content-category-row { grid-template-columns:34px minmax(0,1fr) auto auto; }
.content-format-badge { padding:5px 8px;border:1px solid rgba(213,96,255,.42);border-radius:999px;background:rgba(147,42,234,.1);color:#eed8ff;font-size:.7rem;font-weight:800;white-space:nowrap; }
@media(max-width:700px){.content-category-row{grid-template-columns:34px minmax(0,1fr) auto}.content-category-row .content-format-badge{grid-column:2}.content-category-row em{grid-column:3;grid-row:1}}

.community-list { display: grid; gap: 9px; }
.community-person { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; align-items: center; }
.community-person img { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; object-fit: cover; }
.community-person h3 { margin: 0; overflow: hidden; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.community-person p { margin: 2px 0 0; overflow: hidden; color: var(--soft); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.live-label { color: #ff6a8b; font-size: .72rem; font-weight: 700; text-transform: uppercase; }

.youtube-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.youtube-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); cursor: pointer; }
.youtube-card img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.youtube-card div { padding: 9px; }
.youtube-card h3 { display: -webkit-box; margin: 0; overflow: hidden; font-size: .86rem; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.youtube-card p { margin: 5px 0 0; color: var(--soft); font-size: .72rem; }

.page-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 16px; }
.page-grid > .wide { grid-column: span 12; }
.page-grid > .two-thirds { grid-column: span 8; }
.page-grid > .one-third { grid-column: span 4; }
.page-grid > .half { grid-column: span 6; }
.hero-page { min-height: 260px; }
.hero-page .live-content { min-height: 260px; }
.media-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.media-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); cursor: pointer; }
.media-card img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #100b18; }
.media-card-copy { padding: 12px; }
.media-card small { color: #c584ff; font-size: .68rem; text-transform: uppercase; }
.media-card h3 { display: -webkit-box; margin: 5px 0 7px; overflow: hidden; font-size: 1rem; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.media-card p { margin: 0; color: var(--soft); font-size: .8rem; }

.playlist-category { margin-top: 18px; }
.playlist-category:first-child { margin-top: 0; }
.category-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.category-head h2 { margin: 0; font-size: 1.4rem; }
.category-head p { margin: 4px 0 0; color: var(--muted); }
.playlist-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.playlist-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.playlist-card img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.playlist-card-copy { padding: 13px; }
.playlist-card h3 { margin: 0; font-size: 1.18rem; line-height: 1.15; }
.playlist-card p { display: -webkit-box; margin: 8px 0; overflow: hidden; color: var(--muted); font-size: .85rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.playlist-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.playlist-card-footer span { color: var(--soft); font-size: .78rem; }

.recommendations-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.recommendation-card { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 13px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.recommendation-card.live { border-color: rgba(255,65,109,.5); box-shadow: 0 0 24px rgba(255,65,109,.08); }
.recommendation-card img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.recommendation-card h3 { margin: 0; overflow: hidden; font-size: 1.16rem; text-overflow: ellipsis; white-space: nowrap; }
.recommendation-card p { display: -webkit-box; margin: 4px 0 8px; overflow: hidden; color: var(--muted); font-size: .82rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.recommendation-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--soft); font-size: .75rem; }

.steam-large { display: grid; grid-template-columns: 160px minmax(0,1fr); gap: 22px; align-items: center; }
.steam-large img { width: 160px; height: 160px; border: 1px solid var(--line); border-radius: 16px; object-fit: cover; }
.steam-large h2 { margin: 0; max-width: 100%; font-size: 2.05rem; white-space: normal; word-break: normal; overflow-wrap: normal; }
.settings-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.settings-list div { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); }
.settings-list small { display: block; color: var(--soft); text-transform: uppercase; }
.settings-list strong, .settings-list code { display: block; margin-top: 3px; color: #f4eaff; font-family: var(--font); font-size: 1rem; white-space: normal; word-break: normal; overflow-wrap: normal; }
.skin-form label { display: block; margin-bottom: 7px; color: #d8cbed; font-weight: 600; }
.skin-form textarea { width: 100%; min-height: 220px; resize: vertical; padding: 13px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: #080510; color: #f7f0ff; }
.skin-form textarea:focus { border-color: var(--line-strong); box-shadow: 0 0 0 3px rgba(157,70,255,.11); }

.copy-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; align-items:start; }
.copy-card { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.copy-card h2 { margin: 0 0 8px; font-size: 1.3rem; }
.copy-card p { margin: 0; color: var(--muted); }

.loading, .empty, .error { display: grid; min-height: 110px; place-items: center; padding: 18px; color: var(--soft); text-align: center; }
.error { color: #ff9db2; }
.skeleton { position: relative; overflow: hidden; background: rgba(255,255,255,.045); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); animation: shimmer 1.3s infinite; background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
@keyframes shimmer { to { transform: translateX(100%); } }

.search-modal, .media-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: start center;
  padding: 8vh 18px 30px;
  background: rgba(2,1,6,.82);
  backdrop-filter: blur(12px);
}
.search-box { width: min(620px,100%); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: #0a0712; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.search-box input { width: 100%; height: 56px; padding: 0 17px; border: 0; border-bottom: 1px solid var(--line); outline: 0; background: transparent; color: #fff; font-size: 1.05rem; }
.search-results { display: grid; max-height: 52vh; overflow-y: auto; padding: 8px; }
.search-results a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 8px; }
.search-results a:hover { background: rgba(157,70,255,.12); }
.media-dialog { width: min(1040px,100%); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: #07050d; box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.media-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.media-dialog-head h2 { margin: 0; overflow: hidden; font-size: 1.15rem; text-overflow: ellipsis; white-space: nowrap; }
.media-dialog iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; background: #000; }

@media (max-width: 1220px) {
  .media-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  :root { --sidebar: 0px; }
  .app-sidebar { width: 252px; transform: translateX(-105%); transition: transform .22s ease; }
  body.nav-open .app-sidebar { transform: translateX(0); }
  body.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.58); }
  .app-shell { margin-left: 0; }
  .app-topbar { grid-template-columns: auto auto minmax(0,1fr) auto; padding: 10px 14px; }
  .mobile-menu { display: inline-flex !important; }
  .mobile-brand { display: inline-flex; align-items: center; }
  .topbar-spacer { display: none; }
  .top-link { display: none; }
  .page-content { width: min(100% - 24px, 1100px); padding-top: 16px; }
  .page-grid > .two-thirds, .page-grid > .one-third, .page-grid > .half { grid-column: span 12; }
  .media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .playlist-grid, .recommendations-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .app-topbar { min-height: 66px; grid-template-columns: auto auto minmax(0,1fr) auto; gap: 8px; }
  .search-button { min-width: 0; }
  .search-button span { display: none; }
  .live-chip { width: 42px; padding: 0; }
  .live-chip span:last-child { display: none; }
  .page-title-row { align-items: flex-start; flex-direction: column; }
  .profile-layout { grid-template-columns: 1fr; text-align: center; }
  .profile-copy h2, .steam-large h2 { white-space: normal; overflow-wrap: normal; word-break: normal; }
  .profile-copy .description { max-width: 34rem; margin-inline: auto; }
  .tag-row, .button-row { justify-content: center; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .stat-strip article:nth-child(2) { border-right: 0; }
  .stat-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .metric-row { grid-template-columns: 1fr; }
  .mini-media { grid-template-columns: 92px minmax(0,1fr); }
  .mini-media img { width: 92px; height: 54px; }
  .mini-media time { display: none; }
  .media-grid, .playlist-grid, .recommendations-grid, .youtube-grid, .copy-grid, .settings-list { grid-template-columns: 1fr; }
  .steam-large { grid-template-columns: 1fr; text-align: center; }
  .steam-large img { margin: auto; }
  .game-row { grid-template-columns: minmax(100px,1fr) minmax(80px,1.3fr) auto; }
  .panel-head { align-items: flex-start; }
  .panel-head h2 { font-size: .95rem; }
  .live-copy h2 { font-size: 1.7rem; }
  .button-row { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
}


/* v2 restored content and source-level layout fixes */
.sidebar-socials a svg { width: 17px; height: 17px; stroke-width: 1.8; }
.page-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; width:min(1540px,calc(100% - 42px)); margin:0 auto; padding:22px 0 34px; border-top:1px solid var(--line); color:var(--soft); }
.page-footer div { display:flex; align-items:center; gap:12px; }
.page-footer strong { color:#f4eaff; font-size:1.15rem; }
.page-footer nav { display:flex; flex-wrap:wrap; gap:15px; }
.page-footer a:hover, .text-link:hover { color:#d596ff; }
.panel-note { margin:0 0 13px; color:var(--soft); font-size:.86rem; line-height:1.45; }
.content-section { margin-top:16px; }
.split-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
.column-stack { display:grid; gap:16px; align-content:start; min-width:0; }
.code-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.code-card { min-width:0; padding:16px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.02); }
.code-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.code-card h3 { margin:0 0 8px; font-size:1.24rem; }
.code-card pre { margin:12px 0; padding:14px; overflow:auto; border:1px solid var(--line); border-radius:8px; background:#050309; white-space:pre; overflow-wrap:normal; word-break:normal; }
.code-card code { color:#eadfff; font-family:Consolas,"Courier New",monospace; font-size:.84rem; }
.code-card p { margin:0; color:var(--muted); }
.button.compact { min-height:36px; padding:0 12px; }
.explanation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.explanation-grid > div { min-width:0; padding:13px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.02); }
.explanation-grid code { display:block; color:#d99aff; font-family:Consolas,"Courier New",monospace; font-size:.85rem; white-space:normal; overflow-wrap:break-word; word-break:normal; }
.explanation-grid p { margin:7px 0 0; color:var(--muted); }
.crosshair-grid { display:grid; grid-template-columns:1fr; gap:13px; }
.crosshair-grid .code-card { display:grid; grid-template-columns:minmax(160px,.5fr) minmax(0,1fr) auto; align-items:center; gap:18px; }
.crosshair-grid .code-card code { display:block; min-width:0; overflow-x:auto; white-space:nowrap; overflow-wrap:normal; word-break:normal; font-size:1rem; }
.crosshair-grid .button { margin:0; }
.notice { margin:15px 0 0; padding:12px 14px; border:1px solid rgba(229,190,93,.25); border-radius:8px; background:rgba(229,190,93,.06); color:#efe2b3; }
.biography-panel { max-width:1200px; }
.biography-copy { max-width:980px; columns:1; }
.biography-copy p { margin:0 0 1.1em; break-inside:avoid; color:#d9cfe6; font-size:1.05rem; line-height:1.62; }
.biography-copy .still-cat { color:#d99aff; font-size:1.35rem; font-weight:700; }
.about-support-grid { margin-top:16px; }
.text-link, .clickable-card span { display:inline-block; margin-top:12px; color:#c77cff; font-weight:700; }
.tool-link-grid, .support-link-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; align-items:start; }
.tool-link-card, .support-link-card { display:flex; min-width:0; gap:13px; padding:17px; border:1px solid var(--line); border-radius:9px; background:var(--panel); transition:border-color .16s ease, transform .16s ease; }
.tool-link-card:hover, .support-link-card:hover, .clickable-card:hover { transform:translateY(-2px); border-color:var(--line-strong); }
.tool-icon { display:grid; width:38px; height:38px; flex:0 0 auto; place-items:center; border:1px solid var(--line-strong); border-radius:9px; color:#d99aff; }
.tool-link-card h2, .support-link-card h2 { margin:0 0 7px; font-size:1.25rem; }
.tool-link-card p, .support-link-card p { margin:0; color:var(--muted); }
.tool-link-card span, .support-link-card span { display:inline-block; margin-top:11px; color:#c77cff; font-size:.84rem; font-weight:700; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.project-grid article { padding:15px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.02); }
.project-grid h3 { margin:0 0 8px; }
.project-grid p { color:var(--muted); }
.status-tag { color:#d99aff; font-size:.8rem; font-weight:700; text-transform:uppercase; }
.sponsor-copy { max-width:1150px; }
.sponsor-copy > p { color:#d9cfe6; font-size:1.03rem; line-height:1.58; }
.clickable-card { display:block; transition:border-color .16s ease, transform .16s ease; }
.games-panel .panel-body, .community-panel .panel-body { min-height:0; }
.game-mix { display:grid; gap:11px; }

@media (max-width: 1100px) {
  .tool-link-grid, .support-link-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-grid { grid-template-columns:1fr; }
}
@media (max-width: 900px) {
  .split-columns, .code-grid { grid-template-columns:1fr; }
  .crosshair-grid { grid-template-columns:1fr 1fr; }
  .page-footer { width:min(100% - 24px,1100px); }
}
@media (max-width: 620px) {
  .page-footer { align-items:flex-start; flex-direction:column; }
  .page-footer div { align-items:flex-start; flex-direction:column; gap:3px; }
  .biography-copy { columns:1; }
  .tool-link-grid, .support-link-grid, .crosshair-grid, .explanation-grid { grid-template-columns:1fr; }
  .steam-large h2 { font-size:1.65rem; }
}


/* v3 repaired dashboard components */
.profile-copy .description { max-width:520px; font-size:1rem; line-height:1.5; }
.mini-game { display:inline-flex; margin-bottom:4px; color:#cc8cff; font-size:.68rem; font-weight:700; text-transform:uppercase; }
.metric-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.metric-tab { min-width:0; padding:12px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.025); color:var(--text); text-align:left; cursor:pointer; }
.metric-tab:hover,.metric-tab.active { border-color:var(--line-strong); background:linear-gradient(135deg,rgba(141,49,245,.18),rgba(255,255,255,.025)); }
.metric-tab small,.metric-tab span { display:block; color:var(--soft); font-size:.68rem; text-transform:uppercase; }
.metric-tab strong { display:block; margin:3px 0; font-size:1.42rem; }
.chart-point { fill:#e05cff; stroke:#fff; stroke-width:1.5; cursor:pointer; transition:r .15s ease,fill .15s ease; }
.chart-point:hover,.chart-point:focus { r:7; fill:#62d9ff; outline:none; }

.cs2-top-columns { margin-bottom:16px; }
.crosshair-grid .notice { grid-column:1/-1; }

.about-feature-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr); gap:16px; align-items:start; }
.cat-family-feature { display:grid; grid-template-columns:minmax(260px,.75fr) minmax(0,1fr); align-items:stretch; min-height:420px; }
.cat-family-art { min-height:420px; overflow:hidden; background:radial-gradient(circle at 50% 35%,rgba(157,70,255,.28),transparent 55%); }
.cat-family-art img { width:100%; height:100%; object-fit:contain; object-position:center bottom; }
.cat-family-feature .panel-body { display:flex; flex-direction:column; justify-content:center; padding:32px; }
.cat-family-feature h2 { margin:0 0 12px; font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.05; }
.cat-family-feature p:not(.eyebrow) { margin:0; color:#d9cfe6; font-size:1.08rem; line-height:1.62; }

.tools-board { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:stretch; }
.tool-card-pro { display:grid; grid-template-columns:72px minmax(0,1fr); gap:16px; min-width:0; height:100%; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(135deg,rgba(157,70,255,.07),transparent 45%),var(--panel); box-shadow:var(--shadow); }
.tool-mark { display:grid; width:72px; height:72px; place-items:center; border:1px solid var(--line-strong); border-radius:16px; background:linear-gradient(135deg,rgba(157,70,255,.28),rgba(98,217,255,.08)); color:#fff; font-size:1.28rem; font-weight:700; letter-spacing:.04em; }
.tool-card-copy { display:flex; min-width:0; flex-direction:column; align-items:flex-start; }
.tool-card-copy h2 { margin:0 0 5px; font-size:1.35rem; }
.tool-card-copy p { margin:0 0 14px; color:var(--muted); }
.tool-card-copy .button { margin-top:auto; }

.project-showcase { display:grid; gap:16px; }
.project-feature { display:grid; grid-template-columns:90px minmax(0,1fr); gap:22px; padding:26px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(135deg,rgba(157,70,255,.11),transparent 42%),var(--panel); box-shadow:var(--shadow); }
.project-number { color:rgba(207,145,255,.42); font-size:3.2rem; font-weight:700; line-height:1; }
.project-feature h2 { margin:0 0 8px; font-size:clamp(1.55rem,2.6vw,2.25rem); }
.project-feature p:not(.eyebrow) { max-width:900px; margin:0; color:var(--muted); }
.project-points { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.project-points span,.sponsor-tags span { padding:7px 10px; border:1px solid var(--line); border-radius:7px; color:#ded1ed; font-size:.8rem; font-weight:600; }

.support-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 310px; min-height:360px; align-items:center; gap:20px; overflow:hidden; padding:38px; border:1px solid var(--line); border-radius:var(--radius); background:radial-gradient(circle at 75% 35%,rgba(157,70,255,.32),transparent 30rem),linear-gradient(135deg,rgba(157,70,255,.16),rgba(8,6,15,.96)); box-shadow:var(--shadow); }
.support-hero h1 { max-width:720px; margin:0 0 10px; font-size:clamp(2.4rem,4.8vw,4.5rem); line-height:.96; }
.support-hero p:not(.eyebrow) { max-width:760px; color:#d8cde5; font-size:1.08rem; }
.support-hero img { align-self:end; width:100%; max-height:330px; object-fit:contain; object-position:center bottom; }
.support-action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:start; }
.support-action { display:grid; grid-template-columns:54px minmax(0,1fr); gap:16px; min-height:220px; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); transition:transform .16s ease,border-color .16s ease; }
.support-action:hover { transform:translateY(-3px); border-color:var(--line-strong); }
.support-action>span { color:#ca8bff; font-size:1.45rem; font-weight:700; }
.support-action h2 { margin:0 0 8px; font-size:1.65rem; }
.support-action p:not(.eyebrow) { margin:0; color:var(--muted); }
.support-action strong { display:block; margin-top:24px; color:#d693ff; }
.support-action.primary-action { background:linear-gradient(135deg,rgba(141,49,245,.22),rgba(12,9,22,.96)); }
.sponsor-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr); gap:28px; align-items:start; }
.sponsor-copy { max-width:none; }
.sponsor-contact { display:grid; gap:16px; padding:20px; border:1px solid var(--line); border-radius:10px; background:rgba(157,70,255,.06); }
.sponsor-tags { display:flex; flex-wrap:wrap; gap:8px; }
.donation-terms { padding:18px 20px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.02); }
.donation-terms h2 { margin:0 0 6px; font-size:1.15rem; }
.donation-terms p { margin:0; color:var(--muted); }

.medal-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }
.medal-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); }
.medal-player { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#030205; }
.medal-player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.medal-card-copy { padding:18px; }
.medal-card-copy h2 { min-height:2.4em; margin:0 0 14px; font-size:1.35rem; line-height:1.2; }

.schedule-layout { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.schedule-list { display:grid; gap:10px; }
.schedule-item { display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:14px; align-items:center; padding:13px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.02); }
.schedule-item time { color:#c78cff; font-size:.86rem; }
.schedule-item h3 { margin:0; font-size:1.05rem; }
.schedule-item p { margin:3px 0 0; color:var(--soft); font-size:.82rem; }
.schedule-item>span { color:#d7c4e8; font-size:.78rem; font-weight:700; }

.gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.gallery-grid figure { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.gallery-grid img { display:block; width:100%; aspect-ratio:4/3; object-fit:contain; background:radial-gradient(circle,rgba(157,70,255,.18),transparent 60%); }
.gallery-grid figcaption { padding:13px; color:#dfd3ec; font-weight:600; }
.route-art { display:block; width:100%; max-height:520px; object-fit:cover; border-radius:9px; }
.route-copy { padding-top:18px; }

.page-content > * + * { margin-top:16px; }
.page-title-row + * { margin-top:0; }
.panel + .panel { margin-top:0; }
.copy-grid > *, .page-grid > *, .tool-link-grid > *, .support-link-grid > * { align-self:start; }

@media (max-width:1220px) {
  .dashboard-top { grid-template-columns:1fr; }
  .dashboard-columns { grid-template-columns:1fr 1fr; }
  .dashboard-column-wide { grid-column:1/-1; grid-row:1; }
  .medal-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .dashboard-columns,.about-feature-grid,.support-hero,.sponsor-layout,.schedule-layout { grid-template-columns:1fr; }
  .dashboard-column-wide { grid-column:auto; grid-row:auto; }
  .tools-board,.support-action-grid { grid-template-columns:1fr 1fr; }
  .cat-family-feature { grid-template-columns:1fr; }
  .cat-family-art { min-height:300px; }
  .support-hero img { max-height:260px; }
  .crosshair-grid .code-card { grid-template-columns:1fr; align-items:start; }
  .crosshair-grid .button { width:auto; }
}
@media (max-width:620px) {
  .metric-tabs,.tools-board,.support-action-grid,.medal-grid,.gallery-grid { grid-template-columns:1fr; }
  .tool-card-pro,.project-feature,.support-action { grid-template-columns:1fr; }
  .tool-mark { width:58px; height:58px; }
  .project-number { font-size:2.2rem; }
  .support-hero { padding:24px; }
  .support-hero h1 { font-size:2.5rem; }
  .schedule-item { grid-template-columns:1fr; gap:5px; }
  .medal-card-copy h2 { min-height:0; }
}


/* v4 tools: real logos, no letter placeholders */
.tool-logo-box {
  display:grid;
  width:72px;
  height:72px;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--line-strong);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(157,70,255,.22),rgba(98,217,255,.07));
}
.tool-logo {
  width:46px;
  height:46px;
  object-fit:contain;
  image-rendering:auto;
  filter:drop-shadow(0 0 12px rgba(168,88,255,.35));
}
.tool-actions { margin-top:auto; }
.tool-actions .button { margin-top:0; }

/* v4 projects: compact, visual, content-sized cards */
.project-intro-v4 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:15px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(90deg,rgba(157,70,255,.1),rgba(255,255,255,.018));
  color:#e8def3;
}
.project-intro-v4 span { color:var(--muted); text-align:right; }
.project-grid-v4 {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:start;
}
.project-card-v4 {
  align-self:start;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(157,70,255,.08),transparent 44%),var(--panel);
  box-shadow:var(--shadow);
  transition:transform .16s ease,border-color .16s ease;
}
.project-card-v4:hover { transform:translateY(-3px); border-color:var(--line-strong); }
.project-preview-v4 {
  display:block;
  width:100%;
  aspect-ratio:16/8.6;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:#07050d;
}
.project-preview-v4 img { display:block; width:100%; height:100%; object-fit:cover; }
.project-body-v4 { padding:20px; }
.project-body-v4 h2 { margin:0 0 8px; font-size:clamp(1.5rem,2.3vw,2rem); line-height:1.08; }
.project-body-v4 > p:not(.eyebrow) { margin:0; color:var(--muted); line-height:1.55; }
.project-actions-v4 { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.project-support-note { display:block; margin-top:9px; color:var(--soft); font-size:.76rem; }

@media (max-width:900px) {
  .project-grid-v4 { grid-template-columns:1fr; }
  .project-intro-v4 { align-items:flex-start; flex-direction:column; }
  .project-intro-v4 span { text-align:left; }
}
@media (max-width:620px) {
  .tool-logo-box { width:58px; height:58px; }
  .tool-logo { width:38px; height:38px; }
  .project-body-v4 { padding:17px; }
  .project-actions-v4 { flex-direction:column; }
  .project-actions-v4 .button { width:100%; }
}



/* v7: Games page responsive playlist layouts */
body[data-page="games"] [data-playlists] {
  width: 100%;
}

body[data-page="games"] .playlist-category {
  width: 100%;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .015);
}

body[data-page="games"] .playlist-category + .playlist-category {
  margin-top: 18px;
}

body[data-page="games"] .category-head {
  margin-bottom: 14px;
}

body[data-page="games"] .playlist-grid {
  width: 100%;
  align-items: stretch;
}

body[data-page="games"] .playlist-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

body[data-page="games"] .playlist-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="games"] .playlist-grid-four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="games"] .playlist-grid-many {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="games"] .playlist-card {
  height: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 44%),
    rgba(10, 7, 18, .96);
}

body[data-page="games"] .playlist-card-copy {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  padding: 16px;
}

body[data-page="games"] .playlist-card h3 {
  font-size: 1.32rem;
}

body[data-page="games"] .playlist-card-footer {
  margin-top: auto;
  padding-top: 12px;
}

/* One playlist must use the available width instead of sitting in a fake 3-column row. */
body[data-page="games"] .playlist-grid-single .playlist-card {
  display: grid;
  grid-template-columns: minmax(340px, 1.18fr) minmax(280px, .82fr);
  min-height: 285px;
}

body[data-page="games"] .playlist-grid-single .playlist-card > a {
  display: block;
  min-width: 0;
  height: 100%;
}

body[data-page="games"] .playlist-grid-single .playlist-card img {
  width: 100%;
  height: 100%;
  min-height: 285px;
  aspect-ratio: auto;
  object-fit: cover;
}

body[data-page="games"] .playlist-grid-single .playlist-card-copy {
  justify-content: center;
  padding: clamp(22px, 3vw, 38px);
}

body[data-page="games"] .playlist-grid-single .playlist-card h3 {
  font-size: clamp(1.55rem, 2.3vw, 2.15rem);
}

body[data-page="games"] .playlist-grid-single .playlist-card p {
  display: block;
  margin: 12px 0;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-line-clamp: unset;
}

@media (max-width: 1180px) {
  body[data-page="games"] .playlist-grid-many {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="games"] .playlist-grid-single .playlist-card {
    grid-template-columns: minmax(280px, 1fr) minmax(260px, .9fr);
  }
}

@media (max-width: 760px) {
  body[data-page="games"] .playlist-category {
    padding: 14px;
  }

  body[data-page="games"] .playlist-grid-single,
  body[data-page="games"] .playlist-grid-two,
  body[data-page="games"] .playlist-grid-four,
  body[data-page="games"] .playlist-grid-many {
    grid-template-columns: 1fr;
  }

  body[data-page="games"] .playlist-grid-single .playlist-card {
    display: block;
    min-height: 0;
  }

  body[data-page="games"] .playlist-grid-single .playlist-card img {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  body[data-page="games"] .playlist-grid-single .playlist-card-copy {
    padding: 16px;
  }

  body[data-page="games"] .playlist-grid-single .playlist-card h3 {
    font-size: 1.32rem;
  }
}


/* v8: targeted layout and feature repairs */
body[data-page="about"] .biography-panel,
body[data-page="about"] .biography-copy {
  width: 100%;
  max-width: none;
}

body[data-page="about"] .about-feature-grid {
  gap: 12px;
}

body[data-page="about"] .about-feature-grid > .column-stack {
  gap: 12px;
}

body[data-page="about"] .copy-card {
  height: auto;
  padding: 18px;
}

body[data-page="cs2"] .cs2-top-columns {
  gap: 14px;
}

body[data-page="cs2"] .column-stack {
  gap: 14px;
}

body[data-page="cs2"] .steam-action-row,
.dashboard-steam-buttons {
  margin-top: 16px;
}

body[data-page="cs2"] .steam-action-row .button,
.dashboard-steam-buttons .button {
  flex: 1 1 180px;
}

body[data-page="cs2"] .skin-yap-intro > p {
  margin: 0 0 10px;
  color: var(--muted);
}

body[data-page="cs2"] .skin-topic-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 15px;
}

body[data-page="cs2"] .skin-topic-row span {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #dcccf0;
  font-size: .78rem;
  font-weight: 700;
}

body[data-page="cs2"] .skin-safety {
  margin: 12px 0 0;
  color: var(--soft);
  font-size: .8rem;
}

.steam-check-input-row {
  margin-bottom: 20px;
}

.steam-check-input-row label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

.steam-check-input-row > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.steam-check-input-row input {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  background: #080510;
  color: var(--text);
}

.steam-check-input-row input:focus {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 3px rgba(157,70,255,.12);
}

.steam-check-input-row [data-steam-tool-status] {
  min-height: 1.3em;
  margin: 7px 0 0;
  color: #c894f5;
  font-size: .8rem;
}

.cs2-tool-groups {
  display: grid;
  gap: 18px;
}

.cs2-tool-grid,
.cs2-link-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cs2-service-card,
.cs2-link-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.022);
  color: var(--text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.cs2-service-card:hover,
.cs2-link-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: linear-gradient(135deg, rgba(157,70,255,.12), rgba(255,255,255,.025));
}

.cs2-service-card img,
.cs2-link-card img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
}

.cs2-service-card span,
.cs2-link-card span {
  min-width: 0;
}

.cs2-service-card strong,
.cs2-link-card strong,
.cs2-service-card small,
.cs2-link-card small {
  display: block;
}

.cs2-service-card small,
.cs2-link-card small {
  margin-top: 3px;
  color: var(--soft);
  font-size: .76rem;
  line-height: 1.35;
}

.follow-platform-strip {
  width: min(1500px, calc(100% - 48px));
  margin: 22px auto 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(157,70,255,.12), rgba(255,255,255,.02));
}

.follow-platform-strip > strong {
  display: block;
  margin-bottom: 10px;
  font-size: .9rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.follow-platform-strip nav {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.follow-platform-strip a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}

.follow-platform-strip a:hover {
  border-color: var(--line-strong);
  background: rgba(157,70,255,.1);
}

.follow-platform-strip img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

.twitch-live-embed-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
  min-height: 650px;
}

.twitch-player-frame,
.twitch-chat-frame {
  display: block;
  width: 100%;
  height: 650px;
  border: 0;
}

.medal-fallback,
.medal-grid > .empty {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: 40px 20px;
}

@media (max-width: 980px) {
  .cs2-tool-grid,
  .cs2-link-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .twitch-live-embed-grid {
    grid-template-columns: 1fr;
  }

  .twitch-chat-frame {
    height: 500px;
  }
}

@media (max-width: 620px) {
  .cs2-tool-grid,
  .cs2-link-card-grid {
    grid-template-columns: 1fr;
  }

  .steam-check-input-row > div {
    grid-template-columns: 1fr;
  }

  .follow-platform-strip {
    width: calc(100% - 24px);
  }

  .follow-platform-strip nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .follow-platform-strip a {
    justify-content: flex-start;
  }
}


/* v9: Medal profile view and direct CS2 checker feedback */
.medal-profile-panel {
  overflow: hidden;
}

.medal-profile-frame-wrap {
  min-height: 900px;
  background: #05030a;
}

.medal-profile-frame {
  display: block;
  width: 100%;
  height: 1100px;
  border: 0;
  background: #05030a;
}

.medal-profile-fallback {
  display: flex;
  justify-content: center;
  padding: 16px;
  border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  .medal-profile-frame-wrap {
    min-height: 720px;
  }

  .medal-profile-frame {
    height: 820px;
  }
}


/* v10: Medal is external because Medal blocks full-profile iframe embedding. */
.medal-profile-frame-wrap,
.medal-profile-frame,
.medal-profile-fallback {
  display: none !important;
}

/* v10: StreamElements and Ko-fi are equal optional support choices. */
body[data-page="support"] .support-action.primary-action {
  border-color: var(--line);
  background: rgba(255,255,255,.02);
  box-shadow: none;
}

@media (max-width: 620px) {
  .medal-external-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .medal-external-logo {
    margin: 0 auto;
  }

  .medal-external-content .button-row {
    justify-content: center;
  }
}


/* v12: Medal belongs with the other external clip platforms. */
.short-platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.short-platform-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(157,70,255,.08), transparent 58%),
    rgba(255,255,255,.018);
  color: var(--text);
  text-decoration: none;
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease;
}

.short-platform-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background:
    linear-gradient(135deg, rgba(157,70,255,.15), transparent 60%),
    rgba(255,255,255,.025);
}

.short-platform-card img {
  width: 48px;
  height: 48px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #100b18;
  object-fit: contain;
}

.short-platform-card span {
  min-width: 0;
}

.short-platform-card strong,
.short-platform-card small {
  display: block;
}

.short-platform-card small {
  margin-top: 4px;
  color: var(--soft);
  line-height: 1.35;
}

.short-platform-card b {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #d9a9ff;
  font-size: .78rem;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .short-platform-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .short-platform-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .short-platform-card img {
    width: 42px;
    height: 42px;
  }

  .short-platform-card b {
    grid-column: 2;
    justify-self: start;
  }
}


/* v13: About page must use the full available panel width. */
body[data-page="about"] .biography-panel,
body[data-page="about"] .biography-copy {
  width: 100%;
  max-width: none;
}

body[data-page="about"] .biography-copy {
  box-sizing: border-box;
}

body[data-page="about"] .biography-copy p {
  width: 100%;
  max-width: none;
}

body[data-page="about"] .about-feature-grid {
  gap: 12px;
}

body[data-page="about"] .about-feature-grid > .column-stack {
  gap: 12px;
}

body[data-page="about"] .copy-card {
  height: auto;
  padding: 18px;
}


/* v16: real mobile layout repairs */
@media (max-width: 760px) {
  body[data-page="games"] .playlist-grid {
    align-items: start;
  }

  body[data-page="games"] .playlist-card,
  body[data-page="games"] .playlist-grid-single .playlist-card,
  body[data-page="games"] .playlist-grid-two .playlist-card,
  body[data-page="games"] .playlist-grid-four .playlist-card,
  body[data-page="games"] .playlist-grid-many .playlist-card {
    display: block;
    height: auto !important;
    min-height: 0 !important;
  }

  body[data-page="games"] .playlist-card-image,
  body[data-page="games"] .playlist-grid-single .playlist-card > a {
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
  }

  body[data-page="games"] .playlist-card img,
  body[data-page="games"] .playlist-grid-single .playlist-card img {
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover;
  }

  body[data-page="games"] .playlist-card-copy,
  body[data-page="games"] .playlist-grid-single .playlist-card-copy {
    display: block;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px;
  }

  body[data-page="games"] .playlist-card h3,
  body[data-page="games"] .playlist-grid-single .playlist-card h3 {
    font-size: 1.15rem;
    line-height: 1.25;
  }

  body[data-page="games"] .playlist-card p,
  body[data-page="games"] .playlist-grid-single .playlist-card p {
    display: -webkit-box;
    margin: 8px 0 12px;
    overflow: hidden;
    font-size: .88rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  body[data-page="games"] .playlist-card-footer,
  body[data-page="games"] .playlist-grid-single .playlist-card-footer {
    margin-top: 0;
    padding-top: 0;
  }

  body[data-page="games"] .playlist-card-footer .button {
    width: auto;
    min-height: 38px;
    padding: 0 12px;
  }
}

@media (max-width: 620px) {
  .app-topbar {
    grid-template-columns: 42px minmax(0, 1fr) 42px auto;
    gap: 8px;
    padding: 10px 12px;
  }

  .mobile-brand {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .search-button {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    justify-content: center;
    padding: 0;
    color: #e6dff2;
    font-size: 1.1rem;
  }

  .search-button span:first-child {
    display: inline;
    overflow: visible;
  }

  .search-button span:last-child {
    display: none;
  }

  .topbar-actions {
    gap: 7px;
  }

  .live-chip,
  .icon-button {
    min-height: 42px;
  }

  body[data-page="cs2"] .steam-action-row {
    gap: 8px;
    margin-top: 12px;
  }

  body[data-page="cs2"] .steam-action-row .button,
  .dashboard-steam-buttons .button {
    flex: 0 0 auto !important;
    width: 100%;
    height: auto;
    min-height: 44px;
    padding: 10px 13px;
  }

  body[data-page="cs2"] .panel-body {
    padding: 14px;
  }

  body[data-page="cs2"] .settings-list div {
    padding: 13px;
  }

  body[data-page="games"] .panel-body {
    padding: 10px;
  }

  body[data-page="games"] .playlist-category {
    padding: 12px;
  }

  body[data-page="games"] .category-head {
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 12px;
  }

  body[data-page="games"] .category-head h2 {
    font-size: 1.45rem;
  }

  body[data-page="games"] .category-head > span {
    flex: 0 0 auto;
    font-size: .92rem;
  }
}


/* v17: real customer-ready project page */
.project-page-heading {
  margin-bottom: 16px;
}

.real-project {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(circle at 82% 5%, rgba(155, 62, 255, .13), transparent 30%),
    var(--panel);
  box-shadow: var(--shadow);
}

.real-project-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(22px, 4vw, 42px);
  border-bottom: 1px solid var(--line);
}

.real-project-header > div:first-child {
  max-width: 900px;
}

.real-project-header h2 {
  margin: 5px 0 12px;
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: .98;
}

.real-project-lead {
  max-width: 900px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(.98rem, 1.5vw, 1.12rem);
  line-height: 1.6;
}

.real-project-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.real-project-badges span {
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(145, 55, 255, .09);
  color: #ead9ff;
  font-size: .76rem;
  font-weight: 700;
}

.real-project-main-actions {
  display: flex;
  width: min(310px, 100%);
  flex: 0 0 auto;
  flex-direction: column;
  gap: 9px;
}

.project-download {
  min-height: 50px;
}

.wasd-live-demo {
  margin: clamp(16px, 3vw, 28px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #07040d;
  outline: none;
}

.wasd-live-demo:focus-visible {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 3px rgba(155, 62, 255, .18);
}

.wasd-demo-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .018);
}

.wasd-demo-heading h3 {
  margin: 3px 0 5px;
  font-size: 1.45rem;
}

.wasd-demo-heading p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
}

.wasd-demo-status {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #d8c6e9;
  font-size: .78rem;
  font-weight: 700;
}

.wasd-demo-frame {
  height: clamp(430px, 48vw, 720px);
  background:
    radial-gradient(circle at 50% 44%, rgba(133, 51, 239, .14), transparent 46%),
    #050209;
}

.wasd-demo-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.wasd-demo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 15px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .018);
}

.wasd-demo-controls button {
  min-width: 58px;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(153, 56, 255, .2), rgba(153, 56, 255, .08));
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.wasd-demo-controls button:hover,
.wasd-demo-controls button:focus-visible {
  border-color: #cf8dff;
  box-shadow: 0 0 16px rgba(157, 70, 255, .3);
}

.wasd-demo-controls .demo-control-secondary {
  background: rgba(255, 255, 255, .025);
  color: #ded1ed;
}

.real-project-information {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 clamp(16px, 3vw, 28px) 12px;
}

.project-info-panel,
.project-package-panel,
.project-verification-panel {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .015);
}

.project-info-panel {
  padding: clamp(18px, 2.5vw, 26px);
}

.project-info-panel h3,
.project-package-panel h3,
.project-verification-panel h3 {
  margin: 4px 0 12px;
  font-size: 1.35rem;
}

.project-info-panel ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.65;
}

.project-info-panel > p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.55;
}

.project-connection {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.project-connection span {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
}

.project-connection strong {
  margin-left: 4px;
  color: #fff;
}

.idle-active-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 14px 0;
}

.idle-active-grid div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(151, 58, 255, .055);
}

.idle-active-grid strong,
.idle-active-grid span {
  display: block;
}

.idle-active-grid span {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.4;
}

.project-package-panel,
.project-verification-panel {
  margin: 0 clamp(16px, 3vw, 28px) 12px;
  padding: clamp(18px, 2.6vw, 28px);
}

.project-package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.project-package-grid span {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .018);
  color: #e4daee;
}

.project-verification-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 14px 0;
}

.project-verification-stats div {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 9px;
  text-align: center;
}

.project-verification-stats strong,
.project-verification-stats span {
  display: block;
}

.project-verification-stats strong {
  color: #db9eff;
  font-size: 1.45rem;
}

.project-verification-stats span {
  margin-top: 4px;
  color: var(--soft);
  font-size: .75rem;
  text-transform: uppercase;
}

.project-verification-panel > p {
  margin-bottom: 0;
  color: var(--muted);
}

.real-project-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px clamp(18px, 3vw, 30px);
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .018);
}

.real-project-footer strong,
.real-project-footer span {
  display: block;
}

.real-project-footer span {
  margin-top: 4px;
  color: var(--soft);
}

.project-footer-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
}

@media (max-width: 900px) {
  .real-project-header {
    flex-direction: column;
  }

  .real-project-main-actions {
    width: 100%;
  }

  .real-project-information {
    grid-template-columns: 1fr;
  }

  .project-package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .real-project-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .real-project-header {
    padding: 18px;
  }

  .real-project-header h2 {
    font-size: 2.2rem;
  }

  .wasd-live-demo {
    margin: 12px;
  }

  .wasd-demo-heading {
    flex-direction: column;
    padding: 15px;
  }

  .wasd-demo-frame {
    height: 430px;
  }

  .wasd-demo-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wasd-demo-controls button {
    width: 100%;
  }

  .real-project-information {
    padding: 0 12px 12px;
  }

  .project-package-panel,
  .project-verification-panel {
    margin: 0 12px 12px;
  }

  .idle-active-grid,
  .project-package-grid,
  .project-verification-stats {
    grid-template-columns: 1fr;
  }

  .project-footer-actions {
    width: 100%;
    flex-direction: column;
  }

  .project-footer-actions .button {
    width: 100%;
  }
}


/* v19: multiple real customer projects and CATMINT Auto Stream Info */
.project-jump-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.project-jump-nav a {
  display: block;
  min-width: 0;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background:
    linear-gradient(135deg, rgba(157,70,255,.095), transparent 60%),
    var(--panel);
  color: var(--text);
  text-decoration: none;
}

.project-jump-nav a:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.project-jump-nav strong,
.project-jump-nav span {
  display: block;
}

.project-jump-nav span {
  margin-top: 5px;
  color: var(--soft);
  line-height: 1.4;
}

.real-project + .real-project {
  margin-top: 18px;
}

.catmint-project {
  background:
    radial-gradient(circle at 88% 4%, rgba(113, 51, 255, .19), transparent 33%),
    radial-gradient(circle at 6% 42%, rgba(206, 105, 255, .07), transparent 25%),
    var(--panel);
}

.catmint-live-preview {
  margin: clamp(16px, 3vw, 28px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #08050d;
}

.catmint-demo-stage {
  display: grid;
  place-items: start center;
  height: min(900px, 72vh);
  min-height: 620px;
  overflow: auto;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 15%, rgba(153, 83, 255, .13), transparent 36%),
    #050308;
}

.catmint-demo-stage iframe {
  display: block;
  width: min(470px, 100%);
  height: 1500px;
  border: 1px solid #4b396f;
  border-radius: 16px;
  background: #111219;
  box-shadow: 0 25px 70px rgba(0,0,0,.45);
}

.catmint-preview-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.catmint-preview-fields span {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(155, 67, 255, .055);
  color: #e5d9ef;
}

.catmint-safety-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 clamp(16px, 3vw, 28px) 12px;
}

.catmint-safety-grid > div {
  padding: clamp(18px, 2.5vw, 26px);
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,.015);
}

.catmint-safety-grid h3 {
  margin: 4px 0 10px;
  font-size: 1.35rem;
}

.catmint-safety-grid p:not(.eyebrow) {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.6;
}

.project-download-dialog {
  width: min(520px, calc(100% - 28px));
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background:
    radial-gradient(circle at 90% 0, rgba(157,70,255,.2), transparent 36%),
    #100b18;
  color: var(--text);
  box-shadow: 0 30px 100px rgba(0,0,0,.72);
}

.project-download-dialog::backdrop {
  background: rgba(3, 2, 7, .78);
  backdrop-filter: blur(5px);
}

.project-download-dialog form {
  position: relative;
  padding: 28px;
}

.project-download-dialog h2 {
  margin: 5px 36px 10px 0;
  font-size: 1.75rem;
}

.project-download-dialog p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.55;
}

.dialog-close {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255,255,255,.025);
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
}

.dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 9px;
  margin-top: 20px;
}

@media (max-width: 760px) {
  .project-jump-nav,
  .catmint-safety-grid {
    grid-template-columns: 1fr;
  }

  .catmint-preview-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catmint-demo-stage {
    height: 700px;
    min-height: 520px;
    padding: 10px;
  }
}

@media (max-width: 520px) {
  .catmint-preview-fields,
  .dialog-actions {
    grid-template-columns: 1fr;
  }

  .project-download-dialog form {
    padding: 22px 18px 18px;
  }
}


/* v22: compact CATMINT preview and clearer verification */
.catmint-live-preview {
  width: min(920px, calc(100% - 32px));
  margin: clamp(16px, 3vw, 28px) auto;
}

.catmint-demo-stage {
  height: 520px;
  min-height: 0;
  overflow: hidden;
  padding: 12px;
}

.catmint-demo-stage iframe {
  width: min(410px, 100%);
  height: 100%;
  min-height: 0;
}

.catmint-preview-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 9px;
}

.compact-button {
  min-height: 36px;
  padding: 7px 11px;
  font-size: .78rem;
}

.project-verification-stats strong {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .catmint-live-preview {
    width: calc(100% - 24px);
  }

  .catmint-demo-stage {
    height: 460px;
    padding: 8px;
  }

  .catmint-demo-stage iframe {
    width: 100%;
  }

  .catmint-preview-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .catmint-preview-actions .wasd-demo-status,
  .catmint-preview-actions .button {
    width: 100%;
    justify-content: center;
  }
}


/* v23: real WASD video preview supplied by C4TM30W */
.wasd-media-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
  align-items: center;
  gap: 24px;
  margin: clamp(16px, 3vw, 28px);
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 82% 40%, rgba(255, 0, 224, .12), transparent 35%),
    rgba(255, 255, 255, .015);
}

.wasd-media-copy h3 {
  margin: 4px 0 9px;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.wasd-media-copy p:not(.eyebrow) {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.wasd-media-shell {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 300px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #020104;
  box-shadow: inset 0 0 40px rgba(255, 0, 225, .045);
}

.wasd-media-shell video {
  display: block;
  width: min(100%, 340px);
  height: auto;
  max-height: 360px;
  border-radius: 9px;
  background: #000;
  object-fit: contain;
}

@media (max-width: 820px) {
  .wasd-media-preview {
    grid-template-columns: 1fr;
  }

  .wasd-media-shell {
    min-height: 0;
  }
}

@media (max-width: 520px) {
  .wasd-media-preview {
    margin: 12px;
    padding: 15px;
  }

  .wasd-media-shell {
    padding: 8px;
  }

  .wasd-media-shell video {
    width: min(100%, 300px);
  }
}


/* v24: reliable WASD autoplay and manual playback */
.wasd-media-shell {
  position: relative;
  overflow: hidden;
}

.wasd-media-shell video {
  position: relative;
  z-index: 1;
}

.wasd-video-play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 154px;
  min-height: 52px;
  padding: 11px 16px;
  border: 1px solid rgba(255, 0, 225, .72);
  border-radius: 999px;
  background: rgba(9, 4, 14, .9);
  color: #fff;
  font: inherit;
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 4px rgba(255, 0, 225, .08),
    0 0 26px rgba(255, 0, 225, .25);
}

.wasd-video-play:hover,
.wasd-video-play:focus-visible {
  border-color: #ff67ec;
  box-shadow:
    0 0 0 4px rgba(255, 0, 225, .13),
    0 0 34px rgba(255, 0, 225, .38);
}

.wasd-video-play span {
  font-size: 1.15rem;
}

.wasd-media-shell.is-playing .wasd-video-play {
  top: 15px;
  left: auto;
  right: 15px;
  min-width: 44px;
  min-height: 36px;
  padding: 7px 10px;
  opacity: .18;
  transform: none;
}

.wasd-media-shell.is-playing .wasd-video-play strong {
  display: none;
}

.wasd-media-shell.is-playing .wasd-video-play:hover,
.wasd-media-shell.is-playing .wasd-video-play:focus-visible {
  opacity: 1;
}

.wasd-video-message {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  left: 12px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(5, 2, 8, .82);
  color: #d6cadf;
  font-size: .76rem;
  text-align: center;
  pointer-events: none;
}

.wasd-video-message[hidden] {
  display: none;
}

@media (max-width: 520px) {
  .wasd-video-play {
    min-width: 142px;
    min-height: 48px;
  }
}


/* v26: dock-preview status uses color only */
.catmint-preview-actions .wasd-demo-status {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
}

.catmint-preview-actions .wasd-demo-status .status-dot {
  width: 10px;
  height: 10px;
  margin: 0;
}

@media (max-width: 760px) {
  .catmint-preview-actions {
    width: auto;
    align-items: center;
    flex-direction: row;
  }

  .catmint-preview-actions .wasd-demo-status {
    width: 36px;
    min-width: 36px;
  }

  .catmint-preview-actions .button {
    width: auto;
  }
}


/* v27: project downloads, hearts and public Q&A */
.project-engagement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 4px;
}

.project-engagement > .button {
  grid-column: 1 / -1;
  width: 100%;
}

.project-heart,
.project-download-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.02);
  color: #ded3e8;
  font: inherit;
}

.project-heart {
  cursor: pointer;
}

.project-heart:hover:not(:disabled),
.project-heart:focus-visible:not(:disabled),
.project-heart[aria-pressed="true"] {
  border-color: rgba(255, 91, 207, .72);
  color: #ff8ddd;
  box-shadow: 0 0 20px rgba(255, 63, 198, .15);
}

.project-heart:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.project-heart-icon {
  font-size: 1.08rem;
}

.project-engagement strong {
  color: #fff;
}

.project-engagement.is-unavailable strong {
  color: var(--soft);
}

.project-qa {
  margin: 0 clamp(16px, 3vw, 28px) 12px;
  padding: clamp(18px, 2.8vw, 28px);
  border: 1px solid var(--line);
  border-radius: 11px;
  background:
    linear-gradient(135deg, rgba(157,70,255,.055), transparent 48%),
    rgba(255,255,255,.012);
}

.project-qa-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.project-qa-heading h3 {
  margin: 4px 0 8px;
  font-size: 1.45rem;
}

.project-qa-heading p:not(.eyebrow) {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.project-qa-heading > .button {
  flex: 0 0 auto;
}

.project-qa-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: 10px;
  margin: 18px 0;
}

.project-qa-tools label,
.project-question-fields label,
.project-admin-login label,
.project-admin-controls label,
.project-admin-question label {
  display: grid;
  gap: 6px;
}

.project-qa-tools label > span,
.project-question-fields label > span,
.project-admin-login label > span,
.project-admin-controls label > span,
.project-admin-question label > span {
  color: #cfc1da;
  font-size: .78rem;
  font-weight: 700;
}

.project-qa-tools input,
.project-qa-tools select,
.project-question-fields input,
.project-question-fields select,
.project-question-fields textarea,
.project-admin-login input,
.project-admin-controls select,
.project-admin-question textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b0711;
  color: #fff;
  font: inherit;
}

.project-qa-tools input,
.project-qa-tools select,
.project-question-fields input,
.project-question-fields select,
.project-admin-login input,
.project-admin-controls select {
  min-height: 43px;
  padding: 9px 11px;
}

.project-question-fields textarea,
.project-admin-question textarea {
  resize: vertical;
  padding: 11px;
  line-height: 1.5;
}

.project-qa-list {
  display: grid;
  gap: 10px;
}

.project-qa-empty {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  color: var(--soft);
  text-align: center;
}

.project-question-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(3, 2, 7, .38);
}

.project-question-card.is-pinned {
  border-color: rgba(189, 108, 255, .54);
  box-shadow: inset 3px 0 0 rgba(189, 108, 255, .65);
}

.project-question-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.project-question-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.project-question-badges span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #d9cae6;
  font-size: .7rem;
  font-weight: 700;
}

.project-question-text {
  margin: 12px 0;
  color: #fff;
  line-height: 1.55;
  white-space: pre-wrap;
}

.project-answer {
  padding: 13px 14px;
  border-left: 3px solid rgba(175, 80, 255, .75);
  border-radius: 0 8px 8px 0;
  background: rgba(158, 65, 255, .07);
}

.project-answer strong {
  color: #d69aff;
  font-size: .78rem;
}

.project-answer p {
  margin: 6px 0 0;
  color: #ded4e7;
  line-height: 1.55;
  white-space: pre-wrap;
}

.project-question-dialog {
  width: min(680px, calc(100% - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background:
    radial-gradient(circle at 92% 0, rgba(157,70,255,.18), transparent 35%),
    #100b18;
  color: var(--text);
  box-shadow: 0 30px 100px rgba(0,0,0,.72);
}

.project-question-dialog::backdrop {
  background: rgba(3,2,7,.8);
  backdrop-filter: blur(5px);
}

.project-question-form {
  position: relative;
  padding: 28px;
}

.project-question-form h2 {
  margin: 5px 38px 10px 0;
}

.project-question-intro {
  color: var(--muted);
  line-height: 1.55;
}

.project-question-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.project-question-wide {
  grid-column: 1 / -1;
}

.project-turnstile {
  min-height: 65px;
  margin: 8px 0 12px;
}

.project-question-status {
  min-height: 22px;
  margin: 8px 0 0;
  color: var(--soft);
}

.project-question-status[data-type="error"],
.project-admin-status[data-type="error"] {
  color: #ff8ba8;
}

.project-question-status[data-type="success"],
.project-admin-status[data-type="success"] {
  color: #8dffc2;
}

/* Private moderation page */
.project-admin-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 80% 0, rgba(157,70,255,.12), transparent 30%),
    #08050d;
}

.project-admin-shell {
  width: min(1160px, calc(100% - 28px));
  margin: 0 auto;
  padding: 28px 0 60px;
}

.project-admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.project-admin-header h1 {
  margin: 4px 0 8px;
}

.project-admin-header p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
}

.project-admin-login,
.project-admin-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
}

.project-admin-controls {
  grid-template-columns: 220px 1fr auto;
}

.project-admin-status {
  min-height: 24px;
  color: var(--soft);
}

.project-admin-list {
  display: grid;
  gap: 12px;
}

.project-admin-question {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
}

.project-admin-question-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.project-admin-question-head span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--soft);
  font-size: .72rem;
  text-transform: uppercase;
}

.project-admin-meta,
.project-admin-email {
  color: var(--soft);
  font-size: .8rem;
}

.project-admin-question-text {
  padding: 13px;
  border-radius: 8px;
  background: rgba(255,255,255,.018);
  color: #fff;
  line-height: 1.55;
  white-space: pre-wrap;
}

.project-admin-pin {
  display: flex !important;
  align-items: center;
  grid-template-columns: auto 1fr;
  margin: 10px 0;
}

.project-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.danger-button {
  border-color: rgba(255, 82, 118, .45) !important;
  color: #ff9db2 !important;
}

.project-admin-empty {
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--soft);
  text-align: center;
}

@media (max-width: 760px) {
  .project-qa-heading,
  .project-admin-header {
    flex-direction: column;
  }

  .project-qa-heading > .button {
    width: 100%;
  }

  .project-qa-tools,
  .project-question-fields,
  .project-admin-login,
  .project-admin-controls {
    grid-template-columns: 1fr;
  }

  .project-question-wide {
    grid-column: auto;
  }

  .project-question-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-question-badges {
    justify-content: flex-start;
  }

  .project-question-form {
    padding: 22px 17px 18px;
  }
}


/* v28: project engagement reliability and clean spacing */
.project-engagement {
  position: relative;
  align-items: stretch;
  overflow: visible;
  row-gap: 10px;
}

.project-engagement > .compact-button {
  min-height: 44px;
  padding: 8px 12px;
  line-height: 1.25;
  white-space: normal;
}

.project-heart,
.project-download-stat {
  min-width: 0;
}

.project-heart span:last-child,
.project-download-stat span:last-child {
  white-space: nowrap;
}

.project-engagement.is-unavailable .project-heart,
.project-engagement.is-unavailable .project-download-stat {
  opacity: .62;
}

@media (max-width: 420px) {
  .project-engagement {
    grid-template-columns: 1fr;
  }

  .project-engagement > .button {
    grid-column: auto;
  }
}
.cat-signature{display:flex;justify-content:flex-end;padding:8px 10px 0}.cat-signature img{display:block;width:52px;max-width:12vw;height:auto;object-fit:contain;filter:drop-shadow(0 0 8px rgba(255,45,220,.22))}
.counter-subnav{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;padding:10px;border:1px solid var(--border);border-radius:14px;background:rgba(16,10,28,.72)}.counter-subnav a{padding:10px 14px;border:1px solid var(--border);border-radius:10px;color:var(--text);font-weight:700;text-decoration:none}.counter-subnav a:hover{border-color:var(--purple);background:rgba(142,45,226,.16)}
body[data-page="counter-strike-personal"] .cs2-player-tools{display:none}
body[data-page="counter-strike-checker"] .page-content>*{display:none}body[data-page="counter-strike-checker"] .page-content>.page-title-row,body[data-page="counter-strike-checker"] .page-content>.counter-subnav,body[data-page="counter-strike-checker"] .page-content>.cs2-player-tools{display:block}
.project-jump-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:22px}.project-jump-nav .project-overview-card{display:flex;flex-direction:column;min-height:100%;padding:0 0 18px;overflow:hidden}.project-overview-card>img{display:block;width:100%;height:220px;padding:14px;object-fit:contain;background:rgba(5,2,12,.82);border-bottom:1px solid var(--line)}.project-overview-card>strong,.project-overview-card>span:not(.project-overview-badges),.project-overview-card>b{margin-left:18px;margin-right:18px}.project-overview-card>strong{margin-top:14px;font-size:1.1rem}.project-overview-card>b{align-self:flex-start;margin-top:auto;padding-top:16px;color:#fff}.project-overview-badges{display:flex!important;flex-wrap:wrap;gap:6px;margin:14px 18px 0!important}.project-overview-badges em{padding:4px 8px;border:1px solid rgba(226,66,255,.55);border-radius:999px;color:#f5d7ff;font-size:.72rem;font-style:normal}.paws-preview{grid-template-columns:minmax(0,1.3fr) minmax(250px,360px);align-items:start}.paws-preview .wasd-media-copy ul{margin:18px 0;padding-left:20px;color:var(--muted);line-height:1.55}.paws-preview .wasd-media-copy li+li{margin-top:8px}.paws-preview .wasd-media-copy p:not(.eyebrow){margin-top:12px}.paws-preview .wasd-media-shell{min-height:0}.paws-preview .wasd-media-shell img{display:block;width:100%;max-width:310px;max-height:540px;object-fit:contain;border-radius:10px}@media(max-width:900px){.project-jump-nav{grid-template-columns:1fr}.project-overview-card>img{height:190px}.paws-preview{grid-template-columns:1fr}.paws-preview .wasd-media-shell img{max-height:480px}}
.project-jump-nav{grid-template-columns:repeat(3,minmax(0,1fr))!important}.project-jump-nav .project-overview-card>img{height:170px!important;max-height:170px!important;min-height:0!important}.project-jump-nav .project-overview-card{min-height:430px!important;max-height:430px!important}.project-overview-card>span:not(.project-overview-badges){display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.cat-signature img{width:56px!important;max-width:56px!important}@media(max-width:900px){.project-jump-nav{grid-template-columns:1fr!important}.project-jump-nav .project-overview-card{min-height:0!important;max-height:none!important}.project-jump-nav .project-overview-card>img{height:150px!important;max-height:150px!important}}

/* v38: the POS and ASI overview cards use their real supplied HTML at the same size. */
.project-jump-nav .project-overview-live{
  position:relative;
  display:block!important;
  width:100%;
  height:170px;
  min-height:170px;
  margin:0!important;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:rgba(5,2,12,.82);
  -webkit-line-clamp:unset!important;
}
.project-jump-nav .project-overview-live iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  pointer-events:none;
  background:#080510;
}
@media(max-width:900px){
  .project-jump-nav .project-overview-live{height:150px;min-height:150px}
}

/* Project catalogue and full views stay separate, including before JavaScript loads. */
body[data-page="projects"] .real-project{display:none}
body.project-catalogue-view .real-project{display:none}
.projects-made-note{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(90deg,rgba(157,70,255,.09),rgba(255,255,255,.018));color:var(--muted)}
.projects-made-note strong{flex:0 0 auto;color:#fff}
body.project-detail-view .project-jump-nav,body.project-detail-view .projects-made-note{display:none!important}
body.project-detail-view .real-project{display:none}
body.project-detail-view .real-project.is-active-project{display:block}
body[data-page="projects"] .real-project:target{display:block}
body[data-page="projects"]:has(.real-project:target) .real-project:not(:target){display:none}
body[data-page="projects"]:has(.real-project:target) .project-jump-nav,
body[data-page="projects"]:has(.real-project:target) .projects-made-note{display:none!important}
.project-detail-back{display:inline-flex;align-items:center;min-height:40px;margin-bottom:16px;padding:0 14px;border:1px solid var(--line);border-radius:8px;color:#fff;font-weight:700;text-decoration:none}
.project-detail-back:hover{border-color:var(--line-strong);background:rgba(157,70,255,.1)}
@media(max-width:700px){.projects-made-note{align-items:flex-start;flex-direction:column;gap:5px}}

/* v40: shared project counters and real full-size POS HTML preview. */
.project-overview-card>.project-card-stats{display:flex!important;flex-wrap:wrap;gap:8px;margin:12px 18px 0!important;-webkit-line-clamp:unset!important;overflow:visible!important}
.project-card-stats>span{display:inline-flex!important;align-items:center;gap:4px;margin:0!important;padding:5px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.74rem;line-height:1}
.project-card-stats strong{color:#fff}
.project-overview-card>.project-card-author{display:block;margin:4px 18px 0;color:#dca6ff;font-size:.76rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.project-overview-card>.project-card-open{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:38px;margin:16px 18px 0!important;padding:0 13px!important;border:1px solid rgba(197,91,255,.72);border-radius:8px;background:linear-gradient(135deg,rgba(154,48,232,.32),rgba(87,39,161,.22));box-shadow:0 0 18px rgba(174,49,255,.08);color:#fff!important;font-size:.86rem}
.project-overview-card:hover>.project-card-open{border-color:#d767ff;background:linear-gradient(135deg,rgba(176,54,255,.48),rgba(95,44,177,.32));box-shadow:0 0 22px rgba(174,49,255,.2)}
.paws-preview .wasd-media-shell iframe{display:block;width:100%;height:540px;border:0;border-radius:10px;background:#080510}
@media(max-width:900px){.paws-preview .wasd-media-shell iframe{height:480px}}

/* v64: real HTML previews and full details for the three ticker projects. */
.project-overview-live-ticker,
.project-overview-live-popups {
  background:
    radial-gradient(circle at 50% 50%, rgba(143,53,234,.15), transparent 58%),
    #15111d;
}

.project-overview-live-popups iframe {
  background: transparent;
}

.ticker-project-preview {
  margin: 0 clamp(16px, 3vw, 28px) 18px;
  padding: clamp(18px, 2.5vw, 26px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 88% 12%, rgba(143,53,234,.16), transparent 36%),
    rgba(255,255,255,.015);
}

.ticker-demo-stage {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid rgba(197,91,255,.42);
  border-radius: 12px;
  background: #25222b;
  box-shadow: inset 0 0 26px rgba(143,53,234,.12);
}

.ticker-demo-stage iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.ticker-demo-stage-short {
  height: 150px;
}

.ticker-demo-stage-popups {
  height: 360px;
}

.project-info-panel ol {
  margin: 0;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.65;
}

.project-info-panel li + li {
  margin-top: 5px;
}

.project-package-panel > div > p:not(.eyebrow) {
  max-width: 980px;
  color: var(--muted);
  line-height: 1.62;
}

@media(max-width:700px){
  .ticker-project-preview {
    margin-left: 12px;
    margin-right: 12px;
    padding: 15px;
  }

  .ticker-demo-stage-short {
    height: 126px;
  }

  .ticker-demo-stage-popups {
    height: 300px;
  }
}

/* v43: clearer Counter-Strike player-check workflow. */
.cs2-checker-head{align-items:center;padding:18px 20px}
.cs2-checker-head h2{margin:3px 0 0;font-size:1.35rem}
.checker-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
.checker-badges span{padding:6px 9px;border:1px solid rgba(183,104,255,.42);border-radius:999px;background:rgba(157,70,255,.08);color:#e4d4f5;font-size:.72rem;font-weight:700}
.checker-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:22px}
.checker-steps>div{display:flex;align-items:flex-start;gap:11px;padding:14px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(135deg,rgba(157,70,255,.07),rgba(255,255,255,.018))}
.checker-steps>div>strong{display:grid;flex:0 0 30px;width:30px;height:30px;place-items:center;border:1px solid rgba(189,115,255,.58);border-radius:50%;color:#fff;background:rgba(157,70,255,.16)}
.checker-steps span,.checker-steps b,.checker-steps small{display:block}
.checker-steps b{margin:1px 0 4px;color:#fff}
.checker-steps small{color:var(--soft);line-height:1.35}
.steam-check-input-row{padding:18px;border:1px solid rgba(167,84,255,.34);border-radius:11px;background:#090611}
.steam-check-help{display:block;margin-top:9px;color:var(--soft);line-height:1.45}
.cs2-group-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:8px}
.cs2-group-head .eyebrow{margin:0}
.cs2-group-head small{color:var(--soft);font-size:.76rem;text-align:right}
@media(max-width:760px){.checker-steps{grid-template-columns:1fr}.cs2-checker-head,.cs2-group-head{align-items:flex-start;flex-direction:column}.checker-badges{justify-content:flex-start}.cs2-group-head small{text-align:left}}

/* v44: flexible branded slot; can later hold a real partner feature. */
.cs2-flex-slot{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 210px;align-items:center;min-height:280px;padding:26px;overflow:hidden;background:radial-gradient(circle at 88% 50%,rgba(166,64,255,.22),transparent 34%),linear-gradient(135deg,rgba(157,70,255,.105),rgba(255,255,255,.018) 56%,rgba(39,190,255,.055))}
.cs2-flex-slot::after{content:"";position:absolute;inset:14px;border:1px solid rgba(188,119,255,.12);border-radius:10px;pointer-events:none}
.cs2-flex-slot-copy{position:relative;z-index:2}
.cs2-flex-slot h2{margin:5px 0 10px;font-size:1.65rem}
.cs2-flex-slot p:not(.eyebrow){max-width:640px;margin:0;color:var(--muted);line-height:1.55}
.cs2-flex-slot>img{position:relative;z-index:1;display:block;width:190px;max-height:230px;justify-self:center;object-fit:contain;filter:drop-shadow(0 0 26px rgba(155,63,255,.38))}
.cs2-flex-slot-tags{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0}
.cs2-flex-slot-tags span{padding:5px 8px;border:1px solid rgba(188,119,255,.42);border-radius:999px;color:#eadcff;font-size:.72rem;font-weight:700}
.cs2-flex-slot .button-row{justify-content:flex-start;margin-top:0}
@media(max-width:720px){.cs2-flex-slot{grid-template-columns:1fr;padding:22px;text-align:center}.cs2-flex-slot>img{grid-row:1;width:150px}.cs2-flex-slot-tags,.cs2-flex-slot .button-row{justify-content:center}}

body[data-page="counter-strike-personal"] .skin-yap-intro>p{margin:0 0 12px;color:var(--muted);line-height:1.5}
body[data-page="counter-strike-personal"] .skin-topic-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:15px}
body[data-page="counter-strike-personal"] .skin-topic-row span{padding:6px 9px;border:1px solid var(--line);border-radius:7px;color:#dcccf0;font-size:.78rem;font-weight:700}
body[data-page="counter-strike-personal"] .steam-action-row{margin-top:16px}

/* v45: exact personal CS2 content order and balanced paired rows. */
.cs2-identity-row>.column-stack{align-content:stretch}
.cs2-identity-row>.column-stack>.panel{height:100%}
.cs2-setup-row{align-items:stretch;margin-top:16px}
.cs2-setup-row>.panel{height:100%}


/* C4TM30W secure website admin dashboard */
.site-admin-page{min-height:100vh;background:radial-gradient(circle at top right,rgba(126,34,206,.18),transparent 34%),#07050d;color:#f6f2ff}.site-admin-page *{box-sizing:border-box}.site-admin-shell{width:min(1220px,calc(100% - 32px));margin:0 auto;padding:32px 0 70px}.site-admin-header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:24px}.site-admin-header h1{margin:.25rem 0 .5rem}.site-admin-header p{max-width:760px;color:#b9acd0}.site-admin-header-actions{display:flex;gap:10px;flex-wrap:wrap}.site-admin-login{display:grid;place-items:center;min-height:55vh}.site-admin-login form{width:min(500px,100%);padding:28px;border:1px solid #312448;border-radius:18px;background:rgba(14,9,25,.94);box-shadow:0 20px 70px rgba(0,0,0,.35)}.site-admin-login h2{margin-top:0}.site-admin-login label,.site-admin-form label,.site-admin-filter-row label{display:grid;gap:7px;font-weight:700;color:#d9ccef}.site-admin-login input,.site-admin-form input,.site-admin-form textarea,.site-admin-form select,.site-admin-filter-row select{width:100%;border:1px solid #3a2a53;border-radius:10px;background:#0b0712;color:#fff;padding:11px 12px;font:inherit}.site-admin-login .button{margin-top:18px;width:100%}.site-admin-dashboard[hidden],.site-admin-login[hidden]{display:none!important}.site-admin-welcome{display:flex;justify-content:space-between;gap:18px;padding:13px 16px;border:1px solid #2c2041;border-radius:12px;background:#0d0917;color:#b9acd0}.site-admin-welcome strong{color:#fff}.site-admin-tabs{display:flex;gap:8px;overflow:auto;margin:18px 0;padding:6px;border:1px solid #2c2041;border-radius:13px;background:#0d0917}.site-admin-tabs button{border:0;border-radius:9px;background:transparent;color:#c6b8dc;padding:11px 15px;font:700 14px/1 inherit;white-space:nowrap;cursor:pointer}.site-admin-tabs button.active{background:linear-gradient(135deg,#7c2ae8,#9333ea);color:#fff}.site-admin-panel{display:none;padding:22px;border:1px solid #2d2142;border-radius:16px;background:rgba(12,8,20,.94)}.site-admin-panel.active{display:block}.site-admin-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}.site-admin-panel-head h2{margin:0 0 5px}.site-admin-panel-head p{margin:0;color:#ad9fc4}.site-admin-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;padding:18px;border:1px solid #2c2041;border-radius:13px;background:#090610}.site-admin-form label.wide,.site-admin-form-actions{grid-column:1/-1}.site-admin-form textarea{resize:vertical}.site-admin-form .checkbox-label{display:flex;align-items:center;align-self:end;gap:10px;min-height:45px}.site-admin-form .checkbox-label input{width:auto}.site-admin-form-actions{display:flex;gap:10px;flex-wrap:wrap}.site-admin-message{min-height:24px;margin:14px 0;color:#b8a9cf}.site-admin-message[data-type="success"]{color:#51f5bc}.site-admin-message[data-type="error"]{color:#ff8fa4}.site-admin-warning{margin:0 0 14px;padding:13px 15px;border:1px solid #845d16;border-radius:10px;background:#251c08;color:#ffd88a}.site-admin-list{display:grid;gap:12px;margin-top:16px}.site-admin-item{display:grid;gap:9px;padding:15px;border:1px solid #2c2041;border-radius:12px;background:#0a0711}.site-admin-item-top{display:flex;justify-content:space-between;gap:14px}.site-admin-item-top span{color:#a78bfa;font-size:.85rem}.site-admin-item a{overflow-wrap:anywhere;color:#bd8cff}.site-admin-item p{margin:0;color:#b9acd0}.site-admin-item small{color:#8f80a8}.site-admin-item-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}.site-admin-media-item{grid-template-columns:180px 1fr;align-items:start}.site-admin-media-item>img{width:100%;height:120px;object-fit:cover;border-radius:9px;border:1px solid #33254a;background:#050308}.site-admin-filter-row{display:grid;grid-template-columns:220px 1fr;gap:12px;margin-bottom:12px}.site-admin-empty{padding:30px;text-align:center;border:1px dashed #34264b;border-radius:12px;color:#8f80a8}.cms-screenshot-section{margin-top:28px;padding:0;border:1px solid var(--border,#2c2041);border-radius:16px;background:var(--panel,#0d0917);overflow:hidden}.cms-screenshot-section .panel-head{padding:17px 19px;border-bottom:1px solid var(--border,#2c2041)}.cms-screenshot-section .panel-head h2{margin:0}.cms-screenshot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:18px}.cms-screenshot-grid figure{margin:0;border:1px solid var(--border,#2c2041);border-radius:12px;overflow:hidden;background:#08050f}.cms-screenshot-grid img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.cms-screenshot-grid figcaption{display:grid;gap:5px;padding:12px 13px}.cms-screenshot-grid figcaption span{color:var(--muted,#ad9fc4);font-size:.92rem}.project-admin-question textarea{width:100%;border:1px solid #3a2a53;border-radius:10px;background:#0b0712;color:#fff;padding:11px 12px;font:inherit}.project-admin-pin{display:flex!important;align-items:center;gap:8px}.project-admin-pin input{width:auto}.project-admin-actions{display:flex;gap:9px;flex-wrap:wrap}
@media(max-width:760px){.site-admin-shell{width:min(100% - 18px,1220px);padding-top:18px}.site-admin-header,.site-admin-panel-head,.site-admin-welcome{flex-direction:column}.site-admin-form,.site-admin-filter-row{grid-template-columns:1fr}.site-admin-form label.wide,.site-admin-form-actions{grid-column:auto}.site-admin-media-item{grid-template-columns:1fr}.site-admin-media-item>img{height:auto;max-height:280px}.site-admin-tabs{position:sticky;top:0;z-index:5}.site-admin-panel{padding:14px}}


/* multilingual language switcher */


/* v69 language flags: visible on every public page without changing the original layout. */
.language-flags{position:relative;z-index:70;display:inline-flex;align-items:center;gap:5px;padding:3px 5px;border:1px solid rgba(160,127,217,.25);border-radius:13px;background:rgba(13,10,24,.78);box-shadow:0 8px 24px rgba(0,0,0,.18);flex:0 0 auto;pointer-events:auto}
.language-flag{display:grid;place-items:center;width:36px;height:36px;cursor:pointer;pointer-events:auto;touch-action:manipulation;border-radius:10px;border:1px solid transparent;opacity:.68;transition:opacity .15s ease,transform .15s ease,border-color .15s ease,background .15s ease}
.language-flag:hover{opacity:1;transform:translateY(-1px);background:rgba(137,63,255,.12)}
.language-flag.active{opacity:1;border-color:#9d5cff;background:rgba(126,34,206,.22);box-shadow:0 0 0 1px rgba(157,92,255,.18),0 0 18px rgba(126,34,206,.25)}
.language-flag img{display:block;width:32px;height:32px;object-fit:contain;pointer-events:none}
.language-flags-fixed{position:fixed;z-index:50;top:16px;right:18px}
@media(max-width:760px){.language-flags{gap:2px;padding:2px 3px}.language-flag{width:30px;height:30px;border-radius:8px}.language-flag img{width:27px;height:27px}.topbar-actions .top-link{display:none}}

/* Keep translated offline labels such as "Brez povezave" inside the status cell. */
.stat-strip strong[data-profile-state]{font-size:clamp(.82rem,1.25vw,1.2rem);line-height:1.15;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis}

/* Screenshots selected for Home appear directly inside Steam & Skin Yap. */
.skin-yap-screenshot-mount:empty{display:none}
.skin-yap-screenshot-mount .cms-screenshot-section{margin-top:18px;border-radius:12px;background:rgba(8,5,15,.55)}
.skin-yap-screenshot-mount .cms-screenshot-section .panel-head{padding:12px 13px}
.skin-yap-screenshot-mount .cms-screenshot-section .panel-head h2{font-size:1rem}
.skin-yap-screenshot-mount .cms-screenshot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}
.skin-yap-screenshot-mount .cms-screenshot-grid figure{border-radius:10px}
.skin-yap-screenshot-mount .cms-screenshot-grid figcaption{padding:9px 10px}
.cms-screenshot-grid a{display:block;position:relative}
.cms-screenshot-grid a:focus-visible{outline:2px solid #a855f7;outline-offset:2px}
.cms-screenshot-open-original{display:inline-flex;align-items:center;gap:5px;margin-top:4px;color:#c79cff;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:520px){.skin-yap-screenshot-mount .cms-screenshot-grid{grid-template-columns:1fr}}

/* v71 polished Skin Yap gallery and language-safe layout */
.steam-panel .panel-head h2{letter-spacing:.01em}
.skin-yap-gallery{border-color:rgba(168,85,247,.42)!important;background:linear-gradient(145deg,rgba(22,12,35,.96),rgba(8,5,15,.92))!important;box-shadow:0 18px 45px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.025)}
.skin-yap-gallery .panel-head{background:linear-gradient(90deg,rgba(126,34,206,.18),transparent);border-bottom-color:rgba(168,85,247,.24)!important}
.skin-yap-gallery .cms-screenshot-grid figure{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.skin-yap-gallery .cms-screenshot-grid figure:hover{transform:translateY(-2px);border-color:rgba(192,132,252,.55);box-shadow:0 15px 32px rgba(0,0,0,.28)}
.skin-yap-gallery .cms-screenshot-grid img{aspect-ratio:16/10}
.cms-screenshot-open-original{text-decoration:none}
.support-action strong{white-space:nowrap}
@media(max-width:520px){.support-action strong{white-space:normal}}


/* v72: project engagement status */
.project-engagement-error {
  grid-column: 1 / -1;
  display: block;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid rgba(255, 104, 150, .32);
  border-radius: 8px;
  background: rgba(255, 62, 118, .07);
  color: #ffb5cf;
  font-size: .72rem;
  line-height: 1.35;
}

/* v75: flags must remain above all top-bar overlays and accept pointer input. */
.language-flags{
  position:relative!important;
  z-index:10000!important;
  isolation:isolate;
  pointer-events:auto!important;
}
.language-flags .language-flag{
  position:relative;
  z-index:10001;
  pointer-events:auto!important;
  user-select:none;
  -webkit-user-drag:none;
}
.language-flags .language-flag img{pointer-events:none!important}


/* v79: page-wide screenshot manager and separate screenshot panels */
.site-screenshot-page-mount:empty,
.auto-screenshot-mount:empty,
.home-screenshot-mount:empty,
.cs2-screenshot-mount:empty { display: none; }

.site-screenshot-page-mount { min-width: 0; }
.auto-screenshot-mount { margin-top: 18px; }
.site-screenshot-gallery {
  margin-top: 0;
  border-color: rgba(168,85,247,.42) !important;
  background: linear-gradient(145deg,rgba(22,12,35,.96),rgba(8,5,15,.92)) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.025);
}
.site-screenshot-gallery .panel-head {
  background: linear-gradient(90deg,rgba(126,34,206,.18),transparent);
  border-bottom-color: rgba(168,85,247,.24) !important;
}
.site-screenshot-gallery .cms-screenshot-grid figure {
  transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.site-screenshot-gallery .cms-screenshot-grid figure:hover {
  transform: translateY(-2px);
  border-color: rgba(192,132,252,.55);
  box-shadow: 0 15px 32px rgba(0,0,0,.28);
}
.site-screenshot-gallery .cms-screenshot-grid img { aspect-ratio: 16 / 10; }

/* Home: a separate panel below the Steam/Skin Yap card, never inside it. */
.home-screenshot-mount { margin-top: 0; }
.home-screenshot-mount .cms-screenshot-grid { grid-template-columns: 1fr; }

/* CS2 profile: a separate panel directly below the Steam profile in the left column. */
.cs2-screenshot-mount { margin-top: 0; }
.cs2-screenshot-mount .cms-screenshot-section { border-radius: 14px; }
.cs2-screenshot-mount .cms-screenshot-grid { grid-template-columns: 1fr; }
.cs2-screenshot-mount .cms-screenshot-grid img { aspect-ratio: 16 / 9; }

@media (max-width: 760px) {
  .cms-screenshot-grid { grid-template-columns: 1fr; }
}

/* v81 multilingual SEO editor */
.site-admin-form small{color:#9384aa;font-weight:500;line-height:1.45}.seo-search-preview{display:grid;gap:5px;padding:16px 18px;border:1px solid #2f2343;border-radius:12px;background:#fff;color:#202124}.seo-preview-label{color:#746785;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.seo-search-preview strong{color:#1a0dab;font:400 1.25rem/1.3 Arial,sans-serif}.seo-search-preview small{color:#188038;font:400 .88rem/1.35 Arial,sans-serif}.seo-search-preview p{margin:0;color:#4d5156;font:400 .9rem/1.45 Arial,sans-serif}.site-admin-form .wide{grid-column:1/-1}

/* v82 — full multilingual page builder, image editor and responsive screenshot layouts */
.cms-builder-hidden,.cms-builder-empty{display:none!important}
.cms-builder-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;margin-top:18px;align-items:start}
.cms-builder-grid>.cms-builder-width-full{grid-column:span 12;margin-top:0!important}
.cms-builder-grid>.cms-builder-width-half{grid-column:span 6;margin-top:0!important}
.cms-builder-grid>.cms-builder-width-two-thirds{grid-column:span 8;margin-top:0!important}
.cms-builder-grid>.cms-builder-width-third{grid-column:span 4;margin-top:0!important}
.cms-builder-grid>.panel,.cms-builder-grid>.site-screenshot-page-mount,.cms-builder-grid>section,.cms-builder-grid>article{min-width:0;width:100%}
.cms-builder-grid .cms-screenshot-section{margin-top:0}
@media(max-width:980px){.cms-builder-grid>.cms-builder-width-third,.cms-builder-grid>.cms-builder-width-two-thirds{grid-column:span 6}}
@media(max-width:720px){.cms-builder-grid{grid-template-columns:1fr}.cms-builder-grid>*{grid-column:1!important}}

/* Steam Profile, Skin Yap and Screenshots are three independent spaces. */
body[data-page="counter-strike-personal"] .cs2-identity-row{align-items:stretch}
body[data-page="counter-strike-personal"] .cs2-identity-row>.column-stack{display:block}
body[data-page="counter-strike-personal"] .cs2-identity-row>.column-stack>.panel{height:100%}
body[data-page="counter-strike-personal"]>.app-shell main.page-content>.cs2-screenshot-mount,
body[data-page="counter-strike-personal"] main.page-content>.cs2-screenshot-mount{width:100%;margin:18px 0 0}

.cms-screenshot-section{margin-top:18px}
.cms-screenshot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.cms-screenshot-section.cms-shots-horizontal .cms-screenshot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.cms-screenshot-section.cms-shots-square .cms-screenshot-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.cms-screenshot-section.cms-shots-square .cms-screenshot-grid img{aspect-ratio:1/1}
.cms-screenshot-section.cms-shots-vertical .cms-screenshot-grid{grid-template-columns:1fr}
.cms-screenshot-section.cms-shots-vertical figure{display:grid;grid-template-columns:minmax(220px,38%) 1fr;align-items:stretch}
.cms-screenshot-section.cms-shots-vertical figure>a{min-height:190px}
.cms-screenshot-section.cms-shots-vertical img{height:100%;aspect-ratio:auto;object-fit:cover}
.cms-screenshot-section.cms-shots-featured .cms-screenshot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.cms-screenshot-section.cms-shots-featured figure:first-child{grid-column:1/-1}
.cms-screenshot-section.cms-shots-featured figure:first-child img{aspect-ratio:21/9;max-height:620px}
.cms-screenshot-open-original{display:inline-flex;margin-top:5px;color:#c99cff;font-size:.78rem;font-weight:800;text-decoration:none}
@media(max-width:900px){.cms-screenshot-grid,.cms-screenshot-section.cms-shots-horizontal .cms-screenshot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cms-screenshot-grid,.cms-screenshot-section.cms-shots-horizontal .cms-screenshot-grid,.cms-screenshot-section.cms-shots-featured .cms-screenshot-grid{grid-template-columns:1fr}.cms-screenshot-section.cms-shots-vertical figure{grid-template-columns:1fr}.cms-screenshot-section.cms-shots-featured figure:first-child{grid-column:auto}.cms-screenshot-section.cms-shots-featured figure:first-child img{aspect-ratio:16/9}}

/* Public edit preview — enabled only inside an authenticated admin iframe. */
.cms-edit-mode body{cursor:default}
.cms-edit-mode body img,.cms-edit-mode main.page-content h1,.cms-edit-mode main.page-content h2,.cms-edit-mode main.page-content h3,.cms-edit-mode main.page-content h4,.cms-edit-mode main.page-content p,.cms-edit-mode main.page-content .button,.cms-edit-mode main.page-content article.panel,.cms-edit-mode main.page-content section.panel,.cms-edit-mode main.page-content [data-site-screenshots]{cursor:pointer}
.cms-edit-mode .cms-edit-hover{outline:2px dashed rgba(194,132,255,.9)!important;outline-offset:3px}
.cms-edit-mode .cms-edit-target{outline:3px solid #a855f7!important;outline-offset:4px;box-shadow:0 0 0 6px rgba(168,85,247,.18)!important}

/* Admin Page Builder */
.cms-builder-toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px;padding:16px;border:1px solid #2c2041;border-radius:13px;background:#090610}
.cms-builder-toolbar label{display:grid;gap:7px;color:#d9ccef;font-weight:700}
.cms-builder-toolbar select{width:100%;padding:10px 11px;border:1px solid #3a2a53;border-radius:9px;background:#0b0712;color:#fff;font:inherit}
.cms-builder-toolbar>.button{align-self:end}
.cms-builder-workspace{display:grid;grid-template-columns:minmax(230px,300px) minmax(480px,1fr) minmax(260px,330px);gap:15px;align-items:start}
.cms-builder-section-column,.cms-builder-preview-wrap,.cms-builder-inspector{min-width:0;border:1px solid #2d2142;border-radius:14px;background:#090610;overflow:hidden}
.cms-builder-column-head,.cms-builder-preview-head{padding:14px 15px;border-bottom:1px solid #2d2142}
.cms-builder-column-head h3{margin:0 0 4px}.cms-builder-column-head p,.cms-builder-preview-head span{display:block;margin:0;color:#9f91b8;font-size:.82rem;line-height:1.45}
.cms-builder-section-list{display:grid;gap:9px;padding:12px;max-height:760px;overflow:auto}
.cms-builder-section-card{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px 10px;align-items:center;padding:11px;border:1px solid #33254a;border-radius:10px;background:#0d0917;cursor:grab}
.cms-builder-section-card.dragging{opacity:.45}.cms-builder-section-card.drag-over{border-color:#a855f7;transform:translateY(2px)}
.cms-builder-section-card>div{min-width:0}.cms-builder-section-card strong,.cms-builder-section-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cms-builder-section-card small{margin-top:3px;color:#786b8c;font-size:.67rem}
.cms-builder-section-card label{grid-column:2;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;color:#a99bbd;font-size:.75rem}
.cms-builder-section-card select{min-width:0;padding:7px;border:1px solid #3a2a53;border-radius:8px;background:#07050d;color:#fff}
.cms-drag-handle{grid-row:1/3;align-self:center;color:#a855f7;font-size:1.1rem}
.cms-builder-preview-head{display:flex;justify-content:space-between;gap:12px;align-items:center}
.cms-builder-preview-wrap iframe{display:block;width:100%;height:760px;border:0;background:#07050d}
.cms-builder-inspector-form{display:grid;gap:12px;padding:14px}
.cms-builder-inspector-form label{display:grid;gap:6px;color:#d9ccef;font-weight:700}
.cms-builder-inspector-form input,.cms-builder-inspector-form textarea,.cms-builder-inspector-form select{width:100%;padding:10px 11px;border:1px solid #3a2a53;border-radius:9px;background:#0b0712;color:#fff;font:inherit}
.cms-builder-inspector-form .checkbox-label{display:flex;align-items:center;gap:9px}.cms-builder-inspector-form .checkbox-label input{width:auto}
.cms-builder-inspector-form [hidden]{display:none!important}
@media(max-width:1200px){.cms-builder-workspace{grid-template-columns:260px 1fr}.cms-builder-inspector{grid-column:1/-1}.cms-builder-inspector-form{grid-template-columns:repeat(2,minmax(0,1fr))}.cms-builder-inspector-form .site-admin-form-actions{grid-column:1/-1}}
@media(max-width:820px){.cms-builder-toolbar,.cms-builder-workspace{grid-template-columns:1fr}.cms-builder-preview-wrap iframe{height:620px}.cms-builder-inspector{grid-column:auto}.cms-builder-inspector-form{grid-template-columns:1fr}}

/* Add Page: all four languages are always created together. */
.cms-translation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cms-language-card{display:grid;grid-template-columns:1fr;gap:11px;margin:0;padding:15px;border:1px solid #34264b;border-radius:12px;background:#0c0814;min-width:0}
.cms-language-card legend{padding:0 8px;color:#d8b4fe;font-weight:900}
.cms-language-card label{min-width:0}.cms-language-card label.wide{grid-column:auto}
@media(max-width:820px){.cms-translation-grid{grid-template-columns:1fr}}

/* SEO audit */
.seo-audit-box{margin-top:18px;padding:16px;border:1px solid #2d2142;border-radius:13px;background:#090610}
.seo-audit-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.seo-audit-head h3{margin:0 0 4px}.seo-audit-head p{margin:0;color:#a99bbd}
.seo-audit-summary{display:flex;justify-content:space-between;gap:15px;margin-top:14px;padding:12px;border-radius:9px;background:#100a1c}.seo-audit-summary span{color:#d8b4fe}
.seo-audit-list{display:grid;gap:8px;margin-top:10px}.seo-audit-list article{display:grid;grid-template-columns:minmax(170px,.7fr) 1.5fr minmax(180px,.8fr);gap:12px;padding:10px;border:1px solid #2d2142;border-radius:9px}.seo-audit-list article span{color:#ffb4c3}.seo-audit-list article small{color:#8f80a8;overflow-wrap:anywhere}
@media(max-width:760px){.seo-audit-head,.seo-audit-summary{flex-direction:column}.seo-audit-list article{grid-template-columns:1fr}}

/* Dynamic pages created in Admin */
.cms-dynamic-page-content{display:grid;gap:18px}
.cms-dynamic-body{white-space:pre-line;line-height:1.7;color:var(--muted)}
.cms-dynamic-body p{margin:0 0 1rem}

/* v82 screenshot drag ordering */
.site-admin-media-page-group{display:grid;gap:10px;margin:14px 0 22px}.site-admin-media-page-group>h3{margin:0;color:#e9ddfa}.site-admin-media-page-list{display:grid;gap:10px}.site-admin-media-item[draggable="true"]{cursor:grab}.site-admin-media-item.dragging{opacity:.5}.site-admin-media-item.drag-over{outline:2px dashed #a855f7;outline-offset:3px}


/* v84: full-width horizontal/vertical visual page-builder canvas */
.cms-builder-grid>.cms-builder-width-three-quarters{grid-column:span 9;margin-top:0!important}
.cms-builder-grid>.cms-builder-width-quarter{grid-column:span 3;margin-top:0!important}
@media(max-width:980px){.cms-builder-grid>.cms-builder-width-quarter,.cms-builder-grid>.cms-builder-width-three-quarters{grid-column:span 6}}
@media(max-width:720px){.cms-builder-grid>.cms-builder-width-quarter,.cms-builder-grid>.cms-builder-width-three-quarters{grid-column:1!important}}
.cms-builder-help{margin:0 0 14px;padding:13px 15px;border:1px solid #4b3370;border-radius:11px;background:rgba(135,68,211,.09);color:#d9ccef;line-height:1.55}
.cms-builder-toolbar{grid-template-columns:repeat(5,minmax(150px,1fr)) auto auto;align-items:end}
.cms-builder-toolbar label small{color:#8f82a5;font-size:.72rem;font-weight:500}
.cms-builder-workspace{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
.cms-builder-section-column,.cms-builder-preview-wrap,.cms-builder-inspector{grid-column:1/-1!important}
.cms-builder-section-column{overflow:auto}
.cms-builder-section-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;max-height:none;overflow:visible;padding:14px;background:linear-gradient(90deg,rgba(157,70,255,.035) 1px,transparent 1px),linear-gradient(rgba(157,70,255,.035) 1px,transparent 1px);background-size:calc(100% / 12) 100%,100% 54px}
.cms-builder-section-card{position:relative;grid-template-columns:28px minmax(0,1fr);grid-column:span 12;min-height:104px;align-content:start;background:linear-gradient(180deg,rgba(157,70,255,.075),rgba(13,9,23,.98));box-shadow:0 8px 24px rgba(0,0,0,.18)}
.cms-builder-section-card.cms-layout-width-three-quarters{grid-column:span 9}
.cms-builder-section-card.cms-layout-width-two-thirds{grid-column:span 8}
.cms-builder-section-card.cms-layout-width-half{grid-column:span 6}
.cms-builder-section-card.cms-layout-width-third{grid-column:span 4}
.cms-builder-section-card.cms-layout-width-quarter{grid-column:span 3}
.cms-builder-card-controls{grid-column:1/-1;display:flex;align-items:end;justify-content:space-between;gap:10px;padding-top:4px}
.cms-builder-section-card label{grid-column:auto;flex:1;grid-template-columns:auto minmax(0,1fr)}
.cms-builder-nudge{display:flex;gap:5px}
.cms-builder-nudge button{display:grid;width:32px;height:32px;place-items:center;border:1px solid #4b3670;border-radius:7px;background:#08050e;color:#e5d8f7;cursor:pointer}
.cms-builder-nudge button:hover{border-color:#b866ff;background:#1a1028}
.cms-builder-section-card.drag-over[data-drop-side="before"]{box-shadow:-5px 0 0 #b866ff,0 8px 24px rgba(0,0,0,.18)}
.cms-builder-section-card.drag-over[data-drop-side="after"]{box-shadow:5px 0 0 #b866ff,0 8px 24px rgba(0,0,0,.18)}
.cms-builder-preview-viewport{width:100%;overflow:auto;padding:16px;background:repeating-conic-gradient(#0a0710 0 25%,#0e0a16 0 50%) 50%/24px 24px;scrollbar-color:#72519b #0a0710}
.cms-builder-preview-wrap iframe{display:block;max-width:none!important;border:1px solid #4a3768!important;border-radius:10px;background:#07050d;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.cms-admin-builder-panel[data-editor-view="horizontal"] .cms-builder-preview-wrap iframe{width:1440px!important;height:850px!important;margin:0}
.cms-admin-builder-panel[data-editor-view="vertical"] .cms-builder-section-list{grid-template-columns:1fr;background-size:100% 54px}
.cms-admin-builder-panel[data-editor-view="vertical"] .cms-builder-section-card{grid-column:1!important;min-height:0}
.cms-admin-builder-panel[data-editor-view="vertical"] .cms-builder-preview-wrap iframe{width:430px!important;height:900px!important;margin:0 auto}
.cms-admin-builder-panel[data-editor-view="vertical"] .cms-builder-section-card.drag-over[data-drop-side="before"]{box-shadow:0 -5px 0 #b866ff,0 8px 24px rgba(0,0,0,.18)}
.cms-admin-builder-panel[data-editor-view="vertical"] .cms-builder-section-card.drag-over[data-drop-side="after"]{box-shadow:0 5px 0 #b866ff,0 8px 24px rgba(0,0,0,.18)}
.cms-builder-inspector-form{grid-template-columns:repeat(3,minmax(0,1fr))}
.cms-builder-inspector-form label[data-builder-text-row],.cms-builder-inspector-form label[data-builder-link-row],.cms-builder-inspector-form .site-admin-form-actions{grid-column:1/-1}
.cms-edit-mode .cms-builder-grid>[data-cms-section-key]{position:relative;cursor:grab;transition:opacity .15s ease,box-shadow .15s ease,transform .15s ease}
.cms-edit-mode .cms-builder-grid>[data-cms-section-key]:active{cursor:grabbing}
.cms-edit-mode .cms-builder-grid>[data-cms-section-key]::after{content:"DRAG";position:absolute;top:8px;right:8px;z-index:10003;padding:3px 7px;border:1px solid rgba(196,111,255,.55);border-radius:7px;background:rgba(20,7,30,.9);color:#e8ccff;font:700 10px/1.2 var(--font);letter-spacing:.08em;pointer-events:none;opacity:0;transition:opacity .15s ease}
.cms-edit-mode .cms-builder-grid>[data-cms-section-key]:hover::after,.cms-edit-mode .cms-builder-grid>[data-cms-section-key].cms-edit-target::after{opacity:1}
.cms-edit-mode .cms-builder-grid>[data-cms-section-key]::before{content:"DRAG SECTION";position:absolute;z-index:9998;right:8px;top:8px;padding:4px 7px;border:1px solid rgba(216,165,255,.75);border-radius:6px;background:rgba(10,5,17,.88);color:#ead8ff;font:700 10px/1.2 system-ui,sans-serif;letter-spacing:.04em;pointer-events:none;opacity:.75}
.cms-edit-mode .cms-builder-grid>.cms-section-dragging{opacity:.38}
.cms-edit-mode .cms-builder-grid>.cms-section-drop-target{box-shadow:0 0 0 4px #b866ff!important;transform:translateY(-2px)}
@media(max-width:1200px){.cms-builder-toolbar{grid-template-columns:repeat(3,minmax(160px,1fr))}.cms-builder-inspector-form{grid-template-columns:repeat(2,minmax(0,1fr))}.cms-builder-section-card.cms-layout-width-quarter{grid-column:span 4}}
@media(max-width:820px){.cms-builder-toolbar{grid-template-columns:1fr 1fr}.cms-builder-section-list{min-width:1100px}.cms-admin-builder-panel[data-editor-view="vertical"] .cms-builder-section-list{min-width:0}.cms-builder-inspector-form{grid-template-columns:1fr}}
/* v84 wide admin workspace so the 1440 px desktop canvas is visible on normal desktop screens. */
.site-admin-shell{width:min(1800px,calc(100% - 32px))}


/* v85 — direct section/screenshot orientation and deletion controls */
.cms-builder-deleted{display:none!important}
.cms-builder-card-controls{flex-wrap:wrap}
.cms-builder-card-controls>label{min-width:210px}
.cms-builder-shot-control{border-left:3px solid #a855f7;padding-left:10px}
.cms-builder-delete-button{width:auto!important;min-width:74px;padding:0 10px!important;border-color:#7f263b!important;color:#ffb4c2!important;background:#210a11!important;font-weight:800}
.cms-builder-delete-button:hover{border-color:#ff607d!important;background:#35101b!important}
.cms-builder-deleted-wrap{border-top:1px solid #2d2142;background:#07050d}
.cms-builder-deleted-list{display:grid;gap:9px;padding:12px}
.cms-builder-deleted-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px;border:1px solid #54253a;border-radius:10px;background:#170910}
.cms-builder-deleted-card strong,.cms-builder-deleted-card small{display:block;max-width:720px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cms-builder-deleted-card small{margin-top:3px;color:#947284;font-size:.7rem}
.cms-screenshot-grid figure{position:relative}
.cms-screenshot-edit-tools{position:absolute;z-index:25;top:8px;right:8px;display:flex;gap:6px;padding:5px;border:1px solid rgba(205,159,255,.6);border-radius:8px;background:rgba(7,4,12,.92);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.cms-screenshot-edit-tools button{min-height:30px;padding:0 9px;border:1px solid #4b3670;border-radius:6px;background:#160d23;color:#f0e4ff;font:800 11px/1 system-ui,sans-serif;cursor:pointer}
.cms-screenshot-edit-tools .cms-screenshot-delete{border-color:#7f263b;background:#2a0c15;color:#ffb4c2}
.cms-screenshot-edit-tools button:hover{filter:brightness(1.18)}
.cms-screenshot-dragging{opacity:.4}
.cms-screenshot-drop-target{box-shadow:0 0 0 4px #b866ff!important}
.cms-edit-mode .cms-screenshot-grid figure>a{pointer-events:none}
@media(max-width:820px){.cms-builder-card-controls>label{min-width:100%}.cms-builder-deleted-card{align-items:flex-start;flex-direction:column}}

/* v85 portrait means an actual vertical screenshot, not merely a one-row list */
.cms-screenshot-section.cms-shots-horizontal .cms-screenshot-grid img{aspect-ratio:16/9;height:auto;object-fit:cover}
.cms-screenshot-section.cms-shots-vertical .cms-screenshot-grid{grid-template-columns:repeat(auto-fit,minmax(190px,280px));justify-content:center}
.cms-screenshot-section.cms-shots-vertical figure{display:block;max-width:280px;width:100%}
.cms-screenshot-section.cms-shots-vertical figure>a{min-height:0}
.cms-screenshot-section.cms-shots-vertical img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
@media(max-width:620px){.cms-screenshot-section.cms-shots-vertical .cms-screenshot-grid{grid-template-columns:1fr}.cms-screenshot-section.cms-shots-vertical figure{max-width:none}}


/* v87 — screenshot blocks are real movable layout blocks with readable shapes */
.cms-screenshot-section .cms-screenshot-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.cms-screenshot-section.cms-shots-horizontal .cms-screenshot-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
}
.cms-screenshot-section.cms-shots-horizontal .cms-screenshot-grid figure:only-child,
.cms-screenshot-section.cms-shots-natural .cms-screenshot-grid figure:only-child,
.cms-screenshot-section.cms-shots-featured .cms-screenshot-grid figure:only-child{
  grid-column:1/-1;
}
.cms-screenshot-section.cms-shots-horizontal .cms-screenshot-grid img{
  width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;
}
.cms-screenshot-section.cms-shots-vertical .cms-screenshot-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),280px));
  justify-content:center;
}
.cms-screenshot-section.cms-shots-vertical .cms-screenshot-grid figure{
  width:100%;max-width:280px;display:block;
}
.cms-screenshot-section.cms-shots-vertical .cms-screenshot-grid img{
  width:100%;aspect-ratio:9/16;height:auto;object-fit:cover;
}
.cms-screenshot-section.cms-shots-square .cms-screenshot-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
}
.cms-screenshot-section.cms-shots-square .cms-screenshot-grid img{aspect-ratio:1/1;object-fit:cover}
.cms-screenshot-section.cms-shots-natural .cms-screenshot-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
}
.cms-screenshot-section.cms-shots-natural .cms-screenshot-grid a{
  display:grid;place-items:center;background:#050308;
}
.cms-screenshot-section.cms-shots-natural .cms-screenshot-grid img{
  width:100%;height:auto;max-height:72vh;aspect-ratio:auto;object-fit:contain;background:#050308;
}
.cms-screenshot-section.cms-shots-featured .cms-screenshot-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
}
.cms-screenshot-section.cms-shots-featured .cms-screenshot-grid figure:first-child{grid-column:1/-1}
.cms-screenshot-section.cms-shots-featured .cms-screenshot-grid figure:first-child img{width:100%;aspect-ratio:21/9;max-height:620px;object-fit:cover}
.cms-screenshot-grid figure,.cms-screenshot-grid figcaption{min-width:0}
.cms-screenshot-grid figcaption strong,.cms-screenshot-grid figcaption span,.cms-screenshot-open-original{
  overflow-wrap:break-word;word-break:normal;hyphens:auto;
}
.cms-screenshot-grid figure:only-child figcaption{max-width:none}

/* Controls shown directly on the editable screenshot block. Never shown publicly. */
.cms-screenshot-layout-toolbar{
  position:relative;z-index:40;display:grid;grid-template-columns:minmax(190px,1fr) minmax(170px,230px) minmax(170px,230px);gap:10px;
  align-items:end;padding:12px 14px;border-bottom:1px solid rgba(188,126,255,.45);
  background:linear-gradient(135deg,rgba(70,24,111,.98),rgba(13,8,22,.98));box-shadow:0 8px 24px rgba(0,0,0,.25);
  color:#f4eaff;font:700 12px/1.35 system-ui,sans-serif;cursor:default;
}
.cms-shot-toolbar-title strong,.cms-shot-toolbar-title small{display:block}
.cms-shot-toolbar-title strong{color:#fff;letter-spacing:.05em}
.cms-shot-toolbar-title small{margin-top:3px;color:#c8b5df;font-weight:500}
.cms-screenshot-layout-toolbar label{display:grid;gap:5px;color:#d8c9eb}
.cms-screenshot-layout-toolbar select{
  width:100%;min-height:36px;padding:7px 9px;border:1px solid #7652a2;border-radius:8px;background:#0a0611;color:#fff;font:700 12px/1.2 system-ui,sans-serif;
}
.cms-shot-toolbar-actions{grid-column:1/-1;display:flex;gap:7px;flex-wrap:wrap}
.cms-shot-toolbar-actions button{
  min-height:34px;padding:7px 10px;border:1px solid #75509f;border-radius:8px;background:#160d22;color:#f2e7ff;font:800 11px/1.15 system-ui,sans-serif;cursor:pointer;
}
.cms-shot-toolbar-actions button:hover{border-color:#c47aff;background:#28133f}
.cms-shot-toolbar-actions button.danger{margin-left:auto;border-color:#8c2d45;background:#2a0c15;color:#ffb9c6}
.cms-edit-mode [data-site-screenshots]{overflow:visible!important}
.cms-edit-mode [data-site-screenshots]>.cms-screenshot-section{margin-top:0}
@media(max-width:760px){
  .cms-screenshot-layout-toolbar{grid-template-columns:1fr}
  .cms-shot-toolbar-actions{grid-column:auto}
  .cms-shot-toolbar-actions button.danger{margin-left:0}
}

/* v88 — actual freeform visual page canvas. Sections can be dragged and resized directly. */
.cms-builder-grid.cms-freeform-grid{
  position:relative!important;
  display:block!important;
  width:100%;
  margin-top:18px;
  min-height:1400px;
  overflow:visible;
  background-image:
    linear-gradient(rgba(168,85,247,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(168,85,247,.055) 1px,transparent 1px);
  background-size:40px 40px;
  background-position:-1px -1px;
}
.cms-builder-grid.cms-freeform-grid>[data-cms-section-key]{
  position:absolute;
  box-sizing:border-box;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  overflow:auto;
  resize:none;
}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]{
  outline:1px dashed rgba(190,126,255,.55);
  outline-offset:2px;
  cursor:default;
}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]::before{display:none!important}
.cms-freeform-controls{
  position:sticky;
  z-index:10020;
  top:0;
  left:0;
  display:grid;
  grid-template-columns:minmax(210px,auto) minmax(160px,1fr) auto auto;
  gap:7px;
  align-items:center;
  min-height:38px;
  padding:5px 7px;
  border:1px solid rgba(207,158,255,.9);
  border-radius:8px;
  background:linear-gradient(90deg,rgba(67,24,104,.98),rgba(12,7,20,.96));
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  color:#f5eaff;
  font:800 10px/1.2 system-ui,sans-serif;
  user-select:none;
  touch-action:none;
}
.cms-freeform-controls button{
  min-height:28px;
  padding:5px 8px;
  border:1px solid #7650a3;
  border-radius:6px;
  background:#130a20;
  color:#f4eaff;
  font:800 10px/1 system-ui,sans-serif;
  cursor:pointer;
  white-space:nowrap;
}
.cms-freeform-controls button:hover{border-color:#d092ff;background:#28113f}
.cms-freeform-controls .cms-freeform-move{
  border-color:#ce87ff;
  background:#7d24c8;
  color:#fff;
  cursor:grab;
  letter-spacing:.035em;
  touch-action:none;
}
.cms-freeform-controls .cms-freeform-move:active{cursor:grabbing}
.cms-freeform-controls [data-cms-frame-readout]{
  min-width:0;
  overflow:hidden;
  color:#d7c4ea;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:650;
}
.cms-freeform-controls [data-cms-resize]{
  position:absolute;
  z-index:10030;
  display:block;
  width:14px;
  height:14px;
  border:2px solid #fff;
  border-radius:4px;
  background:#9d35f1;
  box-shadow:0 0 0 2px rgba(8,4,13,.8);
  touch-action:none;
}
.cms-freeform-controls [data-cms-resize="n"]{top:-9px;left:50%;cursor:ns-resize;transform:translateX(-50%)}
.cms-freeform-controls [data-cms-resize="s"]{bottom:calc(-100% - 7px);left:50%;cursor:ns-resize;transform:translateX(-50%)}
.cms-freeform-controls [data-cms-resize="e"]{top:50%;right:-9px;cursor:ew-resize;transform:translateY(-50%)}
.cms-freeform-controls [data-cms-resize="w"]{top:50%;left:-9px;cursor:ew-resize;transform:translateY(-50%)}
.cms-freeform-controls [data-cms-resize="ne"]{top:-9px;right:-9px;cursor:nesw-resize}
.cms-freeform-controls [data-cms-resize="nw"]{top:-9px;left:-9px;cursor:nwse-resize}
.cms-freeform-controls [data-cms-resize="se"]{right:-9px;bottom:calc(-100% - 7px);cursor:nwse-resize}
.cms-freeform-controls [data-cms-resize="sw"]{left:-9px;bottom:calc(-100% - 7px);cursor:nesw-resize}
.cms-freeform-active-drag{
  outline:3px solid #c268ff!important;
  box-shadow:0 0 0 7px rgba(168,85,247,.2),0 18px 60px rgba(0,0,0,.48)!important;
}
.cms-freeform-pointer-active,.cms-freeform-pointer-active *{user-select:none!important}
.cms-admin-builder-panel:has([data-builder-layout-mode] option[value="freeform"]:checked) .cms-builder-preview-head{
  background:linear-gradient(90deg,rgba(126,36,200,.2),transparent);
}
@media(max-width:720px){
  .cms-builder-grid.cms-freeform-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    height:auto!important;
    min-height:0!important;
    background:none;
  }
  .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:100%!important;
    height:auto!important;
    z-index:auto!important;
    overflow:visible!important;
    margin:0!important;
  }
  .cms-freeform-controls{display:none!important}
}
@media(max-width:780px){
  .cms-freeform-controls{grid-template-columns:1fr 1fr}
  .cms-freeform-controls [data-cms-frame-readout]{grid-column:1/-1}
}

/* v88 handle correction: resize handles belong to the complete section edges. */
.cms-freeform-controls [data-cms-resize]{display:none!important}
.cms-builder-grid.cms-freeform-grid>[data-cms-section-key]>.cms-freeform-resize-handle{
  position:absolute;
  z-index:10035;
  display:block;
  width:14px;
  height:14px;
  border:2px solid #fff;
  border-radius:4px;
  background:#9d35f1;
  box-shadow:0 0 0 2px rgba(8,4,13,.8);
  touch-action:none;
}
.cms-freeform-resize-handle[data-cms-resize="n"]{top:-8px;left:50%;cursor:ns-resize;transform:translateX(-50%)}
.cms-freeform-resize-handle[data-cms-resize="s"]{bottom:-8px;left:50%;cursor:ns-resize;transform:translateX(-50%)}
.cms-freeform-resize-handle[data-cms-resize="e"]{top:50%;right:-8px;cursor:ew-resize;transform:translateY(-50%)}
.cms-freeform-resize-handle[data-cms-resize="w"]{top:50%;left:-8px;cursor:ew-resize;transform:translateY(-50%)}
.cms-freeform-resize-handle[data-cms-resize="ne"]{top:-8px;right:-8px;cursor:nesw-resize}
.cms-freeform-resize-handle[data-cms-resize="nw"]{top:-8px;left:-8px;cursor:nwse-resize}
.cms-freeform-resize-handle[data-cms-resize="se"]{right:-8px;bottom:-8px;cursor:nwse-resize}
.cms-freeform-resize-handle[data-cms-resize="sw"]{left:-8px;bottom:-8px;cursor:nesw-resize}
@media(max-width:720px){.cms-freeform-resize-handle{display:none!important}}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]{overflow:visible!important}
.cms-freeform-active .cms-screenshot-layout-toolbar [data-cms-shot-move],
.cms-freeform-active .cms-screenshot-layout-toolbar [data-cms-shot-beside]{display:none!important}
.cms-freeform-active .cms-shot-toolbar-title small::after{content:" Drag the purple MOVE bar above the entire section and resize from its edge handles.";color:#f1d9ff;font-weight:750}
body:not(.cms-freeform-active) .cms-freeform-controls,
body:not(.cms-freeform-active) .cms-freeform-resize-handle{display:none!important}
.cms-admin-builder-panel[data-layout-mode="freeform"] .cms-builder-nudge [data-move]{opacity:.55}
.cms-admin-builder-panel[data-layout-mode="freeform"] .cms-builder-nudge [data-move]::after{content:""}


/* v96 — actual OBS-style visual editor. The public default stays the exact v88 layout. */
.cms-builder-workspace-visual{grid-template-columns:minmax(0,1fr) 300px!important;align-items:start}
.cms-builder-workspace-visual .cms-builder-preview-wrap{min-width:0}
.cms-builder-workspace-visual .cms-builder-preview-viewport{height:min(76vh,980px);min-height:620px}
.cms-builder-toolbar-visual{grid-template-columns:minmax(180px,1fr) minmax(150px,.7fr) minmax(130px,.5fr)!important}
.cms-builder-template-and-actions{position:sticky;z-index:60;top:0;display:flex;justify-content:space-between;gap:14px;align-items:center;margin:14px 0;padding:10px;border:1px solid #34254d;border-radius:13px;background:rgba(9,5,16,.97);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.cms-layout-template-card{display:flex;gap:10px;align-items:center;max-width:390px;padding:8px 10px;border:1px solid #4a3269;border-radius:10px;background:#10091a;color:#fff;text-align:left;cursor:pointer}
.cms-layout-template-card:hover{border-color:#b866ff}.cms-layout-template-card strong,.cms-layout-template-card small{display:block}.cms-layout-template-card small{margin-top:2px;color:#ad9fc4}
.cms-layout-template-thumb{display:grid;width:70px;height:44px;grid-template-columns:5fr 7fr;grid-template-rows:1fr 1fr;gap:3px;padding:4px;border:1px solid #6d3f9a;border-radius:6px;background:#08050e}
.cms-layout-template-thumb i{display:block;border-radius:2px;background:#432060}.cms-layout-template-thumb i:nth-child(2){background:#7130a5}.cms-layout-template-thumb i:nth-child(3){grid-row:2;grid-column:1}.cms-layout-template-thumb i:nth-child(4){grid-row:2;grid-column:2}.cms-layout-template-thumb i:nth-child(5){display:none}
.cms-builder-savebar{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.cms-builder-content-details{margin-top:14px;border:1px solid #34254d;border-radius:10px;background:#0a0611}.cms-builder-content-details>summary{padding:12px 13px;color:#d9ccef;font-weight:800;cursor:pointer}.cms-builder-content-details .cms-builder-inspector-form{border:0;border-top:1px solid #34254d;border-radius:0}
.cms-selected-frame-controls{display:grid;gap:10px;padding:12px;border:1px solid #472d68;border-radius:10px;background:#0d0816}.cms-frame-readout{color:#d8c9eb;font-weight:800}.cms-frame-preset-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.cms-frame-preset-row button{min-height:40px;border:1px solid #543477;border-radius:8px;background:#160c24;color:#fff;font:900 14px/1 system-ui;cursor:pointer}.cms-frame-preset-row button:hover{border-color:#c06cff;background:#251139}
@media(max-width:1050px){.cms-builder-workspace-visual{grid-template-columns:1fr!important}.cms-builder-inspector{position:static!important}.cms-builder-template-and-actions{position:static}}

/* The custom visual canvas is absolute like OBS, but snapping/collision is enforced in JS. */
.cms-builder-grid.cms-freeform-grid{position:relative!important;display:block!important;margin-top:16px!important;min-width:0;background:none!important;overflow:visible!important}
.cms-builder-grid.cms-freeform-grid>[data-cms-section-key]{position:absolute;box-sizing:border-box;min-width:0;margin:0!important;overflow:hidden!important;transition:box-shadow .12s ease,outline-color .12s ease}
.cms-builder-grid.cms-freeform-grid>[data-cms-section-key]>.panel,.cms-builder-grid.cms-freeform-grid>[data-cms-section-key]>.cms-screenshot-section{height:100%;margin:0!important}
.cms-builder-grid.cms-freeform-grid>.panel{display:flex;flex-direction:column}.cms-builder-grid.cms-freeform-grid>.panel>.panel-body{min-height:0;overflow:auto}.cms-builder-grid.cms-freeform-grid>.profile-panel .panel-body,.cms-builder-grid.cms-freeform-grid>.live-panel .live-content{flex:1;min-height:0}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key],.cms-edit-mode .cms-original-visual-item{cursor:move}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]:hover,.cms-edit-mode .cms-original-visual-item:hover{outline:1px dashed rgba(191,113,255,.7);outline-offset:3px}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key].cms-visual-selected{outline:3px solid #b85dff!important;outline-offset:3px;box-shadow:0 0 0 1px #2b0d43,0 0 26px rgba(172,61,255,.28)!important}
.cms-freeform-controls,.cms-screenshot-layout-toolbar{display:none!important}
.cms-visual-grip{position:absolute;z-index:10005;top:-13px;left:50%;display:none;width:40px;height:14px;transform:translateX(-50%);border:2px solid #b85dff;border-radius:5px;background:#14081f;cursor:move}.cms-visual-grip::before{content:"";position:absolute;inset:3px 9px;background:radial-gradient(circle,#dba4ff 1.4px,transparent 1.8px) 0 0/7px 7px}
.cms-visual-selected>.cms-visual-grip{display:block}
.cms-builder-grid.cms-freeform-grid>[data-cms-section-key]>.cms-freeform-resize-handle{display:none;position:absolute;z-index:10006;width:13px;height:13px;border:2px solid #f1d8ff;border-radius:2px;background:#8e2de2;box-shadow:0 0 0 2px #14071e}
.cms-builder-grid.cms-freeform-grid>[data-cms-section-key].cms-visual-selected>.cms-freeform-resize-handle{display:block}
.cms-freeform-resize-handle[data-cms-resize="n"]{top:-8px;left:50%;cursor:ns-resize;transform:translateX(-50%)}
.cms-freeform-resize-handle[data-cms-resize="s"]{bottom:-8px;left:50%;cursor:ns-resize;transform:translateX(-50%)}
.cms-freeform-resize-handle[data-cms-resize="e"]{top:50%;right:-8px;cursor:ew-resize;transform:translateY(-50%)}
.cms-freeform-resize-handle[data-cms-resize="w"]{top:50%;left:-8px;cursor:ew-resize;transform:translateY(-50%)}
.cms-freeform-resize-handle[data-cms-resize="ne"]{top:-8px;right:-8px;cursor:nesw-resize}.cms-freeform-resize-handle[data-cms-resize="nw"]{top:-8px;left:-8px;cursor:nwse-resize}.cms-freeform-resize-handle[data-cms-resize="se"]{right:-8px;bottom:-8px;cursor:nwse-resize}.cms-freeform-resize-handle[data-cms-resize="sw"]{left:-8px;bottom:-8px;cursor:nesw-resize}
.cms-visual-guides-active .cms-builder-grid.cms-freeform-grid::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;background-image:linear-gradient(90deg,transparent calc(100% - 1px),#b75dff 0);background-size:calc((100% - 176px)/12 + 16px) 100%}
.cms-freeform-active-drag{opacity:.92;box-shadow:0 0 0 3px #c46fff,0 20px 50px rgba(0,0,0,.5)!important}

/* Screenshot blocks reflow with their real width. Stacked remains landscape — never a thin 9:16 sausage. */
.cms-builder-grid.cms-freeform-grid [data-site-screenshots]{overflow:hidden!important}.cms-builder-grid.cms-freeform-grid [data-site-screenshots]>.cms-screenshot-section{display:flex;min-height:0;flex-direction:column}.cms-builder-grid.cms-freeform-grid [data-site-screenshots] .cms-screenshot-grid{flex:1;min-height:0;overflow:auto;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))!important;align-content:start}
.cms-screenshot-section.cms-shots-horizontal .cms-screenshot-grid{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))!important}
.cms-screenshot-section.cms-shots-vertical .cms-screenshot-grid{grid-template-columns:1fr!important}.cms-screenshot-section.cms-shots-vertical figure{display:block!important;max-width:none!important}.cms-screenshot-section.cms-shots-vertical figure>a{min-height:0!important}.cms-screenshot-section.cms-shots-vertical img{width:100%!important;height:auto!important;aspect-ratio:16/9!important;object-fit:contain!important;background:#050309}
.cms-screenshot-section.cms-shots-horizontal img,.cms-builder-grid.cms-freeform-grid .cms-screenshot-grid img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#050309}
.cms-screenshot-edit-tools{padding:3px!important}.cms-screenshot-edit-tools button{width:30px;min-width:30px;padding:0!important;font-size:17px!important}

/* Preserve different live/offline media states; the editor never forces one aspect ratio onto both. */
.live-panel.is-live .live-visual{background-size:cover}.live-panel.is-offline .live-visual{background-size:cover}.cms-builder-grid.cms-freeform-grid>.live-panel .live-content{height:100%}

@media(max-width:720px){.cms-builder-grid.cms-freeform-grid{display:grid!important;height:auto!important;min-height:0!important;gap:16px!important}.cms-builder-grid.cms-freeform-grid>[data-cms-section-key]{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;min-height:0!important}.cms-visual-grip,.cms-freeform-resize-handle{display:none!important}}

/* ========================================================================== 
   v97 — real visual editor, clean snap grid, resizable screenshot cards
   ========================================================================== */

/* The public page uses a real 12-column CSS grid when a saved visual layout is
   active. This prevents overlap and makes adjacent cards share exact row lines. */
.cms-builder-grid.cms-freeform-grid{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-auto-rows:24px!important;
  gap:16px!important;
  position:relative!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  margin-top:16px!important;
  overflow:visible!important;
  background:none!important;
}
.cms-builder-grid.cms-freeform-grid>[data-cms-section-key]{
  position:relative!important;
  inset:auto!important;
  width:auto!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  margin:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  align-self:stretch!important;
}
.cms-builder-grid.cms-freeform-grid>.panel,
.cms-builder-grid.cms-freeform-grid>[data-site-screenshots],
.cms-builder-grid.cms-freeform-grid>.cms-custom-block{
  display:flex!important;
  flex-direction:column!important;
}
.cms-builder-grid.cms-freeform-grid>.panel>.panel-body,
.cms-builder-grid.cms-freeform-grid>.cms-custom-block>.panel-body,
.cms-builder-grid.cms-freeform-grid>[data-site-screenshots]>.cms-screenshot-section{
  min-height:0!important;
  flex:1 1 auto!important;
}
.cms-builder-grid.cms-freeform-grid>.panel>.panel-body{overflow:auto!important}
.cms-builder-grid.cms-freeform-grid>.live-panel{isolation:isolate}
.cms-builder-grid.cms-freeform-grid>.live-panel .live-visual{position:absolute!important;inset:0!important}
.cms-builder-grid.cms-freeform-grid>.live-panel .live-content{position:relative!important;z-index:2!important;height:100%!important}

/* On phones the visual layout becomes a safe vertical stack; desktop frames do
   not force tiny cards on mobile. */
@media(max-width:760px){
  .cms-builder-grid.cms-freeform-grid{display:block!important}
  .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]{display:block!important;width:100%!important;height:auto!important;margin:0 0 16px!important;overflow:visible!important}
}

/* Actual editor selection and OBS-like handles. */
.cms-edit-mode .cms-builder-grid.cms-freeform-grid{
  background-image:linear-gradient(rgba(174,101,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(174,101,255,.06) 1px,transparent 1px)!important;
  background-size:calc((100% - 176px)/12 + 16px) 40px!important;
  outline:1px solid rgba(181,111,255,.22)!important;
}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]{
  overflow:auto!important;
  outline:1px dashed rgba(196,128,255,.55)!important;
  outline-offset:-2px!important;
  cursor:default!important;
}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key].cms-visual-selected{
  outline:3px solid #c979ff!important;
  box-shadow:0 0 0 2px rgba(10,4,18,.9),0 0 28px rgba(183,92,255,.42)!important;
  z-index:20!important;
}
.cms-visual-grip{
  position:absolute!important;
  z-index:10040!important;
  left:50%!important;
  top:5px!important;
  width:64px!important;
  height:24px!important;
  transform:translateX(-50%)!important;
  border:1px solid #d9a3ff!important;
  border-radius:8px!important;
  background:#4d1d70!important;
  box-shadow:0 4px 14px rgba(0,0,0,.45)!important;
  cursor:grab!important;
  touch-action:none!important;
}
.cms-visual-grip::before{content:"⠿";display:grid;place-items:center;width:100%;height:100%;color:#fff;font:900 18px/1 system-ui}
.cms-freeform-active-drag .cms-visual-grip{cursor:grabbing!important}
.cms-freeform-resize-handle{
  position:absolute!important;
  z-index:10050!important;
  display:block!important;
  width:16px!important;
  height:16px!important;
  border:2px solid #fff!important;
  border-radius:3px!important;
  background:#a83cff!important;
  box-shadow:0 0 0 2px #41125e,0 2px 8px rgba(0,0,0,.55)!important;
  touch-action:none!important;
}
.cms-freeform-resize-handle[data-cms-resize="n"]{left:50%;top:-8px;transform:translateX(-50%);cursor:ns-resize}
.cms-freeform-resize-handle[data-cms-resize="s"]{left:50%;bottom:-8px;transform:translateX(-50%);cursor:ns-resize}
.cms-freeform-resize-handle[data-cms-resize="e"]{right:-8px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.cms-freeform-resize-handle[data-cms-resize="w"]{left:-8px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.cms-freeform-resize-handle[data-cms-resize="ne"]{right:-8px;top:-8px;cursor:nesw-resize}
.cms-freeform-resize-handle[data-cms-resize="se"]{right:-8px;bottom:-8px;cursor:nwse-resize}
.cms-freeform-resize-handle[data-cms-resize="sw"]{left:-8px;bottom:-8px;cursor:nesw-resize}
.cms-freeform-resize-handle[data-cms-resize="nw"]{left:-8px;top:-8px;cursor:nwse-resize}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]:not(.cms-visual-selected)>.cms-freeform-resize-handle{opacity:.28}

/* Each screenshot is its own resizable 12-column visual item. */
.cms-screenshot-section{container-type:inline-size}
.cms-screenshot-section .cms-screenshot-grid,
.home-screenshot-mount .cms-screenshot-grid,
.site-screenshot-gallery .cms-screenshot-grid{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-auto-flow:row dense!important;
  gap:16px!important;
  align-items:stretch!important;
}
.cms-screenshot-grid>figure{
  grid-column:span var(--cms-shot-span,4)!important;
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  align-self:stretch!important;
}
.cms-screenshot-grid>figure>a:first-child{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:var(--cms-shot-height,220px)!important;
  min-height:100px!important;
  overflow:hidden!important;
  background:#050308!important;
}
.cms-screenshot-grid>figure>a:first-child>img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:var(--cms-shot-fit,contain)!important;
  object-position:center!important;
  background:#050308!important;
}
.cms-screenshot-grid>figure>figcaption{flex:1 1 auto!important;min-width:0!important}
.cms-screenshot-section.cms-shots-vertical .cms-screenshot-grid>figure{grid-column:1/-1!important}
.cms-screenshot-section.cms-shots-vertical .cms-screenshot-grid>figure>a:first-child>img{object-fit:var(--cms-shot-fit,contain)!important}
.cms-screenshot-section.cms-shots-portrait .cms-screenshot-grid>figure>a:first-child{aspect-ratio:9/16!important;height:auto!important;min-height:280px!important;max-height:720px!important}
.cms-screenshot-section.cms-shots-portrait .cms-screenshot-grid>figure>a:first-child>img{object-fit:var(--cms-shot-fit,contain)!important}
.cms-screenshot-section.cms-shots-square .cms-screenshot-grid>figure>a:first-child{aspect-ratio:1/1!important;height:auto!important}
.cms-screenshot-section.cms-shots-natural .cms-screenshot-grid>figure>a:first-child{height:auto!important;min-height:120px!important}
.cms-screenshot-section.cms-shots-natural .cms-screenshot-grid>figure>a:first-child>img{height:auto!important;max-height:720px!important;object-fit:contain!important}
.cms-screenshot-section.cms-shots-featured .cms-screenshot-grid>figure:first-child{grid-column:1/-1!important}
.cms-screenshot-section.cms-shots-featured .cms-screenshot-grid>figure:first-child>a:first-child{min-height:340px!important}
@media(max-width:760px){.cms-screenshot-grid>figure{grid-column:1/-1!important}}

/* Screenshot edit mode: drag/reorder and true resizing handles. */
.cms-edit-mode .cms-screenshot-grid>figure{position:relative!important;overflow:visible!important;outline:2px solid rgba(188,105,255,.72)!important;outline-offset:-2px!important}
.cms-screenshot-edit-tools{top:7px!important;left:7px!important;right:auto!important;z-index:11020!important;padding:4px!important}
.cms-screenshot-edit-tools button{width:32px!important;height:32px!important;min-height:32px!important;padding:0!important;font-size:16px!important}
.cms-shot-size-readout{position:absolute;z-index:11010;right:8px;top:8px;padding:4px 7px;border:1px solid #8c55b8;border-radius:7px;background:rgba(10,5,16,.9);color:#f1e6ff;font:800 10px/1 system-ui;pointer-events:none}
.cms-shot-resize-handle{position:absolute;z-index:11030;width:13px;height:13px;border:2px solid #fff;border-radius:2px;background:#a83cff;box-shadow:0 0 0 2px #451263;touch-action:none}
.cms-shot-resize-handle[data-shot-resize="n"]{left:50%;top:-7px;transform:translateX(-50%);cursor:ns-resize}
.cms-shot-resize-handle[data-shot-resize="s"]{left:50%;bottom:-7px;transform:translateX(-50%);cursor:ns-resize}
.cms-shot-resize-handle[data-shot-resize="e"]{right:-7px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.cms-shot-resize-handle[data-shot-resize="w"]{left:-7px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.cms-shot-resize-handle[data-shot-resize="ne"]{right:-7px;top:-7px;cursor:nesw-resize}
.cms-shot-resize-handle[data-shot-resize="se"]{right:-7px;bottom:-7px;cursor:nwse-resize}
.cms-shot-resize-handle[data-shot-resize="sw"]{left:-7px;bottom:-7px;cursor:nesw-resize}
.cms-shot-resize-handle[data-shot-resize="nw"]{left:-7px;top:-7px;cursor:nwse-resize}
.cms-add-screenshot-button{margin-left:auto;width:34px;height:34px;border:1px solid #9a5fc7;border-radius:8px;background:#2b123e;color:#fff;font:900 22px/1 system-ui;cursor:pointer}
.cms-add-screenshot-button:hover{background:#481b68}

/* Custom visual blocks added from the Page Builder. */
.cms-custom-block-body{display:grid;gap:14px;align-content:start}
.cms-custom-block-body>img{display:block;width:100%;height:100%;min-height:160px;object-fit:contain;border-radius:10px;background:#050308}

/* Admin canvas: enough width for the real 1440 px page and no fake scaled phone view. */
.site-admin-shell{width:min(1920px,calc(100% - 20px))!important;max-width:none!important}
.cms-builder-workspace-visual{display:grid!important;grid-template-columns:minmax(0,1fr) 340px!important;gap:16px!important;align-items:start!important}
.cms-builder-preview-wrap{min-width:0!important}
.cms-builder-preview-viewport{height:880px!important;overflow:auto!important;padding:14px!important;background:#06040a!important}
.cms-admin-builder-panel[data-editor-view="horizontal"] .cms-builder-preview-wrap iframe{display:block!important;width:1440px!important;height:2400px!important;max-width:none!important;transform:none!important;zoom:1!important;margin:0!important}
.cms-admin-builder-panel[data-editor-view="vertical"] .cms-builder-preview-wrap iframe{width:430px!important;height:1600px!important;margin:0 auto!important}
.cms-builder-inspector{position:sticky!important;top:12px!important;max-height:880px!important;overflow:auto!important}
.cms-builder-template-and-actions{display:grid!important;gap:12px!important;margin-bottom:14px!important}
.cms-layout-template-grid{display:grid!important;grid-template-columns:repeat(4,minmax(190px,1fr))!important;gap:10px!important}
.cms-layout-template-card{display:grid!important;grid-template-columns:88px minmax(0,1fr)!important;align-items:center!important;gap:10px!important;text-align:left!important;padding:10px!important;cursor:pointer!important}
.cms-layout-template-thumb{display:grid!important;grid-template-columns:repeat(12,1fr)!important;grid-template-rows:repeat(6,7px)!important;gap:2px!important;width:88px!important;height:52px!important;padding:4px!important;border:1px solid #5b3b78!important;border-radius:7px!important;background:#08050d!important}
.cms-layout-template-thumb i{display:block!important;border-radius:2px!important;background:#863bc1!important}
.template-original i:nth-child(1){grid-column:1/6;grid-row:1/3}.template-original i:nth-child(2){grid-column:6/13;grid-row:1/3}.template-original i:nth-child(3){grid-column:1/5;grid-row:3/7}.template-original i:nth-child(4){grid-column:5/9;grid-row:3/5}.template-original i:nth-child(5){grid-column:9/13;grid-row:3/5}.template-original i:nth-child(6){grid-column:5/13;grid-row:5/7}
.template-balanced i:nth-child(1){grid-column:1/6;grid-row:1/3}.template-balanced i:nth-child(2){grid-column:6/13;grid-row:1/3}.template-balanced i:nth-child(3){grid-column:1/7;grid-row:3/7}.template-balanced i:nth-child(4){grid-column:7/13;grid-row:3/7}
.template-media i:nth-child(1){grid-column:1/6;grid-row:1/3}.template-media i:nth-child(2){grid-column:6/13;grid-row:1/3}.template-media i:nth-child(3){grid-column:1/13;grid-row:3/5;background:#c468ff!important}.template-media i:nth-child(4){grid-column:1/13;grid-row:5/7}
.template-compact i:nth-child(1){grid-column:1/5;grid-row:1/3}.template-compact i:nth-child(2){grid-column:5/13;grid-row:1/3}.template-compact i:nth-child(3){grid-column:1/5;grid-row:3/7}.template-compact i:nth-child(4){grid-column:5/9;grid-row:3/7}.template-compact i:nth-child(5){grid-column:9/13;grid-row:3/7}
.cms-builder-addbar{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;padding:10px!important;border:1px solid #38264f!important;border-radius:10px!important;background:#090610!important}
.cms-builder-addbar strong{margin-right:4px;color:#d8c8ea}
.cms-builder-savebar{position:sticky!important;top:0!important;z-index:120!important;display:flex!important;justify-content:flex-end!important;gap:8px!important;padding:10px!important;border:1px solid #4d3370!important;border-radius:10px!important;background:rgba(10,6,16,.96)!important;box-shadow:0 10px 28px rgba(0,0,0,.36)!important}
@media(max-width:1600px){.cms-builder-workspace-visual{grid-template-columns:1fr!important}.cms-builder-inspector{position:relative!important;top:auto!important;max-height:none!important}.cms-layout-template-grid{grid-template-columns:repeat(2,minmax(190px,1fr))!important}}
@media(max-width:820px){.cms-layout-template-grid{grid-template-columns:1fr!important}.cms-admin-builder-panel[data-editor-view="horizontal"] .cms-builder-preview-wrap iframe{width:1440px!important}.cms-builder-preview-viewport{height:680px!important}}

/* v97 final editor clarity: no tiny resize squares on every card. The move grip
   stays visible in edit mode; the eight resize handles appear only on the card
   that is actually selected, matching OBS-style source editing. */
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]>.cms-visual-grip{
  display:block!important;
  opacity:.42!important;
}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]:hover>.cms-visual-grip,
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key].cms-visual-selected>.cms-visual-grip{
  opacity:1!important;
}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]>.cms-freeform-resize-handle{
  display:none!important;
  opacity:1!important;
}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key].cms-visual-selected>.cms-freeform-resize-handle{
  display:block!important;
}
.cms-edit-mode .cms-screenshot-grid>figure .cms-shot-resize-handle{display:none!important}
.cms-edit-mode .cms-screenshot-grid>figure:hover .cms-shot-resize-handle,
.cms-edit-mode .cms-screenshot-grid>figure.cms-shot-selected .cms-shot-resize-handle{display:block!important}
.cms-edit-mode .cms-screenshot-grid>figure.cms-shot-selected{
  outline:3px solid #d48cff!important;
  box-shadow:0 0 0 2px rgba(10,4,18,.9),0 0 22px rgba(183,92,255,.36)!important;
}


/* ========================================================================== 
   v98 — full-width true visual canvas and collision-resolving direct editing
   ========================================================================== */
/* The visual page receives the whole admin width. Inspector stays below so the
   website is never squeezed into a small left strip. */
.cms-builder-workspace-visual{grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
.cms-builder-preview-wrap{width:100%!important;min-width:0!important}
.cms-builder-preview-viewport{width:100%!important;height:min(80vh,1040px)!important;min-height:700px!important;overflow:auto!important;padding:0!important;background:#06040a!important}
.cms-admin-builder-panel[data-editor-view="horizontal"] .cms-builder-preview-wrap iframe{display:block!important;width:100%!important;min-width:1440px!important;height:2600px!important;max-width:none!important;margin:0!important;border:0!important;border-radius:0!important;transform:none!important;zoom:1!important}
.cms-admin-builder-panel[data-editor-view="vertical"] .cms-builder-preview-wrap iframe{width:430px!important;min-width:430px!important;height:1700px!important;margin:0 auto!important}
.cms-builder-inspector{position:relative!important;top:auto!important;width:100%!important;max-height:none!important;overflow:visible!important}
.cms-layout-template-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%!important}
.cms-layout-template-card{max-width:none!important;min-width:0!important}
@media(max-width:1150px){.cms-layout-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:700px){.cms-layout-template-grid{grid-template-columns:1fr!important}}

/* Browser zoom must not create a dead black strip on the right side of the
   editing surface. The editable page expands to the iframe viewport. */
.cms-edit-mode body{min-width:1440px!important}
.cms-edit-mode body .app-shell{width:calc(100% - var(--sidebar))!important;min-width:0!important}
.cms-edit-mode body main.page-content{width:calc(100% - 32px)!important;max-width:none!important;margin-left:16px!important;margin-right:16px!important}

/* Actual card manipulation. The selected section keeps visible handles outside
   its edge, while its content scrolls only inside the card. */
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]{overflow:visible!important}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]>.panel-body,
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]>.cms-screenshot-section,
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]>.live-content{overflow:auto!important;min-height:0!important}
.cms-direct-drag-surface{cursor:grab!important;user-select:none!important;touch-action:none!important}
.cms-direct-drag-surface:active{cursor:grabbing!important}
.cms-visual-grip{top:4px!important;width:86px!important;height:27px!important;opacity:.72!important}
.cms-visual-selected>.cms-visual-grip,.cms-visual-grip:hover{opacity:1!important}
.cms-freeform-resize-handle{width:20px!important;height:20px!important}
.cms-freeform-resize-handle[data-cms-resize="n"]{top:-10px!important}
.cms-freeform-resize-handle[data-cms-resize="s"]{bottom:-10px!important}
.cms-freeform-resize-handle[data-cms-resize="e"]{right:-10px!important}
.cms-freeform-resize-handle[data-cms-resize="w"]{left:-10px!important}
.cms-freeform-resize-handle[data-cms-resize="ne"]{right:-10px!important;top:-10px!important}
.cms-freeform-resize-handle[data-cms-resize="se"]{right:-10px!important;bottom:-10px!important}
.cms-freeform-resize-handle[data-cms-resize="sw"]{left:-10px!important;bottom:-10px!important}
.cms-freeform-resize-handle[data-cms-resize="nw"]{left:-10px!important;top:-10px!important}
.cms-has-live-collision .cms-freeform-active-drag{outline-color:#ff5f88!important;box-shadow:0 0 0 3px #ff5f88,0 20px 50px rgba(0,0,0,.55)!important}

/* Direct visual screenshot layout icons in the section header. */
.cms-screenshot-visual-toolbar{display:flex!important;align-items:center!important;gap:5px!important;margin-left:auto!important;position:relative!important;z-index:10070!important}
.cms-screenshot-visual-toolbar button{display:grid!important;place-items:center!important;width:30px!important;height:30px!important;min-width:30px!important;padding:0!important;border:1px solid #654284!important;border-radius:7px!important;background:#12091d!important;color:#eadcff!important;font:900 15px/1 system-ui!important;cursor:pointer!important}
.cms-screenshot-visual-toolbar button:hover,.cms-screenshot-visual-toolbar button.active{border-color:#d28dff!important;background:#7928b8!important;color:#fff!important}
.cms-screenshot-visual-toolbar .cms-shot-toolbar-add{font-size:20px!important;background:#35104f!important}

/* Individual screenshots adapt to the real section width. Narrow screenshot
   blocks show one readable card per row; wider blocks automatically use two,
   three or four cards without stretching the image. */
.cms-screenshot-grid>figure{grid-column:span var(--cms-shot-effective-span,var(--cms-shot-span,4))!important}
.cms-screenshot-grid>figure>a:first-child>img{object-fit:var(--cms-shot-fit,contain)!important}
.cms-edit-mode .cms-screenshot-grid>figure.cms-shot-selected{overflow:visible!important}
.cms-edit-mode .cms-screenshot-grid>figure:not(.cms-shot-selected)>.cms-shot-resize-handle{display:none!important}
.cms-edit-mode .cms-screenshot-grid>figure.cms-shot-selected>.cms-shot-resize-handle{display:block!important;width:18px!important;height:18px!important}

/* The live and offline hero keep separate media rules. */
.live-panel.is-offline .live-visual{background-size:cover!important;background-position:center!important}
.live-panel.is-live .live-visual{background-size:cover!important;background-position:center!important}


/* v98 final — modern, spacious, translation-aware editor. */
.cms-admin-builder-panel,.site-admin-panel{background:linear-gradient(180deg,rgba(18,11,28,.98),rgba(8,5,14,.98));border:1px solid rgba(183,101,255,.25);box-shadow:0 22px 70px rgba(0,0,0,.35)}
.cms-builder-template-and-actions,.cms-builder-inspector,.cms-builder-preview-wrap{border-radius:16px!important;overflow:hidden}
.cms-layout-template-card{border:1px solid rgba(183,101,255,.28)!important;border-radius:14px!important;background:linear-gradient(145deg,rgba(34,18,50,.96),rgba(12,7,20,.96))!important;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important}
.cms-layout-template-card:hover{transform:translateY(-2px);border-color:#b96cff!important;box-shadow:0 14px 36px rgba(123,42,180,.22)!important}
.cms-builder-addbar,.cms-builder-savebar{border-radius:14px!important}
.cms-builder-preview-head{padding:13px 16px!important;background:linear-gradient(90deg,#160c22,#0b0712)!important}
.cms-builder-inspector-form label[data-builder-text-row].checkbox-label{grid-column:1/-1;display:flex!important;padding:11px 12px;border:1px solid rgba(183,101,255,.23);border-radius:11px;background:rgba(121,55,164,.08)}
.site-admin-form .checkbox-label.wide{grid-column:1/-1;padding:10px 12px;border:1px solid rgba(183,101,255,.2);border-radius:11px;background:rgba(121,55,164,.07)}
.cms-translation-grid fieldset{border:1px solid rgba(183,101,255,.24)!important;border-radius:14px!important;background:linear-gradient(180deg,rgba(27,15,40,.9),rgba(10,6,16,.9))!important;padding:15px!important}
.cms-builder-preview-viewport{scrollbar-gutter:stable both-edges}


/* ========================================================================== 
   v99 — genuine bounding-box transform canvas (absolute X/Y/W/H)
   ========================================================================== */
.cms-builder-grid.cms-freeform-grid{
  display:block!important;
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-top:16px!important;
  overflow:visible!important;
  grid-template-columns:none!important;
  grid-auto-rows:initial!important;
  gap:0!important;
}
.cms-builder-grid.cms-freeform-grid>[data-cms-section-key]{
  position:absolute!important;
  margin:0!important;
  min-width:0!important;
  max-width:none!important;
  box-sizing:border-box!important;
  align-self:auto!important;
  grid-column:auto!important;
  grid-row:auto!important;
}
.cms-builder-grid.cms-freeform-grid>.panel,
.cms-builder-grid.cms-freeform-grid>[data-site-screenshots],
.cms-builder-grid.cms-freeform-grid>.cms-custom-block{display:flex!important;flex-direction:column!important}
.cms-builder-grid.cms-freeform-grid>.panel>.panel-body,
.cms-builder-grid.cms-freeform-grid>.cms-custom-block>.panel-body,
.cms-builder-grid.cms-freeform-grid>[data-site-screenshots]>.cms-screenshot-section{min-height:0!important;flex:1 1 auto!important}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid{overflow:visible!important}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]{overflow:visible!important}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]>.panel-body,
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]>.cms-screenshot-section,
.cms-edit-mode .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]>.live-content{overflow:auto!important}
.cms-admin-builder-panel[data-editor-view="horizontal"] .cms-builder-preview-wrap iframe{
  width:1440px;
  min-width:1440px;
  max-width:none!important;
  height:900px;
  zoom:1!important;
}
.cms-builder-preview-viewport{width:100%!important;max-width:none!important;overflow:hidden!important;background:#06040a!important}
/* The edit preview keeps the real desktop page dimensions. Scaling is applied to
   the whole iframe by site-builder-admin.js; the page itself must never reflow. */
html.cms-edit-mode body{min-width:1200px!important;width:auto!important}
.cms-builder-savebar{position:sticky!important;top:0!important;z-index:20000!important}
.cms-edit-mode .cms-freeform-resize-handle,.cms-edit-mode .cms-visual-grip{pointer-events:auto!important}
.cms-freeform-active-drag{will-change:left,top,width,height!important}
@media(max-width:760px){
  .cms-builder-grid.cms-freeform-grid{display:block!important;height:auto!important;min-height:0!important}
  .cms-builder-grid.cms-freeform-grid>[data-cms-section-key]{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;margin:0 0 16px!important;overflow:visible!important}
}

/* SEO helper — modern, compact, not a retro admin box. */
.seo-helper-card{grid-column:1/-1;display:grid;gap:14px;padding:16px;border:1px solid rgba(190,116,255,.32);border-radius:15px;background:linear-gradient(145deg,rgba(42,20,60,.78),rgba(11,7,18,.94));box-shadow:0 16px 44px rgba(0,0,0,.22)}
.seo-helper-top{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:10px;align-items:end}
.seo-helper-score{display:flex;align-items:center;gap:14px;padding:13px;border:1px solid rgba(190,116,255,.2);border-radius:12px;background:rgba(7,4,12,.52)}
.seo-helper-score strong{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:conic-gradient(#a855f7 calc(var(--seo-score,0)*1%),#21152f 0);font-size:1.15rem;box-shadow:inset 0 0 0 7px #0b0712}
.seo-helper-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.seo-helper-check{display:flex;gap:9px;align-items:flex-start;padding:10px 11px;border:1px solid rgba(190,116,255,.18);border-radius:10px;background:rgba(8,5,14,.52)}
.seo-helper-check[data-ok="true"]{border-color:rgba(68,226,169,.34)}
.seo-helper-check[data-ok="false"]{border-color:rgba(255,112,145,.36)}
.seo-helper-files{display:flex;gap:9px;flex-wrap:wrap}
@media(max-width:760px){.seo-helper-top,.seo-helper-results{grid-template-columns:1fr}}

.cms-layout-template-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media(max-width:1100px){.cms-layout-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:680px){.cms-layout-template-grid{grid-template-columns:1fr!important}}

/* ========================================================================== 
   v100 — non-destructive transform layer
   Selecting a card must never pull it out of its original dashboard hierarchy.
   Original layout wrappers remain in the DOM and become boxless only while the
   common transform canvas is active, preserving all descendant styling.
   ========================================================================== */
.cms-builder-grid.cms-freeform-grid .cms-freeform-context{
  display:contents!important;
}
.cms-builder-grid.cms-freeform-grid [data-cms-section-key]{
  position:absolute!important;
  margin:0!important;
  min-width:0!important;
  max-width:none!important;
  box-sizing:border-box!important;
  align-self:auto!important;
  grid-column:auto!important;
  grid-row:auto!important;
}
.cms-builder-grid.cms-freeform-grid [data-cms-section-key].panel,
.cms-builder-grid.cms-freeform-grid [data-cms-section-key].cms-custom-block{
  display:flex!important;
  flex-direction:column!important;
}
.cms-builder-grid.cms-freeform-grid [data-cms-section-key]>.panel-body,
.cms-builder-grid.cms-freeform-grid [data-cms-section-key]>.cms-screenshot-section,
.cms-builder-grid.cms-freeform-grid [data-cms-section-key]>.live-content{
  min-height:0!important;
  flex:1 1 auto!important;
}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid [data-cms-section-key]{
  overflow:visible!important;
}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid [data-cms-section-key]>.panel-body,
.cms-edit-mode .cms-builder-grid.cms-freeform-grid [data-cms-section-key]>.cms-screenshot-section,
.cms-edit-mode .cms-builder-grid.cms-freeform-grid [data-cms-section-key]>.live-content{
  overflow:auto!important;
}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid [data-cms-section-key]:hover{
  outline:1px dashed rgba(191,113,255,.7);
  outline-offset:3px;
}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid [data-cms-section-key].cms-visual-selected{
  outline:3px solid #b85dff!important;
  outline-offset:3px;
  box-shadow:0 0 0 1px #2b0d43,0 0 26px rgba(172,61,255,.28)!important;
}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid [data-cms-section-key]>.cms-visual-grip{
  display:block!important;
  opacity:.5!important;
}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid [data-cms-section-key]:hover>.cms-visual-grip,
.cms-edit-mode .cms-builder-grid.cms-freeform-grid [data-cms-section-key].cms-visual-selected>.cms-visual-grip{
  opacity:1!important;
}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid [data-cms-section-key]>.cms-freeform-resize-handle{
  display:none!important;
}
.cms-edit-mode .cms-builder-grid.cms-freeform-grid [data-cms-section-key].cms-visual-selected>.cms-freeform-resize-handle{
  display:block!important;
}
@media(max-width:760px){
  .cms-builder-grid.cms-freeform-grid .cms-freeform-context{display:contents!important}
  .cms-builder-grid.cms-freeform-grid [data-cms-section-key]{
    position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;
    margin:0 0 16px!important;overflow:visible!important
  }
}


/* v128 final cascade safeguard: sidebar labels only; never page content. */
.app-sidebar .sidebar-nav a > span {
  font-family: "Scratchmeow5", "Rajdhani", "Arial Narrow", Arial, sans-serif !important;
  font-size: 20px !important;
  line-height: 1.08;
  letter-spacing: 0 !important;
}

/* ========================================================================== 
   v129 — full-browser responsive layout + readable Scratchmeow5 sidebar
   This layer changes presentation only. No API, project, counter, graph,
   download, admin, SEO, route, database or Worker behavior is altered.
   ========================================================================== */
@media (min-width: 901px) {
  :root {
    --sidebar: clamp(292px, 15vw, 310px);
  }

  .app-sidebar {
    width: var(--sidebar);
  }

  .app-shell {
    width: calc(100% - var(--sidebar));
    max-width: none;
    margin-left: var(--sidebar);
  }

  .page-content,
  .page-footer {
    width: calc(100% - clamp(28px, 2.4vw, 52px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .app-sidebar .brand strong {
    font-size: 2rem;
  }

  .app-sidebar .sidebar-nav a {
    min-height: 54px;
    gap: 11px;
    padding-inline: 14px;
    font-size: 24px;
  }

  .app-sidebar .sidebar-nav a span {
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: visible;
  }

  .app-sidebar .sidebar-nav a svg {
    width: 19px;
    height: 19px;
  }
}

@media (max-width: 900px) {
  .app-sidebar {
    width: min(310px, calc(100vw - 20px));
  }

  .app-sidebar .brand strong {
    font-size: 1.85rem;
  }

  .app-sidebar .sidebar-nav a {
    min-height: 52px;
    font-size: 22px;
  }
}

/* Final v129 font-size lock after the older v128 safeguard. */
@media (min-width: 901px) {
  .app-sidebar .sidebar-nav a > span { font-size: 24px !important; }
}
@media (max-width: 900px) {
  .app-sidebar .sidebar-nav a > span { font-size: 22px !important; }
}

/* ========================================================================== 
   v130 — readable Scratchmeow5 sidebar, website remains full-browser responsive
   Sidebar typography only. No public-page scaling, APIs, graphs, projects,
   downloads, counters, admin, SEO, routes, Worker or database behavior changed.
   ========================================================================== */
@media (min-width: 901px) {
  :root {
    --sidebar: clamp(330px, 18vw, 350px);
  }

  .app-sidebar .brand {
    min-height: 82px;
    padding-inline: 20px;
  }

  .app-sidebar .brand strong {
    font-family: "Scratchmeow5", "Rajdhani", "Arial Narrow", Arial, sans-serif !important;
    font-size: 2.35rem !important;
    line-height: 1 !important;
  }

  .app-sidebar .sidebar-nav {
    gap: 8px;
    padding: 20px 14px;
  }

  .app-sidebar .sidebar-nav a {
    min-height: 62px;
    gap: 12px;
    padding-inline: 15px;
  }

  .app-sidebar .sidebar-nav a > span {
    font-family: "Scratchmeow5", "Rajdhani", "Arial Narrow", Arial, sans-serif !important;
    font-size: clamp(28px, 1.65vw, 32px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
    overflow: visible;
  }

  .app-sidebar .sidebar-nav a svg {
    width: 21px;
    height: 21px;
  }
}

@media (max-width: 900px) {
  .app-sidebar {
    width: min(340px, calc(100vw - 18px));
  }

  .app-sidebar .brand strong {
    font-size: 2.1rem !important;
  }

  .app-sidebar .sidebar-nav a {
    min-height: 58px;
    gap: 11px;
  }

  .app-sidebar .sidebar-nav a > span {
    font-family: "Scratchmeow5", "Rajdhani", "Arial Narrow", Arial, sans-serif !important;
    font-size: 22px !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
  }
}


/* ========================================================================== 
   v131 — admin-editable sidebar design
   Final presentation layer only. No page zoom/scale and no project, graph,
   heart, download, API, SEO or builder data is changed by these variables.
   ========================================================================== */
:root {
  --sidebar-font-desktop: 24px;
  --sidebar-font-mobile: 22px;
  --sidebar-width-desktop: 300px;
  --sidebar-width-mobile: 290px;
  --sidebar-brand-desktop: 30px;
  --sidebar-brand-mobile: 28px;
}

@media (min-width: 901px) {
  :root {
    --sidebar: min(var(--sidebar-width-desktop), calc(100vw - 520px));
  }

  .app-sidebar .brand strong {
    font-family: "Scratchmeow5", "Rajdhani", "Arial Narrow", Arial, sans-serif !important;
    font-size: var(--sidebar-brand-desktop) !important;
    line-height: 1 !important;
  }

  .app-sidebar .sidebar-nav a {
    min-height: max(68px, calc(var(--sidebar-font-desktop) + 30px));
    height: auto;
    padding-block: 12px;
  }

  .app-sidebar .sidebar-nav a > span {
    flex: 1 1 auto;
    min-width: 0;
    font-family: "Scratchmeow5", "Rajdhani", "Arial Narrow", Arial, sans-serif !important;
    font-size: var(--sidebar-font-desktop) !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 900px) {
  .app-sidebar {
    width: min(var(--sidebar-width-mobile), calc(100vw - 18px));
  }

  .app-sidebar .brand strong {
    font-family: "Scratchmeow5", "Rajdhani", "Arial Narrow", Arial, sans-serif !important;
    font-size: var(--sidebar-brand-mobile) !important;
    line-height: 1 !important;
  }

  .app-sidebar .sidebar-nav a {
    min-height: max(64px, calc(var(--sidebar-font-mobile) + 28px));
    height: auto;
    padding-block: 11px;
  }

  .app-sidebar .sidebar-nav a > span {
    flex: 1 1 auto;
    min-width: 0;
    font-family: "Scratchmeow5", "Rajdhani", "Arial Narrow", Arial, sans-serif !important;
    font-size: var(--sidebar-font-mobile) !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
  }
}

.site-design-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  grid-column: 1 / -1;
}
.site-design-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  align-items: center;
  gap: 12px;
}
.site-design-control input[type="range"] {
  padding: 0;
  accent-color: #a855f7;
}
.site-design-control output {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px solid #3a2a53;
  border-radius: 10px;
  background: #0b0712;
  color: #fff;
  font-weight: 800;
}
.site-design-preview {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 18px;
  overflow: auto;
  border: 1px solid rgba(183,101,255,.3);
  border-radius: 14px;
  background: radial-gradient(circle at top left, rgba(126,34,206,.16), transparent 42%), #06040b;
}
.site-design-preview > small { color: #ad9fc4; }
.site-design-preview-sidebar {
  width: min(var(--preview-sidebar-width, 420px), 100%);
  padding: 14px;
  border: 1px solid rgba(202,174,255,.2);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(14,9,25,.98), rgba(7,4,13,.98));
}
.site-design-preview-brand {
  margin-bottom: 12px;
  padding: 12px 14px;
  font-family: "Scratchmeow5", "Rajdhani", "Arial Narrow", Arial, sans-serif;
  font-size: var(--preview-brand-size, 48px);
  line-height: 1;
  color: #fff;
}
.site-design-preview-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: max(68px, calc(var(--preview-font-size, 40px) + 30px));
  margin-top: 7px;
  padding: 10px 14px;
  border: 1px solid rgba(199,135,255,.35);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(136,45,255,.25), rgba(113,23,218,.08));
}
.site-design-preview-link i {
  width: 22px;
  flex: 0 0 auto;
  color: #b978ff;
  font: 700 20px/1 Arial, sans-serif;
  text-align: center;
}
.site-design-preview-link img {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  object-fit: contain;
}
.site-design-preview-link span {
  min-width: 0;
  font-family: "Scratchmeow5", "Rajdhani", "Arial Narrow", Arial, sans-serif;
  font-size: var(--preview-font-size, 40px);
  line-height: 1.04;
  color: #fff;
  white-space: normal;
}
@media (max-width: 760px) {
  .site-design-controls { grid-template-columns: 1fr; }
}


/* ========================================================================== 
   v132 — two independent admin-uploaded fonts
   Sidebar and main website use separate variables. No graph, project, heart,
   download, API, page scaling, SEO, route or stored-data behavior is changed.
   ========================================================================== */
:root {
  --sidebar-font-family: "Scratchmeow5", "Rajdhani", "Arial Narrow", Arial, sans-serif;
  --main-font-family: "Rajdhani", "Arial Narrow", Arial, sans-serif;
  --font: var(--main-font-family);
}

body:not(.site-admin-page) {
  font-family: var(--main-font-family) !important;
}

.app-sidebar .brand strong,
.app-sidebar .sidebar-nav a > span {
  font-family: var(--sidebar-font-family) !important;
  font-synthesis: none;
}

.site-font-admin-head {
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin: 28px 0 14px;
  padding-top: 24px;
  border-top: 1px solid #2d2142;
}
.site-font-admin-head h3 { margin: 0 0 6px; font-size: 1.25rem; }
.site-font-admin-head p { max-width: 780px; margin: 0; color: #ad9fc4; }
.site-font-media-state {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid #5a3a25;
  border-radius: 999px;
  background: #1b120a;
  color: #ffd49a;
  font-size: .82rem;
  font-weight: 800;
}
.site-font-media-state[data-ready="true"] {
  border-color: #24614d;
  background: #091a14;
  color: #79f3c1;
}
.site-font-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.site-font-form { align-content: start; }
.site-font-form-title {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}
.site-font-form-title > div:first-child { min-width: 0; }
.site-font-form-title > div:first-child strong { display: block; color: #fff; font-size: 1.08rem; }
.site-font-form-title > div:first-child small { display: block; margin-top: 5px; color: #a99aba; }
.site-font-current {
  flex: 0 1 280px;
  min-width: 210px;
  padding: 11px 13px;
  border: 1px solid #4a3267;
  border-radius: 11px;
  background: #0d0817;
}
.site-font-current span,
.site-font-current strong,
.site-font-current small { display: block; }
.site-font-current span { color: #a78bfa; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.site-font-current strong { margin-top: 4px; color: #fff; overflow-wrap: anywhere; }
.site-font-current small { margin-top: 3px; color: #9283a8; overflow-wrap: anywhere; }
.site-font-sample {
  min-height: 122px;
  padding: 16px;
  border: 1px solid rgba(187,112,255,.34);
  border-radius: 12px;
  background: radial-gradient(circle at top right, rgba(137,57,255,.17), transparent 48%), #08050f;
}
.site-font-sample > span { display: block; margin-bottom: 10px; color: #a78bfa; font: 800 .75rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.site-font-sample > strong { display: block; color: #fff; overflow-wrap: anywhere; }
.site-font-sample p { margin: 8px 0 0; color: #b9acd0; }
.site-font-sample-sidebar > strong {
  font-family: var(--admin-sidebar-font-family, "Scratchmeow5", "Rajdhani", Arial, sans-serif);
  font-size: 28px;
  line-height: 1.12;
  font-weight: 400;
}
.site-font-sample-main > strong,
.site-font-sample-main > p {
  font-family: var(--admin-main-font-family, "Rajdhani", "Arial Narrow", Arial, sans-serif);
}
.site-font-sample-main > strong { font-size: 1.45rem; }

@media (max-width: 980px) {
  .site-font-admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .site-font-admin-head,
  .site-font-form-title { flex-direction: column; }
  .site-font-current { width: 100%; min-width: 0; }
}

/* ========================================================================== 
   v133 — real desktop + mobile sidebar previews in Website Admin
   Presentation-only admin addition. Public graphs, project data, hearts,
   downloads, Worker routes and stored data are unchanged.
   ========================================================================== */
.site-design-preview-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.site-design-preview-heading strong,
.site-design-preview-heading small { display: block; }
.site-design-preview-heading strong { color: #fff; font-size: 1rem; }
.site-design-preview-heading small { margin-top: 4px; color: #ad9fc4; }
.site-design-preview-heading > span {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(168,85,247,.35);
  border-radius: 999px;
  color: #c9a7ff;
  font-size: .78rem;
  font-weight: 800;
}
.site-design-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: 18px;
  align-items: start;
}
.site-design-preview-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(202,174,255,.18);
  border-radius: 14px;
  background: #07050d;
}
.site-design-preview-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(202,174,255,.15);
  background: #0d0916;
}
.site-design-preview-card-head strong { color: #fff; }
.site-design-preview-card-head small { color: #9f91b5; }
.site-design-desktop-stage {
  position: relative;
  display: flex;
  min-height: 520px;
  overflow: auto;
  background:
    linear-gradient(90deg, transparent 0 70%, rgba(140,60,255,.04)),
    #05040a;
}
.site-design-desktop-stage .site-design-preview-sidebar {
  flex: 0 0 auto;
  min-height: 520px;
  border-width: 0 1px 0 0;
  border-radius: 0;
}
.site-design-desktop-page {
  flex: 1 1 auto;
  min-width: 250px;
  padding: 28px;
}
.site-design-desktop-page span,
.site-design-phone-page span {
  display: block;
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(157,70,255,.22), rgba(157,70,255,.05));
}
.site-design-desktop-page span:nth-child(1) { width: 55%; height: 28px; }
.site-design-desktop-page span:nth-child(2) { width: 88%; height: 150px; margin-top: 24px; }
.site-design-desktop-page span:nth-child(3) { width: 72%; height: 190px; margin-top: 16px; }
.site-design-preview-sidebar {
  box-sizing: border-box;
  width: min(var(--preview-sidebar-width, 300px), 100%);
}
.site-design-preview-brand,
.site-design-preview-link span {
  font-family: var(--admin-sidebar-font-family, "Scratchmeow5", "Rajdhani", Arial, sans-serif) !important;
  font-weight: 400;
  font-synthesis: none;
}
.site-design-preview-link.active {
  border-color: rgba(199,135,255,.75);
  background: linear-gradient(90deg, rgba(136,45,255,.44), rgba(113,23,218,.14));
  box-shadow: inset 3px 0 0 #c278ff, 0 0 20px rgba(122,34,255,.13);
}
.site-design-phone {
  width: min(390px, calc(100% - 24px));
  margin: 18px auto 22px;
  overflow: hidden;
  border: 7px solid #21182e;
  border-radius: 28px;
  background: #030207;
  box-shadow: 0 20px 50px rgba(0,0,0,.42);
}
.site-design-phone-status,
.site-design-phone-browser {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ddd4e8;
}
.site-design-phone-status {
  min-height: 28px;
  padding: 0 15px;
  background: #08050d;
  font: 700 11px/1 Arial, sans-serif;
}
.site-design-phone-browser {
  min-height: 42px;
  padding: 0 13px;
  border-top: 1px solid #261b35;
  border-bottom: 1px solid #261b35;
  background: #0d0915;
  font-size: .78rem;
}
.site-design-phone-browser span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-design-phone-screen {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: radial-gradient(circle at top right, rgba(126,34,206,.18), transparent 38%), #05040a;
}
.site-design-phone-page { padding: 24px 18px; }
.site-design-phone-page span:nth-child(1) { width: 62%; height: 22px; }
.site-design-phone-page span:nth-child(2) { height: 128px; margin-top: 20px; }
.site-design-phone-page span:nth-child(3) { height: 170px; margin-top: 14px; }
.site-design-phone-shade {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.58);
}
.site-design-preview-sidebar-mobile {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(var(--preview-sidebar-width, 290px), calc(100% - 18px));
  max-width: calc(100% - 18px);
  height: 100%;
  overflow-y: auto;
  padding: 12px;
  border: 0;
  border-right: 1px solid rgba(202,174,255,.23);
  border-radius: 0;
  box-shadow: 18px 0 40px rgba(0,0,0,.42);
}
.site-design-preview-sidebar-mobile .site-design-preview-brand {
  position: sticky;
  top: -12px;
  z-index: 1;
  margin: -12px -12px 10px;
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(202,174,255,.16);
  background: rgba(8,5,15,.97);
}
.site-design-preview-sidebar-mobile .site-design-preview-link {
  min-height: max(54px, calc(var(--preview-font-size, 22px) + 26px));
  padding: 9px 12px;
}
@media (max-width: 1120px) {
  .site-design-preview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .site-design-preview-heading { flex-direction: column; }
  .site-design-preview-heading > span { align-self: flex-start; }
  .site-design-preview { padding: 12px; }
  .site-design-phone { width: 100%; margin-inline: 0; }
  .site-design-phone-screen { height: 560px; }
}

/* ========================================================================== 
   v136 — screenshot display controls in Admin > Screenshots
   Presentation only: lets the owner preview horizontal, vertical, square or
   original-shape images and choose small through featured sizing.
   ========================================================================== */
.site-screenshot-layout-editor {
  min-width: 0;
  margin: 4px 0 8px;
  padding: 16px;
  border: 1px solid rgba(185, 111, 255, .38);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(93, 31, 148, .12), rgba(8, 5, 15, .78));
}
.site-screenshot-layout-editor legend {
  padding: 0 9px;
  color: #fff;
  font-weight: 800;
}
.site-screenshot-layout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.site-screenshot-layout-grid label {
  min-width: 0;
}
.site-screenshot-layout-preview {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(203, 151, 255, .24);
  border-radius: 12px;
  background: #07040d;
}
.site-screenshot-layout-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.site-screenshot-layout-preview-head strong { color: #fff; }
.site-screenshot-layout-preview-head span {
  color: #cba7ed;
  font-size: .88rem;
}
.site-screenshot-layout-canvas {
  display: flex;
  min-height: 250px;
  align-items: flex-start;
  justify-content: center;
  padding: 18px;
  overflow: auto;
  border: 1px dashed rgba(189, 112, 255, .34);
  border-radius: 11px;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    #050309;
  background-size: 28px 28px;
}
.site-screenshot-layout-frame {
  width: max(190px, min(var(--shot-admin-width, 33.333%), 100%));
  max-width: 780px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(198, 139, 255, .42);
  border-radius: 12px;
  background: #0b0712;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  transition: width .18s ease;
}
.site-screenshot-layout-image {
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--shot-admin-height, 220px);
  min-height: 130px;
  max-height: 520px;
  overflow: hidden;
  background: #030207;
}
.site-screenshot-layout-frame[data-orientation="horizontal"] .site-screenshot-layout-image {
  height: auto;
  aspect-ratio: 16 / 9;
}
.site-screenshot-layout-frame[data-orientation="vertical"] {
  max-width: 430px;
}
.site-screenshot-layout-frame[data-orientation="vertical"] .site-screenshot-layout-image {
  height: auto;
  aspect-ratio: 9 / 16;
  max-height: 520px;
}
.site-screenshot-layout-frame[data-orientation="square"] {
  max-width: 560px;
}
.site-screenshot-layout-frame[data-orientation="square"] .site-screenshot-layout-image {
  height: auto;
  aspect-ratio: 1 / 1;
}
.site-screenshot-layout-frame[data-orientation="natural"] .site-screenshot-layout-image {
  height: var(--shot-admin-height, 320px);
}
.site-screenshot-layout-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--shot-admin-fit, contain);
  background: #030207;
}
.site-screenshot-layout-image > span {
  max-width: 280px;
  padding: 18px;
  color: #91849f;
  text-align: center;
}
.site-screenshot-layout-frame figcaption {
  display: grid;
  gap: 4px;
  padding: 11px 13px;
}
.site-screenshot-layout-frame figcaption strong { color: #fff; }
.site-screenshot-layout-frame figcaption span { color: #9e91ad; font-size: .84rem; }
@media (max-width: 900px) {
  .site-screenshot-layout-grid { grid-template-columns: 1fr; }
  .site-screenshot-layout-canvas { justify-content: flex-start; }
  .site-screenshot-layout-frame { width: min(100%, 520px); }
}

/* v136 public screenshot orientation. Existing screenshots keep their current
   custom height until the owner chooses a direction in Admin > Screenshots. */
.cms-screenshot-grid > figure[data-screenshot-orientation="horizontal"] > a:first-child {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
}
.cms-screenshot-grid > figure[data-screenshot-orientation="vertical"] > a:first-child {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 9 / 16 !important;
}
.cms-screenshot-grid > figure[data-screenshot-orientation="square"] > a:first-child {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
}
.cms-screenshot-grid > figure[data-screenshot-orientation="natural"] > a:first-child {
  height: auto !important;
  min-height: 120px !important;
  aspect-ratio: auto !important;
}
.cms-screenshot-grid > figure[data-screenshot-orientation="natural"] > a:first-child > img {
  height: auto !important;
  max-height: 78vh !important;
  object-fit: contain !important;
}
.cms-screenshot-section .cms-screenshot-grid > figure[data-screenshot-orientation] {
  grid-column: span var(--cms-shot-effective-span, var(--cms-shot-span, 4)) !important;
}
@media (max-width: 760px) {
  .cms-screenshot-section .cms-screenshot-grid > figure[data-screenshot-orientation] {
    grid-column: 1 / -1 !important;
  }
}

/* ========================================================================== 
   v137 — clear per-screenshot visual templates in Page Builder and Screenshots
   ========================================================================== */
.cms-screenshot-template-inspector,
.site-screenshot-template-picker {
  border: 1px solid rgba(180, 102, 255, .38);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(24, 12, 39, .96), rgba(9, 5, 16, .96));
  box-shadow: 0 18px 42px rgba(0, 0, 0, .25);
}
.cms-screenshot-template-inspector {
  margin: 14px 0;
  padding: 16px;
}
.cms-screenshot-template-head,
.site-screenshot-template-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.cms-screenshot-template-head h3,
.cms-screenshot-template-head p,
.site-screenshot-template-picker-head strong,
.site-screenshot-template-picker-head span { margin: 0; }
.cms-screenshot-template-head p,
.site-screenshot-template-picker-head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}
.site-screenshot-template-picker { padding: 15px; }
.cms-screenshot-template-grid,
.site-screenshot-template-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  gap: 10px;
}
.cms-screenshot-template-grid button,
.site-screenshot-template-options button {
  display: grid;
  min-width: 0;
  min-height: 142px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 12px 10px;
  border: 1px solid rgba(181, 113, 235, .3);
  border-radius: 12px;
  background: rgba(8, 5, 14, .88);
  color: #eee5fa;
  cursor: pointer;
  text-align: center;
}
.cms-screenshot-template-grid button:hover,
.cms-screenshot-template-grid button.active,
.site-screenshot-template-options button:hover,
.site-screenshot-template-options button.active {
  border-color: #c47bff;
  background: linear-gradient(145deg, rgba(123, 34, 198, .5), rgba(40, 14, 66, .88));
  box-shadow: 0 0 22px rgba(153, 54, 255, .2);
}
.cms-screenshot-template-grid button strong,
.site-screenshot-template-options button strong { color: #fff; }
.cms-screenshot-template-grid button small,
.site-screenshot-template-options button small { color: #cbb9dd; }
.shot-template-shape {
  position: relative;
  display: block;
  width: 84px;
  height: 48px;
  border: 2px solid #bc72ff;
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(207, 124, 255, .72), rgba(89, 29, 145, .55)),
    #160c25;
  box-shadow: inset 0 0 0 3px rgba(5, 3, 10, .55), 0 0 14px rgba(147, 45, 240, .25);
}
.shot-template-shape::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 3px;
}
.shot-template-shape.horizontal.small { width: 62px; height: 36px; }
.shot-template-shape.horizontal.medium { width: 82px; height: 46px; }
.shot-template-shape.horizontal.large { width: 106px; height: 54px; }
.shot-template-shape.vertical.small { width: 34px; height: 66px; }
.shot-template-shape.vertical.medium { width: 42px; height: 78px; }
.shot-template-shape.vertical.large { width: 50px; height: 92px; }
.shot-template-shape.square { width: 62px; height: 62px; }
.shot-template-shape.original {
  width: 80px;
  height: 54px;
  clip-path: polygon(0 10%, 100% 0, 92% 100%, 8% 88%);
}
.cms-screenshot-fit-choice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(202,174,255,.14);
}
.cms-screenshot-fit-choice strong { margin-right: 6px; }
.cms-screenshot-fit-choice button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(181, 113, 235, .35);
  border-radius: 9px;
  background: #100818;
  color: #e8dcf5;
  cursor: pointer;
}
.cms-screenshot-fit-choice button.active,
.cms-screenshot-fit-choice button:hover {
  border-color: #c47bff;
  background: #64249b;
  color: #fff;
}
.site-screenshot-layout-grid-simple { grid-template-columns: minmax(240px, 420px); margin-top: 14px; }
.site-screenshot-click-note {
  margin: 12px 0 18px;
  color: #c9b9da;
}
.site-admin-screenshot-open {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  cursor: zoom-in;
}
.site-admin-screenshot-open img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cms-screenshot-visual-toolbar.cms-screenshot-add-only button.cms-shot-toolbar-add {
  width: auto !important;
  min-width: 132px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  white-space: nowrap;
}
.cms-screenshot-edit-tools-simple { gap: 6px !important; }
.cms-screenshot-edit-tools-simple .cms-screenshot-drag,
.cms-screenshot-edit-tools-simple .cms-screenshot-delete {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
}
.cms-edit-mode .cms-screenshot-grid > figure .cms-shot-resize-handle,
.cms-edit-mode .cms-screenshot-grid > figure .cms-shot-size-readout,
.cms-edit-mode .cms-screenshot-grid > figure .cms-screenshot-fit { display: none !important; }
.cms-edit-mode .cms-screenshot-grid > figure { cursor: pointer; }
.cms-edit-mode .cms-screenshot-grid > figure.cms-shot-selected {
  outline: 3px solid #d58bff !important;
  box-shadow: 0 0 0 5px rgba(133, 43, 203, .25), 0 0 28px rgba(156, 57, 255, .28) !important;
}
@media (max-width: 1050px) {
  .cms-screenshot-template-grid,
  .site-screenshot-template-options { grid-template-columns: repeat(2, minmax(135px, 1fr)); }
}
@media (max-width: 600px) {
  .cms-screenshot-template-grid,
  .site-screenshot-template-options { grid-template-columns: 1fr; }
  .cms-screenshot-template-head,
  .site-screenshot-template-picker-head { display: block; }
  .cms-screenshot-template-head .button { margin-top: 10px; }
}

/* ========================================================================== 
   v138 — screenshot individual blocks + reusable screenshot group boxes
   Presentation only; existing project/admin/graph styles remain unchanged.
   ========================================================================== */
.site-screenshot-groups-admin {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid #34264b;
}
.site-screenshot-groups-head h3 { margin: 0 0 6px; font-size: 1.45rem; }
.site-screenshot-group-form { margin-top: 14px; }
.site-screenshot-group-template-fieldset,
.site-screenshot-group-picker-fieldset {
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px;
  border: 1px solid #392851;
  border-radius: 13px;
  background: #08050f;
}
.site-screenshot-group-template-fieldset legend,
.site-screenshot-group-picker-fieldset legend { padding: 0 8px; color: #fff; font-weight: 800; }
.site-screenshot-group-templates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.site-screenshot-group-templates button {
  display: grid;
  gap: 7px;
  min-height: 132px;
  padding: 11px;
  border: 1px solid #3a2a53;
  border-radius: 11px;
  background: #0c0815;
  color: #d8cae9;
  text-align: left;
  cursor: pointer;
}
.site-screenshot-group-templates button:hover,
.site-screenshot-group-templates button.active {
  border-color: #b66cff;
  background: linear-gradient(145deg, rgba(137,45,255,.25), rgba(31,13,50,.92));
  box-shadow: 0 0 0 2px rgba(174,89,255,.11);
}
.site-screenshot-group-templates button strong { color: #fff; }
.site-screenshot-group-templates button small { color: #9f91b4; }
.group-template-demo {
  display: grid;
  grid-template-columns: repeat(var(--demo-cols, 3), minmax(0, 1fr));
  align-items: center;
  gap: 5px;
  min-height: 54px;
  padding: 6px;
  border: 1px solid rgba(198,151,255,.22);
  border-radius: 8px;
  background: #050308;
}
.group-template-demo.columns-2 { --demo-cols: 2; }
.group-template-demo.columns-3 { --demo-cols: 3; }
.group-template-demo.columns-4 { --demo-cols: 4; }
.group-template-demo i {
  display: block;
  border: 1px solid rgba(203,159,255,.4);
  border-radius: 4px;
  background: linear-gradient(135deg, #6422a8, #25103e);
}
.group-template-demo.horizontal i { aspect-ratio: 16 / 9; }
.group-template-demo.vertical i { width: 70%; justify-self: center; aspect-ratio: 9 / 16; }
.group-template-demo.square i { aspect-ratio: 1; }
.group-template-demo.natural i:nth-child(odd) { aspect-ratio: 16 / 9; }
.group-template-demo.natural i:nth-child(even) { width: 72%; justify-self: center; aspect-ratio: 9 / 16; }
.site-screenshot-group-manual { width: min(260px, 100%); margin-top: 14px; }
.site-screenshot-group-picker-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  color: #b9acd0;
}
.site-screenshot-group-picker-head strong { color: #d9a9ff; }
.site-screenshot-group-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  max-height: 520px;
  overflow: auto;
}
.site-screenshot-group-choice {
  display: grid !important;
  grid-template-columns: auto 74px minmax(0, 1fr);
  align-items: center;
  gap: 9px !important;
  min-height: 86px;
  padding: 8px;
  border: 1px solid #35264b;
  border-radius: 10px;
  background: #0b0712;
  cursor: pointer;
}
.site-screenshot-group-choice.selected { border-color: #aa60ff; background: rgba(119,42,207,.18); }
.site-screenshot-group-choice input { width: auto !important; }
.site-screenshot-group-choice img { width: 74px; height: 66px; object-fit: contain; border-radius: 7px; background: #030205; }
.site-screenshot-group-choice span { display: grid; min-width: 0; gap: 3px; }
.site-screenshot-group-choice strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.site-screenshot-group-choice small { color: #9a8cae; font-weight: 500; }
.site-screenshot-group-admin-card { grid-template-columns: minmax(220px, 360px) 1fr; align-items: start; }
.site-screenshot-group-admin-preview {
  display: grid;
  grid-template-columns: repeat(var(--admin-group-columns, 3), minmax(0, 1fr));
  gap: 5px;
  min-height: 150px;
  padding: 8px;
  border: 1px solid #34264b;
  border-radius: 10px;
  background: #050308;
}
.site-screenshot-group-admin-preview img { display: block; width: 100%; height: 100%; max-height: 170px; object-fit: contain; border-radius: 5px; background: #090610; }
.site-screenshot-group-admin-preview.layout-horizontal img { aspect-ratio: 16 / 9; }
.site-screenshot-group-admin-preview.layout-vertical img { aspect-ratio: 9 / 16; }
.site-screenshot-group-admin-preview.layout-square img { aspect-ratio: 1; }
.site-screenshot-group-admin-preview.layout-natural img { height: auto; max-height: 180px; }

.cms-screenshot-block-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  padding: 18px;
  align-items: start;
}
.cms-screenshot-content-block {
  min-width: 0;
  grid-column: span var(--cms-screenshot-block-span, 12);
  border: 1px solid rgba(202,174,255,.18);
  border-radius: 13px;
  background: rgba(7,4,13,.82);
  overflow: hidden;
}
.cms-screenshot-individual-block .cms-screenshot-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  padding: 0 !important;
  gap: 0 !important;
}
.cms-screenshot-individual-block .cms-screenshot-grid > figure {
  grid-column: 1 / -1 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.cms-screenshot-group-head { padding: 13px 15px 0; }
.cms-screenshot-group-head h3 { margin: 0; color: #fff; font-size: 1.1rem; }
.cms-screenshot-group-grid {
  display: grid;
  grid-template-columns: repeat(var(--cms-group-columns, 3), minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  align-items: start;
}
.cms-screenshot-group-grid figure {
  display: flex;
  min-width: 0;
  height: 100%;
  margin: 0;
  flex-direction: column;
  border: 1px solid rgba(202,174,255,.18);
  border-radius: 10px;
  overflow: hidden;
  background: #08050f;
}
.cms-screenshot-group-grid figure > a:first-child {
  display: grid;
  width: 100%;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  background: #030205;
}
.cms-screenshot-group-grid figure > a:first-child > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--cms-group-fit, contain);
}
.cms-group-layout-horizontal .cms-screenshot-group-grid figure > a:first-child { aspect-ratio: 16 / 9; }
.cms-group-layout-vertical .cms-screenshot-group-grid figure > a:first-child { aspect-ratio: 9 / 16; max-height: 680px; }
.cms-group-layout-square .cms-screenshot-group-grid figure > a:first-child { aspect-ratio: 1; }
.cms-group-layout-natural .cms-screenshot-group-grid figure > a:first-child,
.cms-group-layout-mixed .cms-screenshot-group-grid figure > a:first-child { height: auto; min-height: 110px; }
.cms-group-layout-natural .cms-screenshot-group-grid figure > a:first-child > img,
.cms-group-layout-mixed .cms-screenshot-group-grid figure > a:first-child > img { height: auto; max-height: 680px; object-fit: contain; }
.cms-screenshot-group-grid figcaption { display: grid; gap: 4px; padding: 10px 11px; }
.cms-screenshot-group-grid figcaption strong { color: #fff; }
.cms-screenshot-group-grid figcaption span { color: var(--muted, #ad9fc4); font-size: .9rem; }
.cms-screenshot-group-grid .cms-screenshot-open-original { color: #c990ff; font-size: .82rem; }

@media (max-width: 980px) {
  .cms-screenshot-content-block { grid-column: 1 / -1; }
  .cms-screenshot-group-grid { grid-template-columns: repeat(var(--cms-group-columns-tablet, 2), minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .site-screenshot-group-admin-card { grid-template-columns: 1fr; }
  .site-screenshot-group-picker-head { display: grid; }
  .cms-screenshot-content-block { grid-column: 1 / -1 !important; }
  .cms-screenshot-group-grid { grid-template-columns: 1fr; }
  .cms-screenshot-block-layout { padding: 12px; gap: 12px; }
}
.site-screenshot-group-live-preview {
  margin-top: 2px;
  padding: 15px;
  border: 1px solid #392851;
  border-radius: 13px;
  background: radial-gradient(circle at top left, rgba(126,34,206,.13), transparent 45%), #07040d;
}
.site-screenshot-group-live-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.site-screenshot-group-live-preview-head strong { color: #fff; }
.site-screenshot-group-live-preview-head span { color: #a89ab9; }
.site-screenshot-group-live-preview-stage {
  width: var(--group-preview-box-width, 78%);
  max-width: 100%;
  padding: 10px;
  border: 1px solid rgba(190,125,255,.28);
  border-radius: 11px;
  background: #050308;
}
.site-screenshot-group-live-preview-stage[data-size="small"] { --group-preview-box-width: 38%; }
.site-screenshot-group-live-preview-stage[data-size="medium"] { --group-preview-box-width: 58%; }
.site-screenshot-group-live-preview-stage[data-size="large"] { --group-preview-box-width: 78%; }
.site-screenshot-group-live-preview-stage[data-size="full"] { --group-preview-box-width: 100%; }
.site-screenshot-group-live-preview-grid {
  display: grid;
  grid-template-columns: repeat(var(--group-preview-columns, 3), minmax(0, 1fr));
  gap: 8px;
}
.site-screenshot-group-live-preview-grid > p { grid-column: 1 / -1; margin: 0; padding: 34px 12px; text-align: center; color: #8f80a8; }
.site-screenshot-group-live-preview-grid figure { margin: 0; overflow: hidden; border: 1px solid rgba(202,174,255,.2); border-radius: 7px; background: #090610; }
.site-screenshot-group-live-preview-grid img { display: block; width: 100%; height: 100%; object-fit: var(--group-preview-fit, contain); }
.site-screenshot-group-live-preview-stage[data-layout="horizontal"] figure { aspect-ratio: 16 / 9; }
.site-screenshot-group-live-preview-stage[data-layout="vertical"] figure { aspect-ratio: 9 / 16; }
.site-screenshot-group-live-preview-stage[data-layout="square"] figure { aspect-ratio: 1; }
.site-screenshot-group-live-preview-stage[data-layout="natural"] figure,
.site-screenshot-group-live-preview-stage[data-layout="mixed"] figure { aspect-ratio: auto; }
.site-screenshot-group-live-preview-stage[data-layout="natural"] img,
.site-screenshot-group-live-preview-stage[data-layout="mixed"] img { height: auto; max-height: 360px; object-fit: contain; }
@media (max-width: 760px) {
  .site-screenshot-group-live-preview-head { display: grid; }
  .site-screenshot-group-live-preview-stage { width: 100%; }
  .site-screenshot-group-live-preview-grid { grid-template-columns: repeat(var(--group-preview-columns-mobile, 2), minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .site-screenshot-group-live-preview-grid { grid-template-columns: 1fr; }
}


/* ========================================================================== 
   v141 — real independent screenshot components
   Shape and page width are separate. Vertical is true 9:16 full-length.
   Every individual screenshot and every group is a draggable builder section.
   ========================================================================== */
.cms-screenshot-placeholder { display: none !important; }

main.page-content > .cms-screenshot-content-block {
  width: min(100%, var(--cms-original-block-width, 100%));
  max-width: 100%;
  margin: 18px 0 0;
}
.cms-builder-grid > .cms-screenshot-content-block {
  width: 100% !important;
  margin: 0 !important;
}
.cms-screenshot-content-block {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(202,174,255,.24);
  border-radius: 14px;
  background: rgba(7,4,13,.92);
}
.cms-screenshot-content-block .cms-screenshot-grid,
.cms-screenshot-content-block .cms-screenshot-group-grid { margin: 0; }
.cms-screenshot-individual-block .cms-screenshot-grid {
  display: block !important;
  padding: 0 !important;
}
.cms-screenshot-individual-block figure {
  display: flex !important;
  width: 100%;
  margin: 0 !important;
  flex-direction: column;
  border: 0 !important;
  border-radius: 0 !important;
  background: #06030b;
}
.cms-screenshot-individual-block figure > a:first-child {
  display: grid !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  place-items: center;
  overflow: hidden;
  background: #020104;
}
.cms-screenshot-individual-block figure > a:first-child > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: var(--cms-shot-fit, contain) !important;
  background: #020104;
}
.cms-screenshot-individual-block figure[data-screenshot-orientation="horizontal"] > a:first-child {
  aspect-ratio: 16 / 9 !important;
}
.cms-screenshot-individual-block figure[data-screenshot-orientation="vertical"] > a:first-child {
  aspect-ratio: 9 / 16 !important;
  height: auto !important;
  max-height: none !important;
}
.cms-screenshot-individual-block figure[data-screenshot-orientation="square"] > a:first-child {
  aspect-ratio: 1 / 1 !important;
}
.cms-screenshot-individual-block figure[data-screenshot-orientation="natural"] > a:first-child {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}
.cms-screenshot-individual-block figure[data-screenshot-orientation="natural"] > a:first-child > img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}

.cms-screenshot-group-block .cms-screenshot-group-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--cms-group-columns, 3), minmax(0, 1fr)) !important;
  gap: 12px;
  padding: 14px;
}
.cms-screenshot-group-block .cms-screenshot-group-grid figure > a:first-child {
  max-height: none !important;
}
.cms-screenshot-group-block.cms-group-layout-horizontal figure > a:first-child { aspect-ratio: 16 / 9 !important; }
.cms-screenshot-group-block.cms-group-layout-vertical figure > a:first-child {
  aspect-ratio: 9 / 16 !important;
  max-height: none !important;
}
.cms-screenshot-group-block.cms-group-layout-square figure > a:first-child { aspect-ratio: 1 / 1 !important; }
.cms-screenshot-group-block.cms-group-layout-natural figure > a:first-child,
.cms-screenshot-group-block.cms-group-layout-mixed figure > a:first-child { aspect-ratio: auto !important; height: auto !important; }
.cms-screenshot-group-block.cms-group-layout-natural figure > a:first-child > img,
.cms-screenshot-group-block.cms-group-layout-mixed figure > a:first-child > img { height: auto !important; max-height: none !important; object-fit: contain !important; }

.cms-screenshot-block-drag-handle {
  position: relative;
  z-index: 10050;
  display: none;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(206,153,255,.38);
  background: linear-gradient(90deg, rgba(125,39,195,.92), rgba(63,20,102,.92));
  color: #fff;
  font: 900 12px/1.2 system-ui,sans-serif;
  letter-spacing: .06em;
  cursor: grab;
  user-select: none;
}
.cms-edit-mode .cms-screenshot-block-drag-handle { display: flex; }
.cms-screenshot-block-drag-handle:active { cursor: grabbing; }
.cms-edit-mode .cms-screenshot-content-block { overflow: visible !important; }
.cms-edit-mode .cms-screenshot-content-block::after {
  content: "DRAGGABLE SCREENSHOT COMPONENT";
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 50;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(87,25,139,.92);
  color: #f5eaff;
  font: 800 9px/1 system-ui,sans-serif;
  pointer-events: none;
}

.site-screenshot-logical-controls {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(180,102,255,.38);
  border-radius: 13px;
  background: #08050f;
}
.site-screenshot-logical-heading { display: grid; gap: 3px; }
.site-screenshot-logical-heading strong { color: #fff; }
.site-screenshot-logical-heading span { color: #a99ab9; }
.site-screenshot-choice-grid,
.site-screenshot-width-choice-grid,
.cms-screenshot-shape-grid,
.cms-screenshot-width-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 9px;
}
.site-screenshot-choice-grid button,
.site-screenshot-width-choice-grid button,
.cms-screenshot-shape-grid button,
.cms-screenshot-width-grid button {
  display: grid;
  min-height: 92px;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(181,113,235,.3);
  border-radius: 10px;
  background: #0b0712;
  color: #e9def5;
  cursor: pointer;
  text-align: center;
}
.site-screenshot-choice-grid button.active,
.site-screenshot-width-choice-grid button.active,
.cms-screenshot-shape-grid button.active,
.cms-screenshot-width-grid button.active,
.site-screenshot-choice-grid button:hover,
.site-screenshot-width-choice-grid button:hover,
.cms-screenshot-shape-grid button:hover,
.cms-screenshot-width-grid button:hover {
  border-color: #cd82ff;
  background: linear-gradient(145deg, rgba(126,38,203,.55), rgba(31,13,50,.96));
  box-shadow: 0 0 0 2px rgba(174,89,255,.12);
}
.cms-screenshot-shape-grid { margin-bottom: 12px; }
.cms-screenshot-width-grid { margin-bottom: 12px; grid-template-columns: repeat(6, minmax(64px, 1fr)); }

.site-screenshot-layout-frame[data-orientation="vertical"] .site-screenshot-layout-image {
  aspect-ratio: 9 / 16 !important;
  height: auto !important;
  max-height: 650px;
}
.site-screenshot-layout-frame[data-orientation="horizontal"] .site-screenshot-layout-image { aspect-ratio: 16 / 9 !important; height: auto !important; }
.site-screenshot-layout-frame[data-orientation="square"] .site-screenshot-layout-image { aspect-ratio: 1 / 1 !important; height: auto !important; }
.site-screenshot-layout-frame[data-orientation="natural"] .site-screenshot-layout-image { aspect-ratio: auto !important; height: auto !important; min-height: 180px; }

@media (max-width: 980px) {
  main.page-content > .cms-screenshot-content-block { width: 100% !important; }
  .cms-screenshot-group-block .cms-screenshot-group-grid { grid-template-columns: repeat(var(--cms-group-columns-tablet, 2), minmax(0,1fr)) !important; }
  .cms-screenshot-width-grid { grid-template-columns: repeat(3, minmax(80px,1fr)); }
}
@media (max-width: 680px) {
  .cms-screenshot-group-block .cms-screenshot-group-grid { grid-template-columns: 1fr !important; }
  .site-screenshot-choice-grid,.site-screenshot-width-choice-grid,.cms-screenshot-shape-grid,.cms-screenshot-width-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* v141 semantic screenshot-group width preview */
.site-screenshot-group-live-preview-stage[data-size="quarter"] { --group-preview-box-width: 25%; }
.site-screenshot-group-live-preview-stage[data-size="third"] { --group-preview-box-width: 33.333%; }
.site-screenshot-group-live-preview-stage[data-size="half"] { --group-preview-box-width: 50%; }
.site-screenshot-group-live-preview-stage[data-size="two-thirds"] { --group-preview-box-width: 66.667%; }
.site-screenshot-group-live-preview-stage[data-size="three-quarters"] { --group-preview-box-width: 75%; }


/* v142 final regression repair: compact graph, aligned dashboard, side inspector */
.chart-wrap { min-height: 176px !important; height: 176px !important; }
.chart-wrap svg { width: 100% !important; height: 176px !important; max-height: 176px !important; }
.analytics-panel .panel-body { padding-bottom: 12px !important; }
.dashboard-columns { align-items: stretch !important; }
.dashboard-column { align-content: start !important; min-height: 0 !important; }
@media (min-width: 1181px) {
  .cms-builder-workspace-visual {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 360px !important;
    gap: 16px !important;
    align-items: start !important;
  }
  .cms-builder-workspace-visual .cms-builder-preview-wrap { grid-column: 1 !important; }
  .cms-builder-workspace-visual .cms-builder-inspector {
    grid-column: 2 !important;
    position: sticky !important;
    top: 12px !important;
    width: auto !important;
    max-height: calc(100vh - 30px) !important;
    overflow: auto !important;
  }
}
.cms-edit-mode .cms-screenshot-block-drag-handle {
  display: flex !important;
  touch-action: none !important;
  cursor: grab !important;
}
.cms-edit-mode .cms-screenshot-block-drag-handle.cms-pointer-dragging { cursor: grabbing !important; }
.cms-pointer-reorder-target { outline: 3px solid #c46cff !important; outline-offset: 4px !important; }

/* ========================================================================== 
   v143 — full real-data release: working screenshot controls, drag handles,
   compact aligned dashboard and Medal clips. No placeholder statistics.
   ========================================================================== */
.chart-wrap { min-height: 148px !important; height: 148px !important; }
.chart-wrap svg { width: 100% !important; height: 148px !important; max-height: 148px !important; }
.metric-tabs { margin-bottom: 8px !important; }

@media (min-width: 1181px) {
  .dashboard-columns { align-items: start !important; }
  .dashboard-column { display: grid !important; grid-template-rows: 350px 300px auto !important; gap: 14px !important; align-content: start !important; }
  .dashboard-column > article:nth-of-type(1) { height: 350px !important; min-height: 350px !important; overflow: hidden !important; }
  .dashboard-column > article:nth-of-type(2) { height: 300px !important; min-height: 300px !important; overflow: hidden !important; }
  .dashboard-column > article > .panel-body { min-height: 0 !important; overflow: auto !important; }
  .dashboard-column-wide .analytics-panel .panel-body { overflow: hidden !important; }
}

.cms-edit-mode [data-cms-builder-grid] > [data-cms-section-key] { position: relative !important; }
.cms-builder-direct-drag-handle,
.cms-edit-mode .cms-screenshot-block-drag-handle {
  display: flex !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(220,164,255,.62) !important;
  border-radius: 8px 8px 0 0 !important;
  background: linear-gradient(90deg, rgba(141,45,224,.96), rgba(75,24,121,.96)) !important;
  color: #fff !important;
  font: 900 11px/1.2 system-ui,sans-serif !important;
  letter-spacing: .045em !important;
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.cms-builder-direct-drag-handle.cms-pointer-dragging,
.cms-screenshot-block-drag-handle.cms-pointer-dragging { cursor: grabbing !important; }
.cms-section-dragging { opacity: .7 !important; box-shadow: 0 0 0 3px rgba(203,112,255,.7) !important; }
.cms-pointer-reorder-target { position: relative !important; outline: 3px solid #d17aff !important; outline-offset: 5px !important; }
.cms-pointer-reorder-target[data-cms-pointer-drop-side="before"]::before,
.cms-pointer-reorder-target[data-cms-pointer-drop-side="after"]::after {
  content: "DROP HERE";
  position: absolute;
  left: 8px;
  right: 8px;
  z-index: 30000;
  height: 5px;
  border-radius: 999px;
  background: #d17aff;
  color: #fff;
  font: 900 10px/1 system-ui,sans-serif;
  text-align: center;
  box-shadow: 0 0 16px rgba(209,122,255,.9);
}
.cms-pointer-reorder-target[data-cms-pointer-drop-side="before"]::before { top: -8px; }
.cms-pointer-reorder-target[data-cms-pointer-drop-side="after"]::after { bottom: -8px; }
.cms-screenshot-group-selected { outline: 3px solid #d58bff !important; outline-offset: 4px !important; }
.cms-screenshot-group-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; }
.cms-screenshot-control-label { display: block; margin: 13px 0 8px; color: #fff; }
.cms-builder-group-columns { display: grid; gap: 6px; margin-top: 12px; }


.sidebar-socials { gap: 7px !important; }
.sidebar-socials a { width: 30px !important; height: 30px !important; }
.metric-tabs { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
@media (max-width: 900px) { .metric-tabs { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } }
@media (max-width: 560px) { .metric-tabs { grid-template-columns: 1fr !important; } }

/* v143 final canvas repair: every editable card is a direct grid component. */
.cms-builder-grid {
  align-items: stretch !important;
  grid-auto-flow: row dense;
}
.cms-builder-grid > [data-cms-section-key] {
  min-width: 0 !important;
  height: 100%;
  align-self: stretch !important;
}
.cms-builder-grid > [data-cms-section-key].cms-screenshot-content-block {
  height: auto;
}

/* Keep the original dashboard rows straight without forcing the two-column
   responsive state into the desktop three-column height rules. */
@media (min-width: 1221px) {
  .dashboard-column { display: grid !important; grid-template-rows: 350px 300px auto !important; gap: 14px !important; align-content: start !important; }
  .dashboard-column > article:nth-of-type(1) { height: 350px !important; min-height: 350px !important; overflow: hidden !important; }
  .dashboard-column > article:nth-of-type(2) { height: 300px !important; min-height: 300px !important; overflow: hidden !important; }
}
@media (min-width: 901px) and (max-width: 1220px) {
  .dashboard-column:not(.dashboard-column-wide) { display: grid !important; grid-template-rows: 350px 300px auto !important; gap: 14px !important; align-content: start !important; }
  .dashboard-column:not(.dashboard-column-wide) > article:nth-of-type(1) { height: 350px !important; min-height: 350px !important; overflow: hidden !important; }
  .dashboard-column:not(.dashboard-column-wide) > article:nth-of-type(2) { height: 300px !important; min-height: 300px !important; overflow: hidden !important; }
  .dashboard-column-wide { grid-template-rows: none !important; }
  .dashboard-column-wide > article { height: auto !important; min-height: 0 !important; }
}


/* v144 — one unified screenshot workflow. Upload/library and single/group
   placement share one panel; layout is chosen only in the box builder. */
.site-screenshot-unified-workflow { display:grid; gap:22px; }
.site-screenshot-workflow-step {
  padding:18px;
  border:1px solid rgba(185,111,255,.34);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(93,31,148,.10),rgba(8,5,15,.86));
}
.site-screenshot-workflow-step.site-screenshot-groups-admin { margin-top:0; padding-top:18px; border-top:1px solid rgba(185,111,255,.34); }
.site-screenshot-step-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:15px; }
.site-screenshot-step-head > span { display:grid; width:34px; height:34px; flex:0 0 34px; place-items:center; border:1px solid #b66cff; border-radius:10px; background:rgba(137,45,255,.24); color:#fff; font-weight:900; }
.site-screenshot-step-head > div { min-width:0; flex:1; }
.site-screenshot-step-head h3 { margin:0 0 4px; color:#fff; font-size:1.3rem; }
.site-screenshot-step-head p { margin:0; color:#aa9abb; }
.site-screenshot-step-head > .button { margin-left:auto; }
.site-screenshot-unified-choice-fieldset { margin:0; padding:15px; border:1px solid #392851; border-radius:13px; background:#08050f; }
.site-screenshot-unified-choice-fieldset legend { padding:0 8px; color:#fff; font-weight:800; }
.site-screenshot-number-grid,.site-screenshot-shape-grid,.site-screenshot-box-width-grid { display:grid; gap:9px; }
.site-screenshot-number-grid { grid-template-columns:repeat(6,minmax(80px,1fr)); }
.site-screenshot-shape-grid { grid-template-columns:repeat(4,minmax(150px,1fr)); }
.site-screenshot-box-width-grid { grid-template-columns:repeat(6,minmax(90px,1fr)); }
.site-screenshot-number-grid button,.site-screenshot-shape-grid button,.site-screenshot-box-width-grid button {
  display:grid; min-height:82px; place-items:center; align-content:center; gap:5px; padding:10px;
  border:1px solid rgba(181,113,235,.3); border-radius:10px; background:#0b0712; color:#e9def5; cursor:pointer; text-align:center;
}
.site-screenshot-shape-grid button { min-height:126px; text-align:left; place-items:stretch; }
.site-screenshot-number-grid button.active,.site-screenshot-shape-grid button.active,.site-screenshot-box-width-grid button.active,
.site-screenshot-number-grid button:hover,.site-screenshot-shape-grid button:hover,.site-screenshot-box-width-grid button:hover {
  border-color:#cd82ff; background:linear-gradient(145deg,rgba(126,38,203,.55),rgba(31,13,50,.96)); box-shadow:0 0 0 2px rgba(174,89,255,.12);
}
.site-screenshot-number-grid button strong,.site-screenshot-box-width-grid button strong { color:#fff; font-size:1.35rem; }
.site-screenshot-number-grid button small,.site-screenshot-shape-grid button small,.site-screenshot-box-width-grid button small { color:#a99ab9; }
.site-screenshot-library-form { margin-bottom:0; }
@media (max-width:1100px) {
  .site-screenshot-number-grid,.site-screenshot-box-width-grid { grid-template-columns:repeat(3,minmax(90px,1fr)); }
  .site-screenshot-shape-grid { grid-template-columns:repeat(2,minmax(150px,1fr)); }
}
@media (max-width:650px) {
  .site-screenshot-workflow-step { padding:12px; }
  .site-screenshot-step-head { flex-wrap:wrap; }
  .site-screenshot-step-head > .button { width:100%; margin-left:46px; }
  .site-screenshot-number-grid,.site-screenshot-box-width-grid,.site-screenshot-shape-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}


/* v145: unmistakable deployed-build marker for the unified admin. */
.site-admin-build-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 3px 8px;
  border: 1px solid rgba(194,120,255,.62);
  border-radius: 999px;
  background: rgba(139,61,255,.16);
  color: #e8cfff;
  font: 700 12px/1.2 "Rajdhani", Arial, sans-serif;
  letter-spacing: .035em;
  text-transform: none;
  vertical-align: middle;
}

/* v148 — screenshot box width and length are independent. */
.site-screenshot-box-length-grid,
.cms-screenshot-length-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(96px, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}
.site-screenshot-box-length-grid button,
.cms-screenshot-length-grid button {
  display: grid;
  min-height: 76px;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(181,113,235,.3);
  border-radius: 10px;
  background: #0b0712;
  color: #e9def5;
  cursor: pointer;
  text-align: center;
}
.site-screenshot-box-length-grid button.active,
.cms-screenshot-length-grid button.active,
.site-screenshot-box-length-grid button:hover,
.cms-screenshot-length-grid button:hover {
  border-color: #cd82ff;
  background: linear-gradient(145deg,rgba(126,38,203,.55),rgba(31,13,50,.96));
  box-shadow: 0 0 0 2px rgba(174,89,255,.12);
}
.site-screenshot-box-length-grid button strong,
.cms-screenshot-length-grid button strong { color: #fff; font-size: 1.08rem; }
.site-screenshot-box-length-grid button small,
.cms-screenshot-length-grid button small { color: #a99ab9; }
.site-screenshot-control-help { margin: 0 0 12px; color: #aa9abb; }

/* Explicit lengths override shape only when the user selects a fixed length. */
.cms-screenshot-group-block.cms-group-length-compact .cms-screenshot-group-grid figure > a:first-child {
  height: 170px !important;
  min-height: 170px !important;
  max-height: 170px !important;
  aspect-ratio: auto !important;
}
.cms-screenshot-group-block.cms-group-length-normal .cms-screenshot-group-grid figure > a:first-child {
  height: 300px !important;
  min-height: 300px !important;
  max-height: 300px !important;
  aspect-ratio: auto !important;
}
.cms-screenshot-group-block.cms-group-length-tall .cms-screenshot-group-grid figure > a:first-child {
  height: 480px !important;
  min-height: 480px !important;
  max-height: 480px !important;
  aspect-ratio: auto !important;
}
.cms-screenshot-group-block.cms-group-length-full .cms-screenshot-group-grid figure > a:first-child {
  height: clamp(620px, 80vh, 1100px) !important;
  min-height: clamp(620px, 80vh, 1100px) !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}

/* Scaled admin preview for the same length choices. */
.site-screenshot-group-live-preview-stage[data-length="compact"] figure {
  height: 86px !important;
  aspect-ratio: auto !important;
}
.site-screenshot-group-live-preview-stage[data-length="normal"] figure {
  height: 150px !important;
  aspect-ratio: auto !important;
}
.site-screenshot-group-live-preview-stage[data-length="tall"] figure {
  height: 250px !important;
  aspect-ratio: auto !important;
}
.site-screenshot-group-live-preview-stage[data-length="full"] figure {
  height: 390px !important;
  aspect-ratio: auto !important;
}

@media (max-width: 900px) {
  .site-screenshot-box-length-grid,
  .cms-screenshot-length-grid { grid-template-columns: repeat(3, minmax(90px,1fr)); }
  .cms-screenshot-group-block.cms-group-length-full .cms-screenshot-group-grid figure > a:first-child {
    height: min(78vh, 760px) !important;
    min-height: 520px !important;
  }
}
@media (max-width: 560px) {
  .site-screenshot-box-length-grid,
  .cms-screenshot-length-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cms-screenshot-group-block.cms-group-length-compact .cms-screenshot-group-grid figure > a:first-child { height: 150px !important; min-height: 150px !important; }
  .cms-screenshot-group-block.cms-group-length-normal .cms-screenshot-group-grid figure > a:first-child { height: 260px !important; min-height: 260px !important; }
  .cms-screenshot-group-block.cms-group-length-tall .cms-screenshot-group-grid figure > a:first-child { height: 420px !important; min-height: 420px !important; }
}

/* ========================================================================== 
   v153 — regression repair while preserving v148 screenshot/page-builder work.
   ========================================================================== */

/* Compact graph restored. The graph is real data, but it must not dominate the dashboard. */
.metric-tabs { grid-template-columns: repeat(3,minmax(0,1fr)) !important; margin-bottom:8px !important; }
.metric-tab em { display:block; margin-top:4px; color:var(--muted); font-size:.68rem; font-style:normal; }
.chart-wrap { width:100% !important; min-height:148px !important; height:148px !important; overflow:hidden !important; }
.chart-wrap svg { display:block !important; width:100% !important; height:148px !important; max-height:148px !important; overflow:visible !important; }
.analytics-panel .panel-body { display:flex !important; min-height:0 !important; flex-direction:column !important; overflow:hidden !important; padding-bottom:12px !important; }
@media (min-width:1221px) {
  .dashboard-column { grid-template-rows:350px 300px auto !important; }
  .dashboard-column > article:nth-of-type(1) { height:350px !important; min-height:350px !important; overflow:hidden !important; }
  .dashboard-column > article:nth-of-type(2) { height:300px !important; min-height:300px !important; overflow:hidden !important; }
}
@media (min-width:901px) and (max-width:1220px) {
  .dashboard-column:not(.dashboard-column-wide) { grid-template-rows:350px 300px auto !important; }
  .dashboard-column:not(.dashboard-column-wide) > article:nth-of-type(1) { height:350px !important; min-height:350px !important; overflow:hidden !important; }
  .dashboard-column:not(.dashboard-column-wide) > article:nth-of-type(2) { height:300px !important; min-height:300px !important; overflow:hidden !important; }
  .dashboard-column-wide .analytics-panel { min-height:350px !important; }
}
@media (max-width:900px) {
  .chart-wrap,.chart-wrap svg { min-height:148px !important; height:148px !important; max-height:148px !important; }
  .metric-tabs { grid-template-columns:1fr !important; }
}

/* Keep the same breathing room on both sides. Do not add late one-off edge overrides. */
.page-content { width:min(1540px,calc(100% - 42px)); margin-inline:auto; padding-top:24px; }
@media (max-width:900px) { .page-content { width:min(100% - 24px,1100px); padding-top:16px; } }

/* Playlists are one real responsive library: two useful cards per desktop row,
   rather than separate giant/empty category boxes. */
body[data-page="games"] [data-playlists] { width:100%; }
body[data-page="games"] .playlist-library { width:100%; padding:18px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.015); }
body[data-page="games"] .playlist-library-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; }
body[data-page="games"] .playlist-library-head h2 { margin:0; }
body[data-page="games"] .playlist-library-head span { color:var(--soft); font-size:.8rem; }
body[data-page="games"] .playlist-library-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:stretch; }
body[data-page="games"] .playlist-library-grid .playlist-card { display:flex !important; width:100% !important; max-width:none !important; min-height:0 !important; height:100% !important; flex-direction:column !important; }
body[data-page="games"] .playlist-library-grid .playlist-card-image { display:block; height:auto !important; }
body[data-page="games"] .playlist-library-grid .playlist-card img { width:100% !important; height:auto !important; min-height:0 !important; aspect-ratio:16/9 !important; object-fit:cover !important; }
body[data-page="games"] .playlist-library-grid .playlist-card-copy { display:flex !important; min-height:190px !important; height:100% !important; flex-direction:column !important; padding:16px !important; }
body[data-page="games"] .playlist-library-grid .playlist-card h3 { font-size:1.22rem !important; line-height:1.25 !important; }
body[data-page="games"] .playlist-library-grid .playlist-card p:not(.eyebrow) { display:-webkit-box !important; margin:8px 0 12px !important; overflow:hidden !important; line-height:1.45 !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:3 !important; }
body[data-page="games"] .playlist-library-grid .playlist-card-footer { margin-top:auto !important; }
@media (max-width:760px) {
  body[data-page="games"] .playlist-library { padding:14px; }
  body[data-page="games"] .playlist-library-grid { grid-template-columns:1fr; }
}

/* Platform-agnostic orientation. Cards use the actual media/image dimensions or
   a real platform type; titles are never used to guess orientation. */
.media-card[data-media-orientation="vertical"] > img,
.youtube-card[data-media-orientation="vertical"] > img { aspect-ratio:9/16 !important; object-fit:cover !important; }
.media-card[data-media-orientation="horizontal"] > img,
.youtube-card[data-media-orientation="horizontal"] > img { aspect-ratio:16/9 !important; object-fit:cover !important; }
.media-card[data-media-orientation="square"] > img,
.youtube-card[data-media-orientation="square"] > img { aspect-ratio:1/1 !important; object-fit:cover !important; }
.media-grid-videos { grid-template-columns:repeat(auto-fit,minmax(270px,1fr)) !important; }
.media-grid-shorts { grid-template-columns:repeat(auto-fill,minmax(170px,220px)) !important; justify-content:start; }
.media-grid-shorts .media-card { max-width:220px; }
.youtube-short-card { max-width:220px; }
.youtube-card small { display:block; margin-bottom:5px; color:#d88cff; font-size:.65rem; font-weight:800; text-transform:uppercase; }

/* Twitch-style horizontal highlight rail for newest clips. */
.media-carousel-controls { display:flex; align-items:center; gap:8px; margin-left:auto; }
.media-carousel-button { display:grid; width:36px; height:36px; place-items:center; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.035); color:#fff; font-size:1.35rem; cursor:pointer; }
.media-carousel-button:hover { border-color:#bd70ff; background:rgba(157,70,255,.16); }
.media-carousel-track { display:grid !important; grid-template-columns:none !important; grid-auto-flow:column; grid-auto-columns:minmax(260px,31%); gap:14px; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; scroll-snap-type:x mandatory; overscroll-behavior-inline:contain; scrollbar-width:thin; }
.media-carousel-track > .media-card { width:100% !important; max-width:none !important; scroll-snap-align:start; }
@media (max-width:900px) { .media-carousel-track { grid-auto-columns:minmax(250px,72%); } }
@media (max-width:560px) { .media-carousel-track { grid-auto-columns:88%; } }

/* Seven social destinations fit without deleting any platform. */
.sidebar-socials { display:flex; flex-wrap:wrap; justify-content:center; gap:6px !important; }
.sidebar-socials a { width:29px !important; height:29px !important; }


/* v155: Steam profile alignment and real framed avatar. */
.steam-card { gap: 16px !important; }
.steam-profile {
  grid-template-columns: 84px minmax(0,1fr) !important;
  column-gap: 16px !important;
  min-height: 84px;
  align-items: center !important;
}
.steam-profile > div { min-width: 0; display: grid; align-content: center; gap: 5px; }
.steam-profile img {
  width: 84px !important;
  height: 84px !important;
  box-sizing: border-box;
  padding: 3px;
  border: 2px solid rgba(192,132,252,.72) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg,rgba(126,34,206,.24),rgba(7,5,13,.96));
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 8px 22px rgba(0,0,0,.28), 0 0 18px rgba(168,85,247,.16);
  object-fit: cover;
}
.steam-profile h3 {
  margin: 0 !important;
  min-width: 0;
  overflow: hidden;
  font-size: 1.28rem !important;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.steam-profile p {
  margin: 0 !important;
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
@media(max-width:520px){
  .steam-profile { grid-template-columns: 74px minmax(0,1fr) !important; column-gap: 13px !important; min-height:74px; }
  .steam-profile img { width:74px !important; height:74px !important; }
  .steam-profile h3 { font-size:1.12rem !important; }
}

/* ========================================================================== 
   v157 — full-data homepage spacing and human-layout repair.
   This block changes presentation only. It keeps the v156 API, screenshot
   builder, page content, languages, projects, D1 and R2 behavior untouched.
   ========================================================================== */

body[data-page="dashboard"] {
  --dashboard-gap: 18px;
  --dashboard-panel-padding: 18px;
}

/* Consistent real page margins. */
body[data-page="dashboard"] .page-content {
  width: min(1540px, calc(100% - 56px)) !important;
  padding-top: 26px !important;
}
body[data-page="dashboard"] .page-title-row { margin-bottom: 20px; }
body[data-page="dashboard"] .dashboard-top {
  gap: var(--dashboard-gap) !important;
}
body[data-page="dashboard"] .dashboard-columns {
  position: relative;
  isolation: isolate;
  gap: var(--dashboard-gap) !important;
  margin-top: var(--dashboard-gap) !important;
  align-items: start !important;
}
body[data-page="dashboard"] .dashboard-column {
  gap: var(--dashboard-gap) !important;
  grid-template-rows: none !important;
  align-content: start !important;
}

/* Do not crop cards to artificial matching heights. Their real content decides
   their height, giving the homepage a controlled, natural asymmetry. */
@media (min-width: 901px) {
  body[data-page="dashboard"] .dashboard-column > article:nth-of-type(1),
  body[data-page="dashboard"] .dashboard-column > article:nth-of-type(2),
  body[data-page="dashboard"] .dashboard-column-wide > article:nth-of-type(1),
  body[data-page="dashboard"] .dashboard-column-wide > article:nth-of-type(2) {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* Stronger but restrained borders and one spacing rhythm inside every square. */
body[data-page="dashboard"] .panel {
  border-color: rgba(202,174,255,.25) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
body[data-page="dashboard"] .panel-head {
  min-height: 56px;
  padding: 16px 18px !important;
  gap: 16px !important;
}
body[data-page="dashboard"] .panel-body {
  padding: var(--dashboard-panel-padding) !important;
}
body[data-page="dashboard"] .panel-head h2 { line-height: 1.15; }

/* Recent clips: readable image/text spacing rather than content touching edges. */
body[data-page="dashboard"] .clips-panel .panel-body {
  padding: 12px 14px 15px !important;
}
body[data-page="dashboard"] .mini-list { gap: 4px !important; }
body[data-page="dashboard"] .mini-media {
  grid-template-columns: 112px minmax(0,1fr) auto !important;
  gap: 13px !important;
  padding: 9px 8px !important;
}

/* Analytics: compact graph remains compact, while the stat squares breathe. */
body[data-page="dashboard"] .analytics-panel .panel-body {
  position: relative;
  z-index: 1;
  display: flex !important;
  min-height: 0 !important;
  flex-direction: column !important;
  padding: 16px 18px 18px !important;
  overflow: visible !important;
}
body[data-page="dashboard"] .analytics-panel .panel-head {
  position: relative;
  z-index: 2;
}
body[data-page="dashboard"] .metric-tabs {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}
body[data-page="dashboard"] .metric-tab {
  min-height: 84px;
  padding: 13px 14px !important;
  border-color: rgba(202,174,255,.28) !important;
  border-radius: 10px !important;
}
body[data-page="dashboard"] .chart-wrap {
  width: calc(100% - 8px) !important;
  min-height: 148px !important;
  height: 148px !important;
  margin-inline: 4px;
  overflow: visible !important;
}
body[data-page="dashboard"] .chart-wrap svg {
  width: 100% !important;
  min-height: 148px !important;
  height: 148px !important;
  max-height: 148px !important;
  overflow: visible !important;
}

/* Subtle C4TM30W personality behind the data instead of another sterile box. */
body[data-page="dashboard"] .analytics-panel::before {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -58px;
  z-index: 0;
  width: 190px;
  height: 230px;
  pointer-events: none;
  opacity: .12;
  background: url("../images/chibi/catmeow-chibi-ct1.png") center / contain no-repeat;
  filter: saturate(.75) drop-shadow(0 0 20px rgba(164,74,255,.22));
  transform: rotate(3deg);
}

/* Creator list uses light separators instead of five floating robotic rows. */
body[data-page="dashboard"] .community-list { gap: 0 !important; }
body[data-page="dashboard"] .community-person {
  min-height: 48px;
  gap: 11px !important;
  padding: 5px 2px !important;
}
body[data-page="dashboard"] .community-person + .community-person {
  border-top: 1px solid rgba(202,174,255,.10);
}

/* Steam profile: true framed square, clear avatar/text gap and full buttons. */
body[data-page="dashboard"] .steam-panel .panel-body {
  padding: 18px 18px 20px !important;
}
body[data-page="dashboard"] .steam-card { gap: 17px !important; }
body[data-page="dashboard"] .steam-profile {
  grid-template-columns: 86px minmax(0,1fr) !important;
  column-gap: 18px !important;
  min-height: 86px !important;
}
body[data-page="dashboard"] .steam-profile img {
  width: 86px !important;
  height: 86px !important;
  padding: 4px !important;
  border: 2px solid rgba(196,126,255,.82) !important;
  border-radius: 14px !important;
}
body[data-page="dashboard"] .steam-profile > div { gap: 6px !important; }
body[data-page="dashboard"] .steam-profile h3 {
  font-size: 1.30rem !important;
  line-height: 1.18 !important;
}
body[data-page="dashboard"] .steam-profile p { line-height: 1.38 !important; }
body[data-page="dashboard"] .info-pairs { gap: 12px !important; }
body[data-page="dashboard"] .info-pairs div {
  padding: 12px 13px !important;
  border-color: rgba(202,174,255,.27) !important;
  border-radius: 9px !important;
}
body[data-page="dashboard"] .dashboard-steam-buttons {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px !important;
  width: 100%;
}
body[data-page="dashboard"] .dashboard-steam-buttons .button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding-inline: 12px;
  line-height: 1.15;
  text-align: center;
}

/* Category rows and YouTube cards get the same internal breathing room. */
body[data-page="dashboard"] .game-mix { gap: 0 !important; }
body[data-page="dashboard"] .clip-category-row {
  min-height: 62px !important;
  padding: 11px 0 !important;
  column-gap: 13px !important;
}
body[data-page="dashboard"] .youtube-grid { gap: 12px !important; }
body[data-page="dashboard"] .youtube-card {
  border-color: rgba(202,174,255,.27) !important;
  border-radius: 10px !important;
}
body[data-page="dashboard"] .youtube-card div { padding: 11px 12px 12px !important; }
body[data-page="dashboard"] .youtube-card h3 { font-size: .90rem !important; line-height: 1.25 !important; }
body[data-page="dashboard"] .youtube-card p { margin-top: 7px !important; }

@media (max-width: 1220px) {
  body[data-page="dashboard"] .page-content {
    width: min(100% - 36px, 1180px) !important;
  }
}
@media (max-width: 900px) {
  body[data-page="dashboard"] .page-content {
    width: min(100% - 24px, 1100px) !important;
    padding-top: 16px !important;
  }
  body[data-page="dashboard"] .analytics-panel::before { opacity: .08; right: -50px; }
  body[data-page="dashboard"] .metric-tabs { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  body[data-page="dashboard"] .dashboard-steam-buttons { grid-template-columns: 1fr; }
  body[data-page="dashboard"] .steam-profile {
    grid-template-columns: 74px minmax(0,1fr) !important;
    column-gap: 14px !important;
    min-height: 74px !important;
  }
  body[data-page="dashboard"] .steam-profile img { width: 74px !important; height: 74px !important; }
  body[data-page="dashboard"] .analytics-panel::before { display: none; }
}

/* ========================================================================== 
   v158 — complete dashboard repair: no cropped borders/content, readable
   compact analytics, real-data labels and a restrained C4TM30W personality.
   ========================================================================== */

body[data-page="dashboard"] {
  --dashboard-gap-v158: 18px;
  --dashboard-pad-v158: 19px;
}

body[data-page="dashboard"] .page-content {
  width: min(1540px, calc(100% - 48px)) !important;
  padding: 24px 0 54px !important;
}

/* Public dashboard uses one real grid instead of three separately sized
   columns. Every row grows to its content, so borders and buttons cannot be
   cut off by an arbitrary 300/350px height. */
@media (min-width: 1180px) {
  body[data-page="dashboard"]:not(.cms-edit-mode) .dashboard-columns {
    display: grid !important;
    grid-template-columns: minmax(315px, .92fr) minmax(520px, 1.46fr) minmax(315px, .92fr) !important;
    gap: var(--dashboard-gap-v158) !important;
    align-items: start !important;
    margin-top: var(--dashboard-gap-v158) !important;
  }
  body[data-page="dashboard"]:not(.cms-edit-mode) .dashboard-column {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--dashboard-gap-v158) !important;
    min-width: 0 !important;
  }
  body[data-page="dashboard"]:not(.cms-edit-mode) .dashboard-column > .panel {
    flex: 0 0 auto !important;
    align-self: auto !important;
  }
  body[data-page="dashboard"]:not(.cms-edit-mode) .home-screenshot-mount {
    width: 100% !important;
    margin-top: 30px !important;
  }
}

@media (min-width: 760px) and (max-width: 1179px) {
  body[data-page="dashboard"]:not(.cms-edit-mode) .dashboard-columns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: var(--dashboard-gap-v158) !important;
    align-items: stretch !important;
  }
  body[data-page="dashboard"]:not(.cms-edit-mode) .dashboard-column { display: contents !important; }
  body[data-page="dashboard"]:not(.cms-edit-mode) .analytics-panel,
  body[data-page="dashboard"]:not(.cms-edit-mode) .games-panel,
  body[data-page="dashboard"]:not(.cms-edit-mode) .home-screenshot-mount { grid-column: 1 / -1 !important; }
  body[data-page="dashboard"]:not(.cms-edit-mode) .analytics-panel { order: 1; }
  body[data-page="dashboard"]:not(.cms-edit-mode) .clips-panel,
  body[data-page="dashboard"]:not(.cms-edit-mode) .community-panel { order: 2; }
  body[data-page="dashboard"]:not(.cms-edit-mode) .steam-panel,
  body[data-page="dashboard"]:not(.cms-edit-mode) .youtube-panel { order: 3; }
  body[data-page="dashboard"]:not(.cms-edit-mode) .games-panel { order: 4; }
  body[data-page="dashboard"]:not(.cms-edit-mode) .home-screenshot-mount { order: 5; }
}

body[data-page="dashboard"] .dashboard-columns .panel {
  align-self: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  border: 1px solid rgba(202,174,255,.30) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.027), transparent 34%),
    rgba(10,7,18,.97) !important;
  box-shadow: 0 16px 46px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.045) !important;
}
body[data-page="dashboard"] .dashboard-columns .panel::after {
  inset: 0 !important;
  border-radius: inherit !important;
  box-shadow: inset 0 0 0 1px rgba(190,119,255,.045) !important;
}
body[data-page="dashboard"] .dashboard-columns .panel-head {
  min-height: 55px !important;
  padding: 15px 17px !important;
}
body[data-page="dashboard"] .dashboard-columns .panel-body {
  box-sizing: border-box !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: var(--dashboard-pad-v158) !important;
  overflow: visible !important;
}

/* Recent clips: every row has a subtle real border, and the fourth item is no
   longer hidden by a fixed-height parent. */
body[data-page="dashboard"] .clips-panel .panel-body {
  padding: 13px 14px 15px !important;
}
body[data-page="dashboard"] .mini-list { gap: 7px !important; }
body[data-page="dashboard"] .mini-media {
  grid-template-columns: 104px minmax(0,1fr) auto !important;
  gap: 12px !important;
  padding: 8px !important;
  border-color: rgba(202,174,255,.10) !important;
  background: rgba(255,255,255,.012);
}
body[data-page="dashboard"] .mini-media img {
  width: 104px !important;
  height: 59px !important;
  border: 1px solid rgba(202,174,255,.20);
}
body[data-page="dashboard"] .mini-media h3 { white-space: normal !important; -webkit-line-clamp: 1; }

/* Analytics: smaller than the old 250px graph, but large enough that axis
   labels and dates remain readable. */
body[data-page="dashboard"] .analytics-panel .panel-body {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px 18px 17px !important;
  overflow: visible !important;
}
body[data-page="dashboard"] .metric-tabs {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
}
body[data-page="dashboard"] .metric-tab {
  min-height: 78px !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(202,174,255,.30) !important;
  border-radius: 10px !important;
  overflow: hidden;
}
body[data-page="dashboard"] .metric-tab strong {
  margin: 3px 0 4px !important;
  font-size: clamp(1.28rem, 1.7vw, 1.58rem) !important;
  line-height: 1 !important;
}
body[data-page="dashboard"] .metric-tab span {
  line-height: 1.18 !important;
  white-space: normal !important;
}
body[data-page="dashboard"] .chart-wrap {
  width: 100% !important;
  min-height: 188px !important;
  height: 188px !important;
  margin: 0 !important;
  overflow: visible !important;
}
body[data-page="dashboard"] .chart-wrap svg {
  display: block !important;
  width: 100% !important;
  min-height: 188px !important;
  height: 188px !important;
  max-height: 188px !important;
  overflow: visible !important;
}
body[data-page="dashboard"] .analytics-panel::before { display: none !important; }
body[data-page="dashboard"] .chart-point:hover,
body[data-page="dashboard"] .chart-point:focus { r: 6 !important; }

/* Steam: the user-provided profile artwork must be the visible full-card
   background of the whole Steam panel. No tiny chibi watermark here. */
body[data-page="dashboard"] .steam-panel { isolation: isolate; }
body[data-page="dashboard"] .steam-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .62;
  background:
    linear-gradient(90deg, rgba(8,5,14,.88), rgba(10,6,18,.68) 56%, rgba(28,9,48,.58)),
    url("../images/brand/steam-profile-background.png") center 28% / cover no-repeat;
}
body[data-page="dashboard"] .steam-panel .panel-head,
body[data-page="dashboard"] .steam-panel .panel-body {
  position: relative;
  z-index: 1;
}
body[data-page="dashboard"] .steam-panel .panel-body {
  padding: 20px !important;
}
body[data-page="dashboard"] .steam-card {
  display: grid !important;
  gap: 16px !important;
}
body[data-page="dashboard"] .steam-profile {
  grid-template-columns: 92px minmax(0,1fr) !important;
  column-gap: 18px !important;
  align-items: center !important;
  min-height: 92px !important;
}
body[data-page="dashboard"] .steam-profile img {
  width: 92px !important;
  height: 92px !important;
  box-sizing: border-box !important;
  padding: 4px !important;
  border: 2px solid rgba(204,139,255,.86) !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg,rgba(130,42,210,.27),rgba(7,5,13,.98));
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 10px 26px rgba(0,0,0,.32), 0 0 22px rgba(168,85,247,.17) !important;
}
body[data-page="dashboard"] .steam-profile > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 7px !important;
  align-content: center !important;
}
body[data-page="dashboard"] .steam-profile h3 {
  margin: 0 !important;
  overflow: visible !important;
  font-size: clamp(1.18rem,1.6vw,1.42rem) !important;
  line-height: 1.14 !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
body[data-page="dashboard"] .steam-profile p {
  margin: 0 !important;
  color: #c8b8d8 !important;
  line-height: 1.38 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
body[data-page="dashboard"] .info-pairs {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 11px !important;
}
body[data-page="dashboard"] .info-pairs div {
  min-height: 63px !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(202,174,255,.29) !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.017);
}
body[data-page="dashboard"] .info-pairs strong {
  overflow: visible !important;
  line-height: 1.24 !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
body[data-page="dashboard"] .dashboard-steam-buttons {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
}
body[data-page="dashboard"] .dashboard-steam-buttons .button {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 10px 12px !important;
  line-height: 1.16 !important;
  text-align: center !important;
  white-space: normal !important;
}

/* Recommendations and category rows keep borders visible without looking like
   five identical floating AI-generated cards. */
body[data-page="dashboard"] .community-list { gap: 0 !important; }
body[data-page="dashboard"] .community-person {
  min-height: 51px !important;
  padding: 6px 3px !important;
}
body[data-page="dashboard"] .community-person + .community-person {
  border-top: 1px solid rgba(202,174,255,.12);
}
body[data-page="dashboard"] .clip-category-row {
  min-height: 64px !important;
  padding: 11px 0 !important;
}

/* Four latest YouTube cards always fit as complete cards. No half-visible third
   row and no content touching the surrounding panel border. */
body[data-page="dashboard"] .youtube-panel .panel-body {
  padding: 16px !important;
}
body[data-page="dashboard"] .youtube-grid {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 11px !important;
  align-content: start !important;
}
body[data-page="dashboard"] .youtube-card {
  align-self: start !important;
  border: 1px solid rgba(202,174,255,.30) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.017) !important;
}
body[data-page="dashboard"] .youtube-card div { padding: 10px 11px 11px !important; }
body[data-page="dashboard"] .youtube-card h3 {
  font-size: .89rem !important;
  line-height: 1.24 !important;
  -webkit-line-clamp: 2 !important;
}
body[data-page="dashboard"] .youtube-card p { margin-top: 6px !important; }
body[data-page="dashboard"] .youtube-card[data-media-orientation="vertical"] > img {
  width: 100% !important;
  max-height: 230px !important;
  aspect-ratio: 9 / 16 !important;
  object-fit: cover !important;
}

@media (max-width: 759px) {
  body[data-page="dashboard"] .page-content {
    width: min(100% - 22px, 720px) !important;
    padding-top: 15px !important;
  }
  body[data-page="dashboard"] .dashboard-columns {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  body[data-page="dashboard"] .dashboard-column {
    display: grid !important;
    grid-template-rows: none !important;
    gap: 14px !important;
  }
  body[data-page="dashboard"] .metric-tabs { grid-template-columns: 1fr !important; }
  body[data-page="dashboard"] .metric-tab { min-height: 69px !important; }
  body[data-page="dashboard"] .chart-wrap,
  body[data-page="dashboard"] .chart-wrap svg {
    min-height: 176px !important;
    height: 176px !important;
    max-height: 176px !important;
  }
  body[data-page="dashboard"] .steam-profile {
    grid-template-columns: 78px minmax(0,1fr) !important;
    column-gap: 14px !important;
    min-height: 78px !important;
  }
  body[data-page="dashboard"] .steam-profile img {
    width: 78px !important;
    height: 78px !important;
  }
  body[data-page="dashboard"] .dashboard-steam-buttons,
  body[data-page="dashboard"] .info-pairs,
  body[data-page="dashboard"] .youtube-grid { grid-template-columns: 1fr !important; }
  body[data-page="dashboard"] .steam-panel::before { opacity: .5; }
}

/* The screenshot library is a full-width section after the three independent
   dashboard columns on every viewport. */
body[data-page="dashboard"] .home-screenshot-mount {
  width: 100% !important;
  margin-top: 30px !important;
}
@media (max-width: 759px) {
  body[data-page="dashboard"] .home-screenshot-mount { margin-top: 20px !important; }
}

/* ========================================================================== 
   v159 — GLOBAL SPACING CONTRACT
   RULE: every public block gets a real border, breathing room, and content-led
   height. No card, button, image, label, or inner border may be cropped.
   Presentation only: no API, Worker, D1, R2, project, heart, download, donation,
   language, screenshot, or page-data logic is changed here.
   ========================================================================== */

body[data-page] {
  --site-edge: clamp(18px, 2vw, 32px);
  --section-gap: clamp(16px, 1.25vw, 20px);
  --panel-pad-x: clamp(16px, 1.15vw, 20px);
  --panel-pad-y: clamp(16px, 1.05vw, 19px);
  --inner-gap: clamp(10px, .85vw, 14px);
  --inner-pad: clamp(13px, .95vw, 17px);
}

/* One outer rhythm on every public page. */
body[data-page] .page-content {
  width: min(1540px, calc(100% - (var(--site-edge) * 2))) !important;
  padding-top: clamp(18px, 1.6vw, 26px) !important;
  padding-bottom: clamp(44px, 4vw, 64px) !important;
}
body[data-page] .page-title-row {
  margin-bottom: var(--section-gap) !important;
}
body[data-page] .content-section,
body[data-page] .site-screenshot-page-mount,
body[data-page] .project-screenshot-mount {
  margin-top: var(--section-gap) !important;
}

/* All outer panels expand to their real content. */
body[data-page] .panel {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-color: rgba(202,174,255,.28) !important;
  background-clip: padding-box !important;
}
body[data-page] .panel-head {
  box-sizing: border-box !important;
  min-height: 56px !important;
  padding: 15px var(--panel-pad-x) !important;
  gap: var(--inner-gap) !important;
}
body[data-page] .panel-head h1,
body[data-page] .panel-head h2,
body[data-page] .panel-head h3 {
  min-width: 0 !important;
  line-height: 1.18 !important;
  overflow-wrap: anywhere;
}
body[data-page] .panel-body {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: var(--panel-pad-y) var(--panel-pad-x) !important;
  overflow: visible !important;
}
body[data-page] .panel-body > :first-child { margin-top: 0 !important; }
body[data-page] .panel-body > :last-child { margin-bottom: 0 !important; }

/* Every grid/stack follows the same space rhythm. */
body[data-page] .dashboard-top,
body[data-page] .dashboard-columns,
body[data-page] .dashboard-column,
body[data-page] .page-grid,
body[data-page] .copy-grid,
body[data-page] .column-stack,
body[data-page] .media-grid,
body[data-page] .playlist-grid,
body[data-page] .recommendations-grid,
body[data-page] .tool-link-grid,
body[data-page] .support-link-grid,
body[data-page] .tools-board,
body[data-page] .project-grid,
body[data-page] .project-grid-v4,
body[data-page] .project-showcase,
body[data-page] .support-action-grid,
body[data-page] .medal-grid,
body[data-page] .gallery-grid,
body[data-page] .cs2-link-card-grid,
body[data-page] .cs2-tool-grid,
body[data-page] .real-project-information,
body[data-page] .project-package-grid,
body[data-page] .project-verification-stats,
body[data-page] .cms-screenshot-grid {
  gap: var(--section-gap) !important;
}
body[data-page] .dashboard-columns { margin-top: var(--section-gap) !important; }
body[data-page] .dashboard-column { align-content: start !important; }

/* Inner blocks: real borders, consistent padding, no forced crop. */
body[data-page] :is(
  .metric,
  .metric-tab,
  .info-pairs > div,
  .copy-card,
  .recommendation-card,
  .tool-link-card,
  .support-link-card,
  .tool-card-pro,
  .project-grid > article,
  .project-card-v4,
  .project-feature,
  .project-overview-card,
  .project-info-panel,
  .project-package-panel,
  .project-verification-panel,
  .project-engagement,
  .project-qa,
  .support-action,
  .cs2-service-card,
  .cs2-link-card,
  .crosshair-card,
  .code-card,
  .real-project,
  .gallery-grid figure,
  .site-screenshot-gallery,
  .cms-screenshot-grid figure
) {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-color: rgba(202,174,255,.27) !important;
  background-clip: padding-box !important;
}

body[data-page] :is(
  .metric,
  .metric-tab,
  .info-pairs > div,
  .copy-card,
  .recommendation-card,
  .tool-link-card,
  .support-link-card,
  .tool-card-pro,
  .project-grid > article,
  .project-feature,
  .project-info-panel,
  .project-package-panel,
  .project-verification-panel,
  .project-engagement,
  .project-qa,
  .support-action,
  .cs2-service-card,
  .cs2-link-card,
  .crosshair-card,
  .code-card
) {
  padding: var(--inner-pad) !important;
}

/* Cards with an image keep the image edge-to-edge, but text never touches it. */
body[data-page] .media-card,
body[data-page] .playlist-card,
body[data-page] .youtube-card,
body[data-page] .project-card-v4,
body[data-page] .project-overview-card,
body[data-page] .gallery-grid figure,
body[data-page] .cms-screenshot-grid figure {
  overflow: hidden !important;
}
body[data-page] .media-card-copy,
body[data-page] .playlist-card-copy,
body[data-page] .youtube-card > div,
body[data-page] .project-body-v4,
body[data-page] .gallery-grid figcaption,
body[data-page] .cms-screenshot-grid figcaption {
  padding: var(--inner-pad) !important;
}

/* Text and controls must fit inside their own square. */
body[data-page] :is(
  .panel,
  .panel-body,
  .copy-card,
  .tool-card-copy,
  .project-body-v4,
  .media-card-copy,
  .playlist-card-copy,
  .youtube-card > div,
  .project-info-panel,
  .project-package-panel,
  .project-verification-panel
) :is(h1,h2,h3,h4,p,span,strong,small,li) {
  max-width: 100%;
  overflow-wrap: anywhere;
}
body[data-page] .button,
body[data-page] button,
body[data-page] input,
body[data-page] textarea,
body[data-page] select {
  box-sizing: border-box !important;
  max-width: 100%;
}
body[data-page] .button {
  min-height: 42px !important;
  padding: 9px 14px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}
body[data-page] :is(
  .button-row,
  .tool-actions,
  .project-actions-v4,
  .real-project-main-actions,
  .project-footer-actions,
  .project-qa-tools,
  .dialog-actions,
  .dashboard-steam-buttons
) {
  gap: var(--inner-gap) !important;
}

/* Dashboard: every square uses the same rule; nothing is forced to match a
   neighbour's height. */
body[data-page="dashboard"] .dashboard-column,
body[data-page="dashboard"] .dashboard-column > .panel,
body[data-page="dashboard"] .dashboard-columns .panel,
body[data-page="dashboard"] .steam-panel,
body[data-page="dashboard"] .analytics-panel,
body[data-page="dashboard"] .clips-panel,
body[data-page="dashboard"] .youtube-panel {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
body[data-page="dashboard"] .dashboard-column {
  grid-template-rows: none !important;
}
body[data-page="dashboard"] .dashboard-columns .panel-body {
  padding: var(--panel-pad-y) var(--panel-pad-x) !important;
}
body[data-page="dashboard"] .mini-list,
body[data-page="dashboard"] .steam-card,
body[data-page="dashboard"] .game-mix,
body[data-page="dashboard"] .community-list {
  gap: var(--inner-gap) !important;
}
body[data-page="dashboard"] .mini-media {
  min-height: 76px !important;
  padding: 9px !important;
  gap: 13px !important;
  border: 1px solid rgba(202,174,255,.13) !important;
}
body[data-page="dashboard"] .metric-tabs {
  gap: var(--inner-gap) !important;
  margin-bottom: var(--inner-gap) !important;
}
body[data-page="dashboard"] .metric-tab {
  min-height: 82px !important;
  padding: 12px 13px !important;
  overflow: visible !important;
}
body[data-page="dashboard"] .analytics-panel .panel-body {
  padding-bottom: 18px !important;
}
body[data-page="dashboard"] .chart-wrap,
body[data-page="dashboard"] .chart-wrap svg {
  width: 100% !important;
  min-height: 176px !important;
  height: 176px !important;
  max-height: 176px !important;
  margin: 0 !important;
  overflow: visible !important;
}
body[data-page="dashboard"] .steam-panel .panel-body {
  padding: 20px !important;
}
body[data-page="dashboard"] .steam-card { gap: 17px !important; }
body[data-page="dashboard"] .steam-profile {
  grid-template-columns: 90px minmax(0,1fr) !important;
  gap: 18px !important;
  min-height: 90px !important;
}
body[data-page="dashboard"] .steam-profile img {
  width: 90px !important;
  height: 90px !important;
}
body[data-page="dashboard"] .info-pairs { gap: 12px !important; }
body[data-page="dashboard"] .info-pairs > div {
  min-height: 66px !important;
  padding: 12px 13px !important;
}
body[data-page="dashboard"] .dashboard-steam-buttons {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  width: 100% !important;
  margin: 0 !important;
}
body[data-page="dashboard"] .dashboard-steam-buttons .button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
}
body[data-page="dashboard"] .youtube-grid { gap: 12px !important; }
body[data-page="dashboard"] .youtube-card > div { padding: 11px 12px 13px !important; }
body[data-page="dashboard"] .community-person,
body[data-page="dashboard"] .clip-category-row {
  box-sizing: border-box !important;
  min-height: 58px !important;
  padding: 9px 3px !important;
}

/* Screenshot cards follow the same spacing rule while preserving the width,
   orientation, fit, and independent length controls added previously. */
body[data-page] .site-screenshot-gallery .panel-body {
  padding: var(--panel-pad-y) var(--panel-pad-x) !important;
}
body[data-page] .cms-screenshot-grid figure figcaption {
  min-height: 0 !important;
  padding: 13px 14px 15px !important;
}

@media (max-width: 900px) {
  body[data-page] {
    --site-edge: 15px;
    --section-gap: 15px;
    --panel-pad-x: 16px;
    --panel-pad-y: 16px;
    --inner-pad: 14px;
  }
  body[data-page] .page-content {
    width: calc(100% - (var(--site-edge) * 2)) !important;
  }
}

@media (max-width: 560px) {
  body[data-page] {
    --site-edge: 11px;
    --section-gap: 13px;
    --panel-pad-x: 14px;
    --panel-pad-y: 14px;
    --inner-pad: 13px;
  }
  body[data-page] .panel-head {
    min-height: 52px !important;
    padding: 13px 14px !important;
  }
  body[data-page="dashboard"] .steam-profile {
    grid-template-columns: 76px minmax(0,1fr) !important;
    gap: 14px !important;
    min-height: 76px !important;
  }
  body[data-page="dashboard"] .steam-profile img {
    width: 76px !important;
    height: 76px !important;
  }
  body[data-page="dashboard"] .dashboard-steam-buttons,
  body[data-page="dashboard"] .info-pairs,
  body[data-page="dashboard"] .youtube-grid,
  body[data-page="dashboard"] .metric-tabs {
    grid-template-columns: 1fr !important;
  }
  body[data-page="dashboard"] .chart-wrap,
  body[data-page="dashboard"] .chart-wrap svg {
    min-height: 168px !important;
    height: 168px !important;
    max-height: 168px !important;
  }
}


/* ========================================================================== 
   v161 — FINAL VISUAL/DATA CONTRACT
   - the gap between every neighbouring square is the same;
   - the analytics card is compact, but its labels remain readable;
   - live recommendations always have a visible live border;
   - no content is cropped and no API/project/screenshot behavior is removed.
   ========================================================================== */

body[data-page] {
  --site-edge: clamp(18px, 1.8vw, 30px);
  --section-gap: 18px;
  --inner-gap: 12px;
}

body[data-page] :is(
  .dashboard-top,
  .dashboard-columns,
  .dashboard-column,
  .recommendations-grid,
  .support-action-grid,
  .tools-board,
  .project-grid,
  .project-grid-v4,
  .media-grid,
  .playlist-grid,
  .youtube-grid,
  .gallery-grid,
  .copy-grid,
  .sponsor-layout
) {
  gap: var(--section-gap) !important;
}

body[data-page] .content-section,
body[data-page="dashboard"] .dashboard-columns,
body[data-page="dashboard"] .home-screenshot-mount {
  margin-top: var(--section-gap) !important;
}

/* Support cards use exactly the same horizontal and vertical distance. */
body[data-page="support"] .support-action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}
body[data-page="support"] .support-action {
  width: 100% !important;
  min-height: 0 !important;
  padding: 20px !important;
  gap: 16px !important;
}

/* Four truthful metrics: two Twitch, YouTube uploads represented by the graph,
   and the separate official channel lifetime total. */
body[data-page="dashboard"] .metric-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--inner-gap) !important;
  margin-bottom: 10px !important;
}
body[data-page="dashboard"] .metric-tab {
  min-height: 72px !important;
  padding: 10px 11px !important;
  border: 1px solid rgba(202,174,255,.30) !important;
  border-radius: 10px !important;
  overflow: visible !important;
}
body[data-page="dashboard"] .metric-tab strong {
  margin: 2px 0 !important;
  font-size: clamp(1.15rem, 1.45vw, 1.34rem) !important;
  line-height: 1.06 !important;
}
body[data-page="dashboard"] .metric-tab span,
body[data-page="dashboard"] .metric-tab small {
  line-height: 1.16 !important;
}
body[data-page="dashboard"] .metric-tab-total {
  cursor: default !important;
  background: linear-gradient(135deg, rgba(93,39,150,.18), rgba(255,255,255,.02)) !important;
}
body[data-page="dashboard"] .analytics-panel .panel-body {
  padding: 14px 16px 15px !important;
}
body[data-page="dashboard"] .chart-wrap,
body[data-page="dashboard"] .chart-wrap svg {
  width: 100% !important;
  min-height: 132px !important;
  height: 132px !important;
  max-height: 132px !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* The latest YouTube panel must not create a giant empty hole below the two
   shorter cards in the same dashboard row. */
@media (min-width: 1180px) {
  body[data-page="dashboard"] .youtube-card > img {
    height: 88px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }
  body[data-page="dashboard"] .youtube-card > div {
    padding: 9px 10px 10px !important;
  }
  body[data-page="dashboard"] .youtube-card h3 {
    font-size: .84rem !important;
    line-height: 1.18 !important;
    -webkit-line-clamp: 2 !important;
  }
  body[data-page="dashboard"] .youtube-card p {
    margin-top: 4px !important;
    font-size: .72rem !important;
  }
}

/* Live status must be visually unmistakable on both the full recommendations
   page and the five-person homepage list. This comes after the global border
   rule so it cannot be overwritten again. */
body[data-page="recommendations"] .recommendation-card.live,
body[data-page="recommendations"] .recommendation-card.live:hover {
  border: 2px solid #ff4f9a !important;
  background: linear-gradient(135deg, rgba(255,79,154,.11), rgba(121,48,210,.08), var(--panel)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.035), 0 0 24px rgba(255,79,154,.20) !important;
}
body[data-page="recommendations"] .recommendation-card.live::after {
  content: "LIVE";
  position: absolute;
  top: 10px;
  right: 11px;
  padding: 3px 7px;
  border: 1px solid rgba(255,110,170,.75);
  border-radius: 999px;
  background: rgba(38,8,24,.92);
  color: #ff83b8;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .06em;
}
body[data-page="recommendations"] .recommendation-card {
  position: relative !important;
}
body[data-page="dashboard"] .community-person.is-live {
  margin: 2px 0 !important;
  padding: 7px 8px !important;
  border: 1px solid rgba(255,79,154,.76) !important;
  border-radius: 9px !important;
  background: linear-gradient(90deg, rgba(255,79,154,.09), transparent 70%) !important;
  box-shadow: inset 3px 0 0 #ff4f9a, 0 0 15px rgba(255,79,154,.09) !important;
}

@media (max-width: 1179px) {
  body[data-page="dashboard"] .metric-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body[data-page="dashboard"] .chart-wrap,
  body[data-page="dashboard"] .chart-wrap svg {
    min-height: 148px !important;
    height: 148px !important;
    max-height: 148px !important;
  }
}
@media (max-width: 760px) {
  body[data-page="support"] .support-action-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 560px) {
  body[data-page="dashboard"] .metric-tabs {
    grid-template-columns: 1fr !important;
  }
}


/* v169 — real platform audience data + media containers that match content shape. */
body[data-page="dashboard"] .platform-audience-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0 0 12px;
}
body[data-page="dashboard"] .audience-stat {
  display:flex;
  min-width:0;
  min-height:78px;
  flex-direction:column;
  justify-content:center;
  padding:12px 14px;
  border:1px solid rgba(202,174,255,.28);
  border-radius:10px;
  background:rgba(255,255,255,.025);
}
body[data-page="dashboard"] .audience-stat small {
  color:#cf8cff;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body[data-page="dashboard"] .audience-stat strong { margin:3px 0 1px; font-size:1.42rem; line-height:1; }
body[data-page="dashboard"] .audience-stat span { color:var(--soft); font-size:.76rem; line-height:1.25; }
body[data-page="dashboard"] .audience-stat-pending { border-style:dashed; opacity:.78; }
body[data-page="dashboard"] .audience-stat.is-unavailable strong { color:var(--soft); }

/* The outer card follows the actual orientation: never a landscape shell around portrait media. */
.media-grid-shorts {
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(178px,220px)) !important;
  align-items:start !important;
  justify-content:start !important;
  gap:14px !important;
}
.media-grid-shorts .media-card,
.media-card.media-card-vertical,
.media-card[data-media-orientation="vertical"],
.youtube-card.youtube-card-short,
.youtube-card[data-media-orientation="vertical"] {
  width:100% !important;
  max-width:220px !important;
  align-self:start !important;
}
.media-grid-shorts .media-card > img,
.media-card.media-card-vertical > img,
.media-card[data-media-orientation="vertical"] > img,
.youtube-card.youtube-card-short > img,
.youtube-card[data-media-orientation="vertical"] > img {
  width:100% !important;
  aspect-ratio:9/16 !important;
  object-fit:cover !important;
}
.media-grid-videos .media-card,
.media-card.media-card-horizontal,
.media-card[data-media-orientation="horizontal"] {
  width:100% !important;
  max-width:none !important;
}
.media-grid-videos .media-card > img,
.media-card.media-card-horizontal > img,
.media-card[data-media-orientation="horizontal"] > img {
  aspect-ratio:16/9 !important;
}
@media (max-width:760px) {
  body[data-page="dashboard"] .platform-audience-stats { grid-template-columns:1fr; }
  .media-grid-shorts { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .media-grid-shorts .media-card { max-width:none !important; }
}
@media (max-width:430px) {
  .media-grid-shorts { grid-template-columns:1fr !important; }
  .media-grid-shorts .media-card { width:min(100%,220px) !important; }
}


/* v170 — restore the clean homepage composition and keep platform audience
   information beneath the graph instead of adding another row of statistic boxes. */
body[data-page="dashboard"] .page-content{width:min(1500px,calc(100% - 48px))!important;padding-top:22px!important}
body[data-page="dashboard"] .page-title-row{margin-bottom:18px!important}
body[data-page="dashboard"] .dashboard-top{grid-template-columns:minmax(360px,5fr) minmax(560px,7fr)!important;gap:16px!important}
body[data-page="dashboard"] .dashboard-columns{grid-template-columns:minmax(300px,.9fr) minmax(520px,1.45fr) minmax(300px,.9fr)!important;gap:16px!important;align-items:start!important}
body[data-page="dashboard"] .dashboard-column{gap:16px!important}
body[data-page="dashboard"] .panel-head{min-height:52px!important;padding:14px 16px!important}
body[data-page="dashboard"] .panel-body{padding:16px!important}

/* Recent clips return to the readable compact thumbnail-left list. */
body[data-page="dashboard"] .clips-panel .panel-body{padding:10px 12px 13px!important}
body[data-page="dashboard"] .mini-list{display:grid!important;gap:8px!important}
body[data-page="dashboard"] .mini-media{display:grid!important;grid-template-columns:104px minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important;min-height:78px!important;padding:8px!important;border:1px solid rgba(202,174,255,.16)!important;border-radius:9px!important;background:rgba(255,255,255,.018)!important}
body[data-page="dashboard"] .mini-media img{width:104px!important;height:58px!important;aspect-ratio:16/9!important;object-fit:cover!important;border-radius:7px!important}
body[data-page="dashboard"] .mini-media h3{margin:2px 0 3px!important;font-size:.94rem!important;line-height:1.16!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
body[data-page="dashboard"] .mini-media p,body[data-page="dashboard"] .mini-media small{font-size:.72rem!important;line-height:1.25!important}

/* Restore the balanced profile and Steam composition. */
body[data-page="dashboard"] .profile-layout{grid-template-columns:96px minmax(0,1fr)!important;gap:20px!important;align-items:center!important}
body[data-page="dashboard"] .profile-avatar-wrap,body[data-page="dashboard"] .profile-avatar{width:96px!important;height:96px!important}
body[data-page="dashboard"] .profile-copy h2{font-size:1.8rem!important;line-height:1!important}
body[data-page="dashboard"] .steam-profile{grid-template-columns:82px minmax(0,1fr)!important;gap:17px!important;align-items:center!important}
body[data-page="dashboard"] .steam-profile img{width:82px!important;height:82px!important}
body[data-page="dashboard"] .dashboard-steam-buttons{grid-template-columns:1fr 1fr!important}

/* One compact statistics row, one readable graph, audience totals below it. */
body[data-page="dashboard"] .analytics-panel .panel-body{padding:14px 16px 16px!important}
body[data-page="dashboard"] .metric-tabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;margin:0 0 10px!important}
body[data-page="dashboard"] .metric-tab{min-height:82px!important;padding:12px!important;border-radius:9px!important}
body[data-page="dashboard"] .metric-tab strong{font-size:1.45rem!important}
body[data-page="dashboard"] .chart-wrap{width:100%!important;height:164px!important;min-height:164px!important;margin:0!important;padding:0 2px!important}
body[data-page="dashboard"] .chart-wrap svg{width:100%!important;height:164px!important;min-height:164px!important;max-height:164px!important}
body[data-page="dashboard"] .platform-audience-stats{display:none!important}
body[data-page="dashboard"] .platform-audience-inline{display:flex!important;align-items:stretch!important;justify-content:center!important;gap:0!important;margin-top:11px!important;padding-top:11px!important;border-top:1px solid rgba(202,174,255,.14)!important}
body[data-page="dashboard"] .platform-audience-item{display:flex!important;align-items:center!important;gap:9px!important;min-width:0!important;padding:0 18px!important}
body[data-page="dashboard"] .platform-audience-item+.platform-audience-item{border-left:1px solid rgba(202,174,255,.14)!important}
body[data-page="dashboard"] .platform-icon{display:grid!important;place-items:center!important;width:28px!important;height:28px!important;flex:0 0 28px!important;border:1px solid rgba(202,174,255,.28)!important;border-radius:50%!important;font-size:.76rem!important;font-weight:800!important;background:rgba(255,255,255,.035)!important}
body[data-page="dashboard"] .platform-audience-item.twitch .platform-icon{color:#bf8cff!important}
body[data-page="dashboard"] .platform-audience-item.youtube .platform-icon{color:#ff5e79!important}
body[data-page="dashboard"] .platform-audience-item.tiktok .platform-icon{color:#75f2ef!important}
body[data-page="dashboard"] .platform-audience-copy{display:grid!important;min-width:0!important;line-height:1.05!important}
body[data-page="dashboard"] .platform-audience-copy small{color:var(--muted)!important;font-size:.62rem!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.07em!important}
body[data-page="dashboard"] .platform-audience-copy strong{font-size:1.02rem!important;line-height:1.1!important}
body[data-page="dashboard"] .platform-audience-copy span{color:var(--soft)!important;font-size:.62rem!important;white-space:nowrap!important}
body[data-page="dashboard"] .platform-audience-item.pending{opacity:.68!important}

/* No decorative character is allowed to sit over the graph or its labels. */
body[data-page="dashboard"] .analytics-panel::before{display:none!important}

/* Latest YouTube cards stay landscape here; portrait uploads belong to Shorts pages. */
body[data-page="dashboard"] .youtube-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
body[data-page="dashboard"] .youtube-card{max-width:none!important}
body[data-page="dashboard"] .youtube-card>img{aspect-ratio:16/9!important;height:auto!important;object-fit:cover!important}

@media(max-width:1180px){body[data-page="dashboard"] .dashboard-columns{grid-template-columns:1fr 1.35fr!important}body[data-page="dashboard"] .dashboard-column:last-child{grid-column:1/-1!important;display:grid!important;grid-template-columns:1fr 1fr!important}}
@media(max-width:900px){body[data-page="dashboard"] .page-content{width:min(100% - 28px,900px)!important}body[data-page="dashboard"] .dashboard-top,body[data-page="dashboard"] .dashboard-columns{grid-template-columns:1fr!important}body[data-page="dashboard"] .dashboard-column:last-child{grid-column:auto!important;display:grid!important;grid-template-columns:1fr!important}body[data-page="dashboard"] .platform-audience-inline{flex-wrap:wrap!important;row-gap:10px!important}body[data-page="dashboard"] .platform-audience-item{padding:0 12px!important}}
@media(max-width:620px){body[data-page="dashboard"] .metric-tabs{grid-template-columns:1fr 1fr!important}body[data-page="dashboard"] .mini-media{grid-template-columns:92px minmax(0,1fr)!important}body[data-page="dashboard"] .mini-media>time,body[data-page="dashboard"] .mini-media>.mini-date{display:none!important}body[data-page="dashboard"] .platform-audience-inline{display:grid!important;grid-template-columns:1fr!important}body[data-page="dashboard"] .platform-audience-item{padding:8px 0!important}body[data-page="dashboard"] .platform-audience-item+.platform-audience-item{border-left:0!important;border-top:1px solid rgba(202,174,255,.12)!important}}


/* v171 — strict dashboard row alignment.
   The three former columns participate in the same two grid rows, so the
   upper and lower cards share exact top/bottom edges and the screenshot
   section begins immediately after the finished dashboard. */
body[data-page="dashboard"] .dashboard-columns{
  display:grid!important;
  grid-template-columns:minmax(300px,.9fr) minmax(520px,1.45fr) minmax(300px,.9fr)!important;
  grid-template-rows:auto auto!important;
  gap:16px!important;
  align-items:stretch!important;
  margin-bottom:16px!important;
}
body[data-page="dashboard"] .dashboard-columns>.dashboard-column{display:contents!important}
body[data-page="dashboard"] .clips-panel{grid-column:1!important;grid-row:1!important;height:100%!important}
body[data-page="dashboard"] .steam-panel{grid-column:1!important;grid-row:2!important;height:100%!important}
body[data-page="dashboard"] .analytics-panel{grid-column:2!important;grid-row:1!important;height:100%!important}
body[data-page="dashboard"] .games-panel{grid-column:2!important;grid-row:2!important;height:100%!important}
body[data-page="dashboard"] .community-panel{grid-column:3!important;grid-row:1!important;height:100%!important}
body[data-page="dashboard"] .youtube-panel{grid-column:3!important;grid-row:2!important;height:100%!important}
body[data-page="dashboard"] .clips-panel .panel-body,
body[data-page="dashboard"] .analytics-panel .panel-body,
body[data-page="dashboard"] .community-panel .panel-body,
body[data-page="dashboard"] .steam-panel .panel-body,
body[data-page="dashboard"] .games-panel .panel-body,
body[data-page="dashboard"] .youtube-panel .panel-body{height:100%!important;box-sizing:border-box!important}
body[data-page="dashboard"] .home-screenshot-mount{margin-top:0!important;padding-top:0!important}
body[data-page="dashboard"] .site-screenshot-page-mount:empty{display:none!important}
@media(max-width:1180px){
 body[data-page="dashboard"] .dashboard-columns{grid-template-columns:1fr 1.35fr!important;grid-template-rows:auto auto auto!important}
 body[data-page="dashboard"] .clips-panel{grid-column:1!important;grid-row:1!important}
 body[data-page="dashboard"] .analytics-panel{grid-column:2!important;grid-row:1!important}
 body[data-page="dashboard"] .steam-panel{grid-column:1!important;grid-row:2!important}
 body[data-page="dashboard"] .games-panel{grid-column:2!important;grid-row:2!important}
 body[data-page="dashboard"] .community-panel{grid-column:1!important;grid-row:3!important}
 body[data-page="dashboard"] .youtube-panel{grid-column:2!important;grid-row:3!important}
}
@media(max-width:900px){
 body[data-page="dashboard"] .dashboard-columns{grid-template-columns:1fr!important;grid-template-rows:auto!important}
 body[data-page="dashboard"] .dashboard-columns>.dashboard-column{display:contents!important}
 body[data-page="dashboard"] .clips-panel,
 body[data-page="dashboard"] .analytics-panel,
 body[data-page="dashboard"] .community-panel,
 body[data-page="dashboard"] .steam-panel,
 body[data-page="dashboard"] .games-panel,
 body[data-page="dashboard"] .youtube-panel{grid-column:1!important;grid-row:auto!important}
}

/* ========================================================================== 
   v172 — strict dashboard row alignment and compact section rhythm.
   One actual grid controls the six dashboard panels. This guarantees that
   every panel in a row shares the same top and bottom line at every desktop
   width, while content is never cropped.
   ========================================================================== */
@media (min-width: 1180px) {
  body[data-page="dashboard"]:not(.cms-edit-mode) .dashboard-columns {
    display: grid !important;
    grid-template-columns: minmax(330px,.92fr) minmax(560px,1.45fr) minmax(330px,.92fr) !important;
    grid-template-areas:
      "clips analytics community"
      "steam games youtube" !important;
    grid-auto-rows: auto !important;
    column-gap: 18px !important;
    row-gap: 18px !important;
    align-items: stretch !important;
    margin-top: 18px !important;
  }
  body[data-page="dashboard"]:not(.cms-edit-mode) .dashboard-column {
    display: contents !important;
  }
  body[data-page="dashboard"]:not(.cms-edit-mode) .clips-panel { grid-area: clips !important; }
  body[data-page="dashboard"]:not(.cms-edit-mode) .analytics-panel { grid-area: analytics !important; }
  body[data-page="dashboard"]:not(.cms-edit-mode) .community-panel { grid-area: community !important; }
  body[data-page="dashboard"]:not(.cms-edit-mode) .steam-panel { grid-area: steam !important; }
  body[data-page="dashboard"]:not(.cms-edit-mode) .games-panel { grid-area: games !important; }
  body[data-page="dashboard"]:not(.cms-edit-mode) .youtube-panel { grid-area: youtube !important; }

  body[data-page="dashboard"]:not(.cms-edit-mode) .dashboard-columns > .dashboard-column > .panel,
  body[data-page="dashboard"]:not(.cms-edit-mode) .dashboard-columns .panel {
    height: 100% !important;
    min-height: 0 !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body[data-page="dashboard"]:not(.cms-edit-mode) .dashboard-columns .panel > .panel-body {
    flex: 1 1 auto !important;
  }
  body[data-page="dashboard"]:not(.cms-edit-mode) .home-screenshot-mount {
    width: 100% !important;
    margin: 18px 0 0 !important;
  }
}

/* Compact, consistent vertical rhythm outside the dashboard grid. */
body[data-page="dashboard"] .home-screenshot-mount,
body[data-page="dashboard"] [data-site-screenshots] {
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}
body[data-page="dashboard"] .home-screenshot-mount + .content-section,
body[data-page="dashboard"] [data-site-screenshots] + .content-section {
  margin-top: 18px !important;
}

/* Keep the audience row as a compact footer inside the graph panel. */
body[data-page="dashboard"] .platform-audience-inline {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 10px !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(202,174,255,.18) !important;
}
body[data-page="dashboard"] .platform-audience-item {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 8px !important;
  border: 1px solid rgba(202,174,255,.12) !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.012) !important;
}
body[data-page="dashboard"] .platform-audience-item .platform-icon {
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  border: 1px solid rgba(202,174,255,.28) !important;
}
body[data-page="dashboard"] .platform-audience-copy {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  column-gap: 6px !important;
  align-items: baseline !important;
}
body[data-page="dashboard"] .platform-audience-copy small { grid-column: 1; }
body[data-page="dashboard"] .platform-audience-copy strong { grid-column: 2; font-size: 1rem !important; }
body[data-page="dashboard"] .platform-audience-copy > span { grid-column: 1 / -1; opacity: .72; }

@media (max-width: 760px) {
  body[data-page="dashboard"] .platform-audience-inline { grid-template-columns: 1fr !important; }
}

/* ========================================================================== 
   v173 — balanced dashboard proportions after live review.
   The left profile/Steam column is intentionally stronger, the right utility
   column is slimmer, and all six cards still share exact row boundaries.
   ========================================================================== */
@media (min-width:1180px){
  body[data-page="dashboard"] .page-content{
    width:min(1680px,calc(100% - 44px))!important;
  }
  body[data-page="dashboard"] .dashboard-top{
    grid-template-columns:minmax(430px,1.02fr) minmax(650px,1.58fr)!important;
    gap:18px!important;
  }
  body[data-page="dashboard"]:not(.cms-edit-mode) .dashboard-columns{
    grid-template-columns:minmax(380px,1.04fr) minmax(620px,1.58fr) minmax(270px,.76fr)!important;
    column-gap:18px!important;
    row-gap:18px!important;
    margin-top:18px!important;
    margin-bottom:0!important;
  }
  body[data-page="dashboard"] .steam-panel .panel-body{
    padding:18px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    gap:16px!important;
  }
  body[data-page="dashboard"] .steam-profile{
    grid-template-columns:98px minmax(0,1fr)!important;
    gap:20px!important;
  }
  body[data-page="dashboard"] .steam-profile img{
    width:98px!important;
    height:98px!important;
  }
  body[data-page="dashboard"] .steam-profile h3{font-size:1.36rem!important;line-height:1.1!important}
  body[data-page="dashboard"] .info-pairs{gap:12px!important}
  body[data-page="dashboard"] .info-pairs>div{min-height:86px!important;padding:15px!important}
  body[data-page="dashboard"] .dashboard-steam-buttons{gap:12px!important}
  body[data-page="dashboard"] .dashboard-steam-buttons .button{min-height:52px!important;padding:13px 12px!important}

  body[data-page="dashboard"] .games-panel .panel-body{
    display:flex!important;
    align-items:center!important;
    padding:18px!important;
  }
  body[data-page="dashboard"] .games-panel .game-mix{width:100%!important}

  body[data-page="dashboard"] .community-panel .panel-body,
  body[data-page="dashboard"] .youtube-panel .panel-body{padding:12px!important}
  body[data-page="dashboard"] .community-list{gap:0!important}
  body[data-page="dashboard"] .community-item{padding:10px 6px!important}
  body[data-page="dashboard"] .youtube-grid{grid-template-columns:1fr!important;gap:10px!important}
  body[data-page="dashboard"] .youtube-card{
    display:grid!important;
    grid-template-columns:112px minmax(0,1fr)!important;
    min-height:78px!important;
  }
  body[data-page="dashboard"] .youtube-card>img{
    width:112px!important;
    height:100%!important;
    min-height:78px!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
  }
  body[data-page="dashboard"] .youtube-card>div{padding:9px!important}
  body[data-page="dashboard"] .youtube-card h3{-webkit-line-clamp:2!important;font-size:.82rem!important}

  body[data-page="dashboard"] .home-screenshot-mount,
  body[data-page="dashboard"] [data-site-screenshots]{margin-top:14px!important}
}

/* The platform totals are a quiet caption under the graph, not separate cards. */
body[data-page="dashboard"] .platform-audience-inline{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:22px!important;
  padding:10px 0 0!important;
  margin-top:10px!important;
  border-top:1px solid rgba(202,174,255,.16)!important;
}
body[data-page="dashboard"] .platform-audience-item{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
body[data-page="dashboard"] .platform-audience-item+.platform-audience-item{border-left:0!important}
body[data-page="dashboard"] .platform-audience-item .platform-icon{
  width:25px!important;height:25px!important;flex:0 0 25px!important;
  border-radius:50%!important;
}
body[data-page="dashboard"] .platform-audience-copy{
  display:grid!important;
  grid-template-columns:auto auto!important;
  column-gap:5px!important;
  align-items:baseline!important;
}
body[data-page="dashboard"] .platform-audience-copy small{grid-column:1!important}
body[data-page="dashboard"] .platform-audience-copy strong{grid-column:2!important;font-size:.94rem!important}
body[data-page="dashboard"] .platform-audience-copy>span{grid-column:1/-1!important;font-size:.58rem!important}
@media(max-width:760px){body[data-page="dashboard"] .platform-audience-inline{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}}


/* v177: strict aligned dashboard with a larger Steam profile, slimmer content/right columns,
   and one honest overlaid three-series graph. */
@media (min-width:1181px){
 body[data-page="dashboard"]:not(.cms-edit-mode) .dashboard-main-grid{
   grid-template-columns:minmax(360px,1.18fr) minmax(520px,1.55fr) minmax(280px,.78fr)!important;
   grid-template-areas:"clips analytics community" "steam games youtube"!important;
   align-items:stretch!important; gap:16px!important;
 }
 body[data-page="dashboard"] .steam-panel{min-height:410px!important}
 body[data-page="dashboard"] .games-panel{min-height:410px!important}
 body[data-page="dashboard"] .youtube-panel{min-height:410px!important}
}
body[data-page="dashboard"] .steam-card{display:flex!important;flex-direction:column!important;height:100%!important;padding:22px!important;gap:18px!important}
body[data-page="dashboard"] .steam-profile{display:grid!important;grid-template-columns:112px 1fr!important;align-items:center!important;gap:20px!important}
body[data-page="dashboard"] .steam-profile img{width:112px!important;height:112px!important;border-radius:18px!important}
body[data-page="dashboard"] .steam-profile h3{font-size:1.65rem!important;margin:0 0 4px!important}
body[data-page="dashboard"] .steam-card .info-pairs{margin-top:auto!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
body[data-page="dashboard"] .steam-card .info-pairs>div{min-height:84px!important;padding:15px!important}
body[data-page="dashboard"] .dashboard-steam-buttons{grid-template-columns:1fr 1.15fr!important;margin-top:0!important}
body[data-page="dashboard"] .analytics-panel .metric-tab{cursor:default!important}
body[data-page="dashboard"] .analytics-panel .metric-tab:disabled{opacity:1!important}
body[data-page="dashboard"] .chart-wrap{min-height:260px!important}
body[data-page="dashboard"] [data-performance-chart]{width:100%!important;height:300px!important;display:block!important}
body[data-page="dashboard"] .games-panel .panel-body{padding:10px 18px!important}
body[data-page="dashboard"] .content-category-row{min-height:64px!important}
body[data-page="dashboard"] .youtube-panel .youtube-card{grid-template-columns:112px 1fr!important;min-height:86px!important}
body[data-page="dashboard"] .screenshots-panel{margin-top:16px!important}

/* v182 targeted dashboard repair: compact graph, larger Steam, balanced columns */
body[data-page="dashboard"] .dashboard-columns{grid-template-columns:minmax(390px,1.14fr) minmax(500px,1.28fr) minmax(285px,.78fr)!important;gap:16px!important}
body[data-page="dashboard"] [data-chart-metric]{min-height:82px!important;padding:14px 16px!important}
body[data-page="dashboard"] .chart-wrap{height:132px!important;min-height:132px!important;max-height:132px!important;margin-top:6px!important}
body[data-page="dashboard"] [data-performance-chart],body[data-page="dashboard"] .chart-wrap svg{height:132px!important;min-height:132px!important;max-height:132px!important}
body[data-page="dashboard"] .steam-profile{grid-template-columns:132px minmax(0,1fr)!important;gap:22px!important;min-height:150px!important}
body[data-page="dashboard"] .steam-profile img{width:132px!important;height:132px!important;border-radius:20px!important}
body[data-page="dashboard"] .steam-profile h3{font-size:1.75rem!important}
body[data-page="dashboard"] [data-steam-panel] .panel-body{padding:20px!important}
@media(max-width:1180px){body[data-page="dashboard"] .dashboard-columns{grid-template-columns:1fr 1.25fr!important}}
@media(max-width:900px){body[data-page="dashboard"] .dashboard-columns{grid-template-columns:1fr!important}body[data-page="dashboard"] .steam-profile{grid-template-columns:96px 1fr!important}body[data-page="dashboard"] .steam-profile img{width:96px!important;height:96px!important}}

/* ========================================================================== 
   v183 — compact, usable visual builder + compact screenshot library.
   Keeps the real page preview large enough to judge while preventing the
   admin interface and screenshot cards from consuming the whole screen.
   ========================================================================== */
.site-admin-shell{width:min(1480px,calc(100% - 28px))!important}
.cms-builder-workspace-visual{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(330px,390px)!important;
  gap:16px!important;
  align-items:start!important;
}
.cms-builder-workspace-visual .cms-builder-preview-wrap{grid-column:1!important}
.cms-builder-workspace-visual .cms-builder-inspector{grid-column:2!important;position:sticky;top:14px;max-height:calc(100vh - 28px);overflow:auto}
.cms-builder-preview-viewport{padding:10px!important;max-height:780px!important}
.cms-admin-builder-panel[data-editor-view="horizontal"] .cms-builder-preview-wrap iframe{width:1280px!important;height:720px!important}
.cms-admin-builder-panel[data-editor-view="vertical"] .cms-builder-preview-wrap iframe{width:390px!important;height:760px!important}
.cms-selected-frame-controls,.cms-screenshot-template-inspector{padding:12px!important}
.cms-screenshot-shape-grid,.cms-screenshot-width-grid,.cms-screenshot-length-grid{gap:7px!important}
.cms-screenshot-shape-grid button,.cms-screenshot-width-grid button,.cms-screenshot-length-grid button{min-height:68px!important;padding:8px!important}
.cms-screenshot-shape-grid small,.cms-screenshot-width-grid small,.cms-screenshot-length-grid small{font-size:.65rem!important}

/* Screenshot library: compact cards instead of one huge full-width row each. */
[data-screenshot-list].site-admin-media-list{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:start!important;
}
[data-screenshot-list] .site-admin-media-item{
  grid-template-columns:108px minmax(0,1fr)!important;
  gap:10px!important;
  min-height:106px!important;
  padding:10px!important;
  align-items:start!important;
}
[data-screenshot-list] .site-admin-media-item>img{
  width:108px!important;
  height:78px!important;
  object-fit:contain!important;
  border-radius:7px!important;
}
[data-screenshot-list] .site-admin-item-top{gap:8px!important}
[data-screenshot-list] .site-admin-item p{font-size:.75rem!important;line-height:1.35!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
[data-screenshot-list] .site-admin-item small{font-size:.66rem!important}
[data-screenshot-list] .site-admin-item-actions{gap:6px!important;margin-top:2px!important}
[data-screenshot-list] .site-admin-item-actions .button{padding:7px 9px!important;font-size:.72rem!important}

/* Screenshot picker previews are also intentionally small. */
.site-screenshot-group-picker{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;max-height:360px!important}
.site-screenshot-group-choice{grid-template-columns:auto 58px minmax(0,1fr)!important;min-height:70px!important;padding:6px!important}
.site-screenshot-group-choice img{width:58px!important;height:52px!important}
.site-screenshot-group-live-preview-stage{max-height:300px!important;overflow:auto!important}
.site-screenshot-group-live-preview-grid img{max-height:210px!important}

@media(max-width:1180px){
  .cms-builder-workspace-visual{grid-template-columns:1fr!important}
  .cms-builder-workspace-visual .cms-builder-preview-wrap,.cms-builder-workspace-visual .cms-builder-inspector{grid-column:1!important}
  .cms-builder-workspace-visual .cms-builder-inspector{position:static;max-height:none}
  [data-screenshot-list].site-admin-media-list,.site-screenshot-group-picker{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:720px){
  [data-screenshot-list].site-admin-media-list,.site-screenshot-group-picker{grid-template-columns:1fr!important}
  [data-screenshot-list] .site-admin-media-item{grid-template-columns:88px minmax(0,1fr)!important}
  [data-screenshot-list] .site-admin-media-item>img{width:88px!important;height:68px!important}
}

/* ========================================================================== 
   v184 cumulative repair — compact analytics, stronger Steam column,
   aligned dashboard rows, compact admin controls. No data/API contracts changed.
   ========================================================================== */
@media (min-width: 1180px) {
  body[data-page="dashboard"]:not(.cms-edit-mode) .dashboard-columns {
    display:grid!important;
    grid-template-columns:minmax(390px,1.16fr) minmax(500px,1.28fr) minmax(270px,.78fr)!important;
    grid-template-areas:
      "clips analytics community"
      "steam games youtube"!important;
    gap:16px!important;
    align-items:stretch!important;
  }
  body[data-page="dashboard"]:not(.cms-edit-mode) .dashboard-column { display:contents!important; }
  body[data-page="dashboard"]:not(.cms-edit-mode) .clips-panel{grid-area:clips!important}
  body[data-page="dashboard"]:not(.cms-edit-mode) .analytics-panel{grid-area:analytics!important}
  body[data-page="dashboard"]:not(.cms-edit-mode) .community-panel{grid-area:community!important}
  body[data-page="dashboard"]:not(.cms-edit-mode) .steam-panel{grid-area:steam!important}
  body[data-page="dashboard"]:not(.cms-edit-mode) .games-panel{grid-area:games!important}
  body[data-page="dashboard"]:not(.cms-edit-mode) .youtube-panel{grid-area:youtube!important}
  body[data-page="dashboard"]:not(.cms-edit-mode) .dashboard-columns .panel{height:100%!important}
}
body[data-page="dashboard"] .analytics-panel .panel-body{padding:12px 15px 12px!important}
body[data-page="dashboard"] .metric-tabs{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;margin-bottom:7px!important}
body[data-page="dashboard"] .metric-tab{min-height:60px!important;padding:8px 9px!important;border-radius:9px!important}
body[data-page="dashboard"] .metric-tab small{font-size:.66rem!important}
body[data-page="dashboard"] .metric-tab strong{font-size:clamp(1.05rem,1.35vw,1.34rem)!important;margin:2px 0 2px!important}
body[data-page="dashboard"] .metric-tab span{font-size:.67rem!important;line-height:1.08!important}
body[data-page="dashboard"] .chart-wrap,
body[data-page="dashboard"] .chart-wrap svg{height:112px!important;min-height:112px!important;max-height:112px!important}
body[data-page="dashboard"] .platform-audience-inline{margin-top:7px!important;padding-top:7px!important;min-height:38px!important}
body[data-page="dashboard"] .platform-audience-item{padding:2px 8px!important}
body[data-page="dashboard"] .steam-panel .panel-body{padding:22px!important;display:grid!important;gap:18px!important;align-content:start!important}
body[data-page="dashboard"] .steam-profile{grid-template-columns:122px minmax(0,1fr)!important;gap:20px!important;align-items:center!important}
body[data-page="dashboard"] .steam-profile img{width:122px!important;height:122px!important;border-radius:20px!important}
body[data-page="dashboard"] .steam-profile h3{font-size:clamp(1.45rem,2vw,2rem)!important}
body[data-page="dashboard"] .steam-profile p{font-size:1rem!important}
body[data-page="dashboard"] .steam-card .info-pairs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
body[data-page="dashboard"] .steam-card .info-pairs>div{min-height:76px!important;padding:14px!important}
body[data-page="dashboard"] .dashboard-steam-buttons{margin-top:auto!important}

/* Compact, usable builder controls. Keep the live page preview dominant. */
body[data-page="project-admin"] .cms-builder-template-and-actions{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important;align-items:start!important}
body[data-page="project-admin"] .cms-layout-template-grid{grid-template-columns:repeat(3,minmax(155px,1fr))!important;gap:8px!important}
body[data-page="project-admin"] .cms-layout-template-card{min-height:72px!important;padding:8px 10px!important}
body[data-page="project-admin"] .cms-layout-template-card .template-preview{transform:scale(.78);transform-origin:left center}
body[data-page="project-admin"] .cms-builder-preview-viewport{min-height:620px!important;max-height:78vh!important}
body[data-page="project-admin"] .site-screenshot-shape-grid button{min-height:86px!important;padding:8px!important}
body[data-page="project-admin"] .group-template-demo{max-height:48px!important}
body[data-page="project-admin"] .site-screenshot-group-live-preview-stage{max-height:220px!important}
body[data-page="project-admin"] .site-screenshot-group-live-preview-grid img{max-height:150px!important}
body[data-page="project-admin"] .site-screenshot-group-picker{max-height:280px!important}
@media (max-width:1179px){
 body[data-page="dashboard"] .metric-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body[data-page="dashboard"] .steam-profile{grid-template-columns:96px minmax(0,1fr)!important}
 body[data-page="dashboard"] .steam-profile img{width:96px!important;height:96px!important}
 body[data-page="project-admin"] .cms-builder-template-and-actions{grid-template-columns:1fr!important}
}


/* v185 cumulative visual/data repair */
body[data-page="dashboard"] .analytics-panel .chart-wrap{
  width:calc(100% + 30px)!important;
  margin-left:-15px!important;
  margin-right:-15px!important;
  overflow:hidden!important;
}
body[data-page="dashboard"] .analytics-panel .chart-wrap svg{
  width:100%!important;
  display:block!important;
}
/* Keep the plot broad while retaining readable labels at the edges. */
body[data-page="dashboard"] .analytics-body-clean{overflow:hidden!important}

/* Real-scale builder preview: iframe is scaled as a whole, never reflowed into letter-wide columns. */
body[data-page="project-admin"] .cms-builder-preview-viewport{overflow:auto!important;position:relative!important}
body[data-page="project-admin"] .cms-builder-preview-wrap iframe{max-width:none!important;flex:none!important}

/* The CS2 screenshot mount belongs beneath Steam in the left column. */
.cs2-top-columns .cs2-screenshot-mount{margin-top:14px!important}
.cs2-top-columns .cs2-screenshot-mount:empty{display:none!important}

/* Live is intentionally concise: one latest VOD presented as a full-width feature,
   then a separate compact clips grid. */
body[data-page="live"] [data-live-vods]{display:block!important;width:100%!important}
body[data-page="live"] [data-live-vods] .media-card{
  width:100%!important;max-width:none!important;display:grid!important;
  grid-template-columns:minmax(300px,42%) minmax(0,1fr)!important;
  min-height:250px!important;align-items:stretch!important;
}
body[data-page="live"] [data-live-vods] .media-card>img{
  width:100%!important;height:100%!important;min-height:250px!important;
  aspect-ratio:auto!important;object-fit:cover!important;
}
body[data-page="live"] [data-live-vods] .media-card-body{
  display:flex!important;flex-direction:column!important;justify-content:center!important;
  padding:24px!important;min-width:0!important;
}
body[data-page="live"] [data-live-clips]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media(max-width:850px){
 body[data-page="live"] [data-live-vods] .media-card{grid-template-columns:1fr!important}
 body[data-page="live"] [data-live-vods] .media-card>img{height:auto!important;min-height:0!important;aspect-ratio:16/9!important}
 body[data-page="live"] [data-live-clips]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){body[data-page="live"] [data-live-clips]{grid-template-columns:1fr!important}}

/* v186 authoritative builder preview: fixed desktop canvas scaled uniformly. */
body[data-page="project-admin"] .cms-builder-preview-viewport{overflow:hidden!important;position:relative!important;padding:10px!important}
body[data-page="project-admin"] .cms-admin-builder-panel[data-editor-view="horizontal"] .cms-builder-preview-wrap iframe{width:1440px!important;min-width:1440px!important;height:900px!important;max-width:none!important;margin:0!important;zoom:1!important}
body[data-page="project-admin"] .cms-admin-builder-panel[data-editor-view="vertical"] .cms-builder-preview-wrap iframe{width:390px!important;min-width:390px!important;height:844px!important;max-width:none!important;margin:0 auto!important;zoom:1!important}

/* v187 — real structured visual Page Builder
   Desktop blocks resize on a hard 12-column grid. Content remains responsive,
   heights stay content-driven, gaps stay exact, and mobile remains one column. */
:root{--cms-layout-gap:16px;--cms-block-padding:18px}
.cms-builder-grid{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  gap:var(--cms-layout-gap)!important;
  align-items:start!important;
  width:100%!important;
}
.cms-builder-grid>[data-cms-section-key]{
  position:relative!important;
  box-sizing:border-box!important;
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  align-self:start!important;
  overflow:visible;
  container-type:inline-size;
}
.cms-builder-grid>[data-cms-section-key] img,
.cms-builder-grid>[data-cms-section-key] video,
.cms-builder-grid>[data-cms-section-key] iframe{max-width:100%;height:auto}
.cms-builder-grid>.cms-builder-width-full{grid-column:span 12!important}
.cms-builder-grid>.cms-builder-width-three-quarters{grid-column:span 9!important}
.cms-builder-grid>.cms-builder-width-two-thirds{grid-column:span 8!important}
.cms-builder-grid>.cms-builder-width-half{grid-column:span 6!important}
.cms-builder-grid>.cms-builder-width-third{grid-column:span 4!important}
.cms-builder-grid>.cms-builder-width-quarter{grid-column:span 3!important}
.cms-layout-source-shell{display:none!important}

/* Handles float above the block and never consume layout space. */
.cms-grid-resize-handle,.cms-grid-drag-grip,.cms-grid-size-readout{display:none}
.cms-edit-mode .cms-builder-grid>[data-cms-section-key]>.cms-grid-resize-handle{
  display:block;position:absolute;z-index:1002;top:12px;bottom:12px;width:12px;
  cursor:ew-resize;touch-action:none;border-radius:8px;background:rgba(170,104,255,.3);
  outline:1px solid rgba(214,177,255,.75);box-shadow:0 0 0 2px rgba(8,5,13,.65)
}
.cms-edit-mode .cms-grid-resize-handle[data-side="left"]{left:-6px}
.cms-edit-mode .cms-grid-resize-handle[data-side="right"]{right:-6px}
.cms-edit-mode .cms-builder-grid>[data-cms-section-key]>.cms-grid-drag-grip{
  display:grid;place-items:center;position:absolute;z-index:1003;top:8px;left:50%;transform:translateX(-50%);
  width:34px;height:24px;padding:0;border:1px solid rgba(214,177,255,.8);border-radius:8px;
  background:#28153d;color:#fff;cursor:grab;font-size:18px;line-height:1
}
.cms-edit-mode .cms-builder-grid>[data-cms-section-key]>.cms-grid-drag-grip:active{cursor:grabbing}
.cms-edit-mode .cms-builder-grid>[data-cms-section-key]>.cms-grid-size-readout{
  display:block;position:absolute;z-index:1003;right:10px;top:8px;padding:3px 7px;border-radius:999px;
  background:#160b24;color:#ead9ff;border:1px solid #6f4c91;font-size:11px;font-weight:800;pointer-events:none
}
.cms-edit-mode .cms-builder-grid>[data-cms-section-key]{outline:1px dashed rgba(187,131,255,.56);outline-offset:2px}
.cms-edit-mode .cms-builder-grid>[data-cms-section-key].cms-grid-resizing{outline:3px solid #b56cff!important;z-index:20}
.cms-edit-mode .cms-builder-grid>[data-cms-section-key].cms-grid-dragging{opacity:.66}

/* Inner content follows the block width logically. */
.cms-builder-grid>[data-cms-section-key] .panel-body,
.cms-builder-grid>[data-cms-section-key] .content-section{min-width:0;max-width:100%;box-sizing:border-box}
.cms-builder-grid>[data-cms-section-key] .button-row{display:flex;flex-wrap:wrap;gap:10px}
.cms-builder-grid>[data-cms-section-key] .button-row>*{max-width:100%}
.cms-builder-grid>[data-cms-section-key] .info-pairs{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))!important}
.cms-builder-grid>[data-cms-section-key] textarea{width:100%;max-width:100%;box-sizing:border-box}
@container (max-width:520px){
  .steam-large{grid-template-columns:1fr!important;text-align:center!important}
  .steam-large>img{margin-inline:auto!important}
  .steam-large .info-pairs{grid-template-columns:1fr!important}
  .skin-yap-intro,.skin-form{min-width:0!important}
  .panel-head{align-items:flex-start!important;flex-wrap:wrap!important}
}

/* Builder chrome: useful compact block tiles, not huge empty squares. */
body[data-page="project-admin"] .cms-builder-section-list,
body[data-page="project-admin"] [data-builder-sections]{
  display:grid!important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;
  gap:10px!important;align-items:start!important
}
body[data-page="project-admin"] .cms-builder-section-card{
  min-height:0!important;height:auto!important;padding:10px 11px!important;gap:8px!important;border-radius:11px!important
}
body[data-page="project-admin"] .cms-builder-card-copy{min-width:0!important}
body[data-page="project-admin"] .cms-builder-card-copy strong{font-size:.9rem!important;line-height:1.2!important}
body[data-page="project-admin"] .cms-builder-card-copy small{font-size:.68rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
body[data-page="project-admin"] .cms-builder-card-controls{gap:7px!important}
body[data-page="project-admin"] .cms-builder-card-controls label{min-width:0!important}
body[data-page="project-admin"] .cms-builder-card-controls select{min-height:34px!important;padding:5px 8px!important;font-size:.78rem!important}

/* Correct proportional desktop preview. JS sets the exact scale. */
body[data-page="project-admin"] .cms-builder-preview-viewport{
  position:relative!important;overflow:auto!important;padding:12px!important;min-height:560px!important;max-height:78vh!important;
  background:#06040a!important
}
body[data-page="project-admin"] .cms-admin-builder-panel[data-editor-view="horizontal"] .cms-builder-preview-wrap iframe{
  display:block!important;width:1440px!important;min-width:0!important;max-width:none!important;height:900px!important;
  border:1px solid #4a3768!important;border-radius:10px!important;margin:0!important;zoom:1!important
}
body[data-page="project-admin"] .cms-admin-builder-panel[data-editor-view="vertical"] .cms-builder-preview-wrap iframe{
  display:block!important;width:390px!important;min-width:390px!important;height:844px!important;margin:0 auto!important;transform:none!important
}

/* Public mobile remains the original single-column site. */
@media(max-width:720px){
  .cms-builder-grid{grid-template-columns:1fr!important;gap:var(--cms-layout-gap)!important}
  .cms-builder-grid>[data-cms-section-key]{grid-column:1!important;min-height:0!important;aspect-ratio:auto!important;overflow:visible!important}
  .cms-grid-resize-handle,.cms-grid-drag-grip,.cms-grid-size-readout{display:none!important}
}

/* v188 — Page Builder workspace visibility repair.
   The selected-item inspector sits above the preview, never beside it.
   The real website preview receives the full builder width. */
body[data-page="project-admin"] .cms-builder-workspace-visual{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  width:100%!important;
  min-width:0!important;
}
body[data-page="project-admin"] .cms-builder-workspace-visual .cms-builder-inspector{
  order:1!important;
  position:static!important;
  top:auto!important;
  width:100%!important;
  max-width:none!important;
  max-height:none!important;
  overflow:visible!important;
  display:grid!important;
  grid-template-columns:minmax(220px,280px) minmax(0,1fr)!important;
  align-items:start!important;
  gap:0!important;
}
body[data-page="project-admin"] .cms-builder-workspace-visual .cms-builder-inspector>.cms-builder-column-head{
  border-right:1px solid #2d2142!important;
  border-bottom:0!important;
  height:100%!important;
}
body[data-page="project-admin"] .cms-builder-workspace-visual .cms-builder-preview-wrap{
  order:2!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  grid-column:auto!important;
}
body[data-page="project-admin"] .cms-builder-preview-viewport{
  width:100%!important;
  max-width:none!important;
  min-height:680px!important;
  max-height:82vh!important;
  overflow:auto!important;
}
body[data-page="project-admin"] .cms-builder-inspector-form,
body[data-page="project-admin"] .cms-selected-frame-controls,
body[data-page="project-admin"] .cms-screenshot-template-inspector{
  min-width:0!important;
}
@media(max-width:900px){
  body[data-page="project-admin"] .cms-builder-workspace-visual .cms-builder-inspector{
    grid-template-columns:1fr!important;
  }
  body[data-page="project-admin"] .cms-builder-workspace-visual .cms-builder-inspector>.cms-builder-column-head{
    border-right:0!important;
    border-bottom:1px solid #2d2142!important;
  }
}


/* v189 graph edge-to-edge repair */
body[data-page="dashboard"] .analytics-panel .chart-wrap{
  width:calc(100% + 44px)!important;
  margin-left:-22px!important;
  margin-right:-22px!important;
  padding:0!important;
  overflow:hidden!important;
}
body[data-page="dashboard"] .analytics-panel .chart-wrap svg{
  width:100%!important;
  max-width:none!important;
  display:block!important;
}

/* v190 — compact screenshot choices and collapsible workflow steps. */
body[data-page="project-admin"] .site-screenshot-workflow-step{
  padding:12px!important;
}
body[data-page="project-admin"] .site-screenshot-step-head{
  align-items:center!important;
  margin-bottom:10px!important;
}
body[data-page="project-admin"] .site-screenshot-step-head h3{
  font-size:1.05rem!important;
}
body[data-page="project-admin"] .site-screenshot-step-head p{
  font-size:.86rem!important;
  line-height:1.35!important;
}
body[data-page="project-admin"] .site-screenshot-step-toggle{
  margin-left:auto!important;
  min-width:82px!important;
}
body[data-page="project-admin"] .site-screenshot-step-head>.site-screenshot-step-toggle + .button{
  margin-left:6px!important;
}
body[data-page="project-admin"] .site-screenshot-workflow-step.is-collapsed>:not(.site-screenshot-step-head){
  display:none!important;
}
body[data-page="project-admin"] .site-screenshot-workflow-step.is-collapsed .site-screenshot-step-head{
  margin-bottom:0!important;
}
body[data-page="project-admin"] .site-screenshot-unified-choice-fieldset{
  padding:10px!important;
}
body[data-page="project-admin"] .site-screenshot-number-grid,
body[data-page="project-admin"] .site-screenshot-shape-grid,
body[data-page="project-admin"] .site-screenshot-box-width-grid,
body[data-page="project-admin"] .site-screenshot-box-length-grid{
  gap:6px!important;
}
body[data-page="project-admin"] .site-screenshot-number-grid button,
body[data-page="project-admin"] .site-screenshot-box-width-grid button,
body[data-page="project-admin"] .site-screenshot-box-length-grid button{
  min-height:54px!important;
  padding:6px 8px!important;
  gap:2px!important;
}
body[data-page="project-admin"] .site-screenshot-number-grid button strong,
body[data-page="project-admin"] .site-screenshot-box-width-grid button strong{
  font-size:1.05rem!important;
}
body[data-page="project-admin"] .site-screenshot-shape-grid button{
  min-height:74px!important;
  padding:6px!important;
  gap:3px!important;
  grid-template-rows:36px auto auto!important;
}
body[data-page="project-admin"] .group-template-demo{
  min-height:36px!important;
  height:36px!important;
  max-height:36px!important;
  padding:3px!important;
  gap:3px!important;
  overflow:hidden!important;
}
body[data-page="project-admin"] .site-screenshot-shape-grid button strong{
  font-size:.86rem!important;
  line-height:1.1!important;
}
body[data-page="project-admin"] .site-screenshot-shape-grid button small,
body[data-page="project-admin"] .site-screenshot-number-grid button small,
body[data-page="project-admin"] .site-screenshot-box-width-grid button small,
body[data-page="project-admin"] .site-screenshot-box-length-grid button small{
  font-size:.72rem!important;
  line-height:1.1!important;
}
@media(max-width:650px){
  body[data-page="project-admin"] .site-screenshot-step-head>.site-screenshot-step-toggle,
  body[data-page="project-admin"] .site-screenshot-step-head>.site-screenshot-step-toggle + .button{
    width:auto!important;
    margin-left:0!important;
  }
}

/* v191 — full-screen Page Builder workspace with collapsible overlay drawers.
   This affects only the admin Page Builder. Public pages and Screenshot Builder are untouched. */
body[data-page="project-admin"] .cms-admin-builder-panel.cms-builder-drawer-mode{
  width:calc(100vw - 24px)!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw + 12px)!important;
  margin-right:0!important;
  padding:12px!important;
  overflow:visible!important;
}
body[data-page="project-admin"] .cms-builder-drawer-mode>.site-admin-panel-head{
  margin-bottom:10px!important;
}
body[data-page="project-admin"] .cms-builder-editor-shell{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:calc(100vh - 150px)!important;
  min-height:680px!important;
  overflow:hidden!important;
  border:1px solid #39294f!important;
  border-radius:16px!important;
  background:#050308!important;
}
body[data-page="project-admin"] .cms-builder-editor-shell>.cms-builder-preview-wrap{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:#050308!important;
}
body[data-page="project-admin"] .cms-builder-editor-shell .cms-builder-preview-head{
  height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:0 54px!important;
  border-bottom:1px solid #2d2142!important;
  background:#0a0611!important;
  position:relative!important;
  z-index:2!important;
}
body[data-page="project-admin"] .cms-builder-editor-shell .cms-builder-preview-viewport{
  position:absolute!important;
  inset:42px 0 0!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:12px!important;
  overflow:auto!important;
  scrollbar-gutter:stable both-edges!important;
  background:#050308!important;
}
body[data-page="project-admin"] .cms-builder-editor-shell .cms-builder-preview-wrap iframe{
  display:block!important;
  margin:0 auto!important;
}
body[data-page="project-admin"] .cms-builder-drawer{
  position:absolute!important;
  top:42px!important;
  bottom:0!important;
  z-index:20!important;
  width:min(360px,86vw)!important;
  max-width:none!important;
  max-height:none!important;
  overflow:hidden!important;
  border:1px solid #553a78!important;
  border-radius:0!important;
  background:rgba(9,6,16,.985)!important;
  box-shadow:0 0 28px rgba(0,0,0,.48)!important;
  transition:transform .18s ease,visibility .18s ease!important;
}
body[data-page="project-admin"] .cms-builder-left-drawer{left:0!important;transform:translateX(-102%)!important}
body[data-page="project-admin"] .cms-builder-right-drawer{right:0!important;left:auto!important;transform:translateX(102%)!important;display:block!important}
body[data-page="project-admin"] .cms-builder-drawer.is-open{transform:translateX(0)!important;visibility:visible!important}
body[data-page="project-admin"] .cms-builder-drawer.is-collapsed{visibility:hidden!important;pointer-events:none!important}
body[data-page="project-admin"] .cms-builder-drawer.is-open{pointer-events:auto!important}
body[data-page="project-admin"] .cms-builder-drawer-head,
body[data-page="project-admin"] .cms-builder-right-drawer>.cms-builder-column-head{
  min-height:52px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:10px 12px!important;
  border:0!important;
  border-bottom:1px solid #39294f!important;
  background:#10091a!important;
}
body[data-page="project-admin"] .cms-builder-drawer-body{
  height:calc(100% - 52px)!important;
  overflow:auto!important;
  padding:12px!important;
}
body[data-page="project-admin"] .cms-builder-left-drawer .cms-builder-toolbar-visual,
body[data-page="project-admin"] .cms-builder-left-drawer .cms-builder-template-and-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  width:100%!important;
  margin:0 0 12px!important;
  padding:10px!important;
}
body[data-page="project-admin"] .cms-builder-left-drawer .cms-layout-template-grid{
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
}
body[data-page="project-admin"] .cms-builder-left-drawer .cms-layout-template-card{
  min-width:0!important;
  padding:8px!important;
}
body[data-page="project-admin"] .cms-builder-left-drawer .cms-builder-addbar,
body[data-page="project-admin"] .cms-builder-left-drawer .cms-builder-savebar{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  padding:9px!important;
}
body[data-page="project-admin"] .cms-builder-left-drawer .cms-builder-help{
  margin:0 0 10px!important;
  font-size:.82rem!important;
}
body[data-page="project-admin"] .cms-builder-right-drawer{
  overflow:auto!important;
}
body[data-page="project-admin"] .cms-builder-right-drawer>.cms-builder-column-head{
  position:sticky!important;
  top:0!important;
  z-index:2!important;
}
body[data-page="project-admin"] .cms-builder-right-drawer .cms-selected-frame-controls,
body[data-page="project-admin"] .cms-builder-right-drawer .cms-screenshot-template-inspector,
body[data-page="project-admin"] .cms-builder-right-drawer .cms-builder-inspector-form,
body[data-page="project-admin"] .cms-builder-right-drawer .cms-builder-content-details{
  margin:10px!important;
}
body[data-page="project-admin"] .cms-builder-drawer-close,
body[data-page="project-admin"] .cms-builder-edge-toggle{
  appearance:none!important;
  border:1px solid #8d4ee8!important;
  background:#28113f!important;
  color:#fff!important;
  font:900 22px/1 system-ui,sans-serif!important;
  cursor:pointer!important;
}
body[data-page="project-admin"] .cms-builder-drawer-close{
  width:34px!important;height:34px!important;border-radius:9px!important;flex:0 0 34px!important
}
body[data-page="project-admin"] .cms-builder-edge-toggle{
  position:absolute!important;
  top:50%!important;
  z-index:30!important;
  width:34px!important;
  height:76px!important;
  transform:translateY(-50%)!important;
  border-radius:0 10px 10px 0!important;
}
body[data-page="project-admin"] .cms-builder-edge-toggle-left{left:0!important}
body[data-page="project-admin"] .cms-builder-edge-toggle-right{right:0!important;border-radius:10px 0 0 10px!important}
body[data-page="project-admin"] .cms-builder-edge-toggle[aria-expanded="true"]{background:#8a2be2!important}
body[data-page="project-admin"] .cms-builder-drawer-mode>.cms-builder-toolbar-visual,
body[data-page="project-admin"] .cms-builder-drawer-mode>.cms-builder-template-and-actions,
body[data-page="project-admin"] .cms-builder-drawer-mode>.cms-builder-help,
body[data-page="project-admin"] .cms-builder-drawer-mode>[data-builder-message]{display:none!important}
@media(max-width:800px){
  body[data-page="project-admin"] .cms-admin-builder-panel.cms-builder-drawer-mode{
    width:100%!important;margin-left:0!important;padding:8px!important
  }
  body[data-page="project-admin"] .cms-builder-editor-shell{height:78vh!important;min-height:560px!important}
  body[data-page="project-admin"] .cms-builder-drawer{width:min(330px,92vw)!important}
  body[data-page="project-admin"] .cms-builder-editor-shell .cms-builder-preview-head span{display:none!important}
}

/* v192 — Page Builder drawers actually disappear, preview gets full workspace, and user-controlled zoom. */
body[data-page="project-admin"] .cms-builder-editor-shell{
  height:calc(100vh - 118px)!important;
  min-height:720px!important;
}
body[data-page="project-admin"] .cms-builder-drawer[hidden],
body[data-page="project-admin"] .cms-builder-drawer.is-collapsed{
  display:none!important;
  width:0!important;
  min-width:0!important;
  max-width:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:none!important;
}
body[data-page="project-admin"] .cms-builder-drawer.is-open:not([hidden]){
  display:block!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
body[data-page="project-admin"] .cms-builder-editor-shell>.cms-builder-preview-wrap{
  inset:0!important;
  width:100%!important;
  max-width:none!important;
}
body[data-page="project-admin"] .cms-builder-preview-head{
  gap:14px!important;
  padding-left:52px!important;
  padding-right:52px!important;
}
body[data-page="project-admin"] .cms-builder-preview-head>span{
  flex:1 1 auto!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body[data-page="project-admin"] .cms-builder-zoom-control{
  display:grid!important;
  grid-template-columns:auto minmax(110px,220px) 42px!important;
  align-items:center!important;
  gap:8px!important;
  flex:0 1 300px!important;
  margin:0!important;
  color:#d7c8e9!important;
  font-size:.78rem!important;
}
body[data-page="project-admin"] .cms-builder-zoom-control input{
  width:100%!important;
  margin:0!important;
  padding:0!important;
}
body[data-page="project-admin"] .cms-builder-zoom-control output{
  text-align:right!important;
  color:#fff!important;
  font-weight:800!important;
}
body[data-page="project-admin"] .cms-builder-preview-viewport{
  padding:8px!important;
  overflow:auto!important;
}
body[data-page="project-admin"] .cms-builder-edge-toggle{
  display:block!important;
}
@media(max-width:900px){
  body[data-page="project-admin"] .cms-builder-preview-head>span{display:none!important}
  body[data-page="project-admin"] .cms-builder-zoom-control{grid-template-columns:auto minmax(90px,1fr) 38px!important;flex:1 1 auto!important}
}

/* v193 — true full-canvas Page Builder: overlay drawers + real horizontal/vertical scrolling. */
body[data-page="project-admin"] .cms-admin-builder-panel.cms-builder-overlay-mode{
  position:relative!important;
  overflow:visible!important;
}
body[data-page="project-admin"] .cms-builder-overlay-mode>.site-admin-panel-head,
body[data-page="project-admin"] .cms-builder-overlay-mode>.cms-builder-toolbar-visual,
body[data-page="project-admin"] .cms-builder-overlay-mode>.cms-builder-template-and-actions,
body[data-page="project-admin"] .cms-builder-overlay-mode>.cms-builder-help,
body[data-page="project-admin"] .cms-builder-overlay-mode>[data-builder-message]{display:none!important}
body[data-page="project-admin"] .cms-builder-overlay-shell{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:min(82vh,1000px)!important;
  min-height:680px!important;
  overflow:hidden!important;
  border:1px solid #4a3768!important;
  border-radius:14px!important;
  background:#08050f!important;
}
body[data-page="project-admin"] .cms-builder-overlay-shell .cms-builder-preview-wrap{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:#05030a!important;
  z-index:1!important;
}
body[data-page="project-admin"] .cms-builder-overlay-shell .cms-builder-preview-head{
  position:sticky!important;
  top:0!important;
  z-index:4!important;
  min-height:44px!important;
  padding:10px 54px!important;
  background:#0d0816f2!important;
  border-bottom:1px solid #37294d!important;
}
body[data-page="project-admin"] .cms-builder-overlay-shell .cms-builder-preview-viewport{
  position:absolute!important;
  inset:44px 0 0!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  overflow-x:scroll!important;
  overflow-y:scroll!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable both-edges!important;
  background:#05030a!important;
  padding:0!important;
}
body[data-page="project-admin"] .cms-builder-overlay-shell .cms-builder-preview-viewport iframe{
  display:block!important;
  width:1440px!important;
  min-width:1440px!important;
  max-width:none!important;
  height:2800px!important;
  min-height:2800px!important;
  margin:0!important;
  border:0!important;
  transform:none!important;
  zoom:1!important;
}
body[data-page="project-admin"] .cms-builder-overlay-drawer{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  width:min(360px,86vw)!important;
  max-width:none!important;
  height:100%!important;
  margin:0!important;
  z-index:20!important;
  background:#0d0817f8!important;
  border:1px solid #6b3fa0!important;
  box-shadow:0 0 30px #000b!important;
  overflow:hidden!important;
  transition:transform .2s ease!important;
  pointer-events:none!important;
  visibility:visible!important;
}
body[data-page="project-admin"] .cms-builder-overlay-left{left:0!important;transform:translateX(calc(-100% - 2px))!important}
body[data-page="project-admin"] .cms-builder-overlay-right{right:0!important;left:auto!important;transform:translateX(calc(100% + 2px))!important}
body[data-page="project-admin"] .cms-builder-overlay-drawer.is-open{
  transform:translateX(0)!important;
  pointer-events:auto!important;
}
body[data-page="project-admin"] .cms-builder-overlay-head,
body[data-page="project-admin"] .cms-builder-overlay-right>.cms-builder-column-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-height:48px!important;
  padding:10px 12px!important;
  border-bottom:1px solid #4a3768!important;
  background:#120a20!important;
}
body[data-page="project-admin"] .cms-builder-overlay-body,
body[data-page="project-admin"] .cms-builder-overlay-right{
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
body[data-page="project-admin"] .cms-builder-overlay-body{height:calc(100% - 48px)!important;padding:12px!important}
body[data-page="project-admin"] .cms-builder-overlay-close,
body[data-page="project-admin"] .cms-builder-overlay-tab{
  border:1px solid #9d54ff!important;
  background:#6f22c9!important;
  color:#fff!important;
  font:700 22px/1 inherit!important;
  cursor:pointer!important;
}
body[data-page="project-admin"] .cms-builder-overlay-close{width:34px!important;height:34px!important;border-radius:8px!important}
body[data-page="project-admin"] .cms-builder-overlay-tab{
  position:absolute!important;
  top:50%!important;
  z-index:30!important;
  width:30px!important;
  height:72px!important;
  transform:translateY(-50%)!important;
  border-radius:0 8px 8px 0!important;
}
body[data-page="project-admin"] .cms-builder-overlay-tab-left{left:0!important}
body[data-page="project-admin"] .cms-builder-overlay-tab-right{right:0!important;border-radius:8px 0 0 8px!important}
body[data-page="project-admin"] .cms-builder-overlay-shell.has-left-overlay-open .cms-builder-overlay-tab-left{left:min(360px,86vw)!important}
body[data-page="project-admin"] .cms-builder-overlay-shell.has-right-overlay-open .cms-builder-overlay-tab-right{right:min(360px,86vw)!important}
body[data-page="project-admin"] .cms-builder-overlay-right .cms-builder-content-details,
body[data-page="project-admin"] .cms-builder-overlay-right .cms-selected-frame-controls,
body[data-page="project-admin"] .cms-builder-overlay-right .cms-screenshot-template-inspector{margin:12px!important}
@media(max-width:700px){
  body[data-page="project-admin"] .cms-builder-overlay-shell{min-height:620px!important;height:78vh!important}
  body[data-page="project-admin"] .cms-builder-overlay-drawer{width:92vw!important}
  body[data-page="project-admin"] .cms-builder-overlay-shell.has-left-overlay-open .cms-builder-overlay-tab-left{left:92vw!important}
  body[data-page="project-admin"] .cms-builder-overlay-shell.has-right-overlay-open .cms-builder-overlay-tab-right{right:92vw!important}
}


/* v195 — hard repair: Selected visual item is an overlay drawer, never a separate layout box. */
body[data-page="project-admin"] .cms-admin-builder-panel:not(.cms-builder-overlay-mode) .cms-builder-workspace-visual > .cms-builder-inspector{
  display:none!important;
}
body[data-page="project-admin"] .cms-admin-builder-panel.cms-builder-overlay-mode .cms-builder-workspace-visual{
  display:block!important;
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  height:min(82vh,1000px)!important;
  min-height:680px!important;
  overflow:hidden!important;
  gap:0!important;
}
body[data-page="project-admin"] .cms-admin-builder-panel.cms-builder-overlay-mode .cms-builder-preview-wrap{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  margin:0!important;
  z-index:1!important;
}
body[data-page="project-admin"] .cms-admin-builder-panel.cms-builder-overlay-mode .cms-builder-inspector.cms-builder-overlay-right{
  display:block!important;
  position:absolute!important;
  top:0!important;
  right:0!important;
  left:auto!important;
  bottom:0!important;
  width:min(360px,86vw)!important;
  max-width:none!important;
  height:100%!important;
  margin:0!important;
  z-index:20!important;
  transform:translateX(calc(100% + 2px))!important;
  pointer-events:none!important;
  visibility:visible!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  background:#0d0817f8!important;
  border:1px solid #6b3fa0!important;
  box-shadow:0 0 30px #000b!important;
}
body[data-page="project-admin"] .cms-admin-builder-panel.cms-builder-overlay-mode .cms-builder-inspector.cms-builder-overlay-right.is-open{
  transform:translateX(0)!important;
  pointer-events:auto!important;
}
body[data-page="project-admin"] .cms-admin-builder-panel.cms-builder-overlay-mode .cms-builder-overlay-left{
  display:block!important;
}
body[data-page="project-admin"] .cms-builder-overlay-tab{
  display:block!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
body[data-page="project-admin"] .cms-builder-overlay-shell .cms-builder-preview-viewport{
  overflow-x:scroll!important;
  overflow-y:scroll!important;
  scrollbar-gutter:stable both-edges!important;
}

/* v196 Page Builder: preview is always full width; both controls are true overlay drawers. */
body[data-page="project-admin"] .cms-admin-builder-panel.cms-v196-builder{position:relative!important;overflow:visible!important}
body[data-page="project-admin"] .cms-v196-workspace{
  display:block!important;position:relative!important;width:100%!important;max-width:none!important;
  height:min(84vh,1050px)!important;min-height:720px!important;margin:0!important;overflow:hidden!important;
  grid-template-columns:none!important;gap:0!important;
}
body[data-page="project-admin"] .cms-v196-workspace>.cms-builder-preview-wrap{
  position:absolute!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;
  margin:0!important;z-index:1!important;display:block!important;
}
body[data-page="project-admin"] .cms-v196-workspace .cms-builder-preview-viewport{
  position:absolute!important;inset:44px 0 0!important;width:auto!important;height:auto!important;
  overflow:auto!important;scrollbar-gutter:stable!important;background:#05030a!important;
}
body[data-page="project-admin"] .cms-v196-workspace .cms-builder-preview-viewport iframe{
  display:block!important;width:1440px!important;min-width:1440px!important;max-width:none!important;
  height:3000px!important;min-height:3000px!important;margin:0!important;transform:none!important;zoom:1!important;
}
body[data-page="project-admin"] .cms-v196-drawer{
  display:block!important;position:absolute!important;top:0!important;bottom:0!important;width:min(360px,88vw)!important;
  max-width:none!important;height:100%!important;margin:0!important;z-index:50!important;background:#0d0817fa!important;
  border:1px solid #6b3fa0!important;box-shadow:0 0 34px #000c!important;overflow:hidden!important;
  transition:transform .2s ease!important;pointer-events:none!important;
}
body[data-page="project-admin"] .cms-v196-left{left:0!important;right:auto!important;transform:translateX(calc(-100% - 3px))!important}
body[data-page="project-admin"] .cms-v196-right{right:0!important;left:auto!important;transform:translateX(calc(100% + 3px))!important}
body[data-page="project-admin"] .cms-v196-drawer.is-open{transform:translateX(0)!important;pointer-events:auto!important}
body[data-page="project-admin"] .cms-v196-drawer-head,
body[data-page="project-admin"] .cms-v196-right>.cms-builder-column-head{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;
  min-height:48px!important;padding:10px 12px!important;background:#120a20!important;border-bottom:1px solid #4a3768!important;
}
body[data-page="project-admin"] .cms-v196-drawer-body{height:calc(100% - 48px)!important;padding:12px!important;overflow:auto!important}
body[data-page="project-admin"] .cms-v196-right{overflow-y:auto!important;overflow-x:hidden!important}
body[data-page="project-admin"] .cms-v196-close,
body[data-page="project-admin"] .cms-v196-tab{
  border:1px solid #a766ff!important;background:#7426cd!important;color:#fff!important;cursor:pointer!important;
  font:700 21px/1 inherit!important;
}
body[data-page="project-admin"] .cms-v196-close{width:34px!important;height:34px!important;border-radius:8px!important}
body[data-page="project-admin"] .cms-v196-tab{
  display:block!important;position:absolute!important;top:50%!important;z-index:60!important;width:30px!important;height:72px!important;
  transform:translateY(-50%)!important;
}
body[data-page="project-admin"] .cms-v196-tab-left{left:0!important;border-radius:0 8px 8px 0!important}
body[data-page="project-admin"] .cms-v196-tab-right{right:0!important;border-radius:8px 0 0 8px!important}
body[data-page="project-admin"] .cms-v196-workspace.cms-v196-left-open .cms-v196-tab-left{left:min(360px,88vw)!important}
body[data-page="project-admin"] .cms-v196-workspace.cms-v196-right-open .cms-v196-tab-right{right:min(360px,88vw)!important}
body[data-page="project-admin"] .cms-v196-right .cms-builder-content-details,
body[data-page="project-admin"] .cms-v196-right .cms-selected-frame-controls,
body[data-page="project-admin"] .cms-v196-right .cms-screenshot-template-inspector{margin:12px!important}
@media(max-width:700px){
  body[data-page="project-admin"] .cms-v196-workspace{min-height:620px!important;height:78vh!important}
  body[data-page="project-admin"] .cms-v196-drawer{width:92vw!important}
  body[data-page="project-admin"] .cms-v196-workspace.cms-v196-left-open .cms-v196-tab-left{left:92vw!important}
  body[data-page="project-admin"] .cms-v196-workspace.cms-v196-right-open .cms-v196-tab-right{right:92vw!important}
}

/* v197 Page Builder — one full-width canvas with two true overlay drawers. */
.site-admin-page .cms-v197-workspace{
  display:block!important;position:relative!important;width:100%!important;max-width:none!important;
  grid-template-columns:none!important;gap:0!important;overflow:hidden!important;
}
.site-admin-page .cms-v197-workspace>.cms-builder-preview-wrap{
  position:absolute!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;
  margin:0!important;z-index:1!important;
}
.site-admin-page .cms-v197-drawer{box-sizing:border-box!important;border:1px solid #6b3fa0!important;box-shadow:0 0 34px #000c!important}
.site-admin-page .cms-v197-drawer-head,
.site-admin-page .cms-v197-right>.cms-builder-column-head{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;
  min-height:48px!important;padding:10px 12px!important;background:#120a20!important;border-bottom:1px solid #4a3768!important;
}
.site-admin-page .cms-v197-drawer-body{height:calc(100% - 48px)!important;padding:12px!important;overflow:auto!important}
.site-admin-page .cms-v197-close{width:34px!important;height:34px!important;border-radius:8px!important;border:1px solid #a766ff!important;background:#7426cd!important;color:#fff!important;cursor:pointer!important}
.site-admin-page .cms-v197-tab-left{border-radius:0 8px 8px 0!important}
.site-admin-page .cms-v197-tab-right{border-radius:8px 0 0 8px!important}
/* v199 direct screenshot editing in the real page preview */
.cms-edit-mode .cms-screenshot-block-drag-handle{cursor:grab;user-select:none}
.cms-edit-mode .cms-screenshot-block-drag-handle:active{cursor:grabbing}
.cms-edit-mode .cms-screenshot-group-actions{display:flex;align-items:center;gap:8px}
.cms-edit-mode .cms-screenshot-group-delete,
.cms-edit-mode .cms-screenshot-delete{border-color:#ff6b8f!important;color:#ff9bb3!important}
.cms-edit-mode .cms-screenshot-content-block.cms-section-dragging{opacity:.55;outline:2px dashed #b967ff!important}


/* v200 — Screenshot Builder accordion, smaller visual samples, direct removal. */
body[data-page="project-admin"] .site-screenshot-unified-workflow{
  display:grid!important;
  gap:10px!important;
}
body[data-page="project-admin"] .site-screenshot-workflow-step{
  padding:10px!important;
}
body[data-page="project-admin"] .site-screenshot-step-head{
  min-height:42px!important;
  margin:0!important;
}
body[data-page="project-admin"] .site-screenshot-step-head>span{
  width:28px!important;
  height:28px!important;
  flex-basis:28px!important;
  border-radius:8px!important;
}
body[data-page="project-admin"] .site-screenshot-step-head h3{
  font-size:1rem!important;
  margin-bottom:2px!important;
}
body[data-page="project-admin"] .site-screenshot-step-head p{
  font-size:.78rem!important;
}
body[data-page="project-admin"] .site-screenshot-step-toggle{
  min-width:76px!important;
  padding:7px 10px!important;
}
body[data-page="project-admin"] .site-screenshot-workflow-step:not(.is-collapsed) .site-screenshot-step-head{
  margin-bottom:10px!important;
}
body[data-page="project-admin"] .site-screenshot-shape-grid button{
  min-height:58px!important;
  padding:5px 7px!important;
  grid-template-rows:24px auto!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:8px!important;
}
body[data-page="project-admin"] .site-screenshot-shape-grid button .group-template-demo{
  grid-row:1 / span 2!important;
  width:58px!important;
  height:24px!important;
  min-height:24px!important;
  max-height:24px!important;
  padding:2px!important;
  gap:2px!important;
}
body[data-page="project-admin"] .site-screenshot-shape-grid button strong,
body[data-page="project-admin"] .site-screenshot-shape-grid button small{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body[data-page="project-admin"] .site-screenshot-number-grid button,
body[data-page="project-admin"] .site-screenshot-box-width-grid button,
body[data-page="project-admin"] .site-screenshot-box-length-grid button{
  min-height:44px!important;
}
body[data-page="project-admin"] .site-screenshot-group-picker{
  max-height:230px!important;
  overflow:auto!important;
}
body[data-page="project-admin"] .site-screenshot-group-choice-wrap{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:6px!important;
  align-items:stretch!important;
}
body[data-page="project-admin"] .site-screenshot-group-choice-wrap .site-screenshot-group-choice{
  min-width:0!important;
}
body[data-page="project-admin"] .site-screenshot-choice-remove{
  align-self:stretch!important;
  min-width:70px!important;
  padding:6px 8px!important;
  border:1px solid rgba(255,104,143,.55)!important;
  border-radius:8px!important;
  color:#ff9ab4!important;
  background:rgba(85,14,36,.32)!important;
  cursor:pointer!important;
  font:inherit!important;
  font-size:.76rem!important;
  font-weight:800!important;
}
body[data-page="project-admin"] .site-screenshot-choice-remove:hover{
  background:rgba(145,20,58,.5)!important;
  color:#fff!important;
}
body[data-page="project-admin"] .site-admin-media-item .danger-button{
  color:#ff9ab4!important;
  border-color:rgba(255,104,143,.55)!important;
}
@media(max-width:900px){
  body[data-page="project-admin"] .site-screenshot-shape-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* v201 — Page Editor wording and control order: drag/add first, templates secondary. */
.cms-builder-template-label{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:2px 2px -2px;
  color:#f3eaff;
}
.cms-builder-template-label span{
  color:#aa9abc;
  font-size:.85rem;
}
@media(max-width:720px){
  .cms-builder-template-label{align-items:flex-start;flex-direction:column;gap:2px}
}


/* v204 emergency recovery — isolated, validated fixes only. */
/* Empty media error boxes must not reserve 110px of blank space. */
body[data-page="media"] [data-media-error]:empty{
  display:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}
body[data-page="media"] .page-title-row{margin-bottom:var(--section-gap)!important}
body[data-page="media"] .page-grid{margin-top:0!important}

/* Keep the analytics plot inside the panel and let the SVG renderer use the real width. */
body[data-page="dashboard"] .analytics-panel .chart-wrap{
  width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
body[data-page="dashboard"] .analytics-panel .chart-wrap svg{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

/* Steam profile content uses the full card height and keeps actions aligned at the bottom. */
body[data-page="dashboard"] .steam-panel .panel-body{
  display:flex!important;
  flex-direction:column!important;
}
body[data-page="dashboard"] .steam-panel .steam-profile{
  flex:1 1 auto!important;
  align-content:start!important;
}
body[data-page="dashboard"] .steam-panel .steam-action-row{
  margin-top:auto!important;
}


/* v205 isolated profile and screenshot-builder fixes */
body[data-page="counter-strike-personal"] .cs2-profile-primary { display:grid; gap:16px; margin:0 0 16px; }
body[data-page="counter-strike-personal"] .cs2-profile-primary > .panel, body[data-page="counter-strike-personal"] .cs2-skin-yap-section > .panel { width:100%; min-width:0; }
body[data-page="counter-strike-personal"] .cs2-skin-yap-section { margin:0 0 16px; }
body[data-page="counter-strike-personal"] .cs2-screenshot-mount { margin:0; }
.site-screenshot-box-order-list { display:grid; gap:10px; }
.site-screenshot-group-admin-card[draggable="true"] { cursor:grab; }
.site-screenshot-group-admin-card.dragging { opacity:.48; }
.site-screenshot-group-admin-card.drag-over { outline:2px solid var(--accent,#a855f7); outline-offset:3px; }
.site-screenshot-group-admin-preview { width:220px !important; min-height:84px !important; max-height:112px !important; overflow:hidden; }
.site-screenshot-group-admin-preview img { min-height:0 !important; max-height:52px !important; object-fit:contain !important; }
@media (max-width:800px){ .site-screenshot-group-admin-preview { width:100% !important; } }

/* v210 — mobile profile avatar must stay clipped inside the circular ring. */
body[data-page="dashboard"] .profile-avatar-wrap {
  box-sizing: border-box !important;
  overflow: hidden !important;
}
body[data-page="dashboard"] .profile-avatar-wrap > .profile-avatar {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  clip-path: circle(50% at 50% 50%) !important;
}
@media (max-width: 620px) {
  body[data-page="dashboard"] .profile-avatar-wrap {
    width: 96px !important;
    height: 96px !important;
    padding: 4px !important;
    border-radius: 50% !important;
  }
  body[data-page="dashboard"] .profile-avatar-wrap > .profile-avatar {
    width: 100% !important;
    height: 100% !important;
    border-width: 4px !important;
  }
}

/* v211 compact recent + total metric cards */
body[data-page="dashboard"] .metric-tabs{grid-template-columns:repeat(3,minmax(0,1fr));}
body[data-page="dashboard"] .metric-tab .metric-subline{display:block;margin-top:6px;color:#a996c2;font-size:10px;line-height:1.25;text-transform:none;letter-spacing:0;}
body[data-page="dashboard"] .metric-tab .metric-subline b{color:#f3eaff;font-size:11px;}
body[data-page="dashboard"] [data-tiktok-audience][hidden]{display:none!important;}
@media(max-width:760px){body[data-page="dashboard"] .metric-tabs{grid-template-columns:1fr 1fr;}body[data-page="dashboard"] .metric-tab[data-chart-metric="youtube"]{grid-column:1/-1;}}

/* v212 — mobile Steam card + visible support actions + global donation chibi button. */

/* The dashboard Steam card uses the same complete, stacked mobile behavior as
   the working CS2 profile card. It must grow naturally and never crop actions. */
@media (max-width: 760px) {
  body[data-page="dashboard"] .steam-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body[data-page="dashboard"] .steam-panel > .panel-body,
  body[data-page="dashboard"] .steam-panel .steam-card {
    display: grid !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    align-content: start !important;
    gap: 22px !important;
  }
  body[data-page="dashboard"] .steam-panel .steam-card {
    padding: 24px 20px 22px !important;
  }
  body[data-page="dashboard"] .steam-panel .steam-profile {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 15px !important;
    min-height: 0 !important;
    text-align: center !important;
  }
  body[data-page="dashboard"] .steam-panel .steam-profile img {
    width: 154px !important;
    height: 154px !important;
    margin: 0 auto !important;
    padding: 5px !important;
    border-radius: 24px !important;
    object-fit: cover !important;
  }
  body[data-page="dashboard"] .steam-panel .steam-profile > div {
    display: grid !important;
    justify-items: center !important;
    gap: 7px !important;
    width: 100% !important;
  }
  body[data-page="dashboard"] .steam-panel .steam-profile h3 {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(1.35rem, 7vw, 1.8rem) !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  body[data-page="dashboard"] .steam-panel .steam-profile p {
    margin: 0 !important;
    text-align: center !important;
  }
  body[data-page="dashboard"] .steam-panel .steam-card .info-pairs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
  }
  body[data-page="dashboard"] .steam-panel .steam-card .info-pairs > div {
    min-height: 92px !important;
    padding: 15px 13px !important;
    display: grid !important;
    align-content: center !important;
  }
  body[data-page="dashboard"] .steam-panel .dashboard-steam-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 0 !important;
    width: 100% !important;
  }
  body[data-page="dashboard"] .steam-panel .dashboard-steam-buttons .button {
    width: 100% !important;
    min-height: 54px !important;
    padding: 13px 14px !important;
    white-space: normal !important;
  }
}
@media (max-width: 390px) {
  body[data-page="dashboard"] .steam-panel .steam-profile img {
    width: 132px !important;
    height: 132px !important;
  }
  body[data-page="dashboard"] .steam-panel .steam-card .info-pairs {
    grid-template-columns: 1fr !important;
  }
}

/* Support choices must look and behave like strong action buttons. */
body[data-page="support"] .support-tip-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  max-width: 620px !important;
  margin-top: 22px !important;
}
body[data-page="support"] .support-tip-actions .button {
  min-height: 58px !important;
  padding: 13px 20px !important;
  border: 1px solid rgba(211, 153, 255, .76) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #8d31f5, #5d20c9) !important;
  box-shadow: 0 12px 30px rgba(111, 32, 220, .28), inset 0 1px 0 rgba(255,255,255,.14) !important;
  color: #fff !important;
  font-size: 1.04rem !important;
  font-weight: 800 !important;
}
body[data-page="support"] .support-tip-actions .button:nth-child(2) {
  background: linear-gradient(135deg, rgba(109, 38, 202, .88), rgba(35, 17, 70, .96)) !important;
}
body[data-page="support"] .support-tip-actions .button:hover,
body[data-page="support"] .support-tip-actions .button:focus-visible {
  transform: translateY(-2px) !important;
  border-color: #e5b8ff !important;
  box-shadow: 0 16px 38px rgba(142, 49, 245, .38), 0 0 0 3px rgba(174, 91, 255, .14) !important;
}
body[data-page="support"] .support-hero > img {
  filter: drop-shadow(0 20px 32px rgba(0,0,0,.35)) drop-shadow(0 0 26px rgba(164,74,255,.25));
}
@media (max-width: 620px) {
  body[data-page="support"] .support-tip-actions {
    grid-template-columns: 1fr !important;
  }
}

/* One global, language-aware support shortcut on every public page. */
.global-support-button {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 48;
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  overflow: visible;
  border: 1px solid rgba(211, 153, 255, .68);
  border-radius: 23px;
  background: radial-gradient(circle at 45% 30%, rgba(142,49,245,.34), rgba(10,6,18,.96) 72%);
  box-shadow: 0 16px 40px rgba(0,0,0,.48), 0 0 0 4px rgba(133,44,233,.10), inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.global-support-button img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.28));
}
.global-support-button::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  min-width: max-content;
  padding: 8px 11px;
  border: 1px solid rgba(211,153,255,.45);
  border-radius: 9px;
  background: rgba(9,5,17,.96);
  color: #f4e6ff;
  font-size: .80rem;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(8px,-50%);
  transition: opacity .16s ease, transform .16s ease;
  white-space: nowrap;
}
.global-support-button:hover,
.global-support-button:focus-visible {
  transform: translateY(-3px) scale(1.03);
  border-color: #e5b8ff;
  box-shadow: 0 20px 46px rgba(0,0,0,.52), 0 0 0 5px rgba(145,52,249,.16);
  outline: none;
}
.global-support-button:hover::after,
.global-support-button:focus-visible::after {
  opacity: 1;
  transform: translate(0,-50%);
}
@media (max-width: 900px) {
  .global-support-button {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: 60px;
    height: 60px;
    border-radius: 19px;
  }
  .global-support-button img {
    width: 54px;
    height: 54px;
  }
  .global-support-button::after { display: none; }
}
@media print {
  .global-support-button { display: none !important; }
}


/* v213 — the donation chibi is a real, visibly labelled Tip/Donate button.
   Other decorative chibis remain separate; this control is never a random
   decoration and never becomes an unlabeled icon-only shortcut. */
.global-support-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 158px !important;
  height: 62px !important;
  padding: 5px 16px 5px 6px !important;
  gap: 10px !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  text-decoration: none !important;
}
.global-support-button img {
  flex: 0 0 auto !important;
  width: 50px !important;
  height: 50px !important;
  object-fit: contain !important;
}
.global-support-button span {
  display: block !important;
  color: #fff !important;
  font-size: .88rem !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: .015em !important;
  text-align: left !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.65) !important;
}
.global-support-button::after {
  content: none !important;
  display: none !important;
}
@media (max-width: 900px) {
  .global-support-button {
    right: 10px !important;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    min-width: 136px !important;
    height: 56px !important;
    padding: 4px 12px 4px 5px !important;
    gap: 7px !important;
    border-radius: 18px !important;
  }
  .global-support-button img {
    width: 46px !important;
    height: 46px !important;
  }
  .global-support-button span {
    max-width: 78px !important;
    font-size: .72rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }
}
@media (max-width: 360px) {
  .global-support-button {
    min-width: 124px !important;
    padding-right: 9px !important;
  }
  .global-support-button span { font-size: .67rem !important; }
}


/* v213 sparse decorative chibis: separate from the Tip/Donate action. */
.page-chibi-decoration {
  position: fixed;
  left: calc(var(--sidebar) + 18px);
  bottom: 18px;
  z-index: 12;
  display: block;
  width: 78px;
  height: 78px;
  object-fit: contain;
  opacity: .58;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.42)) drop-shadow(0 0 14px rgba(139,61,255,.22));
}
@media (max-width: 900px) {
  .page-chibi-decoration { display: none !important; }
}
@media print {
  .page-chibi-decoration { display: none !important; }
}


/* ========================================================================== 
   v214 — supplied platform artwork in a two-row footer link grid
   Presentation only. External destinations and existing legal links preserved.
   ========================================================================== */
.page-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 20px !important;
}

.page-footer .footer-social-grid {
  display: grid !important;
  width: min(860px, 100%);
  margin: 0 auto;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}

.page-footer .footer-social-link {
  grid-column: span 2;
  display: flex;
  min-width: 0;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(31, 18, 48, .9), rgba(9, 6, 17, .96));
  color: #f4eaff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.page-footer .footer-social-link:nth-child(5) { grid-column: 2 / span 2; }
.page-footer .footer-social-link:nth-child(6) { grid-column: 4 / span 2; }
.page-footer .footer-social-link:nth-child(7) { grid-column: 6 / span 2; }

.page-footer .footer-social-link:hover,
.page-footer .footer-social-link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: linear-gradient(145deg, rgba(90, 30, 145, .25), rgba(9, 6, 17, .98));
  color: #fff;
}

.page-footer .footer-social-link img {
  display: block;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  object-fit: contain;
}

.page-footer .footer-social-link span {
  min-width: 0;
  font-size: .95rem;
  line-height: 1;
  white-space: nowrap;
}

.page-footer .footer-meta-row {
  display: flex !important;
  width: 100%;
  align-items: center !important;
  justify-content: space-between;
  gap: 20px;
}

.page-footer .footer-meta-row > div {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 12px !important;
}

.page-footer .footer-meta-row > nav {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

@media (max-width: 620px) {
  .page-footer {
    gap: 16px !important;
  }

  .page-footer .footer-social-grid {
    width: 100%;
    gap: 7px;
  }

  .page-footer .footer-social-link {
    min-height: 63px;
    gap: 5px;
    padding: 7px 4px;
    border-radius: 10px;
    flex-direction: column;
  }

  .page-footer .footer-social-link img {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .page-footer .footer-social-link span {
    font-size: .68rem;
  }

  .page-footer .footer-meta-row {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .page-footer .footer-meta-row > div {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 3px !important;
  }
}


/* v215 — exact glossy sidebar link icons, two rows of four.
   The old central footer social block and floating Tip/Donate control are removed from HTML. */
.sidebar-footer {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.sidebar-footer .sidebar-socials,
.sidebar-footer .sidebar-socials-glossy {
  display: grid !important;
  grid-template-columns: repeat(4, 52px) !important;
  grid-auto-rows: 52px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: 232px !important;
  max-width: 100% !important;
  margin: 10px auto 12px !important;
}
.sidebar-footer .sidebar-socials a,
.sidebar-footer .sidebar-socials-glossy a {
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: transparent !important;
  overflow: visible !important;
  line-height: 0 !important;
  box-shadow: none !important;
  transform: translateZ(0);
  transition: transform .16s ease, filter .16s ease !important;
}
.sidebar-footer .sidebar-socials a img,
.sidebar-footer .sidebar-socials-glossy a img {
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  max-width: none !important;
  object-fit: contain !important;
  border-radius: 15px !important;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.38));
}
.sidebar-footer .sidebar-socials a svg,
.sidebar-footer .sidebar-socials-glossy a svg {
  display: none !important;
}
.sidebar-footer .sidebar-socials a:hover,
.sidebar-footer .sidebar-socials a:focus-visible,
.sidebar-footer .sidebar-socials-glossy a:hover,
.sidebar-footer .sidebar-socials-glossy a:focus-visible {
  transform: translateY(-2px) scale(1.04) !important;
  filter: brightness(1.08) !important;
  outline: 2px solid rgba(190, 90, 255, .7) !important;
  outline-offset: 2px !important;
}
.page-footer .footer-social-grid,
.global-support-button {
  display: none !important;
}
.page-footer .footer-meta-row {
  margin-top: 0 !important;
}
@media (max-width: 900px) {
  .sidebar-footer .sidebar-socials,
  .sidebar-footer .sidebar-socials-glossy {
    grid-template-columns: repeat(4, 48px) !important;
    grid-auto-rows: 48px !important;
    width: 216px !important;
    gap: 8px !important;
  }
  .sidebar-footer .sidebar-socials a,
  .sidebar-footer .sidebar-socials-glossy a,
  .sidebar-footer .sidebar-socials a img,
  .sidebar-footer .sidebar-socials-glossy a img {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }
}


/* v284 — responsive dashboard containment and correct analytics panel sizing.
   This only prevents cards from overlapping when the fixed sidebar leaves a
   narrow content area. It does not redesign the dashboard. */
body[data-page="dashboard"] .dashboard-columns,
body[data-page="dashboard"] .dashboard-column,
body[data-page="dashboard"] .panel,
body[data-page="dashboard"] .panel-body,
body[data-page="dashboard"] .analytics-panel,
body[data-page="dashboard"] .analytics-panel .panel-body {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
body[data-page="dashboard"] .panel { overflow: hidden !important; }
body[data-page="dashboard"] .analytics-panel .panel-body {
  display: grid !important;
  grid-template-rows: auto minmax(180px, auto) !important;
  gap: 14px !important;
}
body[data-page="dashboard"] .analytics-panel .metric-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}
body[data-page="dashboard"] .analytics-panel .metric-tab {
  min-width: 0 !important;
  min-height: 82px !important;
  height: auto !important;
  padding: 12px !important;
  overflow: hidden !important;
}
body[data-page="dashboard"] .analytics-panel .metric-tab[hidden],
body[data-page="dashboard"] .analytics-panel .metric-tab[data-chart-metric="tiktok"] {
  display: none !important;
}
body[data-page="dashboard"] .analytics-panel .chart-wrap {
  width: 100% !important;
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  overflow: hidden !important;
  position: relative !important;
}
body[data-page="dashboard"] .analytics-panel [data-performance-chart],
body[data-page="dashboard"] .analytics-panel .chart-wrap svg {
  display: block !important;
  width: 100% !important;
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
}
@media (max-width: 1300px) {
  body[data-page="dashboard"] .dashboard-columns {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-page="dashboard"] .dashboard-column:last-child {
    grid-column: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
@media (max-width: 620px) {
  body[data-page="dashboard"] .analytics-panel .metric-tabs {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-page="dashboard"] .analytics-panel .chart-wrap,
  body[data-page="dashboard"] .analytics-panel [data-performance-chart],
  body[data-page="dashboard"] .analytics-panel .chart-wrap svg {
    height: 176px !important;
    min-height: 176px !important;
    max-height: 176px !important;
  }
}


/* ========================================================================== 
   v285 — responsive, collapsible navigation and content-width breakpoints
   Navigation links, icons, page content and API/graph behavior are unchanged.
   ========================================================================== */
:root {
  --sidebar-rail-width: 84px;
  --sidebar-responsive-width: clamp(238px, 18vw, var(--sidebar-width-desktop, 300px));
}

.app-sidebar {
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

.app-sidebar .brand {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
}

.app-sidebar .sidebar-nav {
  display: grid !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  align-content: start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.app-sidebar .sidebar-nav::-webkit-scrollbar { width: 8px; }
.app-sidebar .sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.app-sidebar .sidebar-nav::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(187, 121, 255, .35);
  background-clip: padding-box;
}

.app-sidebar .sidebar-footer {
  flex: 0 0 auto;
  margin-top: 0 !important;
}

.sidebar-collapse-toggle {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgba(198, 142, 255, .34);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: #f4edff;
  font: 700 24px/1 var(--main-font-family, "Rajdhani", Arial, sans-serif);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.sidebar-collapse-toggle:hover {
  border-color: rgba(218, 165, 255, .66);
  background: rgba(154, 78, 255, .16);
}
.sidebar-collapse-toggle:focus-visible {
  outline: 2px solid rgba(233, 92, 255, .72);
  outline-offset: 2px;
}

.app-shell,
.app-topbar,
.page-content,
.page-footer {
  min-width: 0 !important;
}

@media (min-width: 901px) {
  body { --sidebar: var(--sidebar-responsive-width); }
  body.sidebar-collapsed { --sidebar: var(--sidebar-rail-width); }

  .app-sidebar {
    width: var(--sidebar) !important;
    transition: width .22s ease, box-shadow .22s ease, transform .22s ease;
  }
  .app-shell {
    width: calc(100% - var(--sidebar)) !important;
    max-width: calc(100% - var(--sidebar)) !important;
    margin-left: var(--sidebar) !important;
    transition: width .22s ease, max-width .22s ease, margin-left .22s ease;
  }
  .app-sidebar .brand {
    min-height: 74px !important;
    height: auto !important;
    gap: 10px !important;
    padding: 10px 14px !important;
  }
  .app-sidebar .brand strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(24px, 2vw, var(--sidebar-brand-desktop, 30px)) !important;
  }
  .app-sidebar .sidebar-nav {
    gap: 6px !important;
    padding: 14px 11px !important;
  }
  .app-sidebar .sidebar-nav a {
    min-height: 52px !important;
    height: auto !important;
    gap: 10px !important;
    padding: 9px 11px !important;
  }
  .app-sidebar .sidebar-nav a > span {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: clamp(18px, 1.4vw, var(--sidebar-font-desktop, 24px)) !important;
    line-height: 1.04 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .app-sidebar .sidebar-nav a[data-nav-label]::after {
    content: attr(data-nav-label);
    position: fixed;
    left: calc(var(--sidebar-rail-width) + 10px);
    z-index: 90;
    max-width: min(260px, calc(100vw - 120px));
    padding: 8px 10px;
    border: 1px solid rgba(190, 126, 255, .42);
    border-radius: 9px;
    background: rgba(8, 5, 18, .97);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .42);
    color: #fff;
    font: 700 14px/1.2 var(--main-font-family, "Rajdhani", Arial, sans-serif);
    letter-spacing: .02em;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body.sidebar-rail .app-sidebar .brand {
    justify-content: center !important;
    gap: 6px !important;
    padding-inline: 7px !important;
  }
  body.sidebar-rail .app-sidebar .brand img {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
  }
  body.sidebar-rail .app-sidebar .brand strong,
  body.sidebar-rail .app-sidebar .sidebar-nav a > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  body.sidebar-rail .sidebar-collapse-toggle {
    width: 28px;
    height: 32px;
    flex-basis: 28px;
    margin-left: 0;
    font-size: 21px;
  }
  body.sidebar-rail .app-sidebar .sidebar-nav {
    padding-inline: 10px !important;
  }
  body.sidebar-rail .app-sidebar .sidebar-nav a {
    justify-content: center !important;
    min-height: 52px !important;
    padding-inline: 8px !important;
  }
  body.sidebar-rail .app-sidebar .sidebar-nav a .sidebar-image-icon {
    width: 30px !important;
    height: 30px !important;
  }
  body.sidebar-rail .app-sidebar .sidebar-nav a:hover::after,
  body.sidebar-rail .app-sidebar .sidebar-nav a:focus-visible::after {
    opacity: 1;
    visibility: visible;
  }
  body.sidebar-rail .app-sidebar .sidebar-footer {
    padding: 10px 7px 14px !important;
  }
  body.sidebar-rail .app-sidebar .sidebar-chibi {
    width: 62px !important;
    margin-bottom: 0 !important;
  }
  body.sidebar-rail .app-sidebar .sidebar-socials,
  body.sidebar-rail .app-sidebar .sidebar-socials-glossy,
  body.sidebar-rail .app-sidebar .sidebar-footer small {
    display: none !important;
  }

  .sidebar-footer .sidebar-socials,
  .sidebar-footer .sidebar-socials-glossy {
    grid-template-columns: repeat(4, 46px) !important;
    grid-auto-rows: 46px !important;
    width: 208px !important;
    max-width: 100% !important;
  }
  .sidebar-footer .sidebar-socials a,
  .sidebar-footer .sidebar-socials-glossy a,
  .sidebar-footer .sidebar-socials a img,
  .sidebar-footer .sidebar-socials-glossy a img {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }

  .app-topbar {
    grid-template-columns: minmax(180px, 460px) minmax(0, 1fr) auto !important;
    gap: clamp(10px, 1.3vw, 18px) !important;
    padding-inline: clamp(14px, 1.8vw, 26px) !important;
  }
  .topbar-actions { min-width: 0; }
}

@media (min-width: 901px) and (max-width: 1280px) {
  body { --sidebar: var(--sidebar-rail-width); }
  body.sidebar-compact-open { overflow: hidden; }
  body.sidebar-compact-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, .48);
    backdrop-filter: blur(2px);
  }
  body.sidebar-compact-open .app-sidebar {
    z-index: 60;
    width: var(--sidebar-responsive-width) !important;
    box-shadow: 24px 0 64px rgba(0, 0, 0, .48);
  }
  .app-topbar {
    grid-template-columns: minmax(150px, 1fr) auto !important;
  }
  .app-topbar .topbar-spacer { display: none !important; }
  .app-topbar .search-button { max-width: 360px; }
  .topbar-actions { gap: 7px !important; }
}

@media (min-width: 901px) and (max-width: 1080px) {
  .topbar-actions .top-link { display: none !important; }
  .app-topbar .search-button span:last-child { display: none; }
  .app-topbar .search-button {
    width: 42px;
    min-width: 42px;
    justify-content: center;
    padding: 0;
  }
}

@media (min-width: 901px) and (max-height: 840px) {
  .app-sidebar .brand { min-height: 68px !important; }
  .app-sidebar .sidebar-nav a {
    min-height: 48px !important;
    padding-block: 7px !important;
  }
  .app-sidebar .sidebar-chibi { width: 76px !important; }
  .app-sidebar .sidebar-footer { padding-top: 8px !important; padding-bottom: 12px !important; }
  .sidebar-footer .sidebar-socials,
  .sidebar-footer .sidebar-socials-glossy {
    grid-template-columns: repeat(4, 40px) !important;
    grid-auto-rows: 40px !important;
    width: 184px !important;
    gap: 8px !important;
    margin-block: 6px 8px !important;
  }
  .sidebar-footer .sidebar-socials a,
  .sidebar-footer .sidebar-socials-glossy a,
  .sidebar-footer .sidebar-socials a img,
  .sidebar-footer .sidebar-socials-glossy a img {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
}

@media (max-width: 900px) {
  body { --sidebar: 0px; }
  body.nav-open { overflow: hidden; }
  .app-sidebar {
    width: min(var(--sidebar-width-mobile, 290px), calc(100vw - 18px)) !important;
    max-width: calc(100vw - 18px) !important;
  }
  .sidebar-collapse-toggle { display: none !important; }
  .app-sidebar .sidebar-nav {
    padding-bottom: 14px !important;
  }
  .app-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 620px) {
  .mobile-brand { display: none !important; }
  .app-topbar {
    grid-template-columns: 42px minmax(42px, 1fr) auto !important;
  }
  .topbar-actions { min-width: 0; }
}

@media (max-width: 430px) {
  .language-flags { gap: 1px !important; padding: 2px !important; }
  .language-flag { width: 27px !important; height: 27px !important; }
  .language-flag img { width: 24px !important; height: 24px !important; }
  .topbar-actions > .icon-button:last-child { display: none !important; }
}

/* Use the real content width, not only the browser width, when deciding how
   many columns can fit beside the navigation. */
.page-content {
  container-type: inline-size;
  container-name: c4tm30w-page;
}

@container c4tm30w-page (max-width: 1180px) {
  body[data-page="dashboard"] .dashboard-top {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-page="dashboard"] .dashboard-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body[data-page="dashboard"] .dashboard-column-wide {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
  body[data-page="projects"] .project-jump-nav,
  .project-jump-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .playlist-grid,
  .recommendations-grid,
  .tool-link-grid,
  .support-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@container c4tm30w-page (max-width: 820px) {
  body[data-page="dashboard"] .dashboard-columns {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-page="dashboard"] .dashboard-column-wide {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .project-jump-nav,
  .project-grid,
  .project-grid-v4,
  .tools-board,
  .support-action-grid,
  .gallery-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .project-jump-nav .project-overview-card {
    min-height: 0 !important;
    max-height: none !important;
  }
  .page-grid > .two-thirds,
  .page-grid > .one-third,
  .page-grid > .half { grid-column: span 12 !important; }
  .media-grid,
  .playlist-grid,
  .recommendations-grid,
  .tool-link-grid,
  .support-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@container c4tm30w-page (max-width: 540px) {
  .media-grid,
  .playlist-grid,
  .recommendations-grid,
  .tool-link-grid,
  .support-link-grid,
  .youtube-grid,
  .copy-grid,
  .settings-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v303 navigation grouping + cross-browser/mobile safe-area refinement */
.sidebar-nav-divider{display:block;height:1px;margin:8px 12px;background:linear-gradient(90deg,transparent,rgba(186,102,255,.42),transparent);flex:0 0 auto}
@supports (padding: max(0px)){.app-sidebar{padding-top:max(var(--sidebar-pad-top,0px),env(safe-area-inset-top));padding-bottom:max(var(--sidebar-pad-bottom,0px),env(safe-area-inset-bottom))}.mobile-topbar{padding-top:max(0px,env(safe-area-inset-top))}}
.sidebar-nav a{min-width:0}
.sidebar-nav a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1100px){.sidebar-nav-divider{margin-inline:8px}}
@media (max-width:760px){html,body{max-width:100%;overflow-x:hidden}.sidebar-nav a{min-height:48px}.sidebar-nav a span{white-space:normal;overflow-wrap:anywhere;line-height:1.15}.sidebar-nav-divider{margin:6px 10px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* v304 — compact maker statistics + restored mobile navigation */
@font-face {
  font-family: "Scratchmeow5";
  src: url("../fonts/Scratchmeow5-Regular.woff2") format("woff2"),
       url("../fonts/Scratchmeow5-Regular.ttf") format("truetype");
  font-display: swap;
}

/* Match the compact statistic pills already used by project pages. */
.maker-engagement {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-height: 0 !important;
  margin: 12px 0 18px !important;
  padding: 10px 12px !important;
}
.maker-engagement .project-heart,
.maker-engagement .project-download-stat {
  display: inline-flex !important;
  width: auto !important;
  min-width: 112px !important;
  min-height: 38px !important;
  height: 38px !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 6px 13px !important;
  border-radius: 999px !important;
}
.maker-engagement .project-stat-icon {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  object-fit: contain !important;
}
.maker-engagement .project-download-stat span {
  font-size: .82rem !important;
  white-space: nowrap !important;
}
.maker-engagement > .button {
  width: auto !important;
  min-height: 38px !important;
  padding: 7px 14px !important;
  margin: 0 !important;
}

/* The phone top bar and three-stripe control must always exist. */
.scratchmeow-menu-glyph {
  display: block;
  font-family: "Scratchmeow5", sans-serif !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  line-height: .72 !important;
  transform: translateY(-1px);
}
@media (max-width: 900px) {
  .app-topbar {
    display: grid !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 70 !important;
  }
  .mobile-menu[data-mobile-menu] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 76 !important;
    border: 1px solid rgba(194,120,255,.62) !important;
    border-radius: 10px !important;
    background: rgba(43,16,70,.92) !important;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(156,70,255,.2) !important;
    cursor: pointer !important;
  }
  .app-sidebar {
    display: flex !important;
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 90 !important;
    transform: translateX(-105%) !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    transition: transform .22s ease !important;
  }
  body.nav-open .app-sidebar {
    transform: translateX(0) !important;
  }
  body.nav-open::after {
    z-index: 80 !important;
  }
}
@media (max-width: 620px) {
  .app-topbar {
    grid-template-columns: 52px minmax(42px,1fr) auto !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }
  .maker-engagement {
    align-items: stretch !important;
  }
  .maker-engagement .project-heart,
  .maker-engagement .project-download-stat {
    min-width: 0 !important;
  }
}
@media (max-width: 430px) {
  .maker-engagement .project-heart,
  .maker-engagement .project-download-stat {
    flex: 1 1 calc(50% - 4px) !important;
  }
  .maker-engagement > .button {
    flex: 1 1 100% !important;
    justify-content: center !important;
  }
  .maker-engagement .project-download-stat span {
    display: none !important;
  }
}


/* v305 — same Scratchmeow arrow as desktop, rotated upward for back-to-top */
.back-to-top-scratchmeow{
  display:none;position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));
  z-index:68;width:48px;height:48px;padding:0;align-items:center;justify-content:center;
  border:1px solid rgba(205,126,255,.72);border-radius:14px;background:rgba(31,10,50,.94);color:#fff;
  box-shadow:0 0 20px rgba(172,68,255,.32);cursor:pointer;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,border-color .18s ease,background .18s ease;
}
.back-to-top-scratchmeow span{display:block;font-family:"Scratchmeow5","Rajdhani",sans-serif;font-size:38px;line-height:1;transform:rotate(-90deg);transform-origin:center;}
.back-to-top-scratchmeow:hover{border-color:#ed8cff;background:rgba(71,20,107,.97)}
.back-to-top-scratchmeow:focus-visible{outline:2px solid #f06cff;outline-offset:3px}
@media (max-width:900px){.back-to-top-scratchmeow{display:inline-flex}.back-to-top-scratchmeow.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}body.nav-open .back-to-top-scratchmeow{opacity:0;pointer-events:none}}
@media (prefers-reduced-motion:reduce){.back-to-top-scratchmeow{transition:none}}


/* v309 — maker coffee action moved below the maker, matching project-page placement */
.maker-support-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 0;padding:16px 18px;border:1px solid rgba(179,104,231,.34);border-radius:16px;background:rgba(22,10,34,.72)}
.maker-support-footer p{margin:0;max-width:760px;color:var(--muted,#c9bdd4);line-height:1.5}
.maker-support-footer .button{flex:0 0 auto;white-space:nowrap}
@media(max-width:620px){.maker-support-footer{align-items:stretch;flex-direction:column}.maker-support-footer .button{width:100%;justify-content:center}}

/* v315: keep sidebar footer visible on normal desktop/laptop heights */
@media (min-width: 901px) and (max-height: 1100px) {
  .app-sidebar .brand { min-height: 62px !important; padding-block: 6px !important; }
  .app-sidebar .sidebar-nav { gap: 3px !important; padding-block: 8px !important; }
  .app-sidebar .sidebar-nav a { min-height: 43px !important; padding-block: 5px !important; }
  .app-sidebar .sidebar-nav a > span { font-size: clamp(17px, 1.25vw, 21px) !important; }
  .app-sidebar .sidebar-footer { padding: 5px 10px 8px !important; }
  .app-sidebar .sidebar-chibi { width: 66px !important; margin-bottom: 0 !important; }
  .sidebar-footer .sidebar-socials,
  .sidebar-footer .sidebar-socials-glossy {
    grid-template-columns: repeat(4, 31px) !important;
    grid-auto-rows: 31px !important;
    width: 142px !important;
    gap: 5px !important;
    margin: 3px auto 5px !important;
  }
  .sidebar-footer .sidebar-socials a,
  .sidebar-footer .sidebar-socials-glossy a,
  .sidebar-footer .sidebar-socials a img,
  .sidebar-footer .sidebar-socials-glossy a img {
    width: 31px !important; height: 31px !important; min-width: 31px !important; min-height: 31px !important;
  }
  .app-sidebar .sidebar-footer small { font-size: 10px !important; }
}

/* v329 — mobile project cards: one readable card per row */
@media screen and (max-width: 820px) {
  body[data-page="projects"] .project-jump-nav,
  body[data-page="projects"] .project-grid,
  body[data-page="projects"] .project-grid-v4,
  body[data-page="projects"] .projects-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }
  body[data-page="projects"] .project-overview-card,
  body[data-page="projects"] .project-card-v4,
  body[data-page="projects"] .project-grid > article {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* ========================================================================== 
   v333 — C4TM30W BALANCED FLUID SITE SHELL
   Presentation-only. The page uses all available width AFTER the sidebar,
   with equal left/right breathing room. No project/download/data behavior.
   ========================================================================== */
:root {
  --c4-page-edge: clamp(22px, 1.65vw, 40px);
  --c4-page-top: clamp(18px, 1.4vw, 28px);
  --c4-section-gap: clamp(18px, 1.35vw, 30px);
  --c4-card-gap: clamp(12px, 1vw, 18px);
}

/* Desktop shell math: sidebar + remaining viewport, never a centered 1500px island. */
@media (min-width: 901px) {
  body[data-page] .app-shell {
    box-sizing: border-box !important;
    width: calc(100% - var(--sidebar)) !important;
    max-width: none !important;
    margin-left: var(--sidebar) !important;
    margin-right: 0 !important;
  }
}

/* Exact balanced content width inside the shell. The stronger selector is
   intentional so older page-specific !important width caps cannot win. */
body[data-page] main.page-content,
body[data-page] .page-footer {
  box-sizing: border-box !important;
  width: calc(100% - var(--c4-page-edge) - var(--c4-page-edge)) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body[data-page] main.page-content {
  padding-top: var(--c4-page-top) !important;
  padding-bottom: clamp(36px, 3vw, 54px) !important;
  container-type: inline-size;
  container-name: c4tm30w-page;
}

/* Consistent rhythm. */
body[data-page] main.page-content > * + * {
  margin-top: var(--c4-section-gap) !important;
}
body[data-page] :is(
  .dashboard-top,.dashboard-columns,.dashboard-column,.page-grid,.copy-grid,
  .column-stack,.media-grid,.playlist-grid,.recommendations-grid,.tool-link-grid,
  .support-link-grid,.tools-board,.project-grid,.project-grid-v4,.project-showcase,
  .project-jump-nav,.support-action-grid,.medal-grid,.gallery-grid,.cs2-link-card-grid,
  .cs2-tool-grid,.real-project-information,.project-package-grid,
  .project-verification-stats,.cms-screenshot-grid
) {
  gap: var(--c4-card-gap) !important;
}

/* Fill the available cells; only prose is intentionally width-limited. */
body[data-page] :is(
  .panel,.real-project,.project-overview-card,.project-card-v4,.tool-card-pro,
  .tool-link-card,.support-link-card,.project-info-panel,.project-package-panel,
  .project-verification-panel,.site-screenshot-gallery,.maker-project-page
) {
  min-width: 0 !important;
  max-width: none !important;
}
body[data-page] :is(
  .page-title-row > div:first-child > p:not(.eyebrow),
  .article-text,.reading-width,.long-description
) {
  max-width: 1000px;
}

/* Dashboard consumes the whole balanced content region. */
body[data-page="dashboard"] .dashboard-top,
body[data-page="dashboard"] .dashboard-columns {
  width: 100% !important;
  max-width: none !important;
}

/* Tablet: smaller but still equal page edges. */
@media (max-width: 900px) {
  :root {
    --c4-page-edge: clamp(16px, 2.6vw, 24px);
    --c4-page-top: clamp(14px, 2vw, 20px);
    --c4-section-gap: clamp(16px, 2.2vw, 22px);
    --c4-card-gap: clamp(12px, 2vw, 16px);
  }
  body[data-page] .app-shell {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body[data-page] main.page-content,
  body[data-page] .page-footer {
    width: calc(100% - var(--c4-page-edge) - var(--c4-page-edge)) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
}

/* Phone: compact equal edges and readable full-width cards. */
@media (max-width: 620px) {
  :root {
    --c4-page-edge: clamp(12px, 3.8vw, 16px);
    --c4-page-top: clamp(12px, 3vw, 18px);
    --c4-section-gap: clamp(14px, 3.5vw, 20px);
    --c4-card-gap: clamp(10px, 3vw, 14px);
  }
  .real-project-header,
  .panel-body,
  .project-info-panel,
  .project-package-panel,
  .project-verification-panel {
    padding-left: clamp(14px, 4vw, 18px) !important;
    padding-right: clamp(14px, 4vw, 18px) !important;
  }
}

/* Projects: never squeeze multiple project cards beside one another on phones. */
@media screen and (max-width: 820px) {
  body[data-page="projects"] :is(.project-jump-nav,.project-grid,.project-grid-v4,.projects-grid) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }
  body[data-page="projects"] :is(.project-overview-card,.project-card-v4,.project-grid > article) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}


/* v334 — Tools categories: Scratchmeow5 uppercase headers + sidebar-style dividers. */
@font-face {
  font-family: "Scratchmeow5";
  src: url("../fonts/Scratchmeow5-Regular.ttf") format("truetype");
  font-display: swap; font-style: normal; font-weight: 400;
}
body[data-page="tools"] .tools-categories{display:flex!important;flex-direction:column;width:100%;min-width:0;gap:0!important}
body[data-page="tools"] .tools-category{width:100%;min-width:0;padding-block:clamp(14px,1.4vw,22px)}
body[data-page="tools"] .tools-category:first-child{padding-top:4px}
body[data-page="tools"] .tools-category-separated{position:relative;margin-top:clamp(4px,.6vw,8px);padding-top:clamp(22px,2vw,30px)}
body[data-page="tools"] .tools-category-separated::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(186,102,255,.42),transparent)}
body[data-page="tools"] .tools-category-heading{display:flex;align-items:center;min-height:34px;margin:0 0 clamp(10px,1vw,14px)}
body[data-page="tools"] .tools-category-title{margin:0;font-family:"Scratchmeow5","Scratchmeow5","Rajdhani","Arial Narrow",Arial,sans-serif!important;font-size:clamp(22px,1.7vw,30px);line-height:1.05;font-weight:400!important;letter-spacing:.035em;text-transform:uppercase;color:#f4ecff;font-synthesis:none}
body[data-page="tools"] .tools-category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(12px,1.2vw,18px);width:100%;min-width:0}
body[data-page="tools"] .tools-category-grid>.tool-card-pro{width:100%;min-width:0;max-width:none!important}
@media(max-width:820px){body[data-page="tools"] .tools-category{padding-block:14px}body[data-page="tools"] .tools-category-separated{padding-top:20px;margin-top:2px}body[data-page="tools"] .tools-category-heading{margin-bottom:10px}body[data-page="tools"] .tools-category-title{font-size:24px}body[data-page="tools"] .tools-category-grid{grid-template-columns:minmax(0,1fr)!important;gap:12px}}


/* v335 — Tools priority order + compact footer rhythm.
   Keep the follow strip aligned to the same balanced page edges and remove
   the oversized dead zone below the final tool category. */
body[data-page="tools"] main.page-content {
  padding-bottom: clamp(14px, 1.25vw, 22px) !important;
}
body[data-page="tools"] .tools-category:last-child {
  padding-bottom: clamp(8px, .8vw, 14px) !important;
}
body[data-page="tools"] .follow-platform-strip {
  box-sizing: border-box !important;
  width: calc(100% - var(--c4-page-edge) - var(--c4-page-edge)) !important;
  max-width: none !important;
  margin: clamp(10px, 1vw, 16px) auto 0 !important;
}
body[data-page="tools"] .page-footer {
  margin-top: clamp(10px, 1vw, 16px) !important;
}
@media (max-width: 620px) {
  body[data-page="tools"] main.page-content { padding-bottom: 10px !important; }
  body[data-page="tools"] .tools-category:last-child { padding-bottom: 6px !important; }
  body[data-page="tools"] .follow-platform-strip {
    width: calc(100% - var(--c4-page-edge) - var(--c4-page-edge)) !important;
    margin-top: 10px !important;
  }
  body[data-page="tools"] .page-footer { margin-top: 10px !important; }
}


/* v345 — Site-wide branded headings: Scratchmeow5 + uppercase. */
@font-face{
  font-family:'Scratchmeow5';
  src:url('../fonts/Scratchmeow5-Regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
:where(
  h1,h2,h3,h4,h5,h6,
  .page-title,.section-title,.hero-title,.project-title,.maker-title,
  .real-project-header h1,.real-project-header h2,.real-project-header h3,
  .dashboard-section-title,.content-section-title,.tool-category-title,
  .tools-category-title,.category-title,.panel-title,.card-section-title,
  .quickGuide h2,.maker-project-page h1,.maker-project-page h2,.maker-project-page h3,
  .project-page h1,.project-page h2,.project-page h3,
  .page-content > header h1,.page-content > header h2,.page-content > header h3,
  main h1,main h2,main h3
){
  font-family:'Scratchmeow5',Inter,'Segoe UI',Arial,sans-serif !important;
  font-weight:400 !important;
  text-transform:uppercase !important;
  letter-spacing:.01em;
}


/* v346 — C4TM30W heading rule: every visible heading-like title uses Scratchmeow5 CAPS. */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .page-title,
html body .page-title-row h1,
html body .page-title-row h2,
html body .real-project-header h1,
html body .real-project-header h2,
html body .real-project-header h3,
html body .tools-category-title,
html body .tool-card-copy h2,
html body .tool-card-copy h3,
html body .recommendation-card h3,
html body .recommendation-card h2,
html body .counter-subnav a,
html body .cs2-service-card h2,
html body .cs2-service-card h3,
html body .cs2-group-head,
html body .panel-head h2,
html body .panel-head h3,
html body .project-card h2,
html body .project-card h3,
html body .project-overview-card h2,
html body .project-overview-card h3,
html body .game-card h2,
html body .game-card h3,
html body .media-card h2,
html body .media-card h3,
html body .playlist-card h2,
html body .playlist-card h3,
html body .copy-card h2,
html body .copy-card h3,
html body [class*="section-title"],
html body [class*="sectionTitle"],
html body [class*="card-title"],
html body [class*="cardTitle"] {
  font-family:'Scratchmeow5',Inter,'Segoe UI',Arial,sans-serif !important;
  font-weight:400 !important;
  text-transform:uppercase !important;
  letter-spacing:.02em !important;
  font-synthesis:none !important;
}


/* v347 — Correct semantic branding rule.
   Scratchmeow5 CAPS is for real headers/titles and project names.
   Program/tool names and creator/channel names are content names, not headers. */

/* Tool/program names: readable content font, preserve product capitalization. */
html body[data-page="tools"] .tool-card-copy h1,
html body[data-page="tools"] .tool-card-copy h2,
html body[data-page="tools"] .tool-card-copy h3,
html body[data-page="tools"] .tool-card-copy h4 {
  font-family:Inter,'Segoe UI',Arial,sans-serif !important;
  font-weight:700 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
}

/* Recommended creator/channel names: readable content font, preserve their actual names. */
html body[data-page="recommendations"] .recommendation-card h1,
html body[data-page="recommendations"] .recommendation-card h2,
html body[data-page="recommendations"] .recommendation-card h3,
html body[data-page="recommendations"] .recommendation-card h4,
html body .creator-card .creator-name,
html body .recommendation-card .creator-name {
  font-family:Inter,'Segoe UI',Arial,sans-serif !important;
  font-weight:700 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
}

/* Project names ARE headers, including project overview cards whose title is a <strong>. */
html body[data-page="projects"] .project-overview-card > strong,
html body[data-page="projects"] .project-card .project-name,
html body[data-page="projects"] .project-title,
html body [data-project-slug] > .project-name {
  font-family:'Scratchmeow5',Inter,'Segoe UI',Arial,sans-serif !important;
  font-weight:400 !important;
  text-transform:uppercase !important;
  letter-spacing:.02em !important;
  font-synthesis:none !important;
}


/* v348 — Readability scope for Scratchmeow5.
   Scratchmeow5 is reserved for short structural headers/project names.
   Sentence-like content titles stay in the normal readable UI font. */
html body .schedule-item h3,
html body .media-card h3,
html body .media-card-copy h3,
html body [data-live-page-title],
html body [data-media-youtube] .media-card h3,
html body [data-media-vods] .media-card h3,
html body [data-media-clips] .media-card h3,
html body [data-live-vods] .media-card h3,
html body [data-live-clips] .media-card h3 {
  font-family:Inter,'Segoe UI',Arial,sans-serif !important;
  font-weight:700 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  font-synthesis:auto !important;
}

/* Dynamic stream/VOD/video titles are content, even when rendered in heading elements. */
html body [data-live-page-title],
html body .schedule-item h3,
html body .media-card h3 {
  line-height:1.35 !important;
}


/* v374 — requested tool-button/empty-space polish + Goal Maker wrapper-only polish.
   Goal Maker runtime files are untouched. Decorative art is desktop-only. */
@media (min-width: 821px) {
  body[data-page="tools"] .tools-category-grid > .tool-card-pro:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    position: relative;
    overflow: hidden;
    min-height: 178px;
    padding-right: clamp(240px, 22vw, 360px);
  }
  body[data-page="tools"] .tools-category-grid > .tool-card-pro:last-child:nth-child(odd) .tool-card-copy {
    position: relative;
    z-index: 2;
    max-width: 960px;
  }
  body[data-page="tools"] .tools-category-grid > .tool-card-pro:last-child:nth-child(odd)::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -54px;
    right: clamp(12px, 3vw, 50px);
    width: clamp(220px, 20vw, 330px);
    height: calc(100% + 108px);
    pointer-events: none;
    opacity: .42;
    background: none;
    filter: drop-shadow(0 0 24px rgba(150,73,255,.22));
  }
  body[data-page="tools"] .tools-category:nth-of-type(3) .tools-category-grid > .tool-card-pro:last-child:nth-child(odd)::after {
    background-image: none;
    opacity: .48;
  }
}
@media (max-width: 820px) {
  body[data-page="tools"] .tools-category-grid > .tool-card-pro:last-child:nth-child(odd) {
    grid-column: auto;
    min-height: 0;
    padding-right: 18px;
  }
  body[data-page="tools"] .tools-category-grid > .tool-card-pro:last-child:nth-child(odd)::after { display: none; }
}

body[data-page="goal-maker-shell"] .goal-maker-shell-engagement {
  flex: 0 0 auto;
  align-self: flex-end;
}
body[data-page="goal-maker-shell"] .goal-maker-shell-engagement .maker-engagement {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body[data-page="goal-maker-shell"] .goal-maker-embed-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
body[data-page="goal-maker-shell"] .goal-maker-embed {
  position: relative;
  z-index: 1;
}
@media (min-width: 1181px) {
  body[data-page="goal-maker-shell"] .goal-maker-embed-wrap::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: clamp(22px, 3vw, 54px);
    top: 700px;
    width: clamp(250px, 20vw, 350px);
    height: 330px;
    pointer-events: none;
    opacity: .20;
    background: none;
    filter: saturate(.9) drop-shadow(0 0 28px rgba(148,69,255,.18));
    -webkit-mask-image: radial-gradient(ellipse at center, #000 46%, rgba(0,0,0,.7) 68%, transparent 86%);
    mask-image: radial-gradient(ellipse at center, #000 46%, rgba(0,0,0,.7) 68%, transparent 86%);
  }
}
@media (max-width: 1180px) {
  body[data-page="goal-maker-shell"] .goal-maker-embed-wrap::after { display: none; }
  body[data-page="goal-maker-shell"] .goal-maker-shell-engagement { align-self: flex-start; }
}