/* v1.8.8 - lined paper discount background
   Final non-invasive background layer for live + editor. Does not touch book geometry, tabs, cards, or editor controls. */
:root{
  --nc-bg-paper-light: rgba(255, 250, 234, .84);
  --nc-bg-paper-line-light: rgba(77, 59, 25, .105);
  --nc-bg-paper-edge-light: rgba(188, 142, 52, .22);
  --nc-bg-discount-light: rgba(78, 54, 18, .18);
  --nc-bg-paper-dark: rgba(18, 16, 12, .70);
  --nc-bg-paper-line-dark: rgba(247, 215, 124, .075);
  --nc-bg-paper-edge-dark: rgba(242, 202, 91, .11);
  --nc-bg-discount-dark: rgba(245, 208, 102, .10);
}

body[data-theme="light"]{
  background:
    radial-gradient(circle at 50% 6%, rgba(255,255,255,.76), transparent 36%),
    linear-gradient(180deg,#f8ecd1 0%,#ead5a8 55%,#d8bc7b 100%) !important;
}

body[data-theme="dark"],
body.nc-editor-page{
  background:
    radial-gradient(circle at 50% 10%, rgba(214,169,40,.15), transparent 38%),
    linear-gradient(180deg,#0d0905 0%,#070504 100%) !important;
}

.stage,
.nc-canvas{
  position:relative !important;
  isolation:isolate;
  overflow:hidden !important;
}

/* Light theme: large notebook page with lines under the magazine */
body[data-theme="light"] .stage{
  background:
    linear-gradient(180deg, rgba(255,246,224,.76), rgba(237,211,160,.90)),
    linear-gradient(90deg, rgba(150,96,40,.10), transparent 30%, transparent 70%, rgba(150,96,40,.10)) !important;
}

/* Dark theme / editor: inverted sheet, subtler discounts */
body[data-theme="dark"] .stage,
body.nc-editor-page .nc-canvas{
  background:
    linear-gradient(180deg, rgba(32,18,10,.68), rgba(5,4,3,.96)),
    radial-gradient(ellipse at 50% 40%, rgba(214,169,40,.12), transparent 56%) !important;
}

.stage::before,
.nc-canvas::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(1680px, 96vw);
  height:min(980px, 82vh);
  transform:translate(-50%,-50%) rotate(-1.2deg);
  pointer-events:none;
  z-index:0;
  border-radius:18px;
}

body[data-theme="light"] .stage::before{
  background:
    linear-gradient(90deg, transparent 0 72px, rgba(190,67,47,.18) 72px 74px, transparent 74px),
    repeating-linear-gradient(0deg, transparent 0 31px, var(--nc-bg-paper-line-light) 31px 32px),
    linear-gradient(180deg, rgba(255,255,255,.92), var(--nc-bg-paper-light));
  border:1px solid var(--nc-bg-paper-edge-light);
  box-shadow:
    0 34px 80px rgba(74,45,14,.20),
    inset 0 0 0 1px rgba(255,255,255,.45),
    inset 0 1px 22px rgba(255,255,255,.35);
  opacity:.82;
}

body[data-theme="dark"] .stage::before,
body.nc-editor-page .nc-canvas::before{
  background:
    linear-gradient(90deg, transparent 0 72px, rgba(245,198,76,.05) 72px 74px, transparent 74px),
    repeating-linear-gradient(0deg, transparent 0 31px, var(--nc-bg-paper-line-dark) 31px 32px),
    linear-gradient(180deg, rgba(28,24,17,.86), var(--nc-bg-paper-dark));
  border:1px solid var(--nc-bg-paper-edge-dark);
  box-shadow:
    0 34px 90px rgba(0,0,0,.50),
    inset 0 0 0 1px rgba(255,218,116,.035),
    inset 0 1px 28px rgba(255,218,116,.025);
  opacity:.36;
}

/* Discount symbols / percentages, intentionally subtle and behind the magazine */
.stage::after,
.nc-canvas::after{
  content:"10%  20%  15%  30%  40%  50%   -20%   SALE   OFERTA   30%  15%  50%   -40%";
  white-space:pre-wrap;
  position:absolute;
  inset:5% 3% auto 3%;
  height:86%;
  pointer-events:none;
  z-index:0;
  font-family:Impact,'Arial Black','Roboto Condensed',Arial,sans-serif;
  font-size:clamp(22px, 3.1vw, 58px);
  line-height:2.55;
  letter-spacing:.06em;
  word-spacing:1.7em;
  transform:rotate(-5deg);
  mix-blend-mode:multiply;
  overflow:hidden;
  text-transform:uppercase;
  text-align:center;
}

body[data-theme="light"] .stage::after{
  color:var(--nc-bg-discount-light);
  opacity:.72;
  text-shadow:0 1px 0 rgba(255,255,255,.38);
}

body[data-theme="dark"] .stage::after,
body.nc-editor-page .nc-canvas::after{
  color:var(--nc-bg-discount-dark);
  opacity:.44;
  mix-blend-mode:screen;
  text-shadow:none;
}

/* Keep the actual application above the decorative background. */
.stage > *,
.nc-canvas > *{
  position:relative;
  z-index:1;
}

body.nc-editor-page .nc-editor-topline,
body.nc-editor-page .nc-select-chip,
body.nc-editor-page .nc-panel,
body.nc-editor-page .nc-unsaved-pill,
body.nc-editor-page .nc-element-toolbar,
body.nc-editor-page .nc-modal-backdrop{
  z-index:50;
}

@media (max-width: 900px){
  .stage::before,
  .nc-canvas::before{width:112vw;height:92vh;}
  .stage::after,
  .nc-canvas::after{font-size:26px;line-height:2.8;word-spacing:1.1em;}
}