/* ── COLORE PER SEZIONE ───────────────────────────────────────
   Ogni scheda ha la sua tinta: arancio l'allenamento, verde il
   diario, blu i progressi, viola gli amici, ambra il profilo.
   Il colore diventa un'informazione — sai dove sei prima di
   leggere il titolo — invece di semplice decorazione. Il marchio
   resta arancio: quello è l'identità, non la sezione.          */
#app.s-w{--acc:#ff6b3d;--acc-hi:#ff8a4c;--acc-lo:#ff5a2e;
  --grad:linear-gradient(135deg,#ff8a4c,#ff5a2e);--glow:0 6px 22px -8px rgba(255,107,61,.55);
  --done-bg:#1d1410;--done-b:#3f2318}
#app.s-d{--acc:#3ddc97;--acc-hi:#5ee7ad;--acc-lo:#1fc07d;
  --grad:linear-gradient(135deg,#5ee7ad,#1fc07d);--glow:0 6px 22px -8px rgba(61,220,151,.45);
  --done-bg:#0e1a15;--done-b:#1d3a2c}
#app.s-p{--acc:#4d9fff;--acc-hi:#6cb2ff;--acc-lo:#2f86f0;
  --grad:linear-gradient(135deg,#6cb2ff,#2f86f0);--glow:0 6px 22px -8px rgba(77,159,255,.45);
  --done-bg:#0e141f;--done-b:#1d2c44}
#app.s-a{--acc:#c96bff;--acc-hi:#d98cff;--acc-lo:#b04ff0;
  --grad:linear-gradient(135deg,#d98cff,#b04ff0);--glow:0 6px 22px -8px rgba(201,107,255,.45);
  --done-bg:#180f1f;--done-b:#341f45}
#app.s-u{--acc:#ffc043;--acc-hi:#ffd06b;--acc-lo:#f0a81f;
  --grad:linear-gradient(135deg,#ffd06b,#f0a81f);--glow:0 6px 22px -8px rgba(255,192,67,.4);
  --done-bg:#1c1609;--done-b:#3d3013}
/* Lo Shop è l'unica sezione che parla di persone e non di numeri:
   rosa caldo, a metà strada fra l'arancio del marchio e il viola
   degli amici, perché è lì che sta anche nella testa di chi usa. */
#app.s-s{--acc:#ff4d8d;--acc-hi:#ff6fa3;--acc-lo:#ec2c73;
  --grad:linear-gradient(135deg,#ff7a3d,#ff2d78);--glow:0 6px 22px -8px rgba(255,77,141,.5);
  --done-bg:#1f0f18;--done-b:#432033}

/* In chiaro le stesse tinte vanno scurite, altrimenti spariscono
   sulla carta e il testo bianco sopra i bottoni non si legge. */
.light #app.s-w{--acc:#d1441a;--acc-hi:#e2622c;--acc-lo:#cf3f16;
  --grad:linear-gradient(135deg,#e2622c,#cf3f16);--glow:0 6px 20px -9px rgba(209,68,26,.45);
  --done-bg:#fdf0e8;--done-b:#f0c3a5}
.light #app.s-d{--acc:#0f8a5a;--acc-hi:#17a06c;--acc-lo:#0b7449;
  --grad:linear-gradient(135deg,#17a06c,#0b7449);--glow:0 6px 20px -9px rgba(15,138,90,.4);
  --done-bg:#e9f7f0;--done-b:#a9dcc4}
.light #app.s-p{--acc:#1f6fd0;--acc-hi:#2f86f0;--acc-lo:#1a5cae;
  --grad:linear-gradient(135deg,#2f86f0,#1a5cae);--glow:0 6px 20px -9px rgba(31,111,208,.4);
  --done-bg:#e9f1fb;--done-b:#aecbef}
.light #app.s-a{--acc:#8e3fbf;--acc-hi:#a253d4;--acc-lo:#7a32a6;
  --grad:linear-gradient(135deg,#a253d4,#7a32a6);--glow:0 6px 20px -9px rgba(142,63,191,.4);
  --done-bg:#f4ebfa;--done-b:#d6b6e8}
.light #app.s-u{--acc:#a86a08;--acc-hi:#c07d10;--acc-lo:#8f5906;
  --grad:linear-gradient(135deg,#c07d10,#8f5906);--glow:0 6px 20px -9px rgba(168,106,8,.35);
  --done-bg:#fcf3e2;--done-b:#e8cf9c}
.light #app.s-s{--acc:#c9256b;--acc-hi:#dd3c7e;--acc-lo:#a81a56;
  --grad:linear-gradient(135deg,#e0602c,#d42a70);--glow:0 6px 20px -9px rgba(201,37,107,.4);
  --done-bg:#fdeaf2;--done-b:#f0b8d0}

/* Alone tenue in cima alla schermata, nella tinta della sezione:
   dà colore all'ambiente senza toccare la leggibilità del testo. */
#app::before{content:'';position:absolute;top:0;left:0;right:0;height:220px;pointer-events:none;z-index:0;
  background:radial-gradient(120% 100% at 50% 0%,var(--acc) 0%,transparent 68%);opacity:.09}
.light #app::before{opacity:.14}
#app>*{position:relative;z-index:1}
.light #sheetwrap .bd{background:rgba(20,24,20,.42)}