:root {
  /* === Ocean Dark Palette === */
  --bg-main: #0D1117;
  --bg-card: #161B27;
  --border-glass: rgba(255, 255, 255, 0.08);
  --primary: #00C9A7;
  --primary-rgb: 0, 201, 167;
  --primary-hover: #00dbb7;
  --secondary: #845EF7;
  --text-main: #F0F4F8;
  --text-muted: #b0b8c4;
  --danger: #ff4757;
  --success: #2ed573;
  --warning: #ffa502;
  --font-family: 'Plus Jakarta Sans', sans-serif;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --base-font-size: 16px;
}

.light-theme {
  /* === Forest Focus Palette === */
  --bg-main: #F4FBF4;
  --bg-card: #FFFFFF;
  --border-glass: rgba(20, 28, 20, 0.08);
  --primary: #51CF66;
  --primary-rgb: 81, 207, 102;
  --primary-hover: #40c057;
  --secondary: #339AF0;
  --text-main: #141C14;
  --text-muted: #3a453a;
  --shadow-glass: 0 8px 32px 0 rgba(20, 28, 20, 0.07);
}

/* Contrasto migliorato per accessibilità */
.text-muted, [style*="color:var(--text-muted)"] {
    opacity: 1;
}

/* === Light-mode component overrides === */
.light-theme .form-control {
  background: #FFFFFF;
  border-color: rgba(20, 28, 20, 0.15);
}
.light-theme .form-control:focus {
  box-shadow: 0 0 0 3px rgba(81, 207, 102, 0.2);
}
.light-theme .stat-box {
  background: #FFFFFF;
  border-color: rgba(20, 28, 20, 0.1);
  box-shadow: 0 4px 12px rgba(20, 28, 20, 0.04);
}
.light-theme .todo-item {
  background: #FFFFFF;
  border: 1px solid rgba(20, 28, 20, 0.05);
}
.light-theme .block-card {
  background: #FFFFFF;
  border-color: rgba(20, 28, 20, 0.1);
}
.light-theme .block-header {
  background: #F8FCF8;
}
.light-theme .block-header:hover {
  background: #FFFFFF;
}
.light-theme .block-body {
  background: #FFFFFF;
}
.light-theme .chip-group {
  background: #FFFFFF;
  border: 1px solid rgba(20, 28, 20, 0.08);
}
.light-theme .materia-card {
  background: #FFFFFF;
}
.light-theme .materia-header {
  background: #F8FCF8;
}
.light-theme .materia-header:hover {
  background: #FFFFFF;
}
.light-theme .info-card {
  background: #FFFFFF;
  border-color: rgba(20, 28, 20, 0.08);
}
.light-theme .info-card-header:hover {
  background: #F8FCF8;
}
.light-theme .nav-item:hover {
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(20, 28, 20, 0.04);
}
.light-theme .nav-item.active {
  background: #FFFFFF;
  border: 1px solid rgba(81, 207, 102, 0.2);
  box-shadow: 0 4px 12px rgba(81, 207, 102, 0.1);
}
.light-theme .btn-secondary {
  background: #FFFFFF;
  border-color: rgba(20, 28, 20, 0.12);
}
.light-theme .btn-secondary:hover {
  background: #F8FCF8;
}
.light-theme .glass-card:hover {
  border-color: rgba(20, 28, 20, 0.18);
}
.light-theme .icon-btn {
  background: #FFFFFF;
  border-color: rgba(20, 28, 20, 0.1);
}
.light-theme .icon-btn:hover {
  background: #F0F7F0;
}
.light-theme .suggestion-box {
  background: rgba(51, 154, 240, 0.12);
  color: #1a4d70;
}
.light-theme .slider {
  background-color: rgba(20, 28, 20, 0.2);
}
.light-theme .part-row {
  border-bottom-color: rgba(20, 28, 20, 0.08);
}
.light-theme td {
  border-bottom-color: rgba(20, 28, 20, 0.08);
}
.light-theme .setting-item {
  border-bottom-color: rgba(20, 28, 20, 0.08);
}

