/* Homepage layout templates — Admin > Homepage > Homepage Template.
   Only ever loaded on index.html. 'default' (no attribute set) means this
   entire file matches nothing and changes nothing — the three alternate
   templates are applied by main.js's initHomepageLayout() setting
   `data-homepage-layout` on <body> and moving the existing apps/featured/
   extra sections into a new shell, never duplicating their content. */

body[data-homepage-layout] .hp-shell {
  display: grid;
  gap: 36px;
  padding: 56px 0 24px;
  align-items: start;
}

/* Directory Split and Command Rail use the exact same sidebar (see
   buildHomepageSidebar() in main.js) sitting on the same side, so they
   share one column track. Command Rail's distinguishing feature is its
   bento-sized first app card (below), not a different sidebar. Widened
   260px -> 320px (max) — category labels ("EFI & System Access") and
   Sidebar Links titles ("How to Open Apps from...") were truncating with
   ellipsis at the old width. */
body[data-homepage-layout="directory-split"] .hp-shell,
body[data-homepage-layout="command-rail"] .hp-shell {
  grid-template-columns: minmax(260px, 320px) 1fr;
}

body[data-homepage-layout="spotlight-grid"] .hp-shell {
  /* Slightly wider than Directory Split's sidebar — this one now carries
     richer content (trending items with a category badge under each name),
     so it needs a bit more breathing room to avoid title truncation.
     Widened 320px -> 360px along with the other two, same reason. */
  grid-template-columns: 1fr minmax(300px, 360px);
}

.hp-main {
  min-width: 0;
}

/* .hp-shell is itself a .container (24px horizontal padding, matching
   value-props/every other section), but the stats-banner/value-props/apps/
   featured/extra sections moved inside .hp-main each carry their OWN inner
   .container div from the static markup — left in place unmodified so
   nothing about their DOM structure changes. Left as-is, that inner
   .container would add its own 24px padding on TOP of .hp-shell's, pushing
   their content in twice as far as the sidebar and visibly misaligning
   everything from each other. Neutralized here rather than restructuring
   the moved markup, since .hp-shell's own padding is already the single
   correct source of the page's horizontal rhythm. */
