/* ===== Theme & Layout ===== */
:root{ --bg:#0b0b0b; --fg:#e5e7eb; --muted:#94a3b8; --card:#111; --ring:rgba(255,255,255,.08) }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto}

/* Brand header */
.brand-header{
  position:sticky;top:0;z-index:100;
  background:linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0));
  backdrop-filter:saturate(120%) blur(2px);
  display:flex;justify-content:center;align-items:center;
  padding:20px 0 10px;transition:padding .18s ease
}
.brand-link{display:inline-flex;align-items:center;justify-content:center}
.brand-header .brand-img{
  display:block;width:auto;height:auto;max-height:140px;
  transition:max-height .18s ease, transform .18s ease, opacity .15s ease
}
.brand-header .brand-img:hover{opacity:.98;transform:scale(1.015)}

.wrap{max-width:1000px;margin:0 auto;padding:12px 24px 96px}
.status{margin:8px 0 18px;text-align:center;font-weight:800;font-size:22px;letter-spacing:.2px}

/* Track list */
.grid{display:flex;flex-direction:column;gap:10px}
.row{border-radius:14px;background:var(--card);border:1px solid var(--ring);box-shadow:0 1px 6px rgba(0,0,0,.2);overflow:hidden;border-left:3px solid transparent}
.row:hover{border-left-color:#ff6a00}
.row-btn{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;background:transparent;border:0;text-align:left;cursor:pointer;padding:12px 14px}
.row-main{min-width:0;flex:1}
.row-title{color:#f8fafc;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-date{min-width:128px;font-size:12px;color:#cbd5e1;flex:0 0 auto;display:flex;align-items:center;justify-content:flex-start}
.row-sub{display:flex;gap:8px;align-items:center;color:#9aa6b2;font-size:12px;margin-top:4px}
.row-duration{white-space:nowrap}
.row-actions{display:flex;align-items:center;gap:12px}
.chip{display:inline-flex;align-items:center;padding:6px 12px;background:transparent;color:#ff6a00;border:1px solid #ff6a00;border-radius:999px;font-size:13px;transition:all .15s ease}
.chip:hover{background:#ff6a00;color:#fff}
.link{font-size:13px;color:#cbd5e1;text-decoration:none;border-bottom:1px solid transparent}
.link:hover{color:#fff;border-bottom-color:#fff}
.btn-link{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--ring);border-radius:999px}

/* Skeleton */
.skeleton{height:56px;border-radius:12px;background:linear-gradient(90deg,#1f2937,#111827,#1f2937);background-size:200% 100%;animation:shimmer 1.2s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Error */
.error{padding:16px;border-radius:14px;background:#331f1f;color:#fecaca;border:1px solid #7f1d1d}
.error-title{font-weight:700;margin-bottom:6px}
.error-body{font-size:13px}

/* Floating "Učitaj još" */
.floating-refresh{
  position:fixed;right:16px;bottom:16px;z-index:120;
  padding:12px 18px;border-radius:999px;border:none;
  background:linear-gradient(180deg,#ff7a18,#ff5400);
  color:#fff;font-weight:700;letter-spacing:.2px;
  box-shadow:0 10px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
  cursor:pointer;transition:transform .08s ease, filter .15s ease, box-shadow .15s ease
}
.floating-refresh:hover{filter:brightness(1.06)}
.floating-refresh:active{transform:translateY(1px);box-shadow:0 6px 16px rgba(0,0,0,.4)}
.floating-refresh[aria-busy="true"]{filter:brightness(.95)}
.floating-refresh .spinner{display:none}
.floating-refresh[aria-busy="true"] .spinner{display:inline-block;width:1em;height:1em;margin-left:.5em;border-radius:50%;border:.18em solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin .9s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Modal */
.modal{position:fixed;inset:0;z-index:9999}
.backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.dialog{position:relative;width:min(520px,95vw);height:min(280px,70vh);margin:8vh auto;background:#0f0f0f;border:1px solid rgba(255,255,255,.08);border-radius:20px;box-shadow:0 10px 36px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.08);color:#f1f5f9}
.modal-title{font-weight:600}
#scPlayer{width:100%;height:100%;background:#000}
.modal .dialog{transform:scale(.96);opacity:0;transition:transform .2s ease,opacity .2s ease}
.modal.show .dialog{transform:scale(1);opacity:1}
.modal-close-bottom{
  position:absolute;right:22px;bottom:14px;z-index:2;
  padding:10px 14px;border-radius:999px;border:none;
  background:linear-gradient(180deg,#4b5563,#1f2937);
  color:#fff;font-weight:700;letter-spacing:.2px;
  box-shadow:0 8px 18px rgba(0,0,0,.45);cursor:pointer;
  transition:transform .08s ease, filter .15s ease
}
.modal-close-bottom:hover{filter:brightness(1.05)}
.modal-close-bottom:active{transform:translateY(1px)}

/* ===== Mobile (<=560px) ===== */
@media (max-width:560px){
  .brand-header{padding:14px 0 8px}
  .brand-header .brand-img{max-height:70px;max-width:82vw;width:auto;height:auto}
  body.scrolled .brand-header{padding:8px 0 6px}
  body.scrolled .brand-header .brand-img{max-height:48px;max-width:70vw;width:auto;height:auto}

  .wrap{padding:10px 12px 90px}
  .row-btn{flex-direction:column;align-items:stretch;gap:8px}
  .row-date{display:none}
  .row-sub,.row-actions{display:none}
  .row-head{display:flex;justify-content:flex-start;align-items:center;font-size:12px;color:#9aa6b2;margin-top:2px;margin-bottom:6px}
  .row-title{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;padding:10px 0}
  .row-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
  .row-duration-m{white-space:nowrap;color:#9aa6b2;font-size:12px}
  .row-foot-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center}
  .chip,.btn-link{padding:9px 14px;font-size:15px}
  .dialog{width:95vw;height:240px;margin:10vh auto}
  .modal-close-bottom{right:16px;bottom:10px}
}