/* ====================================================================
   onepage.css — One-page scroller layer (loaded LAST → highest priority).
   Gold-Hybrid accents, hero particle canvas, Hell/Dunkel theme toggle and
   fixed-navbar scroll offsets. Everything here is additive/visual and
   theme-aware via the tokens in base.css.
   ==================================================================== */

/* ---- Fixed-navbar anchor offset ------------------------------------
   The navbar is fixed, so in-page jumps must leave room beneath it. */
.section-anchor { scroll-margin-top: 92px; }
#plugins, #pricing, #faq, #support { scroll-margin-top: 92px; }

/* ---- Hero particle canvas -----------------------------------------
   Sits behind the hero content; pointer-events:none keeps the CTAs
   clickable (the JS listens on window and maps into canvas space). */
.hero-pro-gold { position: relative; overflow: hidden; }
.bk-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 42%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 80% at 50% 42%, #000 55%, transparent 100%);
}
.hero-pro-gold .hero-pro-depth { z-index: 0; }
.hero-pro-gold .hero-pro-inner { position: relative; z-index: 2; }

/* Warm gold glow instead of the red one, behind the wordmark. */
.hero-pro-gold .hero-pro-glow {
  background: radial-gradient(circle at 50% 42%, var(--gold-glow) 0%, transparent 62%);
  opacity: 0.85;
}

/* ---- Gold-Hybrid hero accents -------------------------------------- */
.hero-pro-gold .hero-pro-badge {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.10), rgba(255, 215, 0, 0.02));
}
.hero-pro-gold .hero-pro-badge-dot {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(var(--gold-rgb), 0.18);
}
/* Gradient on the glyph-rendering span only (PROJECT.md §7 Bug 8). */
.hero-pro-gold .hpw-accent .hpw-text {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 22px var(--gold-glow));
}
.hero-pro-gold .hpf-chip {
  border-color: var(--gold-line);
  background: rgba(var(--gold-rgb), 0.06);
}
.hero-pro-gold .hpf-chip:hover { border-color: var(--gold); color: var(--fg); }
.hero-pro-gold .hero-pro-live {
  border-color: var(--gold-line);
}
.hero-pro-gold .hero-pro-live-dot { background: var(--gold); box-shadow: 0 0 10px var(--gold); }

/* Eyebrows + section headings pick up the gold accent on the one-page. */
.section-anchor .eyebrow,
#plugins .eyebrow, #pricing .eyebrow, #faq .eyebrow {
  color: var(--gold);
}

/* ---- Theme toggle button (sun ↔ moon morph) ------------------------ */
.theme-toggle {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 4px 0 2px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-dim);
  cursor: pointer;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease), transform var(--t-fast) var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { color: var(--gold); border-color: var(--gold-line); background: var(--surface-2); }
.theme-toggle:active { transform: scale(0.88); }
.theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.theme-toggle-icon { overflow: visible; }
.theme-toggle-icon .tt-moon,
.theme-toggle-icon .tt-sun-core,
.theme-toggle-icon .tt-sun-rays {
  transition: opacity 0.3s var(--ease), transform 0.45s var(--ease-spring);
  transform-origin: 12px 12px;
}
/* Default = dark theme → show the moon. */
.theme-toggle-icon .tt-sun-core,
.theme-toggle-icon .tt-sun-rays { opacity: 0; transform: scale(0.2) rotate(-45deg); }
.theme-toggle-icon .tt-moon { opacity: 1; }
/* Light theme → morph to the sun. */
.theme-toggle.is-light .tt-moon { opacity: 0; transform: scale(0.2) rotate(45deg); }
.theme-toggle.is-light .tt-sun-core,
.theme-toggle.is-light .tt-sun-rays { opacity: 1; transform: none; }

/* ---- Light-theme contrast touch-ups for the hero ------------------- */
html[data-theme="light"] .hero-pro-gold .bk-hero-canvas { opacity: 0.7; }
html[data-theme="light"] .trust-marquee-item { color: var(--fg-mute); }
html[data-theme="light"] .hero-pro-tagline { color: var(--fg-dim); }

/* Smooth-scroll already comes from html{scroll-behavior:smooth} in base.css. */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle-icon .tt-moon,
  .theme-toggle-icon .tt-sun-core,
  .theme-toggle-icon .tt-sun-rays { transition: opacity 0.01s; }
}