body[data-homepage-layout] .hp-main > .stats-banner > .container,
body[data-homepage-layout] .hp-main > .value-props > .container,
body[data-homepage-layout] .hp-main .apps-section > .container {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* --- Sidebar (Directory Split + Spotlight Grid) --------------------------- */

.hp-sidebar {
  position: sticky;
  /* Was 100px — sat noticeably below the top of the viewport once scrolled.
     84px = the sticky top navbar's own height (72px, see .nav-inner in
     styles.css) plus a 12px gap, the minimum that still clears it without
     visually touching it. This is the right number for the 'full'/classic
     navbar style, which stays pinned at the top permanently. */
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Dock mode (currently the live navbar_style) hides the top bar entirely
   past scrollTop > 8 — `.navbar.navbar--scrolled { transform:
   translateY(-100%); opacity: 0; }` in the dock branch of
   admin_theme_css() — so once scrolled there's no persistent top navbar
   left to clear at all, and the 84px offset above was pure dead space
   above the sidebar (confirmed from a live screenshot, not guessed).
   `.dock-navbar-active` is the same body class initDockNavbar() sets in
   js/main.js for the footer-clearance fix — reused here since it already
   reliably reflects "dock mode is the active navbar style" with zero new
   JS needed. 20px matches the small resting gap other fixed UI on the
   page already uses. */
body.dock-navbar-active .hp-sidebar {
  top: 20px;
}

.hp-sidebar-title {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin: 0 0 10px;
  font-weight: 700;
}

/* Wraps a heading + its list ("Most Downloaded", "More to Read") as one
   unit, matching .hp-sidebar-categories' own structure — keeps the small
   3px gap scoped to inside the block, so .hp-sidebar's larger 22px gap only
   ever separates whole sections from each other, not a heading from its own
   content underneath it. */
.hp-sidebar-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hp-sidebar-categories {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hp-sidebar-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}

.hp-sidebar-cat:hover {
  background: var(--glass-bg-hover, rgba(127, 127, 127, 0.12));
}

.hp-sidebar-cat--active {
  background: var(--accent-gradient);
  color: #fff;
}

/* .hp-sidebar-cat:hover above only sets `background` (not `color`), but
   :hover's specificity (1 class + 1 pseudo-class) still beats
   .hp-sidebar-cat--active's plain 1-class selector on that shared
   `background` property — so hovering the active row swapped its
   accent-gradient background for the translucent glass-hover one while its
   text stayed white from --active, leaving unreadable white-on-light text.
   This selector needs 2 classes + 1 pseudo-class to outrank both.
   Site defaults to dark mode (no [data-theme] attribute); [data-theme="light"]
   is the override, matching the pattern used everywhere else in this file
   (e.g. the light-mode --navbar-glass-highlight override). glass-bg-hover
   is a translucent dark tint by default and a translucent light tint under
   [data-theme="light"] (see --glass-bg-hover in styles.css), so the
   readable text color has to flip with it: white against the dark-mode
   tint, black against the light-mode one. */
.hp-sidebar-cat--active:hover {
  color: #fff;
}

[data-theme="light"] .hp-sidebar-cat--active:hover {
  color: #000;
}

.hp-sidebar-cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 0.15s ease;
}

.hp-sidebar-cat-icon svg {
  width: 16px;
  height: 16px;
}

.hp-sidebar-cat:hover .hp-sidebar-cat-icon,
.hp-sidebar-cat--active .hp-sidebar-cat-icon {
  opacity: 1;
}

.hp-sidebar-cat-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-sidebar-cat-count {
  font-size: 0.72rem;
  opacity: 0.7;
  background: rgba(127, 127, 127, 0.16);
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.hp-sidebar-cat--active .hp-sidebar-cat-count {
  background: rgba(255, 255, 255, 0.28);
  opacity: 1;
}

.hp-sidebar-trending {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hp-sidebar-trending-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 0.88rem;
  transition: background 0.15s ease;
}

.hp-sidebar-trending-item:hover {
  background: var(--glass-bg-hover, rgba(127, 127, 127, 0.12));
}

.hp-sidebar-trending-item img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
}

.hp-sidebar-trending-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hp-sidebar-trending-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-sidebar-trending-cat {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  opacity: 0.8;
}

/* Real site stats (same 4 numbers as the homepage Stats Banner) — sits
   right above the CTA, replacing the old "App Directory" header block that
   used to open the sidebar. 2x2 glass-tile grid rather than a plain list so
   it reads as a distinct little panel, not just more text in the column. */
.hp-sidebar-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.hp-sidebar-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--glass-bg-hover, rgba(127, 127, 127, 0.12));
  text-align: center;
}

.hp-sidebar-stat-value {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hp-sidebar-stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.hp-sidebar-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 16px;
  border-radius: var(--btn-radius, 999px);
  background: var(--accent-gradient);
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  margin-top: auto;
  transition: transform 0.2s var(--ease-premium), filter 0.2s var(--ease-premium);
}

.hp-sidebar-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* --- Spotlight card (Spotlight Grid) ---------------------------------------- */

.hp-spotlight {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px;
  border-radius: calc(var(--radius) + 6px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  text-decoration: none;
  color: var(--text-primary);
  margin-bottom: 32px;
  transition: transform 0.3s var(--ease-premium), border-color 0.3s var(--ease-premium);
}

.hp-spotlight:hover {
  transform: translateY(-3px);
  border-color: var(--accent-purple);
}

.hp-spotlight-media {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: rgba(127, 127, 127, 0.08);
}

.hp-spotlight-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-spotlight-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-purple);
  font-weight: 700;
  margin-bottom: 8px;
}

.hp-spotlight-copy h3 {
  margin: 0 0 8px;
  font-size: 1.6rem;
}

