/* BJC Smart Studio Background Pack 3 — Subtle Grids. CSS only, transparent layers. */
.bjc-studio-section {
  --bjc-bg3-blue:color-mix(in srgb,#b4cddd 80%,var(--bjc-studio-bg-accent,#b4cddd));
  --bjc-bg3-grey:color-mix(in srgb,#bdc6cf 80%,var(--bjc-studio-bg-secondary,#bdc6cf));
  --bjc-bg3-line:color-mix(in srgb,var(--bjc-bg3-blue) var(--bjc-studio-bg-strength,14%),transparent);
  --bjc-bg3-major:color-mix(in srgb,var(--bjc-bg3-grey) calc(var(--bjc-studio-bg-strength,14%) * 1.6),transparent);
}

/* 01. Blueprint Margins */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-blueprint-margins {
  --line:color-mix(in srgb,var(--bjc-bg3-blue) calc(var(--bjc-studio-bg-strength,14%) * 1.05),transparent); --major:var(--bjc-bg3-major);
  background: linear-gradient(90deg,var(--line) 1px,transparent 1px) 5% 0/90% 100% no-repeat,linear-gradient(90deg,var(--line) 1px,transparent 1px) 95% 0/90% 100% no-repeat,linear-gradient(0deg,var(--line) 1px,transparent 1px) 0 12%/100% 76% no-repeat,repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 16px) 3% 0/12px 100% no-repeat,repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 16px) 97% 0/12px 100% no-repeat !important;
}

/* 02. Graph Paper */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-graph-paper {
  --line:var(--bjc-bg3-line); --major:var(--bjc-bg3-major);
  background: linear-gradient(var(--major) 1px,transparent 1px) 0 0/120px 120px,linear-gradient(90deg,var(--major) 1px,transparent 1px) 0 0/120px 120px,linear-gradient(var(--line) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/24px 24px !important;
}

/* 03. Engineering Scale */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-engineering-scale {
  --line:color-mix(in srgb,var(--bjc-bg3-blue) calc(var(--bjc-studio-bg-strength,14%) * 1.05),transparent); --major:var(--bjc-bg3-major);
  background: repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 12px) 4% 0/22px 100% no-repeat,repeating-linear-gradient(0deg,var(--major) 0 1px,transparent 1px 60px) 4% 0/48px 100% no-repeat,linear-gradient(90deg,var(--major) 1px,transparent 1px) 4% 0/96% 100% no-repeat !important;
}

/* 04. Notebook Rules */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-notebook-rules {
  --line:var(--bjc-bg3-line); --major:var(--bjc-bg3-major);
  background: linear-gradient(90deg,transparent 0 9%,var(--major) 9% calc(9% + 1px),transparent calc(9% + 1px)),repeating-linear-gradient(0deg,transparent 0 31px,var(--line) 31px 32px) !important;
}

/* 05. Isometric Draft */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-isometric-draft {
  --line:var(--bjc-bg3-line); --major:var(--bjc-bg3-major);
  background: repeating-linear-gradient(30deg,transparent 0 35px,var(--line) 35px 36px,transparent 36px 72px),repeating-linear-gradient(150deg,transparent 0 35px,var(--line) 35px 36px,transparent 36px 72px),repeating-linear-gradient(90deg,transparent 0 62px,var(--line) 62px 63px,transparent 63px 124px) !important;
}

/* 06. Architectural Plan */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-architectural-plan {
  --line:var(--bjc-bg3-line); --major:var(--bjc-bg3-major);
  background: linear-gradient(90deg,transparent 0 16%,var(--major) 16% calc(16% + 1px),transparent calc(16% + 1px) 58%,var(--major) 58% calc(58% + 1px),transparent calc(58% + 1px)),linear-gradient(0deg,transparent 0 28%,var(--line) 28% calc(28% + 1px),transparent calc(28% + 1px) 68%,var(--major) 68% calc(68% + 1px),transparent calc(68% + 1px)),linear-gradient(90deg,var(--line) 1px,transparent 1px) 18% 29%/28% 39% no-repeat !important;
}

/* 07. Micro Matrix */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-micro-matrix {
  --line:var(--bjc-bg3-line); --major:var(--bjc-bg3-major);
  background: radial-gradient(circle,var(--major) 0 1px,transparent 1.5px) 0 0/48px 48px,repeating-linear-gradient(0deg,transparent 0 7px,var(--line) 7px 8px),repeating-linear-gradient(90deg,transparent 0 7px,var(--line) 7px 8px) !important;
}

/* 08. Technical Crosses */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-technical-crosses {
  --line:var(--bjc-bg3-line); --major:var(--bjc-bg3-major);
  background: linear-gradient(90deg,transparent calc(50% - .5px),var(--major) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)) 0 0/54px 54px,linear-gradient(0deg,transparent calc(50% - .5px),var(--major) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)) 0 0/54px 54px !important;
}

/* 09. Offset Lattice */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-offset-lattice {
  --line:var(--bjc-bg3-line); --major:var(--bjc-bg3-major);
  background: repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 64px) 0 0/100% 50% no-repeat,repeating-linear-gradient(90deg,transparent 0 31px,var(--line) 31px 32px,transparent 32px 64px) 0 100%/100% 50% no-repeat,repeating-linear-gradient(0deg,var(--major) 0 1px,transparent 1px 64px) !important;
}

