/* ==========================================================================
   REMI • styles.css
   - Fix principale: .tile è NEUTRA di default (testo scuro + bg chiaro)
     e diventa "colorata" (testo bianco) solo se aggiungi .t1/.t2/.t3/.t4.
   - Ho rimosso duplicazioni (calendar UI ripetuta più volte) e consolidato
     le sezioni in un unico blocco coerente.
   ========================================================================== */

/* =========================
   Root variables
   ========================= */
:root{
  --bg1:#f7f7ff;
  --bg2:#f0fbff;
  --ink:#0f172a;
  --muted:#475569;
  --card:#ffffffcc;
  --stroke:rgba(15,23,42,.10);

  --shadow: 0 14px 40px rgba(2, 6, 23, .10);
  --shadow2: 0 10px 24px rgba(2, 6, 23, .12);

  --radius: 18px;
  --radius2: 22px;
}

*{ box-sizing:border-box; }

/* =========================
   Page animations
   ========================= */
.page-slide{
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(.4,0,.2,1);
}
.page-slide.page-slide-out{
  transform: translateX(100vw);
}

.page-fade{
  opacity: 1;
  transition: opacity 0.45s cubic-bezier(.4,0,.2,1);
}
.page-fade.page-fade-out{
  opacity: 0;
}

/* =========================
   App background
   ========================= */
.app-bg{
  color: var(--ink);
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(900px 600px at 10% 0%, #ffe6fb 0%, transparent 60%),
    radial-gradient(800px 520px at 90% 10%, #d9f7ff 0%, transparent 58%),
    radial-gradient(900px 600px at 40% 95%, #e6fff1 0%, transparent 55%),
    linear-gradient(180deg, var(--bg2), var(--bg1));
}

/* =========================
   Topbar (base)
   ========================= */
.topbar{
  position: sticky;
  top:0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.75);
  border-bottom: 1px solid var(--stroke);
}

.topbar-inner{
  height: 72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* =========================
   Topbar WOW / PRO layout
   ========================= */
.topbar-wow{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stroke);
}

/* layout più “app-like” */
.topbar-inner.topbar-pro{
  height: 76px;
  max-width: 1220px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}

/* BRAND */
.brand{
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
}
.brand-pro{ gap: 12px; }

.brand-mark{
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:14px;
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  color:white;
  box-shadow: 0 10px 18px rgba(124,58,237,.22);
  transform: rotate(-4deg);
}

.brand-stack{
  display: grid;
  line-height: 1.05;
}
.brand-title{
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 1.05rem;
  color: var(--ink);
}
.brand-title-big{
  font-size: 1.78rem;
  letter-spacing: .22em;
  line-height: 1;
}
.brand-title-pretty{
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 18px rgba(124,58,237,.14);
}
.brand-subtitle{
  font-weight: 850;
  font-size: .76rem;
  color: var(--muted);
  letter-spacing: .10em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* =========================
   Center hub (status pills)
   ========================= */
.center-hub{
  justify-self: center;
  display: flex;
  gap: 10px;
  padding: 8px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.62);
  box-shadow: 0 12px 22px rgba(2,6,23,.08);
  overflow: hidden;
}

.hub-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid transparent;
  font-weight: 900;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.hub-pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(2,6,23,.12);
  background: rgba(2,6,23,.04);
}
.hub-label{
  opacity: .86;
  font-weight: 900;
}
.hub-value{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(2,6,23,.05);
  border: 1px solid rgba(2,6,23,.08);
  font-weight: 950;
  letter-spacing: .02em;
}
.hub-pill-accent{
  background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(6,182,212,.16));
  border: 1px solid rgba(34,197,94,.22);
}
.hub-pill-accent .hub-value{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(34,197,94,.20);
}

/* =========================
   Right actions
   ========================= */
.topbar-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

.action-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.85);
  color: var(--ink);
  text-decoration:none;
  font-weight: 950;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.action-pill:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(2,6,23,.12);
}

.action-primary{
  color:white;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  box-shadow: 0 14px 22px rgba(59,130,246,.22);
}
.action-primary:hover{
  box-shadow: 0 18px 34px rgba(59,130,246,.28);
}

