:root {
  --brand: #C9742E;
  --brand-dark: #a85c20;
  --brand-light: #f5e6d8;
  --dark: #1A1A2E;
  --dark2: #2a2a42;
  --grey-bg: #F6F4F1;
  --grey-light: #EDEAE5;
  --white: #FFFFFF;
  --text: #1A1A2E;
  --text-soft: #666;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.14);
  --shadow-brand: 0 4px 20px rgba(201,116,46,0.3);
  --radius: 18px;
  --radius-sm: 12px;
  --surface: #C9742E;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { font-family:'Inter',sans-serif; background:var(--grey-bg); color:var(--text); min-height:100vh; font-size:16px; line-height:1.7; font-style:normal; }
em, i { font-style:normal; }

/* ===== SPLASH ===== */
#splash {
  position:fixed; inset:0; background:var(--grey-bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:1000; padding:2rem; transition:opacity 0.5s;
}
#splash.hidden { opacity:0; pointer-events:none; }
.splash-logos {
  display:flex; align-items:center; justify-content:center; gap:1.5rem; margin-bottom:2.5rem;
}
.splash-divider { width:1px; height:50px; background:#ddd; }
.login-box {
  background:var(--white); border-radius:var(--radius); padding:2rem;
  width:100%; max-width:340px; box-shadow:var(--shadow-lg);
  border:1px solid rgba(0,0,0,0.06);
}
.login-box h2 { color:var(--text); font-size:1rem; margin-bottom:1.5rem; font-weight:500; opacity:0.7; }
.pin-input {
  width:100%; background:#faf9f7; border:2px solid var(--grey-light);
  border-radius:var(--radius-sm); padding:1rem; color:var(--text);
  font-size:1.2rem; font-family:'Inter',sans-serif; font-weight:700;
  letter-spacing:4px; outline:none; margin-bottom:1rem;
  transition:border-color 0.2s;
}
.pin-input:focus { border-color:var(--brand); }
.pin-input::placeholder { color:#666; letter-spacing:1px; font-weight:400; font-size:0.9rem; }
.btn-primary {
  width:100%; background:var(--brand); border:none; border-radius:var(--radius-sm);
  padding:1rem; color:white; font-family:'Inter',sans-serif; font-size:1rem;
  cursor:pointer; font-weight:700; transition:all 0.2s;
  box-shadow:var(--shadow-brand);
}
.btn-primary:hover { background:var(--brand-dark); transform:translateY(-1px); box-shadow:0 6px 24px rgba(201,116,46,0.4); }
.btn-primary:active { transform:translateY(0) scale(0.98); }
.admin-link { margin-top:1.5rem; text-align:center; }
.admin-link a { color:#666; font-size:0.875rem; text-decoration:none; cursor:pointer; }
.admin-link a:hover { color:var(--brand); }
.error-msg { color:#e53935; font-size:0.9rem; margin-top:0.5rem; display:none; font-weight:500; }
.error-msg.show { display:block; }

/* ===== ADMIN LOGIN ===== */
#admin-login {
  position:fixed; inset:0; background:var(--dark); display:none; flex-direction:column;
  align-items:center; justify-content:center; z-index:999; padding:2rem;
}
#admin-login.show { display:flex; }
.back-btn { position:absolute; top:1.5rem; left:1.5rem; color:rgba(255,255,255,0.4); cursor:pointer; font-size:0.9rem; }

/* ===== POST-LOGIN ANIMATION ===== */
#loginAnim {
  position:fixed; inset:0; background:var(--grey-bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:500; opacity:0; pointer-events:none; transition:opacity 0.4s;
}
#loginAnim.show { opacity:1; pointer-events:all; }
.anim-logo { opacity:0; transform:scale(0.7); animation:logoIn 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.2s forwards; }
.anim-giostra { opacity:0; transform:translateY(20px); animation:slideUp 0.5s ease 0.7s forwards; }
.anim-text {
  opacity:0; transform:translateY(10px); animation:slideUp 0.5s ease 1s forwards;
  font-family:'Inter',sans-serif; font-size:1rem; font-weight:700;
  color:var(--brand); letter-spacing:2px; text-transform:uppercase; margin-top:1.2rem;
}
.anim-dots { display:flex; gap:8px; margin-top:1.2rem; opacity:0; animation:slideUp 0.4s ease 1.2s forwards; }
.anim-dot { width:8px; height:8px; border-radius:50%; background:var(--brand); opacity:0.3; }
.anim-dot:nth-child(1) { animation:pulse 0.8s ease 1.4s infinite; }
.anim-dot:nth-child(2) { animation:pulse 0.8s ease 1.6s infinite; }
.anim-dot:nth-child(3) { animation:pulse 0.8s ease 1.8s infinite; }
@keyframes logoIn { to { opacity:1; transform:scale(1); } }
@keyframes slideUp { to { opacity:1; transform:translateY(0); } }
@keyframes pulse { 0%,100% { opacity:0.3; transform:scale(1); } 50% { opacity:1; transform:scale(1.3); } }
@keyframes animOut { from { opacity:1; } to { opacity:0; } }
#loginAnim.exit { animation:animOut 0.5s ease forwards; }

/* ===== APP SHELL ===== */
#app { display:none; flex-direction:column; min-height:100vh; }
#app.show { display:flex; }

/* HEADER */
.app-header {
  background:var(--white); padding:1.2rem 1.2rem;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100;
  box-shadow:var(--shadow-sm); border-bottom:1px solid var(--grey-light);
}
.header-brand {
  font-family:'Inter',sans-serif; font-size:1.2rem; font-weight:900;
  color:var(--brand); letter-spacing:1px; text-transform:uppercase; font-style:normal;
}
.header-brand span { color:var(--dark); }
.header-right { display:flex; align-items:center; gap:0.6rem; }
.header-user {
  background:var(--brand-light); border-radius:20px; padding:0.35rem 0.9rem;
  color:var(--brand); font-size:0.875rem; font-weight:700;
  display:flex; align-items:center; gap:0.4rem;
}
.header-pts { color:var(--brand); font-weight:700; font-size:0.8rem; }
.notif-dot {
  width:10px; height:10px; background:#e53935; border-radius:50%;
  display:none; animation:pulseDot 1.5s ease infinite;
}
.notif-dot.show { display:block; }
@keyframes pulseDot { 0%,100% { transform:scale(1); } 50% { transform:scale(1.3); } }

/* MAIN */
.main-content { flex:1; padding:1rem; padding-bottom:6rem; max-width:600px; margin:0 auto; width:100%; }

/* BOTTOM NAV */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:flex; justify-content:space-around; align-items:center;
  padding:0.5rem 0.3rem calc(0.5rem + env(safe-area-inset-bottom));
  box-shadow:0 -1px 0 rgba(0,0,0,0.08), 0 -4px 24px rgba(0,0,0,0.06);
  z-index:100; border-top:none;
}
.nav-item {
  display:flex; flex-direction:column; align-items:center; gap:0.18rem;
  cursor:pointer; padding:0.4rem 0.5rem; border-radius:14px;
  transition:all 0.2s; flex:1; position:relative;
}
.nav-item:active { transform:scale(0.93); }
.nav-item.active { background:none; }
.nav-icon-wrap {
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:12px; transition:all 0.2s;
}
.nav-item.active .nav-icon-wrap { background:var(--brand); box-shadow:0 4px 12px rgba(201,116,46,0.35); }
.nav-item.active .nav-icon-wrap svg { stroke:white; }
.nav-icon-wrap svg { stroke:#b0b0b0; transition:all 0.2s; width:22px; height:22px; }
.nav-label { font-size:0.62rem; color:#b0b0b0; font-weight:600; text-align:center; transition:color 0.2s; letter-spacing:0.01em; }
.nav-item.active .nav-label { color:var(--brand); font-weight:700; }
.nav-badge {
  position:absolute; top:2px; right:8px; background:#e53935; color:white;
  font-size:0.55rem; font-weight:700; border-radius:10px; padding:1px 5px; display:none;
}
.nav-badge.show { display:block; }

/* PAGES */
.page { display:none; animation:pageIn 0.25s ease; }
.page.active { display:block; }
@keyframes pageIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.page-title { font-size:1.5rem; font-weight:900; color:var(--text); margin-bottom:1.2rem; letter-spacing:-0.3px; }
.page-title span { color:var(--brand); }

/* ===== HOME ===== */
.hero-card {
  border-radius:var(--radius-sm); margin-bottom:1rem;
  overflow:hidden; box-shadow:var(--shadow-brand);
  height:200px;
}
.hero-card video {
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}
.hero-text { flex:1; }
.hero-img { width:100%; display:block; border-radius:var(--radius); }



/* 4 BANNERS */
.banners-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; margin-bottom:1.2rem; }
.banner-btn {
  background:var(--white); border-radius:var(--radius); padding:1.2rem 1rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:90px; cursor:pointer; box-shadow:var(--shadow-md);
  border:none; transition:all 0.2s; text-align:center;
  border-bottom:3px solid transparent;
  transform:translateY(0);
}
.banner-btn:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.banner-btn:active { transform:translateY(0) scale(0.97); }
.banner-btn.orange { border-bottom-color:var(--brand); }
.banner-btn.blue { border-bottom-color:#4A90D9; }
.banner-btn.green { border-bottom-color:#27AE60; }
.banner-btn.purple { border-bottom-color:#8E44AD; }
.banner-btn strong {
  font-size:0.95rem; font-weight:800; letter-spacing:0.3px;
  text-transform:uppercase; line-height:1.3;
}
.banner-btn.orange strong { color:var(--brand); }
.banner-btn.blue strong { color:#4A90D9; }
.banner-btn.green strong { color:#27AE60; }
.banner-btn.purple strong { color:#8E44AD; }

/* AREE */
.section-label {
  font-size:0.7rem; font-weight:800; color:#666; text-transform:uppercase;
  letter-spacing:1.5px; margin:1.2rem 0 0.8rem;
}
.aree-grid { display:flex; flex-direction:column; gap:0.6rem; margin-bottom:1rem; }
.area-btn {
  background:var(--white); border-radius:var(--radius-sm); padding:1rem 1.2rem;
  display:flex; align-items:center; gap:1rem; cursor:pointer;
  box-shadow:var(--shadow-sm); border:none; width:100%; text-align:left;
  transition:all 0.2s; position:relative; overflow:hidden;
  border-left:4px solid transparent;
}
.area-btn:hover { transform:translateX(4px); box-shadow:var(--shadow-md); }
.area-btn:active { transform:scale(0.98); }
.area-btn.studio { border-left-color:#4A90D9; }
.area-btn.sport { border-left-color:#E67E22; }
.area-btn.tech { border-left-color:#27AE60; }
.area-btn.music { border-left-color:#8E44AD; }
.area-btn.open { border-left-color:var(--brand); }
.area-icon-box {
  width:46px; height:46px; border-radius:14px; display:flex;
  align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.area-btn.studio .area-icon-box { background:linear-gradient(135deg,#4A90D9,#2980b9); }
.area-btn.sport .area-icon-box { background:linear-gradient(135deg,#E67E22,#d35400); }
.area-btn.tech .area-icon-box { background:linear-gradient(135deg,#27AE60,#1e8449); }
.area-btn.music .area-icon-box { background:linear-gradient(135deg,#8E44AD,#7d3c98); }
.area-btn.open .area-icon-box { background:linear-gradient(135deg,var(--brand),var(--brand-dark)); }
.area-icon-box svg { stroke:white; }
.area-title { font-size:1.05rem; font-weight:800; color:var(--text); text-transform:uppercase; letter-spacing:0.3px; }
.area-arrow { margin-left:auto; color:#ccc; font-size:1rem; }

/* ===== SPORT PAGE ===== */
@keyframes sportPulse {
  0%,100%{box-shadow:0 0 0 0 rgba(230,126,34,0.7); background:var(--surface); transform:scale(1);}
  50%{box-shadow:0 0 0 12px rgba(230,126,34,0); background:#fff3e6; transform:scale(1.03);}
}
@keyframes sportPulseColor {
  0%,100%{background:#fff3e6; border:2px solid #E67E22; box-shadow:0 0 0 0 rgba(230,126,34,0.6);}
  50%{background:#ffe0b2; border:2px solid #d35400; box-shadow:0 0 0 10px rgba(230,126,34,0);}
}
.area-btn.sport.pulsing { animation:sportPulse 1.5s ease-in-out infinite; }
.sport-banner.pulsing { animation:sportPulseColor 1.5s ease-in-out infinite; border-radius:12px; }
#vcAutovalBanner.pulsing { animation:sportPulseColor 1.5s ease-in-out infinite; border-radius:12px; }

/* banner allenamento home */
.allenamento-banner {
  background:linear-gradient(135deg,#fff8f0,#fff);
  border-left:4px solid #E67E22;
  border-radius:var(--radius-sm);
  padding:.85rem 1.1rem;
  margin-bottom:.9rem;
  display:flex; align-items:center; gap:.8rem;
  cursor:pointer; box-shadow:var(--shadow-sm);
}
.allenamento-banner-icon { font-size:1.5rem; flex-shrink:0; }
.allenamento-banner-text { flex:1; }
.allenamento-banner-title { font-size:.95rem; font-weight:800; color:#E67E22; }
.allenamento-banner-sub { font-size:.8rem; color:var(--text-soft); margin-top:.15rem; line-height:1.5; }

/* autovalutazione */
.autoval-step {
  display:none; flex-direction:column; align-items:center;
  justify-content:center; min-height:60vh; text-align:center; padding:1.5rem;
}
.autoval-step.active { display:flex; }
.autoval-domanda { font-size:1.3rem; font-weight:800; margin-bottom:.5rem; color:var(--text); line-height:1.5; }
.autoval-sub { font-size:.9rem; color:var(--text-soft); margin-bottom:2rem; }
.autoval-stars { display:flex; gap:.6rem; justify-content:center; margin-bottom:1.5rem; }
.autoval-star {
  font-size:2.4rem; cursor:pointer; transition:transform .15s;
  filter:grayscale(1) opacity(.4);
}
.autoval-star.on { filter:none; transform:scale(1.1); }
.autoval-emoji-row { display:flex; gap:1rem; justify-content:center; margin-bottom:1.5rem; }
.autoval-emoji {
  font-size:2.2rem; cursor:pointer; transition:transform .15s;
  filter:grayscale(1) opacity(.4); border-radius:50%;
  padding:.3rem;
}
.autoval-emoji.on { filter:none; transform:scale(1.15); background:rgba(230,126,34,.1); }
.autoval-progress {
  font-size:.78rem; color:#666; margin-bottom:1.5rem; letter-spacing:.5px;
}
.autoval-next {
  background:#E67E22; color:#fff; border:none; border-radius:50px;
  padding:.7rem 2rem; font-size:1rem; font-weight:700; cursor:pointer;
  display:none; margin-top:.5rem;
}
.autoval-next.show { display:inline-block; }
.autoval-radar-wrap { text-align:center; padding:1rem; }
.autoval-radar-title { font-size:1.1rem; font-weight:800; margin-bottom:.3rem; }
.autoval-radar-sub { font-size:.85rem; color:var(--text-soft); margin-bottom:1rem; }
.autoval-done-btn {
  background:#E67E22; color:#fff; border:none; border-radius:50px;
  padding:.7rem 2rem; font-size:1rem; font-weight:700; cursor:pointer; margin-top:1rem;
}
.sport-banner {
  width:100%; display:flex; align-items:center; gap:1rem;
  background:var(--white); border-radius:var(--radius-sm); padding:1.1rem 1.2rem;
  margin-bottom:0.8rem; box-shadow:var(--shadow-sm); border:none;
  border-left:4px solid #E67E22; cursor:pointer; text-align:left;
  transition:all 0.2s;
}
.sport-banner:active { transform:scale(0.98); }
.sport-banner-icon { font-size:1.8rem; flex-shrink:0; }
.sport-banner-text { flex:1; }
.sport-banner-title { font-size:1rem; font-weight:800; color:var(--text); margin-bottom:0.2rem; }
.sport-banner-desc { font-size:0.9rem; color:var(--text-soft); line-height:1.5; }
.sport-sub { padding-bottom:2rem; }
.sport-back {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:rgba(201,116,46,0.12); border:2px solid var(--brand);
  color:var(--brand); cursor:pointer; font-size:1.3rem; font-weight:900;
  margin-bottom:1rem; transition:all 0.2s; flex-shrink:0;
  line-height:1;
}
.sport-back:hover { background:var(--brand); color:white; transform:scale(1.08); }
.sport-back:active { transform:scale(0.95); }
.sport-section { display:none; }
.sport-section.active { display:block; }
.risorsa-card {
  background:var(--white); border-radius:var(--radius-sm); padding:1rem 1.1rem;
  margin-bottom:0.7rem; box-shadow:var(--shadow-sm);
  border-left:4px solid #E67E22;
}
.risorsa-top { display:flex; align-items:flex-start; gap:0.75rem; margin-bottom:0.5rem; }
.risorsa-icon { font-size:1.4rem; flex-shrink:0; margin-top:0.1rem; }
.risorsa-title { font-size:0.95rem; font-weight:800; color:var(--text); margin-bottom:0.2rem; }
.risorsa-desc { font-size:0.9rem; color:var(--text-soft); line-height:1.6; }
.risorsa-link {
  display:inline-block; margin-top:0.3rem; font-size:0.9rem; font-weight:700;
  color:#E67E22; text-decoration:none;
}
.risorsa-link:hover { text-decoration:underline; }

/* ===== NEWS & AVVISI ===== */
.news-empty { text-align:center; padding:3rem 1rem; color:#666; }
.news-empty svg { margin-bottom:1rem; stroke:#ddd; }
.news-card {
  background:var(--white); border-radius:var(--radius-sm); padding:1.2rem;
  margin-bottom:0.8rem; box-shadow:var(--shadow-sm);
  border-left:4px solid var(--brand); cursor:pointer;
  transition:all 0.2s;
}
.news-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.news-card.avviso { border-left-color:#e53935; }
.news-card.evento { border-left-color:#4A90D9; }
.news-meta { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.4rem; }
.news-type {
  font-size:0.65rem; font-weight:800; text-transform:uppercase; letter-spacing:1px;
  padding:0.2rem 0.6rem; border-radius:20px;
}
.news-type.news { background:var(--brand-light); color:var(--brand); }
.news-type.avviso { background:#fde8e8; color:#e53935; }
.news-type.evento { background:#e8f0fd; color:#4A90D9; }
.news-date { font-size:0.875rem; color:#666; }
.news-title { font-size:1rem; font-weight:700; margin-bottom:0.3rem; }
.news-text { font-size:0.9rem; color:var(--text-soft); line-height:1.7; }

/* ===== MODULI & DOCUMENTI ===== */
.moduli-grid { display:flex; flex-direction:column; gap:0.8rem; }
.modulo-btn {
  background:var(--white); border-radius:var(--radius); padding:1.3rem 1.4rem;
  display:flex; align-items:center; gap:1rem; cursor:pointer;
  box-shadow:var(--shadow-md); border:none; width:100%; text-align:left;
  transition:all 0.2s; border-bottom:3px solid transparent;
}
.modulo-btn:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.modulo-btn:active { transform:scale(0.98); }
.modulo-btn.progetto { border-bottom-color:var(--brand); }
.modulo-btn.iscrizioni { border-bottom-color:#4A90D9; }
.modulo-btn.gite { border-bottom-color:#27AE60; }
.modulo-icon {
  width:50px; height:50px; border-radius:16px; display:flex;
  align-items:center; justify-content:center; flex-shrink:0;
}
.modulo-btn.progetto .modulo-icon { background:linear-gradient(135deg,var(--brand),var(--brand-dark)); }
.modulo-btn.iscrizioni .modulo-icon { background:linear-gradient(135deg,#4A90D9,#2980b9); }
.modulo-btn.gite .modulo-icon { background:linear-gradient(135deg,#27AE60,#1e8449); }
.modulo-icon svg { stroke:white; }
.modulo-title { font-size:1.05rem; font-weight:800; color:var(--text); text-transform:uppercase; letter-spacing:0.3px; }
.modulo-sub { font-size:0.9rem; color:#666; margin-top:0.1rem; }

/* Modulo detail page */
.doc-item {
  background:var(--white); border-radius:var(--radius-sm); padding:1.1rem 1.2rem;
  display:flex; align-items:center; gap:1rem; margin-bottom:0.7rem;
  box-shadow:var(--shadow-sm); cursor:pointer; transition:all 0.2s;
}
.doc-item:hover { box-shadow:var(--shadow-md); }
.doc-icon { font-size:1.6rem; flex-shrink:0; }
.doc-info { flex:1; }
.doc-name { font-size:0.95rem; font-weight:700; margin-bottom:0.1rem; }
.doc-desc { font-size:0.9rem; color:#666; }
.doc-action {
  background:var(--brand); color:white; border:none; border-radius:8px;
  padding:0.4rem 0.8rem; font-size:0.875rem; font-weight:700; cursor:pointer;
}

/* ===== PUNTI ===== */
.umore-btn {
  font-size:2rem; cursor:pointer; padding:0.3rem; border-radius:50%;
  transition:transform 0.2s, background 0.2s; display:inline-block;
}
.umore-btn:hover { transform:scale(1.2); }
.umore-btn.selected { background:var(--brand-light); transform:scale(1.2); }
.obiettivo-item {
  display:flex; align-items:center; gap:0.6rem;
  padding:0.5rem 0; border-bottom:1px solid var(--brand-light);
}
.obiettivo-item:last-child { border-bottom:none; }
.obiettivo-check {
  width:20px; height:20px; border-radius:50%; border:2px solid var(--brand);
  cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  transition:all 0.2s;
}
.obiettivo-check.done { background:var(--brand); border-color:var(--brand); color:white; font-size:0.875rem; }
.obiettivo-text { flex:1; font-size:0.9rem; }
.obiettivo-text.done { text-decoration:line-through; opacity:0.5; }
.obiettivo-del { color:#ccc; cursor:pointer; font-size:1rem; padding:0.2rem; }
.frase-salvata {
  padding:0.6rem 0; border-bottom:1px solid var(--brand-light);
  font-size:0.9rem; line-height:1.6; color:var(--text);
}
.frase-salvata:last-child { border-bottom:none; }
.frase-salvata-del { color:#ccc; cursor:pointer; float:right; font-size:0.9rem; }

/* ===== ADMIN ===== */
#admin-panel { display:none; flex-direction:column; min-height:100vh; }
#admin-panel.show { display:flex; }
.admin-header { background:var(--brand); padding:1rem 1.2rem; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow-brand); }
.admin-header h1 { font-size:1rem; font-weight:800; color:white; }
.admin-logout { color:white; background:rgba(255,255,255,0.2); border:none; border-radius:8px; padding:0.4rem 0.8rem; font-size:0.875rem; cursor:pointer; }
.admin-tabs { display:flex; overflow-x:auto; background:white; border-bottom:2px solid var(--grey-light); scrollbar-width:none; }
.admin-tab { flex-shrink:0; padding:0.9rem 1rem; cursor:pointer; font-size:0.875rem; font-weight:700; color:#666; border-bottom:3px solid transparent; margin-bottom:-2px; transition:all 0.15s; text-transform:uppercase; letter-spacing:0.5px; }
.admin-tab.active { color:var(--brand); border-bottom-color:var(--brand); }
.admin-content { flex:1; padding:1rem; max-width:600px; margin:0 auto; width:100%; padding-bottom:2rem; }
.admin-page { display:none; }
.admin-page.active { display:block; }
.admin-section-title { font-size:0.9rem; font-weight:700; margin-bottom:1rem; color:var(--text); text-transform:uppercase; letter-spacing:0.5px; }
.form-group { margin-bottom:1rem; }
.form-label { display:block; font-size:0.8rem; font-weight:600; margin-bottom:0.4rem; color:#666; }
.form-input { width:100%; border:2px solid var(--grey-light); border-radius:10px; padding:0.75rem; font-size:0.9rem; outline:none; font-family:'Inter',sans-serif; transition:border-color 0.2s; }
.form-input:focus { border-color:var(--brand); }
select.form-input { background:white; }
.btn-success { background:var(--brand); border:none; border-radius:10px; padding:0.8rem 1.5rem; color:white; font-weight:700; font-size:0.9rem; cursor:pointer; width:100%; margin-top:0.5rem; box-shadow:var(--shadow-brand); }
.btn-danger { background:#e53935; border:none; border-radius:8px; padding:0.4rem 0.8rem; color:white; font-size:0.875rem; cursor:pointer; }
.btn-sm { background:var(--brand); border:none; border-radius:8px; padding:0.4rem 0.8rem; color:white; font-size:0.875rem; cursor:pointer; }
.admin-table { width:100%; border-collapse:collapse; background:white; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm); }
.admin-table th { background:#faf9f7; padding:0.7rem; text-align:left; font-size:0.72rem; color:#666; font-weight:700; border-bottom:1px solid var(--grey-light); text-transform:uppercase; }
.admin-table td { padding:0.7rem; font-size:0.9rem; border-bottom:1px solid #f5f5f5; vertical-align:middle; }
.admin-table tr:last-child td { border-bottom:none; }
.pin-badge { background:var(--dark); color:white; font-size:0.7rem; padding:0.2rem 0.5rem; border-radius:6px; font-weight:700; }
.status-active { color:#27AE60; font-size:0.875rem; font-weight:700; }
.status-inactive { color:#e53935; font-size:0.875rem; font-weight:700; }
.tag-pill { background:var(--brand-light); color:var(--brand); font-size:0.65rem; padding:0.15rem 0.4rem; border-radius:8px; font-weight:700; }
.wall-post-admin { background:var(--white); border-radius:var(--radius-sm); padding:1rem; margin-bottom:0.7rem; box-shadow:var(--shadow-sm); }
.wall-post-meta { font-size:0.72rem; color:#666; margin-bottom:0.4rem; }
.wall-post-text { font-size:0.9rem; line-height:1.6; margin-bottom:0.8rem; }
.wall-post-actions { display:flex; gap:0.5rem; }
.btn-approve { background:#27AE60; border:none; border-radius:8px; padding:0.4rem 0.9rem; color:white; font-size:0.875rem; cursor:pointer; font-weight:600; }
.btn-reject { background:#e53935; border:none; border-radius:8px; padding:0.4rem 0.9rem; color:white; font-size:0.875rem; cursor:pointer; font-weight:600; }
.empty-state { text-align:center; padding:2rem; color:#ccc; }
.empty-emoji { font-size:2rem; display:block; margin-bottom:0.5rem; }


/* ===== SPAZIO STUDIO ===== */
.studio-tabs { display:flex; gap:0.5rem; overflow-x:auto; padding-bottom:0.5rem; margin-bottom:1.4rem; scrollbar-width:none; }
.studio-tabs::-webkit-scrollbar { display:none; }
.studio-tab {
  flex-shrink:0; background:var(--white); border:2px solid #e8e8e8;
  border-radius:20px; padding:0.5rem 1.1rem; cursor:pointer; font-size:0.9rem;
  font-weight:700; box-shadow:var(--shadow-sm); transition:all 0.15s; color:#888;
  white-space:nowrap;
}
.studio-tab.active { border-color:var(--brand); background:var(--brand-light); color:var(--brand); box-shadow:0 2px 8px rgba(201,116,46,0.15); }
.studio-section { display:none; }
.studio-section.active { display:block; }

/* ===== DETTAGLIO ARGOMENTO (pagina intera) ===== */
.argomento-detail {
  display:none; position:fixed; inset:0; background:var(--white);
  z-index:999; overflow-y:auto; padding:0;
  -webkit-overflow-scrolling:touch;
}
.argomento-detail.open { display:block; }
.argomento-detail-header {
  position:sticky; top:0; background:var(--white);
  border-bottom:2px solid var(--brand-light);
  padding:1rem 1.1rem 0.8rem;
  display:flex; align-items:center; gap:0.8rem;
  z-index:10; box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.argomento-back-btn {
  background:var(--brand-light); border:none; border-radius:50%;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.1rem; color:var(--brand); flex-shrink:0;
}
.argomento-detail-title {
  font-size:1rem; font-weight:800; color:var(--text); line-height:1.3;
}
.argomento-detail-body {
  padding:1.2rem 1.1rem 6rem;
}
.guida-card {
  background:var(--white); border-radius:var(--radius-sm); padding:1.2rem;
  margin-bottom:0.8rem; box-shadow:var(--shadow-sm);
  border-left:4px solid var(--brand);
}
.guida-card h3 { font-size:1rem; font-weight:800; margin-bottom:0.7rem; color:var(--text); }
.guida-card p { font-size:0.92rem; line-height:1.8; color:#444; margin-bottom:0.6rem; }
.guida-card p:last-child { margin-bottom:0; }
.guida-step {
  display:flex; gap:0.8rem; align-items:flex-start;
  background:var(--grey-bg); border-radius:10px; padding:0.8rem; margin-bottom:0.6rem;
}
.step-num {
  background:var(--brand); color:white; border-radius:50%;
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  font-size:0.875rem; font-weight:800; flex-shrink:0; margin-top:1px;
}
.step-text { font-size:0.9rem; line-height:1.7; color:#333; }
.step-text strong { display:block; font-weight:700; margin-bottom:0.2rem; }
.faq-item { background:var(--white); border-radius:var(--radius-sm); padding:1rem; margin-bottom:0.6rem; box-shadow:var(--shadow-sm); cursor:pointer; }
.faq-q { font-size:0.95rem; font-weight:700; display:flex; justify-content:space-between; align-items:center; line-height:1.5; gap:0.5rem; }
.faq-a { font-size:0.9rem; color:#555; line-height:1.8; margin-top:0.7rem; display:none; }
.faq-item.open .faq-a { display:block; }
.faq-arrow { transition:transform 0.2s; flex-shrink:0; color:#ccc; }
.faq-item.open .faq-arrow { transform:rotate(180deg); }
.classe-card {
  background:var(--white); border-radius:var(--radius-sm); padding:1.2rem;
  margin-bottom:0.8rem; box-shadow:var(--shadow-sm);
}
.classe-card h3 { font-size:0.95rem; font-weight:800; margin-bottom:0.5rem; color:var(--brand); text-transform:uppercase; letter-spacing:0.5px; }
.classe-card p { font-size:0.9rem; line-height:1.8; color:#444; }
.tool-pill {
  display:inline-block; background:var(--brand-light); color:var(--brand);
  font-size:0.875rem; font-weight:700; padding:0.25rem 0.7rem;
  border-radius:20px; margin:0.2rem 0.2rem 0.2rem 0;
}
.tool-pill.blue { background:#e8f0fd; color:#4A90D9; }
.tool-pill.green { background:#e8f8f0; color:#27AE60; }
.tool-pill.purple { background:#f3e8fd; color:#8E44AD; }


.materia-section { display:none; }
.materia-section.active { display:block; }


/* ===== ACCORDION ===== */
.accordion-item { background:var(--white); border-radius:var(--radius-sm); margin-bottom:0.6rem; box-shadow:var(--shadow-sm); overflow:hidden; }
.accordion-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.1rem; cursor:pointer; font-weight:700; font-size:0.95rem; color:var(--text); gap:0.5rem; }
.accordion-header:active { background:var(--grey-bg); }
.acc-arrow { color:#ccc; font-size:0.8rem; transition:transform 0.25s; flex-shrink:0; }
.accordion-item.open .acc-arrow { transform:rotate(180deg); color:var(--brand); }
.accordion-body { display:none; padding:0 1.1rem 1.1rem; }
.accordion-item.open .accordion-body { display:block; }
.mappa-box { background:#f8f4f0; border-radius:10px; padding:0.8rem; margin-top:0.4rem; }
.mappa-title { font-weight:700; font-size:0.9rem; margin-bottom:0.4rem; color:var(--brand); }
.mappa-content { font-size:0.8rem; line-height:1.9; color:#444; font-family:monospace; }
.formulario-box { background:#1A1A2E; border-radius:10px; padding:0.9rem; }
.form-title { font-weight:700; font-size:0.9rem; margin-bottom:0.5rem; color:#C9742E; }
.form-content { font-size:0.8rem; line-height:1.9; color:#e8e8e8; font-family:monospace; }
.link-card { display:flex; align-items:center; gap:0.8rem; background:#f8f4f0; border-radius:10px; padding:0.8rem; text-decoration:none; color:var(--text); font-size:1.2rem; }


.subtab-section { display:none; }
.subtab-section.active { display:block; }

/* ===== MODALS ===== */
.modal {
  position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:800;
  display:none; align-items:flex-end; justify-content:center;
  backdrop-filter:blur(4px);
}
.modal.show { display:flex; }
.modal-box {
  background:white; border-radius:24px 24px 0 0; width:100%; max-width:600px;
  max-height:92vh; overflow-y:auto; padding:1.5rem;
  animation:slideModal 0.35s cubic-bezier(0.34,1.2,0.64,1);
}
@keyframes slideModal { from { transform:translateY(100%); opacity:0; } to { transform:translateY(0); opacity:1; } }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; }
.modal-title { font-size:1.3rem; font-weight:900; color:var(--text); letter-spacing:-0.3px; }
.modal-close {
  background:var(--grey-light); border:none; border-radius:50%; width:36px; height:36px;
  font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#666;
}

/* TOAST */
.success-toast {
  position:fixed; bottom:calc(5rem + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--dark); color:white; padding:0.8rem 1.5rem; border-radius:50px;
  font-size:0.9rem; font-weight:600; opacity:0; transition:all 0.3s; z-index:900; white-space:nowrap;
  box-shadow:var(--shadow-lg);
}
.success-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== ✦ NAVBAR ===== */
.nav-momento-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:.2rem 0;cursor:pointer}
.nav-momento-btn{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#C9742E,#0D9488,#7C3AED);background-size:300% 300%;animation:mGrad 5s ease infinite,mPulse 3s ease-in-out infinite;box-shadow:0 0 20px rgba(124,58,237,.45);display:flex;align-items:center;justify-content:center;margin-top:-12px;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .15s}
.nav-momento-btn:active{transform:scale(.88)}
.nav-momento-star{display:block;animation:mSpin 10s linear infinite;filter:drop-shadow(0 0 5px rgba(255,255,255,.7))}
@keyframes mGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes mPulse{0%,100%{transform:scale(1);box-shadow:0 0 18px rgba(124,58,237,.4)}50%{transform:scale(1.09);box-shadow:0 0 30px rgba(201,116,46,.55)}}
@keyframes mSpin{to{transform:rotate(360deg)}}
.nav-momento-btn.holding{animation:mGrad 5s ease infinite,mHold .4s ease-in-out infinite;box-shadow:0 0 35px rgba(124,58,237,.8)}
@keyframes mHold{0%,100%{transform:scale(1.12)}50%{transform:scale(1.2)}}

/* ===== IL MOMENTO OVERLAY ===== */
#ilMomento{position:fixed;inset:0;z-index:300;display:none;flex-direction:column;overflow:hidden}
#ilMomento.show{display:flex}
#ilMomento.out{animation:mOut .4s ease forwards}
@keyframes mOut{to{opacity:0;transform:scale(.97)}}
.im-header{position:absolute;top:0;left:0;right:0;padding:calc(1.1rem + env(safe-area-inset-top)) 1.4rem .8rem;display:flex;justify-content:space-between;align-items:center;z-index:5}
.im-counter{font-size:.7rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.75);background:rgba(0,0,0,.18);padding:.28rem .8rem;border-radius:20px;backdrop-filter:blur(8px)}
.im-close{width:42px;height:42px;border-radius:50%;border:none;background:rgba(0,0,0,.25);color:#fff;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.im-close:active{transform:scale(.88)}
.im-secret{position:absolute;top:calc(3.8rem + env(safe-area-inset-top));right:1.2rem;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);border-radius:20px;padding:.22rem .8rem;color:#fff;font-size:.65rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;z-index:5;display:none}
.im-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5.5rem 2.2rem 3.5rem;text-align:center;animation:mIn .55s cubic-bezier(.34,1.2,.64,1)}
@keyframes mIn{from{opacity:0;transform:translateY(22px) scale(.95)}to{opacity:1;transform:none}}
.im-footer{position:absolute;bottom:0;left:0;right:0;padding:.8rem 2rem calc(1.3rem + env(safe-area-inset-bottom));display:flex;justify-content:center;align-items:center;z-index:5}
.im-exit{padding:.65rem 2rem;border-radius:30px;border:1.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.1);color:#fff;font-size:.95rem;font-weight:700;cursor:pointer;backdrop-filter:blur(8px);transition:all .2s;letter-spacing:.2px}
.im-exit:active{transform:scale(.92)}
.im-exit.off{display:none}
.im-counter{font-size:.92rem;font-weight:700;color:rgba(255,255,255,.85);background:rgba(0,0,0,.22);padding:.35rem .85rem;border-radius:20px;backdrop-filter:blur(8px);letter-spacing:.3px}
/* UI comune */
.im-area{width:100%;max-width:330px;min-height:90px;background:rgba(255,255,255,.13);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.28);border-radius:14px;padding:.9rem 1.1rem;color:#fff;font-size:.95rem;font-family:'Inter',sans-serif;outline:none;resize:none;line-height:1.6;margin-top:1rem}
.im-area::placeholder{color:rgba(255,255,255,.38)}
.im-area:focus{border-color:rgba(255,255,255,.65)}
.im-opts{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:330px;margin-top:1.2rem}
.im-opt{background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.22);border-radius:14px;padding:.9rem 1.1rem;color:#fff;font-size:.95rem;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;text-align:left;transition:all .2s}
.im-opt:active{transform:scale(.97)}
.im-opt.picked{background:rgba(255,255,255,.32);border-color:rgba(255,255,255,.6)}
.im-pct{font-size:.76rem;opacity:.65;margin-top:.25rem;font-weight:500;display:none}
.im-opt.picked .im-pct{display:block}
.im-pills{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:1.5rem}
.im-pill{background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.28);border-radius:50px;padding:.55rem 1.3rem;color:#fff;font-size:.92rem;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s}
.im-pill.picked,.im-pill:active{background:rgba(255,255,255,.4);transform:scale(1.05)}
.im-timer-num{font-size:4.5rem;font-weight:900;line-height:1;margin-bottom:.9rem;transition:color .3s}
.im-timer-num.red{color:#FF6B6B}
.im-dot{width:13px;height:13px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 18px rgba(255,255,255,.8);transition:all 1s cubic-bezier(.34,1.2,.64,1)}
.im-dot.boom{width:200vmax;height:200vmax;border-radius:50%;margin:-100vmax}
.im-nero-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#1a1a1a;opacity:0;transition:opacity 1s ease .8s;pointer-events:none;padding:2rem;text-align:center}
.im-nero-msg.show{opacity:1}
@keyframes doorSwing{from{transform:perspective(400px) rotateY(-90deg);opacity:0}to{transform:perspective(400px) rotateY(0);opacity:1}}
.im-quiz-ans{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.22);border-radius:14px;padding:.7rem 1.1rem;color:#fff;font-size:.88rem;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s;margin:.35rem 0;width:100%;max-width:310px}
.im-quiz-ans.right{background:rgba(39,174,96,.45);border-color:#27AE60}
.im-quiz-ans.wrong{background:rgba(229,57,53,.35);border-color:#e53935}

/* ===== MINI-GIOCHI ===== */
/* --- BOLLA --- */
.mg-bolla-wrap{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%}
.mg-bolla{width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.6),rgba(255,255,255,.1));border:2px solid rgba(255,255,255,.5);cursor:pointer;transition:width .05s,height .05s,box-shadow .05s;box-shadow:0 0 20px rgba(255,255,255,.3);position:relative;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);font-size:.8rem;font-weight:700;user-select:none;-webkit-tap-highlight-color:transparent}
.mg-bolla.esplosa{animation:bollaEsplodi .4s ease forwards}
@keyframes bollaEsplodi{0%{transform:scale(1)}50%{transform:scale(1.5);opacity:.5}100%{transform:scale(0);opacity:0}}
.mg-bolla-hint{color:rgba(255,255,255,.65);font-size:.85rem;font-style:italic}
/* --- RESPIRO --- */
.mg-respiro-cerchio{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.25),rgba(255,255,255,.05));border:2px solid rgba(255,255,255,.4);transition:width 4s ease-in-out,height 4s ease-in-out,box-shadow 4s ease-in-out;box-shadow:0 0 30px rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9rem;font-weight:700}
.mg-respiro-fase{color:rgba(255,255,255,.8);font-size:1.1rem;font-weight:800;letter-spacing:1px;margin-top:1.5rem;min-height:1.5rem}
.mg-respiro-cicli{color:rgba(255,255,255,.45);font-size:.8rem;margin-top:.5rem}
/* --- STELLE --- */
#mg-stelle-canvas{position:relative;width:300px;height:260px;cursor:pointer}
.mg-stella{position:absolute;font-size:1.4rem;cursor:pointer;transition:transform .15s,opacity .3s;user-select:none;-webkit-tap-highlight-color:transparent}
.mg-stella:active{transform:scale(1.4)}
.mg-stella.presa{animation:stellaPresa .3s ease forwards}
@keyframes stellaPresa{0%{transform:scale(1.5)}50%{transform:scale(2);filter:brightness(2)}100%{transform:scale(0);opacity:0}}
.mg-stelle-score{color:#fff;font-size:1.5rem;font-weight:900;margin-bottom:.5rem}
.mg-stelle-timer{color:rgba(255,255,255,.6);font-size:.85rem}
/* --- SASSO CARTA FORBICE --- */
.mg-scf-arena{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}
.mg-scf-mosse{display:flex;gap:1rem;justify-content:center;margin-top:.5rem}
.mg-scf-btn{width:70px;height:70px;border-radius:20px;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.25);font-size:2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;-webkit-tap-highlight-color:transparent}
.mg-scf-btn:active{transform:scale(.9);background:rgba(255,255,255,.3)}
.mg-scf-vs{display:flex;align-items:center;gap:1.5rem;margin:.8rem 0}
.mg-scf-emoji{font-size:3rem;min-width:60px;text-align:center}
.mg-scf-risultato{font-size:1.1rem;font-weight:800;color:#fff;min-height:1.5rem;text-align:center}
.mg-scf-commento{font-size:.85rem;color:rgba(255,255,255,.65);font-style:italic;max-width:260px;min-height:1.2rem;text-align:center;margin-top:.3rem}
.mg-scf-score{color:rgba(255,255,255,.6);font-size:.8rem;margin-top:.5rem}
/* --- TAP PRECISO --- */
.mg-tap-wrap{display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.mg-tap-ring-outer{width:200px;height:200px;border-radius:50%;border:3px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;position:relative}
.mg-tap-ring{width:200px;height:200px;border-radius:50%;border:4px solid rgba(255,255,255,.7);position:absolute;top:0;left:0;transform:scale(1);transition:none}
.mg-tap-target{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.15);border:3px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;font-weight:800}
.mg-tap-btn{background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.4);border-radius:50px;padding:.7rem 2rem;color:#fff;font-size:1rem;font-weight:800;cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s;-webkit-tap-highlight-color:transparent}
.mg-tap-btn:active{transform:scale(.95)}
.mg-tap-result{font-size:1.2rem;font-weight:900;color:#fff;min-height:1.8rem}
/* --- MESCOLA COLORE --- */
.mg-colore-wrap{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:300px}
.mg-colore-target{width:80px;height:80px;border-radius:20px;border:3px solid rgba(255,255,255,.4);margin-bottom:.3rem}
.mg-colore-tuo{width:80px;height:80px;border-radius:20px;border:3px solid rgba(255,255,255,.4);transition:background .1s}
.mg-colore-label{color:rgba(255,255,255,.6);font-size:.7rem;letter-spacing:1px;text-transform:uppercase}
.mg-slider-wrap{width:100%;display:flex;flex-direction:column;gap:.7rem}
.mg-slider-row{display:flex;align-items:center;gap:.7rem}
.mg-slider-letter{color:#fff;font-weight:800;font-size:.9rem;width:16px}
.mg-slider{-webkit-appearance:none;flex:1;height:6px;border-radius:3px;outline:none;cursor:pointer;transition:background .1s}
.mg-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.mg-colore-score{font-size:1.2rem;font-weight:900;color:#fff;min-height:1.8rem}
/* --- FERMA IL TEMPO --- */
.mg-barra-wrap{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:300px}
.mg-barra-track{width:100%;height:16px;background:rgba(255,255,255,.15);border-radius:8px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.2)}
.mg-barra-fill{height:100%;border-radius:8px;width:0%;background:linear-gradient(90deg,#7C3AED,#C9742E);transition:none;position:relative}
.mg-barra-target{position:absolute;top:-8px;bottom:-8px;width:3px;background:rgba(255,255,255,.9);border-radius:2px;left:50%}
.mg-barra-zona{position:absolute;top:0;bottom:0;background:rgba(255,255,255,.15);border-radius:8px}
.mg-barra-btn{background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.4);border-radius:50px;padding:.7rem 2.5rem;color:#fff;font-size:1rem;font-weight:800;cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s;-webkit-tap-highlight-color:transparent}
.mg-barra-btn:active{transform:scale(.95)}
.mg-barra-result{font-size:1.2rem;font-weight:900;color:#fff;min-height:1.8rem}
.mg-barra-hint{color:rgba(255,255,255,.55);font-size:.82rem;font-style:italic}

/* POPUP AVVISO */
#avvisoPopup {
  position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:900;
  display:none; align-items:center; justify-content:center; padding:1.5rem;
  backdrop-filter:blur(6px);
}
#avvisoPopup.show { display:flex; }
.avviso-box {
  background:white; border-radius:var(--radius); padding:1.5rem; width:100%; max-width:400px;
  box-shadow:var(--shadow-lg); animation:popIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
  border-top:5px solid #e53935;
}
@keyframes popIn { from { transform:scale(0.8); opacity:0; } to { transform:scale(1); opacity:1; } }
.avviso-close {
  float:right; background:var(--grey-light); border:none; border-radius:50%;
  width:32px; height:32px; cursor:pointer; font-size:1rem; font-weight:700; color:#666;
}
.avviso-title { font-size:1.2rem; font-weight:900; color:#e53935; margin-bottom:0.8rem; }
.avviso-text { font-size:0.95rem; line-height:1.8; color:var(--text); }
.avviso-date { font-size:0.875rem; color:#666; margin-top:0.8rem; }



/* Fix sfondo nero logogiostra */
img[src="logogiostra.png"] { mix-blend-mode: multiply; }