.hp-spotlight-copy p {
  margin: 0 0 18px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.hp-spotlight-cta {
  display: inline-flex;
}

/* --- Bento first card (Command Rail) --------------------------------------- */
/* Command Rail used to lead with a separate "Spotlight" card identical to
   Spotlight Grid's — but stacked directly under the hero, which already
   shows the same kind of promotional content, it just read as a redundant
   repeat. Removed (see main.js) in favor of giving the apps grid's own
   first card real visual weight instead: it spans a 2x2 area with a larger
   icon/title, and `grid-auto-flow: dense` lets the smaller cards that
   follow fill in the remaining cells around it rather than leaving a gap —
   a genuine bento layout built from real grid data, not a bolted-on extra
   component. */
body[data-homepage-layout="command-rail"] .hp-main .app-grid {
  grid-auto-flow: dense;
}

body[data-homepage-layout="command-rail"] .hp-main .app-grid .app-card:first-child {
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px;
  background: var(--glass-bg-hover, var(--glass-bg));
  border-color: rgba(47, 111, 237, 0.3);
}

body[data-homepage-layout="command-rail"] .hp-main .app-grid .app-card:first-child .app-icon {
  width: 96px;
  height: 96px;
  margin-bottom: 22px;
  border-radius: var(--radius);
}

body[data-homepage-layout="command-rail"] .hp-main .app-grid .app-card:first-child h3 {
  font-size: 1.5rem;
}

body[data-homepage-layout="command-rail"] .hp-main .app-grid .app-card:first-child p {
  font-size: 1rem;
}

@media (max-width: 900px) {
  body[data-homepage-layout="command-rail"] .hp-main .app-grid .app-card:first-child {
    grid-column: span 1;
    grid-row: span 1;
    padding: 24px;
  }

  body[data-homepage-layout="command-rail"] .hp-main .app-grid .app-card:first-child .app-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
  }

  body[data-homepage-layout="command-rail"] .hp-main .app-grid .app-card:first-child h3 {
    font-size: 1.05rem;
  }

  body[data-homepage-layout="command-rail"] .hp-main .app-grid .app-card:first-child p {
    font-size: 0.9rem;
  }
}

/* --- Grid columns: match the apps grid's natural column count ------------- */
/* .hp-main is narrower than the full-width layout .app-grid's auto-fill
   sizing was designed for, so it settles on ~3 columns on its own — but
   Featured/"More to explore" default to a FIXED column count from
   Appearance settings (often 4), which doesn't shrink to match and instead
   just crams narrower cards into the same space. Overridden here (using
   .apps-section/.post-grid rather than any specific --cols-N variant, so
   it wins on specificity over whatever fixed count is configured and stays
   correct even if that setting changes later) so all three grids read as
   one consistent width throughout the sidebar layouts. */
body[data-homepage-layout] .hp-main .app-grid,
body[data-homepage-layout] .hp-main .post-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  body[data-homepage-layout] .hp-main .app-grid,
  body[data-homepage-layout] .hp-main .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  body[data-homepage-layout] .hp-main .app-grid,
  body[data-homepage-layout] .hp-main .post-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Responsive: collapse to a single column ------------------------------ */

@media (max-width: 980px) {
  body[data-homepage-layout] .hp-shell {
    grid-template-columns: 1fr;
  }

  body[data-homepage-layout="spotlight-grid"] .hp-shell .hp-main {
    order: 1;
  }

  body[data-homepage-layout="spotlight-grid"] .hp-shell .hp-sidebar {
    order: 2;
  }

  .hp-sidebar {
    position: static;
    width: 100%;
  }

  .hp-spotlight {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Cross-Template App Card Styles
   Enables choosing any template's card visual treatment independently of
   the active homepage shell via body[data-app-cards-template="..."]
   ========================================================================== */

/* ==========================================================================
   Cross-Template App Card Styles
   Enables choosing any template's card visual treatment independently of
   the active homepage shell via body[data-app-cards-template="..."],
   body[data-sc-cards="..."], or body[data-bp-cards="..."]
   ========================================================================== */

/* 1. Classic Glass (default) */
body[data-app-cards-template="default"] .app-card,
body[data-sc-cards="default"] .app-card,
body[data-bp-cards="default"] .app-card {
  border-radius: var(--radius-lg, 18px);
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-sm, 0 4px 16px rgba(0, 0, 0, 0.06));
  overflow: hidden !important;
}

/* 2. Schematic CAD */
body[data-app-cards-template="schematic"] .app-card,
body[data-sc-cards="schematic"] .app-card,
body[data-bp-cards="schematic"] .app-card {
  border-radius: 12px;
  background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 70%), var(--card-bg);
  border: 1px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  overflow: hidden !important;
}
body[data-app-cards-template="schematic"] .app-card .app-card-tag,
body[data-sc-cards="schematic"] .app-card .app-card-tag,
body[data-bp-cards="schematic"] .app-card .app-card-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 4px;
}
body[data-app-cards-template="schematic"] .app-card .download-count,
body[data-sc-cards="schematic"] .app-card .download-count,
body[data-bp-cards="schematic"] .app-card .download-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  color: #38bdf8;
}
body[data-app-cards-template="schematic"] .app-card:hover,
body[data-sc-cards="schematic"] .app-card:hover,
body[data-bp-cards="schematic"] .app-card:hover {
  transform: translateY(-4px);
  border-color: #38bdf8;
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.3), inset 0 0 15px rgba(56, 189, 248, 0.1);
}

