/* Estratto da mentium-mockup.html (contratto di design). Non riscrivere a mano:
rigenerare dal mockup se il mockup cambia. */
:root {
--blue: #539ae0;
--blue-deep: #254A87;
--navy: #132744;
--orange: #ed9700;
--amber: #ffba00;
--green: #2e9e5b;
--bg: #EAF6F9;
--surface: #ffffff;
--surface-2: #D7F2F9;
--line: #c9e2ec;
--ink: #212327;
/* Era #757c8e: 3.79:1 su --bg, sotto la soglia AA 4.5:1 per testo normale
(il contro-tipo scuro, #9aa4c0 su #0E151E, sta a 7.38:1). Stessa tinta
e saturazione, solo un po' piu' scuro, per non sembrare "grigio
pallidissimo" mantenendo il carattere smorzato/secondario. */
--muted: #676d7e;
--radius: 14px;
--shadow: 0 6px 24px rgba(19, 39, 68, 0.08);
/* --blue/--orange/--amber/--green sono tarati per stare su fondi scuri
(6-11:1 su #0E151E) e restano cosi': sono anche colori di riempimento
(pillole, barre, gradienti) dove non serve alcun rapporto di contrasto.
Usati come TESTO su un fondo chiaro, pero', cadono tutti sotto 3:1
(es. --blue 2.97:1 su bianco, --amber 1.71:1): illeggibili, non solo
"poco eleganti". Le varianti -text sono la stessa tinta scurita solo
quanto serve per il testo in chiaro (>=4.5:1 su bianco e su --bg); in
scuro restano identiche alla tinta di sempre. */
--blue-text: #254A87;
--orange-text: #8a5000;
--amber-text: #7a5700;
--green-text: #1a6b3c;
/* Rosso di errore (.lg-error e altri stati "negativo"): il rosso fisso
del mockup, #d64545, misura sotto 4:1 su ENTRAMBI gli sfondi (3.93:1
chiaro, 3.25:1 scuro): non e' un problema solo del passaggio al
chiaro, era gia' sotto soglia anche nel mockup scuro originale. */
--danger: #b3261e;
/* Vista Lezioni (vedi #view-lezioni): fondo pagina dietro hero e righe
(piatto in chiaro, sfumatura di sempre in scuro) e tratto del numero
"Top 10" nelle righe classifica (chiaro scuro in chiaro, bianco
trasparente di sempre in scuro). */
--lx-wash: var(--bg);
--lx-rank-stroke: rgba(33,35,39,.35);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0E151E;
--surface: #132744;
--surface-2: #1a3050;
--line: #24405f;
--ink: #eef1f8;
--muted: #9aa4c0;
--shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
--blue-text: #539ae0;
--orange-text: #ed9700;
--amber-text: #ffba00;
--green-text: #2e9e5b;
/* Non il #d64545 originale: era sotto 4:1 anche sullo scuro (3.25:1).
#ff6b6b e' lo stesso rosso schiarito quanto basta per leggerlo. */
--danger: #ff6b6b;
--lx-wash:
radial-gradient(1200px 520px at 12% -8%, rgba(83,154,224,.20), transparent 62%),
radial-gradient(900px 460px at 92% 4%, rgba(37,74,135,.22), transparent 60%),
linear-gradient(180deg, #132744 0%, #0E151E 44%, #0a1016 100%);
--lx-rank-stroke: rgba(255,255,255,.42);
}
/* Token locali della vista Classifiche (vedi #view-classifiche): --cl-bg/
--cl-panel/--cl-panel-2 seguono gia' --bg/--surface/--surface-2 sopra,
qui si ridefiniscono solo quelli senza un equivalente esatto nel guscio,
agli stessi valori scuri di sempre (nessun cambiamento visivo scuro). */
:root:not([data-theme="light"]) #view-classifiche {
--cl-line: rgba(255,255,255,.1);
--cl-ink: #eef2ff;
--cl-ink-2: #8d99c4;
--cl-silver: #b8c4d4;
--cl-bronze: #c98a4b;
--cl-red: #e05a5a;
}
/* Token locali della vista Podcast (vedi #view-podcast), stesso schema. */
:root:not([data-theme="light"]) #view-podcast {
--pd-ink: #eef2ff;
--pd-dim: #8d99c4;
--pd-soft: #b9c4e8;
}
/* Token locali della vista Social (vedi #view-social), stesso schema. */
:root:not([data-theme="light"]) #view-social {
--so-line: rgba(255,255,255,.1);
--so-ink: #eef2ff;
--so-ink-2: #8d99c4;
}
}
:root[data-theme="dark"] {
--bg: #0E151E;
--surface: #132744;
--surface-2: #1a3050;
--line: #24405f;
--ink: #eef1f8;
--muted: #9aa4c0;
--shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
--blue-text: #539ae0;
--orange-text: #ed9700;
--amber-text: #ffba00;
--green-text: #2e9e5b;
--danger: #ff6b6b;
--lx-wash:
radial-gradient(1200px 520px at 12% -8%, rgba(83,154,224,.20), transparent 62%),
radial-gradient(900px 460px at 92% 4%, rgba(37,74,135,.22), transparent 60%),
linear-gradient(180deg, #132744 0%, #0E151E 44%, #0a1016 100%);
--lx-rank-stroke: rgba(255,255,255,.42);
}
:root[data-theme="dark"] #view-classifiche {
--cl-line: rgba(255,255,255,.1);
--cl-ink: #eef2ff;
--cl-ink-2: #8d99c4;
--cl-silver: #b8c4d4;
--cl-bronze: #c98a4b;
--cl-red: #e05a5a;
}
:root[data-theme="dark"] #view-podcast {
--pd-ink: #eef2ff;
--pd-dim: #8d99c4;
--pd-soft: #b9c4e8;
}
:root[data-theme="dark"] #view-social {
--so-line: rgba(255,255,255,.1);
--so-ink: #eef2ff;
--so-ink-2: #8d99c4;
}
* { box-sizing: border-box; }
body {
background: var(--bg);
color: var(--ink);
font-family: "Noto Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
margin: 0;
line-height: 1.5;
}
.shell { max-width: 1120px; margin: 0 auto; padding: 16px 20px 64px; }
/* ---------- top-nav stile Netflix desktop ---------- */
.nav {
position: sticky; top: 0; z-index: 500;
display: flex; align-items: center; gap: 26px;
margin: -16px -20px 22px;
padding: 0 clamp(16px, 3vw, 36px);
height: 60px;
background: rgba(14, 21, 30, 0.94);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-logo {
flex: 0 0 auto;
font-weight: 800; letter-spacing: 0.14em; font-size: 15px;
color: var(--blue); cursor: pointer;
background: none; border: none; font-family: inherit; padding: 0;
}
.nav-links {
flex: 1 1 auto; min-width: 0;
display: flex; align-items: center; gap: 2px;
overflow-x: auto;
scrollbar-width: none; -ms-overflow-style: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-link {
flex: 0 0 auto;
background: none; border: none; cursor: pointer;
font-family: inherit; font-size: 13.5px; font-weight: 600;
color: #8d99c4;
padding: 8px 12px; border-radius: 8px;
transition: color 0.15s ease, background 0.15s ease;
white-space: nowrap;
}
.nav-link:hover { color: #fff; }
.nav-link.is-active { color: #fff; font-weight: 700; }
.nav-link.is-active { position: relative; }
.nav-link.is-active::after {
content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
height: 2px; border-radius: 2px; background: var(--blue);
}
.nav-right { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.nav-search {
background: none; border: none; cursor: pointer;
color: #8d99c4; font-size: 17px; padding: 4px;
transition: color 0.15s ease;
}
.nav-search:hover { color: #fff; }
.nav-avatar {
width: 32px; height: 32px; border-radius: 7px;
background: linear-gradient(135deg, var(--blue), var(--blue-deep));
color: #fff; font-size: 12.5px; font-weight: 800;
display: grid; place-items: center;
border: none; cursor: pointer;
}
.nav :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
@media (max-width: 760px) {
.nav { gap: 14px; height: 54px; }
.nav-search { display: none; }
}
/* ===================== LOGIN ===================== */
.nav[hidden]{display:none !important;}
#view-login[hidden]{display:none !important;}
#view-login{
min-height:min(720px, calc(100vh - 110px));
display:grid;
grid-template-columns:1.05fr 0.95fr;
border-radius:var(--radius);
overflow:hidden;
border:1px solid var(--line);
box-shadow:var(--shadow);
background:var(--surface);
}
#view-login *{box-sizing:border-box;}
#view-login :focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:10px;}
/* pannello brand */
.lg-brand{
position:relative;overflow:hidden;
background:
radial-gradient(900px 500px at 85% 0%, rgba(83,154,224,0.25), transparent 60%),
linear-gradient(155deg, #132744 0%, #0E151E 70%);
color:#eef2ff;
padding:clamp(28px,4vw,52px);
display:flex;flex-direction:column;justify-content:space-between;gap:32px;
}
.lg-brand::after{
content:"∫";
position:absolute;right:-6%;bottom:-14%;
font-size:380px;line-height:0.8;font-weight:700;
color:#fff;opacity:0.06;pointer-events:none;user-select:none;
}
.lg-logo{
position:relative;z-index:1;
display:flex;align-items:center;gap:10px;
color:#eef2ff;
}
.lg-logo-mark{
width:38px;height:38px;padding:6px;border-radius:12px;
display:grid;place-items:center;background:rgba(255,255,255,.94);
box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.lg-logo-mark img{display:block;width:100%;height:100%;object-fit:contain;}
.lg-logo-name{font-weight:800;letter-spacing:.14em;font-size:16px;color:var(--blue);}
.lg-logo-by{
padding-left:10px;border-left:1px solid rgba(255,255,255,.24);
font-size:12px;font-weight:600;color:#d9e2ff;
}
.lg-claim{position:relative;z-index:1;}
.lg-eyebrow,
.lg-form-eyebrow{
display:block;margin:0 0 10px;
font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.lg-eyebrow{color:var(--blue);}
.lg-claim h2{
margin:0 0 12px;
font-size:clamp(1.5rem,2.8vw,2.2rem);
font-weight:900;letter-spacing:-0.02em;line-height:1.12;color:#fff;
}
.lg-claim p{margin:0;font-size:0.95rem;line-height:1.6;color:#b9c4e8;max-width:40ch;}
.lg-points{
position:relative;z-index:1;
list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:12px;
}
.lg-points li{
display:flex;align-items:center;gap:12px;
font-size:0.88rem;font-weight:600;color:#eef2ff;
}
.lg-points i{
flex:0 0 30px;width:30px;height:30px;border-radius:9px;
display:grid;place-items:center;
font-style:normal;font-size:12px;font-weight:800;color:#fff;
background:linear-gradient(140deg,var(--blue),var(--blue-deep));
}
/* form */
.lg-form-wrap{
display:flex;align-items:center;justify-content:center;
padding:clamp(28px,4vw,52px);
}
.lg-form{
width:min(380px,100%);
display:flex;flex-direction:column;gap:16px;
}
.lg-form-eyebrow{margin-bottom:-10px;color:var(--blue-text);}
.lg-form h3{
margin:0;font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-0.01em;
}
.lg-form .lg-sub{margin:-8px 0 4px;font-size:13.5px;color:var(--muted);}
.lg-field{display:flex;flex-direction:column;gap:6px;}
.lg-field span{
font-size:11.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--muted);
}
.lg-field input{
font:inherit;font-size:14.5px;color:var(--ink);
background:var(--surface-2);border:1px solid var(--line);
border-radius:11px;padding:13px 15px;outline:none;
transition:border-color 0.15s ease;
width:100%;
}
.lg-field input:focus{border-color:var(--blue);}
.lg-pass{position:relative;}
.lg-pass input{padding-right:74px;}
.lg-show{
position:absolute;right:8px;top:50%;transform:translateY(-50%);
border:none;background:transparent;cursor:pointer;
font:inherit;font-size:12px;font-weight:700;color:var(--blue-text);
padding:6px 8px;border-radius:8px;
}
.lg-row{
display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
font-size:13px;
}
.lg-remember{
display:flex;align-items:center;gap:8px;color:var(--muted);cursor:pointer;font-weight:600;
}
.lg-remember input{accent-color:var(--blue-deep);width:16px;height:16px;}
.lg-forgot{
color:var(--blue-text);font-weight:700;text-decoration:none;font-size:13px;
background:none;border:none;cursor:pointer;font-family:inherit;padding:0;
}
.lg-forgot:hover{text-decoration:underline;}
.lg-error{
/* --danger: stessa idea di --blue-text, scurito solo quanto serve perche'
il rosso di errore resti leggibile anche sul chiaro (misurato: il rosso
fisso di prima era sotto 4:1 in ENTRAMBI i temi, non solo in chiaro). */
margin:0;font-size:13px;font-weight:600;color:var(--danger);
background:rgba(214,69,69,0.08);border:1px solid rgba(214,69,69,0.35);
border-radius:10px;padding:10px 13px;
}
.lg-error[hidden]{display:none !important;}
.lg-submit{
border:none;cursor:pointer;font:inherit;font-size:15px;font-weight:800;color:#fff;
background:linear-gradient(180deg,var(--blue),var(--blue-deep));
padding:14px 20px;border-radius:12px;
box-shadow:0 8px 20px rgba(37,74,135,0.35);
transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.lg-submit:disabled{cursor:wait;opacity:.72;transform:none;box-shadow:none;}
.lg-submit:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(37,74,135,0.45);}
.lg-divider{
display:flex;align-items:center;gap:12px;
font-size:11.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);
}
.lg-divider::before,.lg-divider::after{
content:"";flex:1;height:1px;background:var(--line);
}
.lg-alt{
display:flex;align-items:center;justify-content:center;gap:10px;
border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
font:inherit;font-size:14px;font-weight:700;
padding:12px 18px;border-radius:12px;cursor:pointer;
transition:border-color 0.15s ease;
}
.lg-alt:hover{border-color:var(--blue);}
.lg-alt i{
font-style:normal;width:22px;height:22px;border-radius:6px;
display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;
background:linear-gradient(140deg,#4285F4,#1a73e8);
}
.lg-foot{
margin:4px 0 0;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.5;
}
.lg-foot a{color:var(--blue-text);font-weight:700;text-decoration:none;}
.lg-foot a:hover{text-decoration:underline;}
.lg-security{
display:flex;align-items:center;justify-content:center;gap:7px;
margin:0;font-size:11.5px;color:var(--muted);text-align:center;
}
.lg-security span{
display:grid;width:18px;height:18px;place-items:center;border-radius:50%;
background:rgba(46,158,91,.12);color:var(--green-text);font-size:10px;font-weight:800;
}
@media (max-width:860px){
#view-login{grid-template-columns:1fr;min-height:0;}
.lg-brand{gap:20px;padding-bottom:28px;}
.lg-brand::after{font-size:220px;right:-10%;bottom:-20%;}
.lg-points{display:none;}
}
@media (max-width:520px){
#view-login{border:0;border-radius:0;box-shadow:none;}
.lg-brand{padding:24px 20px 28px;}
.lg-logo-mark{width:34px;height:34px;}
.lg-logo-by{font-size:11px;}
.lg-claim h2{font-size:1.65rem;}
.lg-form-wrap{padding:28px 20px 36px;}
.lg-form{width:100%;}
.lg-row{align-items:flex-start;}
}
#view-dashboard[hidden]{display:none !important;}
#view-dashboard{
display:flex;
flex-direction:column;
gap:24px;
color:var(--ink);
box-sizing:border-box;
}
#view-dashboard *{box-sizing:border-box;}
#view-dashboard :is(button,a,[tabindex]):focus-visible{
outline:3px solid var(--blue);
outline-offset:2px;
border-radius:10px;
}
/* ---------- shared card ---------- */
.db-card{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:22px;
}
.db-card h3{
margin:0 0 4px 0;
font-size:17px;
font-weight:700;
color:var(--ink);
}
.db-card .db-card-sub{
margin:0 0 18px 0;
font-size:13px;
color:var(--muted);
}
/* ---------- header ---------- */
.db-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:18px 22px;
}
.db-identity{
display:flex;
align-items:center;
gap:14px;
min-width:0;
}
.db-avatar{
flex:0 0 auto;
width:56px;
height:56px;
border-radius:50%;
background:linear-gradient(135deg, var(--blue), var(--blue-deep));
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:19px;
letter-spacing:0.5px;
box-shadow:0 4px 10px rgba(37,74,135,0.35);
}
.db-identity-text{min-width:0;}
.db-identity-text h1{
margin:0;
font-size:19px;
font-weight:700;
color:var(--ink);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.db-identity-text p{
margin:2px 0 0 0;
font-size:13px;
color:var(--muted);
}
.db-support{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:6px;
flex:0 0 auto;
}
.db-support-btn{
display:inline-flex;
align-items:center;
gap:8px;
border:none;
cursor:pointer;
background:var(--orange);
color:#fff;
font-size:14.5px;
font-weight:700;
padding:12px 20px;
border-radius:999px;
box-shadow:0 6px 16px rgba(237,151,0,0.38);
transition:transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.db-support-btn:hover{
transform:translateY(-1px);
filter:brightness(1.05);
box-shadow:0 8px 20px rgba(237,151,0,0.46);
}
.db-support-btn:active{transform:translateY(0);}
.db-support-note{
font-size:11.5px;
color:var(--muted);
margin:0;
}
/* ---------- calendar ---------- */
.db-cal-grid{
display:grid;
grid-template-columns:1.1fr 0.9fr;
gap:20px;
align-items:stretch;
}
.db-cal-top{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:14px;
}
.db-cal-title{
font-size:15px;
font-weight:700;
color:var(--ink);
}
.db-cal-nav{
display:flex;
gap:6px;
}
.db-cal-nav button{
width:30px;
height:30px;
border-radius:8px;
border:1px solid var(--line);
background:var(--surface-2);
color:var(--muted);
cursor:pointer;
font-size:14px;
display:flex;
align-items:center;
justify-content:center;
transition:background 0.15s ease, color 0.15s ease;
}
.db-cal-nav button:hover{
background:var(--blue);
color:#fff;
border-color:var(--blue);
}
.db-cal-weekdays{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:4px;
margin-bottom:6px;
}
.db-cal-weekdays span{
text-align:center;
font-size:11px;
font-weight:700;
color:var(--muted);
text-transform:uppercase;
letter-spacing:0.4px;
}
.db-cal-dates{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:4px;
}
.db-day{
position:relative;
aspect-ratio:1/1;
display:flex;
align-items:center;
justify-content:center;
border:1px solid transparent;
background:transparent;
border-radius:10px;
font-size:13.5px;
font-variant-numeric:tabular-nums;
color:var(--ink);
cursor:pointer;
transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.db-day:hover{
background:var(--surface-2);
border-color:var(--line);
}
.db-day--empty{
cursor:default;
visibility:hidden;
}
.db-day--lesson::after{
content:"";
position:absolute;
bottom:5px;
width:5px;
height:5px;
border-radius:50%;
background:var(--blue-deep);
}
.db-day--selected{
background:var(--blue-deep);
color:#fff;
font-weight:700;
box-shadow:0 4px 12px rgba(37,74,135,0.35);
}
.db-day--selected::after{
background:#fff;
}
.db-day--selected:hover{
background:var(--blue-deep);
border-color:var(--blue-deep);
}
.db-slots-col{
display:flex;
flex-direction:column;
gap:10px;
min-width:0;
}
.db-slots-label{
font-size:12.5px;
font-weight:700;
color:var(--muted);
text-transform:uppercase;
letter-spacing:0.4px;
margin-bottom:2px;
}
.db-slot{
display:flex;
align-items:center;
gap:10px;
width:100%;
text-align:left;
border:1px solid var(--line);
background:var(--surface-2);
border-radius:12px;
padding:12px 14px;
cursor:pointer;
font-size:13.5px;
color:var(--ink);
transition:border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.db-slot:hover{
border-color:var(--blue);
background:var(--surface);
transform:translateX(2px);
}
.db-slot-time{
flex:0 0 auto;
font-weight:700;
color:var(--blue-text);
font-variant-numeric:tabular-nums;
min-width:52px;
}
.db-slot-desc{
color:var(--ink);
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.db-slot--empty{
border-style:dashed;
background:transparent;
color:var(--muted);
justify-content:center;
font-weight:600;
}
.db-slot--empty:hover{
border-color:var(--orange);
color:var(--orange-text);
background:rgba(237,151,0,0.06);
transform:none;
}
/* ---------- progress ---------- */
.db-progress-main{
margin-bottom:18px;
}
.db-progress-headline{
display:flex;
align-items:baseline;
justify-content:space-between;
margin-bottom:10px;
}
.db-progress-headline strong{
font-size:26px;
font-weight:800;
color:var(--blue-text);
font-variant-numeric:tabular-nums;
}
.db-progress-headline span{
font-size:12.5px;
color:var(--muted);
}
.db-progress-track{
position:relative;
height:16px;
border-radius:999px;
background:var(--surface-2);
border:1px solid var(--line);
overflow:hidden;
}
.db-progress-fill{
height:100%;
width:68%;
border-radius:999px;
background:linear-gradient(90deg, var(--blue), var(--blue-deep));
}
.db-progress-ticks{
position:absolute;
inset:0;
display:grid;
grid-template-columns:repeat(4,1fr);
}
.db-progress-ticks span{
border-right:2px solid var(--bg);
}
.db-progress-ticks span:last-child{border-right:none;}
.db-legend{
display:flex;
flex-wrap:wrap;
gap:16px;
margin-top:12px;
}
.db-legend-item{
display:flex;
align-items:center;
gap:6px;
font-size:12.5px;
color:var(--muted);
}
.db-legend-dot{
width:9px;
height:9px;
border-radius:50%;
flex:0 0 auto;
}
.db-legend-dot--done{background:var(--blue);}
.db-legend-dot--progress{background:var(--orange);}
.db-legend-dot--todo{background:var(--line);}
.db-subjects{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
margin-top:20px;
padding-top:18px;
border-top:1px solid var(--line);
}
.db-subject{
display:flex;
flex-direction:column;
gap:8px;
}
.db-subject-top{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:6px;
}
.db-subject-name{
font-size:13px;
font-weight:700;
color:var(--ink);
}
.db-subject-pct{
font-size:13px;
font-weight:700;
font-variant-numeric:tabular-nums;
color:var(--muted);
}
.db-subject-bar{
height:8px;
border-radius:999px;
background:var(--surface-2);
border:1px solid var(--line);
overflow:hidden;
}
.db-subject-fill{
height:100%;
border-radius:999px;
}
.db-subject-fill--done{background:linear-gradient(90deg, var(--blue), var(--blue-deep));}
.db-subject-fill--progress{background:var(--orange);}
.db-subject-fill--todo{background:var(--muted);opacity:0.45;}
.db-subject-tag{
font-size:11px;
font-weight:600;
color:var(--muted);
}
.db-subject-tag--progress{color:var(--orange-text);}
.db-subject-tag--done{color:var(--blue-text);}
/* ---------- riga superiore: profilo + progressi ---------- */
.db-toprow{
display:grid;
grid-template-columns:minmax(280px,0.85fr) 1.75fr;
gap:24px;
align-items:stretch;
}
.db-toprow .db-header{
flex-direction:column;
align-items:flex-start;
justify-content:center;
gap:16px;
}
.db-toprow .db-support{align-items:flex-start;}
@media (max-width:900px){
.db-toprow{grid-template-columns:1fr;}
}
/* ---------- card progressi centrata ---------- */
.db-card--center h3,
.db-card--center .db-card-sub{text-align:center;}
.db-card--center .db-progress-headline{
flex-direction:column;
align-items:center;
gap:2px;
}
.db-card--center .db-legend{justify-content:center;}
/* ---------- preview lezione nei giorni del mese (titolo sopra, video sotto) ---------- */
.db-day--lesson::before{
content:attr(data-prev);
position:absolute;
bottom:calc(100% + 10px);
left:50%;
transform:translateX(-50%) scale(0.92);
width:178px;
white-space:normal;
text-align:left;
line-height:1.35;
opacity:0;
pointer-events:none;
background:
radial-gradient(120px 60px at 80% 100%, rgba(255,255,255,0.22), transparent 65%) bottom / 100% 84px no-repeat,
linear-gradient(140deg, #132744 0%, #254A87 55%, #539ae0 130%) bottom / 100% 84px no-repeat,
linear-gradient(135deg, var(--navy), var(--blue-deep));
border:1px solid rgba(255,255,255,0.2);
color:#fff;
font-size:11.5px;
font-weight:700;
padding:11px 13px 96px;
border-radius:12px;
box-shadow:0 20px 44px rgba(14,21,30,0.55);
transition:opacity 0.15s ease, transform 0.15s ease;
z-index:30;
}
.db-day--lesson:hover{transform:scale(1.14);z-index:20;}
.db-day--lesson:hover::before{
opacity:1;
transform:translateX(-50%) scale(1);
}
.db-day--lesson:hover::after{
content:"▶";
width:34px;
height:34px;
border-radius:50%;
background:rgba(255,255,255,0.95);
color:#0E151E;
font-size:12px;
display:grid;
place-items:center;
left:50%;
bottom:calc(100% + 10px + 26px);
transform:translateX(-50%);
box-shadow:0 8px 18px rgba(0,0,0,0.45);
pointer-events:none;
z-index:31;
}
/* ---------- preview nelle task lezione (vista giorno) ---------- */
.db-task-prev{
flex:0 0 76px;
aspect-ratio:16/9;
border-radius:8px;
display:grid;
place-items:center;
color:#fff;
font-size:22px;
font-weight:800;
position:relative;
overflow:hidden;
box-shadow:0 4px 12px rgba(14,21,30,0.3);
}
.db-task-prev::after{
content:"▶";
position:absolute;
inset:0;
display:grid;
place-items:center;
font-size:13px;
color:#fff;
background:rgba(6,10,28,0.45);
opacity:0;
transition:opacity 0.15s ease;
}
.db-task--preview{padding:10px 14px;}
.db-task--preview:hover{
transform:scale(1.015);
border-color:var(--blue);
}
.db-task{transition:transform 0.18s ease, border-color 0.18s ease;}
.db-task--preview:hover .db-task-prev::after{opacity:1;}
/* ---------- calendar head + segmented control ---------- */
.db-cal-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
flex-wrap:wrap;
margin-bottom:18px;
}
.db-cal-head h3{margin:0 0 4px 0;}
.db-cal-head .db-card-sub{margin:0;}
.db-seg{
display:inline-flex;
gap:2px;
padding:3px;
background:var(--surface-2);
border:1px solid var(--line);
border-radius:999px;
}
.db-seg-btn{
border:none;
background:transparent;
color:var(--muted);
font:inherit;
font-size:13px;
font-weight:600;
padding:7px 16px;
border-radius:999px;
cursor:pointer;
transition:background 0.15s ease, color 0.15s ease;
}
.db-seg-btn:hover{color:var(--ink);}
.db-seg-btn.is-active{
background:var(--blue-deep);
color:#fff;
box-shadow:0 3px 10px rgba(37,74,135,0.35);
}
#cal-day[hidden],#cal-week[hidden],#cal-month[hidden]{display:none !important;}
/* ---------- tasklist (vista giorno) ---------- */
.db-tasks{
display:flex;
flex-direction:column;
gap:10px;
}
.db-task{
display:flex;
align-items:center;
gap:12px;
border:1px solid var(--line);
background:var(--surface-2);
border-radius:12px;
padding:12px 14px;
font-size:13.5px;
}
.db-task-check{
flex:0 0 auto;
width:22px;
height:22px;
border-radius:50%;
border:2px solid var(--line);
display:grid;
place-items:center;
font-size:12px;
color:#fff;
background:transparent;
}
.db-task--done .db-task-check{
background:var(--blue-deep);
border-color:var(--blue-deep);
}
.db-task--done .db-task-name{
text-decoration:line-through;
color:var(--muted);
}
.db-task--next{
border-color:var(--orange);
background:rgba(237,151,0,0.07);
}
.db-task--next .db-task-check{border-color:var(--orange);}
.db-task-time{
flex:0 0 auto;
font-weight:700;
color:var(--blue-text);
font-variant-numeric:tabular-nums;
min-width:52px;
}
.db-task-name{
flex:1 1 auto;
min-width:0;
color:var(--ink);
}
.db-task-kind{
flex:0 0 auto;
font-size:10.5px;
font-weight:700;
letter-spacing:0.05em;
text-transform:uppercase;
padding:4px 9px;
border-radius:999px;
border:1px solid var(--line);
color:var(--muted);
background:var(--surface);
}
.db-task-kind--lezione{color:var(--blue-text);border-color:rgba(83,154,224,0.5);}
.db-task-kind--tutor{color:var(--orange-text);border-color:rgba(237,151,0,0.5);}
.db-task-kind--esame{color:var(--green-text);border-color:rgba(46,158,91,0.5);}
/* ---------- vista settimana ---------- */
.db-week{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:8px;
}
.db-wday{
border:1px solid var(--line);
background:var(--surface-2);
border-radius:12px;
padding:12px 6px 10px;
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
cursor:pointer;
font:inherit;
color:var(--ink);
transition:border-color 0.15s ease, background 0.15s ease;
}
.db-wday:hover{border-color:var(--blue);}
.db-wday--today{
border-color:var(--blue-deep);
background:rgba(37,74,135,0.10);
box-shadow:0 4px 12px rgba(37,74,135,0.18);
}
.db-wday small{
font-size:10.5px;
font-weight:700;
letter-spacing:0.06em;
text-transform:uppercase;
color:var(--muted);
}
.db-wday b{
font-size:17px;
font-weight:800;
font-variant-numeric:tabular-nums;
}
.db-wday--today b{color:var(--blue-text);}
.db-wday-dots{
display:flex;
gap:3px;
min-height:6px;
flex-wrap:wrap;
justify-content:center;
}
.db-wday-dots i{
width:6px;
height:6px;
border-radius:50%;
}
.db-wday-dots .is-done{background:var(--blue-deep);}
.db-wday-dots .is-todo{background:var(--orange);}
.db-wday em{
font-style:normal;
font-size:10.5px;
color:var(--muted);
font-weight:600;
}
.db-week-next{
display:flex;
flex-direction:column;
gap:10px;
margin-top:18px;
padding-top:16px;
border-top:1px solid var(--line);
}
/* ---------- motivational strip ---------- */
.db-motivation{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
flex-wrap:wrap;
background:linear-gradient(120deg, var(--navy), var(--blue-deep));
color:#fff;
border-radius:var(--radius);
padding:24px 26px;
box-shadow:var(--shadow);
}
.db-motivation-left{
display:flex;
flex-direction:column;
gap:12px;
min-width:0;
flex:1 1 320px;
}
.db-motivation-text{
margin:0;
font-size:16.5px;
font-weight:600;
line-height:1.45;
color:#fff;
}
.db-chips{
display:flex;
gap:10px;
flex-wrap:wrap;
}
.db-chip{
display:inline-flex;
align-items:center;
gap:6px;
background:rgba(255,255,255,0.14);
border:1px solid rgba(255,255,255,0.28);
color:#fff;
font-size:12.5px;
font-weight:600;
padding:6px 12px;
border-radius:999px;
}
.db-motivation-cta{
flex:0 0 auto;
display:inline-flex;
align-items:center;
gap:8px;
background:#fff;
color:var(--navy);
border:none;
font-size:14.5px;
font-weight:700;
padding:13px 22px;
border-radius:999px;
cursor:pointer;
box-shadow:0 6px 16px rgba(0,0,0,0.22);
transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.db-motivation-cta:hover{
transform:translateY(-1px);
box-shadow:0 8px 20px rgba(0,0,0,0.28);
}
.db-motivation-cta:active{transform:translateY(0);}
/* ---------- responsive ---------- */
@media (max-width:760px){
.db-header{flex-direction:column;align-items:flex-start;}
.db-support{align-items:flex-start;width:100%;}
.db-support-btn{width:100%;justify-content:center;}
.db-cal-grid{grid-template-columns:1fr;}
.db-week{gap:5px;}
.db-wday{padding:9px 3px 8px;}
.db-task{flex-wrap:wrap;}
.db-task-kind{margin-left:34px;}
.db-subjects{grid-template-columns:repeat(2,1fr);}
.db-motivation{flex-direction:column;align-items:stretch;}
.db-motivation-cta{width:100%;justify-content:center;}
/* .db-motivation-left eredita flex:1 1 320px dalla regola di base, pensata
per una riga (main axis orizzontale): appena sopra .db-motivation passa a
flex-direction:column il 320px diventa un'altezza minima, non piu' una
larghezza, e apre un vuoto enorme sotto il testo. Sugli schermi stretti
l'altezza deve seguire il contenuto. */
.db-motivation-left{flex:1 1 auto;}
/* Segmented control del calendario (Giorno/Settimana/Mese/Intervallo):
.db-seg e' inline-flex a larghezza naturale, e "Settimana"/"Intervallo"
insieme non ci stanno nella card sugli schermi piu' stretti. Il risultato
e' che il controllo sborda oltre il padding della card fino al bordo
schermo (e "Intervallo" finisce sotto il pulsante Tutor). Sotto i 480px
lo facciamo diventare a larghezza piena con i 4 tab equidistanti. */
.db-seg{display:flex;width:100%;}
.db-seg-btn{flex:1 1 0;padding:7px 4px;font-size:11.5px;white-space:nowrap;text-align:center;}
/* Anteprima al hover del giorno con lezione nella vista Mese: e' un
::before con content:attr(data-prev) largo 178px, invisibile finche' non
si passa il mouse (opacity:0). Su schermi stretti il giorno e' troppo
stretto perche' 178px centrati ci stiano dentro: pur restando invisibile,
lo spazio del box sborda e allarga la pagina intera (zoom-out mobile).
L'hover non esiste comunque in modo affidabile su touch, quindi qui lo
disattiviamo del tutto invece di provare a farlo stare in poco spazio. */
.db-day--lesson::before,.db-day--lesson::after{content:none;}
}
@media (max-width:420px){
.db-subjects{grid-template-columns:1fr;}
.db-progress-headline{flex-direction:column;align-items:flex-start;gap:2px;}
}
/* ===================== MENTIUM · VISTA LEZIONI (stile Netflix) ===================== */
#view-lezioni[hidden]{display:none !important;}
#view-lezioni{
/* --lx-bg, --lx-ink e --lx-line (con i loro numeri) restano come nel
mockup originale: servono SOLO all'hero e alle locandine, superfici
"schermo" che restano scure
sempre (sono immagini/copertine, non cornice). Non li ho toccati.
--lx-wash e' nuovo: il fondo pagina dietro hero e righe, quello che deve
seguire il tema. In chiaro e' il fondo piatto del guscio; in scuro (nei
due blocchi tema in fondo a :root) e' la stessa sfumatura con i bagliori
di sempre, solo scritta con esadecimali letterali invece delle variabili
qui sopra (cosi' l'hero, che quei bagliori non li usa comunque, non
dipende da questo token e non rischia di scolorire insieme alla pagina). */
--lx-bg-0:#0E151E;
--lx-bg-1:#132744;
--lx-bg-2:#1a3050;
--lx-ink:#eef2ff;
--lx-ink-soft:#b9c4e8;
--lx-ink-dim:#8d99c4;
--lx-line:rgba(255,255,255,.10);
--lx-line-2:rgba(255,255,255,.18);
--lx-card:210px;
--lx-gap:14px;
--lx-r:var(--radius,14px);
position:relative;
overflow-x:clip; /* lo scroll orizzontale vive SOLO nelle righe */
color:var(--ink);
background:var(--lx-wash);
font-family:inherit;
padding:0 0 54px;
border-radius:var(--lx-r);
}
#view-lezioni *{box-sizing:border-box;}
#view-lezioni :focus-visible{
outline:3px solid var(--amber,#ffba00);
outline-offset:3px;
border-radius:10px;
}
/* ---------- 1. TOP BAR ---------- */
.lx-topbar{
display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
padding:22px clamp(16px,3.2vw,40px) 6px;
}
/* Topbar e pulsante "torna indietro": stanno sopra il fondo pagina --lx-wash
(adattivo), non sull'hero. Colore e cornice seguono il tema come nel resto
del guscio, invece dei token locali con questi numeri (quelli restano
fissi, riservati all'hero e alle locandine sotto). */
.lx-topbar__title{
margin:0;font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:800;letter-spacing:-.02em;
color:var(--ink);
}
.lx-topbar__title small{
display:block;margin-top:4px;font-size:.72rem;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);
}
.lx-back{
appearance:none;cursor:pointer;font:inherit;font-size:.86rem;font-weight:600;
color:var(--muted);background:var(--surface-2);
border:1px solid var(--line);border-radius:999px;padding:9px 16px;
transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease;
}
.lx-back:hover{color:var(--ink);background:rgba(83,154,224,.18);border-color:rgba(83,154,224,.55);transform:translateX(-2px);}
/* ---------- 2. HERO ---------- */
.lx-hero{
position:relative;margin:14px clamp(16px,3.2vw,40px) 8px;
border-radius:calc(var(--lx-r) + 6px);
overflow:hidden;isolation:isolate;
border:1px solid var(--lx-line);
min-height:390px;
display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
background:
linear-gradient(115deg,#0E151E 0%,#254A87 46%,#254A87 78%,#539ae0 100%);
box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
}
/* glifo gigante della materia */
.lx-hero__glyph{
position:absolute;z-index:0;right:2%;top:50%;transform:translateY(-50%);
font-size:clamp(300px,38vw,520px);line-height:.8;font-weight:700;
color:#fff;opacity:.09;pointer-events:none;user-select:none;
text-shadow:0 0 90px rgba(255,255,255,.35);
}
/* vignettatura + scrim tipo Netflix */
.lx-hero::before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(90deg, rgba(6,10,28,.94) 0%, rgba(6,10,28,.78) 42%, rgba(6,10,28,.12) 78%, rgba(6,10,28,.45) 100%),
linear-gradient(0deg, rgba(6,10,28,.85) 0%, transparent 55%);
}
.lx-hero::after{
content:"";position:absolute;inset:-2px;z-index:2;pointer-events:none;
box-shadow:inset 0 0 150px 40px rgba(4,7,20,.75);
}
.lx-hero__body{
position:relative;z-index:3;
padding:clamp(22px,3vw,44px);
display:flex;flex-direction:column;justify-content:flex-end;gap:14px;
}
.lx-eyebrow{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
color:var(--amber,#ffba00);
}
.lx-eyebrow span.lx-dot{width:5px;height:5px;border-radius:50%;background:var(--lx-ink-dim);}
.lx-eyebrow em{font-style:normal;color:var(--lx-ink-soft);letter-spacing:.12em;}
.lx-hero__subject{
font-size:clamp(.9rem,1.4vw,1.05rem);font-weight:800;color:var(--blue,#539ae0);
letter-spacing:.02em;
}
.lx-hero__title{
margin:0;font-size:clamp(1.6rem,3.6vw,2.85rem);line-height:1.06;font-weight:900;
letter-spacing:-.03em;color:#fff;text-wrap:balance;
text-shadow:0 4px 26px rgba(0,0,0,.55);
}
.lx-hero__meta{
margin:0;font-size:.92rem;color:var(--lx-ink-soft);display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.lx-hero__meta b{color:#fff;font-weight:700;}
.lx-hero__desc{
margin:0;max-width:52ch;font-size:.94rem;line-height:1.55;color:var(--lx-ink-soft);
}
.lx-resume{
display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
background:rgba(237,151,0,.16);border:1px solid rgba(255,186,0,.55);
color:var(--amber,#ffba00);font-size:.78rem;font-weight:800;letter-spacing:.06em;
padding:6px 12px;border-radius:999px;text-transform:uppercase;
}
.lx-resume::before{content:"⏱";font-size:.9rem;}
/* barra avanzamento hero */
.lx-hero__progress{display:flex;flex-direction:column;gap:7px;max-width:430px;}
.lx-bar{height:5px;border-radius:999px;background:rgba(255,255,255,.20);overflow:hidden;}
.lx-bar > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#ff5b3a,var(--orange,#ed9700));}
.lx-hero__progress small{font-size:.75rem;color:var(--lx-ink-dim);font-weight:600;letter-spacing:.04em;}
.lx-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px;}
.lx-btn{
appearance:none;cursor:pointer;font:inherit;font-weight:800;letter-spacing:-.01em;
border-radius:12px;padding:14px 26px;font-size:1rem;border:1px solid transparent;
display:inline-flex;align-items:center;gap:10px;
transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.lx-btn--play{
background:linear-gradient(180deg,var(--blue,#539ae0),var(--blue-deep,#254A87));
color:#fff;box-shadow:0 14px 30px -12px rgba(37,74,135,.95);
}
.lx-btn--play:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 40px -14px rgba(83,154,224,.95);}
.lx-btn--ghost{
background:rgba(255,255,255,.10);color:#fff;border-color:var(--lx-line-2);backdrop-filter:blur(4px);
}
.lx-btn--ghost:hover{background:rgba(255,255,255,.18);transform:translateY(-2px);}
/* mini locandina laterale dell'hero */
.lx-hero__aside{
position:relative;z-index:3;display:flex;align-items:center;justify-content:center;
padding:clamp(18px,2.4vw,38px);
}
.lx-hero__poster{
width:100%;max-width:340px;aspect-ratio:2/3;border-radius:var(--lx-r);
border:1px solid var(--lx-line-2);overflow:hidden;position:relative;
box-shadow:0 34px 60px -26px rgba(0,0,0,.9);
background:linear-gradient(160deg,#254A87,#0E151E 62%,#1d3a6b);
display:flex;flex-direction:column;justify-content:flex-end;padding:16px;
}
.lx-hero__poster::before{
content:"∫";position:absolute;inset:auto 0 auto 0;top:44%;transform:translateY(-50%);
text-align:center;font-size:210px;line-height:.7;color:#fff;opacity:.20;
}
.lx-hero__poster::after{
content:"";position:absolute;inset:0;
background:radial-gradient(120% 80% at 50% 0%,rgba(83,154,224,.35),transparent 60%),
linear-gradient(0deg,rgba(6,10,28,.9),transparent 62%);
}
.lx-hero__poster b,.lx-hero__poster i{position:relative;z-index:2;}
.lx-hero__poster b{font-size:.95rem;color:#fff;line-height:1.25;}
.lx-hero__poster i{font-style:normal;font-size:.74rem;color:var(--lx-ink-dim);margin-top:5px;letter-spacing:.08em;text-transform:uppercase;}
/* ---------- 3. RIGHE ORIZZONTALI ---------- */
.lx-shelf{margin-top:clamp(22px,3vw,38px);}
.lx-shelf__head{
display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
padding:0 clamp(16px,3.2vw,40px) 12px;
}
.lx-shelf__head h3{
margin:0;font-size:clamp(1.02rem,1.7vw,1.22rem);font-weight:800;color:var(--ink);letter-spacing:-.015em;
}
.lx-shelf__head span{font-size:.78rem;color:var(--muted);font-weight:600;}
.lx-row{
display:flex;gap:var(--lx-gap);
overflow-x:auto;overflow-y:hidden;
padding:8px clamp(16px,3.2vw,40px) 26px;
scroll-snap-type:x proximity;
scroll-padding-left:clamp(16px,3.2vw,40px);
scroll-behavior:smooth;
scrollbar-width:none;-ms-overflow-style:none;
overscroll-behavior-x:contain;
}
.lx-row::-webkit-scrollbar{display:none;height:0;}
.lx-card{
flex:0 0 var(--lx-card);width:var(--lx-card);
scroll-snap-align:start;
background:none;border:0;padding:0;margin:0;text-align:left;font:inherit;color:inherit;cursor:pointer;
display:flex;flex-direction:column;gap:9px;
transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
.lx-card:hover,.lx-card:focus-visible{transform:translateY(-6px) scale(1.045);z-index:5;}
.lx-card:hover .lx-poster,.lx-card:focus-visible .lx-poster{
border-color:rgba(255,255,255,.45);
box-shadow:0 26px 44px -18px rgba(0,0,0,.9),0 0 0 1px rgba(83,154,224,.55);
}
.lx-card:hover .lx-play,.lx-card:focus-visible .lx-play{opacity:1;transform:scale(1);}
.lx-card:hover .lx-poster__scrim,.lx-card:focus-visible .lx-poster__scrim{opacity:1;}
/* locandina 16:9 generata in CSS */
.lx-poster{
position:relative;aspect-ratio:16/9;border-radius:var(--lx-r);overflow:hidden;
border:1px solid var(--lx-line);
box-shadow:0 14px 26px -16px rgba(0,0,0,.85);
transition:box-shadow .26s ease,border-color .26s ease;
display:block;
}
/* trama + luce: le rende "curate" e non piatte */
.lx-poster::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(90% 120% at 84% 8%,rgba(255,255,255,.30),transparent 55%),
radial-gradient(70% 90% at 10% 96%,rgba(0,0,0,.45),transparent 60%),
repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 2px,transparent 2px 9px);
mix-blend-mode:soft-light;
}
.lx-poster__glyph{
position:absolute;inset:0;display:grid;place-items:center;
font-size:74px;line-height:1;font-weight:800;color:#fff;opacity:.36;
text-shadow:0 8px 28px rgba(0,0,0,.55);letter-spacing:-.04em;
transform:translateY(-6%);user-select:none;
}
.lx-poster__glyph--txt{font-size:52px;letter-spacing:.02em;}
.lx-poster__tag{
position:absolute;left:10px;top:9px;z-index:3;
font-size:.6rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
color:#fff;background:rgba(6,10,28,.55);border:1px solid rgba(255,255,255,.22);
padding:4px 8px;border-radius:6px;backdrop-filter:blur(3px);
}
.lx-poster__scrim{
position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .26s ease;
background:linear-gradient(0deg,rgba(4,7,20,.72),rgba(4,7,20,.10) 60%);
}
.lx-play{
position:absolute;z-index:4;left:50%;top:50%;margin:-23px 0 0 -23px;
width:46px;height:46px;border-radius:50%;
display:grid;place-items:center;font-size:1rem;color:#0E151E;
background:#fff;box-shadow:0 10px 22px -8px rgba(0,0,0,.9);
opacity:0;transform:scale(.7);transition:opacity .22s ease,transform .22s ease;
}
/* badge angolo */
.lx-badge{
position:absolute;right:9px;top:9px;z-index:4;
font-size:.6rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
padding:4px 8px;border-radius:6px;color:#1b1200;
background:linear-gradient(180deg,var(--amber,#ffba00),var(--orange,#ed9700));
box-shadow:0 6px 14px -6px rgba(237,151,0,.9);
}
.lx-badge--exam{
background:rgba(46,158,91,.92);color:#fff;letter-spacing:.08em;
box-shadow:0 6px 14px -6px rgba(46,158,91,.9);
}
.lx-badge--left{right:auto;left:9px;}
/* riga tempo rimanente + progresso */
.lx-remain{
position:absolute;left:9px;bottom:14px;z-index:4;
font-size:.66rem;font-weight:800;color:#fff;
background:rgba(6,10,28,.72);border:1px solid rgba(255,255,255,.16);
padding:3px 8px;border-radius:999px;
}
.lx-progress{
position:absolute;left:0;right:0;bottom:0;z-index:4;height:4px;background:rgba(255,255,255,.22);
}
.lx-progress > i{display:block;height:100%;background:linear-gradient(90deg,#ff4d3d,var(--orange,#ed9700));}
/* numerazione "Ep." e "Top 10" */
.lx-ep{
position:absolute;left:10px;bottom:9px;z-index:4;
font-size:.68rem;font-weight:900;letter-spacing:.1em;color:#fff;
background:linear-gradient(180deg,var(--blue,#539ae0),var(--blue-deep,#254A87));
padding:4px 9px;border-radius:7px;box-shadow:0 6px 14px -7px rgba(37,74,135,.95);
}
.lx-card--rank{--lx-card:250px;align-items:stretch;}
.lx-card--rank .lx-rankwrap{display:flex;align-items:stretch;gap:2px;}
.lx-rank{
flex:0 0 58px;display:grid;place-items:center;
font-size:76px;font-weight:900;line-height:1;color:transparent;
/* Numero cavo (solo contorno) sul fondo pagina adattivo: il tratto era un
bianco trasparente pensato per lo scuro, invisibile in chiaro. */
-webkit-text-stroke:2px var(--lx-rank-stroke);
text-shadow:0 6px 18px rgba(0,0,0,.5);user-select:none;
}
.lx-card--rank .lx-poster{flex:1 1 auto;}
/* testo card: sotto la locandina, sul fondo pagina adattivo (--lx-wash), non
sull'immagine. Segue il tema come il resto della cornice. */
.lx-card__title{
font-size:.88rem;font-weight:700;color:var(--ink);line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.lx-card__sub{
font-size:.74rem;color:var(--muted);font-weight:600;letter-spacing:.02em;
display:flex;gap:6px;align-items:center;
}
.lx-card__sub b{color:var(--blue-text);font-weight:800;}
.lx-card__sub i{font-style:normal;opacity:.6;}
/* ---------- gradienti per materia ---------- */
.lx-p--mat{background:linear-gradient(140deg,#132744 0%,#254A87 55%,#539ae0 120%);}
.lx-p--fis{background:linear-gradient(140deg,#111a48 0%,#3b2a8f 50%,#8a5cff 118%);}
.lx-p--ita{background:linear-gradient(140deg,#3b1d10 0%,#a45a11 52%,#ffba00 120%);}
.lx-p--eng{background:linear-gradient(140deg,#0c2c33 0%,#0f6b74 52%,#3fd0c9 122%);}
.lx-p--sto{background:linear-gradient(140deg,#2a1420 0%,#7a2540 52%,#e0708f 122%);}
.lx-p--sci{background:linear-gradient(140deg,#08281c 0%,#2e9e5b 56%,#8fe6a6 124%);}
.lx-p--fil{background:linear-gradient(140deg,#191423 0%,#4a3b7a 52%,#a596d8 122%);}
.lx-p--lat{background:linear-gradient(140deg,#231a10 0%,#6d4f26 52%,#d3b374 122%);}
/* ---------- responsive ---------- */
@media (max-width:1080px){ #view-lezioni{--lx-card:190px;} .lx-hero{min-height:340px;} }
@media (max-width:900px){
.lx-hero{grid-template-columns:1fr;}
.lx-hero__aside{display:none;}
}
@media (max-width:760px){
#view-lezioni{--lx-card:164px;--lx-gap:11px;}
.lx-hero{min-height:0;margin-inline:12px;border-radius:var(--lx-r);}
.lx-hero__body{padding:18px 16px 20px;gap:11px;}
.lx-hero__glyph{font-size:230px;right:-6%;opacity:.11;}
.lx-hero__title{font-size:1.45rem;}
.lx-hero__desc{display:none;}
.lx-hero__meta{font-size:.8rem;}
.lx-actions{gap:9px;}
.lx-btn{flex:1 1 auto;justify-content:center;padding:12px 16px;font-size:.92rem;}
.lx-card--rank{--lx-card:210px;}
.lx-rank{flex-basis:42px;font-size:56px;}
.lx-poster__glyph{font-size:58px;}
.lx-poster__glyph--txt{font-size:40px;}
/* .lx-poster__tag (nome materia, angolo alto sinistra) e .lx-badge (badge
"Esame"/"Nuovo", angolo alto destra) sono due elementi assoluti
indipendenti: sulla card ridotta a 164px, un nome materia lungo come
"Storia dell'arte" arriva a toccare e coprire il badge. Qui il nome
tronca con ellissi invece di scontrarsi col badge. */
.lx-poster__tag{max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lx-topbar{padding-inline:16px;}
}
/* ---------- accessibilità movimento ---------- */
@media (prefers-reduced-motion:reduce){
#view-lezioni *,#view-lezioni *::before,#view-lezioni *::after{
transition-duration:.001ms !important;animation-duration:.001ms !important;animation-iteration-count:1 !important;
}
.lx-row{scroll-behavior:auto;}
.lx-card:hover,.lx-card:focus-visible{transform:none;}
.lx-card:hover .lx-play,.lx-card:focus-visible .lx-play{opacity:1;transform:none;}
.lx-btn--play:hover,.lx-btn--ghost:hover,.lx-back:hover{transform:none;}
}
#view-analytics[hidden]{display:none !important}
#view-analytics{
background:var(--bg);
color:var(--ink);
border-radius:14px;
padding:28px;
font-family:inherit;
box-sizing:border-box;
}
#view-analytics *{box-sizing:border-box}
#view-analytics :where(button,a){font-family:inherit}
#view-analytics :focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.an-header{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:flex-end;
gap:16px;
margin-bottom:24px;
}
.an-header h2{margin:0 0 4px;font-size:22px;font-weight:650;letter-spacing:-.01em}
.an-header p{margin:0;color:var(--muted);font-size:13.5px}
.an-segmented{
display:inline-flex;
background:var(--surface);
border:1px solid var(--line);
border-radius:10px;
padding:3px;
gap:2px;
}
.an-segmented button{
appearance:none;border:0;background:transparent;color:var(--muted);
font-size:13px;padding:7px 14px;border-radius:8px;cursor:pointer;
transition:background .15s,color .15s;
}
.an-segmented button[aria-pressed="true"]{background:var(--blue);color:#0E151E;font-weight:600}
.an-segmented button:not([aria-pressed="true"]):hover{color:var(--ink)}
.an-kpi-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
margin-bottom:20px;
}
.an-kpi-card{
background:var(--surface);
border:1px solid var(--line);
border-radius:14px;
padding:18px;
}
.an-kpi-label{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.an-kpi-value{font-size:26px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.an-kpi-delta{font-size:12.5px;margin-top:6px;font-variant-numeric:tabular-nums}
.an-kpi-delta.is-positive{color:var(--green-text)}
.an-kpi-sub{font-size:12px;color:var(--muted);margin-top:4px}
.an-kpi-progress{
margin-top:10px;height:6px;border-radius:4px;background:var(--surface-2);overflow:hidden;
}
.an-kpi-progress > span{display:block;height:100%;background:var(--blue);border-radius:4px}
.an-card{
background:var(--surface);
border:1px solid var(--line);
border-radius:14px;
padding:22px;
margin-bottom:20px;
}
.an-card h3{margin:0 0 4px;font-size:15.5px;font-weight:600}
.an-card .an-card-sub{margin:0 0 18px;font-size:12.5px;color:var(--muted)}
.an-chart-wrap{
position:relative;
height:220px;
margin:0 8px 8px;
}
.an-goal-line{
position:absolute;
left:0;right:0;
border-top:1px dashed var(--muted);
opacity:.6;
}
.an-goal-line span{
position:absolute;right:0;top:-18px;
font-size:11px;color:var(--muted);
background:var(--surface);padding:0 4px;
}
.an-bars{
position:relative;
height:100%;
display:flex;
align-items:flex-end;
gap:14px;
padding-top:26px;
}
.an-bar-col{
flex:1;
height:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-end;
}
.an-bar-value{
font-size:11.5px;
color:var(--muted);
margin-bottom:6px;
font-variant-numeric:tabular-nums;
}
.an-bar{
width:100%;
max-width:34px;
border-radius:6px 6px 3px 3px;
background:var(--blue-deep);
transition:filter .15s;
}
.an-bar-col:hover .an-bar{filter:brightness(1.15)}
.an-bar--today .an-bar{background:var(--blue)}
.an-bar--today .an-bar-value{color:var(--ink);font-weight:600}
.an-bar-day{margin-top:8px;font-size:12px;color:var(--muted)}
.an-insight{
margin-top:16px;
font-size:13px;
color:var(--muted);
padding-top:14px;
border-top:1px solid var(--line);
}
.an-insight strong{color:var(--ink);font-weight:600}
.an-grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}
.an-subject-row{
display:grid;
grid-template-columns:96px 1fr 44px;
align-items:center;
gap:10px;
margin-bottom:12px;
font-size:13px;
}
.an-subject-row:last-child{margin-bottom:0}
.an-subject-track{
height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden;
}
.an-subject-track > span{display:block;height:100%;border-radius:4px}
.an-subject-pct{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12.5px}
.an-heatmap-head,.an-heatmap-row{
display:grid;
grid-template-columns:64px repeat(7,1fr);
gap:6px;
align-items:center;
}
.an-heatmap-head{margin-bottom:8px}
.an-heatmap-head span{font-size:11px;color:var(--muted);text-align:center}
.an-heatmap-head span:first-child{text-align:left}
.an-heatmap-row{margin-bottom:6px}
.an-heatmap-row .an-heat-label{font-size:12px;color:var(--muted)}
.an-heat-cell{
height:22px;
border-radius:5px;
background:var(--blue);
}
.an-heat-legend{
display:flex;align-items:center;gap:8px;
margin-top:14px;font-size:11.5px;color:var(--muted);
}
.an-heat-legend .an-heat-gradient{
flex:1;max-width:120px;height:8px;border-radius:4px;
background:linear-gradient(90deg, rgba(83,154,224,.08), rgba(83,154,224,1));
}
.an-final-card .an-final-numbers{
display:flex;
gap:32px;
margin-bottom:14px;
flex-wrap:wrap;
}
.an-final-numbers div{display:flex;flex-direction:column}
.an-final-numbers strong{font-size:28px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.an-final-numbers span{font-size:12.5px;color:var(--muted);margin-top:2px}
.an-final-card p{margin:0;font-size:13.5px;color:var(--ink);line-height:1.5}
.an-final-card p strong{color:var(--green-text);font-weight:650}
@media (max-width:760px){
.an-kpi-grid{grid-template-columns:repeat(2,1fr)}
.an-grid-2{grid-template-columns:1fr}
.an-heatmap-head,.an-heatmap-row{grid-template-columns:44px repeat(7,1fr)}
}
@media (max-width:480px){
.an-kpi-grid{grid-template-columns:1fr}
.an-header{align-items:flex-start}
}
#view-career[hidden]{display:none !important}
#view-career{
background:var(--bg);
color:var(--ink);
border-radius:14px;
padding:28px;
font-family:inherit;
box-sizing:border-box;
}
#view-career *{box-sizing:border-box}
#view-career :focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ca-header{margin-bottom:24px}
.ca-header h2{margin:0 0 4px;font-size:22px;font-weight:650;letter-spacing:-.01em}
.ca-header p{margin:0;color:var(--muted);font-size:13.5px}
.ca-card{
background:var(--surface);
border:1px solid var(--line);
border-radius:14px;
padding:22px;
margin-bottom:20px;
}
.ca-card h3{margin:0 0 4px;font-size:15.5px;font-weight:600}
.ca-card .ca-card-sub{margin:0 0 18px;font-size:12.5px;color:var(--muted)}
.ca-profile-row{
display:grid;
grid-template-columns:150px 1fr 34px;
align-items:center;
gap:12px;
margin-bottom:14px;
font-size:13px;
}
.ca-profile-row:last-child{margin-bottom:0}
.ca-profile-track{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.ca-profile-track > span{display:block;height:100%;border-radius:4px;background:var(--blue)}
.ca-profile-val{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12.5px}
.ca-paths-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-bottom:20px;
}
.ca-path-card{
background:var(--surface);
border:1px solid var(--line);
border-radius:14px;
padding:20px;
display:flex;
flex-direction:column;
}
.ca-mono{
width:40px;height:40px;
border-radius:9px;
display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:14px;color:#0E151E;
margin-bottom:14px;
letter-spacing:.02em;
}
.ca-path-card h4{margin:0 0 10px;font-size:15px;font-weight:620}
.ca-path-compat{
display:flex;align-items:center;gap:8px;margin-bottom:12px;
}
.ca-path-compat .ca-profile-track{flex:1}
.ca-path-compat span:last-child{
font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:32px;text-align:right;
}
.ca-path-card p{
margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--muted);flex:1;
}
.ca-path-card a{
font-size:13px;color:var(--blue-text);text-decoration:none;font-weight:600;
align-self:flex-start;
}
.ca-path-card a:hover{text-decoration:underline}
.ca-steps{list-style:none;margin:0;padding:0}
.ca-steps li{
display:flex;align-items:flex-start;gap:12px;
padding:10px 0;font-size:13.5px;
border-bottom:1px solid var(--line);
}
.ca-steps li:last-child{border-bottom:0}
.ca-dot{
width:16px;height:16px;flex:0 0 16px;
margin-top:1px;
border-radius:50%;
border:1.5px solid var(--muted);
}
.ca-cta{
background:var(--surface-2);
border:1px solid var(--line);
border-radius:14px;
padding:20px 22px;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:16px;
}
.ca-cta p{margin:0;font-size:13.5px;max-width:420px;color:#eef2ff}
.ca-cta-actions{display:flex;gap:10px;flex-wrap:wrap}
.ca-btn{
appearance:none;border:0;border-radius:9px;
font-size:13.5px;font-weight:600;
padding:11px 18px;cursor:pointer;
font-family:inherit;
}
.ca-btn-primary{background:var(--blue);color:#0E151E}
.ca-btn-primary:hover{filter:brightness(1.08)}
.ca-btn-secondary{
background:transparent;
color:var(--ink);
border:1px solid var(--line);
}
.ca-btn-secondary:hover{background:var(--surface-2)}
@media (max-width:760px){
.ca-paths-grid{grid-template-columns:1fr}
.ca-profile-row{grid-template-columns:110px 1fr 30px}
.ca-cta{flex-direction:column;align-items:flex-start}
}
#view-classifiche[hidden]{display:none !important}
#view-classifiche{
/* --cl-blue/--cl-blue-deep sono la palette di marca, invariata nei due temi.
--cl-bg/--cl-panel/--cl-panel-2 puntano ai token reattivi del guscio (i
loro valori scuri coincidono esattamente con --bg/--surface/--surface-2):
seguono il tema automaticamente, nessuna ridefinizione scura necessaria.
--cl-line/--cl-ink/--cl-ink-2/--cl-silver/--cl-bronze/--cl-red restano
invece locali: qui sotto i valori chiari, ridefiniti per lo scuro nei due
blocchi tema in fondo a :root (stesso schema del guscio). */
--cl-blue:#539ae0; --cl-blue-deep:#254A87;
--cl-bg:var(--bg); --cl-panel:var(--surface); --cl-panel-2:var(--surface-2);
--cl-line:#c9e2ec; --cl-ink:#212327; --cl-ink-2:#676d7e;
--cl-silver:#566173; --cl-bronze:#8a5423; --cl-red:#b3261e;
--r:14px;
background:var(--cl-bg); color:var(--cl-ink);
padding:26px 22px 40px;
border-radius:14px;
font-family:inherit;
-webkit-font-smoothing:antialiased;
}
#view-classifiche *{box-sizing:border-box}
#view-classifiche h1,#view-classifiche h2,#view-classifiche h3,#view-classifiche p{margin:0}
#view-classifiche button{font:inherit;color:inherit;cursor:pointer}
#view-classifiche :focus-visible{outline:2px solid var(--cl-blue);outline-offset:2px;border-radius:6px}
.cl-wrap{max-width:1080px;margin:0 auto;display:grid;gap:20px}
/* head */
.cl-head h1{font-size:26px;font-weight:650;letter-spacing:-.02em}
.cl-head p{margin-top:6px;font-size:13px;color:var(--cl-ink-2)}
/* leagues */
.cl-leagues{background:var(--cl-panel);border:1px solid var(--cl-line);border-radius:var(--r);padding:16px}
.cl-leagues-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.cl-league{flex:1 0 auto;min-width:118px;background:var(--cl-panel-2);border:1px solid var(--cl-line);
border-radius:12px;padding:12px 14px;display:grid;gap:6px;text-align:left}
.cl-league-n{font-size:11px;color:var(--cl-ink-2);letter-spacing:.09em;text-transform:uppercase}
.cl-league-t{font-size:15px;font-weight:600}
.cl-league.is-current{background:linear-gradient(180deg,rgba(83,154,224,.20),rgba(83,154,224,.05));
border-color:var(--cl-blue);box-shadow:inset 0 0 0 1px rgba(83,154,224,.25)}
.cl-league.is-current .cl-league-n{color:var(--blue-text)}
.cl-league.is-done{opacity:.55}
.cl-league.is-lock .cl-league-t{color:var(--cl-ink-2)}
.cl-rule{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
border-top:1px solid var(--cl-line);padding-top:13px;font-size:12.5px;color:var(--cl-ink-2)}
.cl-rule b{color:var(--cl-ink);font-weight:600}
.cl-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.cl-dot--up{background:var(--green)}
.cl-dot--down{background:var(--cl-red)}
/* avatars */
.cl-av{border-radius:50%;display:grid;place-items:center;font-weight:650;color:#fff;
letter-spacing:.02em;flex:0 0 auto;border:1px solid rgba(255,255,255,.18)}
.cl-av--s{width:34px;height:34px;font-size:12.5px}
.cl-av--m{width:52px;height:52px;font-size:17px}
.cl-av--l{width:64px;height:64px;font-size:21px}
.cl-av--blue{background:linear-gradient(145deg,#539ae0,#2f6fae)}
.cl-av--deep{background:linear-gradient(145deg,#3a6cb5,#1b3a6b)}
.cl-av--green{background:linear-gradient(145deg,#3fb673,#1f7643)}
.cl-av--orange{background:linear-gradient(145deg,#ffba00,#d97d00)}
.cl-av--violet{background:linear-gradient(145deg,#8a78b8,#6b5b95)}
.cl-av--teal{background:linear-gradient(145deg,#159aa4,#0f6b74)}
/* podium */
.cl-podium{background:var(--cl-panel);border:1px solid var(--cl-line);border-radius:var(--r);padding:22px 18px 0}
.cl-podium-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.cl-podium-h h2{font-size:15px;font-weight:600}
.cl-podium-h span{font-size:12px;color:var(--cl-ink-2)}
.cl-stage{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end}
.cl-step{display:grid;justify-items:center;gap:10px}
.cl-step-card{display:grid;justify-items:center;gap:7px;text-align:center}
.cl-step-name{font-size:13.5px;font-weight:600}
.cl-step-xp{font-size:12px;color:var(--cl-ink-2);font-variant-numeric:tabular-nums}
.cl-medal{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--cl-bg);border:2px solid}
.cl-medal--1{border-color:var(--amber);color:var(--amber-text)}
.cl-medal--2{border-color:var(--cl-silver);color:var(--cl-silver)}
.cl-medal--3{border-color:var(--cl-bronze);color:var(--cl-bronze)}
.cl-plinth{width:100%;border-radius:12px 12px 0 0;border:1px solid var(--cl-line);border-bottom:none;
display:grid;place-items:start center;padding-top:12px;font-size:26px;font-weight:700;
font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cl-plinth--1{height:132px;background:linear-gradient(180deg,rgba(255,186,0,.20),rgba(255,186,0,.02));
border-color:rgba(255,186,0,.42);color:var(--amber-text)}
.cl-plinth--2{height:98px;background:linear-gradient(180deg,rgba(83,154,224,.22),rgba(83,154,224,.03));
border-color:var(--cl-blue);color:var(--blue-text)}
.cl-plinth--3{height:74px;background:linear-gradient(180deg,rgba(201,138,75,.18),rgba(201,138,75,.02));
border-color:rgba(201,138,75,.42);color:var(--cl-bronze)}
.cl-you{font-size:10.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
color:var(--blue-text);border:1px solid var(--cl-blue);border-radius:999px;padding:2px 8px}
/* table */
.cl-table{background:var(--cl-panel);border:1px solid var(--cl-line);border-radius:var(--r);overflow:hidden}
.cl-table-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
padding:16px 18px;border-bottom:1px solid var(--cl-line)}
.cl-table-h h2{font-size:15px;font-weight:600}
.cl-table-h span{font-size:12px;color:var(--cl-ink-2)}
.cl-row{display:grid;grid-template-columns:38px 34px minmax(0,1fr) auto auto 54px;gap:12px;
align-items:center;padding:11px 18px;border-bottom:1px solid var(--cl-line)}
.cl-row:last-child{border-bottom:none}
.cl-pos{font-size:14px;font-weight:600;color:var(--cl-ink-2);font-variant-numeric:tabular-nums;text-align:center}
.cl-nm{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.cl-nm b{font-size:13.5px;font-weight:600}
.cl-chip{font-size:10.5px;color:var(--cl-ink-2);border:1px solid var(--cl-line);border-radius:999px;
padding:2px 8px;background:var(--cl-panel-2);white-space:nowrap}
.cl-xpc{font-size:13px;font-variant-numeric:tabular-nums;color:var(--cl-ink);white-space:nowrap}
.cl-tr{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.cl-tr--up{color:var(--green-text)}
.cl-tr--down{color:var(--cl-red)}
.cl-tr--eq{color:var(--cl-ink-2)}
.cl-row--me{background:linear-gradient(90deg,rgba(83,154,224,.14),rgba(83,154,224,.03));
box-shadow:inset 2px 0 0 var(--cl-blue),inset 0 0 0 1px rgba(83,154,224,.32)}
.cl-row--me .cl-pos{color:var(--blue-text)}
.cl-row--drop{background:linear-gradient(90deg,rgba(224,90,90,.11),rgba(224,90,90,.02));
box-shadow:inset 2px 0 0 rgba(224,90,90,.6)}
.cl-zone{padding:9px 18px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
color:var(--cl-red);background:rgba(224,90,90,.07);border-top:1px solid rgba(224,90,90,.2);
border-bottom:1px solid rgba(224,90,90,.2)}
/* badges */
.cl-badges{background:var(--cl-panel);border:1px solid var(--cl-line);border-radius:var(--r);padding:18px}
.cl-badges-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.cl-badges-h h2{font-size:15px;font-weight:600}
.cl-badges-h span{font-size:12px;color:var(--cl-ink-2)}
.cl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cl-badge{background:var(--cl-panel-2);border:1px solid var(--cl-line);border-radius:12px;padding:16px;
display:grid;grid-template-columns:58px minmax(0,1fr);gap:14px;align-items:center}
.cl-hex{width:58px;height:64px;display:grid;place-items:center;font-size:15px;font-weight:700;
letter-spacing:-.01em;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.cl-badge-t{font-size:13px;font-weight:600;line-height:1.3}
.cl-badge-s{margin-top:5px;font-size:11.5px;color:var(--cl-ink-2);line-height:1.4}
.cl-badge--amber .cl-hex{background:linear-gradient(160deg,#ffba00,#c47f00);color:#1c1405}
.cl-badge--amber{border-color:rgba(255,186,0,.45)}
.cl-badge--green .cl-hex{background:linear-gradient(160deg,#3fb673,#1c6c3d);color:#04180c}
.cl-badge--green{border-color:rgba(46,158,91,.5)}
.cl-badge--blue .cl-hex{background:linear-gradient(160deg,#539ae0,#254A87);color:#eaf3ff}
.cl-badge--blue{border-color:rgba(83,154,224,.5)}
.cl-badge--off{opacity:.72}
.cl-badge--off .cl-hex{background:var(--cl-panel-2);color:var(--cl-ink-2);
box-shadow:inset 0 0 0 1px var(--cl-line)}
.cl-lock{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cl-ink-2)}
.cl-mini{margin-top:7px;height:5px;border-radius:99px;background:var(--cl-panel-2);overflow:hidden}
.cl-mini i{display:block;height:100%;border-radius:99px;background:var(--cl-ink-2)}
/* xp card */
.cl-xp{background:linear-gradient(120deg,var(--cl-blue-deep),#132744 62%);
border:1px solid rgba(83,154,224,.4);border-radius:var(--r);padding:20px;
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center}
.cl-xp-k{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#a9c6ea}
.cl-xp-v{margin-top:6px;font-size:32px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cl-xp-v small{font-size:14px;font-weight:600;color:#a9c6ea;letter-spacing:0}
.cl-bar{margin-top:14px;height:9px;border-radius:99px;background:rgba(0,0,0,.32);overflow:hidden}
.cl-bar i{display:block;height:100%;border-radius:99px;
background:linear-gradient(90deg,var(--cl-blue),var(--amber))}
.cl-bar-l{margin-top:8px;display:flex;justify-content:space-between;gap:12px;font-size:11.5px;
color:#a9c6ea;font-variant-numeric:tabular-nums}
.cl-week{text-align:right;border-left:1px solid rgba(255,255,255,.14);padding-left:20px}
.cl-week b{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;color:var(--amber)}
.cl-week span{font-size:11.5px;color:#a9c6ea}
@media (max-width:760px){
#view-classifiche{padding:20px 14px 32px}
.cl-grid{grid-template-columns:1fr}
.cl-row{grid-template-columns:30px 34px minmax(0,1fr) auto;row-gap:6px;padding:12px 14px}
.cl-row .cl-xpc{grid-column:3;justify-self:start}
.cl-row .cl-tr{grid-column:4}
.cl-xp{grid-template-columns:1fr}
.cl-week{text-align:left;border-left:none;border-top:1px solid rgba(255,255,255,.14);padding:16px 0 0}
.cl-plinth--1{height:110px}.cl-plinth--2{height:84px}.cl-plinth--3{height:64px}
.cl-av--l{width:52px;height:52px;font-size:17px}
.cl-av--m{width:44px;height:44px;font-size:15px}
.cl-step-name{font-size:12.5px}
}
#view-social[hidden]{display:none !important}
#view-social{
--so-blue:#539ae0;
--so-bg:var(--bg); --so-panel:var(--surface); --so-panel-2:var(--surface-2);
--so-line:#c9e2ec; --so-ink:#212327; --so-ink-2:#676d7e;
--r:14px;
background:var(--so-bg); color:var(--so-ink);
padding:26px 22px 40px;
border-radius:14px;
font-family:inherit;
-webkit-font-smoothing:antialiased;
}
#view-social *{box-sizing:border-box}
#view-social h1,#view-social h2,#view-social h3,#view-social p{margin:0}
#view-social button{font:inherit;cursor:pointer}
#view-social :focus-visible{outline:2px solid var(--so-blue);outline-offset:2px;border-radius:6px}
.so-wrap{max-width:1080px;margin:0 auto}
.so-head h1{font-size:26px;font-weight:650;letter-spacing:-.02em}
.so-head p{margin-top:6px;font-size:13px;color:var(--so-ink-2)}
.so-grid{margin-top:20px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.so-col{display:grid;gap:14px;min-width:0}
/* avatars */
.so-av{border-radius:50%;display:grid;place-items:center;font-weight:650;color:#fff;flex:0 0 auto;
border:1px solid rgba(255,255,255,.18)}
.so-av--s{width:32px;height:32px;font-size:12px}
.so-av--m{width:40px;height:40px;font-size:13.5px}
.so-av--blue{background:linear-gradient(145deg,#539ae0,#2f6fae)}
.so-av--deep{background:linear-gradient(145deg,#3a6cb5,#1b3a6b)}
.so-av--green{background:linear-gradient(145deg,#3fb673,#1f7643)}
.so-av--orange{background:linear-gradient(145deg,#ffba00,#d97d00)}
.so-av--violet{background:linear-gradient(145deg,#8a78b8,#6b5b95)}
.so-av--teal{background:linear-gradient(145deg,#159aa4,#0f6b74)}
/* composer */
.so-composer{background:var(--so-panel);border:1px solid var(--so-line);border-radius:var(--r);padding:14px;
display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center}
.so-fakeinput{background:var(--so-bg);border:1px solid var(--so-line);border-radius:10px;padding:11px 14px;
font-size:13px;color:var(--so-ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so-btn{border-radius:10px;padding:10px 16px;font-size:13px;font-weight:600;border:1px solid transparent;
background:var(--so-blue);color:#08131f}
.so-btn:disabled{background:var(--so-panel-2);color:var(--so-ink-2);border-color:var(--so-line);cursor:not-allowed}
.so-btn--ghost{background:transparent;color:var(--so-ink);border-color:var(--so-line)}
.so-btn--sm{padding:7px 12px;font-size:12px;border-radius:9px}
/* posts */
.so-post{background:var(--so-panel);border:1px solid var(--so-line);border-radius:var(--r);padding:16px}
.so-post-h{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:start}
.so-name{font-size:13.5px;line-height:1.45}
.so-name b{font-weight:650}
.so-name span{color:var(--so-ink-2)}
.so-time{font-size:11.5px;color:var(--so-ink-2);white-space:nowrap}
.so-body{margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--so-ink)}
.so-body p+p{margin-top:8px}
.so-quote{margin-top:12px;background:var(--so-panel-2);border:1px solid var(--so-line);border-left:2px solid var(--so-blue);
border-radius:10px;padding:12px 14px;font-size:13px;color:var(--so-ink)}
.so-quote small{display:block;margin-top:5px;font-size:11.5px;color:var(--so-ink-2)}
.so-score{display:inline-flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.so-score b{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--green)}
.so-score span{font-size:12px;color:var(--so-ink-2)}
.so-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--so-line);
display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.so-acts{display:flex;gap:6px;flex-wrap:wrap}
.so-link{background:none;border:none;padding:5px 2px;font-size:12.5px;color:var(--so-ink-2);font-weight:600}
.so-link:hover{color:var(--so-ink)}
.so-sep{color:var(--so-ink-2);font-size:12.5px;align-self:center}
.so-meta{font-size:12px;color:var(--so-ink-2);font-variant-numeric:tabular-nums}
.so-tag{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--so-ink-2);
border:1px solid var(--so-line);border-radius:999px;padding:3px 9px;background:var(--so-panel-2)}
.so-post--pin{border-color:var(--orange);background:linear-gradient(180deg,rgba(237,151,0,.12),var(--so-panel) 55%)}
.so-post--pin .so-pin{color:var(--orange-text);border-color:rgba(237,151,0,.5)}
.so-pinrow{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.so-post--live{border-color:rgba(83,154,224,.45)}
.so-when{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.so-when span{font-size:12px;color:var(--so-ink);background:var(--so-panel-2);border:1px solid var(--so-line);
border-radius:9px;padding:7px 11px;font-variant-numeric:tabular-nums}
/* sidebar */
.so-card{background:var(--so-panel);border:1px solid var(--so-line);border-radius:var(--r);overflow:hidden}
.so-card-h{padding:14px 16px;border-bottom:1px solid var(--so-line);display:flex;
justify-content:space-between;align-items:baseline;gap:10px}
.so-card-h h2{font-size:13px;font-weight:650}
.so-card-h span{font-size:11.5px;color:var(--so-ink-2);font-variant-numeric:tabular-nums}
.so-line-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:11px;align-items:center;
padding:10px 16px;border-bottom:1px solid var(--so-line)}
.so-line-row:last-child{border-bottom:none}
.so-line-t{font-size:12.5px;font-weight:600;line-height:1.35}
.so-line-s{font-size:11.5px;color:var(--so-ink-2);margin-top:2px}
.so-avwrap{position:relative;width:32px;height:32px}
.so-on{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;
background:var(--green);border:2px solid var(--so-panel)}
.so-find{padding:16px;display:grid;gap:10px}
.so-find p{font-size:12.5px;color:var(--so-ink-2);line-height:1.5}
.so-find h2{font-size:13px;font-weight:650;color:var(--so-ink)}
@media (max-width:760px){
#view-social{padding:20px 14px 32px}
.so-grid{grid-template-columns:1fr}
.so-composer{grid-template-columns:minmax(0,1fr);gap:10px}
.so-composer .so-av{display:none}
.so-btn{width:100%}
.so-post-h{grid-template-columns:40px minmax(0,1fr);row-gap:4px}
.so-time{grid-column:2}
.so-foot{flex-direction:column;align-items:flex-start}
}
/* ===================== VISTA PODCAST (stile Spotify) ===================== */
#view-podcast[hidden]{display:none !important;}
#view-podcast{
/* --pd-bg/--pd-panel puntano ai token reattivi del guscio (valori scuri
identici a --bg/--surface): seguono il tema da soli. --pd-ink/--pd-dim/
--pd-soft restano locali: valori chiari qui, ridefiniti per lo scuro
(agli stessi valori di sempre) nei due blocchi tema in fondo a :root.
L'hero con la copertina (.pd-hero, .pd-cover) e la barra player fissa
(.pd-playerbar) sono "schermo": restano scuri a colori letterali propri,
non seguono questi token. */
--pd-bg:var(--bg);
--pd-panel:var(--surface);
--pd-ink:#212327;
--pd-dim:#676d7e;
--pd-soft:#454c59;
position:relative;
max-width:1120px;
margin:0 auto 64px;
color:var(--pd-ink);
background:var(--pd-bg);
border-radius:var(--radius);
overflow:hidden;
padding-bottom:110px; /* spazio per la barra player fissa */
}
#view-podcast :focus-visible{outline:3px solid var(--amber,#ffba00);outline-offset:2px;border-radius:10px;}
/* hero con copertina */
.pd-hero{
display:flex;align-items:flex-end;gap:24px;
padding:clamp(24px,4vw,48px) clamp(18px,3vw,40px) 24px;
/* Sfumatura autonoma, sempre scura: e' la cornice della copertina (schermo),
non deve sbiadire verso il chiaro insieme al resto della pagina. L'ultimo
stop era var(--pd-bg): ora che --pd-bg segue il tema, va scollegato con
un colore letterale identico al vecchio valore scuro. */
background:linear-gradient(180deg, #254A87 0%, #132744 46%, #0E151E 100%);
/* Riga di separazione netta dalla pagina sotto (ora chiara in tema chiaro):
senza, il taglio fra l'hero scuro e il contenuto chiaro sotto sembra un
difetto invece di una scelta. */
box-shadow:0 1px 0 rgba(0,0,0,0.35);
}
.pd-cover{
flex:0 0 auto;
width:clamp(120px,16vw,190px);aspect-ratio:1/1;border-radius:10px;
background:linear-gradient(150deg,#254A87 0%,#0d1330 62%,#539ae0 130%);
border:1px solid rgba(255,255,255,0.18);
box-shadow:0 24px 50px rgba(0,0,0,0.55);
display:flex;flex-direction:column;justify-content:flex-end;
padding:14px;position:relative;overflow:hidden;
}
.pd-cover span{
position:absolute;inset:0;display:grid;place-items:center;
font-size:110px;font-weight:800;color:#fff;opacity:0.18;
}
.pd-cover b{position:relative;font-size:1.05rem;font-weight:900;letter-spacing:0.08em;color:#fff;}
.pd-cover i{
position:relative;font-style:normal;font-size:0.52rem;font-weight:800;
letter-spacing:0.12em;color:#ffba00;text-transform:uppercase;
background:rgba(6,10,28,0.6);padding:3px 6px;border-radius:4px;align-self:flex-start;margin-top:4px;
}
.pd-hero-meta{min-width:0;}
.pd-hero-meta small{
/* Testo sopra la copertina, che resta scura sempre: colore letterale, non
il token --pd-soft (quello ora segue il tema per la lista sotto). */
font-size:0.78rem;font-weight:700;color:#b9c4e8;
}
.pd-hero-meta h2{
margin:6px 0 8px;font-size:clamp(1.5rem,3.4vw,2.5rem);font-weight:900;
letter-spacing:-0.03em;color:#fff;line-height:1.05;
}
.pd-author{font-size:0.92rem;font-weight:700;color:#eef2ff;} /* sull'hero scuro, colore letterale */
/* azioni */
.pd-actions{
display:flex;align-items:center;gap:12px;
padding:16px clamp(18px,3vw,40px);
}
.pd-follow{
border:1px solid var(--line);background:transparent;color:var(--ink);
font:inherit;font-size:0.85rem;font-weight:800;
padding:10px 20px;border-radius:999px;cursor:pointer;
transition:border-color 0.15s ease, transform 0.15s ease;
}
.pd-follow:hover{border-color:var(--blue);transform:scale(1.03);}
.pd-dots{
border:none;background:transparent;color:var(--pd-dim);
font-size:1.2rem;font-weight:900;letter-spacing:0.15em;cursor:pointer;
padding:6px 10px;border-radius:999px;
}
.pd-dots:hover{color:var(--ink);}
.pd-spacer{flex:1 1 auto;}
/* corpo: lista episodi + informazioni */
.pd-body{
display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:34px;
padding:8px clamp(18px,3vw,40px) 30px;
}
.pd-list-head{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding-bottom:12px;border-bottom:1px solid var(--line);
}
.pd-list-head button{
border:none;background:transparent;color:var(--pd-soft);
font:inherit;font-size:0.85rem;font-weight:700;cursor:pointer;
padding:6px 8px;border-radius:8px;
}
.pd-list-head button:hover{color:var(--ink);background:var(--surface-2);}
.pd-ep{
display:flex;gap:18px;align-items:flex-start;
padding:20px 8px;border-bottom:1px solid var(--line);
border-radius:10px;
transition:background 0.15s ease;
}
.pd-ep:hover{background:var(--surface-2);}
.pd-ep-thumb{
flex:0 0 118px;aspect-ratio:16/10;border-radius:9px;overflow:hidden;
border:1px solid rgba(255,255,255,0.14);
display:grid;place-items:center;
box-shadow:0 10px 22px rgba(0,0,0,0.45);
}
.pd-ep-thumb span{font-size:34px;font-weight:800;color:#fff;opacity:0.45;}
.pd-ep-main{flex:1 1 auto;min-width:0;}
.pd-ep-main h4{
margin:0 0 3px;font-size:0.98rem;font-weight:800;color:var(--ink);letter-spacing:-0.01em;
display:flex;align-items:center;gap:8px;
}
.pd-dot{width:7px;height:7px;border-radius:50%;background:var(--blue,#539ae0);flex:0 0 auto;}
.pd-ep-sub{font-size:0.74rem;font-weight:600;color:var(--pd-dim);}
.pd-ep-main p{
margin:8px 0 6px;font-size:0.83rem;line-height:1.5;color:var(--pd-soft);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pd-ep-main small{font-size:0.75rem;font-weight:700;color:var(--pd-dim);}
.pd-ep-actions{
flex:0 0 auto;display:flex;align-items:center;gap:10px;align-self:center;
}
.pd-ep-add{
width:34px;height:34px;border-radius:50%;
border:1px solid var(--line);background:transparent;color:var(--pd-soft);
font-size:16px;cursor:pointer;display:grid;place-items:center;
transition:border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.pd-ep-add:hover{border-color:var(--blue);color:var(--ink);transform:scale(1.06);}
.pd-ep-play{
width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
/* Cerchio "play" sulla riga episodio (zona lista, adattiva): stesso trucco
dell'hero (var(--ink)/var(--bg)) invece di #fff/#0E151E fisso, cosi' in
chiaro diventa un cerchio scuro leggibile invece di sparire su fondo
chiaro. In scuro il risultato e' visivamente identico a prima. */
background:var(--ink);color:var(--bg);font-size:15px;
display:grid;place-items:center;padding-left:3px;
box-shadow:0 10px 22px rgba(0,0,0,0.5);
transition:transform 0.15s ease;
}
.pd-ep-play:hover{transform:scale(1.08);}
.pd-ep--playing h4{color:var(--blue-text);}
.pd-ep--playing .pd-ep-play{background:var(--blue,#539ae0);color:#fff;}
/* colonna informazioni */
.pd-info h3{margin:4px 0 14px;font-size:1.25rem;font-weight:900;color:var(--ink);}
.pd-info p{margin:0 0 14px;font-size:0.88rem;line-height:1.6;color:var(--pd-soft);}
.pd-more{border:none;background:none;color:var(--ink);font:inherit;font-size:0.85rem;font-weight:800;cursor:pointer;padding:0;}
.pd-meta-row{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;
}
.pd-rating{
font-size:0.82rem;font-weight:800;color:var(--ink);
background:var(--surface-2);border:1px solid var(--line);
padding:7px 12px;border-radius:999px;
}
.pd-chip{
font-size:0.78rem;font-weight:700;color:var(--pd-ink);
background:var(--surface-2);
padding:7px 14px;border-radius:999px;
}
/* barra player fissa in basso (avanzamento sotto i controlli) */
.pd-playerbar{
position:fixed;left:0;right:0;bottom:0;z-index:900;
background:rgba(7,10,22,0.97);
border-top:1px solid rgba(255,255,255,0.1);
backdrop-filter:blur(8px);
padding:10px clamp(16px,4vw,48px) 12px;
display:flex;flex-direction:column;gap:8px;
}
.pd-pb-top{
display:flex;align-items:center;gap:14px;
}
.pd-pb-now{
flex:1 1 0;min-width:0;display:flex;align-items:center;gap:10px;
}
.pd-pb-mini{
width:38px;height:38px;border-radius:7px;flex:0 0 auto;
display:grid;place-items:center;font-size:16px;font-weight:800;color:#fff;
border:1px solid rgba(255,255,255,0.15);
}
.pd-pb-now b{display:block;font-size:0.78rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pd-pb-now small{font-size:0.68rem;color:#8d99c4;font-weight:600;} /* barra sempre scura: colore letterale */
.pd-pb-controls{
flex:0 0 auto;display:flex;align-items:center;gap:6px;justify-content:center;
}
.pd-pb-controls button{
/* barra sempre scura: colore letterale, non il token --pd-soft */
border:none;background:transparent;color:#b9c4e8;
font-size:15px;cursor:pointer;padding:7px 9px;border-radius:50%;
transition:color 0.15s ease, transform 0.15s ease;
}
.pd-pb-controls button:hover{color:#fff;transform:scale(1.1);}
.pd-pb-play{
width:42px;height:42px;border-radius:50%;
background:#fff !important;color:#0E151E !important;
display:grid;place-items:center;font-size:15px;
}
.pd-pb-side{
flex:1 1 0;display:flex;justify-content:flex-end;gap:4px;
}
.pd-pb-progress{
display:flex;align-items:center;gap:12px;
}
.pd-pb-progress span{
/* barra sempre scura: colore letterale, non il token --pd-dim */
font-size:0.7rem;font-weight:700;color:#8d99c4;font-variant-numeric:tabular-nums;
flex:0 0 auto;
}
.pd-pb-bar{
flex:1 1 auto;height:4px;border-radius:999px;
background:rgba(255,255,255,0.22);cursor:pointer;position:relative;
transition:height 0.15s ease;
}
.pd-pb-bar:hover{height:7px;}
.pd-pb-bar > i{
display:block;height:100%;width:37%;border-radius:inherit;
background:linear-gradient(90deg,var(--blue,#539ae0),var(--blue-deep,#254A87));
position:relative;
}
.pd-pb-bar > i::after{
content:"";position:absolute;right:-7px;top:50%;transform:translateY(-50%) scale(0);
width:13px;height:13px;border-radius:50%;background:#fff;
transition:transform 0.15s ease;
}
.pd-pb-bar:hover > i::after{transform:translateY(-50%) scale(1);}
@media (max-width:960px){
/* "1fr" da solo ha un min-width automatico pari al min-content dei figli:
se una riga episodio dentro .pd-list non puo' restringersi oltre una
certa larghezza, la colonna (e quindi .pd-list, .pd-list-head, ogni
.pd-ep) viene tenuta piu' larga della card, e l'ultimo controllo della
testata ("Dal piu' nuovo al piu' vecchio") finisce tagliato dal bordo
schermo. minmax(0,1fr) toglie quel minimo e lascia che la colonna segua
davvero lo spazio disponibile. */
.pd-body{grid-template-columns:minmax(0,1fr);}
.pd-info{order:2;}
}
@media (max-width:760px){
.pd-hero{flex-direction:column;align-items:flex-start;gap:16px;}
.pd-ep-thumb{flex-basis:92px;}
.pd-pb-now{display:none;}
.pd-pb-side{display:none;}
.pd-pb-top{justify-content:center;}
}
@media (max-width:600px){
/* La barra del player podcast e' fissa in basso a bottom:0, senza la
stessa prudenza del pulsante Tutor (#mnt-fab-tutor, in wire-zfab.js, che
su schermi stretti resta a bottom:calc(84px + safe-area)): la pagina puo'
essere aperta dentro un contenitore con una sua barra di navigazione in
fondo allo schermo, che coprirebbe questa barra. La alziamo abbastanza da
stare sopra anche al pulsante Tutor (icona sola, ~50px, base a 84px),
cosi' i due elementi fissi non si accavallano fra loro. */
.pd-playerbar{bottom:calc(144px + env(safe-area-inset-bottom,0px));}
}
/* ===================== PLAYER LEZIONE (zoom Netflix + cinema mode) ===================== */
.pl-overlay{
position:fixed;inset:0;z-index:1000;
background:rgba(3,5,14,0.985);
display:flex;flex-direction:column;
overflow-y:auto;
}
.pl-overlay[hidden]{display:none !important;}
.pl-stage{
width:100%;
animation:pl-zoom 0.5s cubic-bezier(0.2,0.7,0.3,1);
transform-origin:50% 32%;
}
@keyframes pl-zoom{
from{transform:scale(0.68);opacity:0;}
to{transform:scale(1);opacity:1;}
}
@media (prefers-reduced-motion:reduce){
.pl-stage{animation:none;}
}
/* video full-bleed stile cinema di YouTube */
.pl-video{
position:relative;
width:100%;
height:min(74vh, 56.25vw);
min-height:320px;
background:
radial-gradient(900px 480px at 78% 18%, rgba(83,154,224,0.28), transparent 60%),
linear-gradient(120deg, #0a1016 0%, #132744 48%, #254A87 88%, #539ae0 115%);
overflow:hidden;
display:grid;place-items:center;
}
.pl-glyph{
font-size:min(46vh, 34vw);
line-height:0.8;font-weight:700;color:#fff;opacity:0.10;
user-select:none;pointer-events:none;
text-shadow:0 0 110px rgba(255,255,255,0.4);
}
.pl-video.is-playing .pl-glyph{animation:pl-breathe 5s ease-in-out infinite;}
@keyframes pl-breathe{
0%,100%{transform:scale(1);opacity:0.10;}
50%{transform:scale(1.05);opacity:0.16;}
}
@media (prefers-reduced-motion:reduce){
.pl-video.is-playing .pl-glyph{animation:none;}
}
.pl-vignette{
position:absolute;inset:0;pointer-events:none;
background:
linear-gradient(180deg, rgba(3,5,14,0.82) 0%, transparent 26%),
linear-gradient(0deg, rgba(3,5,14,0.88) 0%, transparent 34%);
}
/* titolo in sovraimpressione */
.pl-titlebar{
position:absolute;top:0;left:0;right:0;z-index:5;
display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
padding:20px clamp(16px,3vw,40px);
}
.pl-titlebar small{
display:block;
font-size:0.7rem;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;
color:var(--amber,#ffba00);margin-bottom:5px;
}
.pl-titlebar strong{
font-size:clamp(1.05rem,2.2vw,1.6rem);font-weight:900;letter-spacing:-0.02em;
color:#fff;text-shadow:0 3px 18px rgba(0,0,0,0.6);
}
.pl-close{
flex:0 0 auto;
width:40px;height:40px;border-radius:50%;
border:1px solid rgba(255,255,255,0.3);
background:rgba(6,10,28,0.6);color:#fff;
font-size:16px;cursor:pointer;
display:grid;place-items:center;
transition:background 0.15s ease, transform 0.15s ease;
}
.pl-close:hover{background:rgba(255,255,255,0.18);transform:scale(1.06);}
/* pulsante play centrale */
.pl-bigplay{
position:absolute;z-index:4;
width:84px;height:84px;border-radius:50%;
border:none;cursor:pointer;
background:rgba(255,255,255,0.95);color:#0E151E;
font-size:30px;display:grid;place-items:center;padding-left:6px;
box-shadow:0 20px 50px rgba(0,0,0,0.6);
transition:opacity 0.25s ease, transform 0.2s ease;
}
.pl-bigplay:hover{transform:scale(1.08);}
.pl-video.is-playing .pl-bigplay{opacity:0;pointer-events:none;}
/* controlli + slider stile Netflix */
.pl-controls{
position:absolute;left:0;right:0;bottom:0;z-index:6;
padding:14px clamp(16px,3vw,40px) 18px;
display:flex;flex-direction:column;gap:12px;
}
.pl-slider{
position:relative;height:4px;border-radius:999px;
background:rgba(255,255,255,0.28);
cursor:pointer;
transition:height 0.15s ease;
}
.pl-slider:hover{height:8px;}
.pl-slider-fill{
width:37%;height:100%;border-radius:inherit;position:relative;
background:linear-gradient(90deg, var(--orange,#ed9700), var(--amber,#ffba00));
}
.pl-slider-dot{
position:absolute;right:-8px;top:50%;
width:16px;height:16px;border-radius:50%;
background:var(--amber,#ffba00);
transform:translateY(-50%) scale(0.65);
box-shadow:0 2px 10px rgba(0,0,0,0.55);
transition:transform 0.15s ease;
}
.pl-slider:hover .pl-slider-dot{transform:translateY(-50%) scale(1.15);}
.pl-ctrl-row{
display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.pl-ctrl-left,.pl-ctrl-right{display:flex;align-items:center;gap:6px;}
.pl-controls button{
border:none;background:transparent;color:#fff;
font:inherit;font-size:14px;font-weight:700;
padding:8px 10px;border-radius:9px;cursor:pointer;
transition:background 0.15s ease, transform 0.15s ease;
}
.pl-controls button:hover{background:rgba(255,255,255,0.16);transform:scale(1.05);}
#pl-play{font-size:19px;}
.pl-time{
font-size:12.5px;font-weight:600;color:rgba(255,255,255,0.85);
font-variant-numeric:tabular-nums;margin-left:6px;
}
/* riga info sotto il video, come in cinema mode */
.pl-info{
display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
max-width:1120px;margin:0 auto;width:100%;
padding:18px clamp(16px,3vw,40px) 40px;
color:#b9c4e8;font-size:0.9rem;
}
.pl-info b{color:#fff;}
.pl-next{
border:1px solid rgba(255,255,255,0.25);
background:rgba(255,255,255,0.07);color:#fff;
font:inherit;font-size:0.86rem;font-weight:700;
padding:11px 18px;border-radius:999px;cursor:pointer;
transition:background 0.15s ease, transform 0.15s ease;
}
.pl-next:hover{background:rgba(83,154,224,0.25);transform:translateY(-1px);}
.pl-overlay :focus-visible{outline:3px solid var(--amber,#ffba00);outline-offset:2px;}
/* sezioni sotto il video: quiz + correlate */
.pl-sections{
max-width:1120px;margin:0 auto;width:100%;
padding:6px clamp(16px,3vw,40px) 70px;
display:flex;flex-direction:column;gap:36px;
color:#eef2ff;
}
.pl-block h4{
margin:0 0 14px;font-size:1.1rem;font-weight:800;letter-spacing:-0.01em;color:#fff;
}
.pl-quiz-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.pl-quiz-card{
display:flex;align-items:center;gap:13px;
background:rgba(255,255,255,0.055);
border:1px solid rgba(255,255,255,0.12);
border-radius:14px;padding:16px;
transition:border-color 0.15s ease, background 0.15s ease;
}
.pl-quiz-card:hover{border-color:rgba(83,154,224,0.6);background:rgba(83,154,224,0.09);}
.pl-quiz-card--main{
border-color:rgba(255,186,0,0.5);
background:rgba(237,151,0,0.09);
}
.pl-quiz-card--main:hover{border-color:var(--amber,#ffba00);background:rgba(237,151,0,0.14);}
.pl-quiz-ico{
flex:0 0 auto;width:38px;height:38px;border-radius:10px;
display:grid;place-items:center;font-size:14px;font-weight:800;color:#fff;
background:linear-gradient(140deg,var(--blue,#539ae0),var(--blue-deep,#254A87));
letter-spacing:0.02em;
}
.pl-quiz-ico--f{background:linear-gradient(140deg,#254A87,#539ae0);}
.pl-quiz-ico--v{background:linear-gradient(140deg,var(--amber,#ffba00),var(--orange,#ed9700));color:#1b1200;}
.pl-quiz-txt{flex:1 1 auto;min-width:0;}
.pl-quiz-txt b{display:block;font-size:0.92rem;color:#fff;}
.pl-quiz-txt p{margin:2px 0;font-size:0.78rem;color:#b9c4e8;line-height:1.35;}
.pl-quiz-txt small{font-size:0.7rem;color:#8d99c4;font-weight:600;}
.pl-quiz-btn{
flex:0 0 auto;border:1px solid rgba(255,255,255,0.3);
background:rgba(255,255,255,0.08);color:#fff;
font:inherit;font-size:0.8rem;font-weight:800;
padding:9px 15px;border-radius:999px;cursor:pointer;
transition:background 0.15s ease, transform 0.15s ease;
}
.pl-quiz-btn:hover{background:rgba(83,154,224,0.35);transform:translateY(-1px);}
.pl-quiz-btn--main{
background:linear-gradient(180deg,var(--amber,#ffba00),var(--orange,#ed9700));
border:none;color:#1b1200;
}
.pl-quiz-btn--main:hover{background:linear-gradient(180deg,#ffc82e,var(--orange,#ed9700));}
.pl-rel-row{
display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
/* carosello scorrevole, stessa meccanica delle righe video */
.pl-row{
display:flex;gap:14px;
overflow-x:auto;overflow-y:hidden;
padding:2px 2px 10px;margin:0 -2px;
scroll-snap-type:x proximity;
scroll-behavior:smooth;
scrollbar-width:none;-ms-overflow-style:none;
overscroll-behavior-x:contain;
}
.pl-row::-webkit-scrollbar{display:none;height:0;}
.pl-note-card{
flex:0 0 240px;scroll-snap-align:start;
border:1px solid rgba(255,255,255,0.12);
border-radius:14px;padding:16px;
background:rgba(255,255,255,0.045);
display:flex;flex-direction:column;gap:10px;
border-top:3px solid var(--blue,#539ae0);
transition:border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.pl-note-card:hover{background:rgba(255,255,255,0.07);transform:translateY(-2px);}
.pl-note-card--formule{border-top-color:var(--amber,#ffba00);}
.pl-note-card--errori{border-top-color:#d64545;}
.pl-note-card--tutor{border-top-color:var(--green,#2e9e5b);}
.pl-note-card--def{border-top-color:#8a5cff;}
.pl-note-tag{
align-self:flex-start;font-size:0.66rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;
color:#b9c4e8;
}
.pl-note-body{
margin:0;font-size:0.83rem;line-height:1.55;color:#eef2ff;
flex:1 1 auto;
}
.pl-note-card--formule .pl-note-body{font-size:0.8rem;line-height:1.7;letter-spacing:0.01em;}
.pl-note-meta{font-size:0.72rem;color:#8d99c4;font-weight:600;}
@media (max-width:760px){
.pl-note-card{flex-basis:210px;}
}
.pl-rel-card{
border:none;background:none;padding:0;margin:0;font:inherit;color:inherit;
text-align:left;cursor:pointer;
display:flex;flex-direction:column;gap:8px;
transition:transform 0.2s ease;
}
.pl-rel-card:hover{transform:translateY(-4px) scale(1.02);}
.pl-rel-poster{
position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
border:1px solid rgba(255,255,255,0.14);
display:grid;place-items:center;
box-shadow:0 12px 24px rgba(0,0,0,0.5);
}
.pl-rel-poster i{font-style:normal;font-size:44px;font-weight:800;color:#fff;opacity:0.4;}
.pl-rel-poster em{
position:absolute;left:9px;bottom:8px;font-style:normal;
font-size:0.62rem;font-weight:900;letter-spacing:0.1em;color:#fff;
background:rgba(6,10,28,0.65);border:1px solid rgba(255,255,255,0.2);
padding:3px 8px;border-radius:7px;
}
.pl-rel-title{font-size:0.87rem;font-weight:700;color:#fff;line-height:1.3;}
.pl-rel-meta{font-size:0.73rem;color:#8d99c4;font-weight:600;}
@media (max-width:900px){
.pl-quiz-grid{grid-template-columns:1fr;}
.pl-rel-row{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
.pl-bigplay{width:64px;height:64px;font-size:23px;}
.pl-ctrl-right{display:none;}
}
/* ===================== MODALI: QUIZ / FLASHCARD / TUTOR ===================== */
.md-overlay{
position:fixed;inset:0;z-index:1100;
background:rgba(8,12,24,0.62);
backdrop-filter:blur(6px);
display:flex;align-items:center;justify-content:center;
padding:20px;
}
.md-overlay[hidden]{display:none !important;}
.md-card{
width:min(580px,100%);
max-height:90vh;overflow-y:auto;
background:var(--surface);
border:1px solid var(--line);
border-radius:18px;
box-shadow:0 30px 80px rgba(0,0,0,0.45);
padding:24px;
color:var(--ink);
animation:md-pop 0.3s cubic-bezier(0.2,0.7,0.3,1);
}
@keyframes md-pop{from{transform:scale(0.92) translateY(10px);opacity:0;}}
@media (prefers-reduced-motion:reduce){.md-card{animation:none;}}
.md-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
margin-bottom:16px;
}
.md-head small{
display:block;font-size:10.5px;font-weight:800;letter-spacing:0.14em;
text-transform:uppercase;color:var(--orange);margin-bottom:3px;
}
.md-head b{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-0.01em;}
.md-close{
flex:0 0 auto;width:34px;height:34px;border-radius:50%;
border:1px solid var(--line);background:var(--surface-2);color:var(--muted);
font-size:14px;cursor:pointer;display:grid;place-items:center;
transition:background 0.15s ease, color 0.15s ease;
}
.md-close:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;}
.md-overlay :focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:10px;}
/* ---- quiz ---- */
.qz-progress{
height:6px;border-radius:999px;background:var(--surface-2);
border:1px solid var(--line);overflow:hidden;margin-bottom:20px;
}
.qz-progress i{
display:block;height:100%;width:0%;
background:linear-gradient(90deg,var(--blue),var(--blue-deep));
border-radius:inherit;transition:width 0.3s ease;
}
.qz-q{font-size:16.5px;font-weight:700;line-height:1.45;margin:0 0 16px;color:var(--ink);}
.qz-opts{display:flex;flex-direction:column;gap:9px;}
.qz-opt{
display:flex;align-items:center;gap:11px;
width:100%;text-align:left;font:inherit;font-size:14px;color:var(--ink);
border:1px solid var(--line);background:var(--surface-2);
border-radius:12px;padding:13px 15px;cursor:pointer;
transition:border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.qz-opt:hover:not(:disabled){border-color:var(--blue);transform:translateX(2px);}
.qz-opt:disabled{cursor:default;}
.qz-letter{
flex:0 0 26px;width:26px;height:26px;border-radius:8px;
display:grid;place-items:center;
font-size:12px;font-weight:800;
background:var(--surface);border:1px solid var(--line);color:var(--muted);
}
.qz-opt.is-correct{border-color:var(--green);background:rgba(46,158,91,0.12);}
.qz-opt.is-correct .qz-letter{background:var(--green);border-color:var(--green);color:#fff;}
.qz-opt.is-wrong{border-color:#d64545;background:rgba(214,69,69,0.10);}
.qz-opt.is-wrong .qz-letter{background:#d64545;border-color:#d64545;color:#fff;}
.qz-feedback{
margin:16px 0 0;padding:12px 14px;border-radius:12px;
font-size:13px;line-height:1.5;font-weight:600;
background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
}
.qz-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;}
.qz-count{font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
.qz-next{
border:none;font:inherit;font-size:14px;font-weight:800;color:#fff;
background:linear-gradient(180deg,var(--blue),var(--blue-deep));
padding:11px 22px;border-radius:999px;cursor:pointer;
transition:transform 0.15s ease, box-shadow 0.15s ease;
box-shadow:0 6px 16px rgba(37,74,135,0.4);
}
.qz-next:hover{transform:translateY(-1px);}
.qz-next:disabled{opacity:0.35;cursor:default;transform:none;box-shadow:none;}
.qz-result{text-align:center;padding:14px 6px 6px;}
.qz-score{
font-size:44px;font-weight:900;line-height:1;color:var(--ink);
font-variant-numeric:tabular-nums;
}
.qz-score span{font-size:19px;font-weight:700;color:var(--muted);}
.qz-result h5{margin:14px 0 6px;font-size:21px;font-weight:900;color:var(--ink);}
.qz-result p{margin:0 0 20px;font-size:14px;color:var(--muted);}
.qz-result .qz-xp{
display:inline-block;margin-bottom:20px;
font-size:12.5px;font-weight:800;color:var(--orange);
background:rgba(237,151,0,0.12);border:1px solid rgba(237,151,0,0.4);
padding:7px 14px;border-radius:999px;
}
.qz-result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.qz-ghost{
border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
font:inherit;font-size:14px;font-weight:700;
padding:11px 20px;border-radius:999px;cursor:pointer;
}
.qz-ghost:hover{border-color:var(--blue);}
/* ---- flashcard ---- */
.fc-counter{font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
.fc-scene{perspective:1200px;margin:6px 0 18px;}
.fc-card{
position:relative;height:250px;cursor:pointer;
transform-style:preserve-3d;
transition:transform 0.55s cubic-bezier(0.3,0.8,0.4,1);
}
.fc-card.is-flipped{transform:rotateY(180deg);}
@media (prefers-reduced-motion:reduce){.fc-card{transition:none;}}
.fc-face{
position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
border-radius:16px;padding:26px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
text-align:center;color:#fff;
box-shadow:0 18px 40px rgba(14,21,30,0.35);
}
.fc-face small{
font-size:10px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;opacity:0.7;
}
.fc-face b{font-size:22px;font-weight:800;line-height:1.3;letter-spacing:-0.01em;}
.fc-front{background:linear-gradient(140deg,#132744,#254A87);}
.fc-back{background:linear-gradient(140deg,#254A87,#539ae0);transform:rotateY(180deg);}
.fc-hint{font-size:11.5px;opacity:0.65;font-weight:600;}
.fc-actions{display:flex;gap:10px;}
.fc-btn{
flex:1;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
font:inherit;font-size:13.5px;font-weight:800;
padding:13px 10px;border-radius:12px;cursor:pointer;
transition:border-color 0.15s ease, background 0.15s ease;
}
.fc-btn--no:hover{border-color:var(--orange);background:rgba(237,151,0,0.1);}
.fc-btn--yes:hover{border-color:var(--green);background:rgba(46,158,91,0.1);}
/* ---- chat tutor ---- */
.md-overlay--right{justify-content:flex-end;align-items:stretch;padding:0;}
.tc-panel{
width:min(440px,100%);height:100%;
background:var(--surface);border-left:1px solid var(--line);
display:flex;flex-direction:column;
animation:tc-slide 0.3s cubic-bezier(0.2,0.7,0.3,1);
box-shadow:-22px 0 60px rgba(4,13,25,0.28);
}
@keyframes tc-slide{from{transform:translateX(60px);opacity:0;}}
@media (prefers-reduced-motion:reduce){.tc-panel{animation:none;}}
.tc-head{
display:flex;align-items:center;gap:12px;
padding:17px 18px;border-bottom:1px solid var(--line);
background:var(--surface);
}
.tc-avatar{
width:44px;height:44px;border-radius:50%;flex:0 0 auto;
background:linear-gradient(135deg,var(--amber),var(--orange));
color:#fff;font-weight:800;font-size:15px;
display:grid;place-items:center;
}
.tc-head-txt{flex:1;min-width:0;}
.tc-head-txt b{display:block;font-size:15.5px;color:var(--ink);line-height:1.25;}
.tc-head-txt small{
font-size:11.5px;line-height:1.35;color:var(--green);font-weight:700;
display:flex;align-items:flex-start;gap:6px;margin-top:3px;
}
.tc-head-txt small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto;margin-top:4px;}
.tc-msgs{
flex:1;min-height:0;overflow-y:auto;
padding:20px 18px;display:flex;flex-direction:column;gap:10px;
background:var(--bg);
overscroll-behavior:contain;
}
.tc-msg{
max-width:82%;padding:11px 14px;border-radius:15px;
font-size:13.5px;line-height:1.5;
}
.tc-msg--tutor{
align-self:flex-start;
background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
border-bottom-left-radius:5px;
}
.tc-msg--user{
align-self:flex-end;
background:linear-gradient(135deg,var(--blue),var(--blue-deep));color:#fff;
border-bottom-right-radius:5px;
}
.tc-typing{align-self:flex-start;font-size:12px;color:var(--muted);font-weight:600;padding:0 6px;}
.tc-input{
display:flex;align-items:center;gap:10px;
padding:12px 16px calc(12px + env(safe-area-inset-bottom));
background:var(--surface);
}
.tc-input input{
flex:1;min-width:0;font:inherit;font-size:14px;color:var(--ink);
background:var(--surface-2);border:1px solid var(--line);
border-radius:14px;padding:13px 15px;outline:none;
transition:border-color .15s ease,box-shadow .15s ease;
}
.tc-input input:focus,
.tc-input input:focus-visible{
border-color:var(--blue);outline:none;
box-shadow:0 0 0 3px rgba(83,154,224,.22);
}
.tc-input button{
flex:0 0 auto;width:46px;height:46px;border-radius:14px;border:none;cursor:pointer;
background:linear-gradient(145deg,var(--blue),var(--blue-deep));color:#fff;
display:grid;place-items:center;
box-shadow:0 7px 18px rgba(37,74,135,.28);
transition:transform 0.15s ease,box-shadow .15s ease;
}
.tc-input button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.tc-input button:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(37,74,135,.36);}
.tc-input button:active{transform:translateY(0);}
.tc-input button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
.tc-quick{
display:grid;grid-template-columns:1fr 1fr;gap:8px;
padding:12px 16px 10px;border-top:1px solid var(--line);
background:var(--surface);
}
.tc-quick__label{
grid-column:1 / -1;font-size:10.5px;font-weight:800;letter-spacing:.09em;
text-transform:uppercase;color:var(--muted);margin:0 0 1px 1px;
}
.tc-quick button{
min-height:42px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
font:inherit;font-size:12px;line-height:1.25;font-weight:750;text-align:center;
padding:9px 11px;border-radius:12px;cursor:pointer;
transition:border-color .15s ease,color .15s ease,background .15s ease,transform .15s ease;
}
.tc-quick button:last-child{grid-column:1 / -1;}
.tc-quick button:hover{border-color:var(--blue);color:var(--blue);background:rgba(83,154,224,.08);transform:translateY(-1px);}
.tc-quick button:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.tc-support{
display:flex;align-items:center;gap:11px;margin:0 16px 2px;padding:11px 12px;
border:1px solid rgba(37,211,102,.34);border-radius:14px;
color:var(--ink);background:rgba(37,211,102,.08);text-decoration:none;
transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.tc-support:hover{border-color:#25d366;background:rgba(37,211,102,.13);transform:translateY(-1px);}
.tc-support__icon{
width:34px;height:34px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
color:#fff;background:#25d366;box-shadow:0 5px 12px rgba(37,211,102,.24);
}
.tc-support__icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.tc-support__copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:1px;}
.tc-support__copy b{font-size:12.5px;line-height:1.25;color:var(--ink);}
.tc-support__copy small{font-size:10.5px;line-height:1.35;color:var(--muted);}
.tc-support__arrow{flex:0 0 auto;color:#20a957;font-size:17px;font-weight:800;}
@media (max-width:600px){
.tc-panel{width:100%;height:100dvh;border-left:0;box-shadow:none;}
.tc-head{padding:14px 14px;gap:10px;}
.tc-avatar{width:40px;height:40px;}
.tc-head-txt b{font-size:15px;}
.tc-head-txt small{font-size:10.75px;}
.tc-msgs{padding:16px 14px;}
.tc-msg{max-width:88%;}
.tc-quick{padding:11px 14px 9px;gap:7px;}
.tc-quick button{font-size:11.5px;padding:8px 9px;}
.tc-support{margin:0 14px 1px;padding:10px 11px;}
.tc-input{padding:11px 14px calc(11px + env(safe-area-inset-bottom));}
}
/* stato prenotato per gli slot */
.db-slot--booked{
border-style:solid;border-color:var(--green) !important;
background:rgba(46,158,91,0.08) !important;
color:var(--green-text) !important;font-weight:700;
}
.db-task-check{cursor:pointer;}
/* ---- anagrafica studente ---- */
.ag-card{width:min(680px,100%);}
.ag-grid{
display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px;
}
.ag-field{display:flex;flex-direction:column;gap:6px;}
.ag-field--full{grid-column:1 / -1;}
.ag-field span{font-size:11.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--muted);}
.ag-field input{
font:inherit;font-size:14px;color:var(--ink);
background:var(--surface-2);border:1px solid var(--line);
border-radius:10px;padding:11px 13px;outline:none;
transition:border-color 0.15s ease;
}
.ag-field input:focus{border-color:var(--blue);}
.ag-field input.is-ok{border-color:var(--green);}
.ag-field input.is-err{border-color:#d64545;}
.ag-hint{font-size:11px;font-weight:600;min-height:14px;}
.ag-hint.is-ok{color:var(--green);}
.ag-hint.is-err{color:#d64545;}
.ag-sec{
margin:0 0 12px;font-size:13px;font-weight:800;color:var(--ink);
letter-spacing:0.02em;
}
.ag-docs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px;}
.ag-drop{
display:flex;flex-direction:column;gap:5px;
border:1.5px dashed var(--line);border-radius:12px;
padding:14px;cursor:pointer;
transition:border-color 0.15s ease, background 0.15s ease;
}
.ag-drop:hover{border-color:var(--blue);background:rgba(83,154,224,0.05);}
.ag-drop.is-ok{border-style:solid;border-color:var(--green);background:rgba(46,158,91,0.06);}
.ag-drop b{font-size:13px;font-weight:700;color:var(--ink);}
.ag-drop small{font-size:11.5px;color:var(--muted);line-height:1.4;}
.ag-status{
margin-top:4px;font-size:11px;font-weight:800;letter-spacing:0.05em;
text-transform:uppercase;color:var(--muted);
}
.ag-drop.is-ok .ag-status{color:var(--green);text-transform:none;letter-spacing:0;}
.ag-drop--full{grid-column:1 / -1;}
.ag-foot{
display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
padding-top:16px;border-top:1px solid var(--line);
}
.ag-note{font-size:11.5px;color:var(--muted);max-width:300px;}
.ag-actions{display:flex;gap:10px;}
.ag-saved{
font-size:12.5px;font-weight:700;color:var(--green);
}
@media (max-width:640px){
.ag-grid,.ag-docs{grid-template-columns:1fr;}
}
/* input reale nel composer social: usava colori letterali invece dei token
--so-* della vista (probabilmente aggiunto dopo .so-fakeinput, che il
markup reale non usa piu'). Corretto per seguire il tema. */
.so-input{
background:var(--so-bg);border:1px solid var(--so-line);border-radius:10px;
padding:11px 14px;font:inherit;font-size:13px;color:var(--so-ink);min-width:0;outline:none;
}
.so-input:focus{border-color:var(--blue);}
/* stato attivo dei controlli player (CC, impostazioni, fullscreen) */
.pl-controls button.is-on{background:rgba(255,255,255,0.22);}
/* ---- ricerca ---- */
.sr-card{width:min(560px,100%);align-self:flex-start;margin-top:8vh;}
.sr-input{
width:100%;font:inherit;font-size:15px;color:var(--ink);
background:var(--surface-2);border:1px solid var(--line);
border-radius:12px;padding:13px 16px;outline:none;
margin-bottom:14px;
}
.sr-input:focus{border-color:var(--blue);}
.sr-results{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow-y:auto;}
.sr-item{
display:flex;align-items:center;gap:12px;
width:100%;text-align:left;font:inherit;color:var(--ink);
border:1px solid transparent;background:transparent;
border-radius:10px;padding:10px 12px;cursor:pointer;
transition:background 0.12s ease, border-color 0.12s ease;
}
.sr-item:hover{background:var(--surface-2);border-color:var(--line);}
.sr-item .sr-mono{
flex:0 0 34px;width:34px;height:34px;border-radius:8px;
display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;
background:linear-gradient(140deg,var(--blue),var(--blue-deep));
}
.sr-item b{display:block;font-size:13.5px;}
.sr-item small{font-size:11.5px;color:var(--muted);}
.sr-empty{font-size:13px;color:var(--muted);padding:10px 4px;}