/* fundos.css — fundos alternativos da tela (Menu → Fundo da tela).
   Cada um: :root[data-fundo="id"][data-modo="claro|escuro"] + camada fixa em body::before/::after.
   data-modo é resolvido por assets/tema.js. Sem fundo escolhido = Clássico (app.css). */

/* ======================= Trama ======================= */
/* ---------- Trama: assento de corda náutica, tom sobre tom ----------
   Tafetá de feixes com 3 cordas; os riscos em diagonal são a torção. A corda "mergulha" sob o feixe vizinho
   nas pontas e acende no meio. Um SVG só serve aos dois modos: no escuro vira junco preto. Sem animação. */
:root[data-fundo="trama"][data-modo="claro"]{--bg:#F4EFE6;--line:#E0D5C3;--line2:#D2C4AE}
:root[data-fundo="trama"][data-modo="escuro"]{--bg:#131016;--bg2:#1D1920}
:root[data-fundo="trama"][data-modo] body::before,:root[data-fundo="trama"][data-modo] body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none}
/* a trama sobe do chão: terço de cima quase liso (manchete), inteira da metade para baixo */
:root[data-fundo="trama"][data-modo] body::before{
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'><defs><linearGradient id='g'><stop offset='0' stop-color='%235C4328' stop-opacity='.08'/><stop offset='.28' stop-color='%23FFFCF5' stop-opacity='.5'/><stop offset='.5' stop-color='%23FFFCF5' stop-opacity='.85'/><stop offset='.72' stop-color='%23FFFCF5' stop-opacity='.5'/><stop offset='1' stop-color='%235C4328' stop-opacity='.08'/></linearGradient><pattern id='t' width='3.4' height='3.4' patternUnits='userSpaceOnUse' patternTransform='rotate(60)'><rect width='1.1' height='3.4' fill='%235C4328' fill-opacity='.1'/></pattern><rect id='r' x='1.5' y='1.5' width='33' height='9' rx='3.5'/><g id='s'><use href='%23r' fill='url(%23g)'/><use href='%23r' fill='url(%23t)'/></g><g id='c'><use href='%23s'/><use href='%23s' y='12'/><use href='%23s' y='24'/></g></defs><rect width='72' height='72' fill='%235C4328' fill-opacity='.035'/><use href='%23c'/><use href='%23c' transform='translate(36 0) rotate(90 18 18)'/><use href='%23c' transform='translate(0 36) rotate(90 18 18)'/><use href='%23c' x='36' y='36'/></svg>") 0 0/120px 120px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) 22%,rgba(0,0,0,.8) 70%,#000 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) 22%,rgba(0,0,0,.8) 70%,#000 100%)}
:root[data-fundo="trama"][data-modo="claro"] body::before{opacity:.3}
:root[data-fundo="trama"][data-modo="escuro"] body::before{opacity:.045}
/* luz parada de janela de oficina no alto; canto de baixo um pouco mais fundo */
:root[data-fundo="trama"][data-modo="claro"] body::after{background:radial-gradient(80% 60% at 12% -10%,rgba(255,250,240,.65),rgba(255,250,240,0) 70%),radial-gradient(60% 50% at 100% 100%,rgba(176,132,82,.04),rgba(176,132,82,0) 70%)}
:root[data-fundo="trama"][data-modo="escuro"] body::after{background:radial-gradient(80% 60% at 12% -10%,rgba(255,196,130,.1),rgba(255,196,130,0) 70%),radial-gradient(70% 55% at 100% 100%,rgba(0,0,0,.3),rgba(0,0,0,0) 70%)}
/* celular: ladrilho de 88px, maior que antes, para ler como o assento visto de perto; 88 e 120 dão pixel inteiro de DPR 1,25 a 3 */
@media (max-width:600px){:root[data-fundo="trama"][data-modo] body::before{background-size:88px 88px}}
@media print{:root[data-fundo="trama"] body::before,:root[data-fundo="trama"] body::after{display:none}}

/* ======================= Estúdio ======================= */
/* ---- Fundo "estudio": fundo infinito de estúdio, luz de softbox sobre a manchete + rebatimento dourado de fim de tarde ---- */
:root[data-fundo="estudio"][data-modo="claro"]{--bg:#F3EEE6;--bg2:#EBE5DB;--line:#E3DCD0;--line2:#D6CDBF}
/* camada fixa: inset:0 + height em lvh (bottom é ignorado) -> não pula quando a barra do navegador do celular aparece/some */
:root[data-fundo="estudio"][data-modo="claro"] body::before,:root[data-fundo="estudio"][data-modo="escuro"] body::before{content:'';position:fixed;inset:0;height:100vh;height:100lvh;z-index:-1;pointer-events:none;--luz-x:30%}
@media (max-width:760px){:root[data-fundo="estudio"][data-modo="claro"] body::before,:root[data-fundo="estudio"][data-modo="escuro"] body::before{--luz-x:50%}}
/* camadas (de cima p/ baixo): grão de papel fotográfico (opacidade já na matriz), poça de luz no piso, softbox, rebatimento dourado, curva parede→chão sem linha, vinheta */
:root[data-fundo="estudio"][data-modo="claro"] body::before{background:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .14 -.063'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>") 0 0/160px 160px,
  radial-gradient(ellipse 60% 14% at 50% 84%,rgba(255,252,244,.35),rgba(255,252,244,0) 70%),
  radial-gradient(ellipse 70% 55% at var(--luz-x) 27%,rgba(255,249,236,.55),rgba(255,249,236,.34) 35%,rgba(255,249,236,.1) 70%,rgba(255,249,236,0)),
  radial-gradient(ellipse 45% 35% at 88% 94%,rgba(255,196,120,.09),rgba(255,196,120,0)),
  linear-gradient(180deg,rgba(120,88,52,0) 40%,rgba(120,88,52,.025) 64%,rgba(255,250,240,.22) 77%,rgba(255,250,240,0) 92%),
  radial-gradient(ellipse 120% 100% at 50% 32%,rgba(92,64,36,0) 60%,rgba(92,64,36,.04))}
:root[data-fundo="estudio"][data-modo="escuro"] body::before{background:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .24 -.108'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>") 0 0/160px 160px,
  radial-gradient(ellipse 60% 14% at 50% 84%,rgba(255,220,180,.02),rgba(255,220,180,0) 70%),
  radial-gradient(ellipse 70% 55% at var(--luz-x) 27%,rgba(255,214,170,.034),rgba(255,214,170,.022) 35%,rgba(255,214,170,.008) 70%,rgba(255,214,170,0)),
  radial-gradient(ellipse 45% 35% at 88% 94%,rgba(255,160,80,.04),rgba(255,160,80,0)),
  linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.1) 64%,rgba(255,220,180,.012) 78%,rgba(255,220,180,0) 90%,rgba(0,0,0,.07)),
  radial-gradient(ellipse 120% 100% at 50% 32%,rgba(0,0,0,0) 55%,rgba(0,0,0,.22))}
@media print{:root[data-fundo="estudio"][data-modo] body::before{display:none}}

/* ======================= Aurora ======================= */
/* ---- Aurora · luz de varanda: sol quente entrando pelo canto, um brilho que passeia; à noite, lâmpada + reflexo de piscina ---- */
:root[data-fundo="aurora"] body::before,:root[data-fundo="aurora"] body::after{content:'';position:fixed;inset:0;bottom:auto;height:100vh;height:100lvh;z-index:-1;pointer-events:none}
:root[data-fundo="aurora"][data-modo="claro"]{--bg:#F7F1E8}
:root[data-fundo="aurora"][data-modo="escuro"]{--bg:#111016}
/* camada parada. A máscara apaga a luz atrás do cabeçalho fixo (topo + nav, ~113px): sem degrau na borda dele */
:root[data-fundo="aurora"] body::before{-webkit-mask-image:linear-gradient(transparent 104px,#000 260px);mask-image:linear-gradient(transparent 104px,#000 260px)}
:root[data-fundo="aurora"][data-modo="claro"] body::before{background:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .1 -.04'/></filter><rect width='180' height='180' filter='url(%23g)'/></svg>"),
  radial-gradient(62% 58% at -2% 22%,rgba(255,204,84,.25),transparent 72%),
  radial-gradient(52% 48% at 106% 20%,rgba(255,110,70,.08),transparent 72%),
  radial-gradient(58% 50% at -10% 110%,rgba(22,179,160,.1),transparent 72%),
  radial-gradient(64% 56% at 112% 110%,rgba(108,76,241,.07),transparent 72%)}
:root[data-fundo="aurora"][data-modo="escuro"] body::before{background:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .1 -.045'/></filter><rect width='180' height='180' filter='url(%23g)'/></svg>"),
  radial-gradient(62% 58% at -2% 22%,rgba(255,168,76,.055),transparent 72%),
  radial-gradient(52% 48% at 106% 20%,rgba(255,110,70,.07),transparent 72%),
  radial-gradient(58% 50% at -8% 108%,rgba(22,179,160,.07),transparent 72%),
  radial-gradient(64% 56% at 110% 108%,rgba(108,76,241,.12),transparent 72%)}
/* camada que passeia: de dia, o sol; à noite, o reflexo da piscina. A mancha cabe inteira na caixa, a deriva nunca mostra borda */
:root[data-fundo="aurora"][data-modo="claro"] body::after{background:radial-gradient(40% 30% at 68% 38%,rgba(255,190,120,.11),transparent 70%)}
:root[data-fundo="aurora"][data-modo="escuro"] body::after{background:radial-gradient(40% 30% at 68% 38%,rgba(37,244,238,.038),transparent 70%)}
@keyframes aurora-deriva{
  0%{transform:translate3d(-2%,-1.5%,0) rotate(-2deg)}
  50%{transform:translate3d(1.5%,2%,0) rotate(1deg) scale(1.04)}
  100%{transform:translate3d(3%,-1.5%,0) rotate(2deg) scale(1.02)}}
/* só anda em computador com mouse; no celular fica parada e a GPU descansa */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine){:root[data-fundo="aurora"] body::after{will-change:transform;animation:aurora-deriva 60s ease-in-out infinite alternate}}
@media (prefers-reduced-motion: reduce){:root[data-fundo="aurora"] body::after{animation:none;will-change:auto}}
@media print{:root[data-fundo="aurora"] body::before,:root[data-fundo="aurora"] body::after{display:none}}

/* ======================= Varanda ======================= */
/* ---- Jardim · varanda ao fim de tarde (claro) / noite de piscina (escuro) ---- */
:root[data-fundo="jardim"][data-modo="claro"]{--bg:#FAF3EA;--bg2:#F0E6D9;--line:#E8DCCD;--line2:#DCCDBA}
:root[data-fundo="jardim"][data-modo="escuro"]{--bg:#13111D;--bg2:#1B1828;--line:#2C2839;--line2:#393447;--jd-estrelas:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='300' fill='%23F3EEFF'><circle cx='137' cy='134' r='.7' opacity='.45'/><circle cx='342' cy='111' r='1.3' opacity='.53'/><circle cx='92' cy='63' r='.8' opacity='.69'/><circle cx='41' cy='202' r='.7' opacity='.22'/><circle cx='394' cy='111' r='.7' opacity='.53'/><circle cx='241' cy='268' r='.7' opacity='.12'/><circle cx='233' cy='63' r='1.3' opacity='.69'/><circle cx='52' cy='198' r='.8' opacity='.24'/><circle cx='46' cy='16' r='.7' opacity='.85'/><circle cx='229' cy='2' r='.8' opacity='.89'/><circle cx='208' cy='182' r='1.1' opacity='.29'/><circle cx='245' cy='36' r='.8' opacity='.78'/><circle cx='291' cy='109' r='1.3' opacity='.54'/><circle cx='207' cy='71' r='1.3' opacity='.66'/><circle cx='407' cy='63' r='.9' opacity='.69'/><circle cx='66' cy='1' r='.7' opacity='.9'/><circle cx='319' cy='223' r='.9' opacity='.16'/><circle cx='144' cy='85' r='1.1' opacity='.62'/><circle cx='32' cy='30' r='.7' opacity='.8'/><circle cx='28' cy='133' r='1.1' opacity='.45'/><circle cx='121' cy='141' r='.7' opacity='.43'/><circle cx='391' cy='121' r='1.1' opacity='.5'/></svg>")}
:root[data-fundo="jardim"] body::before,:root[data-fundo="jardim"] body::after{content:'';position:fixed;top:0;left:0;right:0;height:100vh;z-index:-1;pointer-events:none}
/* claro: sol damasco à direita, lavanda só no canto da sombra, calor pêssego sumindo no creme */
:root[data-fundo="jardim"][data-modo="claro"] body::before{background:
  radial-gradient(ellipse 50% 380px at 100% 50px,rgba(255,172,108,var(--jd-sol,.44)),rgba(255,196,150,var(--jd-sol2,.13)) 55%,transparent 78%),
  radial-gradient(ellipse 40% 240px at 0 40px,rgba(186,166,240,.22),transparent 72%),
  linear-gradient(180deg,rgba(252,214,184,.30) 0,rgba(252,222,198,.10) 200px,rgba(252,224,200,.04) 320px,transparent 440px)}
/* escuro: céu índigo mais escuro que os cards, estrelas saindo de trás do cabeçalho, luar e brilho de piscina */
:root[data-fundo="jardim"][data-modo="escuro"] body::before{background:
  radial-gradient(ellipse 42% 260px at 90% 30px,rgba(150,130,255,.14),transparent 70%),
  radial-gradient(ellipse 60% 44% at 0 104%,rgba(22,179,160,.12),transparent 70%),
  var(--jd-estrelas) 0 104px/420px 300px repeat-x,var(--jd-estrelas) 150px 0/300px 214px repeat-x,
  linear-gradient(180deg,#1E1842 0,#171234 120px,#140F2C 200px,rgba(20,15,44,.5) 330px,transparent 480px)}
/* sombra da palmeira (estática): cor vem do CSS, desenho vem da máscara — terracota no claro, silhueta no escuro */
:root[data-fundo="jardim"] body::after{background:#7A4630;opacity:.10;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><defs><filter id='b'><feGaussianBlur stdDeviation='2.2'/></filter><g id='f'><path d='M31-6q12 26 38 58q-15-39-38-58M31-6q15-24 22-38q-18 7-22 38M49-9q15 31 45 70q-17-47-45-70M49-9q20-27 31-43q-23 7-31 43M68-11q17 36 50 81q-19-54-50-81M68-11q25-30 39-46q-27 6-39 46M87-12q18 40 53 90q-19-59-53-90M87-12q30-31 48-48q-31 4-48 48M105-12q20 43 57 97q-20-64-57-97M105-12q35-31 57-48q-34 2-57 48M124-12q20 46 58 104q-20-68-58-104M124-12q39-29 65-45q-38-1-65 45M142-11q21 48 58 108q-19-70-58-108M142-11q43-27 72-41q-40-4-72 41M161-8q20 48 57 110q-18-72-57-110M161-8q45-25 77-37q-41-7-77 37M179-6q20 49 55 111q-16-71-55-111M179-6q47-21 80-30q-41-10-80 30M197-2q20 48 52 109q-14-70-52-109M197-2q47-17 82-23q-40-14-82 23M216 3q18 45 48 104q-12-67-48-104M216 3q46-13 80-17q-38-16-80 17M234 8q16 43 44 98q-11-62-44-98M234 8q44-9 78-9q-36-19-78 9M252 14q14 40 39 91q-8-58-39-91M252 14q41-5 73-3q-33-19-73 3M270 21q13 36 34 81q-7-51-34-81M270 21q37-2 66 2q-29-20-66-2M288 29q10 31 28 70q-4-45-28-70M288 29q32 1 57 6q-24-19-57-6M306 37q8 26 23 58q-3-36-23-58M306 37q26 3 47 9q-19-18-47-9M324 46q6 21 17 46q-2-29-17-46M324 46q20 5 36 10q-14-15-36-10'/><path d='M0 0Q170-40 330 50' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/></g></defs><g filter='url(%23b)'><use href='%23f' transform='translate(660 -60) rotate(163) scale(1.45 -1.45)'/><use href='%23f' transform='translate(660 -60) rotate(134) scale(1.3 -1.3)'/><use href='%23f' transform='translate(660 -60) rotate(107) scale(1.1 -1.1)'/></g></svg>") right top/min(600px,90vw) auto no-repeat,
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><defs><filter id='b'><feGaussianBlur stdDeviation='2.2'/></filter><g id='f'><path d='M31-6q12 26 38 58q-15-39-38-58M31-6q15-24 22-38q-18 7-22 38M49-9q15 31 45 70q-17-47-45-70M49-9q20-27 31-43q-23 7-31 43M68-11q17 36 50 81q-19-54-50-81M68-11q25-30 39-46q-27 6-39 46M87-12q18 40 53 90q-19-59-53-90M87-12q30-31 48-48q-31 4-48 48M105-12q20 43 57 97q-20-64-57-97M105-12q35-31 57-48q-34 2-57 48M124-12q20 46 58 104q-20-68-58-104M124-12q39-29 65-45q-38-1-65 45M142-11q21 48 58 108q-19-70-58-108M142-11q43-27 72-41q-40-4-72 41M161-8q20 48 57 110q-18-72-57-110M161-8q45-25 77-37q-41-7-77 37M179-6q20 49 55 111q-16-71-55-111M179-6q47-21 80-30q-41-10-80 30M197-2q20 48 52 109q-14-70-52-109M197-2q47-17 82-23q-40-14-82 23M216 3q18 45 48 104q-12-67-48-104M216 3q46-13 80-17q-38-16-80 17M234 8q16 43 44 98q-11-62-44-98M234 8q44-9 78-9q-36-19-78 9M252 14q14 40 39 91q-8-58-39-91M252 14q41-5 73-3q-33-19-73 3M270 21q13 36 34 81q-7-51-34-81M270 21q37-2 66 2q-29-20-66-2M288 29q10 31 28 70q-4-45-28-70M288 29q32 1 57 6q-24-19-57-6M306 37q8 26 23 58q-3-36-23-58M306 37q26 3 47 9q-19-18-47-9M324 46q6 21 17 46q-2-29-17-46M324 46q20 5 36 10q-14-15-36-10'/><path d='M0 0Q170-40 330 50' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/></g></defs><g filter='url(%23b)'><use href='%23f' transform='translate(-50 650) rotate(-8) scale(1.3)'/><use href='%23f' transform='translate(-50 650) rotate(-37) scale(1.15)'/><use href='%23f' transform='translate(-50 650) rotate(-66) scale(.95)'/></g></svg>") left bottom/min(420px,56vw) auto no-repeat}
:root[data-fundo="jardim"][data-modo="escuro"] body::after{background:#0A0816;opacity:.6}
@media (max-width:1599px){:root[data-fundo="jardim"] body::after{-webkit-mask-size:min(600px,90vw) auto,0 0}}
@media (max-width:560px){:root[data-fundo="jardim"] body::after{-webkit-mask-size:86vw auto,0 0;-webkit-mask-position:right -14vw top 0,left bottom}:root[data-fundo="jardim"][data-modo="claro"]{--jd-sol:.3;--jd-sol2:.06}:root[data-fundo="jardim"][data-modo="claro"] body::after{opacity:.08}}
@media (prefers-reduced-motion:reduce){:root[data-fundo="jardim"] body::before,:root[data-fundo="jardim"] body::after{animation:none;transition:none}}
@media print{:root[data-fundo="jardim"] body::before,:root[data-fundo="jardim"] body::after{display:none}}

/* ======================= Pós-festa ======================= */
/* ---- Fundo "confete" (Pós-festa): o confete da meta caiu e ficou no chão ----
   Tirinhas 9x15 iguais às da chuva (.confete), bolinhas, meias-luas e um pedacinho de corda torcida; base cor de junco
   + coral, verde-água e 1 lilás por telha (longe da manchete). Cores OPACAS calculadas para o texto que fica direto no
   fundo: --muted >= 4:1 no claro e >= 4,5:1 no escuro mesmo em cima de uma peça; peças que se encostam não escurecem.
   Tudo DENTRO de um SVG só: 2 telhas de proporção invertida (620x540 / 540x620) giradas -7° e +11° (sem fileira reta),
   máscara radial "varrendo" o confete para os cantos e, no celular (@media do próprio SVG), 2 camadas extras
   reaproveitando as telhas por href para dobrar a densidade sem encolher as peças. Vira pixel uma vez só: sem
   mask-image de CSS, sem opacity, sem animação (nada para desligar em reduced-motion). Altura em lvh: não re-rasteriza
   quando a barra do navegador do celular aparece/some. */
:root[data-fundo="confete"][data-modo="claro"] body::before,:root[data-fundo="confete"][data-modo="escuro"] body::before{content:'';position:fixed;inset:0;height:100vh;height:100lvh;
  z-index:-1;pointer-events:none;background:var(--cf) 0 0/100% 100% no-repeat}
:root[data-fundo="confete"][data-modo="claro"] body::before{
  --cf:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><defs><path id='m' d='M-10 4a10 10 0 0 1 20 0z'/><rect id='t' x='-4.5' y='-7.5' width='9' height='15' rx='2'/><path id='k' d='M-18 5q18-17 36 0'/><g id='c' fill='none' stroke-linecap='round'><use href='%23k' stroke-width='4.5'/><use href='%23k' stroke='%23F4EFE6' stroke-width='1.4' stroke-dasharray='2 3'/></g><radialGradient id='g' cx='.32' cy='.26' r='.75'><stop offset='.25' stop-color='%23fff' stop-opacity='.4'/><stop offset='1' stop-color='%23fff'/></radialGradient><mask id='v'><rect width='100%25' height='100%25' fill='url(%23g)'/></mask><pattern id='a' width='620' height='540' patternUnits='userSpaceOnUse' patternTransform='rotate(-7)'><use href='%23t' fill='%23F7E0C0' transform='translate(60 70) rotate(25)'/><circle cx='250' cy='40' r='4.5' fill='%23F7E0C0'/><use href='%23c' stroke='%23F7E0C0' transform='translate(420 120) rotate(-12)'/><use href='%23t' fill='%23C3ECE1' transform='translate(560 230) rotate(60)'/><use href='%23m' fill='%23F7E0C0' transform='translate(150 250) rotate(20)'/><use href='%23t' fill='%23FBDDD3' transform='translate(330 330) rotate(40)'/><use href='%23m' fill='%23E3E1F9' transform='translate(500 470) rotate(-25)'/><use href='%23t' fill='%23F7E0C0' transform='translate(90 450) rotate(65)'/></pattern><pattern id='b' width='540' height='620' patternUnits='userSpaceOnUse' patternTransform='translate(211 263) rotate(11)'><use href='%23t' fill='%23F7E0C0' transform='translate(80 100) rotate(45)'/><circle cx='330' cy='60' r='5' fill='%23C3ECE1'/><use href='%23t' fill='%23FBDDD3' transform='translate(440 330) rotate(20)'/><circle cx='170' cy='380' r='4' fill='%23F7E0C0'/><use href='%23t' fill='%23F7E0C0' transform='translate(330 540) rotate(70)'/></pattern><pattern id='a2' href='%23a' patternTransform='translate(143 -97) rotate(19)'/><pattern id='b2' href='%23b' patternTransform='translate(-61 173) rotate(-23)'/><style>.x{display:none}@media (max-width:600px){.x{display:inline}}</style></defs><g mask='url(%23v)'><rect width='100%25' height='100%25' fill='url(%23a)'/><rect width='100%25' height='100%25' fill='url(%23b)'/><rect class='x' width='100%25' height='100%25' fill='url(%23a2)'/><rect class='x' width='100%25' height='100%25' fill='url(%23b2)'/></g></svg>")}
:root[data-fundo="confete"][data-modo="escuro"] body::before{
  --cf:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><defs><path id='m' d='M-10 4a10 10 0 0 1 20 0z'/><rect id='t' x='-4.5' y='-7.5' width='9' height='15' rx='2'/><path id='k' d='M-18 5q18-17 36 0'/><g id='c' fill='none' stroke-linecap='round'><use href='%23k' stroke-width='4.5'/><use href='%23k' stroke='%23141218' stroke-width='1.4' stroke-dasharray='2 3'/></g><radialGradient id='g' cx='.32' cy='.26' r='.75'><stop offset='.25' stop-color='%23fff' stop-opacity='.4'/><stop offset='1' stop-color='%23fff'/></radialGradient><mask id='v'><rect width='100%25' height='100%25' fill='url(%23g)'/></mask><pattern id='a' width='620' height='540' patternUnits='userSpaceOnUse' patternTransform='rotate(-7)'><use href='%23t' fill='%233B332C' transform='translate(60 70) rotate(25)'/><circle cx='250' cy='40' r='4.5' fill='%233B332C'/><use href='%23c' stroke='%233B332C' transform='translate(420 120) rotate(-12)'/><use href='%23t' fill='%23173A38' transform='translate(560 230) rotate(60)'/><use href='%23m' fill='%233B332C' transform='translate(150 250) rotate(20)'/><use href='%23t' fill='%2357251A' transform='translate(330 330) rotate(40)'/><use href='%23m' fill='%2334267A' transform='translate(500 470) rotate(-25)'/><use href='%23t' fill='%233B332C' transform='translate(90 450) rotate(65)'/></pattern><pattern id='b' width='540' height='620' patternUnits='userSpaceOnUse' patternTransform='translate(211 263) rotate(11)'><use href='%23t' fill='%233B332C' transform='translate(80 100) rotate(45)'/><circle cx='330' cy='60' r='5' fill='%23173A38'/><use href='%23t' fill='%2357251A' transform='translate(440 330) rotate(20)'/><circle cx='170' cy='380' r='4' fill='%233B332C'/><use href='%23t' fill='%233B332C' transform='translate(330 540) rotate(70)'/></pattern><pattern id='a2' href='%23a' patternTransform='translate(143 -97) rotate(19)'/><pattern id='b2' href='%23b' patternTransform='translate(-61 173) rotate(-23)'/><style>.x{display:none}@media (max-width:600px){.x{display:inline}}</style></defs><g mask='url(%23v)'><rect width='100%25' height='100%25' fill='url(%23a)'/><rect width='100%25' height='100%25' fill='url(%23b)'/><rect class='x' width='100%25' height='100%25' fill='url(%23a2)'/><rect class='x' width='100%25' height='100%25' fill='url(%23b2)'/></g></svg>")}
@media print{:root[data-fundo="confete"] body::before{display:none}}

/* ======================= Caderno ======================= */
/* ===== Fundo "caderno" · caderno quadriculado de conta feita à mão: casa de 24px em azul de caderno, margem vermelha dupla, grão de papel ===== */
:root[data-fundo="caderno"][data-modo="claro"]{--bg:#F8F2E4;--bg2:#EFE8D8;--line:#E5DECE;--line2:#D8CFBC;
  --cx-fina:rgba(64,104,160,.09);--cx-marg:rgba(206,52,52,.42);--cx-borda:rgba(150,110,50,.05);--cx-luz:none;--cx-grao:#AD9970;--cx-go:.14}
/* escuro: o mesmo caderno à luz do abajur (linha de giz creme, papel quase preto e quente, brilho no canto de cima) */
:root[data-fundo="caderno"][data-modo="escuro"]{--bg:#161318;--bg2:#1E1A21;
  --cx-fina:rgba(236,222,196,.04);--cx-marg:rgba(255,122,104,.34);--cx-borda:rgba(0,0,0,.3);--cx-grao:#F9F1E2;--cx-go:.1;
  --cx-luz:radial-gradient(70% 50% at 12% 0,rgba(255,196,130,.06),transparent 70%)}
/* camadas fixas; altura em lvh: a vinheta não muda de tamanho quando a barra do navegador do celular aparece/some */
:root[data-fundo="caderno"][data-modo] body::before,:root[data-fundo="caderno"][data-modo] body::after{content:'';position:fixed;inset:0;height:100vh;height:100lvh;z-index:-1;pointer-events:none}
/* quadriculado só de caderno (sem reforço de milimetrado): 24px dá pixel inteiro em DPR 1,25/1,5/2/2,625/3 e fica longe dos 18px do cartão Externas */
:root[data-fundo="caderno"][data-modo] body::before{--cx-m:none;--cx-mx:max(6px,calc(max(16px,(100vw - 1320px)/2) - 30px));
  background:var(--cx-m),
    linear-gradient(90deg,var(--cx-fina) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(var(--cx-fina) 1px,transparent 1px) 0 0/24px 24px,
    var(--cx-luz),
    radial-gradient(140% 120% at 50% 20%,transparent 68%,var(--cx-borda) 100%)}
/* margem vermelha dupla, no vão à esquerda do conteúdo; com round() ela cai no meio de uma casa (9-14px) e nunca encosta na linha azul */
@supports (left:round(down,1px,1px)){:root[data-fundo="caderno"][data-modo] body::before{
  --cx-mx:calc(round(down,max(6px,max(16px,(100vw - 1320px)/2) - 30px),24px) + 9px)}}
@media (min-width:1366px){:root[data-fundo="caderno"][data-modo] body::before{
  --cx-m:linear-gradient(90deg,var(--cx-marg) 0 1px,transparent 1px 4px,var(--cx-marg) 4px 5px,transparent 5px) var(--cx-mx) 0/5px 100% no-repeat}}
/* fibra do papel: um ruído só (máscara) para os dois modos; a cor vem do token. Região do filtro = ladrilho, a emenda do stitch bate com os 200px */
:root[data-fundo="caderno"][data-modo] body::after{background:var(--cx-grao);opacity:var(--cx-go);
  --cx-fibra:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p' x='0' y='0' width='1' height='1'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1.3 0 0 0 -.55'/></filter><rect width='200' height='200' filter='url(%23p)'/></svg>") 0 0/200px 200px;
  -webkit-mask:var(--cx-fibra);mask:var(--cx-fibra)}
/* sem animação; a trava fica por padrão da casa, caso alguém anime depois */
@media (prefers-reduced-motion:reduce){:root[data-fundo="caderno"] body::before,:root[data-fundo="caderno"] body::after{animation:none;transition:none}}
@media print{:root[data-fundo="caderno"] body::before,:root[data-fundo="caderno"] body::after{display:none}}