/* Avatar dot (solo estetica) */
.avatar-dot{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background:
    radial-gradient(circle at 30% 30%, rgba(124,58,237,.35), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(34,197,94,.30), transparent 55%),
    rgba(255,255,255,.85);
  box-shadow: 0 12px 22px rgba(2,6,23,.10);
}

/* =========================
   Notifications (CSS toggle)
   ========================= */
.notif-wrap{ position:relative; }
.notif-toggle{ display:none; }

.notif-btn{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 18px rgba(2,6,23,.08);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  position:relative;
}
.notif-btn i{ font-size: 1.2rem; color: var(--ink); }
.notif-btn:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
}

.notif-count{
  position:absolute;
  top: 8px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fb7185;
  color: #fff;
  font-size: .72rem;
  font-weight: 950;
  display:grid;
  place-items:center;
  box-shadow: 0 0 0 3px rgba(251,113,133,.18);
}

.notif-panel{
  position:absolute;
  right:0;
  top:56px;
  width: 340px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.95);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow:hidden;
  transform: translateY(-6px);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}

.notif-toggle:checked ~ .notif-panel{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

.notif-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--stroke);
}
.notif-title{ font-weight: 800; }

.notif-close{
  width:30px;height:30px;
  display:grid;place-items:center;
  border-radius:10px;
  cursor:pointer;
  color: var(--muted);
  transition: background .15s ease, transform .15s ease;
}
.notif-close:hover{
  background: rgba(2,6,23,.06);
  transform: scale(1.05);
}

.notif-list{ padding: 10px; display:grid; gap:10px; }
.notif-item{
  display:flex;
  gap:10px;
  padding:10px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
  transition: transform .15s ease, box-shadow .15s ease;
}
.notif-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(2,6,23,.10);
}

.notif-badge{
  flex:0 0 auto;
  font-size: .72rem;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  color: white;
  align-self:flex-start;
}
.notif-badge.today{ background: linear-gradient(135deg, #22c55e, #06b6d4); }
.notif-badge.tomorrow{ background: linear-gradient(135deg, #3b82f6, #a855f7); }
.notif-badge.soon{ background: linear-gradient(135deg, #f97316, #f43f5e); }

.notif-main{ font-weight: 700; }
.notif-sub{ color: var(--muted); font-size: .85rem; margin-top:2px; }

.notif-foot{
  padding: 10px 14px 14px;
  border-top:1px solid var(--stroke);
}

/* =========================
   Hero
   ========================= */
.hero-card{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  border-radius: var(--radius2);
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}

/* un po' più compatto nelle pagine interne */
.hero-card{ padding: 16px; }
.hero-title{ margin: 6px 0 4px; }

.hero-card::before{
  content:"";
  position:absolute;
  inset:-80px -100px auto auto;
  width: 240px; height: 240px;
  background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.25), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(34,197,94,.22), transparent 60%);
  filter: blur(6px);
}

.hero-kicker{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.75);
  color: var(--muted);
  font-weight: 700;
  font-size: .9rem;
}

.hero-title{
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.hero-emoji{
  display:inline-block;
  transform-origin: 60% 60%;
  animation: wave 1.6s ease-in-out infinite;
}
@keyframes wave{
  0%,100%{ transform: rotate(0deg) translateY(0); }
  50%{ transform: rotate(7deg) translateY(-1px); }
}

.hero-sub{
  color: var(--muted);
  margin: 0 0 14px;
  font-weight: 600;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* =========================
   Buttons
   ========================= */
.btn-big{
  border:none;
  text-decoration:none;
  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-notes{
  color:white;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  box-shadow: 0 12px 20px rgba(59,130,246,.25);
}
.btn-notes:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(59,130,246,.30);
}

.btn-calendar{
  color:white;
  background: linear-gradient(135deg, #a855f7, #3b82f6);
  box-shadow: 0 12px 20px rgba(168,85,247,.22);
}
.btn-calendar:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(168,85,247,.28);
}

.btn-hype{
  color: var(--ink);
  background: rgba(255,255,255,.85);
  border: 1px solid var(--stroke);
}
.btn-hype:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(2,6,23,.12);
}

/* mascot */
.hero-right{
  display:flex;
  align-items:center;
  justify-content:center;
}
.mascot{
  width: 220px;
  height: 220px;
  border-radius: 40px;
  background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(6,182,212,.16));
  border: 1px solid var(--stroke);
  box-shadow: 0 18px 34px rgba(2,6,23,.10);
  position:relative;
  transform: rotate(2deg);
  overflow:hidden;
}
.mascot-face{
  position:absolute;
  inset: 70px 40px auto 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.mascot-eye{
  width: 26px; height: 26px;
  border-radius: 999px;
  background: rgba(15,23,42,.85);
  box-shadow: inset 0 -6px 0 rgba(255,255,255,.35);
  animation: blink 4.2s ease-in-out infinite;
}
@keyframes blink{
  0%, 94%, 100%{ transform: scaleY(1); }
  95%, 98%{ transform: scaleY(.12); }
}
.mascot-mouth{
  position:absolute;
  left:50%;
  top: 120px;
  transform: translateX(-50%);
  width: 42px;
  height: 22px;
  border: 4px solid rgba(15,23,42,.80);
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0 0 999px 999px;
  opacity:.9;
}
.mascot-stars{
  position:absolute;
  inset:auto 14px 14px auto;
  display:flex;
  gap: 6px;
  color: rgba(124,58,237,.9);
  font-weight: 900;
  filter: drop-shadow(0 8px 10px rgba(124,58,237,.25));
}
.mascot-stars span{
  animation: floaty 2.2s ease-in-out infinite;
}
.mascot-stars span:nth-child(2){ animation-delay: .2s; }
.mascot-stars span:nth-child(3){ animation-delay: .4s; }

@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-5px); }
}

/* =========================
   Sections
   ========================= */
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  margin: 10px 0 14px;
}
.section-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  margin:0;
}
.section-pill{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.75);
  color: var(--muted);
  font-weight: 800;
}

