:root{
  --bg:#f5f2ec;
  --bg2:#ede9e0;
  --card:#ffffff;
  --border:rgba(0,0,0,.07);
  --shadow:0 2px 24px rgba(0,0,0,.07);
  --shadow-lg:0 8px 40px rgba(0,0,0,.10);
  --teal:#00b89a;
  --teal-light:#d0f5ef;
  --amber:#f59e0b;
  --amber-light:#fef3c7;
  --coral:#f05a3a;
  --coral-light:#ffe4dc;
  --lime:#7cc93a;
  --lime-light:#e6f7d4;
  --violet:#8b5cf6;
  --violet-light:#ede9fe;
  --text:#1a1a2e;
  --muted:#6b6b88;
  --white:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Outfit',sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100vh;overflow-x:hidden;
}
body::after{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:.035;pointer-events:none;z-index:9998;
}
body::before{
  content:'';position:fixed;inset:0;
  background:
    radial-gradient(ellipse 65% 55% at 0% 0%,rgba(0,184,154,.10) 0%,transparent 55%),
    radial-gradient(ellipse 55% 50% at 100% 0%,rgba(139,92,246,.08) 0%,transparent 55%),
    radial-gradient(ellipse 50% 45% at 100% 100%,rgba(240,90,58,.08) 0%,transparent 55%),
    radial-gradient(ellipse 45% 40% at 0% 100%,rgba(245,158,11,.08) 0%,transparent 55%);
  pointer-events:none;z-index:0;
}

/* ── LOGIN OVERLAY ── */
#login-overlay{
  position:fixed;inset:0;z-index:2000;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
}
.login-card{
  background:var(--white);
  border:1.5px solid rgba(0,0,0,.07);
  border-radius:1.5rem;padding:2.5rem 2rem;
  width:100%;max-width:380px;
  box-shadow:var(--shadow-lg);
  text-align:center;
}
.login-logo{
  font-size:2.5rem;color:var(--teal);
  margin-bottom:.5rem;
  animation:spin-slow 8s linear infinite;
  display:inline-block;
}
@keyframes spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.login-card h2{
  font-family:'DM Serif Display', sans-serif;
  font-size:2.2rem;font-weight:300;
  letter-spacing:.04em;color:var(--text);margin-bottom:.3rem;
  line-height:1.2;
}
.login-sub{font-size:.85rem;color:var(--muted);margin-bottom:2rem;line-height:1.6}
.login-error{
  background:var(--coral-light);color:var(--coral);
  border-radius:.6rem;padding:.5rem .9rem;
  font-size:.82rem;margin-bottom:.8rem;
}
.login-card input{
  display:block;width:100%;
  padding:.8rem 1rem;margin-bottom:1rem;
  background:var(--bg);border:1.5px solid rgba(0,0,0,.1);
  border-radius:.7rem;font-family:'Outfit',sans-serif;
  font-size:.9rem;color:var(--text);outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.login-card input:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-light)}
#login-btn{
  width:100%;background:var(--text);color:var(--white);
  border:none;border-radius:.7rem;padding:.7rem;
  font-family:'Syne',sans-serif;font-size:.9rem;font-weight:700;
  letter-spacing:.05em;cursor:pointer;
  transition:background .2s,transform .15s,box-shadow .15s;
}
#login-btn:hover{background:var(--teal);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,184,154,.3)}
#login-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* ── SYNC DOT ── */
.sync-dot{
  position:fixed;bottom:1.2rem;right:1.4rem;z-index:100;
  width:10px;height:10px;border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 0 rgba(0,184,154,.4);
  transition:background .3s;
}
.sync-dot.syncing{animation:pulse-sync .8s ease infinite}
.sync-dot.error{background:var(--coral)}
@keyframes pulse-sync{
  0%{box-shadow:0 0 0 0 rgba(0,184,154,.5)}
  70%{box-shadow:0 0 0 8px rgba(0,184,154,0)}
  100%{box-shadow:0 0 0 0 rgba(0,184,154,0)}
}

