/* Tilawat v14 — calmer home, vertical library, touch-first playback controls. */
#homeView .quick-grid{display:none!important}

.last-listened-card{
  position:relative;
  width:100%;
  min-height:98px;
  margin:12px 0 14px;
  padding:10px 10px 10px 12px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 82px;
  grid-template-rows:auto auto auto;
  column-gap:12px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--surface2) 88%,#fff 2%),var(--bg-elev));
  color:var(--ink);
  text-align:right;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.16);
}
.last-listened-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 150% at 100% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 62%);
}
.last-listened-card__art{grid-column:1;grid-row:1/4;width:82px;height:82px;border-radius:12px;overflow:hidden;background:var(--surface2);z-index:1}
.last-listened-card__art img{width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:grayscale(1) contrast(1.02)}
.last-listened-card__text{grid-column:2;grid-row:1/4;min-width:0;z-index:1}
.last-listened-card__label{display:block;color:var(--accent-strong);font-size:10px;font-weight:700;margin-bottom:3px}
.last-listened-card__text b,.last-listened-card__text small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.last-listened-card__text b{font-size:15px;line-height:1.45}
.last-listened-card__text small{font-size:10px;color:var(--muted);margin-top:3px}
.last-listened-card__play{grid-column:3;grid-row:1/4;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--bg);z-index:1;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.last-listened-card__play svg{width:17px;height:17px;fill:currentColor;stroke:none}
.last-listened-card:active{transform:scale(.985)}

.library-head__actions{display:flex;align-items:center;gap:9px;color:var(--muted)}
.library-edit-toggle{width:39px;height:39px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--ink)}
.library-edit-toggle svg{width:18px;height:18px}
.library-edit-toggle[aria-pressed='true']{background:var(--ink);color:var(--bg)}

#libraryGrid.library-list{display:grid;grid-template-columns:1fr!important;gap:0!important}
#libraryGrid .library-row{
  position:relative;
  min-width:0;
  min-height:98px;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr) 84px;
  grid-template-rows:1fr 1fr;
  column-gap:12px;
  align-items:center;
  padding:9px 0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  text-align:right;
  touch-action:pan-y;
  transform-origin:center;
}
#libraryGrid .library-row:last-child{border-bottom:0}
#libraryGrid .library-row .art{grid-column:1;grid-row:1/3;width:84px;height:84px;aspect-ratio:1;border-radius:12px;box-shadow:none}
#libraryGrid .library-row .art img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
#libraryGrid .library-row h3{grid-column:2;grid-row:1;margin:0;align-self:end;font-size:15px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#libraryGrid .library-row p{grid-column:2;grid-row:2;margin:2px 0 0;align-self:start;color:var(--muted);font-size:10px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#libraryGrid .library-row .library-row__play{
  grid-column:3;grid-row:1/3;position:static!important;inset:auto!important;
  width:40px;height:40px;opacity:1!important;transform:none!important;
  border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--bg);box-shadow:none;
}
#libraryGrid .library-row .library-row__play svg{width:16px;fill:currentColor;stroke:none}
#libraryGrid .library-row.is-current .library-row__play{background:var(--accent);color:var(--accent-ink)}
#libraryGrid .library-row .library-drag-handle{
  display:none;grid-column:3;grid-row:1/3;width:40px;height:52px;border-radius:12px;
  place-items:center;color:var(--muted);background:var(--surface);border:1px solid var(--line);
  font:700 23px/1 system-ui;letter-spacing:-4px;cursor:grab;touch-action:none;user-select:none;
}
#libraryView.library-editing #libraryGrid .library-row .library-row__play{display:none!important}
#libraryView.library-editing #libraryGrid .library-row .library-drag-handle{display:grid}
#libraryView.library-editing #libraryGrid .library-row{cursor:default}
#libraryGrid .library-row.is-dragging{z-index:20;background:var(--surface);border-radius:14px;border-color:transparent;box-shadow:0 18px 42px rgba(0,0,0,.36)}
body.is-dragging{user-select:none;-webkit-user-select:none;overscroll-behavior:none}

/* A larger hit target without a visually heavy seek bar. */
.seek{position:relative;margin-top:12px}
#seek{height:24px;touch-action:none;cursor:pointer}
#seek::-webkit-slider-runnable-track{height:4px;border-radius:999px}
#seek::-webkit-slider-thumb{margin-top:-6px}
html.is-seeking #seek{cursor:grabbing}

@media(max-width:390px){
  .last-listened-card{grid-template-columns:42px minmax(0,1fr) 76px;column-gap:10px}
  .last-listened-card__art{width:76px;height:76px}
  #libraryGrid .library-row{grid-template-columns:42px minmax(0,1fr) 78px;column-gap:10px;min-height:92px}
  #libraryGrid .library-row .art{width:78px;height:78px}
}
@media(min-width:760px){
  #libraryGrid.library-list{max-width:760px;margin-inline:auto}
  .last-listened-card{max-width:760px;margin-inline:auto}
}
@media(prefers-reduced-motion:reduce){
  .last-listened-card,#libraryGrid .library-row{transition:none!important;animation:none!important}
}