/* luokk player — glass mini card + music page */
.lk-mini {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 9000;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.lk-mini *, .lk-mini *::before, .lk-mini *::after { box-sizing: border-box; }

.lk-card {
  width: 318px;
  padding: 18px 20px 14px;
  border-radius: 30px;
  background: linear-gradient(150deg, rgba(255,255,255,.78), rgba(255,255,255,.46));
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 20px 50px -14px rgba(38,45,70,.3), 0 2px 10px rgba(38,45,70,.06), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  transform-origin: left bottom;
  transition: opacity .28s ease, transform .34s cubic-bezier(.2,.9,.25,1), visibility .34s;
}
.lk-mini[data-open="0"] .lk-card {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.9);
}
.lk-head { display: flex; align-items: center; gap: 14px; }
.lk-cover {
  position: relative;
  width: 74px; height: 74px;
  flex: 0 0 74px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(0,0,0,.06);
  box-shadow: 0 10px 22px -10px rgba(38,45,70,.5);
  cursor: pointer;
}
.lk-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-eq {
  position: absolute; inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  padding-bottom: 9px;
  background: linear-gradient(to top, rgba(0,0,0,.35), transparent 55%);
}
.lk-mini[data-playing="1"] .lk-eq { display: flex; }
.lk-eq i { width: 3px; height: 10px; border-radius: 2px; background: #fff; animation: lk-eq 1s ease-in-out infinite; }
.lk-eq i:nth-child(2) { animation-delay: .18s; }
.lk-eq i:nth-child(3) { animation-delay: .36s; }
@keyframes lk-eq { 0%,100%{transform:scaleY(.45)} 50%{transform:scaleY(1)} }

.lk-meta { min-width: 0; flex: 1; }
.lk-title {
  font-size: 15px; font-weight: 700; line-height: 1.35; color: #17181c;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lk-artist {
  margin-top: 4px; font-size: 12px; color: rgba(23,24,28,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lk-icon {
  border: 0; background: transparent; color: rgba(23,24,28,.62);
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, color .2s, transform .2s;
}
.lk-icon:hover { background: rgba(23,24,28,.07); color: #17181c; }
.lk-icon:active { transform: scale(.92); }
.lk-collapse { width: 30px; height: 30px; flex: 0 0 30px; align-self: flex-start; margin: -4px -6px 0 0; }

.lk-ctrls { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 14px; }
.lk-play {
  width: 62px; height: 62px; border-radius: 50%; border: 0;
  background: #16181d; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 26px -10px rgba(22,24,29,.75), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .2s ease, box-shadow .2s ease;
}
.lk-play svg { transform: translateX(1px); }
.lk-play:active { transform: scale(.94); }

.lk-vol { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.lk-volbtn { width: 30px; height: 30px; flex: 0 0 30px; color: rgba(23,24,28,.5); }
.lk-volrange, .lk-pg-volrange {
  -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 2px; background: rgba(23,24,28,.14);
  outline: none; cursor: pointer;
}
.lk-volrange { flex: 1; }
.lk-volrange::-webkit-slider-thumb, .lk-pg-volrange::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: #16181d; border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.28);
}
.lk-volrange::-moz-range-thumb, .lk-pg-volrange::-moz-range-thumb {
  width: 12px; height: 12px; border: 0; border-radius: 50%; background: #16181d;
}

.lk-bar { height: 3px; margin: 12px 2px 0; border-radius: 2px; background: rgba(23,24,28,.1); overflow: hidden; }
.lk-bar i { display: block; width: 0; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #6a7cff, #b07cff); transition: width .2s linear; }

.lk-disc {
  position: absolute; left: 0; bottom: 0;
  width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%;
  overflow: hidden; cursor: pointer;
  background: rgba(255,255,255,.6);
  box-shadow: 0 14px 30px -10px rgba(38,45,70,.45), 0 0 0 4px rgba(255,255,255,.55);
  transition: transform .3s cubic-bezier(.2,.9,.25,1), opacity .25s, visibility .25s;
}
.lk-disc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-disc-ico {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(20,21,26,.34); backdrop-filter: blur(2px);
}
.lk-disc-ico svg { width: 20px; height: 20px; }
.lk-disc:hover { transform: translateY(-2px) scale(1.04); }
.lk-mini[data-open="1"] .lk-disc { opacity: 0; visibility: hidden; transform: scale(.8); }

/* dark */
html[class*="color-scheme-dark"] .lk-card {
  background: linear-gradient(150deg, rgba(38,40,48,.82), rgba(30,32,38,.62));
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 22px 54px -16px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
}
html[class*="color-scheme-dark"] .lk-title { color: #f2f3f6; }
html[class*="color-scheme-dark"] .lk-artist { color: rgba(242,243,246,.58); }
html[class*="color-scheme-dark"] .lk-icon { color: rgba(242,243,246,.7); }
html[class*="color-scheme-dark"] .lk-icon:hover { background: rgba(255,255,255,.1); color: #fff; }
html[class*="color-scheme-dark"] .lk-play { background: #f2f3f6; color: #16181d; }
html[class*="color-scheme-dark"] .lk-bar { background: rgba(255,255,255,.14); }
html[class*="color-scheme-dark"] .lk-volrange,
html[class*="color-scheme-dark"] .lk-pg-volrange { background: rgba(255,255,255,.18); }
html[class*="color-scheme-dark"] .lk-volrange::-webkit-slider-thumb,
html[class*="color-scheme-dark"] .lk-pg-volrange::-webkit-slider-thumb { background: #f2f3f6; }
html[class*="color-scheme-dark"] .lk-volrange::-moz-range-thumb,
html[class*="color-scheme-dark"] .lk-pg-volrange::-moz-range-thumb { background: #f2f3f6; }
html[class*="color-scheme-dark"] .lk-volbtn { color: rgba(242,243,246,.6); }
html[class*="color-scheme-dark"] .lk-vol-num { color: rgba(242,243,246,.55); }
html[class*="color-scheme-dark"] .lk-disc { background: rgba(38,40,48,.8); box-shadow: 0 14px 30px -10px rgba(0,0,0,.7), 0 0 0 4px rgba(255,255,255,.08); }

@media (max-width: 640px) {
  .lk-mini { left: 12px; bottom: 12px; }
  .lk-card { width: min(84vw, 300px); padding: 16px 16px 12px; border-radius: 26px; }
  .lk-cover { width: 64px; height: 64px; flex-basis: 64px; border-radius: 18px; }
  .lk-play { width: 56px; height: 56px; }
  .lk-ctrls { gap: 20px; }
}

/* ---------- music page ---------- */
#lk-page { margin: 8px 0 40px; }
.lk-pg-hero {
  display: flex; gap: 26px; align-items: center;
  padding: 26px;
  border-radius: 30px;
  background: linear-gradient(150deg, rgba(255,255,255,.74), rgba(255,255,255,.44));
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 20px 50px -18px rgba(38,45,70,.28), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
}
.lk-pg-coverwrap { flex: 0 0 168px; }
.lk-pg-cover {
  width: 168px; height: 168px; border-radius: 24px; object-fit: cover; display: block;
  background: rgba(0,0,0,.06);
  box-shadow: 0 18px 36px -16px rgba(38,45,70,.55);
}
.lk-pg-info { min-width: 0; flex: 1; }
.lk-pg-kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(23,24,28,.45); }
.lk-pg-title {
  margin: 8px 0 0; font-size: 26px; line-height: 1.25; font-weight: 700; color: #17181c;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lk-pg-artist { margin: 8px 0 0; font-size: 14px; color: rgba(23,24,28,.55); }
.lk-pg-seek { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 12px; color: rgba(23,24,28,.5); font-variant-numeric: tabular-nums; }
.lk-pg-seek input[type="range"] {
  -webkit-appearance: none; appearance: none; flex: 1; height: 4px; border-radius: 2px;
  background: rgba(23,24,28,.14); outline: none; cursor: pointer;
}
.lk-pg-seek input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: #16181d; border: 0; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.lk-pg-seek input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: #16181d; border: 0;
}
.lk-pg-ctrls { display: flex; align-items: center; gap: 20px; margin-top: 16px; }
.lk-pg-ctrls .lk-play { width: 54px; height: 54px; }
.lk-pg-vol { display: flex; align-items: center; gap: 10px; margin-top: 12px; max-width: 420px; }
.lk-pg-volbtn { width: 34px; height: 34px; flex: 0 0 34px; }
.lk-pg-volrange { flex: 1; }
.lk-vol-num { width: 40px; text-align: right; font-size: 12px; color: rgba(23,24,28,.5); font-variant-numeric: tabular-nums; }

.lk-pg-list { list-style: none; margin: 24px 0 0; padding: 6px; border-radius: 24px; background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.55); }
.lk-pg-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px; border-radius: 16px; cursor: pointer;
  transition: background .18s ease;
}
.lk-pg-list li:hover { background: rgba(255,255,255,.72); }
.lk-pg-list li.is-on { background: rgba(106,124,255,.12); }
.lk-li-n { width: 26px; flex: 0 0 26px; font-size: 12px; color: rgba(23,24,28,.4); font-variant-numeric: tabular-nums; }
.lk-li-t { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: #17181c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-li-a { flex: 0 1 34%; min-width: 0; font-size: 12px; color: rgba(23,24,28,.5); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-li-icon { width: 22px; flex: 0 0 22px; display: flex; align-items: center; justify-content: center; color: rgba(23,24,28,.35); opacity: 0; transition: opacity .18s; }
.lk-li-icon svg { width: 14px; height: 14px; }
.lk-pg-list li:hover .lk-li-icon { opacity: 1; }
.lk-pg-list li.is-on .lk-li-n { color: #6a7cff; font-weight: 700; }
.lk-pg-list li.is-on .lk-li-t { color: #4557e8; }
.lk-pg-empty { justify-content: center; color: rgba(23,24,28,.45); cursor: default; }

/* ---------- source / playlist picker ---------- */
.lk-src { margin-top: 26px; }
.lk-src-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lk-src-kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(23,24,28,.45); }
.lk-src-tabs {
  display: inline-flex; padding: 4px; border-radius: 999px;
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.75);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.lk-src-tabs button {
  border: 0; background: transparent; padding: 7px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: rgba(23,24,28,.55); cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.lk-src-tabs button:hover { color: #17181c; }
.lk-src-tabs button.is-on { background: #16181d; color: #fff; box-shadow: 0 6px 16px -8px rgba(22,24,29,.8); }
.lk-cards { display: flex; gap: 10px; overflow-x: auto; margin-top: 12px; padding-bottom: 4px; scrollbar-width: none; }
.lk-cards::-webkit-scrollbar { display: none; }
.lk-card2 {
  flex: 0 0 auto; min-width: 168px; max-width: 240px; text-align: left;
  padding: 12px 16px; border-radius: 18px; cursor: pointer;
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.75);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; flex-direction: column; gap: 4px;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.lk-card2:hover { background: rgba(255,255,255,.82); transform: translateY(-1px); }
.lk-card2.is-on { border-color: rgba(106,124,255,.65); box-shadow: 0 0 0 2px rgba(106,124,255,.16); }
.lk-c2-tag { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #6a7cff; }
.lk-c2-name { font-size: 14px; font-weight: 600; color: #17181c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-c2-meta { font-size: 12px; color: rgba(23,24,28,.45); }
.lk-src-hint { padding: 14px 4px; font-size: 13px; color: rgba(23,24,28,.5); }
.lk-tracks { margin-top: 8px; }
.lk-tracks-title { margin: 18px 4px 0; font-size: 15px; font-weight: 700; color: #17181c; }

html[class*="color-scheme-dark"] .lk-pg-hero { background: linear-gradient(150deg, rgba(38,40,48,.8), rgba(30,32,38,.6)); border-color: rgba(255,255,255,.1); }
html[class*="color-scheme-dark"] .lk-pg-title { color: #f2f3f6; }
html[class*="color-scheme-dark"] .lk-pg-artist, html[class*="color-scheme-dark"] .lk-pg-kicker, html[class*="color-scheme-dark"] .lk-pg-seek { color: rgba(242,243,246,.55); }
html[class*="color-scheme-dark"] .lk-pg-seek input[type="range"] { background: rgba(255,255,255,.18); }
html[class*="color-scheme-dark"] .lk-pg-seek input[type="range"]::-webkit-slider-thumb { background: #f2f3f6; }
html[class*="color-scheme-dark"] .lk-pg-list { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
html[class*="color-scheme-dark"] .lk-pg-list li:hover { background: rgba(255,255,255,.08); }
html[class*="color-scheme-dark"] .lk-li-t { color: #eef0f4; }
html[class*="color-scheme-dark"] .lk-li-a, html[class*="color-scheme-dark"] .lk-li-n { color: rgba(238,240,244,.5); }
html[class*="color-scheme-dark"] .lk-src-tabs { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
html[class*="color-scheme-dark"] .lk-src-tabs button { color: rgba(238,240,244,.6); }
html[class*="color-scheme-dark"] .lk-src-tabs button.is-on { background: #f2f3f6; color: #16181d; }
html[class*="color-scheme-dark"] .lk-card2 { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
html[class*="color-scheme-dark"] .lk-card2:hover { background: rgba(255,255,255,.1); }
html[class*="color-scheme-dark"] .lk-c2-name, html[class*="color-scheme-dark"] .lk-tracks-title { color: #eef0f4; }
html[class*="color-scheme-dark"] .lk-c2-meta, html[class*="color-scheme-dark"] .lk-src-hint, html[class*="color-scheme-dark"] .lk-src-kicker { color: rgba(238,240,244,.5); }

@media (max-width: 640px) {
  .lk-pg-hero { flex-direction: column; align-items: stretch; padding: 20px; border-radius: 26px; }
  .lk-pg-coverwrap { flex: none; }
  .lk-pg-cover { width: 100%; height: auto; aspect-ratio: 1/1; border-radius: 22px; }
  .lk-pg-title { font-size: 21px; }
  .lk-li-a { display: none; }
  .lk-src-head { flex-direction: column; align-items: stretch; }
  .lk-src-tabs { justify-content: center; }
  .lk-src-tabs button { flex: 1; }
  .lk-card2 { min-width: 150px; }
}