/* ── MARQUEE ── */
.marquee-wrap{
  background:var(--text);overflow:hidden;
  white-space:nowrap;padding:.42rem 0;
  position:relative;z-index:10;
}
.marquee-inner{display:inline-block;animation:marquee 40s linear infinite}
.marquee-inner span{
  font-family:'Syne',sans-serif;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;
  color:var(--bg);padding:0 2rem;
}
.marquee-inner .dot{color:var(--teal)}
@keyframes marquee{from{transform:translateX(-80)}to{transform:translateX(-100%)}}

#lang-btn,
#logout-btn {
  position: fixed;
  top: 1rem;
  z-index: 1000;
  width: 48px;                /* good touch target size */
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 50%;         /* circular = mobile-friendly & modern */
  font-size: 1.4rem;          /* emoji/symbol size */
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: all 0.22s ease;
  user-select: none;
}

#lang-btn {
  right: 1.2rem;
}

#logout-btn {
  right: calc(1.2rem + 48px + 12px); /* 48px button + 12px gap */
  font-size: 1.25rem;                /* slightly smaller power icon */
  color: var(--muted);
}

/* Hover / focus (desktop + keyboard) */
#lang-btn:hover,
#lang-btn:focus-visible,
#logout-btn:hover,
#logout-btn:focus-visible {
  transform: scale(1.12);
  box-shadow: var(--shadow-lg);
  outline: none;
}

/* Active / touch feedback (mobile) */
#lang-btn:active,
#logout-btn:active {
  transform: scale(0.92);
  background: var(--bg2);
}

/* Special logout styling (red hint for "danger") */
#logout-btn:hover,
#logout-btn:active {
  color: var(--coral);
}

/* Focus ring for accessibility */
#lang-btn:focus-visible,
#logout-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--teal-light);
}

/* ── Responsive fixes ── */
@media (max-width: 480px) {
  #lang-btn,
  #logout-btn {
    width: 44px;
    height: 44px;
    font-size: 1.35rem;
    top: 0.9rem;
  }

  #lang-btn {
    right: 1rem;
  }

  #logout-btn {
    right: calc(1rem + 44px + 10px); /* smaller gap on tiny screens */
  }
}

@media (max-width: 360px) {
  #lang-btn,
  #logout-btn {
    width: 42px;
    height: 42px;
    font-size: 1.3rem;
  }

  #logout-btn {
    right: calc(0.9rem + 42px + 8px);
  }
}