/* --- premium gold CTA (.btn-gold) --- */
.btn-gold {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gold-gradient);
  color: var(--gold-ink, #6b5410);
  border-color: var(--gold-line);
  box-shadow:
    0 0 0 1px var(--gold-line),
    0 12px 30px -12px var(--gold-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-gold > * { position: relative; z-index: 1; }
.btn-gold > svg {
  position: relative;
  z-index: 1;
  transition: transform var(--t-base, .25s) var(--ease-spring, cubic-bezier(.2,.8,.2,1.2));
}

/* animated gold sheen sweep (sits above the fill, below the label) */
.btn-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(110deg, transparent 28%, rgba(255, 255, 255, 0.55) 50%, transparent 72%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease, cubic-bezier(.2,.7,.2,1));
  pointer-events: none;
}
.btn-gold:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow:
    0 0 0 1px var(--gold),
    0 22px 44px -14px var(--gold-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.btn-gold:hover::before { transform: translateX(120%); }
.btn-gold:hover > svg { transform: translateX(3px); }
.btn-gold:active { transform: translateY(0) scale(0.98); }
.btn-gold:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg, #04040a),
    0 0 0 4px var(--gold),
    0 12px 30px -12px var(--gold-glow);
}

/* outline modifier: transparent + gold border, fills gold on hover */
.btn-gold.btn-gold-outline {
  background: transparent !important;
  color: var(--mc-gold) !important;
  border-color: var(--gold-line) !important;
  box-shadow: inset 0 0 0 1px var(--gold-line) !important;
}
.btn-gold.btn-gold-outline::before {
  background: var(--gold-gradient);
  transform: translateX(-101%);
  opacity: 0.001;
}
.btn-gold.btn-gold-outline:hover {
  color: #07080c !important;
  border-color: var(--mc-gold) !important;
}
.btn-gold.btn-gold-outline:hover::before {
  transform: translateX(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .btn-gold::before,
  .btn-gold > svg { transition: none; }
  .btn-gold:hover::before { transform: translateX(-120%); }
  .btn-gold.btn-gold-outline::before { transition: none; }
  .btn-gold.btn-gold-outline:hover::before { transform: translateX(0); opacity: 1; }
  .btn-gold:hover > svg { transform: none; }
}

/* --- light-theme deep-page polish --- */
/* Fixes contrast/legibility on the deep functional pages (admin, editors,
   account, auth, forms, dashboard, pricing/faq) where older components
   hardcode dark surfaces / white text. Every rule is scoped to the light
   theme; the dark theme is untouched. Surfaces map to warm off-white
   (#fffdf7 / #faf6ec), text to dark ink (#1c1708), accents to gold (#b8860b). */

/* ---------- Form fields: white panel, dark ink, gold focus ---------- */
html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .field select,
html[data-theme="light"] .editor-field input,
html[data-theme="light"] .editor-field select,
html[data-theme="light"] .editor-field textarea,
html[data-theme="light"] .admin-tier input,
html[data-theme="light"] .admin-tier textarea,
html[data-theme="light"] .upload input[type="file"],
html[data-theme="light"] .settings-card-body input[type="text"],
html[data-theme="light"] .settings-card-body input[type="email"],
html[data-theme="light"] .settings-card-body input[type="tel"],
html[data-theme="light"] .settings-card-body input[type="password"],
html[data-theme="light"] .user-edit-form-compact input,
html[data-theme="light"] .user-edit-form-compact textarea,
html[data-theme="light"] .user-edit-form-compact select,
html[data-theme="light"] .pricing-editor-card input,
html[data-theme="light"] .pricing-editor-card textarea,
html[data-theme="light"] .pricing-editor-card select,
html[data-theme="light"] .jar-row-version-input,
html[data-theme="light"] .form-card .field select {
  background: #fffdf7;
  border: 1px solid var(--border);
  color: var(--fg);
}
html[data-theme="light"] .field input::placeholder,
html[data-theme="light"] .field textarea::placeholder,
html[data-theme="light"] .editor-field input::placeholder,
html[data-theme="light"] .editor-field textarea::placeholder,
html[data-theme="light"] .user-edit-form-compact input::placeholder,
html[data-theme="light"] .pricing-editor-card input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: var(--fg-mute);
}
html[data-theme="light"] .field input:focus,
html[data-theme="light"] .field textarea:focus,
html[data-theme="light"] .field select:focus,
html[data-theme="light"] .editor-field input:focus,
html[data-theme="light"] .editor-field select:focus,
html[data-theme="light"] .editor-field textarea:focus,
html[data-theme="light"] .admin-tier input:focus,
html[data-theme="light"] .admin-tier textarea:focus,
html[data-theme="light"] .pricing-editor-card input:focus,
html[data-theme="light"] .pricing-editor-card textarea:focus,
html[data-theme="light"] .jar-row-version-input:focus,
html[data-theme="light"] .form-card .field select:focus {
  background: #ffffff;
  border-color: #b8860b;
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.16);
}
/* select chevron arrow + native option list */
html[data-theme="light"] .form-card .field select {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23b8860b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 14px center,
    #fffdf7;
}
html[data-theme="light"] .form-card .field select option { background: #fffdf7; color: var(--fg); }

/* ---------- Ghost button: visible on a light surface ---------- */
html[data-theme="light"] .btn-ghost {
  background: #fffdf7;
  color: var(--fg);
  border-color: var(--border-strong);
}
html[data-theme="light"] .btn-ghost:hover {
  background: #faf6ec;
  border-color: #b8860b;
  color: #1c1708;
}

/* ---------- Cards & panels: warm off-white, light borders ---------- */
html[data-theme="light"] .form-card,
html[data-theme="light"] .form-card-glass,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .faq-card,
html[data-theme="light"] .pricing-grid-v2 .pricing-card,
html[data-theme="light"] .plugin-mini,
html[data-theme="light"] .pdv3-card,
html[data-theme="light"] .pdv3-downloads,
html[data-theme="light"] .pdv3-downloads .artifact,
html[data-theme="light"] .pdv3-step,
html[data-theme="light"] .install-step,
html[data-theme="light"] .inbox-item,
html[data-theme="light"] .admin-tier,
html[data-theme="light"] .admin-card,
html[data-theme="light"] .admin-stat-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .user-edit-tabs,
html[data-theme="light"] .editor-main,
html[data-theme="light"] .editor-sidebar,
html[data-theme="light"] .editor-soon-card,
html[data-theme="light"] .editor-toolbar,
html[data-theme="light"] .editor-tool-card,
html[data-theme="light"] .editor-login-teaser,
html[data-theme="light"] .editor-gate,
html[data-theme="light"] .jar-plugin-block,
html[data-theme="light"] .jar-row,
html[data-theme="light"] .pm-toolbar,
html[data-theme="light"] #plugin-manager .pm-plugin,
html[data-theme="light"] .admin-section-nav,
html[data-theme="light"] .plugin-detail-main-col,
html[data-theme="light"] .plugin-detail-downloads,
html[data-theme="light"] .plugin-detail-side-col .buy-block,
html[data-theme="light"] .plugin-feature-card {
  background: var(--surface-2);
  border-color: var(--border);
}
html[data-theme="light"] .pdv3-image,
html[data-theme="light"] .plugin-mini-media {
  background: #faf6ec;
}
html[data-theme="light"] .plugin-mini-image,
html[data-theme="light"] .pdv3-image img {
  background: #faf6ec;
}
/* Brand gradient top-hairlines read too hot on off-white — calm them */
html[data-theme="light"] .plugin-mini::after { opacity: 0.32; }
html[data-theme="light"] .plugin-mini-link:hover .plugin-mini::after,
html[data-theme="light"] .plugin-mini-link:focus-visible .plugin-mini::after { opacity: 0.7; }
html[data-theme="light"] .pdv3-card::before { opacity: 0.3; }
/* "Free" chip stays calm/neutral against the warm light surface */
html[data-theme="light"] .plugin-mini-price.is-free {
  color: var(--fg-dim);
  background: rgba(28, 23, 8, 0.05);
  border-color: var(--border);
}
html[data-theme="light"] .faq-card[open],
html[data-theme="light"] .settings-card[open] {
  border-color: rgba(184, 134, 11, 0.4);
  background: rgba(184, 134, 11, 0.06);
}
html[data-theme="light"] .faq-card > summary:hover,
html[data-theme="light"] .settings-card > summary:hover,
html[data-theme="light"] .editor-rank-item,
html[data-theme="light"] .editor-tab-pill {
  background: #fffdf7;
}
html[data-theme="light"] .editor-rank-item,
html[data-theme="light"] .editor-tab-pill {
  border-color: var(--border);
}

/* ---------- Admin (OLED-by-default) surfaces, flipped for light ---------- */
html[data-theme="light"] body.admin-page {
  --ad-bg: #faf6ec;
  --ad-surface: var(--surface-2);
  --ad-surface-2: #ffffff;
  --ad-hairline: var(--border);
  --ad-hairline-strong: var(--border-strong);
  background:
    radial-gradient(1200px 600px at 12% -8%, rgba(212, 175, 55, 0.10), transparent 60%),
    var(--bg);
}
html[data-theme="light"] body.admin-page .field input,
html[data-theme="light"] body.admin-page .field select,
html[data-theme="light"] body.admin-page .field textarea,
html[data-theme="light"] body.admin-page .pricing-editor-card input,
html[data-theme="light"] body.admin-page .pricing-editor-card select,
html[data-theme="light"] body.admin-page .pricing-editor-card textarea,
html[data-theme="light"] body.admin-page .user-edit-form-compact input,
html[data-theme="light"] body.admin-page .user-edit-form-compact select,
html[data-theme="light"] body.admin-page .user-edit-form-compact textarea {
  background: #fffdf7;
  border-color: var(--border);
  color: var(--fg);
}
html[data-theme="light"] body.admin-page .field input:focus,
html[data-theme="light"] body.admin-page .field select:focus,
html[data-theme="light"] body.admin-page .field textarea:focus,
html[data-theme="light"] body.admin-page input:focus-visible,
html[data-theme="light"] body.admin-page select:focus-visible,
html[data-theme="light"] body.admin-page textarea:focus-visible {
  background: #ffffff;
  border-color: #b8860b;
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.16);
}