/* 3. Lumen Neon Prism */
body[data-app-cards-template="lumen"] .app-card,
body[data-sc-cards="lumen"] .app-card,
body[data-bp-cards="lumen"] .app-card {
  --lumen-tint: 260;
  border-radius: 24px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  background:
    radial-gradient(90% 70% at 100% 0%, hsla(var(--lumen-tint), 90%, 75%, 0.35), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, hsla(calc(var(--lumen-tint) + 50), 90%, 78%, 0.25), transparent 65%),
    var(--card-bg);
  box-shadow: 0 10px 30px -10px rgba(124, 92, 255, 0.25);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s ease, border-color 0.45s ease;
  overflow: hidden !important;
}
[data-theme="dark"] body[data-app-cards-template="lumen"] .app-card,
[data-theme="dark"] body[data-sc-cards="lumen"] .app-card,
[data-theme="dark"] body[data-bp-cards="lumen"] .app-card {
  background:
    radial-gradient(90% 70% at 100% 0%, hsla(var(--lumen-tint), 80%, 55%, 0.32), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, hsla(calc(var(--lumen-tint) + 50), 80%, 55%, 0.22), transparent 65%),
    #12101e;
}
body[data-app-cards-template="lumen"] .app-card .app-card-tag,
body[data-sc-cards="lumen"] .app-card .app-card-tag,
body[data-bp-cards="lumen"] .app-card .app-card-tag {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(99, 102, 241, 0.25));
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
}
body[data-app-cards-template="lumen"] .app-card .download-count,
body[data-sc-cards="lumen"] .app-card .download-count,
body[data-bp-cards="lumen"] .app-card .download-count {
  color: #e879f9;
  font-weight: 600;
}
body[data-app-cards-template="lumen"] .app-card:hover,
body[data-sc-cards="lumen"] .app-card:hover,
body[data-bp-cards="lumen"] .app-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px -15px rgba(124, 92, 255, 0.55), 0 0 30px rgba(168, 85, 247, 0.3);
  border-color: rgba(167, 139, 250, 0.85);
}
body[data-app-cards-template="lumen"] .app-card:hover .app-icon,
body[data-sc-cards="lumen"] .app-card:hover .app-icon,
body[data-bp-cards="lumen"] .app-card:hover .app-icon {
  transform: scale(1.08) rotate(-3deg);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 4. Bento Dashboard */
body[data-app-cards-template="bento-dashboard"] .app-card,
body[data-sc-cards="bento-dashboard"] .app-card,
body[data-bp-cards="bento-dashboard"] .app-card {
  border-radius: 20px;
  background: radial-gradient(circle at 85% 15%, rgba(59, 130, 246, 0.12), transparent 50%), #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden !important;
}
body[data-app-cards-template="bento-dashboard"] .app-card .app-card-tag,
body[data-sc-cards="bento-dashboard"] .app-card .app-card-tag,
body[data-bp-cards="bento-dashboard"] .app-card .app-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(30, 41, 59, 0.8);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 4px 10px;
}
body[data-app-cards-template="bento-dashboard"] .app-card .app-card-tag::before,
body[data-sc-cards="bento-dashboard"] .app-card .app-card-tag::before,
body[data-bp-cards="bento-dashboard"] .app-card .app-card-tag::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 6px #38bdf8;
}
body[data-app-cards-template="bento-dashboard"] .app-card:hover,
body[data-sc-cards="bento-dashboard"] .app-card:hover,
body[data-bp-cards="bento-dashboard"] .app-card:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55), 0 0 30px rgba(56, 189, 248, 0.25);
}