/* Study Plan Color Optimization - Better Contrast */
.light-theme .ps-badge.riprovare {
  background: #ff4d4d;
  color: #fff;
  border: none;
  font-weight: 700;
}
.light-theme .ps-badge.avvicina {
  background: rgba(230, 126, 34, 0.15);
  color: #a04000; /* dark orange for better readability against light background */
  border: 1px solid rgba(230, 126, 34, 0.3);
  font-weight: 700;
}
.light-theme tr.ps-urgent {
  background: rgba(255, 71, 87, 0.12) !important;
  border: 1px solid rgba(255, 71, 87, 0.3);
}
.light-theme tr.ps-urgent td {
  color: #cc0000;
  font-weight: 600;
}

.light-theme .onboarding-fullscreen {
  background: #F0F7F0 !important;
}
.light-theme .onboarding-card {
  background: #FFFFFF !important;
}
.light-theme .onb-choice-btn,
.light-theme .onb-year-btn,
.light-theme .onb-area-btn,
.light-theme .onb-course-btn,
.light-theme .onb-ciclo-choice {
  background: #FFFFFF !important;
  border-color: rgba(20, 28, 20, 0.12) !important;
}
.light-theme .onb-choice-btn:hover,
.light-theme .onb-year-btn:hover,
.light-theme .onb-area-btn:hover,
.light-theme .onb-course-btn:hover,
.light-theme .onb-ciclo-choice:hover {
  background: #F8FCF8 !important;
}
.light-theme .progress-bg {
  background: rgba(20, 28, 20, 0.12);
}
.light-theme .st-toast {
  background: rgba(255, 255, 255, 0.98);
  border-color: #51CF66;
  color: var(--text-main);
  box-shadow: 0 10px 40px rgba(20, 28, 20, 0.15);
}
.light-theme .content::-webkit-scrollbar-thumb {
  background: rgba(20, 28, 20, 0.2);
}
.light-theme .modal-overlay {
  background: rgba(20, 28, 20, 0.6);
}
/* Deco blobs — soften for light mode */
.light-theme::before {
  background: radial-gradient(circle, rgba(81, 207, 102, 0.1) 0%, rgba(240,247,240,0) 70%) !important;
}
.light-theme::after {
  background: radial-gradient(circle, rgba(51, 154, 240, 0.08) 0%, rgba(240,247,240,0) 70%) !important;
}

/* Visibility classes */
.tipo-superiori .sezione-universitaria { display: none !important; }
.tipo-universitario .sezione-superiore { display: none !important; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-family);
  font-size: var(--base-font-size);
  background-color: var(--bg-main);
  color: var(--text-main);
  height: 100vh;
  overflow: hidden;
  transition: background-color var(--transition), color var(--transition), font-size 0.2s ease;
}

/* Deco blobs */
body::before, body::after {
  content: ''; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; padding: 40vw; filter: blur(100px);
}
body::before { top: -20vh; left: -10vw; background: radial-gradient(circle, rgba(124, 92, 191, 0.15) 0%, rgba(15,15,19,0) 70%); }
body::after { bottom: -20vh; right: -10vw; background: radial-gradient(circle, rgba(0, 212, 170, 0.1) 0%, rgba(15,15,19,0) 70%); }

.app-container { display: flex; height: 100vh; width: 100vw; }

/* Sidebar */
.sidebar {
  width: 280px;
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid var(--border-glass);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
  z-index: 100;
  transition: transform 0.3s ease;
}

.brand { display: flex; align-items: center; gap: 0.75rem; font-size: 1.5rem; font-weight: 700; margin-bottom: 2rem; padding: 0 0.5rem; color: var(--text-main); }
.brand svg { color: var(--primary); width: 28px; height: 28px; }

.nav-links { list-style: none; flex: 1; overflow-y: auto; padding-right: 5px; }
.nav-links::-webkit-scrollbar { width: 4px; }
.nav-links::-webkit-scrollbar-thumb { background: var(--border-glass); border-radius: 4px; }

.nav-subheader { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 1.5rem 0 0.5rem 0.5rem; font-weight: 600; }