/* =========================
   Tiles container grid
   ========================= */
.tiles{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* ======================================================================
   TILE FIX (IMPORTANT)
   - Base NEUTRA per evitare testo bianco su sfondo chiaro (appunti)
   ====================================================================== */
.tile{
  text-decoration:none;
  color: var(--ink); /* ✅ testo scuro di default */
  padding: 16px;
  border-radius: 22px;
  box-shadow: 0 16px 30px rgba(2,6,23,.12);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)); /* ✅ bg chiaro */
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  min-height: 128px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}

.tile::after{
  content:"";
  position:absolute;
  inset:auto -60px -60px auto;
  width: 160px; height: 160px;
  background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.10), transparent 62%);
  transform: rotate(20deg);
}

.tile:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(2,6,23,.16);
  filter: brightness(1.01);
}

.tile-emoji{
  font-size: 1.9rem;
  line-height: 1;
  text-shadow: none;
}

.tile-title{
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-top: 10px;
}

.tile-sub{
  color: var(--muted);
  font-weight: 700;
}

/* =========================
   Tiles colorate (solo se aggiungi t1..t4)
   ========================= */
.tile.t1, .tile.t2, .tile.t3, .tile.t4{
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  background: none; /* lo sfondo lo danno t1..t4 */
}
.tile.t1::after, .tile.t2::after, .tile.t3::after, .tile.t4::after{
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 60%);
}
.tile.t1 .tile-sub,
.tile.t2 .tile-sub,
.tile.t3 .tile-sub,
.tile.t4 .tile-sub{
  color: rgba(255,255,255,.92);
}