/* 5. Apple App Store Showcase */
body[data-app-cards-template="app-store-showcase"] .app-card,
body[data-sc-cards="app-store-showcase"] .app-card,
body[data-bp-cards="app-store-showcase"] .app-card {
  border-radius: 22px;
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  overflow: hidden !important;
}
body[data-app-cards-template="app-store-showcase"] .app-card .app-icon,
body[data-sc-cards="app-store-showcase"] .app-card .app-icon,
body[data-bp-cards="app-store-showcase"] .app-card .app-icon {
  border-radius: 22%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s ease;
}
body[data-app-cards-template="app-store-showcase"] .app-card .app-card-tag,
body[data-sc-cards="app-store-showcase"] .app-card .app-card-tag,
body[data-bp-cards="app-store-showcase"] .app-card .app-card-tag {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-cyan, #0284c7);
}
body[data-app-cards-template="app-store-showcase"] .app-card .download-count,
body[data-sc-cards="app-store-showcase"] .app-card .download-count,
body[data-bp-cards="app-store-showcase"] .app-card .download-count {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  width: fit-content;
}
body[data-app-cards-template="app-store-showcase"] .app-card:hover .app-icon,
body[data-sc-cards="app-store-showcase"] .app-card:hover .app-icon,
body[data-bp-cards="app-store-showcase"] .app-card:hover .app-icon {
  transform: scale(1.05);
}

/* Universal reset: when a custom app cards template is chosen, ensure the grid and cards format properly */
body[data-app-cards-template]:not([data-app-cards-template="active"]):not([data-app-cards-template="horizon"]):not([data-app-cards-template="schematic-accordion"]):not([data-app-cards-template="blueprint"]) .app-grid,
body[data-sc-cards]:not([data-sc-cards="blueprint"]):not([data-sc-cards="accordion"]) .app-grid,
body[data-bp-cards]:not([data-bp-cards="blueprint"]):not([data-bp-cards="accordion"]) .app-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  height: auto !important;
}