/* ── HEADER ── */
header{
  position:relative;z-index:10;
  text-align:center;padding:3.5rem 1rem 2rem;
}
.eyebrow{
  font-family:'Syne',sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--teal);
  margin-bottom:1rem;display:flex;align-items:center;justify-content:center;gap:.8rem;
}
.eyebrow::before,.eyebrow::after{
  content:'';display:block;width:34px;height:1.5px;
  background:var(--teal);border-radius:2px;
}
header h1{
  font-family:'Syne',sans-serif;
  font-size:clamp(3rem,8vw,5.8rem);
  font-weight:800;line-height:.92;letter-spacing:-.025em;color:var(--text);
}
header h1 .hl{
  background:linear-gradient(90deg,var(--teal),var(--amber),var(--coral),var(--violet));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.header-sub{font-size:.9rem;color:var(--muted);margin-top:1rem;letter-spacing:.04em}
.deco-pill{
  display:inline-block;border-radius:2rem;padding:.28rem .85rem;
  font-size:.72rem;font-weight:700;font-family:'Syne',sans-serif;
  letter-spacing:.1em;text-transform:uppercase;margin:.2rem .15rem;
}
.pill-teal  {background:var(--teal-light);  color:var(--teal)}
.pill-amber {background:var(--amber-light); color:var(--amber)}
.pill-coral {background:var(--coral-light); color:var(--coral)}
.pill-violet{background:var(--violet-light);color:var(--violet)}
.pill-lime  {background:var(--lime-light);  color:var(--lime)}

/* ── TABS ── */
.tabs{
  display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;
  padding:.5rem 1rem 2rem;position:relative;z-index:10;
}
.tab-btn{
  font-family:'Syne',sans-serif;font-size:.82rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  padding:.6rem 1.6rem;border:2px solid transparent;
  border-radius:.65rem;background:var(--white);
  color:var(--muted);cursor:pointer;box-shadow:var(--shadow);
  transition:all .22s;
}
.tab-btn:hover{color:var(--text);box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.tab-btn.active{background:var(--text);color:var(--white);box-shadow:0 6px 22px rgba(26,26,46,.18);transform:translateY(-2px)}
.tab-btn[data-tab="laretta"].active{background:linear-gradient(135deg,var(--amber),#e8890a)}
.tab-btn[data-tab="piani"].active{background:linear-gradient(135deg,var(--coral),#d94828)}

/* ── PANELS ── */
.panel-wrap{position:relative;z-index:5;max-width:900px;margin:0 auto 5rem;padding:0 1.2rem}
.panel{display:none;animation:fadeUp .4s cubic-bezier(.22,1,.36,1) both}
.panel.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ── CARD ── */
.card{
  background:var(--white);border:1.5px solid rgba(0,0,0,.06);
  border-radius:1.4rem;padding:1.8rem 2rem;margin-bottom:1.2rem;
  position:relative;overflow:hidden;box-shadow:var(--shadow);
  transition:box-shadow .25s,transform .22s;
}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.card-line{position:absolute;top:0;left:0;right:0;height:4px;border-radius:1.4rem 1.4rem 0 0}
.lt{background:linear-gradient(90deg,var(--teal),var(--lime))}
.la{background:linear-gradient(90deg,var(--amber),var(--coral))}
.lc{background:linear-gradient(90deg,var(--coral),var(--violet))}
.lv{background:linear-gradient(90deg,var(--violet),var(--teal))}
.card h2{
  font-family:'Syne',sans-serif;font-size:1.12rem;font-weight:700;
  letter-spacing:.02em;margin-bottom:.55rem;
  display:flex;align-items:center;gap:.5rem;
}
.badge{
  font-size:.68rem;font-weight:700;font-family:'Syne',sans-serif;
  letter-spacing:.12em;text-transform:uppercase;
  padding:.22rem .6rem;border-radius:.35rem;
  background:var(--teal-light);color:var(--teal);
}

/* ── STAT CHIPS ── */
.stat-row{display:flex;gap:.65rem;flex-wrap:wrap;margin:.7rem 0}
.stat-chip{
  background:var(--teal-light);border:1.5px solid rgba(0,184,154,.2);
  border-radius:.6rem;padding:.38rem .85rem;
  font-size:.8rem;font-weight:600;color:var(--teal);font-family:'Syne',sans-serif;
}

/* ── CALENDAR ── */
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}
.cal-title{font-family:'Syne',sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}
.cal-hdr{text-align:center;font-size:.65rem;font-weight:700;font-family:'Syne',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-bottom:.28rem}
.cal-day{
  aspect-ratio:1;border-radius:.45rem;
  background:var(--bg);border:1.5px solid rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:center;
  font-size:.76rem;font-weight:500;cursor:pointer;
  transition:all .18s;user-select:none;color:var(--text);
}
.cal-day:hover:not(.empty){background:var(--teal-light);border-color:rgba(0,184,154,.4);color:var(--teal)}
.cal-day.done{
  background:linear-gradient(135deg,var(--teal),#00a088);
  border-color:transparent;color:var(--white);font-weight:700;
  box-shadow:0 2px 8px rgba(0,184,154,.25);
}
.cal-day.today{border-color:var(--amber);color:var(--amber);font-weight:700}
.cal-day.empty{background:transparent;border:none;cursor:default}

/* ── SLIDER ── */
.slider-wrap{margin:.75rem 0}
.slider-label{
  display:flex;justify-content:space-between;font-size:.74rem;color:var(--muted);
  margin-bottom:.45rem;font-family:'Syne',sans-serif;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
}
.slider-label .val{color:var(--teal);font-size:.82rem}
input[type=range]{
  -webkit-appearance:none;width:100%;height:5px;border-radius:3px;
  background:var(--bg2);outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--teal);border:2.5px solid var(--white);
  box-shadow:0 2px 8px rgba(0,184,154,.35);transition:transform .15s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.3)}
.prog-track{height:6px;border-radius:3px;background:var(--teal-light);margin-top:.35rem;overflow:hidden}
.prog-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--teal),var(--lime));transition:width .5s cubic-bezier(.22,1,.36,1)}

/* ── TOGGLE ── */
.toggle-row{display:flex;align-items:center;gap:.7rem;margin-top:.55rem}
.tog-label{font-size:.82rem;color:var(--muted)}
.toggle{position:relative;width:44px;height:24px;display:inline-block;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.tog{
  position:absolute;inset:0;background:var(--bg2);
  border-radius:24px;cursor:pointer;border:1.5px solid rgba(0,0,0,.1);transition:.28s;
}
.tog::before{
  content:'';position:absolute;width:18px;height:18px;
  left:2px;top:2px;background:var(--white);border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,.15);transition:.28s;
}
.toggle input:checked+.tog{background:var(--teal);border-color:var(--teal)}
.toggle input:checked+.tog::before{transform:translateX(20px)}

/* ── EVENT CARDS ── */
.ev-card{
  background:var(--bg);border:1.5px solid rgba(0,0,0,.06);
  border-radius:1rem;padding:1.1rem 1.3rem;margin-bottom:.75rem;
  position:relative;overflow:hidden;transition:box-shadow .2s,transform .2s;
}
.ev-card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.ev-card.done-card{opacity:.45}
.ev-title{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;display:flex;align-items:center;gap:.4rem;margin-bottom:.18rem;color:var(--text)}
.ev-date{font-size:.76rem;color:var(--muted);margin-bottom:.45rem;font-weight:500}
.ev-desc{font-size:.82rem;color:var(--muted);margin-bottom:.45rem;line-height:1.55}

/* ── ADD FORM ── */
.add-section{
  background:var(--bg);border:1.5px dashed rgba(0,0,0,.1);
  border-radius:1.1rem;padding:1.4rem 1.6rem;margin-top:.4rem;
}
.add-section h3{
  font-family:'Syne',sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;
}
.form-row{display:flex;gap:.65rem;flex-wrap:wrap;margin-bottom:.65rem}
.form-row input[type=text],
.form-row input[type=date],
.form-row textarea{
  flex:1;min-width:145px;padding:.6rem 1rem;
  background:var(--white);border:1.5px solid rgba(0,0,0,.1);
  border-radius:.7rem;color:var(--text);
  font-family:'Outfit',sans-serif;font-size:.88rem;
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.form-row input:focus,.form-row textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-light)}
.form-row textarea{resize:vertical;min-height:60px}
.btn-add{
  background:var(--text);color:var(--white);
  border:none;border-radius:.7rem;padding:.6rem 1.5rem;
  font-size:.86rem;font-weight:700;font-family:'Syne',sans-serif;
  letter-spacing:.05em;cursor:pointer;transition:transform .15s,box-shadow .15s,background .2s;
}
.btn-add:hover{background:var(--teal);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,184,154,.3)}