/* gradienti */
.t1{ background: linear-gradient(135deg, #22c55e, #06b6d4); }
.t2{ background: linear-gradient(135deg, #a855f7, #3b82f6); }
.t3{ background: linear-gradient(135deg, #f97316, #f43f5e); }
.t4{ background: linear-gradient(135deg, #0ea5e9, #22c55e); }

/* =========================
   Notes page tiles layout
   ========================= */
.notes-tiles{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 992px){
  .notes-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .notes-tiles{ grid-template-columns: 1fr; }
}

/* meta/info in basso nelle tiles */
.tile-meta{
  margin-top: 10px;
  font-weight: 800;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  color: var(--muted);
}

/* pill di meta (materia, data, ecc) */
.meta-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size: .82rem;
  font-weight: 900;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.08);
}

/* azioni in alto a dx */
.tile-actions{
  position:absolute;
  top: 12px;
  right: 12px;
  display:flex;
  gap: 8px;
  z-index: 2;
}

/* Icon button base + variante dark */
.icon-btn{
  width: 36px;
  height: 36px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.90);
  color: var(--ink);
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.icon-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.98);
  box-shadow: 0 10px 18px rgba(2,6,23,.10);
}
.icon-btn.dark{
  color: var(--ink);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.90);
}

/* Se in qualche pagina hai ancora icon-btn su tile colorate, puoi usare questa classe:
   (aggiungila al bottone: class="icon-btn on-tile") */
.icon-btn.on-tile{
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.18);
  color: #fff;
}
.icon-btn.on-tile:hover{
  background: rgba(255,255,255,.26);
}

/* =========================
   Glass modal
   ========================= */
.glass-modal{
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.note-content{
  color: var(--ink);
  font-weight: 600;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* =========================
   Empty state
   ========================= */
.empty-state{
  display:grid;
  place-items:center;
  padding: 22px 0 10px;
}
.empty-card{
  width:min(560px, 100%);
  border-radius: 22px;
  padding: 18px;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  text-align:center;
}
.empty-emoji{ font-size: 2rem; }
.empty-title{ font-weight: 900; font-size: 1.2rem; margin-top: 8px; }
.empty-sub{ color: var(--muted); font-weight: 650; margin-top: 6px; }

/* =========================
   Images grid
   ========================= */
.img-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 992px){
  .img-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .img-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.img-thumb{
  position:relative;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.6);
  cursor:pointer;
}
.img-thumb img{
  width:100%;
  height:120px;
  object-fit: cover;
  display:block;
}
.img-remove{
  position:absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(15,23,42,.55);
  color:white;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.img-remove:hover{ background: rgba(15,23,42,.72); }

/* ================================
   ENERGY BAR – Home (Today) PRO
   ================================ */
.energy-pill{
  display:flex;
  align-items:center;
  gap:.7rem;
}

.energy-bar-wrap{
  position: relative;
  width: 300px;
  height: 35px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.35));
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.12),
    0 8px 20px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}

.energy-bar{
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: 999px;
  position: relative;
  background: linear-gradient(
    90deg,
    hsl(var(--energy-hue, 120) 90% 45%),
    hsl(calc(var(--energy-hue, 120) + 18) 95% 55%)
  );
  box-shadow:
    0 10px 26px rgba(0,0,0,.10),
    0 0 0 1px rgba(255,255,255,.35) inset,
    0 0 18px hsla(var(--energy-hue, 120), 90%, 55%, .55);
  will-change: transform;
}

.energy-bar::after{
  content:"";
  position:absolute;
  inset:-30%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.45) 50%,
    transparent 100%
  );
  transform: translateX(-120%) rotate(6deg);
  animation: energy-shine 1.2s linear infinite;
  pointer-events:none;
}
@keyframes energy-shine{
  to { transform: translateX(120%) rotate(6deg); }
}

.energy-bar-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.95rem;
  font-weight:800;
  letter-spacing:.2px;
  color: rgba(10,10,10,.75);
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
  user-select:none;
}

.energy-bar-wrap.is-full{
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.10),
    0 10px 30px rgba(0,0,0,.08),
    0 0 22px rgba(0, 255, 140, .20);
}

/* =========================
   Calendar UI (single source of truth)
   ========================= */
.calendar-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--stroke);
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
  backdrop-filter: blur(10px);
}

.year-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.85);
  font-weight: 900;
}

.year-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.month-card{
  border-radius: 22px;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--stroke);
  box-shadow: 0 12px 24px rgba(2,6,23,.08);
  overflow:hidden;
}

.month-head{
  padding: 12px 12px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.month-name{
  font-weight: 900;
  letter-spacing: -0.02em;
}
.month-mini{
  font-weight: 800;
  color: var(--muted);
  font-size: .9rem;
}

.weekdays{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 8px 10px 0;
  gap: 6px;
}
.weekday{
  text-align:center;
  font-size: .72rem;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: .04em;
}

.days-grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.day-cell{
  min-height: 86px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
  cursor:pointer;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
  position:relative;
  overflow:hidden;
}
.day-cell:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(2,6,23,.10);
}
.day-cell.muted{
  border:none;
  background:transparent;
  box-shadow:none;
}
.day-cell.today{
  outline: 2px solid rgba(59,130,246,.30);
}