body[data-app-cards-template]:not([data-app-cards-template="active"]):not([data-app-cards-template="horizon"]):not([data-app-cards-template="schematic-accordion"]):not([data-app-cards-template="blueprint"]) .app-card:not(.is-hidden):not([hidden]):not([data-filtered="true"]):not(.is-filtered-out),
body[data-sc-cards]:not([data-sc-cards="blueprint"]):not([data-sc-cards="accordion"]) .app-card:not(.is-hidden):not([hidden]):not([data-filtered="true"]):not(.is-filtered-out),
body[data-bp-cards]:not([data-bp-cards="blueprint"]):not([data-bp-cards="accordion"]) .app-card:not(.is-hidden):not([hidden]):not([data-filtered="true"]):not(.is-filtered-out) {
  flex: none !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  writing-mode: horizontal-tb !important;
  transform: none;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

body[data-app-cards-template]:not([data-app-cards-template="active"]):not([data-app-cards-template="horizon"]):not([data-app-cards-template="schematic-accordion"]):not([data-app-cards-template="blueprint"]) .app-card h3,
body[data-sc-cards]:not([data-sc-cards="blueprint"]):not([data-sc-cards="accordion"]) .app-card h3,
body[data-bp-cards]:not([data-bp-cards="blueprint"]):not([data-bp-cards="accordion"]) .app-card h3 {
  writing-mode: horizontal-tb !important;
  transform: none !important;
  position: static !important;
  margin: 0.5rem 0 0.25rem !important;
  max-height: none !important;
  white-space: normal !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body[data-app-cards-template]:not([data-app-cards-template="active"]):not([data-app-cards-template="horizon"]):not([data-app-cards-template="schematic-accordion"]):not([data-app-cards-template="blueprint"]) .app-card > p,
body[data-app-cards-template]:not([data-app-cards-template="active"]):not([data-app-cards-template="horizon"]):not([data-app-cards-template="schematic-accordion"]):not([data-app-cards-template="blueprint"]) .app-card .app-card-tag,
body[data-sc-cards]:not([data-sc-cards="blueprint"]):not([data-sc-cards="accordion"]) .app-card > p,
body[data-sc-cards]:not([data-sc-cards="blueprint"]):not([data-sc-cards="accordion"]) .app-card .app-card-tag,
body[data-bp-cards]:not([data-bp-cards="blueprint"]):not([data-bp-cards="accordion"]) .app-card > p,
body[data-bp-cards]:not([data-bp-cards="blueprint"]):not([data-bp-cards="accordion"]) .app-card .app-card-tag {
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
}

body[data-app-cards-template]:not([data-app-cards-template="active"]):not([data-app-cards-template="horizon"]):not([data-app-cards-template="schematic-accordion"]):not([data-app-cards-template="blueprint"]) .app-card .app-icon,
body[data-sc-cards]:not([data-sc-cards="blueprint"]):not([data-sc-cards="accordion"]) .app-card .app-icon,
body[data-bp-cards]:not([data-bp-cards="blueprint"]):not([data-bp-cards="accordion"]) .app-card .app-icon {
  position: static !important;
  transform: none !important;
  margin: 0 0 12px 0 !important;
}

/* 6. Technical Blueprint — Full CAD Engineering Parts Table */
body[data-app-cards-template="blueprint"] .app-grid {
  display: block !important;
  counter-reset: part;
  height: auto !important;
}
body[data-app-cards-template="blueprint"] .sc-apps-hint {
  display: none !important;
}
body[data-app-cards-template="blueprint"] .bp-table-head,
body[data-app-cards-template="blueprint"] .sc-table-head {
  display: grid !important;
  grid-template-columns: 78px 56px minmax(0, 1fr) 246px 150px 28px;
  column-gap: 18px;
  align-items: center;
  padding: 0 18px 12px;
  font: 700 0.8rem/1 ui-monospace, "SF Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--glass-border);
}
body[data-app-cards-template="blueprint"] .bp-table-head span:nth-child(1),
body[data-app-cards-template="blueprint"] .sc-table-head span:nth-child(1) { grid-column: 1; }
body[data-app-cards-template="blueprint"] .bp-table-head span:nth-child(2),
body[data-app-cards-template="blueprint"] .sc-table-head span:nth-child(2) { grid-column: 2 / 4; }
body[data-app-cards-template="blueprint"] .bp-table-head span:nth-child(3),
body[data-app-cards-template="blueprint"] .sc-table-head span:nth-child(3) { grid-column: 4; }
body[data-app-cards-template="blueprint"] .bp-table-head span:nth-child(4),
body[data-app-cards-template="blueprint"] .sc-table-head span:nth-child(4) { grid-column: 5; text-align: right; }

body[data-app-cards-template="blueprint"] .app-card:not(.is-hidden):not([hidden]):not([data-filtered="true"]):not(.is-filtered-out) {
  display: grid !important;
  counter-increment: part;
  grid-template-columns: 78px 56px minmax(0, 1fr) 246px 150px 28px !important;
  grid-template-areas: "num icon name tag count go" "num icon desc tag count go" !important;
  column-gap: 18px !important;
  align-items: center !important;
  position: relative !important;
  flex: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 20px 18px !important;
  text-align: left !important;
  border: 0 !important;
  border-bottom: 1px solid var(--glass-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background 0.2s ease, padding-left 0.25s ease !important;
}
body[data-app-cards-template="blueprint"] .app-card::before {
  content: "MMU-" counter(part, decimal-leading-zero) !important;
  grid-area: num !important;
  font: 600 0.9rem/1 ui-monospace, "SF Mono", monospace !important;
  letter-spacing: 0.04em !important;
  color: var(--text-secondary) !important;
  display: block !important;
  position: static !important;
}
body[data-app-cards-template="blueprint"] .app-card::after {
  content: "→" !important;
  grid-area: go !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
  background: none !important;
  transform: none !important;
  justify-self: end !important;
  font-size: 1.3rem !important;
  color: var(--text-secondary) !important;
  transition: transform 0.25s ease, color 0.25s ease !important;
  display: block !important;
}
body[data-app-cards-template="blueprint"] .app-card:hover,
body[data-app-cards-template="blueprint"] .app-card:focus-visible {
  background: color-mix(in srgb, var(--accent-cyan, #54b5ff) 10%, transparent) !important;
  padding-left: 26px !important;
}
body[data-app-cards-template="blueprint"] .app-card:hover::after {
  transform: translateX(4px) !important;
  color: var(--accent-cyan, #54b5ff) !important;
}
body[data-app-cards-template="blueprint"] .app-card .app-icon {
  grid-area: icon !important;
  position: static !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  transform: none !important;
}
body[data-app-cards-template="blueprint"] .app-card h3 {
  grid-area: name !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
  position: static !important;
  margin: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  align-self: end !important;
  white-space: normal !important;
}
body[data-app-cards-template="blueprint"] .app-card > p:not(.download-count) {
  grid-area: desc !important;
  margin: 3px 0 0 !important;
  align-self: start !important;
  color: var(--text-secondary) !important;
  font-size: 0.88rem !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body[data-app-cards-template="blueprint"] .app-card .app-card-tag {
  grid-area: tag !important;
  position: static !important;
  justify-self: start !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  border-radius: 4px !important;
  font-family: ui-monospace, "SF Mono", monospace !important;
  font-size: 0.72rem !important;
  padding: 3px 8px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
body[data-app-cards-template="blueprint"] .app-card .download-count {
  grid-area: count !important;
  justify-self: end !important;
  margin: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
  font: 600 0.82rem/1 ui-monospace, "SF Mono", monospace !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--text-primary) !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Remove outer square frame from Blueprint & Schematic heroes */
.blueprint-hero::after,
.schematic-hero::after {
  display: none !important;
}
.sc-outline {
  display: none !important;
}

@media (max-width: 899px) {
  body[data-app-cards-template="blueprint"] .bp-table-head,
  body[data-app-cards-template="blueprint"] .sc-table-head {
    display: none !important;
  }
  body[data-app-cards-template="blueprint"] .app-card {
    grid-template-columns: 48px 1fr auto !important;
    grid-template-areas: "icon name count" "icon desc count" "tag tag tag" !important;
    padding: 14px 10px !important;
    row-gap: 6px !important;
    column-gap: 12px !important;
  }
  body[data-app-cards-template="blueprint"] .app-card::before,
  body[data-app-cards-template="blueprint"] .app-card::after {
    display: none !important;
  }
  body[data-app-cards-template="blueprint"] .app-card > p:not(.download-count) {
    white-space: normal !important;
  }
}

/* 7. Cupertino Human Interface */
body[data-app-cards-template="cupertino"] .app-card,
body[data-sc-cards="cupertino"] .app-card,
body[data-bp-cards="cupertino"] .app-card {
  border-radius: 22px;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  overflow: hidden !important;
}
[data-theme="dark"] body[data-app-cards-template="cupertino"] .app-card,
[data-theme="dark"] body[data-sc-cards="cupertino"] .app-card,
[data-theme="dark"] body[data-bp-cards="cupertino"] .app-card {
  background: rgba(30, 32, 40, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
body[data-app-cards-template="cupertino"] .app-card:hover,
body[data-sc-cards="cupertino"] .app-card:hover,
body[data-bp-cards="cupertino"] .app-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.14);
}

/* 8. Vision Spatial Glass */
body[data-app-cards-template="vision-spatial"] .app-card,
body[data-sc-cards="vision-spatial"] .app-card,
body[data-bp-cards="vision-spatial"] .app-card {
  border-radius: 24px;
  backdrop-filter: blur(36px) saturate(200%);
  -webkit-backdrop-filter: blur(36px) saturate(200%);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.5), 0 18px 40px rgba(0, 0, 0, 0.28);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
  overflow: hidden !important;
}
body[data-app-cards-template="vision-spatial"] .app-card:hover,
body[data-sc-cards="vision-spatial"] .app-card:hover,
body[data-bp-cards="vision-spatial"] .app-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: inset 0 1px 2px 0 rgba(255, 255, 255, 0.7), 0 28px 55px rgba(0, 0, 0, 0.38);
}

/* 9. Premium SaaS */
body[data-app-cards-template="premium-saas"] .app-card,
body[data-sc-cards="premium-saas"] .app-card,
body[data-bp-cards="premium-saas"] .app-card {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), #0e1017;
  border: 1px solid #27272a;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  overflow: hidden !important;
}
body[data-app-cards-template="premium-saas"] .app-card:hover,
body[data-sc-cards="premium-saas"] .app-card:hover,
body[data-bp-cards="premium-saas"] .app-card:hover {
  transform: translateY(-3px);
  border-color: #3b82f6;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 25px rgba(59, 130, 246, 0.2);
}

/* 10. Horizon Sunset */
body[data-app-cards-template="horizon"] .app-card,
body[data-sc-cards="horizon"] .app-card,
body[data-bp-cards="horizon"] .app-card {
  border-radius: 22px;
  background: radial-gradient(100% 80% at 50% 0%, rgba(242, 119, 90, 0.14), transparent 70%), var(--card-bg);
  border: 1px solid rgba(242, 119, 90, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  overflow: hidden !important;
}
body[data-app-cards-template="horizon"] .app-card:hover,
body[data-sc-cards="horizon"] .app-card:hover,
body[data-bp-cards="horizon"] .app-card:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 119, 90, 0.75);
  box-shadow: 0 20px 45px -10px rgba(242, 119, 90, 0.45);
}

/* 11. Raycast Command Terminal */
body[data-app-cards-template="raycast-terminal"] .app-card,
body[data-sc-cards="raycast-terminal"] .app-card,
body[data-bp-cards="raycast-terminal"] .app-card {
  border-radius: 12px;
  background: #0d1117;
  border: 1px solid #30363d;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  overflow: hidden !important;
}
body[data-app-cards-template="raycast-terminal"] .app-card h3,
body[data-sc-cards="raycast-terminal"] .app-card h3,
body[data-bp-cards="raycast-terminal"] .app-card h3 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}
body[data-app-cards-template="raycast-terminal"] .app-card h3::before,
body[data-sc-cards="raycast-terminal"] .app-card h3::before,
body[data-bp-cards="raycast-terminal"] .app-card h3::before {
  content: "> ";
  color: #58a6ff;
  font-weight: 700;
}
body[data-app-cards-template="raycast-terminal"] .app-card .app-card-tag,
body[data-sc-cards="raycast-terminal"] .app-card .app-card-tag,
body[data-bp-cards="raycast-terminal"] .app-card .app-card-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.68rem;
  background: #161b22;
  border: 1px solid #30363d;
  color: #7ee787;
  border-radius: 4px;
  padding: 3px 8px;
}
body[data-app-cards-template="raycast-terminal"] .app-card .download-count,
body[data-sc-cards="raycast-terminal"] .app-card .download-count,
body[data-bp-cards="raycast-terminal"] .app-card .download-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #8b949e;
  font-size: 0.76rem;
}
body[data-app-cards-template="raycast-terminal"] .app-card:hover,
body[data-sc-cards="raycast-terminal"] .app-card:hover,
body[data-bp-cards="raycast-terminal"] .app-card:hover {
  transform: translateY(-3px);
  border-color: #58a6ff;
  box-shadow: 0 0 25px rgba(88, 166, 255, 0.3), inset 0 0 10px rgba(88, 166, 255, 0.1);
}

/* 12. Dynamic Masonry */
body[data-app-cards-template="dynamic-masonry"] .app-card,
body[data-sc-cards="dynamic-masonry"] .app-card,
body[data-bp-cards="dynamic-masonry"] .app-card {
  border-radius: 24px;
  box-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.16);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  overflow: hidden !important;
}
body[data-app-cards-template="dynamic-masonry"] .app-card:hover,
body[data-sc-cards="dynamic-masonry"] .app-card:hover,
body[data-bp-cards="dynamic-masonry"] .app-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 48px -10px rgba(0, 0, 0, 0.24);
}