.nav-item {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem 1rem; margin-bottom: 0.25rem;
  border-radius: var(--radius-md); border: none; background: transparent; color: var(--text-muted);
  font-family: inherit; font-size: 0.95rem; font-weight: 500; text-align: left; cursor: pointer;
  transition: var(--transition);
}
.nav-item svg { width: 18px; height: 18px; transition: var(--transition); }
.nav-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-main); }
.nav-item.active { background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), rgba(var(--primary-rgb), 0.08)); color: var(--text-main); border: 1px solid var(--border-glass); }
.nav-item.active svg { color: var(--primary); stroke-width: 2.5px; }



.premium-status { margin-top: auto; padding-top: 1.5rem; }
.btn-primary { 
  width: 100%; padding: 0.875rem; border-radius: var(--radius-md); border: none;
  background: linear-gradient(135deg, var(--secondary), var(--primary)); color: #fff;
  font-weight: 600; font-family: inherit; cursor: pointer; transition: var(--transition);
  box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3); display: flex; justify-content: center; align-items: center; gap: 0.5rem;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4); }
.btn-secondary {
  background: rgba(255, 255, 255, 0.05); color: var(--text-main); border: 1px solid var(--border-glass);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.1); }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; border-radius: var(--radius-sm); }

/* Main Content */
.main-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }

.topbar {
  display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem;
  background: transparent; z-index: 10;
}
.topbar h1 { font-size: 1.5rem; font-weight: 700; }
.actions { display: flex; gap: 1rem; align-items: center; }
.icon-btn { 
  background: var(--bg-card); border: 1px solid var(--border-glass); border-radius: 50%;
  width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;
  color: var(--text-main); cursor: pointer; transition: var(--transition);
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.1); transform: scale(1.05); }


.content { flex: 1; padding: 0 2rem 2rem; overflow-y: auto; overflow-x: hidden; position: relative; }
.content::-webkit-scrollbar { width: 6px; }
.content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 6px; }

/* Views */
.view { display: none; animation: fadeIn 0.4s ease forwards; }
.view.active { display: block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0);    }
}

/* ==========================================
   FORM CONTROLS & DATE PICKER
   ========================================== */
input[type="date"]::-webkit-calendar-picker-indicator {
    background-color: var(--primary);
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    cursor: pointer;
}
input[type="date"] {
    color-scheme: dark; /* Fallback for dark mode calendar popup */
}
.light-theme input[type="date"] {
    color-scheme: light; /* Fallback for light mode calendar popup */
}

/* Cards & Forms */
.glass-card {
  background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass); border-radius: var(--radius-lg); padding: 1.5rem;
  box-shadow: var(--shadow-glass); transition: var(--transition); margin-bottom: 1.5rem;
}
.glass-card:hover { border-color: rgba(255, 255, 255, 0.15); transform: translateY(-2px); }

.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.card-title { font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.form-control {
  width: 100%; padding: 0.75rem 1rem; border-radius: var(--radius-md); background: rgba(0,0,0,0.2);
  border: 1px solid var(--border-glass); color: var(--text-main); font-family: inherit; font-size: 1rem;
  transition: var(--transition); outline: none;
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.2); }

/* Password visibility toggle */
.password-wrapper {
  position: relative;
  width: 100%;
  display: block;
}
.password-wrapper .form-control {
  padding-right: 3rem;
}
.password-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  transition: var(--transition);
  z-index: 5;
}
.password-toggle:hover {
  color: var(--primary);
  transform: translateY(-50%) scale(1.1);
}
.password-toggle i, .password-toggle svg {
  width: 20px;
  height: 20px;
}

/* Grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

/* Stat Cards */
.stat-box {
  padding: 1.5rem; border-radius: var(--radius-md); background: rgba(255,255,255,0.03); 
  border: 1px solid var(--border-glass); text-align: center; display: flex; flex-direction: column; gap: 0.5rem;
}
.stat-value { font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, var(--secondary), var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.stat-label { font-size: 0.875rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em;}



/* Table styles */
.table-container { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { padding: 1rem; border-bottom: 1px solid var(--border-glass); color: var(--text-muted); font-size: 0.875rem; font-weight: 600; }
td { padding: 1rem; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--text-main); font-size: 0.95rem; }
tr:last-child td { border-bottom: none; }
.delete-btn { background: rgba(255, 71, 87, 0.1); color: var(--danger); border: none; padding: 0.4rem; border-radius: var(--radius-sm); cursor: pointer; transition: 0.2s; display: inline-flex; }
.delete-btn:hover { background: var(--danger); color: white; }

/* Range Slider */
input[type="range"] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: var(--primary); cursor: pointer; margin-top: -8px; box-shadow: 0 0 10px rgba(0, 212, 170, 0.5); }
input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: var(--border-glass); border-radius: 2px; }

/* Checkbox */
.checkbox-wrap { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.checkbox-wrap input { width: 18px; height: 18px; accent-color: var(--primary); }

/* Pomodoro Timer */
.timer-display { font-size: 5rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; margin: 2rem 0; letter-spacing: -2px; }
.timer-controls { display: flex; justify-content: center; gap: 1rem; }
.timer-controls button { width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: none; cursor: pointer; font-size: 1.5rem; color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: var(--transition); }
#btn-start { background: linear-gradient(135deg, var(--success), #20bf6b); }
#btn-pause { background: linear-gradient(135deg, var(--warning), #f39c12); }
#btn-reset { background: linear-gradient(135deg, var(--danger), #eb3b5a); }

/* Progress Bar */
.progress-bg { width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--secondary), var(--primary)); width: 0%; transition: width 0.5s ease; }



/* Mobile nav */
.mobile-menu-btn { display: none; background: transparent; border: none; color: white; font-size: 1.5rem; }

@media (max-width: 768px) {
  .app-container { flex-direction: column; }
  .sidebar { 
    position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 70px; 
    flex-direction: row; padding: 0.5rem; border-right: none; border-top: 1px solid var(--border-glass); 
    align-items: center; justify-content: space-around; z-index: 100;
  }
  .brand, .premium-status { display: none; }
  .nav-links { display: flex; width: 100%; justify-content: space-around; padding: 0; overflow: visible; align-items: center;}
  .nav-subheader { display: none; }
  .nav-item { flex-direction: column; gap: 0.25rem; font-size: 0.65rem; text-align: center; padding: 0.25rem; border-radius: var(--radius-sm); }
  .nav-item span { display: block; max-width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-item.active { border: none; background: transparent; }
  .nav-item.active svg { transform: translateY(-3px); filter: drop-shadow(0 4px 6px rgba(0, 212, 170, 0.4)); }
  .main-wrapper { padding-bottom: 70px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .content { padding: 0 1rem 1rem; }
  .topbar { padding: 1rem; }
  .stat-value { font-size: 2rem; }
  
  .responsive-table thead { display: none; }
  .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; text-align: right; }
  .responsive-table tr { margin-bottom: 1rem; border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 1rem; background: rgba(255,255,255,0.02); }
  .responsive-table td { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.02); border-top: none; }
  .responsive-table td:last-child { border-bottom: none; }
  .responsive-table td::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); text-align: left; }
}

/* Media Superiori Cards */
.materia-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition);
}
.materia-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.1);
}
.materia-header:hover {
  background: rgba(255, 255, 255, 0.05);
}
.materia-title {
  font-weight: 600;
  font-size: 1.1rem;
}
.materia-avg {
  font-size: 1.25rem;
  font-weight: 800;
  margin-right: 1rem;
}
.materia-avg.red { color: var(--danger); }
.materia-avg.yellow { color: var(--warning); filter: drop-shadow(0 0 4px rgba(255,165,2,0.4)); }
.materia-avg.green { color: var(--success); filter: drop-shadow(0 0 4px rgba(46,213,115,0.4)); }