/* Stati calendario */
.day-cell.has-exam{
  background:
    radial-gradient(100px 80px at 85% 20%, rgba(168,85,247,.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
}
.day-cell.has-learn{
  background:
    radial-gradient(110px 85px at 18% 18%, rgba(34,197,94,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
}
.day-cell.has-review{
  background:
    radial-gradient(110px 85px at 20% 88%, rgba(14,165,233,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
}

.day-num{ font-weight: 900; font-size: .95rem; }

.day-chips{
  margin-top: 6px;
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.chip{
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.chip span{ overflow:hidden; text-overflow:ellipsis; }
.chip.exam{ background: rgba(168,85,247,.14); border-color: rgba(168,85,247,.22); }
.chip.learn{ background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.22); }
.chip.review{ background: rgba(14,165,233,.14); border-color: rgba(14,165,233,.22); }
.chip.more{ justify-content:center; font-weight: 900; }

/* Deadlines panel */
.deadlines-card{
  border-radius: var(--radius2);
  background: rgba(255,255,255,.78);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow:hidden;
  position: sticky;
  top: 92px;
}

.deadlines-head{
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.deadlines-title{ font-weight: 900; }
.deadlines-sub{ font-weight: 700; }

.deadlines-list{
  padding: 10px;
  display:grid;
  gap: 10px;
}

.deadline-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
  transition: transform .14s ease, box-shadow .14s ease;
}
.deadline-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(2,6,23,.10);
}
.deadline-title{ font-weight: 900; }
.deadline-sub{
  color: var(--muted);
  font-weight: 700;
  font-size: .85rem;
  margin-top: 2px;
}
.deadline-pill{
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.9);
}
.deadlines-foot{
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(15,23,42,.08);
}

/* Modal lists */
.day-exam-list{ display:grid; gap: 10px; }
.day-exam-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.75);
}
.day-exam-row .t{ font-weight: 900; }
.day-exam-row .s{ color: var(--muted); font-weight: 700; font-size: .85rem; }

.day-task-list{ display:grid; gap: 10px; }
.day-task-row{
  display:flex;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.75);
}
.day-task-row .k{
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.9);
}
.day-task-row.learn .k{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.22); }
.day-task-row.review .k{ background: rgba(14,165,233,.12); border-color: rgba(14,165,233,.22); }
.day-task-row .t{ font-weight: 900; }
.day-task-row .s{ color: var(--muted); font-weight: 700; font-size: .85rem; }

/* Notes picker (modal calendario) */
.notes-picker{
  margin-top: 8px;
  display:grid;
  gap: 8px;
  max-height: 260px;
  overflow:auto;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.72);
}
.pick-row{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.82);
  cursor:pointer;
}
.pick-row:hover{
  box-shadow: 0 10px 18px rgba(2,6,23,.08);
}
.pick-main{ flex:1; }
.pick-title{ font-weight: 900; }
.pick-sub{ color: var(--muted); font-weight: 700; font-size: .85rem; }

/* =========================
   Responsive
   ========================= */
@media (max-width: 1200px){
  .year-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 992px){
  .hero-card{ grid-template-columns: 1fr; }
  .hero-right{ display:none; }
  .tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px){
  .center-hub{ display:none; }
}

@media (max-width: 720px){
  .year-grid{ grid-template-columns: 1fr; }
  .deadlines-card{ position: static; }
}

@media (max-width: 520px){
  .tiles{ grid-template-columns: 1fr; }
  .notif-panel{ width: 92vw; }
  .brand-title-big{ font-size: 1.35rem; letter-spacing: .18em; }
  .brand-subtitle{ display:none; }
  .action-pill span{ display:none; }
}
/* FIX: tile t4 su welcome (forza background + leggibilità) */
.tile.t4{
  background: linear-gradient(135deg, #0ea5e9, #22c55e) !important;
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
}

.tile.t4 .tile-sub{
  color: rgba(255,255,255,.92);
}

.tile.t4 .tile-meta{
  color: rgba(255,255,255,.90);
}

.tile.t4 .meta-pill{
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.95);
}

.avatar-dot{
  overflow:hidden;
  border-radius:999px;
  background: rgba(0,0,0,.06) !important;
}
.avatar-dot img{ display:block; }