/* ========================================================================== */
/*  KBNETZ — Global Styles (unified)                                          */
/* ========================================================================== */

/* === Design tokens === */
:root {
  /* Brand & palette */
  --brand-1: #111111;
  --brand-2: #FF6437;
  --brand-3: #22c55e;
  --text:    #eaeaea;
  --muted:   #9aa1a9;
  --card:        #1a1f29;
  --card-raise:  #222838;

  /* Metallic accents */
  --copper: #B87333;
  --copper-dark: #8B5A2B;
  --nickel: #B8B8B8;
  --silver: #C0C0C0;
  --dark-silver: #6B6B6B;
  --brushed-metal: linear-gradient(135deg, #6B6B6B 0%, #8A8A8A 25%, #6B6B6B 50%, #8A8A8A 75%, #6B6B6B 100%);

  /* Layout */
  --page-max: 1200px;
  --header-h: 72px;
}

/* === Reset / base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  background-color: var(--brand-1);
  color: var(--text);
  line-height: 1.6;
  background-image:
    linear-gradient(rgba(17,17,17,.85), rgba(17,17,17,.85));
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

a {
  color: var(--brand-2);
  text-decoration: none;
  transition: color .2s ease;
}
a:hover { color: var(--brand-3); }
a:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ========================================================================== */
/*  Header                                                                    */
/* ========================================================================== */

.header-sticky {
  position: sticky; top: 0; z-index: 1000;
  background: linear-gradient(to bottom, rgba(17,17,17,.95), rgba(17,17,17,.85));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(184, 184, 184, .15);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.header-container {
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem 2rem; max-width: 1400px; margin: 0 auto;
}

.logo-link {
  display: flex; align-items: center; gap: .75rem;
  font-weight: 600; font-size: 1.25rem; color: var(--text);
  transition: filter .2s ease;
}
.logo-link:hover { filter: drop-shadow(0 0 8px rgba(184, 115, 51, .4)); }
.logo { height: 80px; width: auto; transition: filter .2s ease; }

.main-nav { display: flex; gap: 1.5rem; align-items: center; }

.nav-link {
  color: var(--muted); font-weight: 500; position: relative; padding: .5rem 0;
  letter-spacing: 0.3px;
  transition: color .2s ease, transform .15s ease;
}
.nav-link::after{
  content:''; position:absolute; bottom:0; left:0; width:100%; height:2px;
  background: linear-gradient(90deg, var(--copper), var(--brand-2));
  transform: scaleX(0); transform-origin:right;
  transition: transform .25s ease-out;
}
.nav-link:hover { color: var(--text); transform: translateY(-1px); }
.nav-link:hover::after, .nav-link:focus::after { transform: scaleX(1); transform-origin:left; }

.nav-item-home-wrapper { position: relative; }
.home-dropdown{
  display:none; position:absolute; top:100%; left:0;
  background: linear-gradient(to bottom, rgba(34,40,56,.98), rgba(26,31,41,.98));
  backdrop-filter: blur(8px);
  border-radius:8px; padding:.5rem; min-width:150px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(184,184,184,.1);
  border: 1px solid rgba(107,107,107,.2);
}
.nav-item-home-wrapper:hover .home-dropdown{ display:block; }
.home-dropdown a{ display:block; padding:.5rem 1rem; color:var(--muted); border-radius:4px; }
.home-dropdown a:hover{ background-color: var(--brand-1); color: var(--text); }

.header-actions { display:flex; align-items:center; gap:1rem; }

/* Settings/Privacy Icon */
.settings-button{
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(184,115,51,.3);
  padding:.5rem .75rem;
  border-radius:6px;
  font-weight:500;
  cursor:pointer;
  transition: all .2s ease;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}
.settings-button:hover{
  background: rgba(255,255,255,.05);
  border-color: var(--brand-2);
  color: var(--text);
  transform: translateY(-1px);
}
.settings-button:active{
  transform: translateY(0);
}
.settings-button svg{
  width: 18px;
  height: 18px;
  transition: transform .3s ease;
}
.settings-button:hover svg{
  transform: rotate(45deg);
}

.search-input {
  background-color: var(--card);
  border: 1px solid rgba(107,107,107,.3);
  color: var(--text);
  padding:.5rem .75rem; border-radius:6px;
  transition: all .2s ease, width .3s ease;
  width:180px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}
.search-input::placeholder { color: var(--dark-silver); }
.search-input:focus{
  outline:none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 2px rgba(255,100,55,.4), inset 0 1px 3px rgba(0,0,0,.2);
  width:220px;
}

.login-button{
  background: linear-gradient(135deg, #2a2a2a, #1f1f1f);
  color: var(--text);
  border: 1px solid rgba(184,115,51,.5);
  padding:.5rem 1rem; border-radius:6px; font-weight:600; cursor:pointer;
  transition: all .15s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
  position: relative;
  overflow: hidden;
}
.login-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(184,115,51,.15), transparent);
  opacity: 0;
  transition: opacity .2s ease;
}
.login-button:hover {
  background: linear-gradient(135deg, #333, #2a2a2a);
  border-color: var(--brand-2);
  box-shadow: 0 4px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(-1px);
}
.login-button:hover::before { opacity: 1; }
.login-button:active{ transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 1px 3px rgba(0,0,0,.3); }

/* ========================================================================== */
/*  Home: Hero & Feature cards                                                */
/* ========================================================================== */

.hero{
  text-align:center; padding: 6rem 2rem;
  background: radial-gradient(ellipse at center, rgba(255,100,55,.03) 0%, transparent 70%);
}
.hero-content h1{
  font-size:3rem; margin-bottom:1rem; font-weight:700;
  background: linear-gradient(to bottom, #ffffff, #c0c0c0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.hero-content p{
  font-size:1.25rem; color:var(--muted); max-width:600px; margin:0 auto;
  line-height: 1.7;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

.features-section{ padding:2rem; max-width:1200px; margin:0 auto; }
.features-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:2rem;
}
.feature-card{
  background-color: var(--card); border-radius:12px; overflow:hidden; color: var(--text);
  border: 1px solid rgba(107,107,107,.2);
  box-shadow:
    0 2px 4px rgba(0,0,0,.2),
    0 4px 8px rgba(0,0,0,.15),
    0 8px 16px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.03);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
}
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(184,115,51,.3), transparent, rgba(184,184,184,.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .2s ease;
}
.feature-card:hover{
  transform: translateY(-6px);
  border-color: var(--brand-2);
  box-shadow:
    0 4px 8px rgba(0,0,0,.25),
    0 8px 16px rgba(0,0,0,.2),
    0 16px 32px rgba(0,0,0,.15),
    0 0 0 2px var(--brand-2),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.feature-card:hover::before { opacity: 1; }
.card-image{
  width:100%; height:200px; object-fit:cover;
  transition: transform .3s ease;
  position: relative;
}
.feature-card:hover .card-image { transform: scale(1.05); }
.feature-card .card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(184,115,51,.15), transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
}
.feature-card:hover .card-image::after { opacity: 1; }
.card-content{ padding:1.5rem; }
.card-title{
  font-size:1.5rem; margin-bottom:.5rem; color:var(--text);
  font-weight: 600;
  letter-spacing: -0.3px;
}
.card-blurb{
  color:var(--muted);
  line-height: 1.6;
}

.no-results-message{
  text-align:center; margin-top:2rem; color:var(--muted); font-size:1.1rem;
}

/* ========================================================================== */
/*  GDPR Banner (site-wide, hardened)                                         */
/* ========================================================================== */

.kbz-privacy-banner{
  position: fixed; left:0; right:0; bottom:0;
  background-color: var(--card-raise);
  padding: 1rem 2rem;
  display:none; /* Hidden by default, controlled by data-kbz-privacy */
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 -4px 12px rgba(0,0,0,.3);
  z-index: 2000;            /* must beat overlays */
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
}

/* Show banner only when consent is pending */
:root[data-kbz-privacy="pending"] .kbz-privacy-banner{
  display: flex;
  opacity: 1;
  visibility: visible;
}

/* Hide banner during uncertain state (Brave shields settling) */
:root[data-kbz-privacy="uncertain"] .kbz-privacy-banner{
  display: none;
  opacity: 0;
  visibility: hidden;
}

.kbz-privacy-banner p{ margin:0; color:var(--text); line-height: 1.6; text-align: center; }
.kbz-privacy-banner a{ color: var(--brand-2); font-weight: 500; }
.kbz-privacy-actions{ display:flex; gap:1rem; flex-wrap: wrap; justify-content: center; align-items: center; }
.kbz-privacy-button{
  padding:.5rem 1rem; border-radius:6px; cursor:pointer; font-weight:500;
  border:1px solid transparent; background:transparent; color: var(--text);
  transition: all .2s ease;
}
.kbz-privacy-button.learn-more{
  border-color: rgba(255,255,255,.2);
  color: var(--text);
  background: rgba(255,255,255,.05);
}
.kbz-privacy-button.learn-more:hover{
  border-color: var(--brand-2);
  background: rgba(255,255,255,.08);
}
#kbzAllowBtn{
  background: linear-gradient(135deg, var(--brand-3), #16a34a);
  color:#fff;
  border: none;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}
#kbzAllowBtn:hover{
  background: linear-gradient(135deg, #16a34a, #15803d);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
  transform: translateY(-1px);
}
#kbzDeclineBtn{
  background: linear-gradient(135deg, #2a2a2a, #1f1f1f);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.2);
}
#kbzDeclineBtn:hover{
  background: linear-gradient(135deg, #333, #2a2a2a);
  border-color: rgba(255,255,255,.3);
  transform: translateY(-1px);
}

/* Lift page content while banner visible */
:root[data-kbz-privacy="pending"] body{ padding-bottom: 80px; }

/* ========================================================================== */
/*  Modal System (normalized so GDPR wins)                                    */
/* ========================================================================== */

#modal-overlay,
#modalOverlay,
#modal-overlay-pz,
.modal-overlay{
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  background-color: rgba(0,0,0,.7);
  z-index: 1900; /* below GDPR */
}

.modal{
  position: fixed; top:50%; left:50%;
  transform: translate(-50%, -50%);
  background-color: var(--card);
  border-radius: 12px; padding: 2rem;
  z-index: 1950; /* below GDPR, above overlay */
  width: 90%; max-width: 600px; max-height: 80vh; overflow-y:auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.modal-content{ position:relative; }
.modal-close-button{
  position:absolute; top:-1rem; right:-1rem;
  background:none; border:none; font-size:2rem; color:var(--muted); cursor:pointer;
}
.modal-full-page-link{ display:inline-block; margin-top:1rem; font-size:.9rem; }

/* ========================================================================== */
/*  Projectz/Cheatz: split layout + tree + leaf views                         */
/* ========================================================================== */

/* Split */
.pz-split{
  display:grid; grid-template-columns: var(--pz-left, 280px) 1fr; gap:0;
  min-height: calc(100vh - var(--header-h));
}
.pz-left{
  position:relative; min-width:200px; max-width:50vw;
  border-right:1px solid var(--card);
  display:flex; flex-direction:column; overflow:hidden; overflow-x:hidden;
}
.pz-right{
  min-height:50vh; padding:1rem 2rem; max-width: var(--page-max); margin:0 auto; width:100%;
}
.pz-resizer{ position:absolute; top:0; right:0; width:6px; cursor:col-resize; height:100%; background:transparent; }
.pz-resizer:focus{ outline:2px dashed #888; outline-offset:-2px; }

/* Toolbar — TOP (stable) */
.pz-tools{
  order:-1; position: sticky; top:0; z-index:5;
  display:flex; gap:.5rem; padding:.5rem;
  background: rgba(0,0,0,.3); backdrop-filter: saturate(120%) blur(2px);
  border-bottom:1px solid var(--card);
  justify-content:center; align-items:center;
}

/* Tree */
#pz-tree{ flex:1 1 auto; overflow:auto; overflow-x:hidden; padding:.5rem .25rem .5rem .5rem; }
.pz-tree ul{ list-style:none; margin:0 0 0 .75rem; padding:0; }
.pz-tree .ti{ display:block; }
.pz-tree .ti > ul{ display:none; padding-left:.9rem; margin-left:.15rem; }
.pz-tree .ti.open > ul{ display:block; }
.pz-tree .ti-row{ display:flex; align-items:center; gap:.4rem; padding:.25rem .25rem; border-radius:.4rem; min-width:0; }
.pz-tree .ti-row:hover{ background: rgba(255,255,255,.06); }
.pz-tree .ti button.tree-label{ all:unset; cursor:pointer; color:var(--muted); transition: color .2s ease; }
.pz-tree .ti .tree-label{ display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pz-tree .ti button.tree-label:hover{ color:var(--text); }
.pz-tree .ti .chev{ transition: transform .15s ease; color:var(--muted); }
.pz-tree .ti.open > .ti-row > .chev{ transform: rotate(90deg); }
.pz-tree .ti.leaf .chev{ opacity:.35; }

.pz-breadcrumbs{ font-size:.9rem; color:var(--muted); margin:0 0 .5rem; }

.pz-view{
  max-width: 100%;
}

/* Leaf grid + image */
.pz-view .pz-leaf-grid{
  display:grid; grid-template-columns: minmax(160px, 240px) 1fr; gap:1rem; align-items:start;
  margin-bottom: 2rem;
}

.pz-leaf-grid h2{
  margin: 0 0 0.75rem 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.pz-leaf-grid p{
  margin: 0;
  line-height: 1.6;
}
@media (min-width: 900px){
  .pz-view .pz-leaf-grid{
    grid-template-columns: minmax(220px, 300px) 1fr; gap:1.25rem;
    margin-bottom: 2.5rem;
  }
}
.pz-leaf-img{
  width:100%; aspect-ratio: 16/10; border-radius:.5rem;
  background: linear-gradient(180deg, #171a22, #0e1016);
  display:flex; align-items:center; justify-content:center; color:#888; overflow:hidden;
}
.pz-leaf-img img{ width:100%; height:100%; object-fit:cover; border-radius:.5rem; max-height: clamp(140px, 22vw, 240px); }

/* Aspect Ratio Utilities */
.pz-leaf-img.square{ aspect-ratio:1/1; }
.pz-leaf-img.tall{ aspect-ratio:3/4; }
.pz-leaf-img.wide{ aspect-ratio:21/9; }
.pz-leaf-img.ratio-16x9{ aspect-ratio:16/9; }
.pz-leaf-img.ratio-4x3{ aspect-ratio:4/3; }
.pz-leaf-img.ratio-1x1{ aspect-ratio:1/1; }
.pz-leaf-img.ratio-3x4{ aspect-ratio:3/4; }
.pz-leaf-img.ratio-21x9{ aspect-ratio:21/9; }
.pz-leaf-img.contain img{ object-fit: contain; background: transparent; }

/* Buttons & sections */
.btn{
  display:inline-block; padding:.45rem .7rem;
  border: 1px solid rgba(107,107,107,.4);
  border-radius:.4rem;
  background: linear-gradient(135deg, rgba(42,42,42,.8), rgba(31,31,31,.8));
  color: var(--text); cursor:pointer; text-decoration:none;
  transition: all .15s ease;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
}
.btn:hover{
  background: linear-gradient(135deg, rgba(51,51,51,.9), rgba(42,42,42,.9));
  border-color: var(--copper);
  box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.btn.small{ padding:.3rem .55rem; font-size:.9rem; }
.btn-row{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem; }

/* Icon-only minis in tools */
#pz-tools .btn.small{ width:28px; height:28px; padding:0; font-size:0; display:inline-grid; place-items:center; }
#pz-expand-all.btn.small::before{ content:"▾▾"; font-size:14px; line-height:1; }
#pz-collapse-all.btn.small::before{ content:"▸▸"; font-size:14px; line-height:1; }

/* Project Meta Fields */
.pz-meta{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.pz-meta-row{
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.pz-meta-field{
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  flex: 1;
  min-width: 200px;
}

.pz-meta-field.pz-meta-full{
  flex: 1 1 100%;
}

.pz-meta-label{
  font-weight: 600;
  color: var(--brand-2);
  white-space: nowrap;
}

.pz-meta-value{
  color: var(--text);
}

/* Cheatz Sections Container */
.cheatz-sections{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.cheatz-section{
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
}

.cheatz-section.first{
  padding-top: 0;
  border-top: none;
}

.cheatz-section h3{
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--brand-2);
  letter-spacing: 0.02em;
}

.cheatz-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cheatz-list li{
  line-height: 1.6;
  padding-left: 1.25rem;
  position: relative;
}

.cheatz-list li::before{
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--brand-2);
  opacity: 0.6;
}

.cheatz-list li strong{
  color: var(--text);
  font-weight: 600;
}

.cheatz-list li .muted{
  opacity: 0.7;
}

.cheatz-examples{
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cheatz-example-item{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cheatz-example-item strong{
  color: var(--brand-2);
  font-weight: 600;
  font-size: 0.95rem;
}

.cheatz-example-item pre{
  margin: 0.5rem 0 0 0;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.5rem;
  border-left: 3px solid var(--brand-2);
  overflow-x: auto;
}

.cheatz-example-item code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}

.cheatz-learn {
  margin-top: 1.2rem; /* or 1rem, whatever spacing you prefer */
  display: block;
}

/* Leaf lists / tables / cards */
.leaf-section{ margin-top:1.5rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.06); }
.leaf-list.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap:.75rem 1.25rem; }
.term-row .term{ font-weight:600; }
.term-row .desc{ opacity:.9; }

.leaf-table{ width:100%; border-collapse: collapse; }
.leaf-table th, .leaf-table td{
  padding:.6rem .7rem; border-bottom:1px solid rgba(255,255,255,.08); vertical-align: top;
}
.leaf-table .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.card-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:1rem; }
.card{ border:1px solid rgba(255,255,255,.08); border-radius:.75rem; padding:.9rem; background: rgba(255,255,255,.02); }

.code-wrap{ position:relative; }
.btn-copy{ position:absolute; right:.5rem; top:.5rem; }
pre.code{ margin:0; padding:.9rem; overflow:auto; border-radius:.5rem; background:#0e0e0e; }
pre.code code{ white-space: pre; display:block; }

/* ========================================================================== */
/*  Reduced Motion                                                            */
/* ========================================================================== */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================================================== */
/*  Responsive                                                                 */
/* ========================================================================== */

@media (max-width: 900px){
  .pz-split{ grid-template-columns: 1fr; }
  .pz-left{
    position:fixed; z-index:10; inset: var(--header-h, 0) 0 auto 0;
    max-width:none; height:40vh; transform: translateY(-110%); transition: transform .2s;
  }
  .pz-left.open{ transform: translateY(0); }
  .pz-resizer{ display:none; }
}

@media (max-width: 768px){
  .header-container{ flex-direction: column; gap:1rem; }
  .main-nav{ width:100%; justify-content:center; gap:1rem; }
  .header-actions{ width:100%; justify-content:space-between; }
  .hero{ padding: 4rem 1rem; }
  .hero-content h1{ font-size:2.5rem; }

  .kbz-privacy-banner{
    flex-direction: column; text-align: center; gap:.75rem; padding:.75rem 1rem;
  }
  .kbz-privacy-actions{ flex-wrap: wrap; justify-content:center; }
}

/* --- Reaction Demo styles (consolidated & scoped) --- */
.rx-launchers .btn { margin-bottom: 4px; }
.rx-lastline { font-size: 0.85rem; opacity: 0.8; margin: 0 0 12px 0; }

/* Modal root + visibility */
.rx-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2147483000;       /* above everything */
  pointer-events: none;      /* children handle clicks */
}
.rx-modal[aria-hidden="false"] { display: block; }

/* Backdrop under card */
.rx-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}

/* Card: centered and lifted */
.rx-modal-card {
  position: fixed;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 640px);
  z-index: 1;                /* above backdrop */
  background: linear-gradient(to bottom, #1a1a1a, #121212);
  color: #e8e8e8;
  border-radius: 16px;
  border-top: 3px solid var(--rx-variant-color, #ff8c00);
  padding: 20px 20px 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.65);
  outline: 2px solid rgba(255,255,255,0.08);
  pointer-events: auto;
}

/* Close button */
.rx-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: 0;
  color: #aaa;
  font-size: 18px;
  cursor: pointer;
}
.rx-close:hover { color: #fff; }

.rx-title { margin: 4px 0 8px; }
.rx-sub { margin: 0 0 12px; opacity: 0.9; }

/* Lights */
.rx-lights { display: flex; justify-content: center; gap: 18px; margin: 18px 0 12px; }
.rx-light {
  width: 56px; height: 56px; border-radius: 50%;
  background: #2b2b2b; box-shadow: inset 0 0 12px rgba(0,0,0,0.6);
  transition: all 0.15s ease-out;
}
.rx-light.on {
  background: var(--rx-variant-color, #ff8c00);
  box-shadow: 0 0 18px var(--rx-variant-glow, rgba(255,140,0,0.8)), inset 0 0 8px rgba(0,0,0,0.6);
  animation: rx-pulse 0.3s ease-out;
}

@keyframes rx-pulse {
  0% { transform: scale(0.95); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.rx-status { min-height: 20px; color: var(--rx-variant-color, #ff8c00); margin-bottom: 6px; font-weight: 500; }
.rx-results { min-height: 56px; line-height: 1.6; }
.rx-results strong { color: var(--rx-variant-color, #ff8c00); }

/* Scoped buttons (won't affect quizzes/sitewide .btn) */
.rx-launchers .btn,
.rx-modal .btn {
  display: inline-block;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #2e2e2e;
  background: #1b1b1b;
  color: #e8e8e8;
  transition: all 0.2s ease;
}
.rx-launchers .btn:hover,
.rx-modal .btn:hover {
  background: #232323;
  border-color: var(--rx-variant-color, #ff8c00);
  box-shadow: 0 0 8px var(--rx-variant-glow, rgba(255,140,0,0.3));
}

/* Modal action buttons - enhanced hierarchy */
.rx-modal #rx-start,
.rx-modal #rx-next {
  padding: 10px 18px;
  font-size: 1.05rem;
  font-weight: 500;
  background: linear-gradient(135deg, #1f1f1f, #2a2a2a);
  border-color: var(--rx-variant-color, #ff8c00);
}
.rx-modal #rx-start:hover,
.rx-modal #rx-next:hover {
  background: linear-gradient(135deg, #2a2a2a, #333);
  box-shadow: 0 0 12px var(--rx-variant-glow, rgba(255,140,0,0.5));
}

/* Background blur while modal open — target your main wrapper(s) */
body.rx-blur main,
body.rx-blur #app,
body.rx-blur .page-root {
  filter: blur(2px);
}

/* ========================================================================== */
/*  Quiz Runner Styles (aligned with Reaction Demo aesthetics)               */
/* ========================================================================== */

:root {
  --quiz-accent: #ff8c00;
  --quiz-accent-glow: rgba(255, 140, 0, 0.6);
  --quiz-correct: #22c55e;
  --quiz-correct-glow: rgba(34, 197, 94, 0.5);
  --quiz-incorrect: #ef4444;
  --quiz-incorrect-glow: rgba(239, 68, 68, 0.5);
}

.quiz-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: var(--muted);
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.quiz-opt {
  display: inline-block;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #2e2e2e;
  background: #1b1b1b;
  color: #e8e8e8;
  transition: all 0.2s ease;
  text-align: left;
  font-size: 0.95rem;
  position: relative;
  overflow: hidden;
}

.quiz-opt:hover:not(:disabled) {
  background: #232323;
  border-color: var(--quiz-accent);
  box-shadow: 0 0 8px var(--quiz-accent-glow);
  transform: translateY(-1px);
}

.quiz-opt.quiz-selected {
  background: linear-gradient(135deg, #2a2a2a, #1f1f1f);
  border-color: var(--quiz-accent);
  box-shadow: 0 0 12px var(--quiz-accent-glow), inset 0 0 20px rgba(255, 140, 0, 0.15);
  color: #fff;
  font-weight: 500;
}

.quiz-opt.quiz-selected::before {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--quiz-accent);
  font-size: 1.1rem;
  font-weight: bold;
  animation: quiz-check-in 0.2s ease-out;
}

@keyframes quiz-check-in {
  0% {
    transform: scale(0) rotate(-45deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(10deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.quiz-opt:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.quiz-feedback {
  min-height: 2.5rem;
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  animation: quiz-feedback-in 0.3s ease-out;
}

@keyframes quiz-feedback-in {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.quiz-feedback-correct {
  color: var(--quiz-correct);
  margin: 0;
}

.quiz-feedback-correct strong {
  color: var(--quiz-correct);
  text-shadow: 0 0 8px var(--quiz-correct-glow);
}

.quiz-feedback-incorrect {
  color: var(--quiz-incorrect);
  margin: 0;
}

.quiz-feedback-incorrect strong {
  color: var(--quiz-incorrect);
  text-shadow: 0 0 8px var(--quiz-incorrect-glow);
}

.quiz-feedback-incorrect em {
  color: var(--quiz-accent);
  font-style: normal;
  font-weight: 500;
}

.quiz-action {
  margin-top: 0.75rem;
  display: flex;
  justify-content: center;
}

.quiz-submit {
  padding: 10px 24px;
  font-size: 1.05rem;
  font-weight: 500;
  background: linear-gradient(135deg, #1f1f1f, #2a2a2a);
  border: 1px solid var(--quiz-accent);
  border-radius: 10px;
  color: #e8e8e8;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
}

.quiz-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, #2a2a2a, #333);
  box-shadow: 0 0 12px var(--quiz-accent-glow);
  transform: translateY(-1px);
}

.quiz-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: #2e2e2e;
}

.quiz-submit.quiz-next {
  background: linear-gradient(135deg, var(--quiz-accent), #d17600);
  border-color: var(--quiz-accent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 12px var(--quiz-accent-glow);
}

.quiz-submit.quiz-next:hover {
  background: linear-gradient(135deg, #d17600, var(--quiz-accent));
  box-shadow: 0 0 18px var(--quiz-accent-glow);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .quiz-options {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================== */
/*  Simple Content Pages (Privacy, Terms, Contacts, GDPR)                   */
/* ========================================================================== */

.simple-page-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 2rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.simple-page-content.centered {
  text-align: center;
  justify-content: center;
}

.simple-page-content h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  background: linear-gradient(to bottom, #ffffff, var(--silver));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.simple-page-content .effective-date {
  font-size: 0.95rem;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 1rem;
}

.simple-page-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 1rem;
}

.simple-page-content ul.contact-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.simple-page-content ul.contact-list li {
  padding: 1rem 1.5rem;
  background: var(--card);
  border-radius: 8px;
  border-left: 3px solid var(--copper);
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  transition: all .2s ease;
}

.simple-page-content ul.contact-list li:hover {
  border-left-color: var(--brand-2);
  transform: translateX(4px);
  box-shadow: 0 4px 8px rgba(0,0,0,.3);
}

.simple-page-content ul.contact-list li strong {
  color: var(--brand-2);
  font-weight: 600;
  margin-right: 0.5rem;
}

.simple-page-content .back-link {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #2a2a2a, #1f1f1f);
  color: var(--text);
  border: 1px solid var(--copper);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
  position: relative;
  overflow: hidden;
}

.simple-page-content .back-link::before {
  content: '← ';
  margin-right: 0.5rem;
  transition: transform .2s ease;
  display: inline-block;
}

.simple-page-content .back-link:hover {
  background: linear-gradient(135deg, #333, #2a2a2a);
  border-color: var(--brand-2);
  box-shadow: 0 4px 8px rgba(0,0,0,.4);
  transform: translateY(-2px);
  color: var(--brand-2);
}

.simple-page-content .back-link:hover::before {
  transform: translateX(-4px);
}

@media (max-width: 768px) {
  .simple-page-content {
    padding: 2rem 1.5rem;
  }

  .simple-page-content h1 {
    font-size: 2rem;
  }

  .simple-page-content p {
    font-size: 1rem;
  }
}

.pz-leaf-footer {
  grid-column: 1 / -1;      /* ⬅ span A and B (full row) */
  margin-top: 1.5rem;
  text-align: center;       /* center content horizontally */
}

.pz-leaf-footer p {
  max-width: 60ch;          /* optional: readable width */
  margin: 0.25rem auto;     /* center paragraphs */
}

.pz-leaf-footer h2,
.pz-leaf-footer h1 {
  margin-top: 1rem;
}