.materia-body {
  padding: 1.5rem;
  border-top: 1px solid var(--border-glass);
  display: none;
}
.voto-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.25rem;
}
.voto-chip.scritto { background: rgba(52, 152, 219, 0.2); color: #3498db; border: 1px solid rgba(52, 152, 219, 0.3); }
.voto-chip.orale { background: rgba(46, 213, 115, 0.2); color: #2ed573; border: 1px solid rgba(46, 213, 115, 0.3); }
.voto-chip.pratico { background: rgba(255, 165, 2, 0.2); color: #ffa502; border: 1px solid rgba(255, 165, 2, 0.3); }

.suggestion-box {
  background: rgba(124, 92, 191, 0.1);
  border-left: 4px solid var(--secondary);
  padding: 1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top: 1rem;
  font-size: 0.9rem;
}

/* Piano Studio */
.ps-badge {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.85rem;
    border-radius: 20px; font-size: 0.85rem; font-weight: 600;
}
.ps-badge.dainiziare { background: rgba(52, 152, 219, 0.2); color: #3498db; border: 1px solid rgba(52, 152, 219, 0.3); }
.ps-badge.incorso { background: rgba(155, 89, 182, 0.2); color: #9b59b6; border: 1px solid rgba(155, 89, 182, 0.3); }
.ps-badge.lontano { background: rgba(241, 196, 15, 0.2); color: #f1c40f; border: 1px solid rgba(241, 196, 15, 0.3); }
.ps-badge.avvicina { background: rgba(230, 126, 34, 0.2); color: #c0621a; border: 1px solid rgba(230, 126, 34, 0.3); }
.ps-badge.superato { background: rgba(46, 204, 113, 0.2); color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.3); }
.ps-badge.riprovare { background: rgba(231, 76, 60, 0.2); color: #e74c3c; border: 1px solid rgba(231, 76, 60, 0.3); }

tr.ps-urgent { background: rgba(231, 76, 60, 0.08) !important; border: 1px solid rgba(231, 76, 60, 0.2); }

/* ========================================= */
/* ONBOARDING & DASHBOARD WIDGETS */
/* ========================================= */
.onboarding-fullscreen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: #0f0f13 !important; /* Totalmente opaco per evitare ghosting della dashboard */
  z-index: 9999; display: flex; justify-content: center; align-items: center; padding: 1rem;
}
.onboarding-card {
  width: 100%; max-width: 500px; transform: scale(0.95); opacity: 0; pointer-events: none;
  position: absolute; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: none; background: #1a1a24 !important; /* Schede opache */
}
.onboarding-card.active-step { transform: scale(1); opacity: 1; pointer-events: all; position: relative; display: block; }

.onb-header { text-align: center; margin-bottom: 2rem; }
.onb-icon { width: 42px; height: 42px; color: var(--primary); margin-bottom: 0.5rem; }
.onb-icon.smaller { width: 32px; height: 32px; }

.onb-choice-btn, .onb-year-btn, .onb-area-btn, .onb-course-btn, .onb-ciclo-choice {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important;
  padding: 1.2rem 0.5rem !important; border-radius: var(--radius-md) !important; 
  background: rgba(255,255,255,0.05) !important; border: 1px solid var(--border-glass) !important; 
  color: var(--text-main) !important; font-weight: 600 !important; cursor: pointer !important; transition: 0.2s !important;
  font-family: inherit !important; min-height: 120px; width: 100% !important;
  text-align: center !important;
}

.onb-choice-btn i, .onb-choice-btn svg { width: 38px; height: 38px; color: var(--primary); }

.onb-choice-btn:hover, .onb-year-btn:hover, .onb-area-btn:hover, .onb-course-btn:hover, .onb-ciclo-choice:hover { 
  background: rgba(255,255,255,0.1) !important; border-color: var(--primary) !important; transform: translateY(-3px); 
}

.onb-course-grid { 
  display: grid !important; 
  grid-template-columns: repeat(3, 1fr) !important; 
  gap: 0.75rem !important; 
  width: 100% !important;
}

.onb-choice-btn.selected, .onb-year-btn.selected, .onb-area-btn.selected, .onb-course-btn.selected, .onb-ciclo-choice.selected { 
  border-color: var(--primary) !important; background: rgba(var(--primary-rgb), 0.15) !important; color: var(--primary) !important; 
  box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.25); 
}

.onb-back { position: absolute; top: 1rem; left: 1rem; }

/* Griglie specifiche fissate */
.onb-year-grid { 
  display: grid !important; 
  grid-template-columns: repeat(3, 1fr) !important; 
  gap: 0.75rem !important; 
  width: 100% !important;
  align-items: stretch !important;
}
.onb-area-grid { 
  display: grid !important; 
  grid-template-columns: repeat(2, 1fr) !important; 
  gap: 0.75rem !important; 
  width: 100% !important;
  align-items: stretch !important;
}

.onb-year-num { font-size: 1.8rem; font-weight: 800; line-height: 1; color: var(--primary); margin-bottom: 0.2rem; }
.onb-year-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.onb-area-icon { font-size: 2rem; line-height: 1; margin-bottom: 0.4rem; }
.onb-area-label { font-size: 0.85rem; font-weight: 700; text-align: center; line-height: 1.2; }

/* Dashboard Grid */
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.dash-widget { display: flex; flex-direction: column; margin-bottom: 0; }
.widget-header { font-size: 1rem; font-weight: 600; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; color: var(--text-main); }
#dash-greeting { min-height: 2.5rem; }
.widget-header i { width: 18px; height: 18px; color: var(--primary); }
.dash-widget-media:hover, .dash-widget-exam:hover { border-color: var(--primary); transform: translateY(-3px); }

/* To-Do List */
.todo-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: rgba(0,0,0,0.2); border-radius: var(--radius-sm); margin-bottom: 0.5rem; transition: 0.2s; }
.todo-item.completed { opacity: 0.5; }
.todo-item.completed span { text-decoration: line-through; }
.todo-check { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }

/* Profile Badge */
.profile-badge { background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), rgba(var(--primary-rgb), 0.08)); color: var(--primary); padding: 0.4rem 0.8rem; border-radius: 20px; font-size: 0.85rem; font-weight: 700; border: 1px solid var(--border-glass); }

/* Helpers */
.text-red { color: var(--danger) !important; filter: drop-shadow(0 0 4px rgba(255,71,87,0.4)); }
.text-yellow { color: var(--warning) !important; filter: drop-shadow(0 0 4px rgba(255,165,2,0.4)); }
.text-green { color: var(--success) !important; filter: drop-shadow(0 0 4px rgba(46,213,115,0.4)); }

/* ========================================= */
/* UNIVERSITÀ: NUOVO CALCOLATORE ACCORDION */
/* ========================================= */
.uni-summary-bar { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 4px 30px rgba(0,0,0,0.5); }
.year-tab-btn {
  padding: 0.6rem 1.2rem; background: transparent; border: 1px solid var(--border-glass);
  border-radius: 20px; color: var(--text-muted); font-family: inherit; font-weight: 600; cursor: pointer; transition: 0.2s; white-space: nowrap;
}
.year-tab-btn:hover { background: rgba(255,255,255,0.05); color: var(--text-main); }
.year-tab-btn.active { background: var(--primary); color: #000; border-color: var(--primary); }
.block-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border-glass); border-radius: var(--radius-md); margin-bottom: 1rem; overflow: hidden; transition: 0.3s; }
.block-header { padding: 1.2rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer; background: rgba(0,0,0,0.2); }
.block-header:hover { background: rgba(255,255,255,0.04); }
.block-title-area { display: flex; align-items: center; gap: 1rem; }
.block-cfu-badge { background: var(--bg-card); border: 1px solid var(--border-glass); padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.block-avg { font-size: 1.4rem; font-weight: 800; }
.block-body { padding: 1.2rem; border-top: 1px solid var(--border-glass); display: none; background: rgba(0,0,0,0.1); }
.part-row { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.part-row:last-child { border-bottom: none; }
.part-grade-badge { background: rgba(var(--primary-rgb), 0.15); color: var(--primary); padding: 0.3rem 0.8rem; border-radius: 6px; font-weight: 700; border: 1px solid rgba(var(--primary-rgb), 0.3); }
/* ========================================= */
/* SETTINGS PAGE STYLES */
/* ========================================= */

.settings-section { margin-bottom: 3rem; }
.settings-section-title { 
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; 
  color: var(--text-muted); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;
  font-weight: 700; border-bottom: 1px solid var(--border-glass); padding-bottom: 0.5rem;
}

/* Profile Card */
.profile-card {
  display: flex; align-items: center; gap: 1.5rem; padding: 2rem;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(124, 92, 191, 0.1));
}
.avatar-large {
  width: 80px; height: 80px; border-radius: 50%; background: var(--primary);
  display: flex; justify-content: center; align-items: center;
  font-size: 2rem; font-weight: 800; color: #000; text-transform: uppercase;
  box-shadow: 0 8px 16px rgba(var(--primary-rgb), 0.3); border: 4px solid var(--border-glass);
}
.profile-info h2 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.profile-info p { color: var(--text-muted); font-size: 0.95rem; }

/* Custom Toggle Switch */
.switch {
  position: relative; display: inline-block; width: 50px; height: 26px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0,0,0,0.3); transition: .4s; border-radius: 34px; border: 1px solid var(--border-glass);
}
.slider:before {
  position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 3px;
  background-color: white; transition: .4s; border-radius: 50%;
}
input:checked + .slider { background-color: var(--primary); }
input:checked + .slider:before { transform: translateX(24px); }

.setting-item {
  display: flex; justify-content: space-between; align-items: center; padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.setting-item:last-child { border-bottom: none; }
.setting-label { display: flex; flex-direction: column; gap: 0.25rem; }
.setting-label span:first-child { font-weight: 600; }
.setting-label span:last-child { font-size: 0.85rem; color: var(--text-muted); }

/* Accent Color Picker */
.color-options { display: flex; gap: 1rem; }
.color-circle {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  transition: var(--transition); border: 3px solid transparent;
}
.color-circle:hover { transform: scale(1.1); }
.color-circle.active { border-color: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.5); }

/* Text Size Chips */
.chip-group { display: flex; gap: 0.5rem; background: rgba(0,0,0,0.2); padding: 0.25rem; border-radius: var(--radius-md); }
.chip {
  padding: 0.5rem 1rem; border-radius: var(--radius-sm); border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; font-family: inherit; font-weight: 600; transition: 0.2s;
}
.chip.active { background: var(--primary); color: #000; }

/* Info Accordion */
.info-card {
  margin-bottom: 0.75rem; border: 1px solid var(--border-glass); border-radius: var(--radius-md);
  background: rgba(255,255,255,0.02); transition: var(--transition);
}
.info-card-header {
  padding: 1.25rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
.info-card-header:hover { background: rgba(255,255,255,0.04); }
.info-card-title { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; }
.info-card-body {
  padding: 0 1.25rem 1.25rem; display: none; color: var(--text-muted); line-height: 1.6;
}
.info-card.open .info-card-body { display: block; }
.info-card.open .chevron { transform: rotate(180deg); }
.chevron { transition: 0.3s; width: 18px; }

/* Privacy Link */
.privacy-link { color: var(--primary); text-decoration: none; font-weight: 600; }
.privacy-link:hover { text-decoration: underline; }

/* Delete Confirmation Modal Animation */
@keyframes modalShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.modal-shake { animation: modalShake 0.4s ease-in-out; }

/* Pulsing border for urgent tasks */
@keyframes pulseRed {
  0% { border-color: rgba(255, 71, 87, 0.3); box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.3); }
  50% { border-color: rgba(255, 71, 87, 1); box-shadow: 0 0 10px 0 rgba(255, 71, 87, 0.5); }
  100% { border-color: rgba(255, 71, 87, 0.3); box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.3); }
}
.urgent-pulse {
  animation: pulseRed 2s infinite;
  border-width: 2px !important;
}

.diario-card {
  transition: var(--transition);
}
.diario-card.completed {
  opacity: 0.6;
}

/* Modals Overlay */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8); backdrop-filter: blur(8px);
  z-index: 2000; display: none; justify-content: center; align-items: center; padding: 1rem;
}
.modal-content { max-width: 500px; width: 100%; }