/* Universal Filter Rule: Hide filtered-out cards across all layouts */
.app-card.is-hidden,
.app-card.is-filtered-out,
.app-card[hidden],
.app-card[data-hidden="true"],
.app-card[data-filtered="true"],
.app-card[style*="display: none"],
body .app-card.is-hidden,
body .app-card.is-filtered-out,
body .app-card[hidden],
body .app-card[data-filtered="true"],
body .app-card[style*="display: none"],
body[data-homepage-layout] .sc-apps .app-card.is-hidden,
body[data-homepage-layout] .sc-apps .app-card[hidden],
body[data-homepage-layout] .sc-apps .app-card.is-filtered-out,
body[data-homepage-layout] .sc-apps .app-card[data-filtered="true"],
body[data-app-cards-template] .app-card.is-hidden,
body[data-app-cards-template] .app-card[hidden],
body[data-app-cards-template] .app-card.is-filtered-out,
body[data-app-cards-template] .app-card[data-filtered="true"],
body[data-sc-cards] .app-card.is-hidden,
body[data-sc-cards] .app-card[hidden],
body[data-sc-cards] .app-card.is-filtered-out,
body[data-sc-cards] .app-card[data-filtered="true"],
body[data-bp-cards] .app-card.is-hidden,
body[data-bp-cards] .app-card[hidden],
body[data-bp-cards] .app-card.is-filtered-out,
body[data-bp-cards] .app-card[data-filtered="true"] {
  display: none !important;
}