/* DBD Tracker Modular Foundation — Layout primitives */
.dbd-page-shell{
  max-width:var(--dbd-page-max);
  margin:0 auto;
  padding:0 var(--dbd-page-pad) var(--dbd-space-6);
}
.dbd-page-shell.dbd-page-shell-narrow{--dbd-page-max:1120px;}
.dbd-page-shell.dbd-page-shell-wide{--dbd-page-max:1800px;}
.dbd-page-stack{display:flex;flex-direction:column;gap:var(--dbd-section-gap);}
.dbd-page-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:var(--dbd-space-4);
  flex-wrap:wrap;
  background:linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  border:1px solid var(--dbd-border);
  border-radius:var(--dbd-radius-md);
  box-shadow:var(--dbd-shadow);
  padding:var(--dbd-space-5);
  position:relative;
  overflow:hidden;
}
.dbd-page-hero::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(to bottom, var(--dbd-accent), transparent 70%);
  opacity:.75;
}
.dbd-page-hero-copy{min-width:240px;position:relative;z-index:1;}
.dbd-page-kicker{
  margin:0 0 var(--dbd-space-1);
  color:var(--dbd-accent-text);
  font-size:var(--dbd-text-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
}
.dbd-page-title{margin:0;font-family:var(--dbd-font-heading);font-size:var(--dbd-text-3xl);text-transform:uppercase;letter-spacing:.03em;}
.dbd-page-subtitle{margin:var(--dbd-space-1) 0 0;color:var(--dbd-muted);max-width:70ch;}
.dbd-page-actions{display:flex;gap:var(--dbd-space-2);flex-wrap:wrap;align-items:center;position:relative;z-index:1;}
.dbd-section-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--dbd-section-gap);}
.dbd-span-12{grid-column:span 12}.dbd-span-9{grid-column:span 9}.dbd-span-8{grid-column:span 8}.dbd-span-7{grid-column:span 7}.dbd-span-6{grid-column:span 6}.dbd-span-5{grid-column:span 5}.dbd-span-4{grid-column:span 4}.dbd-span-3{grid-column:span 3}
.dbd-two-column{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--dbd-section-gap);align-items:start;}
.dbd-sidebar{display:flex;flex-direction:column;gap:var(--dbd-section-gap);}
.dbd-main-region{display:flex;flex-direction:column;gap:var(--dbd-section-gap);min-width:0;}
@media (max-width: 980px){
  .dbd-two-column{grid-template-columns:1fr;}
  .dbd-span-9,.dbd-span-8,.dbd-span-7,.dbd-span-6,.dbd-span-5,.dbd-span-4,.dbd-span-3{grid-column:span 12;}
}

/* Component Lab / modular skin surface */
.component-lab-page{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
    linear-gradient(180deg,var(--dbd-page-bg-top,#05080C) 0%,#04060a 58%,var(--dbd-page-bg-bottom,#020308) 100%);
  background-attachment:fixed;
}
.dbd-page-hero{
  background:
    var(--dbd-panel-grain),
    linear-gradient(135deg,var(--dbd-panel-top,#101E27) 0%,#0d141b 46%,var(--dbd-panel-bottom,#090B0F) 100%);
}