/* TEMA 5 — «ISTITUTO CON LE GRAZIE DEL QUOTIDIANO» (richiesta utente 14-09-2026).
   I COLORI E LA GEOMETRIA sono quelli del tema 3 (avorio, verde profondo, ottone, angoli
   morbidi, pastiglie). LA TIPOGRAFIA è quella del tema 1: Instrument Serif per i titoli,
   Newsreader per il corpo, IBM Plex Mono per dati, etichette e pulsanti in maiuscoletto.
   Si carica DOPO styles.css e lo ricopre. Nessuna griglia, nessun allineamento toccato. */
:root{
--bg:#f4f1e8;--bg-2:#ebe7db;--surface:#fbf9f4;--surface-2:#f0ece1;--surface-elev:#e6e1d3;
--line:#d8d3c4;--line-2:#bdb7a5;
--text:#12302a;--text-1:#0a1f1b;--text-2:#12302a;--text-3:#2b4a42;--text-mute:#7d8a84;
--accent:#8a5a20;--accent-2:#a66d29;--accent-soft:rgba(138,90,32,.12);--gold:#8a5a20;--gold-soft:rgba(138,90,32,.12);
--on-accent:#fffaf2;
--green:#1d6b4f;--green-soft:rgba(29,107,79,.13);
--red:#a4323c;--red-soft:rgba(164,50,60,.10);
--blue:#1f5d8c;--blue-soft:rgba(31,93,140,.10);
--purple:#5f42a6;--purple-soft:rgba(95,66,166,.10);
--orange:#98560f;--orange-soft:rgba(152,86,15,.12);--yellow:#87680f;
--font-display:"Instrument Serif",Georgia,"Times New Roman",serif;
--font-body:"Newsreader",Georgia,"Times New Roman",serif;
--font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
--radius:4px;--radius-sm:3px;--radius-lg:6px;
--img-tint:grayscale(1) sepia(.46) saturate(1.3) hue-rotate(-10deg) contrast(1.03);
--shadow:0 20px 44px -28px rgba(18,48,42,.3);
}
html{background:#e8e4d6}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16.5px;line-height:1.62}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.06;letter-spacing:-.005em}
.h1,#root h1{font-size:clamp(34px,5vw,58px);font-weight:400;letter-spacing:-.012em;line-height:1.04}
.h2,#root h2{font-size:clamp(26px,3.4vw,41px);font-weight:400}
.h3{font-size:clamp(18px,1.9vw,22px);font-weight:600}
.lead{font-family:var(--font-body);font-size:clamp(16.5px,1.6vw,20px);color:var(--text-2);line-height:1.58}
.eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.22em;color:var(--accent);margin-bottom:14px}
.eyebrow::before{content:"—";opacity:1;letter-spacing:0}
.term-head{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;color:var(--text-3)}
/* pulsanti: angoli morbidi del tema 3, lettering monospaziato del tema 1 */
.btn{font-family:var(--font-mono);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;border-radius:3px;padding:13px 23px}
.btn-primary{background:var(--text);color:var(--on-accent);border-color:var(--text)}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:none}
.btn-gold{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-gold:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent);transform:none}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{background:rgba(18,48,42,.05);color:var(--accent);border-color:var(--accent)}
.btn-sm{font-size:10.5px;letter-spacing:.14em}
.card{background:var(--surface);border:1px solid var(--line);border-radius:4px;box-shadow:0 2px 10px -6px rgba(18,48,42,.18)}
.card-hover:hover{border-color:var(--accent);box-shadow:0 20px 44px -28px rgba(18,48,42,.34)}
.badge{border-radius:99px;font-family:var(--font-mono);font-weight:600;letter-spacing:.14em;padding:4px 11px}
.pill{border-radius:99px;font-family:var(--font-mono);background:var(--surface);color:var(--text-2);border-color:var(--line-2);font-size:11px}
.nav{background:rgba(244,241,232,.95);border-bottom:1px solid var(--line)}
.nav-link{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--text-2);font-weight:500}
.nav-link:hover{color:var(--text)}
.nav-link.active{color:var(--accent);border-bottom-color:var(--accent)}
.logo-name{font-family:var(--font-display);font-weight:400;font-size:18px;letter-spacing:0}
.logo-name .accent{color:var(--accent)}
.logo-name small{font-family:var(--font-mono);color:var(--text-3)}
.nav-dd-menu,.lang-picker-menu{background:var(--surface);border-color:var(--line);border-radius:4px;box-shadow:0 18px 40px -24px rgba(18,48,42,.4)}
.nav-dd-menu a,.lang-picker-item{font-family:var(--font-mono);font-size:12px;color:var(--text-2);border-color:var(--line)}
.nav-dd-menu a:hover,.lang-picker-item:hover{color:var(--accent);background:rgba(18,48,42,.04)}
.lang-toggle{border-color:var(--line-2);border-radius:99px}
.lang-toggle button{color:var(--text-3);font-family:var(--font-mono)}
.lang-toggle button.on{background:var(--text);color:var(--on-accent)}
.lang-picker-btn{border-color:var(--line-2);color:var(--text-2);font-family:var(--font-mono);border-radius:99px}
.nav-burger{border-color:var(--line-2);color:var(--text);border-radius:4px}
.depth-chip{border-color:var(--line-2);border-radius:99px;font-family:var(--font-mono)}
.depth-chip:hover{background:rgba(18,48,42,.05)}
.grid-bg{background-image:none}
/* NESSUN CAMBIO DI SFONDO (richiesta utente 14-09-2026). Il piede era verde scuro e il logo
   per fondo chiaro e' un file OPACO (porta un rettangolo bianco): sul verde si vedeva la
   toppa. Ora il piede e' la stessa carta delle pagine — una superficie continua dalla testata
   al fondo — e il bianco del logo lo cancella `multiply`. */