/* ---------- Tables: off-white body + readable sticky header ---------- */
html[data-theme="light"] .sales-table th { color: var(--fg-mute); }
html[data-theme="light"] body.admin-page .sales-table { background: var(--surface-2); }
html[data-theme="light"] body.admin-page .sales-table thead th {
  color: var(--fg-dim);
  background: #faf6ec;
  border-bottom-color: var(--border-strong);
}
html[data-theme="light"] body.admin-page .sales-table tbody tr:hover {
  background: rgba(184, 134, 11, 0.06);
}

/* ---------- Code / log / console / dashboard output areas ---------- */
html[data-theme="light"] code,
html[data-theme="light"] .editor-field-hint code,
html[data-theme="light"] .editor-help-dialog code,
html[data-theme="light"] .editor-intro-note code,
html[data-theme="light"] .pdv3-step code,
html[data-theme="light"] .install-step h3 code,
html[data-theme="light"] .install-step p code {
  background: #faf6ec;
  border-color: var(--border);
  color: #9a6f08;
}
html[data-theme="light"] .editor-code-output,
html[data-theme="light"] .editor-code-pre,
html[data-theme="light"] .install-code,
html[data-theme="light"] .docs-content pre.docs-code {
  background: #faf6ec;
  border-color: var(--border);
  color: #1c1708;
}
html[data-theme="light"] .editor-code-pre,
html[data-theme="light"] .install-code,
html[data-theme="light"] .install-code code {
  color: #9a6f08;
}
html[data-theme="light"] .docs-content pre.docs-code code { color: var(--fg); }
html[data-theme="light"] .docs-content code {
  background: rgba(184, 134, 11, 0.10);
  border-color: rgba(184, 134, 11, 0.22);
  color: #9a6f08;
}