/* Mobile Adaptations */
@media (max-width: 768px) {
  .profile-card { flex-direction: column; text-align: center; }
  .grid-2 { gap: 1rem; }
}

/* ==========================================
   VISIBILITY FLOW
   ========================================== */
/* Hide non-matching profile components */
body.tipo-universitario .sezione-superiore,
body.tipo-superiori .sezione-universitaria {
    display: none !important;
}

body:not(.area-sanitaria) .area-sanitaria,
body:not(.area-stem) .area-stem,
body:not(.area-umanistica) .area-umanistica,
body:not(.area-artistica) .area-artistica {
    display: none !important;
}

/* For matching components, we let the original .view.active logic handle the display.
   Sidebar links and dashboard widgets will show by default if their parent is visible. */

/* ==========================================
   SCHOOL COMPONENTS
   ========================================== */
.year-tab-btn {
    padding: 0.6rem 1.2rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.year-tab-btn.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 15px var(--primary-shadow);
    border-color: transparent;
}
.diary-card {
    transition: 0.3s ease;
    border-left: 4px solid var(--primary);
}
.diary-card.done {
    opacity: 0.6;
}
.diary-card.urgent-pulse {
    border-left-color: var(--danger);
    animation: urgent-border 2s infinite;
}

@keyframes urgent-border {
    0% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 71, 87, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0); }
}