.footer{background:var(--bg-2);border-top:1px solid var(--line-2)}
/* IL NOME NEL PIEDE E' TIPOGRAFIA, NON UN'IMMAGINE (richiesta utente 14-09-2026: «usa questo,
   quello in fondo e' nero e stona con i colori»). Il file grande per fondo chiaro porta
   «Mindful» in nero e un rettangolo opaco: nel piede resta solo il SEGNO del marchio
   (trasparente, oro) e il nome si scrive col carattere del tema, nell'inchiostro del tema —
   come nella barra in cima. */
.footer .logo{display:flex;align-items:center;justify-content:center;gap:12px}
/* IL SEGNO DEL MARCHIO COM'E' IN CIMA (richiesta utente): l'illustrazione VERA, coi suoi
   colori — lotus in oro, la testa, le candele verdi e rosse. La versione a tinta unita
   (maschera + colore del tema) cancellava il grafico dentro la testa, cioe' la parte che
   racconta il prodotto. Il file e' trasparente, quindi su carta sta senza toppe; e' alto
   quanto le tre righe del nome accanto. */
.footer .logo-full-img{display:block;width:69px;height:69px;max-width:69px;object-fit:contain;mix-blend-mode:normal}
.footer .logo::after{content:"MINDFUL TRADING CLUB";max-width:9ch;font-family:var(--font-display);font-size:21px;font-weight:400;line-height:1.1;letter-spacing:.01em;text-align:left;background:linear-gradient(var(--text) 0 33.333%,var(--accent) 33.333% 66.666%,var(--text) 66.666% 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.footer .logo::after{background:none;color:var(--text)}}
/* L'avvertenza ora vive su un fondo solo: la carta. Una regola, non due. */
.disclaimer{background:rgba(164,50,60,.10);border-color:rgba(164,50,60,.28);font-family:var(--font-mono);color:var(--text-2);border-radius:4px;font-size:11px}
.disclaimer strong{color:var(--red)}
.input{background:#ffffff;border-color:var(--line-2);font-family:var(--font-mono);font-size:15px;border-radius:3px}
.input:focus{border-color:var(--accent)}
.field-label{font-family:var(--font-mono);color:var(--text-2)}
.journal-table{font-family:var(--font-mono)}
.journal-table th{background:var(--bg-2);color:var(--text-3);border-color:var(--line)}
.journal-table td{border-color:var(--line);color:var(--text-2)}
.jt-act{background:var(--surface);border-color:var(--line-2);color:var(--text-2);border-radius:3px}
.stat-num{font-family:var(--font-mono);color:var(--accent);font-weight:600}
.prose h3{font-family:var(--font-mono);color:var(--accent);border-color:var(--line)}
.prose p,.prose li{color:var(--text-2)}
.mtc-life-fig .fig{border-color:var(--line);background:var(--surface);border-radius:4px}
.live-indicator{color:var(--green);font-family:var(--font-mono)}
input[type="range"]{background:var(--line-2)}
/* accento scuro su tema chiaro: dove il codice scrive nero sull'accento, serve l'avorio */
[style*="var(--accent)"][style*="rgb(0, 0, 0)"]{color:var(--on-accent)!important}
/* i sei titoli della home col monospaziato scritto inline tornano alle grazie */
#root h1[style*="--font-mono"],#root h2[style*="--font-mono"],#root h3[style*="--font-mono"],#root h4[style*="--font-mono"],#root .h1[style*="--font-mono"],#root .h2[style*="--font-mono"],#root .h3[style*="--font-mono"]{font-family:var(--font-display)!important}
html #intro-splash{background:#12302a}
#intro-splash .intro-tag{font-family:var(--font-mono);color:#8fa39c}
#intro-splash .intro-phrase{font-family:var(--font-display);font-weight:400;font-size:clamp(25px,4.2vw,48px);color:#f4f1e8;letter-spacing:0}
#intro-splash .intro-enter{font-family:var(--font-mono);font-weight:600;letter-spacing:.16em;border-radius:3px;background:#8a5a20;border-color:#8a5a20;color:#fffaf2;box-shadow:none}
#intro-splash .intro-enter:hover{background:transparent;color:#e0ae62;border-color:#a66d29;box-shadow:none}
#intro-splash .intro-lang button{font-family:var(--font-mono);border-radius:99px;border-color:#2a4a42;color:#9fb3ac}
#intro-splash .intro-lang button:hover{color:#f4f1e8;border-color:#5c7a72}
#intro-splash .intro-lang button.sel{background:#8a5a20;border-color:#8a5a20;color:#fffaf2}

/* LE TRE TAGLIE DEL PULSANTE, ridichiarate qui in fondo. Il tema ridefinisce `.btn` e a
   parita' di peso l'ultima regola vince: senza queste due righe `.btn-sm` e `.btn-lg` di
   styles.css non valgono piu' e il pulsante compatto, quello normale e quello grande
   diventano la stessa cosa. */
.btn-sm{padding:9px 16px}
.btn-lg{padding:15px 29px}