/* per-tab overrides */
#tab-laretta .stat-chip{background:var(--amber-light);border-color:rgba(245,158,11,.25);color:var(--amber)}
#tab-laretta .badge{background:var(--amber-light);color:var(--amber)}
#tab-laretta input[type=range]::-webkit-slider-thumb{background:var(--amber);box-shadow:0 2px 8px rgba(245,158,11,.35)}
#tab-laretta .toggle input:checked+.tog{background:var(--amber);border-color:var(--amber)}
#tab-laretta .slider-label .val{color:var(--amber)}
#tab-laretta .btn-add:hover{background:var(--amber)}
#tab-laretta input:focus,#tab-laretta textarea:focus{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-light)}
#tab-laretta .prog-fill{background:linear-gradient(90deg,var(--amber),var(--coral))}
#tab-laretta .prog-track{background:var(--amber-light)}

#tab-piani .stat-chip{background:var(--coral-light);border-color:rgba(240,90,58,.22);color:var(--coral)}
#tab-piani .badge{background:var(--coral-light);color:var(--coral)}
#tab-piani input[type=range]::-webkit-slider-thumb{background:var(--coral);box-shadow:0 2px 8px rgba(240,90,58,.35)}
#tab-piani .toggle input:checked+.tog{background:var(--coral);border-color:var(--coral)}
#tab-piani .slider-label .val{color:var(--coral)}
#tab-piani .btn-add:hover{background:var(--coral)}
#tab-piani input:focus,#tab-piani textarea:focus{border-color:var(--coral);box-shadow:0 0 0 3px var(--coral-light)}
#tab-piani .prog-fill{background:linear-gradient(90deg,var(--coral),var(--violet))}
#tab-piani .prog-track{background:var(--coral-light)}