/* 10. Perspective Grid */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-perspective-grid {
  --line:var(--bjc-bg3-line); --major:var(--bjc-bg3-major);
  background: repeating-conic-gradient(from 242deg at 50% 115%,var(--line) 0deg 0.22deg,transparent .22deg 11deg) !important;
}

/* 11. Modular Blueprint */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-modular-blueprint {
  --line:var(--bjc-bg3-line); --major:var(--bjc-bg3-major);
  background: repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 18px) 0 0/49% 100% no-repeat,repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 18px) 0 0/49% 100% no-repeat,repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 44px) 100% 0/50% 100% no-repeat,repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 44px) 100% 0/50% 100% no-repeat,linear-gradient(90deg,transparent 49%,var(--major) 49% calc(49% + 1px),transparent calc(49% + 1px)) !important;
}

/* 12. Drafting Coordinates */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-drafting-coordinates {
  --line:var(--bjc-bg3-line); --major:var(--bjc-bg3-major);
  background: radial-gradient(circle at 50% 50%,transparent 0 3px,var(--major) 3px 4px,transparent 4px) 0 0/84px 84px,linear-gradient(90deg,transparent calc(50% - .5px),var(--line) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)) 0 0/84px 84px,linear-gradient(0deg,transparent calc(50% - .5px),var(--line) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)) 0 0/84px 84px !important;
}

/* 13. Broken Grid */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-broken-grid {
  --line:var(--bjc-bg3-line); --major:var(--bjc-bg3-major);
  background: repeating-linear-gradient(90deg,var(--line) 0 24px,transparent 24px 35px) 0 0/100% 1px repeat-y,repeating-linear-gradient(0deg,var(--line) 0 24px,transparent 24px 35px) 0 0/1px 100% repeat-x !important;
}

/* 14. Radial Engineering */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-radial-engineering {
  --line:var(--bjc-bg3-line); --major:var(--bjc-bg3-major);
  background: repeating-radial-gradient(circle at 50% 50%,transparent 0 38px,var(--line) 38px 39px,transparent 39px 78px),repeating-conic-gradient(from 0deg at 50% 50%,var(--major) 0deg .18deg,transparent .18deg 30deg) !important;
}

/* 15. Staggered Cells */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-staggered-cells {
  --line:var(--bjc-bg3-line); --major:var(--bjc-bg3-major);
  background: repeating-linear-gradient(0deg,var(--major) 0 1px,transparent 1px 46px),repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 90px) 0 0/100% 50% no-repeat,repeating-linear-gradient(90deg,transparent 0 45px,var(--line) 45px 46px,transparent 46px 90px) 0 100%/100% 50% no-repeat !important;
}

/* 16. Blueprint Borders */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-blueprint-borders {
  --line:var(--bjc-bg3-line); --major:var(--bjc-bg3-major);
  background: linear-gradient(var(--major),var(--major)) 3% 8%/94% 1px no-repeat,linear-gradient(var(--major),var(--major)) 3% 92%/94% 1px no-repeat,linear-gradient(var(--major),var(--major)) 3% 8%/1px 84% no-repeat,linear-gradient(var(--major),var(--major)) 97% 8%/1px 84% no-repeat,repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 24px) 3% 8%/94% 9px no-repeat,repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 24px) 3% 92%/94% 9px no-repeat !important;
}

/* 17. Circuit Grid */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-circuit-grid {
  --line:var(--bjc-bg3-line); --major:var(--bjc-bg3-major);
  background: radial-gradient(circle,var(--major) 0 2px,transparent 2.5px) 0 0/76px 76px,linear-gradient(90deg,transparent 0 50%,var(--line) 50% calc(50% + 1px),transparent calc(50% + 1px)) 0 0/76px 76px,linear-gradient(0deg,transparent 0 50%,var(--line) 50% calc(50% + 1px),transparent calc(50% + 1px)) 0 0/76px 76px !important;
}

/* 18. Diagonal Graph */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-diagonal-graph {
  --line:var(--bjc-bg3-line); --major:var(--bjc-bg3-major);
  background: repeating-linear-gradient(45deg,transparent 0 27px,var(--line) 27px 28px,transparent 28px 55px),repeating-linear-gradient(-45deg,transparent 0 27px,var(--line) 27px 28px,transparent 28px 55px) !important;
}

/* 19. Survey Lines */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-survey-lines {
  --line:var(--bjc-bg3-line); --major:var(--bjc-bg3-major);
  background: radial-gradient(circle,var(--major) 0 2px,transparent 2.5px) 0 0/140px 100px,repeating-linear-gradient(0deg,transparent 0 99px,var(--line) 99px 100px),repeating-linear-gradient(90deg,transparent 0 139px,var(--line) 139px 140px) !important;
}

/* 20. Precision Panels */
.bjc-studio-background-layer.bjc-studio-background-bjc-bg3-precision-panels {
  --line:var(--bjc-bg3-line); --major:var(--bjc-bg3-major);
  background: linear-gradient(90deg,transparent 0 24%,var(--major) 24% calc(24% + 1px),transparent calc(24% + 1px) 77%,var(--major) 77% calc(77% + 1px),transparent calc(77% + 1px)),linear-gradient(0deg,transparent 0 20%,var(--major) 20% calc(20% + 1px),transparent calc(20% + 1px) 81%,var(--major) 81% calc(81% + 1px),transparent calc(81% + 1px)),repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 25px) 25% 21%/52% 60% no-repeat !important;
}