/* ==========================================
   TOAST NOTIFICATION
   ========================================== */
.st-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.25rem;
    background: rgba(20, 20, 30, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px var(--primary-shadow);
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.95rem;
    max-width: 360px;
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}
.st-toast.show {
    transform: translateY(0);
    opacity: 1;
}


/* ==========================================
   QUADRIMESTRE BIG TAB
   ========================================== */
.quad-big-btn { outline:none; }
.quad-big-btn:hover:not(.active-q) {
    background: rgba(255,255,255,0.04) !important;
    color: var(--text-main) !important;
}

/* Calendar icon global accent color */
[data-lucide="calendar"] { color: var(--primary) !important; }

/* ==========================================
   AUTH OVERLAY
   ========================================== */
#auth-overlay {
    background: var(--bg-main, #0f0f13);
    z-index: 10000;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

/* ============================================================
   GRAFICO ANDAMENTO MEDIA — Collapsible
   ============================================================ */

#media-chart-card.chart-collapsed .chart-body { display: none; }
#media-chart-card.chart-collapsed .chart-chevron { transform: rotate(-90deg); }

/* ============================================================
   TOUR GUIDATO
   ============================================================ */

/* Durante il tour, la sidebar deve stare sopra l'overlay */
body.tour-active .sidebar {
    z-index: 50003 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg-card) !important;
}