@media(max-width:600px){
  header h1{font-size:3rem}
  .card{padding:1.3rem 1.2rem}
  .add-section{padding:1.1rem 1rem}
}

/* ═══════════════════════════════════════════════
   NORMALE MENSCHEN — SONG CARD
   ═══════════════════════════════════════════════ */

.song-card {
  background: var(--text);
  color: var(--bg);
  border: none;
  position: relative;
  overflow: hidden;
}
.song-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(139,92,246,.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(0,184,154,.15) 0%, transparent 60%);
  pointer-events: none;
}
.song-card .card-line {
  opacity: .4;
}

/* header */
.song-header {
  margin-bottom: 1.4rem;
  position: relative;
  z-index: 1;
}
.song-eyebrow {
  font-family: 'Syne', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--violet-light);
  opacity: .7;
  margin-bottom: .5rem;
}
.song-title {
  font-family: 'DM Serif Display', serif;
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--bg);
  line-height: 1.1;
  margin-bottom: .6rem;
}
.song-meta {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}
.song-badge {
  font-family: 'Syne', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--violet-light);
  background: rgba(139,92,246,.2);
  border: 1px solid rgba(139,92,246,.3);
  border-radius: 2rem;
  padding: .2rem .7rem;
}
.song-countdown {
  font-family: 'Outfit', sans-serif;
  font-size: .72rem;
  color: rgba(245,242,236,.45);
  letter-spacing: .06em;
}

/* audio player */
.song-player-wrap {
  margin-bottom: 1.6rem;
  position: relative;
  z-index: 1;
}
.song-player {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .9rem;
  padding: .7rem 1rem;
  backdrop-filter: blur(6px);
}
.song-play-btn {
  background: var(--violet);
  color: #fff;
  border: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: .85rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 14px rgba(139,92,246,.4);
}
.song-play-btn:hover {
  background: #7c3aed;
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(139,92,246,.55);
}
.song-progress-wrap {
  flex: 1;
  padding: .2rem 0;
}
.song-progress-track {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,.15);
  border-radius: 2px;
  cursor: pointer;
}
.song-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--violet), var(--teal));
  border-radius: 2px;
  transition: width .1s linear;
  pointer-events: none;
}
.song-progress-thumb {
  position: absolute;
  top: 50%; left: 0%;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  background: var(--bg);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--violet);
  pointer-events: none;
  transition: left .1s linear;
}
.song-time {
  font-family: 'Syne', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  color: rgba(245,242,236,.5);
  letter-spacing: .06em;
  flex-shrink: 0;
  min-width: 2.5rem;
  text-align: right;
}

