/* The Hub's look: Lagoon (picked Oct 26, 2026): a soft gradient page, a
   gradient sidebar and gradient main buttons. Themes (Settings, per device)
   only change the colour variables, set by html data-palette="…".
   Lineup: Lagoon (default), Rainforest, Ocean night, Red and white,
   Candy confetti, Mermaid afterglow. */
html[data-look="lagoon"]{
  --c1:#0E7A6E; --c2:#2457C5; --cmid:#14639A;            /* sidebar: top, bottom, middle */
  --p1:#DDF1EE; --p2:#EEF6F8; --p3:#E2EBFA;               /* page wash */
  --side-text:#E6F2F0; --side-edge:#9FD3CC; --card-edge:#D3E4E8;
  --teal:var(--c1); --blue:var(--c2);
}
/* Rainforest: teal into leaf green */
html[data-palette="rainforest"]{--c1:#0E7A6E;--cmid:#1F7F55;--c2:#3C7D2E;--p1:#DFF2EC;--p2:#F1F7F2;--p3:#E6F1DD;--side-edge:#A5D3B9;--card-edge:#D3E6DA;--blue-soft:#E7F2E2}

/* Ocean night: midnight navy into cobalt */
html[data-palette="oceannight"]{--c1:#14234F;--cmid:#1D3E86;--c2:#2F72D6;--p1:#E3E8F5;--p2:#F2F4FA;--p3:#E1ECFB;--side-edge:#8DA6DA;--card-edge:#D5DDEE;--blue-soft:#E4EDFB;--teal:#1D3E86}

/* Red and white, Candy confetti, Mermaid afterglow */
html[data-palette="redwhite"]{--c1:#D7263D;--cmid:#BE1931;--c2:#A30F27;--p1:#FFFFFF;--p2:#FFFFFF;--p3:#FFF5F6;--side-edge:#F6B3BD;--card-edge:#F0DADD;--blue-soft:#FDECEE;--teal:#BE1931;--blue:#D7263D;--on-fg:#BE1931}
html[data-palette="candy"]{--count-on-bg:#1E2B2A;--c1:#FA78AB;--cmid:#B68BEF;--c2:#7CDDE1;--mid-at:50%;--side-fg:#1E2B2A;--side-text:#1E2B2A;--btn-fg:#1E2B2A;--on-fg:#8A3E9E;--p1:#FDEAF2;--p2:#F6F1FC;--p3:#E6F8F9;--side-edge:#FFFFFF;--card-edge:#E9DFF0;--blue-soft:#F1E8FC;--teal:#C2457D;--blue:#7E57C2;--count-bg:#1E2B2A;--count-fg:#fff}
html[data-palette="mermaid"]{--count-on-bg:#13302E;--c1:#0C8C87;--cmid:#70C6C6;--c2:#E7B6DF;--mid-at:50%;--side-fg:#13302E;--side-text:#13302E;--btn-fg:#13302E;--on-fg:#0C8C87;--p1:#DDF2F1;--p2:#F1F8F8;--p3:#F6E9F4;--side-edge:#FFFFFF;--card-edge:#D9E8E8;--blue-soft:#F6E6F3;--teal:#0C8C87;--blue:#A0569A;--count-bg:#13302E;--count-fg:#fff}

html[data-look="lagoon"] body{background:linear-gradient(155deg,var(--p1) 0%,var(--p2) 40%,var(--p3) 100%) fixed}
html[data-look="lagoon"] .side{background:linear-gradient(180deg,var(--c1) 0%,var(--cmid) var(--mid-at,60%),var(--c2) 100%);border-right:0;color:var(--side-fg,#fff)}
html[data-look="lagoon"] .nav a{color:var(--side-fg,#fff)}
html[data-look="lagoon"] .nav a.on{background:#fff;color:var(--on-fg,var(--c1))}
html[data-look="lagoon"] .nav .count{background:var(--count-bg,#fff);color:var(--count-fg,var(--c2))}
html[data-look="lagoon"] .nav a.on .count{background:var(--count-on-bg,var(--c2));color:#fff}
html[data-look="lagoon"] .side .foot,html[data-look="lagoon"] .side .foot button,html[data-look="lagoon"] .side .foot a{color:var(--side-text)}
html[data-look="lagoon"] .version{background:transparent;color:var(--side-fg,#fff);border-color:var(--side-edge)}
html[data-look="lagoon"] .card{border-color:var(--card-edge)}
html[data-look="lagoon"] .btn,html[data-look="lagoon"] .btn:disabled{background:linear-gradient(115deg,var(--c1),var(--cmid) var(--mid-at,50%),var(--c2));color:var(--btn-fg,#fff)}
@media (max-width:900px){html[data-look="lagoon"] .side{background:var(--c1)}}
@media print{html[data-look="lagoon"] body{background:#fff}}