/* ========== GENERELT ========== */
body {
  margin: 0;
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  background: linear-gradient(180deg, #f5f7fa, #e4ebf7);
  color: #111;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.song-info-open{
  overflow:hidden;
}

body.song-print-open{
  overflow:hidden;
}

/* ========== HEADER ========== */
.app-header {
  background: #2f7cf7;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 40px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo {
  height: 46px;
}

.brand-name {
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.login-btn {
  background: white;
  color: #2f7cf7;
  border: none;
  padding: 10px 22px;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  font-size: 1rem;
  transition: 0.25s ease;
}

.login-btn:hover {
  background: #f3f3f3;
  transform: scale(1.05);
}

/* ========== MAIN ========== */
.song-gallery {
  flex: 1;
  padding: 50px 70px;
  text-align: center;
}

.song-gallery h1 {
  margin-bottom: 35px;
  font-size: 2.2rem;
  font-weight: 700;
  color: #1b1b1b;
}

/* ========== SONG GRID ========== */
.songs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  justify-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

/* ========== SONG CARD ========== */
.song-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  width: 260px;
  transition: all 0.25s ease;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.song-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

/* Coverbillede */
.song-cover {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-bottom: 1px solid #eee;
}

/* Info */
.song-info {
  padding: 15px 20px 25px;
  text-align: center;
}

.song-title {
  font-weight: 700;
  font-size: 1.2rem;
  margin: 10px 0 5px;
  color: #222;
}

.song-artist {
  color: #666;
  font-size: 1rem;
}

/* Hover overlay */
.song-card::after {
  content: "▶ Spil sang";
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(47, 124, 247, 0.9);
  color: white;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 25px;
  font-size: 0.95rem;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.song-card:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* ========== RESPONSIV ========== */
@media (max-width: 900px) {
  .songs-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
  }

  .song-card {
    width: 200px;
  }

  .song-cover {
    height: 200px;
  }

  .song-title {
    font-size: 1rem;
  }

  .song-artist {
    font-size: 0.85rem;
  }
}

/* === LOGIN POPUP === */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.login-popup {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  width: 300px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  animation: fadeIn 0.3s ease;
}

.login-popup h2 {
  margin-top: 0;
  color: var(--blue);
  text-align: center;
}

.login-popup input {
  padding: 0.6rem;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.login-popup button {
  background: var(--blue);
  color: rgb(12, 0, 247);
  border: none;
  padding: 0.6rem;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.login-popup button:hover {
  background: #003bb1;
}

.error {
  color: red;
  font-size: 0.9rem;
  text-align: center;
  min-height: 1rem;
}

.klassekode {
  font-weight: bold;
  color: white;
  margin-right: 10px;
  font-size: 30px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}


.login-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.login-popup {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  width: 320px;
  text-align: center;
  animation: popupFade 0.3s ease;
}

.error-msg {
  color: red;
  font-size: 14px;
  margin: 8px 0;
}

.klassekode-display {
  font-weight: bold;
  color: white;
  margin-right: 10px;
  font-size: 30px;
}

.login-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.login-popup {
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  width: 340px;
  text-align: center;
}

.login-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.tab {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: #eee;
  cursor: pointer;
  font-weight: 600;
}

.tab.active {
  background: #1a73e8;
  color: white;
}

.login-section {
  display: none;
}

.login-section.active {
  display: block;
}

.kode-bobler {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}

.kode-input {
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 24px;
  border: 2px solid #ccc;
  border-radius: 8px;
  outline: none;
  transition: 0.2s;
}

.kode-input:focus {
  border-color: #1a73e8;
}

.error-msg {
  color: red;
  font-size: 14px;
  min-height: 20px;
}

.login-popup button {
  margin-top: 10px;
  background: #1a73e8;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: 0.2s;
}

.login-popup button:hover {
  background: #135dc4;
}

/* Sørg for at headeren er positioneret som reference */
.app-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1f4fff;
  height: 60px;
  padding: 0 20px;
}

/* Midterste klassekode — centreres horisontalt i headeren */
.class-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 17px;
  font-weight: 700;
  color: white;
  background: rgba(255, 255, 255, 0.15);
  padding: 6px 14px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  pointer-events: none;
}

/* Logget ind bruger — højre side af headeren */
.login-info {
  margin-right: 20px;
  position: absolute;
  right: 100px; /* Plads til log ud-knappen */
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 600;
  color: white;
  background: linear-gradient(90deg, #1951ff, #49a5ff);
  padding: 5px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* Sørg for at login-knappen stadig er helt ude i højre side */
.login-btn {
  margin-left: auto;
  background: white;
  color: #1f4fff;
  border: none;
  border-radius: 20px;
  padding: 6px 16px;
  cursor: pointer;
  font-weight: 600;
}


/* ===== SANG CARD ANIMATION ===== */
.song-card {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.song-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Lille hover-effekt for ekstra polish */
.song-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.titles-container {
  animation: bgFadeIn 1s ease both;
}

@keyframes bgFadeIn {
  from {
    opacity: 0;
    filter: blur(8px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* ==========================================
   FUTURISTIC INDEX THEME (Violet/Indigo)
   ========================================== */
:root{
  --violet:#EA7AF4;
  --plum:#B43E8F;
  --indigo-bloom:#6200B3;
  --indigo:#3B0086;
  --midnight:#290628;
  --text:#F4ECFF;
  --text-soft:#D7C3F1;
  --line:rgba(234,122,244,.24);
}

body{
  font-family:"Space Grotesk","Avenir Next","Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 620px at 12% -8%, rgba(234,122,244,.25), transparent 62%),
    radial-gradient(900px 600px at 100% 0%, rgba(98,0,179,.22), transparent 58%),
    linear-gradient(145deg, #1b0430 0%, #140326 46%, #0f0220 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(rgba(234,122,244,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,122,244,.11) 1px, transparent 1px);
  background-size:40px 40px;
}

.app-header{
  background:linear-gradient(90deg, rgba(180,62,143,.86) 0%, rgba(98,0,179,.88) 46%, rgba(59,0,134,.92) 100%);
  border-bottom:1px solid rgba(234,122,244,.28);
  box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}

.brand-name{ color:#f6eaff; text-shadow:0 0 10px rgba(234,122,244,.35); }

.login-btn{
  background:linear-gradient(180deg, rgba(247,240,255,.95), rgba(229,208,255,.96));
  color:#2b0d4e;
  border:1px solid rgba(234,122,244,.34);
  box-shadow:0 10px 24px rgba(0,0,0,.24), 0 0 20px rgba(234,122,244,.24);
  position:relative;
  z-index:4;
}
.login-btn:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 12px 28px rgba(0,0,0,.3), 0 0 26px rgba(234,122,244,.32);
}

.song-gallery h1{
  color:#f4e6ff;
  text-shadow:0 0 20px rgba(234,122,244,.38);
}

.song-card{
  background:linear-gradient(180deg, rgba(40,10,66,.94), rgba(24,6,40,.95));
  border:1px solid rgba(234,122,244,.28);
  box-shadow:0 12px 28px rgba(0,0,0,.42);
}
.song-card:hover{
  transform:translateY(-8px) scale(1.03);
  box-shadow:0 16px 34px rgba(0,0,0,.48), 0 0 24px rgba(234,122,244,.36);
}

.song-cover{
  border-bottom:1px solid rgba(234,122,244,.24);
  filter:saturate(1.04) contrast(1.04);
}

.song-title{ color:#f3e7ff; }
.song-artist{ color:var(--text-soft); }

.song-card::after{
  background:linear-gradient(90deg, rgba(180,62,143,.94), rgba(98,0,179,.94));
  border:1px solid rgba(234,122,244,.35);
  box-shadow:0 10px 18px rgba(0,0,0,.38), 0 0 14px rgba(234,122,244,.36);
}

.class-info,
.login-info,
.klassekode-display{
  background:rgba(19,4,34,.45);
  border:1px solid rgba(234,122,244,.28);
  color:#f7ecff;
  box-shadow:0 0 20px rgba(234,122,244,.2);
  pointer-events:none;
}

.teacher-login-info{
  pointer-events:auto;
  cursor:pointer;
  transition:box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.teacher-login-info-code{
  display:inline-block;
  padding-bottom:2px;
  border-bottom:2px solid rgba(247, 236, 255, .84);
  line-height:1;
}

.teacher-login-info:hover,
.teacher-login-info:focus-visible{
  border-color:rgba(234,122,244,.48);
  background:rgba(34,9,58,.68);
  box-shadow:0 0 26px rgba(234,122,244,.28);
  outline:none;
}

.login-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(5, 3, 14, .72);
  backdrop-filter: blur(14px);
  z-index:20;
  animation:loginOverlayIn .34s cubic-bezier(.2,.8,.2,1) both;
}

.login-popup{
  background:linear-gradient(180deg, rgba(34,9,58,.98), rgba(19,5,34,.98));
  border:1px solid rgba(234,122,244,.3);
  color:#f4e8ff;
  box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 24px rgba(234,122,244,.24);
  width:min(420px, calc(100vw - 32px));
  position:relative;
  overflow:hidden;
  animation:loginPanelIn .48s cubic-bezier(.16,.84,.24,1) both;
}

.login-popup::after{
  content:"";
  position:absolute;
  inset:-22% -38%;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 36%,
      rgba(255,255,255,.02) 44%,
      rgba(255,255,255,.2) 49%,
      rgba(194,255,223,.18) 52%,
      rgba(255,255,255,.08) 57%,
      transparent 66%,
      transparent 100%
    );
  mix-blend-mode:screen;
  opacity:0;
  transform:translateX(-34%) translateY(-6%) rotate(8deg);
  pointer-events:none;
  animation:loginSweepIn .88s cubic-bezier(.18,.8,.2,1) .18s both;
}

.login-popup-panel{
  position:relative;
  padding:28px 26px 24px;
  border-radius:22px;
  overflow:hidden;
  isolation:isolate;
}

.login-popup-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(420px 180px at -10% -10%, rgba(54,255,140,.1), transparent 50%),
    radial-gradient(340px 220px at 110% 0%, rgba(234,122,244,.16), transparent 55%);
  pointer-events:none;
}

.login-popup h2{
  position:relative;
  margin:0 0 18px;
  color:#f9eeff;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-shadow:0 0 14px rgba(234,122,244,.35);
  animation:loginTitleIn .55s cubic-bezier(.16,.84,.24,1) .08s both;
}

.login-switch{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin-bottom:18px;
}

.role-toggle-btn{
  position:absolute;
  top:8px;
  right:8px;
  width:62px;
  min-width:62px;
  max-width:62px;
  height:62px;
  min-height:62px;
  max-height:62px;
  border:none;
  border-radius:50%;
  aspect-ratio:1 / 1;
  display:grid;
  place-items:center;
  padding:0;
  box-sizing:border-box;
  line-height:1;
  font-size:1.15rem;
  overflow:hidden;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(180deg, rgba(117, 36, 201, .96), rgba(76, 18, 128, .94));
  border:1px solid rgba(234,122,244,.36);
  box-shadow:0 10px 20px rgba(0,0,0,.28), 0 0 18px rgba(234,122,244,.2);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  z-index:2;
  animation:loginOrbitIn .52s cubic-bezier(.16,.84,.24,1) .12s both;
}

.role-toggle-btn:hover{
  transform:translateY(-1px) scale(1.04);
  background:linear-gradient(180deg, rgba(138, 52, 229, .98), rgba(89, 24, 146, .96));
  box-shadow:0 12px 22px rgba(0,0,0,.32), 0 0 22px rgba(234,122,244,.28);
}

.tab{
  appearance:none;
  background:rgba(255,255,255,.1);
  color:#f0dcff;
  border:1px solid rgba(234,122,244,.22);
  min-height:42px;
  font-weight:700;
  letter-spacing:.03em;
}
.tab.active{
  background:linear-gradient(145deg, #8a2ce0, #6200B3);
  border-color:rgba(234,122,244,.72);
  box-shadow:0 0 18px rgba(234,122,244,.24);
}

.login-form{
  position:relative;
  display:grid;
  gap:12px;
  animation:loginFormIn .5s cubic-bezier(.16,.84,.24,1) .14s both;
}

.login-form[data-login-panel="student"]{
  gap:18px;
  justify-items:center;
  width:100%;
}

.login-input-row{
  position:relative;
}

.login-field-indicator{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:1rem;
  pointer-events:none;
}

.login-form p{
  margin:0;
  color:#dbc6f4;
  text-align:left;
}

.login-form[data-login-panel="student"] p{
  width:100%;
  text-align:center;
}

.login-help{
  margin:0;
  color:#c9b5de;
  font-size:.9rem;
  line-height:1.45;
}

.login-status{
  min-height:1.25rem;
  margin:0;
  font-size:.9rem;
  color:#ff9cbc;
  text-align:left;
}

.login-status[data-state="success"]{
  color:#9dffc0;
}

.hidden{
  display:none !important;
}

.kode-input,
.login-popup input{
  width:100%;
  box-sizing:border-box;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(98,0,179,.28);
  color:#22083f;
  min-height:48px;
  border-radius:14px;
  padding:0 42px 0 14px;
}

.kode-bobler{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;

  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)),
    linear-gradient(145deg, rgba(47,10,76,.9), rgba(22,7,38,.92));
  border:1px solid rgba(234,122,244,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 14px 28px rgba(0,0,0,.26);
  width:min(100%, 420px);
  max-width:420px;
  margin:0 auto;
}

.kode-bobler .kode-input{
  width:64px;
  min-width:64px;
  height:64px;
  min-height:64px;
  padding:0;
  border-radius:999px;
  text-align:center;
  font-size:1.6rem;
  font-weight:800;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.94), rgba(229,231,241,.92) 42%, rgba(205,208,220,.92) 100%);
  border:2px solid rgba(219,202,255,.62);
  box-shadow:
    inset 0 2px 10px rgba(255,255,255,.5),
    0 10px 24px rgba(6,0,19,.34),
    0 0 0 0 rgba(161,77,255,0);
  color:#12041f;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.kode-bobler .kode-input:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 2px 10px rgba(255,255,255,.56),
    0 12px 28px rgba(6,0,19,.38),
    0 0 18px rgba(161,77,255,.16);
}

.kode-bobler .kode-input:focus{
  border-color:#d98cff;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.98), rgba(240,232,255,.96) 42%, rgba(218,205,255,.92) 100%);
  box-shadow:
    inset 0 2px 10px rgba(255,255,255,.56),
    0 12px 28px rgba(6,0,19,.42),
    0 0 0 4px rgba(190,92,255,.16),
    0 0 24px rgba(190,92,255,.32);
  transform:translateY(-2px) scale(1.03);
}

.kode-bobler .kode-input.is-filled{
  background:
    radial-gradient(circle at 30% 25%, rgba(247,251,255,.98), rgba(232,241,255,.95) 42%, rgba(209,225,255,.92) 100%);
}
.kode-input:focus,
.login-popup input:focus{
  outline:none;
  border-color:rgba(234,122,244,.72);
  box-shadow:0 0 0 2px rgba(234,122,244,.24);
}

.login-popup button{
  background:linear-gradient(145deg, #8a2ce0, #6200B3);
  color:#fff;
  border:1px solid rgba(234,122,244,.62);
  min-height:44px;
  border-radius:100px;
  font-weight:700;
  letter-spacing:.03em;
}
.login-popup button:hover{
  background:linear-gradient(145deg, #9d3af2, #6f0ec4);
}

.login-popup .text-login-btn{
  background:none;
  border:none;
  min-height:auto;
  padding:0;
  border-radius:0;
  color:#cfa7ff;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  justify-self:start;
  box-shadow:none;
}

.login-popup .text-login-btn:hover{
  background:none;
  color:#f1d0ff;
  text-decoration:underline;
}

.teacher-info-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(5, 3, 14, .76);
  backdrop-filter: blur(14px);
  z-index:30;
  animation:loginOverlayIn .34s cubic-bezier(.2,.8,.2,1) both;
}

.teacher-info-popup{
  position:relative;
  width:min(1180px, calc(100vw - 32px));
  border-radius:56px;
  display:grid;
  place-items:center;
  background:transparent;
  animation:none;
}

.teacher-info-scale{
  position:relative;
  width:min(1180px, calc(100vw - 32px));
  border-radius:56px;
  transform: scale(.91);
  transform-origin: center center;
}

.teacher-info-anim{
  position:relative;
  width:100%;
  border-radius:56px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.06) 0 2px, transparent 3px) 0 0 / 96px 96px,
    linear-gradient(180deg, rgba(86,12,146,.98), rgba(36,7,68,.98));
  border:1px solid rgba(234,122,244,.26);
  box-shadow:0 28px 84px rgba(0,0,0,.68), 0 0 42px rgba(234,122,244,.18);
  animation:loginPanelIn .42s cubic-bezier(.16,.84,.24,1) both;
}

.teacher-info-copy{
  padding:36px 48px 10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
}

.teacher-info-kicker{
  margin:0;
  color:#cfa7ff;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  font-weight:700;
}

.teacher-info-copy h2{
  margin:0;
  color:#f9eeff;
  font-size:clamp(1.6rem, 3vw, 3.2rem);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:-.02em;
  display:flex;
  align-items:baseline;
  gap:.5rem;
  flex-wrap:wrap;
}

.teacher-info-line-two{
  margin-top:8px;
}

.teacher-info-copy strong{
  color:#a824ff;
}

.teacher-info-step{
  color:#fff;
  min-width:fit-content;
  font-weight:700;
}

.teacher-info-copy .teacher-info-step{
  font-size:clamp(1.9rem, 3.8vw, 3.8rem);
}

.teacher-info-line-two .teacher-info-step{
  font-size:clamp(1.8rem, 3.7vw, 3.6rem);
}

.teacher-info-preview{
  position:relative;
  min-height:460px;
  margin:0 48px 40px;
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.14)),
    rgba(20,5,34,.9);
  border:1px solid rgba(234,122,244,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px rgba(0,0,0,.26);
  padding:22px 26px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:22px;
}

.teacher-info-preview-label{
  margin:10px 0 0;
  color:#dbc6f4;
  font-size:clamp(1rem, 1.7vw, 1.55rem);
  text-align:center;
}

.teacher-info-bubble-row{
  width:min(100%, 760px);
  display:flex;
  justify-content:center;
  gap:16px;
  padding:18px 22px;
  border-radius:24px;
  background:rgba(46,16,76,.48);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.teacher-info-bubble{
  width:92px;
  height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.98), rgba(234,234,244,.95) 44%, rgba(208,208,221,.92) 100%);
  border:2px solid rgba(219,202,255,.72);
  color:#141414;
  font-weight:900;
  font-size:clamp(2.2rem, 3.4vw, 3.8rem);
  line-height:1;
  box-shadow:
    inset 0 2px 10px rgba(255,255,255,.55),
    0 12px 24px rgba(0,0,0,.32);
}

.teacher-info-name-row{
  width:min(100%, 460px);
  display:flex;
  justify-content:center;
}

.teacher-info-name-input{
  width:100%;
  border:none;
  border-radius:18px;
  padding:16px 22px;
  background:rgba(255,255,255,.92);
  color:#6d6d6d;
  font:inherit;
  font-size:clamp(1rem, 1.8vw, 1.5rem);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.teacher-info-login-btn{
  margin-top:30px;
  min-width:140px;
  padding:16px 28px;
  border:none;
  border-radius:999px;
  background:linear-gradient(145deg, #8a2ce0, #6200B3);
  color:#fff;
  font-weight:700;
  font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}

.teacher-info-close{
  position:absolute;
  top:14px;
  right:14px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
  z-index:3;
}

.teacher-info-close:hover{
  background:rgba(255,255,255,.2);
}

@media (max-width: 840px){
  .teacher-info-popup{
    grid-template-columns:1fr;
    border-radius:34px;
  }

  .teacher-info-scale{
    transform: scale(.91);
  }

  .teacher-info-preview{
    min-height:380px;
    margin:0 18px 22px;
  }

  .teacher-info-copy{
    padding:24px 20px 8px;
  }

  .teacher-info-bubble-row{
    width:min(100%, 640px);
    gap:12px;
  }

  .teacher-info-bubble{
    width:74px;
    height:74px;
    font-size:2rem;
  }
}

@media (max-width: 560px){
  .teacher-info-overlay{
    padding:12px;
  }

  .teacher-info-copy{
    padding:20px 14px 6px;
  }

  .teacher-info-preview{
    padding:14px;
    min-height:300px;
    margin:0 10px 16px;
  }

  .teacher-info-copy h2{
    font-size:clamp(1.45rem, 5vw, 2.4rem);
  }

  .teacher-info-bubble-row{
    gap:10px;
    padding:14px 16px;
  }

  .teacher-info-bubble{
    width:60px;
    height:60px;
    font-size:1.55rem;
  }
}

.secondary-login-btn{
  background:linear-gradient(145deg, rgba(60,25,92,.95), rgba(34,12,54,.96)) !important;
  border-color:rgba(234,122,244,.22) !important;
  color:#f0e3ff !important;
}

@keyframes loginOverlayIn{
  from{
    opacity:0;
    backdrop-filter:blur(0);
    background:radial-gradient(circle at 50% 42%, rgba(160,72,255,0), rgba(5, 3, 14, 0) 56%);
  }
  to{
    opacity:1;
    backdrop-filter:blur(14px);
    background:
      radial-gradient(circle at 50% 42%, rgba(160,72,255,.1), transparent 34%),
      rgba(5, 3, 14, .72);
  }
}

@keyframes loginPanelIn{
  0%{
    opacity:0;
    transform:perspective(1200px) translateY(54px) scale(.84) rotateX(18deg);
    box-shadow:0 8px 22px rgba(0,0,0,.18), 0 0 0 rgba(234,122,244,0);
    filter:saturate(.7) blur(6px) brightness(.72);
  }
  58%{
    opacity:1;
    transform:perspective(1200px) translateY(-10px) scale(1.028) rotateX(-3deg);
    box-shadow:
      0 36px 88px rgba(0,0,0,.62),
      0 0 52px rgba(234,122,244,.34),
      0 0 120px rgba(126,42,255,.18);
    filter:saturate(1.08) blur(0) brightness(1.04);
  }
  100%{
    opacity:1;
    transform:perspective(1200px) translateY(0) scale(1) rotateX(0deg);
    box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 24px rgba(234,122,244,.24);
    filter:saturate(1) blur(0) brightness(1);
  }
}

@keyframes loginTitleIn{
  from{
    opacity:0;
    transform:translateY(18px) scale(.94);
    letter-spacing:.2em;
    text-shadow:0 0 0 rgba(234,122,244,0);
    filter:blur(6px);
  }
  to{
    opacity:1;
    transform:translateY(0);
    letter-spacing:.08em;
    text-shadow:0 0 14px rgba(234,122,244,.35);
    filter:blur(0);
  }
}

@keyframes loginOrbitIn{
  from{
    opacity:0;
    transform:translate(-16px, -16px) scale(.68) rotate(-18deg);
    filter:blur(8px);
  }
  to{
    opacity:1;
    transform:translate(0, 0) scale(1) rotate(0deg);
    filter:blur(0);
  }
}

@keyframes loginFormIn{
  from{
    opacity:0;
    transform:translateY(20px) scale(.98);
    filter:blur(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

@keyframes loginSweepIn{
  0%{
    opacity:0;
    transform:translateX(-34%) translateY(-6%) rotate(8deg);
  }
  24%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:translateX(36%) translateY(4%) rotate(8deg);
  }
}

.close-login{
  width:100%;
  margin-top:16px;
  background:linear-gradient(145deg, rgba(61,23,95,.9), rgba(35,12,56,.95)) !important;
  color:#f3deff;
}

.user-songs-grid{
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  align-items:flex-start;
  justify-content:flex-start;
}

.song-gallery{
  width:min(1500px, calc(100% - 48px));
  margin:0 auto;
  padding:42px 0 72px;
  text-align:left;
}

.arrangement-section{
  margin-bottom:48px;
}

.section-title{
  position:relative;
  display:inline-block;
  margin:0 0 22px;
  padding-bottom:10px;
  font-size:clamp(1.8rem, 2.6vw, 2.8rem);
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.section-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  border-radius:999px;
  opacity:.85;
}

.section-title-user{
  color:#8dffb9;
  text-shadow:0 0 16px rgba(54,255,140,.35);
}

.section-title-user::after{
  background:linear-gradient(90deg, rgba(54,255,140,.95), rgba(54,255,140,0));
  box-shadow:0 0 18px rgba(54,255,140,.45);
}

.arrangement-heading{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.arrangement-filter-button{
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:48px;
  height:48px;
  padding:8px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:#8dffb9;
  cursor:pointer;
  filter:drop-shadow(0 0 8px rgba(54,255,140,.35));
}
.arrangement-filter-button svg{ width:100%; height:100%; }
.arrangement-filter-button:hover,
.arrangement-filter-button.is-active{
  background:rgba(54,255,140,.09);
  border-color:rgba(141,255,185,.3);
}
.arrangement-filter-button:disabled{ opacity:.4; cursor:wait; }
.arrangement-filter-dot{
  position:absolute;
  top:3px;
  right:3px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#8dffb9;
}
.arrangement-filter-summary{ margin:-6px 0 22px; color:#bde9ce; }
body.arrangement-filter-open{ overflow:hidden; }
.arrangement-filter-dialog{
  box-sizing:border-box;
  width:min(760px, calc(100vw - 28px));
  max-height:calc(100dvh - 40px);
  padding:28px;
  border:1px solid rgba(141,255,185,.3);
  border-radius:24px;
  color:var(--text);
  background:radial-gradient(ellipse at top left, rgba(54,255,140,.08), transparent 60%), #1b0a2b;
  box-shadow:0 28px 70px rgba(0,0,0,.55), 0 0 28px rgba(54,255,140,.1);
  overflow:auto;
  overscroll-behavior:contain;
  color-scheme:dark;
}
.arrangement-filter-dialog::backdrop{ background:rgba(7,3,16,.78); backdrop-filter:blur(10px); }
.arrangement-filter-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.arrangement-filter-header h2{ margin:0; color:#8dffb9; font-size:1.6rem; text-shadow:0 0 16px rgba(54,255,140,.2); }
.arrangement-filter-dialog button,
.arrangement-filter-dialog select,
.arrangement-filter-dialog input{ font:inherit; }
.arrangement-filter-dialog button{ cursor:pointer; }
.filter-close{ flex:0 0 40px; height:40px; border:0; border-radius:12px; background:rgba(255,255,255,.06); color:var(--text); font-size:1.7rem !important; }
.filter-hint{ margin:8px 0 16px; color:var(--text-soft); font-size:.9rem; line-height:1.5; }
.filter-fields{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0 18px; }
.filter-limits{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.filter-fields > label,
.filter-limits > label{ display:flex; flex-direction:column; gap:8px; font-size:.9rem; }
.arrangement-filter-dialog select,
.arrangement-filter-dialog input[type="number"]{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:44px;
  padding:10px;
  border:1px solid rgba(234,122,244,.25);
  border-radius:10px;
  color:var(--text);
  background:#281438;
}
.arrangement-filter-dialog input::placeholder{ color:#bdaccd; }
.arrangement-filter-dialog select:disabled{ opacity:.5; }
.arrangement-filter-dialog fieldset{ min-width:0; padding:18px 0 0; margin:22px 0 0; border:0; border-top:1px solid rgba(234,122,244,.18); }
.arrangement-filter-dialog legend{ padding:0 10px 0 0; color:#8dffb9; font-weight:600; }
.filter-choices{ display:flex; flex-wrap:wrap; gap:8px; }
.filter-choices label{ display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid rgba(234,122,244,.23); border-radius:10px; background:rgba(255,255,255,.03); cursor:pointer; }
.filter-choices label:has(input:checked){ border-color:rgba(141,255,185,.6); background:rgba(54,255,140,.1); }
.filter-choices input{ width:16px; height:16px; margin:0; accent-color:#8dffb9; }
.arrangement-filter-footer{ margin-top:24px; padding-top:16px; border-top:1px solid rgba(234,122,244,.18); }
.arrangement-filter-footer p{ margin:0 0 14px; color:#bde9ce; }
.filter-actions{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; }
.filter-actions button{ padding:12px 18px; border-radius:12px; font-weight:600; }
.filter-reset{ color:var(--text); border:1px solid rgba(234,122,244,.3); background:transparent; }
.filter-apply{ color:#102719; border:1px solid #8dffb9; background:#8dffb9; }
.filter-actions button:hover{ filter:brightness(1.12); }
.arrangement-filter-button:focus-visible,
.arrangement-filter-dialog :focus-visible{ outline:2px solid #8dffb9; outline-offset:3px; }
@media (max-width:600px){
  .arrangement-heading{ gap:8px; }
  .arrangement-filter-button{ width:40px; height:40px; padding:6px; }
  .arrangement-filter-dialog{ padding:20px; border-radius:18px; }
  .filter-fields,
  .filter-limits{ grid-template-columns:1fr; }
  .arrangement-filter-header h2{ font-size:1.3rem; }
}

.section-title-edu{
  color:#f3b2ff;
  text-shadow:0 0 16px rgba(234,122,244,.35);
}

.section-title-edu::after{
  background:linear-gradient(90deg, rgba(234,122,244,.95), rgba(234,122,244,0));
  box-shadow:0 0 18px rgba(234,122,244,.4);
}

.songs-grid{
  justify-items:start;
  margin:0;
  max-width:none;
}

.song-card{
  width:min(100%, 260px);
  isolation:isolate;
}

.song-card-inner{
  position:relative;
  width:100%;
}

.song-card-link{
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
}

.difficulty-ribbon{
  position:absolute;
  top:22px;
  right:-46px;
  width:170px;
  padding:9px 0;
  text-align:center;
  color:#fff;
  font-size:.88rem;
  font-weight:900;
  letter-spacing:.03em;
  text-transform:uppercase;
  transform:rotate(45deg);
  box-shadow:0 12px 22px rgba(0,0,0,.28);
  text-shadow:0 1px 4px rgba(0,0,0,.24);
  pointer-events:none;
  z-index:2;
}

.difficulty-ribbon.difficulty-nem{
  background:linear-gradient(180deg, rgba(83, 217, 138, .84), rgba(47, 170, 99, .74));
}

.difficulty-ribbon.difficulty-medium{
  background:linear-gradient(180deg, rgba(245, 216, 91, .84), rgba(215, 173, 31, .74));
  color:#2f1f00;
  text-shadow:none;
}

.difficulty-ribbon.difficulty-svaer{
  background:linear-gradient(180deg, rgba(255, 124, 124, .84), rgba(217, 65, 65, .74));
}

.card-actions{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  gap:8px;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .22s ease, transform .22s ease;
  z-index:3;
}

.song-card.has-difficulty .card-actions{
  top:18px;
  right:18px;
}

.card-info-btn{
  position:absolute;
  top:12px;
  left:12px;
  width:36px;
  height:36px;
  border:none;
  border-radius:999px;
  display:grid;
  place-items:center;
  padding:0;
  cursor:pointer;
  color:#f8ebff;
  font-size:1rem;
  font-weight:900;
  font-family:"Space Grotesk","Avenir Next","Segoe UI",sans-serif;
  background:linear-gradient(180deg, rgba(38,11,58,.94), rgba(82,24,124,.92));
  border:1px solid rgba(234,122,244,.42);
  box-shadow:0 10px 18px rgba(0,0,0,.32), 0 0 12px rgba(234,122,244,.24);
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .22s ease, transform .22s ease, box-shadow .18s ease, background .18s ease;
  z-index:3;
}

.song-card.has-difficulty .card-info-btn{
  top:18px;
  left:18px;
}

.card-info-btn:hover,
.card-info-btn:focus-visible{
  transform:translateY(-1px) scale(1.06);
  background:linear-gradient(180deg, rgba(63,17,99,.98), rgba(110,33,167,.96));
  box-shadow:0 12px 20px rgba(0,0,0,.35), 0 0 16px rgba(234,122,244,.3);
  outline:none;
}

.song-card:hover .card-info-btn,
.song-card:focus-within .card-info-btn{
  opacity:1;
  transform:translateY(0);
}

.song-card:hover .card-actions,
.song-card:focus-within .card-actions{
  opacity:1;
  transform:translateY(0);
}

.song-card .song-cover,
.song-card .song-info,
.song-card .create-card-hero{
  pointer-events:none;
}

.card-action-btn{
  width:36px;
  height:36px;
  border:none;
  border-radius:999px;
  display:grid;
  place-items:center;
  padding:0;
  cursor:pointer;
  color:#f8ebff;
  background:linear-gradient(180deg, rgba(38,11,58,.94), rgba(82,24,124,.92));
  border:1px solid rgba(234,122,244,.42);
  box-shadow:0 10px 18px rgba(0,0,0,.32), 0 0 12px rgba(234,122,244,.24);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.card-action-btn:hover{
  transform:translateY(-1px) scale(1.06);
  background:linear-gradient(180deg, rgba(63,17,99,.98), rgba(110,33,167,.96));
  box-shadow:0 12px 20px rgba(0,0,0,.35), 0 0 16px rgba(234,122,244,.3);
}

.card-action-btn.is-disabled,
.card-action-btn:disabled{
  cursor:not-allowed;
  opacity:.42;
  transform:none;
  background:linear-gradient(180deg, rgba(48,40,58,.9), rgba(58,50,68,.88));
  border-color:rgba(255,255,255,.12);
  box-shadow:none;
}

.card-action-btn span{
  font-size:1rem;
  line-height:1;
  pointer-events:none;
}

.card-action-btn[data-action="delete"]{
  background:linear-gradient(180deg, rgba(82, 14, 33, .96), rgba(146, 20, 54, .94));
  border-color:rgba(255, 134, 168, .45);
  box-shadow:0 10px 18px rgba(0,0,0,.32), 0 0 12px rgba(255, 84, 132, .22);
}

.card-action-btn[data-action="delete"]:hover{
  background:linear-gradient(180deg, rgba(112, 18, 44, .98), rgba(184, 29, 70, .96));
  box-shadow:0 12px 20px rgba(0,0,0,.35), 0 0 16px rgba(255, 84, 132, .3);
}

.confirm-overlay{
  position:fixed;
  inset:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(7, 3, 16, .76);
  backdrop-filter:blur(16px);
  animation:confirmOverlayIn .2s ease-out both;
}

.confirm-dialog{
  position:relative;
  width:min(460px, calc(100vw - 32px));
  padding:28px 24px 22px;
  border-radius:24px;
  border:1px solid rgba(255, 134, 168, .28);
  background:
    radial-gradient(380px 180px at 10% -10%, rgba(255, 84, 132, .12), transparent 55%),
    radial-gradient(320px 180px at 110% 0%, rgba(234,122,244,.16), transparent 58%),
    linear-gradient(180deg, rgba(35,10,56,.98), rgba(17,6,28,.98));
  box-shadow:0 24px 60px rgba(0,0,0,.52), 0 0 26px rgba(255, 84, 132, .14);
  text-align:left;
  transform-origin:center top;
  animation:confirmDialogIn .28s cubic-bezier(.2, .85, .25, 1) both;
}

.confirm-orb{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
  border-radius:999px;
  color:#ffd6e4;
  background:linear-gradient(180deg, rgba(126, 18, 52, .96), rgba(191, 32, 85, .92));
  border:1px solid rgba(255, 164, 190, .4);
  box-shadow:0 10px 26px rgba(255, 84, 132, .2);
}

.confirm-title{
  margin:0 0 8px;
  color:#fff2f6;
  font-size:1.55rem;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.confirm-message{
  margin:0;
  color:#e8d8ef;
  line-height:1.55;
  font-size:1rem;
}

.confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:22px;
}

.confirm-btn{
  min-width:116px;
  min-height:44px;
  border:none;
  border-radius:999px;
  padding:0 18px;
  font-weight:700;
  letter-spacing:.03em;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.confirm-btn:hover{
  transform:translateY(-1px);
}

.confirm-btn-cancel{
  color:#f3e7ff;
  background:linear-gradient(180deg, rgba(57, 22, 87, .96), rgba(35, 14, 55, .96));
  border:1px solid rgba(234,122,244,.26);
  box-shadow:0 10px 18px rgba(0,0,0,.24);
}

.confirm-btn-danger{
  color:#fff4f7;
  background:linear-gradient(180deg, rgba(127, 18, 53, .98), rgba(190, 30, 82, .96));
  border:1px solid rgba(255, 156, 187, .34);
  box-shadow:0 12px 20px rgba(0,0,0,.28), 0 0 18px rgba(255, 84, 132, .22);
}

.song-info-overlay{
  position:fixed;
  inset:0;
  z-index:45;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(7, 3, 16, .78);
  backdrop-filter:blur(18px);
  animation:confirmOverlayIn .22s ease-out both;
}

.song-info-dialog{
  position:relative;
  width:min(920px, calc(100vw - 32px));
  max-height:min(88vh, 920px);
  overflow:auto;
  overscroll-behavior:contain;
  padding:28px;
  border-radius:28px;
  border:1px solid rgba(234,122,244,.28);
  background:
    radial-gradient(460px 220px at 6% -6%, rgba(83, 217, 138, .08), transparent 55%),
    radial-gradient(400px 220px at 110% 0%, rgba(234,122,244,.16), transparent 58%),
    linear-gradient(180deg, rgba(35,10,56,.98), rgba(17,6,28,.98));
  box-shadow:0 28px 70px rgba(0,0,0,.56), 0 0 28px rgba(234,122,244,.16);
  animation:confirmDialogIn .3s cubic-bezier(.2, .85, .25, 1) both;
  scrollbar-width:thin;
  scrollbar-color:rgba(234,122,244,.42) transparent;
}

.song-info-dialog-actions{
  position:absolute;
  top:18px;
  right:18px;
  display:flex;
  align-items:center;
  gap:12px;
  z-index:2;
}

.song-info-close,
.song-info-print{
  height:42px;
  border:none;
  border-radius:999px;
  padding:0 16px;
  cursor:pointer;
  color:#f3e7ff;
  font-weight:800;
  background:linear-gradient(180deg, rgba(57, 22, 87, .96), rgba(35, 14, 55, .96));
  border:1px solid rgba(234,122,244,.26);
  box-shadow:0 10px 18px rgba(0,0,0,.24);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.song-info-close{
  min-width:84px;
}

.song-info-print{
  min-width:52px;
  padding:0 14px;
  font-size:1.35rem;
}

.song-info-close:hover,
.song-info-close:focus-visible,
.song-info-print:hover,
.song-info-print:focus-visible{
  transform:translateY(-1px);
  background:linear-gradient(180deg, rgba(73, 28, 112, .98), rgba(45, 17, 71, .98));
  box-shadow:0 12px 20px rgba(0,0,0,.28), 0 0 16px rgba(234,122,244,.16);
  outline:none;
}

.song-info-hero{
  display:grid;
  grid-template-columns:minmax(220px, 280px) minmax(0, 1fr);
  gap:24px;
  align-items:center;
}

.song-info-cover{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:24px;
  border:1px solid rgba(234,122,244,.26);
  box-shadow:0 18px 34px rgba(0,0,0,.3);
}

.song-info-summary{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.song-info-level{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 10px 20px rgba(0,0,0,.22);
}

.song-info-level.difficulty-nem{
  background:linear-gradient(180deg, rgba(83, 217, 138, .92), rgba(47, 170, 99, .82));
  color:#fff;
}

.song-info-level.difficulty-medium{
  background:linear-gradient(180deg, rgba(245, 216, 91, .92), rgba(215, 173, 31, .82));
  color:#2f1f00;
}

.song-info-level.difficulty-svaer{
  background:linear-gradient(180deg, rgba(255, 124, 124, .92), rgba(217, 65, 65, .82));
  color:#fff;
}

.song-info-title{
  margin:0;
  font-size:clamp(2rem, 4vw, 3.2rem);
  line-height:1.02;
  color:#fff2ff;
}

.song-info-artist{
  margin:0;
  font-size:1.15rem;
  color:#dbc7f2;
}

.song-info-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:6px;
}

.song-info-stat{
  min-width:150px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(234,122,244,.16);
  color:#f4e8ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.song-info-stat strong{
  display:block;
  margin-bottom:4px;
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#bca4d8;
}

.song-info-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  margin-top:24px;
}

.song-info-card{
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(234,122,244,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.song-info-card-wide{
  grid-column:1 / -1;
}

.song-info-card-title{
  margin-bottom:14px;
  color:#fff0ff;
  font-size:1rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.song-info-detail-list{
  display:grid;
  gap:10px;
}

.song-info-detail{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(234,122,244,.12);
}

.song-info-detail:last-child{
  padding-bottom:0;
  border-bottom:none;
}

.song-info-detail span{
  color:#bca4d8;
}

.song-info-detail strong{
  color:#fff6ff;
  font-size:1rem;
}

.song-info-chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.song-info-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(63,17,99,.56), rgba(34,9,58,.62));
  border:1px solid rgba(234,122,244,.18);
  color:#f6ebff;
  font-weight:700;
}

.song-info-chip img{
  width:22px;
  height:22px;
  object-fit:contain;
}

.song-info-note{
  color:#f0e5fb;
  line-height:1.7;
  white-space:pre-wrap;
}

.song-info-muted{
  color:#bca4d8;
}

.song-print-overlay{
  position:fixed;
  inset:0;
  z-index:55;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(7, 3, 16, .82);
  backdrop-filter:blur(18px);
  animation:confirmOverlayIn .22s ease-out both;
}

.song-print-dialog{
  width:min(1320px, calc(100vw - 32px));
  height:min(92vh, 1040px);
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(234,122,244,.24);
  background:
    radial-gradient(500px 240px at 6% -6%, rgba(83, 217, 138, .08), transparent 55%),
    radial-gradient(420px 220px at 110% 0%, rgba(234,122,244,.14), transparent 58%),
    linear-gradient(180deg, rgba(35,10,56,.98), rgba(17,6,28,.98));
  box-shadow:0 28px 70px rgba(0,0,0,.56), 0 0 28px rgba(234,122,244,.16);
  animation:confirmDialogIn .3s cubic-bezier(.2, .85, .25, 1) both;
}

.song-print-shell{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 260px;
  height:100%;
  min-height:0;
}

.song-print-preview-pane{
  min-width:0;
  min-height:0;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:18px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(28,10,44,.74), rgba(16,7,28,.86));
}

.song-print-preview-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}

.song-print-heading{
  margin:0;
  color:#fff2ff;
  font-size:1.55rem;
  letter-spacing:.02em;
}

.song-print-subheading{
  margin:6px 0 0;
  color:#d9c5ec;
  font-size:1rem;
}

.song-print-mode-switch{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.song-print-mode-button{
  min-height:40px;
  border:none;
  border-radius:999px;
  padding:0 16px;
  cursor:pointer;
  color:#eadcf8;
  font-weight:800;
  font-size:.96rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(234,122,244,.16);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.song-print-mode-button:hover,
.song-print-mode-button:focus-visible{
  transform:translateY(-1px);
  background:rgba(255,255,255,.12);
  outline:none;
}

.song-print-mode-button.is-active{
  color:#fff8ff;
  background:linear-gradient(180deg, rgba(116, 58, 201, .94), rgba(81, 33, 151, .94));
  border-color:rgba(201,147,255,.42);
  box-shadow:0 10px 20px rgba(50, 19, 82, .28), 0 0 18px rgba(167,111,255,.18);
}

.song-print-close{
  min-width:92px;
  height:42px;
  border:none;
  border-radius:999px;
  padding:0 18px;
  cursor:pointer;
  color:#f3e7ff;
  font-weight:800;
  background:linear-gradient(180deg, rgba(57, 22, 87, .96), rgba(35, 14, 55, .96));
  border:1px solid rgba(234,122,244,.26);
  box-shadow:0 10px 18px rgba(0,0,0,.24);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.song-print-close:hover,
.song-print-close:focus-visible{
  transform:translateY(-1px);
  background:linear-gradient(180deg, rgba(73, 28, 112, .98), rgba(45, 17, 71, .98));
  box-shadow:0 12px 20px rgba(0,0,0,.28), 0 0 16px rgba(234,122,244,.16);
  outline:none;
}

.song-print-preview{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:18px;
  border-radius:24px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(234,122,244,.14);
}

.song-print-sidebar{
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow:auto;
  background:linear-gradient(180deg, rgba(249,247,252,.96), rgba(233,227,240,.94));
  border-left:1px solid rgba(91,56,117,.14);
}

.song-print-control,
.song-print-toggle,
.song-print-stepper{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(70, 45, 93, .1);
  color:#32203f;
}

.song-print-control[hidden],
.song-print-toggle[hidden],
.song-print-stepper[hidden]{
  display:none;
}

.song-print-control span,
.song-print-toggle span,
.song-print-stepper span{
  font-weight:700;
}

.song-print-control select{
  border:none;
  background:transparent;
  color:#32203f;
  font-weight:700;
  font-size:1rem;
}

.song-print-control select:focus{
  outline:none;
}

.song-print-toggle input{
  width:20px;
  height:20px;
  accent-color:#67c86e;
}

.song-print-stepper{
  align-items:flex-start;
  flex-direction:column;
}

.song-print-stepper-controls{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.song-print-stepper-controls button{
  width:34px;
  height:34px;
  border:none;
  border-radius:999px;
  cursor:pointer;
  color:#26163a;
  font-weight:900;
  font-size:1.2rem;
  background:linear-gradient(180deg, rgba(236, 227, 245, 1), rgba(214, 198, 229, 1));
  box-shadow:0 6px 12px rgba(39, 17, 57, .12);
}

.song-print-stepper-controls strong{
  min-width:32px;
  text-align:center;
  color:#32203f;
}

.song-print-actions{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-top:8px;
}

.song-print-primary{
  min-height:48px;
  border:none;
  border-radius:18px;
  cursor:pointer;
  font-size:1rem;
  font-weight:900;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#2c1f0c;
  background:linear-gradient(180deg, rgba(252, 209, 77, 1), rgba(241, 184, 25, 1));
  box-shadow:0 12px 24px rgba(184, 135, 23, .24);
}

.song-print-secondary{
  min-height:48px;
  border:none;
  border-radius:18px;
  cursor:pointer;
  font-size:1rem;
  font-weight:900;
  letter-spacing:.02em;
  color:#32203f;
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(233,227,240,1));
  box-shadow:0 10px 20px rgba(39, 17, 57, .12);
}

.song-print-primary:hover,
.song-print-primary:focus-visible,
.song-print-secondary:hover,
.song-print-secondary:focus-visible{
  transform:translateY(-1px);
  outline:none;
}

@media (max-width: 780px){
  .song-info-dialog{
    padding:22px 18px 18px;
  }

  .song-info-hero{
    grid-template-columns:1fr;
  }

  .song-info-cover{
    max-width:320px;
  }

  .song-info-grid{
    grid-template-columns:1fr;
  }

  .song-info-card-wide{
    grid-column:auto;
  }

  .song-print-shell{
    grid-template-columns:1fr;
  }

  .song-print-sidebar{
    border-left:none;
    border-top:1px solid rgba(91,56,117,.14);
  }

}

@keyframes confirmOverlayIn{
  from{
    opacity:0;
    backdrop-filter:blur(0);
  }
  to{
    opacity:1;
    backdrop-filter:blur(16px);
  }
}

@keyframes confirmDialogIn{
  0%{
    opacity:0;
    transform:translateY(18px) scale(.94);
    box-shadow:0 8px 24px rgba(0,0,0,.2), 0 0 0 rgba(255, 84, 132, 0);
  }
  65%{
    opacity:1;
    transform:translateY(-4px) scale(1.015);
    box-shadow:0 28px 64px rgba(0,0,0,.56), 0 0 34px rgba(255, 84, 132, .2);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    box-shadow:0 24px 60px rgba(0,0,0,.52), 0 0 26px rgba(255, 84, 132, .14);
  }
}

.song-card.is-static{
  cursor:default;
}

.song-card.is-static::after{
  display:none;
}

.song-card.create-card{
  border:1px solid rgba(54,255,140,.35);
  box-shadow:0 16px 34px rgba(0,0,0,.44), 0 0 26px rgba(54,255,140,.18);
}

.song-card.create-card::after{
  content:"Opret nyt";
  background:linear-gradient(90deg, rgba(21,172,98,.95), rgba(72,255,161,.88));
  color:#062012;
  border:1px solid rgba(153,255,202,.52);
  box-shadow:0 10px 18px rgba(0,0,0,.3), 0 0 14px rgba(54,255,140,.28);
}

.song-card.create-card:hover{
  box-shadow:0 18px 40px rgba(0,0,0,.48), 0 0 28px rgba(54,255,140,.28);
}

.song-card.create-card .song-card-inner{
  min-height:100%;
  background:
    radial-gradient(circle at 50% 22%, rgba(112,255,181,.14), transparent 32%),
    linear-gradient(180deg, rgba(18,40,30,.78), rgba(11,21,18,.94));
}

.song-card.create-card .song-info{
  width:100%;
  min-height:164px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px;
  text-align:center;
  padding:15px 20px 25px;
  background:none;
  border:none;
}

.song-card.create-card .song-info p{
  margin:0;
}

.song-card.create-card .song-title{
  color:#e9fff3;
}

.song-card.create-card .song-artist{
  color:rgba(189,255,219,.82);
}

.create-card-hero{
  width:100%;
  height:260px;
  margin:0;
  display:grid;
  place-items:center;
  border-bottom:1px solid rgba(118,255,182,.16);
}

.create-card-hero::before{
  content:"";
  width:134px;
  height:134px;
  border-radius:50%;
  grid-area:1 / 1;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.08), transparent 38%),
    radial-gradient(circle at 68% 72%, rgba(54,255,140,.14), transparent 34%),
    linear-gradient(180deg, rgba(26,56,41,.96), rgba(10,20,15,.98));
  border:1px solid rgba(118,255,182,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 34px rgba(54,255,140,.08),
    0 18px 34px rgba(0,0,0,.34),
    0 0 32px rgba(54,255,140,.16);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.create-card-plus{
  grid-area:1 / 1;
  font-size:4.9rem;
  line-height:1;
  font-weight:300;
  color:#79ffb0;
  text-shadow:
    0 0 10px rgba(54,255,140,.42),
    0 0 24px rgba(54,255,140,.48),
    0 0 54px rgba(54,255,140,.22);
}

.song-card.create-card:hover .create-card-hero::before{
  transform:translateY(-3px) scale(1.03);
  border-color:rgba(154,255,204,.56);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 0 38px rgba(54,255,140,.1),
    0 22px 38px rgba(0,0,0,.38),
    0 0 40px rgba(54,255,140,.24);
}

.user-songs-grid .song-card{
  border:1px solid rgba(54,255,140,.3);
  box-shadow:0 16px 34px rgba(0,0,0,.44), 0 0 24px rgba(54,255,140,.16);
}

.user-songs-grid .song-card:hover{
  box-shadow:0 18px 40px rgba(0,0,0,.48), 0 0 28px rgba(54,255,140,.24);
}

.empty-state{
  margin:0;
  color:var(--text-soft);
  font-size:1rem;
}

@media (max-width: 900px) {
  .user-songs-grid{
    gap:25px;
  }

  .song-gallery{
    width:min(100% - 32px, 1500px);
    padding:32px 0 56px;
  }

  .arrangement-section{
    margin-bottom:36px;
  }
}

@media (max-width: 720px) {
  .app-header{
    position:sticky;
    top:0;
    z-index:30;
    padding:calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
    gap:10px;
  }

  .header-left{
    gap:10px;
    min-width:0;
  }

  .logo{
    height:36px;
    flex:0 0 auto;
  }

  .brand-name{
    font-size:1.2rem;
    letter-spacing:-0.02em;
    white-space:nowrap;
  }

  .login-btn{
    min-height:40px;
    padding:8px 14px;
    font-size:.92rem;
    border-radius:18px;
    flex:0 0 auto;
  }

  .song-gallery{
    width:calc(100% - 24px);
    padding:18px 0 42px;
  }

  .arrangement-section{
    margin-bottom:28px;
  }

  .section-title{
    display:block;
    margin:0 0 14px;
    padding-bottom:8px;
    font-size:clamp(1.2rem, 6.8vw, 1.8rem);
    line-height:1.02;
    letter-spacing:.02em;
    text-wrap:balance;
  }

  .songs-grid,
  .user-songs-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    justify-items:stretch;
  }

  .song-card{
    width:100%;
    max-width:none;
    min-width:0;
    border-radius:22px;
  }

  .song-card-inner{
    display:block;
    min-height:100%;
  }

  .song-card .song-cover,
  .song-card .create-card-hero{
    width:100%;
    aspect-ratio:1 / 1;
    height:auto;
    min-height:0;
    border-right:none;
    border-bottom:1px solid rgba(234,122,244,.18);
  }

  .song-card .song-cover{
    object-fit:cover;
  }

  .song-info{
    min-width:0;
    padding:12px 12px 14px;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
  }

  .song-title{
    margin:0;
    font-size:clamp(.92rem, 3.9vw, 1.05rem);
    line-height:1.12;
    text-wrap:balance;
  }

  .song-artist{
    font-size:.78rem;
    line-height:1.22;
  }

  .song-card::after{
    display:none;
  }

  .difficulty-ribbon{
    top:16px;
    right:-42px;
    width:126px;
    padding:6px 0;
    font-size:.64rem;
  }

  .card-info-btn,
  .card-actions{
    display:none !important;
  }

  .song-card.create-card .song-info{
    min-height:unset;
    align-items:center;
    text-align:center;
    padding:12px 12px 14px;
  }

  .create-card-hero{
    display:grid;
    place-items:center;
  }

  .create-card-hero::before{
    width:64px;
    height:64px;
  }

  .create-card-plus{
    font-size:2.35rem;
  }
}

@media (max-width: 420px) {
  .song-card .song-cover,
  .song-card .create-card-hero{
    aspect-ratio:1 / 1;
    height:auto;
    min-height:0;
  }

  .song-info{
    padding:10px 10px 12px;
  }

  .song-title{
    font-size:.88rem;
  }

  .song-artist{
    font-size:.74rem;
  }
}

#roleToggleBtn {

  margin-left: 100px;

}