/* lyrics */
.song-lyrics {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.4rem;
}
.lyric-stanza {
  font-family: 'DM Serif Display', serif;
  font-size: .97rem;
  font-weight: 400;
  line-height: 1.85;
  color: rgba(245,242,236,.78);
  margin-bottom: 1.2rem;
  letter-spacing: .01em;
}
.lyric-highlight {
  color: var(--bg);
  font-style: italic;
  opacity: 1;
}
.lyric-finale {
  color: rgba(245,242,236,.9);
  font-size: 1.05rem;
}
.lyric-divider {
  text-align: center;
  color: var(--violet);
  opacity: .5;
  font-size: 1rem;
  letter-spacing: .3em;
  margin: .4rem 0 1.2rem;
  font-family: 'Syne', sans-serif;
}

/* ── no-file fallback ── */
.song-player-wrap.no-file .song-player {
  opacity: .45;
  pointer-events: none;
}
.song-player-wrap.no-file::after {
  content: attr(data-fallback);
  display: block;
  margin-top: .5rem;
  font-size: .74rem;
  color: rgba(245,242,236,.35);
  font-family: 'Outfit', sans-serif;
  letter-spacing: .04em;
  text-align: center;
}

/* ═══════════════════════════════════════════════
   CATALOGO
   ═══════════════════════════════════════════════ */

.cat-item {
  border: 1px solid var(--border);
  border-radius: .8rem;
  padding: .75rem 1rem;
  margin-bottom: .6rem;
  background: var(--bg);
  transition: box-shadow .15s;
}
.cat-item:hover { box-shadow: var(--shadow); }

.cat-item-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.cat-item-title {
  font-family: 'Syne', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.cat-item-meta {
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
}
.cat-item-note {
  font-size: .8rem;
  color: var(--muted);
  margin-top: .4rem;
  line-height: 1.5;
}
.cat-link {
  color: var(--teal);
  text-decoration: none;
}
.cat-link:hover { text-decoration: underline; }

/* star rating */
.star-row {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-top: .6rem;
}
.star-label {
  font-size: .8rem;
  color: var(--muted);
  margin-right: .2rem;
}
.star {
  font-size: 1.3rem;
  color: var(--border);
  cursor: pointer;
  transition: color .12s, transform .1s;
  line-height: 1;
}
.star.active, .star.hover { color: var(--amber); }
.star:hover { transform: scale(1.2); }
.star-val {
  font-size: .78rem;
  color: var(--muted);
  margin-left: .3rem;
  min-width: .8rem;
}

/* ── Catalogo inner tabs ── */
.cat-tabs {
  display: flex;
  gap: .4rem;
  margin: 1rem 0 .8rem;
  border-bottom: 1.5px solid var(--border);
  padding-bottom: .6rem;
}
.cat-tab {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 2rem;
  padding: .3rem .85rem;
  font-family: 'Syne', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted);
  cursor: pointer;
  transition: all .18s;
}
.cat-tab.active, .cat-tab:hover {
  background: var(--text);
  color: var(--white);
  border-color: var(--text);
}
.cat-panel { display: none; }
.cat-panel.active { display: block; }