/* ---------- Gradient text that starts at white (vanishes on off-white) ---------- */
html[data-theme="light"] .stat-value,
html[data-theme="light"] .hero-stats strong,
html[data-theme="light"] .buy-price,
html[data-theme="light"] .buy-price-discounted strong,
html[data-theme="light"] .pricing-grid-v2 .pricing-card .price-amount,
html[data-theme="light"] .pdv3-title,
html[data-theme="light"] body.admin-page .admin-stat-value,
html[data-theme="light"] body.admin-page .hero.hero-compact .hero-title {
  background: linear-gradient(135deg, #1c1708 0%, #b8860b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Stray hardcoded white text ---------- */
html[data-theme="light"] .editor-tabbar-player-name { color: #1c1708; }

/* ---------- Misc dark wells: password meter, banners ---------- */
html[data-theme="light"] .pw-strength-bar { background: #faf6ec; border-color: var(--border); }
html[data-theme="light"] .persistence-banner {
  background: rgba(184, 134, 11, 0.06);
  border-color: rgba(184, 134, 11, 0.22);
  color: #9a6f08;
}

/* ---------- Navbar / mobile drawer / footer: light glass ---------- */
html[data-theme="light"] .nav-inner {
  background: rgba(255, 253, 247, 0.72);
  border-color: var(--border);
  box-shadow: 0 10px 40px -14px rgba(90, 70, 10, 0.26);
}
html[data-theme="light"] .nav-link { color: var(--fg-dim); }
html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active { color: var(--fg); }
html[data-theme="light"] .logo-text { color: var(--fg); }
html[data-theme="light"] .nav-drawer {
  background: #fffdf7;
  border-color: var(--border);
  color: var(--fg);
}
html[data-theme="light"] .nav-drawer a { color: var(--fg-dim); }
html[data-theme="light"] .nav-drawer a.active { color: var(--fg); }
html[data-theme="light"] .nav-drawer-backdrop { background: rgba(40, 30, 8, 0.28); }
html[data-theme="light"] .fab-menu {
  background: #fffdf7;
  border-color: var(--border);
}
html[data-theme="light"] .fab-menu a { color: var(--fg-dim); }
html[data-theme="light"] .footer {
  background: linear-gradient(180deg, rgba(255, 253, 247, 0.6), #faf6ec);
  border-top-color: var(--border);
}
html[data-theme="light"] .footer a { color: var(--fg-dim); }
html[data-theme="light"] .footer a:hover { color: var(--gold); }
html[data-theme="light"] .footer h4 { color: var(--fg); }

/* ====================================================================
   v2 polish — gold-forward backdrop (kills lingering red), robust gold
   wordmark, one-section scroll-snap, smoother reveals, pricing badge fix.
   Loaded last → wins. Both themes covered.
   ==================================================================== */

/* ---- Gold-forward backdrop ---------------------------------------- */
/* Body top-glow → gold (was red). Light theme keeps its own (base.css). */
body {
  background: #020204 !important; /* Unified dark background */
  background-image: radial-gradient(circle at 50% 25vh, rgba(212, 175, 55, 0.08) 0%, transparent 60vh) !important;
  background-repeat: no-repeat !important;
}
::selection { background: rgba(212, 175, 55, 0.32); color: #fff; }
html[data-theme="light"] ::selection { background: rgba(184, 134, 11, 0.26); color: #1c1708; }

/* Background auroras → warm gold instead of red. */
.site-bg .mh-aurora-1 { background: radial-gradient(circle, rgba(255, 200, 70, 0.34), transparent 70%); }
.site-bg .mh-aurora-2 { background: radial-gradient(circle, rgba(255, 176, 30, 0.30), transparent 70%); }
.site-bg .mh-aurora-3 { background: radial-gradient(circle, rgba(212, 175, 55, 0.26), transparent 70%); }
.hero-pro-gold .mh-aurora-1,
.hero-pro-gold .mh-aurora-3 { background: radial-gradient(circle, rgba(255, 210, 90, 0.40), transparent 70%); }
.mh-sparkles span { background: var(--gold); box-shadow: 0 0 8px var(--gold-glow); }

/* Light theme: soft warm vignette (base vignette is hard dark). */
html[data-theme="light"] .bk-vignette {
  background:
    radial-gradient(ellipse 120% 100% at 50% 30%, transparent 60%, rgba(150, 120, 30, 0.10) 100%),
    radial-gradient(ellipse 100% 80% at 50% 120%, rgba(150, 120, 30, 0.08), transparent 60%);
}
html[data-theme="light"] .site-bg .mh-grid { opacity: 0.5; }

/* ---- Robust gold wordmark (never invisible) ----------------------- */
/* Solid gold fallback first; gradient only where background-clip:text is
   supported, so "Plugins" can never render fully transparent. */
.hero-pro-gold .hpw-accent .hpw-text { color: var(--gold); -webkit-text-fill-color: var(--gold); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-pro-gold .hpw-accent .hpw-text {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 4px 22px var(--gold-glow));
  }
}

/* ---- Pricing: keep badges off the card title ---------------------- */
/* Badges sit INSIDE the card top (so card overflow:hidden can't clip them);
   extra padding-top keeps the heading clear below them. */
.pricing-grid .pricing-card,
.pricing-grid-v2 .pricing-card { padding-top: 46px; }
.pricing-card .badge-popular { top: 14px; right: 16px; left: auto; bottom: auto; }
.pricing-card .badge-discount { top: 14px; left: 16px; right: auto; bottom: auto; }
.pricing-card > h3 { margin-top: 0; }

/* ---- One-section-at-a-time scroll-snap (desktop) ------------------ */
@media (min-width: 681px) {
  html {
    scroll-snap-type: y proximity;
    scroll-padding-top: 84px;
  }
  main > .hero-pro,
  main > #plugins,
  main > #pricing,
  main > #faq,
  main > #support {
    scroll-snap-align: start;
  }
  main > #pricing,
  main > #faq {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Plugins holds a 3x2 grid that is TALLER than the viewport. Do NOT lock
     it to a centered 100vh box (that pushed the bottom row — Crates/Spawn/
     Proxy — below the fold and proximity-snap re-pinned it, making it
     unreachable). Let it grow to natural content height and scroll. We keep
     scroll-snap-align:start (above) so it still snaps cleanly to the top, but
     align content to the start so the full grid is always reachable. */
  main > #plugins {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  main > .hero-pro { min-height: 100vh; }
  /* Support is short — give it presence without a big empty gap. */
  main > #support { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
}

/* ---- Smoother, classier reveals ----------------------------------- */
[data-reveal] {
  transition: opacity 0.9s cubic-bezier(.16, 1, .3, 1),
              transform 0.9s cubic-bezier(.16, 1, .3, 1);
}
.bk-cine {
  transition: opacity 1s cubic-bezier(.16, 1, .3, 1),
              transform 1s cubic-bezier(.16, 1, .3, 1),
              clip-path 1s cubic-bezier(.16, 1, .3, 1);
}

/* ====================================================================
   Nav bell + avatar + notification dropdown
   Avatar replaces the old .nav-cta; the bell sits between the theme
   toggle and the avatar. Neither carries .nav-link (the layout.js
   IntersectionObserver targets .nav-link), so they get their own ids.
   Brand: OLED dark glass panel, red-gradient count badge, success-green
   accent on positive items.
   ==================================================================== */

/* ---- Circular avatar (initials → /account) ------------------------ */
.nav-avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-gradient, linear-gradient(135deg, #ff003c, #ff5e00));
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 6px 16px -8px var(--accent-glow, rgba(255, 60, 40, 0.42));
  transition: transform var(--t-fast, .15s) var(--ease-spring, ease), box-shadow var(--t-base, .25s) var(--ease, ease);
  -webkit-tap-highlight-color: transparent;
}
.nav-avatar:hover { transform: translateY(-1px) scale(1.05); }
.nav-avatar:active { transform: scale(0.94); }
.nav-avatar:focus-visible { outline: 2px solid var(--accent-soft, #ffa600); outline-offset: 2px; }

/* ---- Bell button + count badge ------------------------------------ */
#nav-bell {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-dim);
  cursor: pointer;
  transition: color var(--t-base, .25s) var(--ease, ease), border-color var(--t-base, .25s) var(--ease, ease),
              background var(--t-base, .25s) var(--ease, ease), transform var(--t-fast, .15s) var(--ease-spring, ease);
  -webkit-tap-highlight-color: transparent;
}
#nav-bell:hover { color: var(--accent-soft, #ffa600); border-color: rgba(255, 60, 40, 0.35); background: var(--surface-2); }
#nav-bell:active { transform: scale(0.9); }
#nav-bell:focus-visible { outline: 2px solid var(--accent-soft, #ffa600); outline-offset: 2px; }
#nav-bell svg { width: 19px; height: 19px; }

.nav-bell-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-gradient, linear-gradient(135deg, #ff003c, #ff5e00));
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bg, #04040a), 0 4px 10px -3px var(--accent-glow, rgba(255, 60, 40, 0.42));
  pointer-events: none;
}
.nav-bell-badge[hidden],
.nav-bell-badge.is-empty { display: none; }

/* ---- Dropdown glass panel -----------------------------------------
   Markup: #nav-bell-wrap > #nav-bell-dropdown[hidden]. The bell JS
   toggles visibility by removing the [hidden] attribute and adding
   `.open` to #nav-bell-wrap. We drive the panel off both signals so it
   works regardless of which the script flips, and keep the legacy
   `.is-open` hook working too. The base [hidden] state stays
   display:none (collapsed in the a11y tree) until opened. */
.nav-bell-wrap { position: relative; display: inline-flex; }
.nav-bell-dropdown[hidden] { display: none; }
.nav-bell-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, calc(100vw - 32px));
  max-height: min(70vh, 460px);
  display: flex;
  flex-direction: column;
  background: rgba(8, 10, 16, 0.94);
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.16));
  border-radius: 16px;
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  overflow: hidden;
  z-index: 80;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.2s var(--ease, ease), transform 0.22s var(--ease-out, ease);
}
/* Open state: panel is shown the moment [hidden] is removed; the entrance
   animation rides in via the .open hook on the wrap (or legacy .is-open). */
.nav-bell-wrap.open .nav-bell-dropdown,
.nav-bell-dropdown:not([hidden]),
.nav-bell-dropdown.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.nav-bell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  background: linear-gradient(180deg, rgba(255, 60, 40, 0.05), transparent);
}
.nav-bell-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.nav-bell-readall {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--accent-soft, #ffa600);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.18s var(--ease, ease), color 0.18s var(--ease, ease);
}
.nav-bell-readall:hover { background: rgba(255, 60, 40, 0.1); color: var(--accent-light, #ff5e00); }
.nav-bell-readall:focus-visible { outline: 2px solid var(--accent-soft, #ffa600); outline-offset: 2px; }
.nav-bell-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.nav-bell-clearall {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--fg-mute);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.18s var(--ease, ease), color 0.18s var(--ease, ease);
}
.nav-bell-clearall:hover { background: rgba(255, 60, 40, 0.1); color: var(--accent-light, #ff5e00); }
.nav-bell-clearall:focus-visible { outline: 2px solid var(--accent-soft, #ffa600); outline-offset: 2px; }
.nav-bell-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Row = item content (link/div) + per-row delete (X) button. */
.nav-bell-row {
  position: relative;
  display: flex;
  align-items: stretch;
  border-radius: 10px;
}
.nav-bell-item {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--fg);
  cursor: pointer;
  transition: background 0.18s var(--ease, ease);
}
.nav-bell-item:hover { background: rgba(255, 255, 255, 0.04); }
.nav-bell-row.is-unread .nav-bell-item { background: rgba(255, 60, 40, 0.06); }
.nav-bell-row.is-unread .nav-bell-item:hover { background: rgba(255, 60, 40, 0.1); }
.nav-bell-del {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 6px;
  appearance: none;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--fg-mute);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.16s var(--ease, ease), background 0.16s var(--ease, ease), color 0.16s var(--ease, ease);
}
.nav-bell-row:hover .nav-bell-del,
.nav-bell-del:focus-visible { opacity: 1; }
.nav-bell-del:hover { background: rgba(255, 60, 40, 0.14); color: var(--accent-light, #ff5e00); }
.nav-bell-del:focus-visible { outline: 2px solid var(--accent-soft, #ffa600); outline-offset: 1px; }
/* Touch / no-hover: always show the X so it's reachable. */
@media (hover: none) {
  .nav-bell-del { opacity: 1; }
}
.nav-bell-item-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg);
}
.nav-bell-item.is-unread .nav-bell-item-title::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-gradient, linear-gradient(135deg, #ff003c, #ff5e00));
  box-shadow: 0 0 8px var(--accent-glow, rgba(255, 60, 40, 0.42));
}
.nav-bell-item.kind-success .nav-bell-item-title { color: var(--success-soft, #4ade80); }
.nav-bell-item.kind-success.is-unread .nav-bell-item-title::before {
  background: var(--success, #22c55e);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}
.nav-bell-item.kind-warning .nav-bell-item-title { color: var(--accent-soft, #ffa600); }
.nav-bell-item.kind-warning.is-unread .nav-bell-item-title::before {
  background: linear-gradient(135deg, #ff5e00, #ffa600);
  box-shadow: 0 0 8px rgba(255, 166, 0, 0.55);
}
.nav-bell-item-body {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--fg-dim, #cbd5e1);
}
.nav-bell-item-time {
  font-size: 0.72rem;
  color: var(--fg-mute);
}
.nav-bell-empty {
  padding: 26px 16px;
  text-align: center;
  color: var(--fg-mute);
  font-size: 0.86rem;
  font-style: italic;
}

/* ---- Light-theme overrides for bell + avatar ---------------------- */
html[data-theme="light"] #nav-bell:hover { color: var(--gold, #b8860b); border-color: var(--gold-line, rgba(184, 134, 11, 0.4)); }
html[data-theme="light"] .nav-bell-dropdown {
  background: rgba(255, 253, 247, 0.96);
  border-color: var(--border-strong);
  box-shadow: 0 30px 70px -28px rgba(90, 70, 10, 0.32);
}
html[data-theme="light"] .nav-bell-item:hover { background: rgba(184, 134, 11, 0.08); }
html[data-theme="light"] .nav-bell-row.is-unread .nav-bell-item { background: rgba(184, 134, 11, 0.08); }
html[data-theme="light"] .nav-bell-readall { color: var(--gold, #b8860b); }
html[data-theme="light"] .nav-bell-readall:hover { background: rgba(184, 134, 11, 0.1); color: var(--gold, #b8860b); }
html[data-theme="light"] .nav-bell-del:hover { background: rgba(184, 134, 11, 0.12); color: var(--gold, #b8860b); }
html[data-theme="light"] .nav-bell-clearall:hover { background: rgba(184, 134, 11, 0.1); color: var(--gold, #b8860b); }
html[data-theme="light"] .nav-bell-head { background: linear-gradient(180deg, rgba(184, 134, 11, 0.06), transparent); }
html[data-theme="light"] .nav-bell-badge { box-shadow: 0 0 0 2px #fffdf7, 0 4px 10px -3px var(--accent-glow, rgba(255, 60, 40, 0.42)); }

/* ---- Mobile: bell dropdown becomes a near full-width sheet --------- */
@media (max-width: 540px) {
  .nav-bell-dropdown {
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - 84px);
    transform-origin: top center;
  }
}

/* ====================================================================
   Site-wide smoother scrolling. base.css already sets
   html{scroll-behavior:smooth}; here we add a tasteful section
   scroll-margin so anchored jumps clear the fixed navbar, and fully
   disable smooth behavior under prefers-reduced-motion.
   ==================================================================== */
html { scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav-bell-dropdown { transition: none; }
}

/* ====================================================================
   GLOBAL FAB vs ADMIN-EDIT-FAB de-overlap.
   Both are position:fixed bottom-right by default:
     .fab            (layout.css)  bottom:22px right:22px  (the '+' stack:
                     #fab-toggle + #fab-back-top + expanding #fab-menu,
                     which all grow UPWARD on the right edge)
     .admin-edit-fab (editors.css) bottom:22px right:22px  ("Dieses Plugin
                     bearbeiten") — sat directly on top of the '+' FAB.
   This file loads AFTER both layout.css and editors.css in the cascade,
   so these equal-specificity overrides win. The '+' FAB keeps the
   bottom-RIGHT corner; the admin edit pill moves to the bottom-LEFT so
   the two never collide on any screen size or FAB state, and both stay
   fully visible and clickable. (No animation added — reduced-motion safe.)
   ==================================================================== */
.admin-edit-fab {
  right: auto;
  left: 22px;
  bottom: 22px;
}
@media (max-width: 640px) {
  /* '+' FAB drops to bottom:16px/right:16px (components.css); keep the
     admin pill pinned to the opposite (left) corner with matching inset. */
  .admin-edit-fab {
    right: auto;
    left: 14px;
    bottom: 16px;
  }
}

/* ====================================================================
   2026 premium responsive pass
   Public pages must breathe naturally on every viewport. Older "fit" modes
   locked pages to 100vh with overflow:hidden; that clipped real content as
   soon as cards, browser chrome or translated copy changed. Keep the cinematic
   snap feel on desktop, but let the document own the scroll.
   ==================================================================== */

@media (min-width: 681px) {
  html {
    scroll-snap-type: y proximity;
    scroll-padding-top: clamp(76px, 9vh, 104px);
  }

  main > #plugins,
  main > #pricing,
  main > #faq,
  main > #support {
    scroll-snap-align: start;
    scroll-margin-top: clamp(76px, 9vh, 104px);
  }

  main > #pricing,
  main > #faq,
  main > #support {
    min-height: auto;
    justify-content: flex-start;
  }
}

body.home-fit,
body.plugins-fit,
body.pricing-fit,
body.plugin-fit {
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  display: block !important;
}

body.home-fit > main,
body.plugins-fit > main,
body.pricing-fit > main,
body.plugin-fit > main {
  min-height: 0 !important;
  overflow: visible !important;
  display: block !important;
}

.home-screen {
  --nav-flow: clamp(68px, 8vh, 86px);
  min-height: calc(100svh - var(--nav-flow)) !important;
  max-height: none !important;
  overflow: visible;
}

.home-screen > .hero-pro {
  min-height: clamp(540px, calc(100svh - 180px), 820px) !important;
  padding-top: clamp(52px, 8vh, 108px) !important;
  padding-bottom: clamp(30px, 5vh, 56px) !important;
}

.home-screen > #trust-band {
  margin-top: clamp(8px, 1.8vh, 18px);
}

main > .section,
main > .page-screen,
main > #plugins,
main > #pricing,
main > #faq,
main > #support {
  padding-top: clamp(64px, 9vw, 108px);
  padding-bottom: clamp(64px, 9vw, 108px);
}

main > #plugins {
  min-height: auto !important;
  justify-content: flex-start !important;
}

@media (max-width: 680px) {
  html {
    scroll-snap-type: none !important;
    scroll-padding-top: 72px;
  }

  .home-screen {
    min-height: auto !important;
  }

  .home-screen > .hero-pro {
    min-height: calc(100svh - 78px) !important;
    padding-top: clamp(42px, 9vh, 72px) !important;
    padding-bottom: clamp(26px, 7vh, 48px) !important;
  }

  main > .section,
  main > .page-screen,
  main > #plugins,
  main > #pricing,
  main > #faq,
  main > #support {
    padding-top: clamp(46px, 11vw, 70px);
    padding-bottom: clamp(46px, 11vw, 70px);
  }
}

@media (max-width: 820px) {
  .nav {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    padding-inline: 10px;
    overflow: visible;
  }

  .nav-inner {
    width: 100%;
    max-width: calc(100vw - 20px);
    gap: 10px;
    padding: 8px 10px 8px 14px;
    box-sizing: border-box;
    justify-content: flex-start;
  }

  .logo {
    min-width: 0;
    flex: 1 1 auto;
  }

  .logo-text {
    font-size: 1rem;
    letter-spacing: 0;
  }

  .theme-toggle,
  .nav-hamburger,
  .nav-mobile-toggle,
  #nav-bell {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  .nav-hamburger {
    display: inline-flex !important;
    position: fixed;
    top: 26px;
    right: 22px;
    z-index: 130;
    margin-left: 0;
    background: rgba(8, 8, 14, 0.78);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }

  .nav-cta,
  .nav-links {
    display: none !important;
  }
}

@media (max-width: 820px) {
  #nav-hamburger {
    display: inline-flex !important;
    position: fixed !important;
    top: 26px !important;
    right: 22px !important;
    z-index: 130 !important;
    width: 38px !important;
    height: 38px !important;
    align-items: center;
    justify-content: center;
    background: rgba(8, 8, 14, 0.82);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--fg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }
}

@media (max-width: 380px) {
  .logo-text {
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-inner {
    gap: 8px;
  }
}

@media (max-width: 520px) {
  .nav .theme-toggle {
    display: none !important;
  }

  .nav-hamburger {
    display: inline-flex !important;
    position: fixed;
    top: 26px;
    right: 22px;
    z-index: 130;
    margin-left: 0;
    background: rgba(8, 8, 14, 0.78);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }

  .nav-inner {
    position: relative;
    justify-content: space-between;
    min-height: 56px;
    padding-right: 58px;
  }

  .logo-text {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Mobile nav visual guard: keeps the menu affordance visible across browsers. */
#nav-hamburger {
  display: inline-flex !important;
  position: fixed !important;
  top: 26px !important;
  right: auto !important;
  left: min(calc(100vw - 60px), 330px) !important;
  z-index: 130 !important;
  width: 38px !important;
  height: 38px !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 50% !important;
  background: rgba(8, 8, 14, 0.82) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}

#nav-hamburger::before {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

#nav-hamburger svg {
  display: none !important;
}

@media (min-width: 821px) {
  #nav-hamburger {
    display: none !important;
    position: static !important;
  }

  #nav-hamburger::before {
    content: none;
  }
}

@media (min-width: 621px) and (max-width: 820px) {
  #nav-hamburger {
    right: 22px !important;
    left: auto !important;
  }
}

/* ====================================================================
   Minecraft Premium Storefront Overhaul
   ==================================================================== */

/* ---- Core Canvas Background (Deep Obsidian Grid) ---- */
.home-screen {
  background: transparent !important;
  background-image: none !important;
}

/* Hide all grid lines completely across the page as requested */
.mh-grid {
  display: none !important;
  background-image: none !important;
}

/* Position particles fixed across the entire background */
.bk-hero-canvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -1 !important; /* sit behind layout contents */
  pointer-events: none !important;
  opacity: 0.85 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* ---- Hero Pro Wordmark & Badge ---- */
.hero-pro-gold .hero-pro-badge {
  background: rgba(255, 215, 0, 0.08) !important;
  border-color: rgba(255, 215, 0, 0.25) !important;
  color: var(--mc-gold) !important;
  font-family: var(--mc-font-mono), monospace !important;
  font-size: 0.76rem !important;
  letter-spacing: 1px !important;
  text-shadow: 0 0 6px var(--mc-gold-glow) !important;
}
.hero-pro-wordmark {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -2px !important;
}
.hero-pro-wordmark .hpw-text {
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.9) !important;
}
.hero-pro-gold .hpw-accent .hpw-text {
  background: linear-gradient(135deg, var(--mc-gold) 0%, var(--mc-redstone) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 0 25px var(--mc-redstone-glow)) !important;
}
.hero-pro-tagline {
  color: #94a3b8 !important;
  font-size: 1.15rem !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

/* ---- Trust Marquee / Running Band ---- */
#trust-band {
  background: rgba(8, 8, 12, 0.85) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(10px) !important;
  padding: 22px 0 !important;
}

/* ---- Minecraft Material Storefront Cards ---- */
.plugins-mini-grid {
  gap: 24px !important;
}
.plugins-mini-grid .plugin-mini-link {
  perspective: 1000px !important;
}
.plugins-mini-grid .plugin-mini {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  background: linear-gradient(180deg, #13131c, #0a0a0f) !important; /* solid, not transparent */
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;
  position: relative;
  overflow: hidden;
}
.plugins-mini-grid .plugin-mini-link:hover .plugin-mini {
  transform: translateY(-8px) scale(1.025) !important;
}

/* Glint sweep element */
.plugins-mini-grid .plugin-mini::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -150% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.02) 30%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.02) 70%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  transform: skewX(-25deg) !important;
  transition: 0.75s !important;
  z-index: 2 !important;
}
.plugins-mini-grid .plugin-mini-link:hover .plugin-mini::before {
  animation: mcGlint 1.3s forwards !important;
}

/* Ranks -> Redstone-Rot */
.plugins-mini-grid .plugin-mini-link[href="/plugins/ranks"] .plugin-mini {
  border-bottom: 3px solid var(--mc-redstone) !important;
}
.plugins-mini-grid .plugin-mini-link[href="/plugins/ranks"] .plugin-mini-title {
  color: var(--mc-redstone) !important;
  text-shadow: 0 0 10px var(--mc-redstone-glow) !important;
}
.plugins-mini-grid .plugin-mini-link[href="/plugins/ranks"]:hover .plugin-mini {
  box-shadow: 0 20px 40px -10px var(--mc-redstone-glow), 0 0 0 1px var(--mc-redstone) !important;
  border-color: var(--mc-redstone) !important;
}

/* Board -> Diamond-Cyan */
.plugins-mini-grid .plugin-mini-link[href="/plugins/board"] .plugin-mini {
  border-bottom: 3px solid var(--mc-diamond) !important;
}
.plugins-mini-grid .plugin-mini-link[href="/plugins/board"] .plugin-mini-title {
  color: var(--mc-diamond) !important;
  text-shadow: 0 0 10px var(--mc-diamond-glow) !important;
}
.plugins-mini-grid .plugin-mini-link[href="/plugins/board"]:hover .plugin-mini {
  box-shadow: 0 20px 40px -10px var(--mc-diamond-glow), 0 0 0 1px var(--mc-diamond) !important;
  border-color: var(--mc-diamond) !important;
}

/* Core -> Gold-Gelb */
.plugins-mini-grid .plugin-mini-link[href="/plugins/core"] .plugin-mini {
  border-bottom: 3px solid var(--mc-gold) !important;
}
.plugins-mini-grid .plugin-mini-link[href="/plugins/core"] .plugin-mini-title {
  color: var(--mc-gold) !important;
  text-shadow: 0 0 10px var(--mc-gold-glow) !important;
}
.plugins-mini-grid .plugin-mini-link[href="/plugins/core"]:hover .plugin-mini {
  box-shadow: 0 20px 40px -10px var(--mc-gold-glow), 0 0 0 1px var(--mc-gold) !important;
  border-color: var(--mc-gold) !important;
}

/* Crates -> Emerald-Grün */
.plugins-mini-grid .plugin-mini-link[href="/plugins/crates"] .plugin-mini {
  border-bottom: 3px solid var(--mc-emerald) !important;
}
.plugins-mini-grid .plugin-mini-link[href="/plugins/crates"] .plugin-mini-title {
  color: var(--mc-emerald) !important;
  text-shadow: 0 0 10px var(--mc-emerald-glow) !important;
}
.plugins-mini-grid .plugin-mini-link[href="/plugins/crates"]:hover .plugin-mini {
  box-shadow: 0 20px 40px -10px var(--mc-emerald-glow), 0 0 0 1px var(--mc-emerald) !important;
  border-color: var(--mc-emerald) !important;
}

/* Spawn -> Portal Purple */
.plugins-mini-grid .plugin-mini-link[href="/plugins/spawn"] .plugin-mini {
  border-bottom: 3px solid #a855f7 !important;
}
.plugins-mini-grid .plugin-mini-link[href="/plugins/spawn"] .plugin-mini-title {
  color: #c084fc !important;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.5) !important;
}
.plugins-mini-grid .plugin-mini-link[href="/plugins/spawn"]:hover .plugin-mini {
  box-shadow: 0 20px 40px -10px rgba(168, 85, 247, 0.5), 0 0 0 1px #a855f7 !important;
  border-color: #a855f7 !important;
}

/* Proxy -> Ender Magenta */
.plugins-mini-grid .plugin-mini-link[href="/plugins/proxy"] .plugin-mini {
  border-bottom: 3px solid #ec4899 !important;
}
.plugins-mini-grid .plugin-mini-link[href="/plugins/proxy"] .plugin-mini-title {
  color: #f472b6 !important;
  text-shadow: 0 0 10px rgba(236, 72, 153, 0.5) !important;
}
.plugins-mini-grid .plugin-mini-link[href="/plugins/proxy"]:hover .plugin-mini {
  box-shadow: 0 20px 40px -10px rgba(236, 72, 153, 0.5), 0 0 0 1px #ec4899 !important;
  border-color: #ec4899 !important;
}

/* ---- Pricing Grid Overhaul ---- */
.pricing-grid {
  gap: 26px !important;
}
.pricing-card {
  background: linear-gradient(180deg, rgba(20, 20, 30, 0.65), rgba(5, 5, 8, 0.95)) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.pricing-card:hover {
  transform: translateY(-10px) scale(1.01) !important;
}
.pricing-card:hover {
  border-color: var(--mc-gold) !important;
  box-shadow: 0 25px 60px -15px var(--mc-gold-glow) !important;
}
/* Featured Pro -> Emerald Vibe */
.pricing-card.featured {
  border-color: rgba(16, 185, 129, 0.25) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.6), 0 0 20px rgba(16, 185, 129, 0.05) !important;
}
.pricing-card.featured:hover {
  border-color: var(--mc-emerald) !important;
  box-shadow: 0 25px 60px -15px var(--mc-emerald-glow) !important;
}
/* Enterprise -> Diamond Vibe */
.pricing-card:nth-child(3):hover {
  border-color: var(--mc-diamond) !important;
  box-shadow: 0 25px 60px -15px var(--mc-diamond-glow) !important;
}