#tour-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 50000;
    pointer-events: all;
}

.tour-highlight {
    position: relative;
    z-index: 50002 !important;
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 4px var(--primary),
                0 0 0 8px rgba(var(--primary-rgb), 0.3),
                0 0 40px rgba(var(--primary-rgb), 0.4);
    pointer-events: none;
    transition: box-shadow 0.3s ease;
    background: var(--bg-card) !important;
    isolation: isolate;
}

.tour-tooltip {
    position: fixed;
    z-index: 50003;
    background: var(--bg-card);
    border: 1px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    max-width: 320px;
    width: calc(100vw - 2rem);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(var(--primary-rgb), 0.2);
    animation: tourFadeIn 0.3s ease forwards;
}

@keyframes tourFadeIn {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.tour-tooltip-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tour-tooltip-body {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.tour-tooltip-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tour-dots {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.tour-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--border-glass);
    transition: 0.2s;
}

.tour-dot.active {
    background: var(--primary);
    width: 20px;
    border-radius: 4px;
}

.tour-btn-skip {
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: 0.2s;
}

.tour-btn-skip:hover { color: var(--text-main); }

.tour-btn-next {
    background: var(--primary);
    color: #000;
    border: none;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tour-btn-next:hover { transform: translateY(-1px); filter: brightness(1.1); }

@media (max-width: 768px) {
    .tour-tooltip {
        bottom: 1rem;
        top: auto !important;
        left: 1rem !important;
        right: 1rem !important;
        transform: none !important;
        max-width: 100%;
    }
}

/* Riduce il layout shift durante il caricamento del font */
body {
    font-synthesis: none;
}
html {
    font-display: swap;
}