/* ── YouTube item styling ── */
.yt-icon {
  width: 28px; height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
}
.yt-header { align-items: center; }
.yt-link {
  color: #FF0000 !important;
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: .88rem;
  text-decoration: none;
  flex: 1;
}
.yt-link:hover { text-decoration: underline; }
.yt-item { border-left: 3px solid #FF0000 !important; }

/* ── cat-item meta details ── */
.cat-item-year {
  font-size: .75rem;
  color: var(--muted);
  font-weight: 400;
  margin-left: .3rem;
}
.cat-item-artist {
  font-size: .82rem;
  color: var(--muted);
  font-weight: 400;
}

/* ── edit button ── */
.cat-edit {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .85rem;
  color: var(--muted);
  padding: .1rem .25rem;
  border-radius: .3rem;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.cat-edit:hover { color: var(--violet); background: var(--violet-light); }

/* ── inline edit form ── */
.cat-edit-form { padding: .2rem 0; }
.cat-edit-form .form-row { margin-bottom: .5rem; }
.cat-edit-form input,
.cat-edit-form textarea {
  width: 100%;
  padding: .45rem .7rem;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: .5rem;
  font-family: 'Outfit', sans-serif;
  font-size: .85rem;
  color: var(--text);
  outline: none;
  transition: border-color .2s;
}
.cat-edit-form input:focus,
.cat-edit-form textarea:focus { border-color: var(--violet); }
.ef-btns {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: .6rem;
}
/* ── Film link (generic external URL) ── */
.film-link {
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: .88rem;
  text-decoration: none;
  flex: 1;
  transition: color .15s;
}
.film-link:hover {
  color: var(--teal);
  text-decoration: underline;
}
.film-link::after {
  content: ' ↗';
  font-size: .7rem;
  opacity: .45;
  font-weight: 400;
}

/* ═══ QUIZ ═══ */
.quiz-list{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.quiz-row{display:flex;align-items:center;gap:.7rem;padding:.65rem .8rem;border-radius:.55rem;border:1px solid var(--border);transition:all .25s cubic-bezier(.22,1,.36,1);overflow:hidden}
.quiz-row:hover{background:var(--bg3);border-color:var(--border-s)}
.quiz-row.answered{border-color:var(--a3);background:var(--a3-bg)}
.quiz-row.answered-no{border-color:var(--muted);background:var(--bg2)}
.quiz-hidden{display:none!important}
.quiz-num{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:500;color:var(--a1);letter-spacing:.05em;flex-shrink:0;min-width:18px}
.quiz-text{flex:1;font-size:.8rem;line-height:1.4;min-width:0}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* Pill Duo */
.quiz-toggle{display:flex;gap:.25rem;flex-shrink:0}
.qt{font-family:'Bricolage Grotesque',sans-serif;font-size:.7rem;font-weight:700;padding:.32rem .7rem;border-radius:2rem;border:1.5px solid var(--border);background:var(--bg2);color:var(--text-2);cursor:pointer;transition:all .15s;min-width:42px;text-align:center}
.qt:hover{border-color:var(--border-s);color:var(--text)}
.qt-yes.selected{background:var(--a3-bg);border-color:var(--a3);color:var(--a3)}
.qt-no.selected{background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}

/* Submit */
.quiz-submit{margin-top:.6rem;width:100%;padding:.65rem;font-size:.82rem;transition:all .2s}
.quiz-submit:disabled{opacity:.3;cursor:not-allowed;transform:none;filter:none}

/* Result */
.quiz-result{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin-top:1rem;padding:1.2rem;background:var(--bg2);border-radius:.75rem;border:1px solid var(--border);animation:fadeUp .4s cubic-bezier(.22,1,.36,1)}
.quiz-score-ring{position:relative;width:110px;height:110px}
.quiz-score-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--bg3);stroke-width:8}
.ring-fg{fill:none;stroke:var(--a1);stroke-width:8;stroke-linecap:round;stroke-dasharray:326.73;stroke-dashoffset:326.73;transition:stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1)}
.ring-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-size:1.4rem;font-weight:800;color:var(--a1)}
.quiz-profile{text-align:center}
.quiz-profile strong{font-family:'Bricolage Grotesque',sans-serif;font-size:.9rem;display:block;margin-bottom:.2rem}
.quiz-profile p{font-size:.74rem;color:var(--text-2);line-height:1.5}

@media(max-width:600px){.quiz-row{flex-wrap:wrap;gap:.4rem}.quiz-toggle{width:100%;justify-content:flex-end}}