/* ---------------------------------------------------- slojevi plohe ---
   Plohe se grade prozirnim bijelim slojevima preko tamne podloge. Svijetla
   tema ih preokreće u tamne — zato stoje kao varijable, ne kao boje. */

:root {
    --w01: rgba(255, 255, 255, .01);
    --w015: rgba(255, 255, 255, .015);
    --w02: rgba(255, 255, 255, .02);
    --w03: rgba(255, 255, 255, .03);
    --w04: rgba(255, 255, 255, .04);
    --w05: rgba(255, 255, 255, .05);
    --w06: rgba(255, 255, 255, .06);
    --w07: rgba(255, 255, 255, .07);
    --w08: rgba(255, 255, 255, .08);
    --w085: rgba(255, 255, 255, .085);
    --w09: rgba(255, 255, 255, .09);
    --w10: rgba(255, 255, 255, .1);
    --w11: rgba(255, 255, 255, .11);
    --w12: rgba(255, 255, 255, .12);
    --w13: rgba(255, 255, 255, .13);
    --w14: rgba(255, 255, 255, .14);
    --w15: rgba(255, 255, 255, .15);
    --w16: rgba(255, 255, 255, .16);
    --w18: rgba(255, 255, 255, .18);
    --w20: rgba(255, 255, 255, .2);
    --w22: rgba(255, 255, 255, .22);
    --w24: rgba(255, 255, 255, .24);
    --w26: rgba(255, 255, 255, .26);
    --w30: rgba(255, 255, 255, .3);
    --w32: rgba(255, 255, 255, .32);
    --w34: rgba(255, 255, 255, .34);
    --w35: rgba(255, 255, 255, .35);
    --w38: rgba(255, 255, 255, .38);
    --w40: rgba(255, 255, 255, .4);
    --w45: rgba(255, 255, 255, .45);

    /* Sjene. Svijetla tema ih ublažava jer na papiru dubok pad izgleda prljavo. */
    --b14: rgba(0, 0, 0, .14);
    --b16: rgba(0, 0, 0, .16);
    --b18: rgba(0, 0, 0, .18);
    --b24: rgba(0, 0, 0, .24);
    --b25: rgba(0, 0, 0, .25);
    --b26: rgba(0, 0, 0, .26);
    --b28: rgba(0, 0, 0, .28);
    --b30: rgba(0, 0, 0, .3);
    --b32: rgba(0, 0, 0, .32);
    --b34: rgba(0, 0, 0, .34);
    --b35: rgba(0, 0, 0, .35);
    --b38: rgba(0, 0, 0, .38);
    --b40: rgba(0, 0, 0, .4);
    --b45: rgba(0, 0, 0, .45);
    --b46: rgba(0, 0, 0, .46);
    --b48: rgba(0, 0, 0, .48);
    --b50: rgba(0, 0, 0, .5);
    --b55: rgba(0, 0, 0, .55);
    --b60: rgba(0, 0, 0, .6);
    --b63: rgba(0, 0, 0, .63);
    --b68: rgba(0, 0, 0, .68);
    --b73: rgba(0, 0, 0, .73);
    --b75: rgba(0, 0, 0, .75);

    --surface: #06322F;   /* čvrsta ploha izbornika i kontekstnih ploča */
}

:root {
    /* Tamna tema u petroleju. Plohe su poluprozirne i zamućuju ono ispod
       sebe — otud osjećaj stakla. */
    --paper:    #001E1E;
    --paper-2:  #00312F;
    --card:     rgba(10, 62, 60, .46);
    --card-2:   rgba(14, 78, 75, .55);
    --ink:      var(--ink);
    --ink-2:    var(--ink-2);
    --muted:    var(--muted);
    --line:     var(--w10);
    --line-2:   var(--w18);
    --console:  rgba(0, 16, 16, .78);
    --console-2:var(--w10);
    --console-line: var(--w14);

    --glass:    blur(18px) saturate(140%);
    --glass-sm: blur(10px) saturate(130%);

    --accent:      #17A398;
    --accent-ink:  #001E1E;
    --accent-deep: #3FBFB6;
    --accent-soft: rgba(23, 163, 152, .16);

    --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --font-body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, monospace;

    --r-sm: 5px;
    --r:    5px;

    --pad: clamp(18px, 5vw, 56px);
    --max: 1480px;

    --player-h: 84px;

    color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Zaglavlje i traka putuju kao jedan ljepljivi sklop. Pozadina mora biti
   neprozirna: sadržaj klizi ispod, a poluprozirni sloj bi ga propuštao i
   sklop bi izgledao razlomljeno. */
.topstack {
    position: sticky; top: 0; z-index: 60;
    background: var(--paper);
}
/* Zaglavlje mora biti iznad trake: zamućenje pozadine na traci stvara vlastiti
   sloj, pa bi bez ovoga njezin gumb probijao kroz otvoreni izbornik računa. */
.topstack > .topbar { position: relative; z-index: 70; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.65 var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.has-player { padding-bottom: var(--player-h); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
    position: absolute; left: -999px; top: 8px; z-index: 200;
    background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r-sm);
}
.skip:focus { left: 8px; }

:focus-visible { outline: 2.5px solid var(--accent-deep); outline-offset: 2px; border-radius: 5px; }

/* ------------------------------------------------------------ topbar --- */

.topbar {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; gap: 20px;
    padding: 15px var(--pad);
    background: rgba(250, 249, 246, .88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.brand__text {
    font-family: var(--font-display);
    font-weight: 800; font-size: 20px;
    letter-spacing: -.015em; text-transform: uppercase;
}
.brand__logo { max-height: 38px; width: auto; }

.nav { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; }
.nav a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px; border-radius: 5px;
    font-size: 15px; font-weight: 500; color: var(--ink-2);
    transition: color .14s, background .14s;
}
.nav a .ico { width: 17px; height: 17px; opacity: .6; flex: none; }
.nav a.is-on .ico { opacity: .9; }
.nav a:hover { color: var(--ink); background: var(--w07); }
.nav a.is-on { color: var(--accent-ink); background: var(--accent); font-weight: 600; }

.navtoggle {
    display: none; margin-left: auto; width: 42px; height: 38px;
    background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-sm);
    flex-direction: column; justify-content: center; align-items: center; gap: 4px; cursor: pointer;
}
.navtoggle span:not(.sr) { width: 17px; height: 2px; background: var(--ink); border-radius: 5px; }

@media (max-width: 800px) {
    /* Otvarač izbornika ide skroz lijevo, ime iza njega. */
    .topbar { gap: 12px; }
    .navtoggle { display: flex; order: -1; margin-left: 0; }
    .brand { order: 0; margin-right: auto; }
    .loginlink { order: 1; }
    .nav {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; gap: 0; padding: 6px var(--pad) 16px;
        background: var(--paper); border-bottom: 1px solid var(--line);
        display: none;
    }
    .nav.is-open { display: flex; }
    .nav a { padding: 13px 4px; border-radius: 0; border-bottom: 1px solid var(--line); gap: 11px; }
    .nav a.is-on { background: none; color: var(--accent-deep); }
    .nav a .ico { width: 19px; height: 19px; }
}

/* -------------------------------------------------------------- hero --- */

.hero {
    position: relative;
    padding: clamp(30px, 5vw, 52px) var(--pad) clamp(34px, 6vw, 56px);
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}
.hero::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--hero); background-size: cover; background-position: center;
    opacity: .14;
}
.hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(250,249,246,.35) 0%, var(--paper) 95%);
}
.hero__inner { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; }

.eyebrow {
    font-family: var(--font-mono);
    font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--accent-deep); margin: 0 0 16px; font-weight: 500;
}

.hero__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(46px, 11.5vw, 118px);
    line-height: .9; letter-spacing: -.035em; text-transform: uppercase;
    margin: 0 0 20px;
}

.hero__tagline {
    font-size: clamp(17px, 2.1vw, 21px); color: var(--ink-2);
    max-width: 46ch; margin: 0 0 34px; line-height: 1.5;
}

.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------ gumbi ---- */

.btn {
    display: inline-block; padding: 13px 26px; border-radius: 5px;
    border: 0; cursor: pointer;
    background: var(--accent); color: var(--accent-ink);
    font-family: var(--font-body); font-weight: 600; font-size: 15px;
    line-height: 1.3; text-align: center;
    transition: filter .14s, transform .14s;
    -webkit-appearance: none; appearance: none;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn--ghost {
    background: transparent; color: var(--ink);
    box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.btn--ghost:hover { background: var(--card); filter: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--sm { padding: 8px 17px; font-size: 14px; }

.iconbtn {
    display: grid; place-items: center; width: 36px; height: 36px;
    border-radius: 50%; border: 0; background: transparent; color: var(--muted);
    cursor: pointer; transition: color .14s, background .14s;
}
.iconbtn:hover { color: var(--accent-deep); background: var(--w07); }
.iconbtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9;
               stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ blokovi -- */

.block { max-width: var(--max); margin: 0 auto; padding: clamp(40px, 7vw, 72px) var(--pad); }
.block--top { padding-top: clamp(32px, 5vw, 48px); }

.block__head {
    display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
    margin-bottom: 22px; padding-bottom: 12px;
}
.block__head h2 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(22px, 3.4vw, 30px); line-height: 1.05;
    letter-spacing: -.03em; margin: 0;
    color: var(--ink-2);
}
.block__more { margin-left: auto; color: var(--accent-deep); font-size: 15px; font-weight: 600; }
.block__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.block__count {
    margin-left: auto; font-family: var(--font-mono);
    font-size: 12.5px; color: var(--muted); letter-spacing: .05em;
}

.prose { max-width: 62ch; font-size: 17.5px; color: var(--ink-2); line-height: 1.7; }
.muted { color: var(--muted); }

.empty {
    padding: 52px 24px; text-align: center; color: var(--muted);
    border: 1.5px dashed var(--line-2); border-radius: var(--r); background: var(--card);
}
.empty p { margin: 0 0 14px; }
.empty p:last-child { margin: 0; }

/* ------------------------------------------------------------ filteri -- */

.filters {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
    margin-bottom: 20px;
}
/* Kategorije ne prelaze u drugi red nego kliznu vodoravno.
   Rubovi blijede dok ima još sadržaja u tom smjeru. */
.chips {
    display: flex; gap: 7px; flex-wrap: nowrap;
    max-width: 100%; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding: 3px 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                 /* traka se ovdje ne prikazuje */
}
.chips::-webkit-scrollbar { display: none; }
.chips > * { scroll-snap-align: start; }
.filterchip { white-space: nowrap; flex: none; }

/* Omotač nosi blijeđenje rubova. */
.chipswrap { position: relative; max-width: 100%; width: 100%; }
.chipswrap::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 34px;
    background: linear-gradient(to left, var(--paper) 12%, transparent);
    pointer-events: none; opacity: 0; transition: opacity .18s; z-index: 2;
}
.chipswrap.can-right::after { opacity: 1; }
.filterchip {
    padding: 7px 15px; border-radius: 5px; font-size: 14.5px; font-weight: 500;
    background: var(--card); color: var(--ink-2);
    box-shadow: inset 0 0 0 1px var(--line-2);
    transition: color .14s, background .14s, box-shadow .14s;
}
.filterchip:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.filterchip.is-on {
    background: var(--ink); color: var(--paper);
    box-shadow: none; font-weight: 600;
}

.search { flex: none; }
.search input {
    width: 100%; padding: 10px 16px; border-radius: 5px;
    background: var(--card); border: 1px solid var(--line-2); color: var(--ink);
    font: 15px var(--font-body);
}
.search input::placeholder { color: var(--muted); }
.search input:focus { border-color: var(--accent-deep); }

/* ------------------------------------------------------------- track --- */

.tracklist {
    display: flex; flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line); border-radius: var(--r);
    overflow: hidden;
}

.track {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    grid-template-areas: "art main dl";
    align-items: center; gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    transition: background .14s;
}
.track__art     { grid-area: art; }
.track__main    { grid-area: main; }
.track__actions { grid-area: dl; }
.track:last-child { border-bottom: 0; }
.track:hover { background: var(--w06); }
.track.is-playing { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }

.track__art {
    position: relative; width: 54px; height: 54px; border-radius: var(--r-sm);
    background: var(--w07) center/cover no-repeat; flex: none;
    overflow: hidden;
}
.track__play {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: var(--b75); border: 0; color: #fff;
    cursor: pointer; opacity: 0; transition: opacity .14s;
}
.track:hover .track__play,
.track.is-playing .track__play,
.track__play:focus-visible { opacity: 1; }
.track__play svg { width: 26px; height: 26px; fill: currentColor; }
.track__play .ico-pause,
.track.is-playing .track__play .ico-play { display: none; }
.track.is-playing .track__play .ico-pause { display: block; }

.track__title {
    margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35;
    letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.track.is-playing .track__title { color: var(--accent-deep); }

/* Na stolnom sve stoji u jednom redu; ako ponestane mjesta, kraća se s desna. */
.track__meta {
    margin: 3px 0 0; font-size: 13.5px; color: var(--muted);
    display: flex; gap: 8px; flex-wrap: nowrap;
    overflow: hidden; white-space: nowrap;
}
.track__meta > span { flex: none; display: inline-flex; align-items: center; gap: 5px; }
/* Uspravna crta razdvaja podatke; dovoljno vidljiva da se čita kao granica,
   dovoljno tiha da ne odvlači pogled sa samog podatka. */
.track__meta > span:not(:last-child)::after {
    content: "|"; margin-left: 5px; color: var(--muted); opacity: .5;
}

/* Ikone su nešto blijeđe od teksta — služe kao oznaka, ne kao ukras. */
.track__meta .ico { width: 14px; height: 14px; opacity: .6; flex: none; }
.track__by  { color: var(--ink-2); }
.track__by .ico  { color: var(--accent-deep); opacity: .75; }
.track__on .ico  { color: var(--accent-deep); opacity: .6; }
.track__note { color: var(--accent-deep); font-weight: 500; }


.track__actions { display: flex; gap: 2px; }

@media (max-width: 680px) {
    .track {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        gap: 11px; padding: 11px 12px;
    }
    .track__art { width: 46px; height: 46px; }
    .track__title { font-size: 14.5px; }

    /* Naslov, izvođač i album — svako svoj red, svako u jednom retku. */
    .track__meta {
        flex-direction: column; align-items: flex-start;
        gap: 2px; margin-top: 3px;
        overflow: visible;
    }
    .track__meta > span { max-width: 100%; min-width: 0; }
    .track__meta > span > span {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .track__meta > span:not(:last-child)::after { content: none; }
    .track__meta > .track__extra { display: none; }
}

/* Na najužim ekranima trajanje pada pod naslov da naslov dobije prostor. */
@media (max-width: 430px) {
    .track { gap: 10px; padding: 10px 12px; }
    .track__title { font-size: 14px; }
    .track__meta { font-size: 12px; }
}

/* -------------------------------------------------------------- gigs --- */

.giglist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.gig {
    display: flex; align-items: center; gap: 20px;
    padding: 16px 18px; border-radius: var(--r);
    background: var(--card); border: 1px solid var(--line);
}
.gig__date {
    display: grid; place-items: center; flex: none;
    width: 62px; padding: 9px 0; border-radius: var(--r-sm);
    background: var(--ink); color: var(--paper);
    font-family: var(--font-mono);
}
.gig__day { font-size: 22px; line-height: 1; font-weight: 500; }
.gig__mon { font-size: 10px; letter-spacing: .13em; margin-top: 4px; opacity: .75; }

.gig__body { flex: 1 1 auto; min-width: 0; }
.gig__body h3 { margin: 0; font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; }
.gig__body p { margin: 3px 0 0; font-size: 14.5px; color: var(--muted); }
.gig__desc { margin-top: 8px !important; color: var(--ink-2) !important; }

.giglist--past .gig { background: transparent; }
.giglist--past .gig__date { background: var(--w06); color: var(--muted); }
.giglist--past .gig__body h3 { color: var(--ink-2); font-weight: 500; }

@media (max-width: 560px) {
    .gig { flex-wrap: wrap; gap: 14px; }
    .gig__body { flex-basis: calc(100% - 76px); }
}

/* Kvadratne pločice — omoti i fotografije s nastupa najčešće su kvadratni,
   a kvadrat drži mrežu mirnom bez obzira na to što je u njoj. */

.grid-shots {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.shot {
    position: relative; display: block; overflow: hidden;
    border-radius: 5px; aspect-ratio: 1; background: var(--w07);
    box-shadow: inset 0 0 0 1px var(--b24);
}
.shot img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), filter .3s ease;
}
.shot:hover img { transform: scale(1.06); }

/* Zatamnjenje i povećalo se pojave tek na prijelaz mišem. */
.shot::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, var(--b73), transparent 55%);
    opacity: 0; transition: opacity .28s ease;
}
.shot:hover::after,
.shot:focus-visible::after { opacity: 1; }

.shot__zoom {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(250, 249, 246, .92); color: var(--ink);
    opacity: 0; transform: scale(.8);
    transition: opacity .24s ease, transform .24s cubic-bezier(.22, 1, .36, 1);
}
.shot:hover .shot__zoom,
.shot:focus-visible .shot__zoom { opacity: 1; transform: none; }
.shot__zoom .ico { width: 17px; height: 17px; }

.shot__cap {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 22px 13px 11px;
    font-size: 13.5px; font-weight: 500; color: #fff; line-height: 1.35;
    text-shadow: 0 1px 6px var(--b50);
    transform: translateY(6px); opacity: 0;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .24s ease;
}
.shot:hover .shot__cap,
.shot:focus-visible .shot__cap { transform: none; opacity: 1; }

.grid-shots--full { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

@media (max-width: 680px) {
    .grid-shots { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .grid-shots--full { grid-template-columns: repeat(2, 1fr); }
}

/* Na dodir nema prelaska mišem, pa opis stoji vidljiv. */
@media (hover: none) and (pointer: coarse) {
    .shot::after { opacity: 1; }
    .shot__cap { opacity: 1; transform: none; }
    .shot__zoom { display: none; }
}

/* ---------------------------------------------------------- kontakt ---- */

.contact { display: flex; flex-direction: column; max-width: 620px; }
.contact__row {
    display: flex; align-items: baseline; gap: 18px;
    padding: 17px 4px; border-bottom: 1px solid var(--line);
}
.contact__label {
    font-family: var(--font-mono); font-size: 11.5px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
    width: 96px; flex: none;
}
.contact__value { font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
a.contact__row:hover .contact__value { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }

.sociallinks { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 30px; }
.sociallinks a {
    padding: 9px 18px; border-radius: 5px; font-size: 14.5px; font-weight: 500;
    box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2);
    transition: color .14s, box-shadow .14s;
}
.sociallinks a:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ------------------------------------------------------------- podnožje - */

/* Podnožje stoji pri dnu zaslona i ostaje ondje dok se stranica lista.
   Sadržaj dobiva razmak s donje strane da mu ništa ne završi ispod. */
:root { --foot-h: 56px; }

body { padding-bottom: var(--foot-h); }
body.has-player { padding-bottom: calc(var(--foot-h) + var(--player-h)); }

.foot {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    box-sizing: border-box; width: 100%;
    padding: 0 var(--pad);
    min-height: var(--foot-h);
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    border-top: 1px solid var(--line);
    background: var(--paper);
    background-image: linear-gradient(var(--card), var(--card));
    font-size: 13px; color: var(--muted);
}

/* Traka svirača ima svoje mjesto na dnu; podnožje ide iznad nje. */
body.has-player .foot { bottom: var(--player-h); }

@media (max-width: 620px) {
    :root { --foot-h: 46px; }
    .foot { font-size: 12px; gap: 8px; }
}
.foot p { margin: 0; }
.foot__by { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; }

/* Player je ploča: omot je najveći element, vrti se dok svira, a traka
   napretka drži punu širinu ispod. Jedini tamni element na stranici. */

.player {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--console);
    color: var(--ink);
    box-shadow: 0 -12px 40px var(--b40);
}
.player[hidden] { display: none; }

/* Na širokom ekranu sve stoji u jednom redu — tada su svi elementi na istoj
   sredini i ništa ne "visi" gore ili dolje. */
.player__inner {
    max-width: var(--max); margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) auto minmax(230px, 1fr) auto auto;
    grid-template-areas: "now mid track dl side";
    align-items: center; gap: 0 18px;
    padding: 13px var(--pad);
    min-height: var(--player-h);
}
.player__now   { grid-area: now; }
.player__mid   { grid-area: mid; }
.player__track { grid-area: track; }
.player__menu  { grid-area: dl; }
.player__side  { grid-area: side; }

/* --- lijevo: omot i imena --- */

.player__now { display: flex; align-items: center; gap: 15px; min-width: 0; }

.player__art {
    flex: none;
    width: 54px; height: 54px; border-radius: 5px;
    background: var(--console-2) center/cover no-repeat;
    box-shadow: 0 3px 12px var(--b35);
}

.player__id { min-width: 0; }
.player__title {
    margin: 0; font-size: 15.5px; font-weight: 600; letter-spacing: -.012em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Jedna linija koja se skraćuje kao cjelina — ne svaki dio zasebno,
   inače se i izvođač i album kljaštre iako ima mjesta. */
.player__byline {
    margin: 3px 0 0; font-size: 13px; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.player__sep { color: var(--w34); padding: 0 7px; }
.player__sep[hidden] { display: none; }

/* --- sredina: transport i vrijeme --- */

.player__mid { display: flex; align-items: center; justify-content: center; gap: 10px; }

.player__step {
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 50%; border: 0;
    background: transparent; color: var(--muted); cursor: pointer;
    transition: color .14s, background .14s;
}
.player__step:hover:not(:disabled) { color: #fff; background: var(--console-2); }
.player__step:active:not(:disabled) { background: var(--w13); }
.player__step:disabled { opacity: .26; cursor: default; }

.player__toggle {
    width: 40px; height: 40px; border-radius: 50%; border: 0; flex: none;
    background: transparent; color: #fff; cursor: pointer;
    display: grid; place-items: center;
    transition: background .14s;
}
.player__toggle:hover  { background: var(--console-2); }
.player__toggle .ico { width: 26px; height: 26px; }
.player__toggle:active { background: var(--w13); }
.player__toggle .ico-pause,
.player.is-playing .player__toggle .ico-play { display: none; }
.player.is-playing .player__toggle .ico-pause { display: block; }

.player__track {
    display: flex; align-items: center; gap: 12px;
    width: 100%; margin: 0 auto; max-width: 520px;
}
.player__time {
    font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
    min-width: 36px; flex: none;
}
.player__track .player__time:last-child { text-align: right; }

/* Vlastita traka umjesto sistemskog range-a: linija je deblja i vidljivija. */
.seek { position: relative; flex: 1 1 auto; height: 16px; display: flex; align-items: center; }
.seek::before {
    content: ""; position: absolute; left: 0; right: 0; height: 4px;
    border-radius: 5px; background: var(--console-line);
}
.seek__fill {
    position: absolute; left: 0; height: 4px; width: 0;
    border-radius: 5px; background: #fff;
    pointer-events: none;
}
.seek__input {
    position: relative; z-index: 2; width: 100%; margin: 0;
    -webkit-appearance: none; appearance: none; background: transparent; height: 16px;
    cursor: pointer;
}
.seek__input::-webkit-slider-runnable-track { cursor: pointer; }
.seek__input::-moz-range-track { cursor: pointer; }
.seek__input::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0;
    box-shadow: 0 1px 5px var(--b50);
    cursor: pointer;
    opacity: 0; transition: opacity .14s;
}
.seek__input::-moz-range-thumb {
    width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0;
    opacity: 0; transition: opacity .14s;
}
.seek:hover .seek__input::-webkit-slider-thumb,
.seek__input:focus-visible::-webkit-slider-thumb { opacity: 1; }
.seek:hover .seek__input::-moz-range-thumb,
.seek__input:focus-visible::-moz-range-thumb { opacity: 1; }

/* --- desno: glasnoća i zatvaranje --- */

.player__side { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

/* -------------------------------------------------- izbornik u playeru -- */

.player__menu { position: relative; }
.player__menu[hidden] { display: none; }
.player__inner:has(.player__menu[hidden]) { column-gap: 16px; }

.player__more { width: 40px; height: 40px; color: var(--muted); }
.player__more:hover { color: #fff; background: var(--console-2); }
.player__more[aria-expanded="true"] { color: #fff; background: var(--console-2); }
.player__more:active { background: var(--w13); }

/* Izbornik mora stajati čvrsto nad sadržajem — prozirna ploha se s
   podlogom playera stapa u nečitljivu maglu. */
.pmenu {
    position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 95;
    min-width: 254px;
    background: var(--surface);
    background-image: linear-gradient(180deg, var(--w10), var(--w02) 46%, rgba(255, 255, 255, 0));
    border: 1px solid var(--w18);
    border-radius: 5px;
    padding: 5px;
    box-shadow:
        inset 0 1px 0 var(--w20),
        0 18px 44px var(--b60);
    animation: pmenuUp .16s ease-out;
}
.pmenu[hidden] { display: none; }

@keyframes pmenuUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.pmenu__item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px; border-radius: 5px;
    color: var(--ink); font-size: 14.5px; font-weight: 500;
    transition: background .13s;
}
.pmenu__item:hover { background: var(--w13); }
.pmenu__item .ico { width: 18px; height: 18px; opacity: .75; flex: none; }

/* Podaci stoje u jednom redu — panel se po potrebi raširi da svi stanu. */
.pmenu__facts {
    display: flex; flex-wrap: nowrap; align-items: baseline; gap: 8px;
    margin-top: 5px; padding: 9px 12px 4px;
    border-top: 1px solid var(--w14);
    font-family: var(--font-mono); font-size: 11px;
    color: var(--muted); letter-spacing: .03em;
    white-space: nowrap;
}
.pmenu__fact[hidden] { display: none; }
.pmenu__fact { flex: none; }
.pmenu__fact + .pmenu__fact::before {
    content: "|"; margin-right: 8px; color: var(--w22);
}
.player__vol { display: flex; align-items: center; gap: 8px; }
.player__vol input {
    width: 82px; height: 4px; border-radius: 5px;
    background: var(--console-line); cursor: pointer;
    -webkit-appearance: none; appearance: none;
}
.player__vol input::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0;
}
.player__vol input::-moz-range-thumb {
    width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0;
}

/* U playeru fokus ne crta prsten — na tamnoj traci izgleda kao obrub oko
   tipke. Umjesto toga se pali podloga i ikona posvijetli. */
.player button:focus,
.player a:focus,
.player button:focus-visible,
.player a:focus-visible {
    outline: none;
}
.player button:focus-visible,
.player a:focus-visible {
    background: var(--console-2);
    color: #fff;
}
.player__step:focus-visible:not(:disabled) { background: var(--console-2); color: #fff; }
.player__toggle:focus-visible { background: var(--w13); }
#pClose:focus-visible { background: var(--console-2); color: #fff; }

.player__side .iconbtn { color: var(--muted); }
.player__side .iconbtn:hover { color: #fff; background: var(--console-2); }

#pClose {
    width: 40px; height: 40px; border-radius: 50%;
    background: transparent; color: var(--muted);
    transition: background .14s, color .14s;
}
#pClose:hover  { background: var(--console-2); color: #fff; }
#pClose:active { background: var(--w13); }
#pClose .ico { width: 19px; height: 19px; }
.player__vol .ico-mute,
.player__vol .is-muted .ico-vol { display: none; }
.player__vol .is-muted .ico-mute { display: block; }
.player__vol .is-muted { color: #fff; }

@media (max-width: 1040px) {
    .player__inner { grid-template-columns: minmax(0, 1fr) minmax(260px, 1.4fr) auto; gap: 16px; }
    .player__vol { display: none; }
}
/* Mobilni player: dva reda. Gore imena i tipke, dolje traka za premotavanje
   preko cijele širine — na dodir je to jedina traka koju se da pogoditi. */
@media (max-width: 720px) {
    :root { --player-h: 92px; }

    /* Gornji red: omot, imena i zatvaranje. Donji: sviranje, traka, preuzimanje. */
    .player__inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "now  now   side"
            "mid  track dl";
        align-items: center;
        gap: 6px 10px;
        padding: 9px var(--pad) 9px;
    }

    .player__now  { gap: 11px; align-items: center; }
    .player__art  { width: 46px; height: 46px; }
    .player__mid  { gap: 2px; justify-content: flex-start; }
    .player__track { max-width: none; gap: 9px; margin: 0; }
    .player__side { align-self: center; }

    /* Izvođač i album svaki u svom retku, isto kao u popisu. */
    .player__byline {
        display: flex; flex-direction: column; align-items: flex-start;
        gap: 1px; margin-top: 2px; overflow: visible;
    }
    .player__byline > span {
        max-width: 100%;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .player__sep { display: none; }
    .player__on { color: var(--muted); }

    .player__title  { font-size: 14.5px; }
    .player__byline { font-size: 12.5px; }

    .player__step,
    .player__toggle,
    .player__more,
    #pClose { width: 40px; height: 40px; }
    .player__time { font-size: 11px; min-width: 32px; }

    /* Traka je viša nego na stolnom da je prst pogodi. */
    .seek { height: 26px; }
    .seek::before, .seek__fill { height: 5px; border-radius: 5px; }
    .seek__input { height: 26px; }
    .seek__input::-webkit-slider-thumb { width: 15px; height: 15px; opacity: 1; }
    .seek__input::-moz-range-thumb { width: 15px; height: 15px; opacity: 1; }

    .player__vol { display: none; }
}

@media (max-width: 430px) {
    .player__inner { gap: 6px 8px; padding-left: 14px; padding-right: 14px; }
    .player__art { width: 42px; height: 42px; }
    .player__step { display: none; }
    .player__title { font-size: 14.5px; }
}

/* Na najužim uređajima naslov dobiva još koji znak. */
@media (max-width: 380px) {
    .player__inner { gap: 6px 7px; padding-left: 12px; padding-right: 12px; }
    .player__now { gap: 9px; }
    .player__art { width: 40px; height: 40px; }
    .player__title { font-size: 13.5px; }
    .player__byline { font-size: 12px; }
    .player__toggle,
    .player__more,
    #pClose { width: 38px; height: 38px; }
    .player__toggle .ico { width: 24px; height: 24px; }
}

/* Pločice su kvadratne i obrezuju sliku, pa pregled mora pokazati cijelu. */

.lightbox {
    position: fixed; inset: 0; z-index: 120;
    display: grid; place-items: center;
    padding: 60px 16px 76px;
    background: var(--console);
    animation: lightboxIn .2s ease-out;
}
.lightbox[hidden] { display: none; }

@keyframes lightboxIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lightbox__frame {
    margin: 0; max-width: 100%; max-height: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.lightbox__frame img {
    max-width: 100%; max-height: calc(100vh - 150px);
    width: auto; height: auto;
    border-radius: 5px;
    box-shadow: 0 20px 60px var(--b50);
    animation: lightboxImg .28s cubic-bezier(.22, 1, .36, 1);
}
@keyframes lightboxImg {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: none; }
}

.lightbox__cap {
    max-width: 62ch; text-align: center;
    font-size: 14.5px; color: var(--ink-2); line-height: 1.5;
}
.lightbox__cap[hidden] { display: none; }

.lightbox__close,
.lightbox__nav {
    position: absolute; z-index: 2;
    display: grid; place-items: center;
    border: 0; cursor: pointer;
    background: var(--w10);
    color: #fff;
    border-radius: 50%;
    transition: background .16s, opacity .16s;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--w22); }

.lightbox__close { top: 14px; right: 14px; width: 44px; height: 44px; }

.lightbox__nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; }
.lightbox__nav--prev { left: 14px; }
.lightbox__nav--next { right: 14px; }
.lightbox__nav--prev .ico { transform: rotate(90deg); }
.lightbox__nav--next .ico { transform: rotate(-90deg); }
.lightbox__nav[hidden] { display: none; }

.lightbox__count {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    font-size: 12px; color: var(--muted); letter-spacing: .08em;
}

@media (max-width: 680px) {
    .lightbox { padding: 56px 10px 66px; }
    .lightbox__frame img { max-height: calc(100vh - 130px); }
    .lightbox__nav { width: 42px; height: 42px; }
    .lightbox__nav--prev { left: 8px; }
    .lightbox__nav--next { right: 8px; }
    .lightbox__close { top: 10px; right: 10px; }
    .lightbox__cap { font-size: 13.5px; }
}

/* Dok je pregled otvoren, stranica ispod stoji. */
body.lightbox-open { overflow: hidden; }

/* ------------------------------------------------------ SPA prijelaz ---- */

main { min-height: 50vh; }
main.is-loading { opacity: .45; transition: opacity .12s; }

/* ------------------------------------------------------------- ikone --- */

.ico { flex: none; display: block; }

.iconbtn .ico { width: 19px; height: 19px; }

.btn--icon { display: inline-flex; align-items: center; gap: 7px; }

/* Prijava u traci — odvojena istom uspravnom crtom kao meta podaci
   drugdje u sučelju, ne obrubom. */
.loginlink {
    position: relative;
    display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 50%;
    margin-left: 14px;
    color: var(--ink-2);
    transition: color .14s;
}
.loginlink::before {
    content: "|";
    position: absolute; left: -13px; top: 50%;
    transform: translateY(-50%);
    color: var(--line-2);
    font-size: 15px; line-height: 1;
    pointer-events: none;
}
.loginlink:hover { color: var(--accent-deep); }

.navtoggle .ico { width: 22px; height: 22px; }

@media (max-width: 800px) {
    .loginlink { order: 3; margin-left: 0; }
    .loginlink::before { display: none; }
}

/* Dok pjesma svira red se raširi — veći omot i krupniji naslov — ali meta
   ostaje u jednom redu, isto kao kod ostalih. */

.track.is-playing {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--accent);
    padding-top: 15px; padding-bottom: 15px;
    grid-template-columns: 66px minmax(0, 1fr) auto;
    grid-template-areas: "art main dl";
}
.track.is-playing .track__art { width: 66px; height: 66px; }
.track.is-playing .track__title { font-size: 16px; }
.track.is-playing .track__meta { font-size: 13.5px; }

/* Ravnalo koje pokazuje dokle je pjesma odsvirana. */
.track.is-playing .track__art::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 3px; background: var(--w35);
}
.track.is-playing .track__art::before {
    content: ""; position: absolute; left: 0; bottom: 0; z-index: 2;
    height: 3px; width: var(--played, 0%);
    background: var(--accent); transition: width .2s linear;
}

@media (max-width: 680px) {
    .track.is-playing { grid-template-columns: 54px minmax(0, 1fr) auto; }
    .track.is-playing .track__art { width: 54px; height: 54px; }
    .track.is-playing .track__title { font-size: 15px; }
    .track.is-playing .track__meta { font-size: 12.5px; }
}
@media (max-width: 430px) {
    .track.is-playing { padding-top: 12px; padding-bottom: 12px; }
    .track.is-playing .track__title { font-size: 14.5px; }
}

/* Strelica u "više" linkovima prati tekst */
.block__more { display: inline-flex; align-items: center; gap: 5px; }
.block__more .ico { width: 16px; height: 16px; transition: transform .16s; }
.block__more:hover .ico { transform: translateX(3px); }


/* Prst traži barem 44 px; na mišu ostaje kompaktnije. */

@media (hover: none) and (pointer: coarse) {
    .nav a { padding: 14px 16px; }
    .filterchip { padding: 10px 17px; }
    .iconbtn { width: 44px; height: 44px; }
    .loginlink { width: 44px; height: 44px; }
    .navtoggle { width: 46px; height: 44px; }
    .block__more { padding: 8px 0; }
    .brand { display: flex; align-items: center; min-height: 44px; }
    .sociallinks a { padding: 12px 20px; }
    .contact__row { padding: 19px 4px; }
    .track__play { opacity: 1; background: var(--b60); }
    .track.is-playing .track__play { background: var(--b75); }
    .seek__input::-webkit-slider-thumb { opacity: 1; }
    .seek__input::-moz-range-thumb { opacity: 1; }
}

@media (hover: none) and (pointer: coarse) {
    .btn--sm { padding: 12px 18px; }
}

@media (max-width: 720px) {
    .player__side { gap: 0; margin-top: -2px; }
}
@media (hover: none) and (pointer: coarse) {
    #pClose, .player__toggle, .player__step, .player__more { width: 44px; height: 44px; }
}

/* Traka iznad kataloga: kategorije, izbornici po izvođaču i albumu, pretraga.
   Sve centrirano jedno pod drugim — na uskom ekranu je to jedini raspored
   u kojem ništa ne mora u drugi red. */

.filters {
    display: flex; flex-direction: column; align-items: center;
    gap: 12px; margin-bottom: 22px;
}
.chips { justify-content: flex-start; }
.search { flex: none; width: 100%; max-width: 420px; }
.search input { text-align: center; }

.filters__clear {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13.5px; color: var(--muted); padding: 2px 6px;
}
.filters__clear:hover { color: var(--accent-deep); }
.filters__clear .ico { width: 14px; height: 14px; }

/* --- izbornik po izvođaču i albumu --- */

.picks { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.pick { position: relative; }

.pick__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 13px; border-radius: 5px; cursor: pointer;
    background: var(--card); color: var(--ink-2);
    box-shadow: inset 0 0 0 1px var(--line-2);
    font-size: 13px; font-weight: 500;
    list-style: none; user-select: none;
    max-width: 260px;
    transition: box-shadow .14s, color .14s;
}
.pick__btn::-webkit-details-marker { display: none; }
.pick__btn:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pick__btn .ico { width: 15px; height: 15px; opacity: .65; flex: none; }
.pick__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick__arrow { margin-left: auto; transition: transform .18s; }
.pick[open] .pick__arrow { transform: rotate(180deg); }

.pick__btn.is-on {
    background: var(--accent); color: var(--accent-ink);
    box-shadow: none; font-weight: 600;
}
.pick__btn.is-on .ico { opacity: .85; }

/* Zatvoren izbornik ne smije zauzimati mjesto ni viriti izvan ekrana. */
.pick:not([open]) .pick__panel { display: none; }

/* Ista čvrsta ploha kao kontekstni izbornici — kroz poluprozirnu se kod
   dugih popisa vidi sadržaj ispod i djeluje da su paneli različiti. */
.pick__panel {
    position: absolute; z-index: 70; top: calc(100% + 7px); left: 50%;
    transform: translateX(-50%);
    width: max(240px, 100%); max-width: min(320px, 90vw);
    background: var(--surface);
    background-image: linear-gradient(180deg, var(--w10), var(--w02) 46%, rgba(255, 255, 255, 0));
    border: 1px solid var(--w18);
    border-radius: var(--r); padding: 7px;
    box-shadow:
        inset 0 1px 0 var(--w20),
        0 18px 44px var(--b55);
    text-align: left;
}

.pick__find {
    width: 100%; margin-bottom: 6px; padding: 9px 12px;
    border: 1px solid var(--line-2); border-radius: var(--r-sm);
    background: var(--paper); color: var(--ink); font: 14px var(--font-body);
}
.pick__find:focus { outline: none; border-color: var(--accent-deep); }

.pick__list {
    list-style: none; margin: 0; padding: 0;
    max-height: 46vh; overflow-y: auto;
    overscroll-behavior: contain;
}
.pick__item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border-radius: 5px;
    font-size: 14px; color: var(--ink-2);
}
.pick__item > span:first-child {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pick__item:hover { background: var(--accent-soft); color: var(--ink); }
.pick__item.is-on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.pick__n {
    flex: none; font-family: var(--font-mono); font-size: 11.5px;
    color: var(--muted); font-variant-numeric: tabular-nums;
}
.pick__item.is-on .pick__n { color: var(--accent-ink); opacity: .8; }
.pick__item:hover .pick__n { color: var(--ink-2); }
.pick__list li.is-hidden { display: none; }

@media (max-width: 680px) {
    .filters { gap: 10px; }

    /* Panel se veže na cijelu traku, ne na pojedini gumb — inače desni
       izbornik gura popis izvan ekrana. */
    .picks { width: 100%; position: relative; }
    .pick { flex: 1 1 0; min-width: 0; position: static; }
    .pick__btn { width: 100%; max-width: none; justify-content: center; }
    .pick__panel {
        left: 0; right: 0; transform: none;
        width: auto; max-width: none;
    }
}

/* Na telefonu četiri izbornika stoje u dva reda po dva. */
@media (max-width: 760px) {
    .picks {
        display: grid; grid-template-columns: 1fr 1fr;
        gap: 8px; width: 100%;
    }
    .pick { position: static; min-width: 0; }
    .pick__btn { width: 100%; max-width: none; justify-content: flex-start; }
    .pick__label { flex: 1 1 auto; }
}

@media (hover: none) and (pointer: coarse) {
    .pick__btn { padding: 12px 16px; }
    .pick__item { padding: 13px 12px; }
    .filters__clear { padding: 10px 6px; }
}

/* Tanki, u bojama teme. Firefox dobiva scrollbar-width/color, ostali
   ::-webkit-scrollbar. Palac ima okvir u boji podloge pa izgleda uže. */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--w20) transparent;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

::-webkit-scrollbar-thumb {
    background: var(--w20);
    border-radius: 5px;
    border: 3px solid var(--paper);
    background-clip: padding-box;
    min-height: 40px;
}
::-webkit-scrollbar-thumb:hover  { background: var(--w30); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--ink-2); background-clip: padding-box; }

/* Popis unutar izbornika stoji na bijelom */
.pick__list { scrollbar-color: var(--w20) transparent; }
.pick__list::-webkit-scrollbar { width: 9px; }
.pick__list::-webkit-scrollbar-thumb { border-color: var(--card); border-width: 2px; }

/* Tamne površine traže svijetli palac */
.player,
.player * {
    scrollbar-color: var(--w16) transparent;
}
.player ::-webkit-scrollbar-thumb {
    background: var(--w16); border-color: var(--console);
}
.player ::-webkit-scrollbar-thumb:hover { background: var(--w26); }

@media (hover: none) and (pointer: coarse) {
    ::-webkit-scrollbar { width: 0; height: 0; }
}

/* Sklanja se brzo i odlučno, vraća se sporije i uz blagi odskok — tako
   povratak djeluje kao da traka dolazi po tebe, a ne kao da samo uskoči. */

.player {
    transform-origin: bottom center;
    transition:
        transform .42s cubic-bezier(.16, 1, .3, 1),
        opacity   .28s ease-out;
    will-change: transform, opacity;
}

.player.is-tucked {
    transform: translateY(100%) scale(.96);
    opacity: 0;
    transition:
        transform .22s cubic-bezier(.55, 0, .85, .3),
        opacity   .16s ease-in;
}

/* Prvo pojavljivanje kad se pusti pjesma. */
.player.is-entering {
    animation: playerUp .46s cubic-bezier(.16, 1, .3, 1);
}
@keyframes playerUp {
    from { transform: translateY(100%) scale(.96); opacity: 0; }
    60%  { transform: translateY(-4px) scale(1.008); opacity: 1; }
    to   { transform: none; opacity: 1; }
}

/* Uz smanjeno kretanje ostaje kratak, ravan prijelaz — bez odskoka i
   mijenjanja veličine, ali ne i bez ikakvog znaka da se traka miče.
   Trajanja nose !important jer ih globalno pravilo na vrhu inače gasi;
   Android to pravilo pali čim se uključi štednja baterije, pa bi bez ovoga
   player samo nestajao i pojavljivao se bez prijelaza. */
@media (prefers-reduced-motion: reduce) {
    .player {
        transition: transform .2s ease-out, opacity .18s ease-out !important;
        transition-duration: .2s, .18s !important;
    }
    .player.is-tucked {
        transform: translateY(100%);
        opacity: 0;
        transition: transform .16s ease-in, opacity .12s ease-in !important;
        transition-duration: .16s, .12s !important;
    }
    .player.is-entering {
        animation: playerUpPlain .22s ease-out !important;
        animation-duration: .22s !important;
    }
    @keyframes playerUpPlain {
        from { transform: translateY(100%); opacity: 0; }
        to   { transform: none; opacity: 1; }
    }
}

/* Izvan mobitela player uvijek stoji. */
@media (min-width: 721px) {
    .player.is-tucked { transform: none; opacity: 1; }
}

/* Na dodirnim ekranima hover ne postoji, ali preglednik ga zna zadržati
   nakon tapkanja — pa tipka ostane s podlogom kao da ima obrub. */
@media (hover: none) {
    .player__toggle:hover,
    .player__step:hover:not(:disabled),
    .player__side .iconbtn:hover,
    .player__more:hover,
    #pClose:hover {
        background: transparent;
    }
    .player__toggle:hover { color: #fff; }
    .player__step:hover:not(:disabled),
    #pClose:hover { color: var(--muted); }

    /* Dodir daje kratki bljesak umjesto trajne podloge. */
    .player__toggle:active,
    .player__step:active:not(:disabled),
    .player__more:active,
    #pClose:active { background: var(--console-2); }
}

/* Na širokom ekranu: kategorije, pa pretraga preko cijele širine,
   pa svi izbornici u jednom redu. */
@media (min-width: 761px) {
    .filters {
        display: flex; flex-direction: column;
        align-items: stretch; gap: 11px;
        width: 100%;
    }

    .search { max-width: none; width: 100%; }
    .search input { text-align: left; }

    .picks {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px; width: 100%;
    }
    .pick { min-width: 0; }

    .pick__btn {
        width: 100%; max-width: none;
        justify-content: flex-start;
        padding: 11px 14px;
    }
    .pick__label { flex: 1 1 auto; }
    .pick__panel { width: max(230px, 100%); max-width: none; }

    .filters__clear { align-self: center; }
}

@media (max-width: 720px) {
    .player__menu { justify-self: end; }

    /* Gumb stoji u donjem redu trake, pa bi izbornik iznad njega prekrio
       imena. Podizanje računa JS jer visina gornjeg reda ovisi o tome ima
       li pjesma album. */
    .pmenu {
        bottom: calc(100% + var(--menu-lift, 8px));
        min-width: 190px;
    }
}

/* Isti raspored kao onaj u playeru, ali u svijetloj temi jer stoji na papiru. */

.track__more { color: var(--muted); }
.track__more:hover,
.track__more[aria-expanded="true"] { color: var(--accent-deep); background: var(--w07); }

.rowmenu {
    position: fixed; z-index: 96;
    min-width: 254px;
    background: var(--surface);
    background-image: linear-gradient(180deg, var(--w10), var(--w02) 46%, rgba(255, 255, 255, 0));
    border: 1px solid var(--w18);
    border-radius: 5px;
    padding: 5px;
    box-shadow:
        inset 0 1px 0 var(--w20),
        0 18px 44px var(--b55);
    animation: rowmenuIn .14s ease-out;
}
.rowmenu[hidden] { display: none; }

@keyframes rowmenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.rowmenu__item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px; border-radius: 5px;
    color: var(--ink); font-size: 14.5px; font-weight: 500;
    transition: background .13s;
}
.rowmenu__item:hover { background: var(--w12); color: #fff; }
.rowmenu__item .ico { width: 18px; height: 18px; opacity: .75; flex: none; }

.rowmenu__facts {
    display: flex; flex-wrap: nowrap; align-items: baseline; gap: 8px;
    margin-top: 5px; padding: 9px 12px 4px;
    border-top: 1px solid var(--w14);
    font-family: var(--font-mono); font-size: 11px;
    color: var(--muted); letter-spacing: .03em;
    white-space: nowrap;
}
.rowmenu__fact[hidden] { display: none; }
.rowmenu__fact { flex: none; }
.rowmenu__fact + .rowmenu__fact::before {
    content: "|"; margin-right: 8px; color: var(--line-2);
}

@media (hover: none) and (pointer: coarse) {
    .rowmenu__item { padding: 13px 12px; }
    .track__more:hover { background: transparent; color: var(--muted); }
    .track__more:active { background: var(--w07); }
}

/* Naslovni blok pokazuje zadnjih deset objavljenih zapisa. Kartice kližu
   vodoravno i hvataju se po jednoj, a klik na omot pušta pjesmu odmah. */

.fresh__head {
    display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.fresh__title {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(23px, 4.4vw, 34px); line-height: 1;
    letter-spacing: -.03em; margin: 0;
}
.fresh__head .block__more { margin-left: auto; }

.fresh { position: relative; --slide-w: 230px; }

/* Kartice kližu kroz sredinu: ona u sredini je puna veličina, susjedne su
   manje i blijeđe pa se pogled sam vodi na trenutnu. */
.fresh__rail {
    display: flex; gap: 2px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 8px calc(50% - var(--slide-w) / 2) 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.fresh__rail::-webkit-scrollbar { display: none; }

.slide {
    flex: 0 0 auto;
    width: var(--slide-w);
    scroll-snap-align: center;
    text-align: center;
    opacity: .62;
    transform: scale(.9);
    transform-origin: center center;
    transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .32s ease;
}
.slide.is-center { opacity: 1; transform: scale(1); }

.slide__art {
    position: relative;
    width: var(--slide-w); height: var(--slide-w);
    border-radius: 5px; margin-bottom: 11px;
    background: var(--w07) center/cover no-repeat;
    box-shadow: 0 3px 14px var(--b30);
    overflow: hidden;
    transition: box-shadow .3s ease;
}
.slide.is-center .slide__art { box-shadow: 0 14px 36px var(--b40); }

.slide__play {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: var(--b63); border: 0; color: #fff;
    cursor: pointer; opacity: 0; transition: opacity .16s;
}
.slide.is-center .slide__play,
.slide:hover .slide__play,
.slide.is-playing .slide__play,
.slide__play:focus-visible { opacity: 1; }
.slide.is-center .slide__play { background: var(--b48); }
.slide__play .ico { width: 38px; height: 38px; }

.slide__play .ico-pause,
.slide.is-playing .slide__play .ico-play { display: none; }
.slide.is-playing .slide__play .ico-pause { display: block; }
.slide.is-playing .slide__art { box-shadow: 0 0 0 3px var(--accent), 0 14px 36px var(--b40); }

.slide__title {
    margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35;
    letter-spacing: -.01em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.slide.is-playing .slide__title { color: var(--accent-deep); }

.slide__by {
    margin: 3px 0 0; font-size: 13.5px; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Sredina omota, ne sredina cijelog bloka — ispod omota stoje naslov i
   izvođač pa bi strelice inače pale prenisko. */
.fresh__nav {
    position: absolute; z-index: 5;
    top: calc(8px + var(--slide-w) / 2);
    transform: translateY(-50%);
    display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--card); color: var(--ink);
    border: 1px solid var(--line-2);
    box-shadow: 0 3px 12px var(--b32);
    cursor: pointer;
    transition: opacity .15s, background .15s;
}
.fresh__nav[hidden] { display: none; }
.fresh__nav:hover { background: var(--w06); }
.fresh__nav:disabled { opacity: 0; pointer-events: none; }
.fresh__nav--prev { left: 0; }
.fresh__nav--next { right: 0; }
.fresh__nav--prev .ico { transform: rotate(90deg); }
.fresh__nav--next .ico { transform: rotate(-90deg); }

.hero__cta { margin-top: 22px; justify-content: center; }

/* Na širokom ekranu ima mjesta za krupnije omote. */
@media (min-width: 1000px) {
    .fresh { --slide-w: 260px; }
    .fresh__rail { gap: 4px; }
    .slide__title { font-size: 16px; }
    .slide__by { font-size: 14px; }
    .slide__play .ico { width: 44px; height: 44px; }
    .fresh__nav { width: 44px; height: 44px; }
}

@media (min-width: 1300px) {
    .fresh { --slide-w: 290px; }
    .fresh__rail { gap: 4px; }
    .slide__title { font-size: 17px; }
}

@media (max-width: 680px) {
    .fresh { --slide-w: 196px; }
    .fresh__rail { gap: 2px; }
    .fresh__nav { display: none; }
    .hero__cta { margin-top: 18px; }
    .slide__title { font-size: 14.5px; }
}

@media (max-width: 430px) {
    .fresh { --slide-w: 172px; }
    .fresh__rail { gap: 0; }
    .slide__play .ico { width: 34px; height: 34px; }
}

/* Na dodir se gumb za sviranje vidi odmah — nema prelaska mišem. */
@media (hover: none) and (pointer: coarse) {
    .slide__play { opacity: 1; background: var(--b48); }
    .slide.is-playing .slide__play { background: var(--b68); }
}

/* Tri kvadratne kartice po redu — isti jezik kao klizna traka i galerija,
   samo posloženo u mrežu. */

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 16px;
}

/* Na široj stranici tri kartice daju predugačke omote — od 1200 px ide
   četvrta, od 1600 peta, pa omot ostaje u razumnoj mjeri. */
@media (min-width: 1200px) { .cards:not([class*="cards--"]) { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1600px) { .cards:not([class*="cards--"]) { grid-template-columns: repeat(5, 1fr); } }

.card-track { min-width: 0; }

.card-track__art {
    position: relative;
    aspect-ratio: 1;
    border-radius: 5px; margin-bottom: 11px;
    background: var(--w07) center/cover no-repeat;
    box-shadow: 0 2px 10px var(--b28);
    overflow: hidden;
    transition: transform .24s cubic-bezier(.22, 1, .36, 1), box-shadow .24s ease;
}
.card-track:hover .card-track__art {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px var(--b38);
}

.card-track__play {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: var(--b63); border: 0; color: #fff;
    cursor: pointer; opacity: 0; transition: opacity .16s;
}
.card-track:hover .card-track__play,
.card-track.is-playing .card-track__play,
.card-track__play:focus-visible { opacity: 1; }
.card-track__play .ico { width: 34px; height: 34px; }

.card-track__play .ico-pause,
.card-track.is-playing .card-track__play .ico-play { display: none; }
.card-track.is-playing .card-track__play .ico-pause { display: block; }
.card-track.is-playing .card-track__art {
    box-shadow: 0 0 0 2px var(--accent), 0 12px 28px var(--b38);
}

.card-track__title {
    margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35;
    letter-spacing: -.01em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-track.is-playing .card-track__title { color: var(--accent-deep); }

.card-track__by {
    margin: 2px 0 0; font-size: 13px; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 680px) {
    .cards { gap: 14px 10px; }
    .card-track__title { font-size: 13.5px; }
    .card-track__by { font-size: 12px; }
    .card-track__play .ico { width: 28px; height: 28px; }
}

/* Tri kartice u redu ostavljaju usku kolonu, pa naslov dobiva treći red. */
@media (max-width: 560px) {
    .cards { gap: 12px 8px; }
    .card-track__title {
        font-size: 12.5px; line-height: 1.3;
        -webkit-line-clamp: 3;
    }
    .card-track__by { font-size: 11.5px; }
    .card-track__art { margin-bottom: 8px; }
}

@media (hover: none) and (pointer: coarse) {
    .card-track__play { opacity: 1; background: var(--b46); }
    .card-track.is-playing .card-track__play { background: var(--b68); }
}

/* Podloga prolazi kroz cijelu paletu — od najsvjetlijeg petroleja gore
   prema gotovo crnom dolje — uz tri svjetla u kutovima koja staklu daju
   što zamutiti. */
body {
    /* Slojevi dolaze iz odabrane teme — vidi includes/themes.php. */
    background: var(--theme-bg);
    background-attachment: fixed;
    background-size: cover;
}

/* --- gornja traka --- */
.topbar {
    background: var(--console);
    backdrop-filter: var(--glass);
    -webkit-backdrop-filter: var(--glass);
    border-bottom: 1px solid var(--line);
}
.navtoggle {
    background: var(--w07);
    border: 1px solid var(--line-2);
    color: var(--ink);
}
.navtoggle:hover { background: var(--w13); }
.navtoggle span:not(.sr) { background: var(--ink); }

@media (max-width: 800px) {
    .nav {
        background: var(--surface);
        background-image: linear-gradient(180deg, var(--w08), var(--w015) 40%, rgba(255, 255, 255, 0));
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 1px solid var(--w16);
        box-shadow: 0 20px 44px var(--b55);
        z-index: 98;
    }
}

/* --- popis pjesama, kartice --- */
.tracklist,
.gigcard,
.contact__row,
.empty,
.aboutbox {
    background: var(--card);
    backdrop-filter: var(--glass-sm);
    -webkit-backdrop-filter: var(--glass-sm);
    border: 1px solid var(--line);
}

.track { border-bottom: 1px solid var(--line); }
.track:last-child { border-bottom: 0; }
.track:hover { background: var(--w04); }
.track.is-playing { background: var(--accent-soft); }

/* --- polja i pilule --- */
input[type=search],
input[type=text],
input[type=email],
input[type=url],
textarea,
select {
    background: var(--w06);
    border: 1px solid var(--line-2);
    color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type=search]:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
textarea:focus { border-color: var(--accent-deep); background: var(--w09); }

.filterchip {
    background: var(--w05);
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--ink-2);
}
.filterchip:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--w10); }
.filterchip.is-on { background: var(--accent); color: var(--accent-ink); box-shadow: none; }

.pick__btn {
    background: var(--w05);
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--ink-2);
}
.pick__btn:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.pick__btn.is-on { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.pick__find { background: var(--w06); border-color: var(--line-2); color: var(--ink); }
.pick__item { color: var(--ink-2); }
.pick__item:hover { background: var(--w08); color: var(--ink); }
.pick__item.is-on { background: var(--accent); color: var(--accent-ink); }

/* --- gumbi --- */
.btn { background: var(--accent); color: var(--accent-ink); }
.btn:hover { background: var(--accent-deep); }
.btn--ghost {
    background: var(--w04);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn--ghost:hover { background: var(--w10); }

/* --- player --- */
.player {
    background: var(--console);
    backdrop-filter: var(--glass);
    -webkit-backdrop-filter: var(--glass);
    border-top: 1px solid var(--line-2);
}

/* --- omoti i pločice --- */
.track__art, .slide__art, .card-track__art, .shot {
    background-color: var(--w06);
}

/* --- blijeđenje uz rub kategorija --- */
.chipswrap::after { background: linear-gradient(to left, var(--paper) 12%, transparent); }

/* --- podnožje --- */
.foot { border-top: 1px solid var(--line); }

/* --- strelice klizne trake --- */
.fresh__nav {
    background: rgba(0, 30, 30, .8);
    backdrop-filter: var(--glass-sm);
    -webkit-backdrop-filter: var(--glass-sm);
    border: 1px solid var(--line-2);
    color: var(--ink);
}
.fresh__nav:hover { background: var(--w14); }

/* --- klizači --- */
* { scrollbar-color: var(--w22) transparent; }
::-webkit-scrollbar-thumb {
    background: var(--w22);
    border-color: transparent;
}
::-webkit-scrollbar-thumb:hover { background: var(--w34); }

/* Preglednici bez podrške za zamućenje dobivaju punu plohu. */
@supports not (backdrop-filter: blur(1px)) {
    .topbar { background: var(--console); }
    .player { background: #001414; }
    .tracklist, .gigcard, .contact__row, .empty, .aboutbox { background: var(--card-2); }
    .pick__panel, .rowmenu, .pmenu { background: var(--surface); }
}

/* Svaka ploha dobiva odsjaj po vrhu i tanku svijetlu liniju uz gornji rub —
   to je ono što staklo čini staklom, a ne samo prozirnom bojom. */

.tracklist,
.gigcard,
.contact__row,
.empty,
.aboutbox,
.topbar,
.player {
    background-image: linear-gradient(180deg, var(--w085), var(--w015) 42%, rgba(255, 255, 255, 0));
    box-shadow:
        inset 0 1px 0 var(--w16),
        0 10px 30px var(--b30);
}

.player {
    box-shadow:
        inset 0 1px 0 var(--w14),
        0 -14px 40px var(--b45);
}

/* Gumbi dobivaju blagi prijelaz odozgo i svijetlu liniju po vrhu. */
.btn {
    background-image: linear-gradient(180deg, var(--w22), rgba(255, 255, 255, 0) 58%);
    box-shadow:
        inset 0 1px 0 var(--w38),
        0 4px 14px var(--b30);
    transition: filter .15s, transform .12s, box-shadow .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 var(--w30), 0 2px 8px var(--b34); }

.btn--ghost {
    background-image: linear-gradient(180deg, var(--w09), var(--w01));
    box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 var(--w14);
}

/* Pilule i izbornici — isti jezik, samo tiše. */
.filterchip,
.pick__btn {
    background-image: linear-gradient(180deg, var(--w07), rgba(255, 255, 255, 0));
    box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 var(--w12);
}
.filterchip.is-on,
.pick__btn.is-on {
    background-image: linear-gradient(180deg, var(--w24), rgba(255, 255, 255, 0) 60%);
    box-shadow: inset 0 1px 0 var(--w40), 0 3px 12px var(--b28);
}

/* Omoti dobivaju kosi odsjaj preko gornjeg lijevog kuta. */
.slide__art::after,
.card-track__art::after,
.track__art::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    background: linear-gradient(148deg, var(--w22), var(--w04) 34%, transparent 58%);
}
.track__art { position: relative; }

/* Sjaj se pojačava dok pjesma svira. */
.slide.is-playing .slide__art::after,
.card-track.is-playing .card-track__art::after {
    background: linear-gradient(148deg, var(--w32), var(--w06) 36%, transparent 60%);
}

/* Traka za premotavanje i glasnoća */
.seek::before { box-shadow: inset 0 1px 2px var(--b50); }
.seek__fill {
    background-image: linear-gradient(180deg, var(--w45), rgba(255, 255, 255, 0));
    box-shadow: 0 0 12px rgba(23, 163, 152, .55);
}

/* Polja za unos djeluju upušteno, suprotno od gumba. */
input[type=search],
input[type=text],
input[type=email],
input[type=url],
textarea,
select {
    background-image: linear-gradient(180deg, var(--b16), var(--w04));
    box-shadow: inset 0 1px 2px var(--b30);
}

/* Strelice klizne trake */
.fresh__nav {
    background-image: linear-gradient(180deg, var(--w14), var(--w02));
    box-shadow: inset 0 1px 0 var(--w20), 0 6px 18px var(--b38);
}

/* Tipka za sviranje u playeru dobiva najjači sjaj — nju se najviše traži. */
.player__toggle {
    background-image: radial-gradient(circle at 50% 22%, var(--w18), transparent 62%);
}
.player__toggle:hover {
    background-image: radial-gradient(circle at 50% 22%, var(--w26), transparent 62%);
}

/* Jezičac stoji uz rub i pojavljuje se tek kad u redu nešto ima. */

.dq { position: relative; }
.dq[hidden] { display: none; }

.dq__tab {
    display: flex; align-items: center; gap: 9px;
    width: 100%; box-sizing: border-box;
    padding: 11px 15px; border: 1px solid var(--w20);
    border-radius: 5px; cursor: pointer;
    background: var(--surface);
    background-image: linear-gradient(180deg, var(--w12), var(--w02) 50%, rgba(255, 255, 255, 0));
    color: var(--ink); font-size: 14px; font-weight: 600;
    box-shadow: inset 0 1px 0 var(--w22), 0 12px 30px var(--b50);
    transition: filter .15s;
}
.dq__tab:hover { filter: brightness(1.14); }
.dq__tab .ico { width: 18px; height: 18px; opacity: .8; }

/* Natpis gura brojku uz desni rub, pa brojke stoje jedna ispod druge. */
.dq__label { flex: 1 1 auto; text-align: left; white-space: nowrap; }

.dq__count {
    flex: none;
    min-width: 22px; height: 22px; padding: 0 6px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--accent); color: var(--accent-ink);
    font-family: var(--font-mono); font-size: 12px; font-weight: 600;
}

/* --- ploča --- */

.dq__panel {
    position: absolute; right: 0; bottom: calc(100% + 10px);
    width: min(360px, calc(100vw - 32px));
    background: var(--surface);
    background-image: linear-gradient(180deg, var(--w10), var(--w02) 44%, rgba(255, 255, 255, 0));
    border: 1px solid var(--w18);
    border-radius: 5px;
    box-shadow: inset 0 1px 0 var(--w20), 0 22px 50px var(--b60);
    animation: dqUp .18s cubic-bezier(.22, 1, .36, 1);
}
.dq__panel[hidden] { display: none; }

@keyframes dqUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.dq__head {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 14px 11px;
    border-bottom: 1px solid var(--w12);
}
.dq__title {
    margin: 0; font-family: var(--font-display); font-weight: 700;
    font-size: 15px; letter-spacing: -.01em; color: var(--ink);
}
.dq__x {
    margin-left: auto; display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%;
    border: 0; cursor: pointer;
    background: var(--w08); color: var(--ink-2);
}
.dq__x:hover { background: var(--w16); color: var(--ink); }

.dq__list {
    list-style: none; margin: 0; padding: 6px;
    max-height: min(46vh, 340px); overflow-y: auto;
    overscroll-behavior: contain;
}
.dq__item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 8px; border-radius: 5px;
}
.dq__item:hover { background: var(--w06); }

.dq__art {
    flex: none; width: 38px; height: 38px; border-radius: 5px;
    background: var(--w07) center/cover no-repeat;
    box-shadow: inset 0 0 0 1px var(--w10);
}
.dq__body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dq__name {
    font-size: 13.5px; font-weight: 500; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dq__meta { font-size: 11px; color: var(--muted); }

.dq__drop {
    margin-left: auto; flex: none;
    width: 28px; height: 28px; border-radius: 50%;
    border: 0; cursor: pointer; line-height: 1;
    background: transparent; color: var(--muted);
    font-size: 19px;
}
.dq__drop:hover { background: var(--w12); color: var(--ink); }

.dq__foot {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 14px 13px;
    border-top: 1px solid var(--w12);
}

/* Na tamnoj ploči prsten oko sporednog gumba izgleda kao greška —
   dovoljna je tiša ispuna. */
.dq__acts .btn--ghost {
    background: var(--w09);
    background-image: none;
    border: 0;
    box-shadow: none;
    color: var(--ink-2);
}
.dq__acts .btn--ghost:hover { background: var(--w16); color: var(--ink); }
.dq__sum { font-size: 11.5px; color: var(--muted); }
.dq__acts { margin-left: auto; display: flex; gap: 8px; }


/* Pjesma koja čeka u redu nosi crtu uz lijevi rub i tiši sjaj podloge. */
.track.in-queue {
    background: rgba(23, 163, 152, .1);
    box-shadow: inset 3px 0 0 var(--accent-deep);
}
.track.in-queue .track__title { color: var(--accent-deep); }

.slide.in-queue .slide__art,
.card-track.in-queue .card-track__art {
    box-shadow: 0 0 0 2px var(--accent-deep), 0 8px 22px var(--b40);
}

/* Kad pjesma i svira i čeka u redu, sviranje ima prednost. */
.track.is-playing.in-queue { background: var(--accent-soft); }

@media (max-width: 680px) {
    .dq__label { display: none; }
    .dq__tab { padding: 11px 13px; }
    .dq__panel { width: calc(100vw - 24px); right: -1px; }
    .dq__foot { padding: 11px 12px 12px; }
    .dq__acts { width: 100%; }
    .dq__acts .btn { flex: 1 1 auto; justify-content: center; }
}


/* Dio stavki su veze, dio gumbi. Gumb nosi zadane stilove preglednika —
   okvir, sivu podlogu i vlastito pismo — pa se ovdje izjednačavaju. */

.pmenu__item,
.rowmenu__item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; box-sizing: border-box;
    white-space: nowrap;
    padding: 11px 12px; border-radius: 5px;
    border: 0; background: transparent; cursor: pointer;
    text-align: left;
    font-family: var(--font-body); font-size: 14.5px; font-weight: 500;
    line-height: 1.4; color: var(--ink);
    transition: background .13s, color .13s;
    -webkit-appearance: none; appearance: none;
}
.pmenu__item:hover,
.rowmenu__item:hover { background: var(--w13); color: #fff; }

.pmenu__item:focus,
.rowmenu__item:focus { outline: none; }
.pmenu__item:focus-visible,
.rowmenu__item:focus-visible { background: var(--w15); }
.pmenu__item:active,
.rowmenu__item:active { background: var(--w20); }

.pmenu__item .ico,
.rowmenu__item .ico { width: 18px; height: 18px; opacity: .75; flex: none; }

@media (hover: none) and (pointer: coarse) {
    .pmenu__item,
    .rowmenu__item { padding: 13px 12px; }
    .pmenu__item:hover,
    .rowmenu__item:hover { background: transparent; color: var(--ink); }
}


/* Stavka koja uklanja iz reda — ista mjera, druga poruka. */
.pmenu__item.is-remove,
.rowmenu__item.is-remove { color: var(--accent-deep); }
.pmenu__item.is-remove .ico,
.rowmenu__item.is-remove .ico { opacity: .9; transform: rotate(180deg); }


/* Filteri, kontekstni izbornici i red preuzimanja dijele istu čvrstu plohu.
   Poluprozirna se kod dugih popisa stapa sa sadržajem ispod i djeluje kao
   da su paneli različiti. */

.pick__panel,
.rowmenu,
.pmenu,
.dq__panel {
    background-color: var(--surface);
    background-image: linear-gradient(180deg, var(--w10), var(--w02) 46%, rgba(255, 255, 255, 0));
    border: 1px solid var(--w18);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        inset 0 1px 0 var(--w20),
        0 18px 44px var(--b55);
}

/* Redovi stoje jedan iznad drugog u istom stupcu — inače bi se jezičci
   preklapali u istom kutu. */

.queues {
    position: fixed; right: 16px; z-index: 92;
    bottom: calc(16px + var(--dq-lift, 0px));
    /* stretch, ne flex-end — oba jezičca poprime širinu šireg, pa stoje
       poravnati i s lijeve i s desne strane. */
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    transition: bottom .26s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}
.queues > * { pointer-events: auto; }

/* Jezičci više ne nose vlastiti položaj — nosi ga stupac. */
.dq {
    position: relative;
    right: auto; bottom: auto;
    transition: none;
}

/* Pjesma koja upravo svira istaknuta je u popisu reda. */
.dq__item.is-now { background: var(--accent-soft); }
.dq__item.is-now .dq__name { color: var(--accent-deep); }

/* Stavke u popisu reda slušanja su klikabilne. */
.pq .dq__art,
.pq .dq__body { cursor: pointer; }

/* Pjesma u redu slušanja — točkica uz naslov, da se razlikuje od reda
   preuzimanja koji nosi crtu uz rub. */
.track.in-play-queue .track__title::after,
.slide.in-play-queue .slide__title::after,
.card-track.in-play-queue .card-track__title::after {
    content: "";
    display: inline-block; vertical-align: middle;
    width: 6px; height: 6px; margin-left: 7px;
    border-radius: 50%; background: var(--accent-deep);
}

@media (max-width: 680px) {
    .queues { right: 12px; bottom: calc(12px + var(--dq-lift, 0px)); gap: 7px; }
}

/* --------------------------------------- način sviranja u izborniku --- */

.pmenu__sep {
    height: 1px; margin: 5px 8px;
    background: var(--w12);
}

.pmenu__label {
    margin: 4px 12px 2px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted);
}

.pmenu__mode { position: relative; }
.pmenu__tick {
    margin-left: auto; flex: none;
    opacity: 0; color: var(--accent-deep);
    transition: opacity .13s;
}
.pmenu__mode.is-on { color: var(--accent-deep); }
.pmenu__mode.is-on .pmenu__tick { opacity: 1; }
.pmenu__mode.is-on .ico:first-child { opacity: 1; }


/* Player leži ispod jezičaca redova, pa bi mu izbornik prolazio ispod njih.
   Dok je otvoren, traka se diže iznad. */

.player:has(#pMenuPanel:not([hidden])) { z-index: 96; }

/* Preglednici bez :has — jezičci se sklone dok je izbornik otvoren. */
@supports not selector(:has(*)) {
    body.pmenu-open .queues { opacity: 0; pointer-events: none; }
}

/* Kvačica se vidi samo na odabranom načinu. Pravilo za ikone u stavkama
   inače nadjača prozirnost jer je jače od same klase. */
.pmenu__item .pmenu__tick { opacity: 0; }
.pmenu__item.is-on .pmenu__tick { opacity: 1; }


/* Jezičci redova leže na sloju 92, pa sve što se otvara preko sadržaja mora
   biti iznad njih — inače im prolazi ispod. */

.pick__panel { z-index: 97; }
.rowmenu     { z-index: 97; }

/* Izvođač u popisu redova — između naslova i tehničkih podataka. */
.dq__by {
    font-size: 12.5px; color: var(--ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Zapis u redu preuzimanja je klikabilan kao i onaj u redu slušanja. */
.dq__art, .dq__body { cursor: pointer; }


/* Uz jezičac se gubila u kutu; na sredini se vidi bez traženja. */

.flash {
    position: fixed; left: 50%; z-index: 130;
    bottom: 24px;
    transform: translate(-50%, 10px);
    padding: 13px 20px; border-radius: 5px;
    background: var(--surface);
    background-image: linear-gradient(180deg, var(--w12), var(--w02) 50%, rgba(255, 255, 255, 0));
    border: 1px solid var(--w20);
    box-shadow:
        inset 0 1px 0 var(--w22),
        0 22px 54px var(--b60);
    color: var(--ink); font-size: 15px; font-weight: 600;
    white-space: nowrap; text-align: center;
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease, transform .24s cubic-bezier(.22, 1, .36, 1),
                bottom .26s cubic-bezier(.22, 1, .36, 1);
}
.flash.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 430px) {
    .flash {
        font-size: 14px; padding: 12px 18px;
        max-width: calc(100vw - 32px);
    }
}

/* =========================================================== NASTUPI === */

.block__head--sub { margin-top: 44px; padding-top: 30px; position: relative; }
.block__head--sub::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--line) 12%,
                var(--line-2) 50%, var(--line) 88%, transparent);
}
.block__head--sub::after {
    content: ""; position: absolute; top: -1px; left: 50%;
    transform: translateX(-50%);
    width: min(180px, 26%); height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, transparent, rgba(23, 163, 152, .55), transparent);
}

.giglist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.gig {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: 18px;
    padding: 16px 18px; border-radius: 5px;
    background: var(--card);
    background-image: linear-gradient(180deg, var(--w07), var(--w01));
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 var(--w12);
    transition: border-color .16s, transform .16s;
}
.gig:hover { border-color: var(--line-2); transform: translateY(-1px); }

/* Prvi nadolazeći nosi jaču crtu — njega se najviše traži. */
.gig--next {
    border-color: rgba(23, 163, 152, .45);
    box-shadow: inset 3px 0 0 var(--accent-deep), inset 0 1px 0 var(--w14);
}

.gig__date {
    display: grid; justify-items: center; gap: 1px;
    min-width: 62px; padding: 9px 10px; border-radius: 5px;
    background: var(--w06);
    box-shadow: inset 0 1px 0 var(--w10);
}
.gig--next .gig__date { background: rgba(23, 163, 152, .18); }

.gig__mon {
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .12em; color: var(--muted);
}
.gig__day {
    font-family: var(--font-display); font-weight: 700;
    font-size: 26px; line-height: 1; letter-spacing: -.03em; color: var(--ink);
}
.gig--next .gig__day { color: var(--accent-deep); }
.gig__year { font-size: 10px; color: var(--muted); }

.gig__body { min-width: 0; }

.gig__flag {
    display: inline-block; margin-bottom: 6px;
    padding: 3px 9px; border-radius: 5px;
    background: var(--accent); color: var(--accent-ink);
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase;
}

.gig__title {
    margin: 0 0 6px; font-size: 17px; font-weight: 600;
    letter-spacing: -.015em; line-height: 1.3; color: var(--ink);
}

.gig__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.gig__bit {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13.5px; color: var(--ink-2);
}
.gig__bit .ico { opacity: .6; flex: none; }
/* Odbrojavanje stoji lijevo od gumba, iste visine — dva jednaka bloka u
   istom retku. Visina se ne postavlja fiksno nego se rasteže, jer je gumb
   na telefonu viši nego na računalu. */
.gig__side {
    display: flex; align-items: stretch; gap: 10px;
    flex: none;
}
.gig__side:not(:has(.gig__cta)) { align-items: center; }

.gig__soon {
    display: inline-flex; align-items: center;
    min-height: 34px; padding: 0 14px; box-sizing: border-box;
    border-radius: 5px;
    background: var(--w07);
    box-shadow: inset 0 1px 0 var(--w10);
    font-size: 12px; color: var(--muted);
    letter-spacing: .02em; white-space: nowrap;
}
.gig--next .gig__soon {
    background: rgba(23, 163, 152, .18);
    color: var(--accent-deep);
}

.gig__desc {
    margin: 9px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted);
    max-width: 62ch;
}

.gig__cta { white-space: nowrap; }

/* --- odsvirano: tiši, gušći popis --- */

.pastlist { list-style: none; margin: 0; padding: 0; }

.past {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    align-items: baseline; gap: 16px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--line);
}
.past:last-child { border-bottom: 0; }
.past:hover { background: var(--w03); }

.past__date  { font-size: 12.5px; color: var(--muted); }
.past__title { font-size: 14.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.past__place { font-size: 13px; color: var(--muted); text-align: right; }

@media (max-width: 680px) {
    .gig { grid-template-columns: auto minmax(0, 1fr); gap: 13px; padding: 14px; }
    .gig__side {
        grid-column: 1 / -1;
        justify-content: space-between; gap: 10px; margin-top: 2px;
    }
    .gig__cta { flex: 1 1 auto; justify-content: center; }
    .gig__date { min-width: 54px; padding: 8px; }
    .gig__day { font-size: 23px; }
    .gig__title { font-size: 16px; }

    .past { grid-template-columns: 78px minmax(0, 1fr); gap: 4px 12px; }
    .past__place { grid-column: 2; text-align: left; }
}

/* =========================================================== O MENI ==== */

.about {
    display: grid; gap: 28px;
    grid-template-columns: minmax(0, 1.9fr) minmax(240px, 1fr);
    align-items: start;
}

.about__lead {
    margin: 0 0 22px;
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(21px, 2.6vw, 27px); line-height: 1.28;
    letter-spacing: -.025em; color: var(--ink);
    max-width: 24ch;
}

.about .prose p { margin: 0 0 18px; }
.about .prose p:last-child { margin-bottom: 0; }

.about__side {
    position: sticky; top: 96px;
    display: flex; flex-direction: column; gap: 16px;
}

.facts {
    margin: 0; padding: 6px 16px 10px; border-radius: 5px;
    background: var(--card);
    background-image: linear-gradient(180deg, var(--w07), var(--w01));
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 var(--w12);
}
.facts__row {
    display: flex; align-items: baseline; gap: 12px;
    padding: 11px 0; border-bottom: 1px solid var(--line);
}
.facts__row:last-child { border-bottom: 0; }
.facts dt {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--muted); white-space: nowrap;
}
.facts dt .ico { opacity: .6; flex: none; }
.facts dd {
    margin: 0 0 0 auto; text-align: right;
    font-size: 14px; font-weight: 600; color: var(--ink);
}

.about__cta { display: flex; flex-direction: column; gap: 9px; }

@media (max-width: 860px) {
    .about { grid-template-columns: 1fr; gap: 24px; }
    .about__side { position: static; }
}

/* ========================================================== KONTAKT ==== */

.contact__lead {
    margin: 0 0 24px; max-width: 56ch;
    font-size: 16.5px; line-height: 1.65; color: var(--ink-2);
}

.ccards {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.ccard {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "ico label go" "ico value go";
    align-items: center; gap: 1px 14px;
    padding: 16px; border-radius: 5px;
    background: var(--card);
    background-image: linear-gradient(180deg, var(--w07), var(--w01));
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 var(--w12);
    transition: border-color .16s, transform .16s;
}
.ccard:hover { border-color: rgba(23, 163, 152, .45); transform: translateY(-2px); }
.ccard--plain:hover { transform: none; border-color: var(--line); }

.ccard__ico {
    grid-area: ico; display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: 5px;
    background: var(--accent-soft); color: var(--accent-deep);
    box-shadow: inset 0 1px 0 var(--w12);
}
.ccard__label {
    grid-area: label;
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.ccard__value {
    grid-area: value; min-width: 0;
    font-size: 15.5px; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ccard__go {
    grid-area: go; display: grid; place-items: center;
    color: var(--muted); opacity: 0; transform: translateX(-4px);
    transition: opacity .16s, transform .16s;
}
.ccard:hover .ccard__go { opacity: 1; transform: none; color: var(--accent-deep); }

.contact__sub {
    margin: 36px 0 14px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

.socials { display: flex; flex-wrap: wrap; gap: 10px; }

.social {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 15px; border-radius: 5px;
    background: var(--w05);
    box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 var(--w10);
    color: var(--ink-2); font-size: 14.5px; font-weight: 500;
    transition: background .15s, color .15s, box-shadow .15s;
}
.social:hover {
    background: var(--accent-soft); color: var(--accent-deep);
    box-shadow: inset 0 0 0 1px rgba(23, 163, 152, .45);
}
.social .ico { flex: none; opacity: .8; }
.social__out { opacity: .45; }

@media (max-width: 680px) {
    .ccards { grid-template-columns: 1fr; }
    .contact__lead { font-size: 15.5px; }
    .socials .social { flex: 1 1 calc(50% - 5px); justify-content: center; }
}

/* Pretraga i prekidač prikaza dijele redak. */
.searchrow { display: flex; align-items: stretch; gap: 10px; }
.searchrow .search { flex: 1 1 auto; min-width: 0; margin: 0; }

.viewpick {
    display: flex; flex: none; gap: 4px;
    padding: 4px; border-radius: 5px;
    background: var(--w05);
    box-shadow: inset 0 0 0 1px var(--line-2);
}
.viewpick__btn {
    display: grid; place-items: center;
    width: 40px; border-radius: 5px;
    color: var(--muted);
    transition: background .14s, color .14s;
}
.viewpick__btn:hover { background: var(--w09); color: var(--ink-2); }
.viewpick__btn.is-on {
    background: var(--accent); color: var(--accent-ink);
    box-shadow: inset 0 1px 0 var(--w30);
}

/* --- mreža kataloga --- */

.cards--g2 { grid-template-columns: repeat(2, 1fr); }
.cards--g3 { grid-template-columns: repeat(3, 1fr); }

/* Kartica je jedna ploha: omot na vrhu, podaci na tišoj podlozi ispod.
   Prije je tekst visio u zraku pa se nije vidjelo gdje jedna staje. */
.tcard {
    position: relative; min-width: 0;
    display: flex; flex-direction: column;
    border-radius: 5px; overflow: hidden;
    background: var(--card);
    background-image: linear-gradient(180deg, var(--w07), var(--w01));
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 var(--w12);
    transition: transform .22s cubic-bezier(.22, 1, .36, 1),
                box-shadow .22s, border-color .18s;
}
.tcard:hover {
    transform: translateY(-3px);
    border-color: var(--line-2);
    box-shadow: inset 0 1px 0 var(--w16), 0 16px 34px var(--b40);
}

.tcard__art {
    position: relative; aspect-ratio: 1;
    background: var(--w06) center/cover no-repeat;
    overflow: hidden;
}

/* Tanka crta odvaja omot od podataka. */
.tcard__body {
    flex: 1 1 auto;
    padding: 12px 13px 13px;
    border-top: 1px solid var(--line);
    background: var(--b14);
}

/* Kosi odsjaj kao na ostalim omotima. */
.tcard__art::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(148deg, var(--w22), var(--w04) 34%, transparent 58%);
}

.tcard__play {
    position: absolute; inset: 0; z-index: 2;
    display: grid; place-items: center;
    background: rgba(0, 20, 20, .45); border: 0; color: #fff;
    cursor: pointer; opacity: 0; transition: opacity .16s;
}
.tcard:hover .tcard__play,
.tcard.is-playing .tcard__play,
.tcard__play:focus-visible { opacity: 1; }

.tcard__play .ico-pause,
.tcard.is-playing .tcard__play .ico-play { display: none; }
.tcard.is-playing .tcard__play .ico-pause { display: block; }
.tcard.is-playing {
    border-color: rgba(23, 163, 152, .5);
    box-shadow: inset 0 1px 0 var(--w16), 0 0 0 1px var(--accent-deep);
}
.tcard.is-playing .tcard__body { background: var(--accent-soft); }

/* Tri točkice stoje u podnožju, desno od podataka — u kutu omota su
   zaklanjale sliku i tražile prelazak mišem da se uopće pokažu. */
.tcard__foot {
    display: flex; align-items: center; gap: 8px;
    margin: 9px 0 0; padding-top: 9px;
    border-top: 1px solid var(--line);
}

.tcard__more {
    flex: none; margin-left: auto;
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 5px;
    border: 0; cursor: pointer;
    background: var(--w06);
    color: var(--muted);
    transition: background .14s, color .14s;
}
.tcard__more:hover,
.tcard__more[aria-expanded="true"] {
    background: var(--w14); color: var(--ink);
}

.tcard__title {
    margin: 0 0 6px; font-size: 15px; font-weight: 600;
    line-height: 1.35; letter-spacing: -.01em; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.tcard.is-playing .tcard__title { color: var(--accent-deep); }

.tcard__by,
.tcard__album {
    display: flex; align-items: center; gap: 6px;
    margin: 0 0 3px; font-size: 13px; color: var(--muted);
    min-width: 0;
}
.tcard__by .ico,
.tcard__album .ico { flex: none; opacity: .6; }
.tcard__by span,
.tcard__album span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pjesma u redovima nosi iste oznake kao redak popisa. */
.tcard.in-queue { border-color: rgba(23, 163, 152, .45); }
.tcard.in-queue .tcard__body { box-shadow: inset 3px 0 0 var(--accent-deep); }
.tcard.in-play-queue .tcard__title::after {
    content: ""; display: inline-block; vertical-align: middle;
    width: 6px; height: 6px; margin-left: 7px;
    border-radius: 50%; background: var(--accent-deep);
}

/* Na dodir nema prelaska mišem — gumbi stoje vidljivi. */
@media (hover: none) and (pointer: coarse) {
    .tcard__play { opacity: 1; background: rgba(0, 20, 20, .3); }
    .tcard.is-playing .tcard__play { background: rgba(0, 20, 20, .5); }
    .tcard__more { width: 34px; height: 34px; }
}

/* Paginacija nosi isti razdjelnik kao odjeljci — tanak uz rubove, deblji
   u sredini. */
.pager {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    gap: 8px; flex-wrap: wrap;
    margin-top: 30px; padding-top: 26px;
}
.pager::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line) 12%,
                var(--line-2) 50%, var(--line) 88%, transparent);
}
.pager::after {
    content: ""; position: absolute; top: -1px; left: 50%;
    transform: translateX(-50%);
    width: min(180px, 26%); height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, transparent, rgba(23, 163, 152, .55), transparent);
}

.pager__step {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px; border-radius: 5px;
    background: var(--w05);
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--ink-2); font-size: 14px; font-weight: 500;
    transition: background .14s, color .14s;
}
.pager__step:hover { background: var(--w11); color: var(--ink); }
.pager__step.is-off { opacity: .35; pointer-events: none; }
.pager__prev { transform: rotate(90deg); }
.pager__next { transform: rotate(-90deg); }

.pager__nums { display: flex; align-items: center; gap: 5px; }

.pager__num {
    display: grid; place-items: center;
    min-width: 38px; height: 38px; padding: 0 10px;
    border-radius: 5px;
    font-family: var(--font-mono); font-size: 13.5px;
    color: var(--ink-2);
    transition: background .14s, color .14s;
}
.pager__num:hover { background: var(--w09); color: var(--ink); }
.pager__num.is-on {
    background: var(--accent); color: var(--accent-ink); font-weight: 600;
    box-shadow: inset 0 1px 0 var(--w30);
}
.pager__gap { color: var(--muted); padding: 0 2px; }

@media (max-width: 680px) {
    .searchrow { flex-wrap: wrap; }
    .searchrow .search { flex: 1 1 100%; }
    .viewpick { width: 100%; }
    /* Meta mora biti barem 44 px visoka da se pogodi prstom. */
    .viewpick__btn { flex: 1 1 0; height: 44px; }

    .cards--g3 { grid-template-columns: repeat(2, 1fr); }

    .pager { gap: 6px; margin-top: 22px; }
    .pager__step span { display: none; }
    .pager__step { padding: 9px 12px; }
    .pager__num { min-width: 34px; height: 34px; font-size: 13px; }
}

@media (min-width: 1200px) {
    .cards--g3 { grid-template-columns: repeat(3, 1fr); }
}


/* Tehnički podaci pri dnu kartice — format, trajanje, veličina. */
.tcard__facts {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 5px 10px; margin: 0;
    font-size: 11px; color: var(--muted);
    letter-spacing: .02em;
}
.tcard__fact {
    display: inline-flex; align-items: center; gap: 4px;
    white-space: nowrap;
}
.tcard__fact .ico { flex: none; opacity: .55; }

@media (max-width: 430px) {
    .tcard__body  { padding: 10px 10px 11px; }
    .tcard__title { font-size: 13.5px; }
    .tcard__by,
    .tcard__album { font-size: 12px; }
    .tcard__facts { font-size: 10.5px; gap: 4px 8px; }
    .tcard__foot  { margin-top: 8px; padding-top: 8px; gap: 6px; }
}

/* Na dva stupca ima mjesta da omot stoji lijevo, a podaci uz njega —
   uspravna kartica ondje ispada nezgrapno visoka. */

@media (min-width: 620px) {
    .cards--g2 .tcard,
    .cards--g3 .tcard { flex-direction: row; align-items: stretch; }

    .cards--g2 .tcard__art,
    .cards--g3 .tcard__art {
        flex: none;
        width: 168px; aspect-ratio: 1;
        border-radius: 0;
    }

    .cards--g2 .tcard__body,
    .cards--g3 .tcard__body {
        display: flex; flex-direction: column;
        border-top: 0; border-left: 1px solid var(--line);
        padding: 14px 16px;
    }

    /* Podnožje pada na dno kartice, poravnato s donjim rubom omota. */
    .cards--g2 .tcard__foot,
    .cards--g3 .tcard__foot { margin-top: auto; }

    .cards--g2 .tcard__facts,
    .cards--g3 .tcard__facts { justify-content: flex-start; }

    .cards--g2 .tcard__title,
    .cards--g3 .tcard__title { font-size: 16px; -webkit-line-clamp: 2; }

    .cards--g2 .tcard.in-queue .tcard__body,
    .cards--g3 .tcard.in-queue .tcard__body { box-shadow: none; }
    .cards--g2 .tcard.in-queue .tcard__art,
    .cards--g3 .tcard.in-queue .tcard__art  { box-shadow: inset 3px 0 0 var(--accent-deep); }
}

/* Tri stupca su uža — omot i slog se prilagođavaju da tekst ne ostane bez
   mjesta, a podaci se prelamaju u dva reda ako treba. */
@media (min-width: 620px) and (max-width: 999px) {
    .cards--g3 .tcard { flex-direction: column; }
    .cards--g3 .tcard__art { width: auto; }
    .cards--g3 .tcard__body { border-top: 1px solid var(--line); border-left: 0; }
    .cards--g3 .tcard__facts { justify-content: center; }
}

@media (min-width: 1000px) {
    .cards--g3 .tcard__art   { width: 112px; }
    .cards--g3 .tcard__body  { padding: 11px 12px; }
    .cards--g3 .tcard__title { font-size: 14px; }
    .cards--g3 .tcard__facts { gap: 4px 8px; font-size: 10.5px; }
    .cards--g3 .tcard__by,
    .cards--g3 .tcard__album { font-size: 12px; }
}

@media (min-width: 1250px) {
    .cards--g3 .tcard__art   { width: 132px; }
    .cards--g3 .tcard__body  { padding: 12px 13px; }
    .cards--g3 .tcard__title { font-size: 14.5px; }
}

@media (min-width: 1100px) {
    .cards--g2 .tcard__art { width: 200px; }
}

@media (min-width: 1500px) {
    .cards--g3 .tcard__art { width: 158px; }
}

/* Traka u katalogu — malo tiši naslov nego na naslovnoj. */
.block--rail { margin-bottom: 34px; }
.fresh__head--sub { margin-bottom: 14px; }
.fresh__head--sub .fresh__title {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(20px, 2.6vw, 26px); line-height: 1.1;
    letter-spacing: -.03em; margin: 0; color: var(--ink-2);
}

/* Tanak uz rubove, deblji u sredini — odvaja odjeljke bez velike praznine. */

.rule {
    position: relative;
    height: 1px; margin: 0 auto;
    /* Ista širina kao sadržaj — preko cijelog zaslona se crta gubi. */
    width: calc(100% - 2 * var(--pad));
    max-width: var(--max);
    border: 0;                 /* <hr> nosi zadani obrub preglednika */
    background: linear-gradient(90deg,
        var(--w05),
        var(--line-2) 22%,
        var(--line-2) 78%,
        var(--w05));
}

.rule::after {
    content: "";
    position: absolute; left: 50%; top: -1px;
    transform: translateX(-50%);
    width: min(200px, 30%); height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg,
        transparent,
        var(--accent-deep) 35%,
        var(--accent-deep) 65%,
        transparent);
    opacity: .75;
}

/* Razmaci oko odjeljaka: manji nego prije, jer sada crta nosi razdvajanje. */
.block--rail { margin-bottom: 0; }

.block + .rule,
.hero + .rule,
.block--rail + .rule { margin-top: 34px; }

.rule + .block,
.rule + .block--rail { margin-top: 34px; }

@media (max-width: 680px) {
    .block + .rule,
    .hero + .rule,
    .block--rail + .rule { margin-top: 26px; }
    .rule + .block,
    .rule + .block--rail { margin-top: 26px; }
    .rule::after { width: min(120px, 34%); }
}

/* Odjeljci su nosili 72 px paddinga gore i dolje, pa je uz razmak oko crte
   između njih ispadalo preko 200 px praznine. Sada razmak drži crta. */

main > .block { padding-block: 0; }
main > .block--top { padding-top: clamp(26px, 4vw, 40px); }
main > .block:last-child { padding-bottom: clamp(46px, 6vw, 68px); }

main > .hero { padding-bottom: clamp(24px, 4vw, 36px); border-bottom: 0; }

.block + .rule,
.hero + .rule,
.block--rail + .rule { margin-top: clamp(30px, 4.5vw, 44px); margin-bottom: 0; }

.rule + .block,
.rule + .block--rail { margin-top: clamp(30px, 4.5vw, 44px); }

/* Prazan odjeljak zna ostaviti dvije crte jednu za drugom. */
.rule + .rule { display: none; }

/* Zadnji odjeljak ne treba crtu prema podnožju — ono već ima svoju. */
main > .rule:last-child { display: none; }

/* Naslovi odjeljaka, podnožje i podnaslovi nose isti razdjelnik kao onaj
   između odjeljaka — tanak uz rubove, zadebljan i obojen u sredini. */

/* Podnožje je fiksirano pri dnu zaslona, pa mu se položaj ovdje ne dira —
   ukrasne crte ionako računaju od njega samog. */
.block__head,
.gig__side + .rule {
    position: relative;
}

/* Naslov odjeljka: crta ispod naslova. */
.block__head {
    border-bottom: 0;
    padding-bottom: 14px;
}
.block__head::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        var(--w05),
        var(--line-2) 22%,
        var(--line-2) 78%,
        var(--w05));
}
.block__head::after {
    content: ""; position: absolute; bottom: -1px; left: 50%;
    transform: translateX(-50%);
    width: min(200px, 30%); height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, transparent,
        var(--accent-deep) 35%, var(--accent-deep) 65%, transparent);
    opacity: .75;
}

/* Podnaslov "Odsvirano" već ima svoju crtu — ujednači je s ostalima. */
.block__head--sub::before {
    background: linear-gradient(90deg,
        var(--w05),
        var(--line-2) 22%,
        var(--line-2) 78%,
        var(--w05));
}

/* Podnožje stranice. */
.foot { border-top: 0; }
.foot::before {
    content: ""; position: absolute; left: var(--pad); right: var(--pad); top: 0;
    max-width: var(--max); margin: 0 auto;
    height: 1px;
    background: linear-gradient(90deg,
        var(--w05),
        var(--line-2) 22%,
        var(--line-2) 78%,
        var(--w05));
}
.foot::after {
    content: ""; position: absolute; top: -1px; left: 50%;
    transform: translateX(-50%);
    width: min(200px, 30%); height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, transparent,
        var(--accent-deep) 35%, var(--accent-deep) 65%, transparent);
    opacity: .75;
}

/* Naslov klizne trake u katalogu i ispod Izdvojenog. */
.fresh__head--sub {
    position: relative;
    padding-bottom: 14px;
}
.fresh__head--sub::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        var(--w05),
        var(--line-2) 22%,
        var(--line-2) 78%,
        var(--w05));
}
.fresh__head--sub::after {
    content: ""; position: absolute; bottom: -1px; left: 50%;
    transform: translateX(-50%);
    width: min(200px, 30%); height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, transparent,
        var(--accent-deep) 35%, var(--accent-deep) 65%, transparent);
    opacity: .75;
}

/* Naslov na naslovnoj traci — ondje crta ne treba, ispod nje su omoti. */
.fresh__head { position: relative; }


/* Razdjelnik između odjeljaka i crta ispod naslova radili su isti posao,
   pa su na šezdesetak piksela stajale dvije crte jedna iznad druge. Ostaje
   ona ispod naslova; razdjelnik se skriva. */

.rule { display: none !important; }

main > .block,
main > .block--rail { margin-top: clamp(34px, 5vw, 52px); }
main > .block:first-child,
main > .hero:first-child { margin-top: 0; }
main > .block:last-child { padding-bottom: clamp(46px, 6vw, 68px); }

/* Naslov na naslovnoj traci dobiva istu crtu kao ostali odjeljci. */
.fresh__head {
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 20px;
}
.fresh__head::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        var(--w05),
        var(--line-2) 22%,
        var(--line-2) 78%,
        var(--w05));
}
.fresh__head::after {
    content: ""; position: absolute; bottom: -1px; left: 50%;
    transform: translateX(-50%);
    width: min(200px, 30%); height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, transparent,
        var(--accent-deep) 35%, var(--accent-deep) 65%, transparent);
    opacity: .75;
}

/* Umjesto tanke crte s odvojenim zadebljanjem u sredini — jedan oblik koji
   od nule na rubovima ravnomjerno raste prema sredini i natrag. Postiže se
   izduženim rombom (clip-path), pa je prijelaz posve gladak. */

.block__head::before,
.fresh__head::before,
.fresh__head--sub::before,
.foot::before,
.pager::before {
    height: 2px !important;
    bottom: -1px;
    background: linear-gradient(90deg,
        var(--line-2),
        var(--accent-deep) 45%,
        var(--accent-deep) 55%,
        var(--line-2)) !important;

    /* Maska umjesto rezanja: elipsa mijenja gustoću postupno, pa se rast ne
       vidi kao stepenice od punog piksela. */
    -webkit-mask-image: radial-gradient(ellipse 52% 100% at 50% 50%,
        #000 0%, var(--b55) 55%, var(--b18) 82%, transparent 100%);
    mask-image: radial-gradient(ellipse 52% 100% at 50% 50%,
        #000 0%, var(--b55) 55%, var(--b18) 82%, transparent 100%);
    clip-path: none;
    opacity: .9;
}

.foot::before,
.pager::before { top: -2px; bottom: auto; }

/* Zadebljanje u sredini više nije zasebni element. */
.block__head::after,
.fresh__head::after,
.fresh__head--sub::after,
.foot::after,
.pager::after { display: none; }

/* Traka na vrhu ostalih stranica — prvi blok nema gornji razmak. */
main > .block--rail:first-child { margin-top: 0; }

/* Prijavljeni admin dobiva prečac do panela pod ikonom — inače bi za svaku
   stranicu morao prvo na Pregled pa dalje. */

.adminmenu { position: relative; }

.adminmenu__panel {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 99;
    min-width: 216px; padding: 6px;
    border-radius: 5px;
    background: var(--surface);
    background-image: linear-gradient(180deg, var(--w10), var(--w02) 46%, rgba(255, 255, 255, 0));
    border: 1px solid var(--w18);
    box-shadow: inset 0 1px 0 var(--w20), 0 20px 46px var(--b55);

    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s, transform .18s cubic-bezier(.22, 1, .36, 1), visibility .15s;
}

/* Nevidljivi most preko razmaka — bez njega izbornik nestane dok miš
   putuje s ikone na popis. */
.adminmenu__panel::before {
    content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}

.adminmenu:hover .adminmenu__panel,
.adminmenu:focus-within .adminmenu__panel,
.adminmenu.is-open .adminmenu__panel {
    opacity: 1; visibility: visible; transform: none;
}

.adminmenu__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; padding: 8px 11px 10px; margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
}
.adminmenu__who { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.adminmenu__ver { font-size: 11px; color: var(--muted); }

.adminmenu__item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; border-radius: 5px;
    color: var(--ink-2); font-size: 14px;
    transition: background .13s, color .13s;
}
.adminmenu__item .ico { flex: none; opacity: .6; }
.adminmenu__item:hover {
    background: var(--w10); color: var(--ink);
}
.adminmenu__item:hover .ico { opacity: 1; }

.adminmenu__sep {
    display: block; height: 1px; margin: 5px 8px;
    background: var(--line);
}

.adminmenu__item--vrh { color: var(--ink-2); cursor: default; }
.adminmenu__item--vrh .ico { color: var(--accent-deep); }
.adminmenu__item--out { color: var(--muted); }
.adminmenu__item--out:hover { background: var(--bad-bg); color: var(--bad); }

/* Na dodirnim ekranima nema prelaska mišem — izbornik se otvara klikom. */
@media (hover: none) and (pointer: coarse) {
    .adminmenu:hover .adminmenu__panel { opacity: 0; visibility: hidden; }
    .adminmenu.is-open .adminmenu__panel { opacity: 1; visibility: visible; transform: none; }
}

@media (max-width: 760px) {
    .adminmenu__panel { min-width: 200px; }
}

/* ============================== STRANICE RAČUNA ======================= */

.authpage { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }

.auth { width: 100%; max-width: 440px; }

.auth__home {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 18px;
    font-family: var(--font-display); font-weight: 700;
    font-size: 15px; letter-spacing: -.01em; color: var(--ink-2);
    transition: color .14s;
}
.auth__home:hover { color: var(--ink); }
.auth__back { transform: rotate(180deg); opacity: .6; }

.auth__card {
    padding: 28px 26px 26px; border-radius: 5px;
    background: var(--card);
    background-image: linear-gradient(180deg, var(--w07), var(--w01));
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 var(--w12), 0 24px 60px var(--b40);
}

.auth__card h1 {
    margin: 0 0 18px;
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(23px, 4vw, 28px); letter-spacing: -.03em; color: var(--ink);
}

.auth__lead { margin: -6px 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.auth__opt  { font-weight: 400; color: var(--muted); font-size: .92em; }

.auth__card .field { margin-bottom: 15px; }
.auth__card .field label {
    display: block; margin-bottom: 6px;
    font-size: 13.5px; font-weight: 500; color: var(--ink-2);
}
.auth__card input[type=email],
.auth__card input[type=password],
.auth__card input[type=text],
.auth__card .field input {
    width: 100%; box-sizing: border-box;
    padding: 11px 13px; border-radius: 5px;
    border: 1px solid var(--line-2);
    background: var(--w06);
    background-image: linear-gradient(180deg, var(--b16), var(--w04));
    box-shadow: inset 0 1px 2px var(--b30);
    color: var(--ink); font-family: var(--font-body); font-size: 15px;
}
.auth__card input:focus { outline: none; border-color: var(--accent-deep); }

.auth__card .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .auth__card .grid2 { grid-template-columns: 1fr; gap: 0; } }

.auth__card .hint { margin: -8px 0 16px; font-size: 12.5px; color: var(--muted); }

.auth__card .check {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 4px 0 18px; cursor: pointer;
    font-size: 13px; line-height: 1.55; color: var(--muted);
}
.auth__card .check input { flex: none; margin-top: 2px; accent-color: var(--accent); }

.auth__card .btn--wide { width: 100%; justify-content: center; padding: 13px; font-size: 15px; }

.auth__msg {
    margin-bottom: 18px; padding: 12px 14px; border-radius: 5px;
    font-size: 14px; line-height: 1.55;
}
.auth__msg p { margin: 0 0 6px; }
.auth__msg p:last-child { margin: 0; }
.auth__acts {
    display: flex; gap: 9px; flex-wrap: wrap; margin-top: 22px;
}
.auth__acts .btn { flex: 1 1 auto; justify-content: center; padding: 12px 16px; }
@media (max-width: 460px) { .auth__acts .btn { flex: 1 1 100%; } }

.auth__msg--bad { background: var(--bad-bg); color: var(--bad); }
.auth__msg--ok  { background: var(--ok-bg);  color: var(--ok); }

.auth__links {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; flex-wrap: wrap;
    margin-top: 18px; font-size: 13.5px; color: var(--muted);
}
.auth__links a { color: var(--accent-deep); }
.auth__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth__links .btn { margin-top: 4px; }

/* Zamka za botove — mora biti nevidljiva, ali ne display:none,
   jer neki botovi upravo to prepoznaju. */
.hp {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}

/* ================================ MODAL UPOZORENJA ==================== */

.gate {
    position: fixed; inset: 0; z-index: 200;
    display: grid; place-items: center; padding: 20px;
}
.gate[hidden] { display: none; }

.gate__back {
    position: absolute; inset: 0;
    background: var(--b60);
    backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .2s;
}
.gate.is-on .gate__back { opacity: 1; }

.gate__box {
    position: relative; z-index: 1;
    width: 100%; max-width: 430px;
    padding: 26px 26px 22px; border-radius: 5px;
    background: var(--surface);
    background-image: linear-gradient(180deg, var(--w10), var(--w02) 50%, transparent);
    border: 1px solid var(--w18);
    box-shadow: inset 0 1px 0 var(--w20), 0 28px 68px var(--b60);
    opacity: 0; transform: translateY(10px) scale(.97);
    transition: opacity .2s, transform .24s cubic-bezier(.22, 1, .36, 1);
}
.gate.is-on .gate__box { opacity: 1; transform: none; }

.gate__x {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; border: 0; border-radius: 5px;
    background: transparent; color: var(--muted);
    font-size: 22px; line-height: 1; cursor: pointer;
    transition: background .14s, color .14s;
}
.gate__x:hover { background: var(--w10); color: var(--ink); }

.gate__title {
    margin: 0 30px 10px 0;
    font-family: var(--font-display); font-weight: 700;
    font-size: 19px; line-height: 1.3; letter-spacing: -.02em; color: var(--ink);
}
.gate__text { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--ink-2); }
.gate__text b { color: var(--ink); }

.gate__roles {
    display: block; margin-top: 14px; padding: 12px 14px;
    border-radius: 5px; background: var(--w06);
    box-shadow: inset 0 0 0 1px var(--line);
    font-size: 13px; line-height: 1.7; color: var(--muted);
}
.gate__roles b { color: var(--accent-deep); }

.gate__acts {
    display: flex; gap: 9px; flex-wrap: wrap;
    margin-top: 20px;
}
.gate__acts .btn { flex: 1 1 auto; justify-content: center; }

/* Kratki bljesak kad se brojka preuzimanja promijeni — inače se promjena
   lako previdi jer je stranica ostala ista. */
@keyframes kvotaPuls {
    0%   { color: var(--accent-deep); transform: scale(1.28); }
    100% { color: inherit; transform: none; }
}
.kvota--pulsira { display: inline-block; animation: kvotaPuls .5s ease-out; }

/* Obavijest o novoj poruci — prozorčić koji iskoči gdje god čovjek bio. */
.pjavka {
    position: fixed; z-index: 300; right: 20px; bottom: 20px;
    max-width: min(360px, calc(100vw - 32px));
    opacity: 0; transform: translateY(14px);
    transition: opacity .22s, transform .22s;
}
.pjavka.je-tu { opacity: 1; transform: none; }
body.has-player .pjavka { bottom: calc(var(--player-h, 0px) + 16px); }

.pjavka__box {
    padding: 16px 18px; border-radius: var(--r);
    /* Dva sloja: neprozirna podloga pa ton kartice — inače se kroz obavijest
       vidi stranica i tekst se gubi. */
    background-color: var(--paper);
    background-image: linear-gradient(var(--card), var(--card));
    border: 1px solid var(--accent-deep);
    box-shadow: 0 18px 50px var(--b50, rgba(0, 0, 0, .5));
}
.pjavka__vrh {
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--accent-deep);
}
.pjavka__tko { display: block; margin-top: 4px; font-size: 15px; }
.pjavka__tekst {
    margin: 6px 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pjavka__akcije { display: flex; gap: 8px; }
.pjavka__akcije .btn { flex: 1 1 auto; justify-content: center; padding: 9px 14px; font-size: 13.5px; }

@media (max-width: 560px) {
    .pjavka { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* Savjet ide u podnožje, uz gumb — ondje ne smeta pri pisanju. */
.pisi__dno {
    display: flex; align-items: center; gap: 12px;
    margin-top: 10px;
}
.pisi__dno .btn { margin-left: auto; flex: none; }


/* Brojka nepročitanih uz stavku izbornika. */
@keyframes brojNovo {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.45); }
    100% { transform: scale(1); }
}

/* --------------------------------------------------- poruke na telefonu ---
   Na uskom zaslonu razgovor zauzima ono što ima: popis se stisne u traku,
   tijek se rasteže do visine ekrana, a polje za pisanje ostaje na dnu. */

@media (max-width: 700px) {

    .pisi__dno { margin-top: 7px; }
    .pisi__dno .btn { padding: 8px 16px; font-size: 13.5px; }
}

/* ---------------------------------------------------- top ljestvice --- */

.tops__head { display: block; margin-bottom: 26px; }
.tops__head h2 { margin-bottom: 6px; }
.tops__lead { display: block; color: var(--muted); font-size: 14.5px; }

.tops__stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px; margin-bottom: 20px;
}
.tops__stat {
    padding: 16px 18px; border-radius: var(--r);
    background: var(--card); border: 1px solid var(--line);
}
.tops__stat b {
    display: block; font-weight: 500; font-size: 26px;
    line-height: 1.1; letter-spacing: -.02em; color: var(--ink);
}
.tops__stat i {
    display: block; margin-top: 6px; font-style: normal;
    font-size: 12.5px; color: var(--muted);
}

/* Zapis mjeseca stoji izdvojeno — to je jedina brojka koja se stvarno mijenja
   iz tjedna u tjedan, pa zaslužuje mjesto prije ljestvica. */
.tops__mjesec {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 16px; margin-bottom: 26px; border-radius: var(--r);
    border: 1px solid var(--accent-deep); background: var(--card);
    color: inherit; text-decoration: none;
    transition: filter .14s;
}
.tops__mjesec:hover { filter: brightness(1.06); }
.tops__mjesec img { width: 60px; height: 60px; border-radius: 4px; object-fit: cover; flex: none; }
.tops__mjesecTekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.tops__mjesecTekst em {
    display: inline-flex; align-items: center; gap: 5px;
    font-style: normal; font-size: 11.5px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; color: var(--accent-deep);
}
.tops__mjesecTekst b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tops__mjesecTekst i { font-style: normal; font-size: 13px; color: var(--muted); }
.tops__mjesecBroj { flex: none; text-align: right; font-size: 20px; }
.tops__mjesecBroj small {
    display: block; font-size: 11.5px; color: var(--muted); font-family: var(--font-body);
}

.tops__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.tops__lista {
    padding: 18px 18px 10px; border-radius: var(--r);
    background: var(--card); border: 1px solid var(--line);
}
.tops__lista h3 {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 12px; font-size: 16px; letter-spacing: -.01em;
}
.tops__lista h3 .ico { color: var(--accent-deep); }
.tops__lista h3 em {
    margin-left: auto; font-style: normal;
    font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}

/* Sto zapisa ne stane na zaslon, pa ljestvica dobiva vlastiti klizač —
   stranica ostaje kratka, a popis cijel. */
.tops__ol { max-height: 560px; overflow-y: auto; padding-right: 4px; }
.tops__ol::-webkit-scrollbar { width: 8px; }
.tops__ol::-webkit-scrollbar-thumb { background: var(--w10); border-radius: 4px; }
.tops__ol::-webkit-scrollbar-track { background: transparent; }
.tops__prazno { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }

.tops__ol { list-style: none; margin: 0; padding: 0; counter-reset: mjesto; }
.tops__red {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0; border-top: 1px solid var(--line);
}
.tops__red:first-child { border-top: 0; }

.tops__mjesto {
    flex: none; width: 22px; text-align: right;
    font-size: 13px; color: var(--muted);
}
/* Prvo mjesto se čita bez brojanja unatrag. */
.tops__red.is-prvi .tops__mjesto { color: var(--accent-deep); font-weight: 700; }

.tops__veza {
    display: flex; align-items: center; gap: 11px;
    min-width: 0; flex: 1 1 auto; color: inherit; text-decoration: none;
    /* Gumb mora izgledati kao redak, ne kao gumb. */
    padding: 0; border: 0; background: none; font: inherit; text-align: left;
    cursor: pointer;
}
.tops__veza:hover b { color: var(--accent-deep); }

/* Omot nosi znak za sviranje, isto kao u katalogu. */
.tops__art {
    position: relative; flex: none;
    width: 40px; height: 40px; border-radius: 4px;
    background-size: cover; background-position: center;
}
.tops__art .ico-play, .tops__art .ico-pause {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px; background: var(--b50, rgba(0, 0, 0, .5)); color: #fff;
    opacity: 0; transition: opacity .14s;
}
.tops__veza:hover .ico-play,
.tops__veza:focus-visible .ico-play { opacity: 1; }
.tops__art .ico-pause { display: none; }

/* Zapis koji svira: pauza umjesto pokretanja, i to stalno vidljivo. */
.tops__red.is-playing .tops__art .ico-play { display: none; }
.tops__red.is-playing .tops__art .ico-pause { display: flex; opacity: 1; }
.tops__red.is-playing .tops__ime b { color: var(--accent-deep); }

.tops__red--tih .tops__art { opacity: .8; }
.tops__ime { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tops__ime b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tops__ime i { font-style: normal; font-size: 12.5px; color: var(--muted); }

.tops__broj { flex: none; font-size: 14px; color: var(--ink-2); }

.tops__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

@media (max-width: 860px) {
    .tops__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .tops__mjesec { gap: 12px; padding: 12px 13px; }
    .tops__mjesec img { width: 48px; height: 48px; }
    .tops__mjesecBroj { font-size: 17px; }
    .tops__cover { width: 36px; height: 36px; }
    .tops__cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* -------------------------------------------------------- članstva --- */

main > .plans { padding-top: clamp(26px, 3.5vw, 40px); }
.plans__head { display: block; margin-bottom: 28px; }
.plans__head h2 { margin-bottom: 6px; }
.plans__lead { display: block; max-width: 60ch; color: var(--muted); font-size: 14.5px; }

.plans__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px; align-items: start;
}

.plan {
    position: relative;
    display: flex; flex-direction: column;
    padding: 24px 22px; border-radius: var(--r);
    background: var(--card); border: 1px solid var(--line);
}
/* Vlastito članstvo se ističe rubom, ne bojom pozadine — ostaje čitljivo. */
.plan--mine { border-color: var(--accent-deep); box-shadow: 0 0 0 1px var(--accent-deep); }
.plan__znak {
    position: absolute; top: -10px; left: 22px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--accent); color: var(--accent-ink);
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

.plan__ime { margin: 0 0 4px; font-size: 20px; letter-spacing: -.01em; }
.plan__cijena {
    margin: 0 0 10px; font-family: var(--font-mono);
    font-size: 19px; color: var(--accent-deep);
}
.plan__opis { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

.plan__kvota {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 16px; padding: 9px 12px; border-radius: 5px;
    background: var(--w06); font-size: 13.5px; color: var(--ink-2);
}
.plan__kvota .ico { flex: none; color: var(--muted); }

.plan__prava { list-style: none; margin: 0 0 20px; padding: 0; }
.plan__prava li {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 0; font-size: 13.5px;
}
.plan__prava .ico { flex: none; stroke-width: 2.6; }
.plan__prava .is-on  { color: var(--ink-2); }
.plan__prava .is-on .ico  { color: var(--ok); }
.plan__prava .is-off { color: var(--muted); }
.plan__prava .is-off .ico { color: var(--bad); }
.plan__nota { font-style: normal; color: var(--muted); }

.plan__gumb { margin-top: auto; justify-content: center; }
.plan__gumb[aria-disabled] { pointer-events: none; opacity: .7; }

.plans__nota {
    margin: 26px 0 0; padding: 14px 16px; border-radius: var(--r);
    border: 1px dashed var(--line-2);
    color: var(--muted); font-size: 13.5px; line-height: 1.6;
}

/* Napomena ispod skraćenog popisa na profilu. */
.acc__vise { margin: 14px 0 0; font-size: 13px; color: var(--muted); text-align: center; }

/* Naslov treba zraka: traka stoji odmah iznad i inače ga stisne uz sebe.
   Selektor mora biti barem toliko određen koliko main > .block, koji svim
   blokovima gasi okomiti razmak. */
main > .acc { padding-top: clamp(26px, 3.5vw, 40px); }
.acc__title { display: block; margin-bottom: 26px; }
.acc__title h2 { margin-bottom: 6px; }
.acc__podnaslov { display: block; color: var(--muted); font-size: 14px; }

/* Ime, razina i adresa čine jednu cjelinu, odvojenu od brojki. */
.acc__head {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: 22px; padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.acc__who { display: inline-flex; align-items: center; gap: 11px; }
.acc__who b { font-size: 24px; letter-spacing: -.015em; }
.acc__mail { color: var(--muted); font-size: 13.5px; }

.acc__stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    margin-bottom: 20px;
}
.acc__stat {
    padding: 15px 16px; border-radius: var(--r);
    background: var(--card); border: 1px solid var(--line);
}
.acc__stat b {
    display: block; font-family: var(--font-mono); font-weight: 500;
    font-size: 25px; line-height: 1.1; letter-spacing: -.02em; color: var(--ink);
}
/* Kosa crta razdvaja brojeve, ali ne smije vući pogled na sebe. */
.acc__od { color: var(--muted); font-weight: 400; margin: 0 2px; }
.acc__stat i {
    display: block; margin-top: 6px; font-style: normal;
    font-size: 12.5px; line-height: 1.45; color: var(--muted);
}

.acc__perms {
    display: flex; gap: 20px; flex-wrap: wrap;
    margin-bottom: 26px; padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
}
/* Na profilu ima mjesta za puni naziv, i na telefonu. */
.acc__perms .uperm__pun    { display: inline; }
.acc__perms .uperm__kratko { display: none; }
.acc__perms .uperm span { max-width: none; }

.acc__tabs {
    display: flex; gap: 4px; margin-bottom: 16px; padding: 4px;
    border-radius: 6px; background: var(--w06);
    box-shadow: inset 0 0 0 1px var(--line);
}
.acc__tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px; border-radius: 4px;
    color: var(--muted); text-decoration: none;
    font-size: 14px; font-weight: 500;
    transition: background .14s, color .14s;
}
.acc__tab:hover { color: var(--ink); }
.acc__tab.is-on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.acc__tab em {
    font-style: normal; font-family: var(--font-mono); font-size: 12px;
    padding: 1px 6px; border-radius: 999px; background: var(--w10);
}
.acc__tab.is-on em { background: var(--b16); }

/* ------------------------------------------------ slanje traka (profil) --- */

.upl__stanje { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.upl__bod {
    padding: 14px 16px; border-radius: var(--r);
    background: var(--card); border: 1px solid var(--line);
}
.upl__bod b { display: block; font-size: 22px; line-height: 1.1; color: var(--ink); }
.upl__bod i { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; color: var(--muted); }
/* Aktivna nagrada se vidi na prvi pogled. */
.upl__bod.is-on { border-color: var(--accent-deep); }
.upl__bod.is-on b { color: var(--accent-deep); }

.upl__pravilo {
    margin: 0 0 16px; padding: 11px 14px; border-radius: var(--r);
    border: 1px dashed var(--line-2);
    font-size: 13px; line-height: 1.6; color: var(--ink-2);
}

/* Obrazac je jedan stupac: polje, napredak, gumb — pa je uvijek simetričan. */
.upl__forma { max-width: 560px; margin-bottom: 20px; }

.upl__polje {
    position: relative; cursor: pointer; display: block;
    padding: 26px 20px; border-radius: var(--r);
    border: 1px dashed var(--line-2); background: var(--w06);
    text-align: center; transition: border-color .14s, background .14s;
}
.upl__polje:hover,
.upl__polje.je-nad { border-color: var(--accent-deep); background: var(--w10); }
.upl__polje input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upl__ikona { display: block; color: var(--accent-deep); margin-bottom: 8px; }
.upl__polje b { display: block; font-size: 15px; }
.upl__polje i { display: block; margin-top: 3px; font-style: normal; font-size: 12.5px; color: var(--muted); }
.upl__odabrano { display: block; margin-top: 8px; font-style: normal; font-size: 13px; color: var(--accent-deep); }

.upl__tijek { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.upl__tijekBar { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--w10); overflow: hidden; }
.upl__tijekBar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.upl__tijekTxt { flex: none; font-size: 12.5px; color: var(--muted); min-width: 4ch; text-align: right; }

.upl__forma .btn { margin-top: 12px; }

.upl__ceka { margin: 0 0 10px; font-size: 13px; color: var(--muted); }

.upl__lik {
    flex: none; display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 8px;
    background: var(--w10); color: var(--muted);
}

.upl__biljeska {
    flex: 0 1 auto; max-width: 26ch; font-size: 12.5px; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.upl__stanjeZnak {
    flex: none; padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
}
.upl__stanjeZnak--ok   { background: var(--ok-bg);  color: var(--ok); }
.upl__stanjeZnak--bad  { background: var(--bad-bg); color: var(--bad); }
.upl__stanjeZnak--wait { background: var(--w10);    color: var(--muted); }

@media (max-width: 700px) {
    .upl__stanje { grid-template-columns: 1fr 1fr; gap: 8px; }
    .upl__stanje > :last-child { grid-column: 1 / -1; }
    .upl__bod { padding: 12px 13px; }
    .upl__bod b { font-size: 19px; }
    .upl__polje { padding: 20px 14px; }
    .upl__biljeska { display: none; }
}

/* Obrazac za promjenu lozinke na profilu. */
.loz {
    max-width: 560px; padding: 22px 24px 24px;
    border-radius: var(--r); border: 1px solid var(--line); background: var(--card);
}
.loz__vrh {
    display: flex; align-items: flex-start; gap: 14px;
    padding-bottom: 18px; margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.loz__lik {
    flex: none; display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--w10); color: var(--accent-deep);
}
.loz__vrh b { display: block; font-size: 17px; letter-spacing: -.01em; }
.loz__vrh i {
    display: block; margin-top: 4px; font-style: normal;
    font-size: 13.5px; line-height: 1.55; color: var(--muted);
}

/* Crta odvaja potvrdu identiteta od nove lozinke — to su dvije stvari. */
.loz__crta { height: 1px; margin: 4px 0 18px; border: 0; background: var(--line); }

.loz__dno { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.loz__savjet { font-size: 12.5px; color: var(--muted); max-width: 30ch; line-height: 1.5; }

.acc__form { max-width: 520px; }
.acc__two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .acc__two { grid-template-columns: 1fr; gap: 0; } }

.acc__form .field { margin-bottom: 14px; }
.acc__form label {
    display: block; margin-bottom: 6px;
    font-size: 13px; font-weight: 500; color: var(--ink-2);
}
.acc__form input {
    width: 100%; box-sizing: border-box;
    padding: 11px 13px; border-radius: 5px;
    border: 1px solid var(--line-2);
    background: var(--w06);
    background-image: linear-gradient(180deg, var(--b16), var(--w04));
    box-shadow: inset 0 1px 2px var(--b30);
    color: var(--ink); font-family: var(--font-body); font-size: 15px;
}
.acc__form input:focus { outline: none; border-color: var(--accent-deep); }
.acc__form .hint { margin: -6px 0 16px; font-size: 12.5px; color: var(--muted); }

.acc__ok, .acc__bad {
    margin: 0 0 14px; padding: 11px 14px; border-radius: 5px;
    font-size: 13.5px; line-height: 1.55;
}
.acc__ok  { background: var(--ok-bg);  color: var(--ok); }
.acc__bad { background: var(--bad-bg); color: var(--bad); }

.acc__empty {
    margin: 0; padding: 34px 20px; text-align: center;
    border-radius: var(--r); border: 1px dashed var(--line-2);
    color: var(--muted); font-size: 14.5px;
}

.acc__list { list-style: none; margin: 0; padding: 0; }
.acc__row {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 14px; border-radius: var(--r);
    border: 1px solid var(--line); background: var(--card);
    margin-bottom: 8px;
}
.acc__cover { width: 44px; height: 44px; border-radius: 4px; object-fit: cover; flex: none; }
.acc__naslov { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.acc__naslov b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc__naslov i { font-style: normal; font-size: 13px; color: var(--muted); }
.acc__kada { flex: none; font-size: 12.5px; color: var(--muted); }

@media (max-width: 760px) {
    .acc__stats { grid-template-columns: repeat(2, 1fr); }
    .acc__tab { flex: 1 1 0; justify-content: center; padding: 10px 8px; }
    .acc__kada { font-size: 11.5px; }

    /* Adresa ide u vlastiti red, inače se odsiječe uz ime i razinu. */
    .acc__head { align-items: flex-start; flex-direction: column; gap: 8px; }
    .acc__mail { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .acc__who b { font-size: 21px; }

    /* Datum je najduži sadržaj kartice, pa određuje veličinu broja. */
    .acc__stat { padding: 13px 14px; }
    .acc__stat b { font-size: 21px; }
    .acc__stat i { font-size: 12px; }
}
@media (max-width: 460px) {
    .acc__row { gap: 10px; padding: 9px 11px; }
    .acc__cover { width: 38px; height: 38px; }
    .acc__kada { display: none; }
}

body.gate-open { overflow: hidden; }

/* ------------------------------------------- prijava i upis u modalu --- */

.gate__box--wide { max-width: 460px; }
.gate__box--wide .gate__text { margin-bottom: 2px; }

.gauth__lead {
    display: block; margin-bottom: 16px;
    font-size: 14px; line-height: 1.6; color: var(--ink-2);
}

.gauth__tabs {
    display: flex; gap: 4px; margin-bottom: 18px; padding: 4px;
    border-radius: 6px; background: var(--w06);
    box-shadow: inset 0 0 0 1px var(--line);
}
.gauth__tab {
    flex: 1 1 0; padding: 9px 10px; border: 0; border-radius: 4px;
    background: transparent; color: var(--muted); cursor: pointer;
    font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
    transition: background .14s, color .14s;
}
.gauth__tab:hover { color: var(--ink); }
.gauth__tab.is-on {
    background: var(--accent); color: var(--accent-ink); font-weight: 600;
}

.gauth__form { display: none; }
.gauth__form.is-on { display: block; }

.gauth .field { margin-bottom: 13px; }
.gauth .field label {
    display: block; margin-bottom: 6px;
    font-size: 13px; font-weight: 500; color: var(--ink-2);
}
.gauth .field input {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px; border-radius: 5px;
    border: 1px solid var(--line-2);
    background: var(--w06);
    background-image: linear-gradient(180deg, var(--b16), var(--w04));
    box-shadow: inset 0 1px 2px var(--b30);
    color: var(--ink); font-family: var(--font-body); font-size: 15px;
}
.gauth .field input:focus { outline: none; border-color: var(--accent-deep); }

.gauth__opt { font-weight: 400; color: var(--muted); font-size: .92em; }
.gauth__two { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.gauth__hint { margin: -6px 0 12px; font-size: 12.5px; color: var(--muted); }

.gauth__check {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 2px 0 16px; cursor: pointer;
    font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.gauth__check input { flex: none; margin-top: 2px; accent-color: var(--accent); }

.gauth .btn--wide { width: 100%; justify-content: center; padding: 12px; font-size: 15px; }

.gauth__links { margin: 12px 0 0; text-align: center; font-size: 13px; }
.gauth__links a { color: var(--muted); text-decoration: none; }
.gauth__links a:hover { color: var(--accent-deep); text-decoration: underline; }

.gauth__msg {
    margin: 0 0 14px; padding: 11px 13px; border-radius: 5px;
    font-size: 13.5px; line-height: 1.55;
}
.gauth__msg--bad { background: var(--bad-bg); color: var(--bad); }
.gauth__msg--ok  { background: var(--ok-bg);  color: var(--ok); }

/* Zamka za botove — čovjek je ne vidi. */
.gauth__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 460px) {
    .gauth__two { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 460px) {
    .gate__box { padding: 22px 20px 18px; }
    .gate__acts .btn { flex: 1 1 100%; }
}

/* Oznaka razine u izborniku računa. */
.rolepill {
    padding: 3px 9px; border-radius: 5px;
    background: var(--accent-soft); color: var(--accent-deep);
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase;
}

/* U traci podloga mora biti neutralna — akcentna oznaka na akcentnoj podlozi
   se gubi, kao svijetlo na svijetlom. */
.ubar .rolepill {
    background: var(--w14);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line-2);
}

.adminmenu__note {
    margin: 8px 11px 4px; font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.adminmenu__note b { color: var(--accent-deep); font-size: 14px; }
.adminmenu__sub { display: block; margin-top: 2px; font-size: 11.5px; opacity: .8; }

/* Stoji ispod zaglavlja — korisnik odmah vidi razinu, prava i preostalu
   kvotu, bez otvaranja izbornika. */

.ubar {
    position: relative; z-index: 40;
    background: var(--w05);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px) saturate(130%);
}
.ubar--warn { background: var(--warn-bg); border-bottom-color: rgba(240, 192, 112, .3); }
.ubar--low  { background: var(--bad-bg);  border-bottom-color: rgba(255, 138, 128, .28); }
.ubar--guest { background: var(--accent-soft); border-bottom-color: rgba(23, 163, 152, .3); }

.ubar__in {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    max-width: var(--max); margin: 0 auto;
    padding: 9px var(--pad);
    font-size: 13px;
}

.ubar__who {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ink-2); white-space: nowrap;
}
.ubar__who .ico { opacity: .55; flex: none; }
.ubar__who b { color: var(--ink); font-weight: 600; }


.ubar__msg {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ink-2); line-height: 1.5;
}
.ubar__msg .ico { flex: none; opacity: .7; }

/* Tanka crta razdvaja skupine: tko si, što smiješ, koliko ti je ostalo.
   Bez nje se sve stapa u jednu rečenicu. */
.ubar__crta {
    flex: none; width: 1px; height: 16px;
    background: var(--line-2); opacity: .8;
}

/* --- prava --- */

.ubar__perms { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.uperm {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--muted); white-space: nowrap;
}
.uperm .ico { flex: none; opacity: 1; stroke-width: 2.6; }

/* Znak uz naziv nosi cijelu poruku: zelena kvačica je otvoreno, crveni
   križić nije. Naziv ostaje čitljiv u oba slučaja. */
.uperm.is-on  { color: var(--ink-2); }
.uperm.is-on .ico  { color: var(--ok); }
.uperm.is-off { color: var(--muted); }
.uperm.is-off .ico { color: var(--bad); }

.uperm__kratko { display: none; }

/* Napomena o granici stoji tiše od samog prava — koliko je ostalo piše
   desno, uz traku. */
.uperm__nota {
    font-style: normal; font-size: 11.5px; color: var(--muted);
    padding: 1px 6px; margin-left: 2px;
    border-radius: 999px; background: var(--w06);
}

/* --- kvota --- */

.ubar__quota {
    display: inline-flex; align-items: center; gap: 8px;
    margin-left: auto; color: var(--ink-2); white-space: nowrap;
}
.ubar__quota--free { color: var(--muted); }
.ubar__quota--free .ico { opacity: .6; }

.quota__bar {
    display: block; width: 74px; height: 6px;
    border-radius: 3px; overflow: hidden;
    background: var(--w10);
    box-shadow: inset 0 0 0 1px var(--line);
}
.quota__bar i {
    display: block; height: 100%;
    background: var(--accent);
    transition: width .3s;
}
.ubar--low .quota__bar i { background: var(--bad); }

/* Brojka je glavna, ostatak je objašnjenje uz nju. */
.quota__txt { font-size: 14px; color: var(--ink); letter-spacing: -.01em; }
.quota__txt b { font-weight: 700; }
.quota__lbl { font-size: 12px; color: var(--muted); }

/* Kad ostane malo, brojka to i pokaže. */
.ubar--low .quota__txt b { color: var(--bad); }

/* --- poziv --- */

.ubar__cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 5px;
    background: var(--accent); color: var(--accent-ink);
    font-weight: 600; white-space: nowrap;
    box-shadow: inset 0 1px 0 var(--w30);
    transition: filter .14s;
}
.ubar__cta:hover { filter: brightness(1.08); }

/* Bodovi za poslane trake. Aktivna nagrada se vidi bojom, jer je vremenski
   ograničena i o njoj treba voditi računa. */
.ubar__bod {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--w06); color: var(--ink-2);
    text-decoration: none; white-space: nowrap;
    transition: background .14s, color .14s;
}
.ubar__bod:hover { background: var(--w10); color: var(--ink); }
.ubar__bod .ico { color: var(--muted); }
.ubar__bod b { font-size: 13.5px; }
.ubar__bod span { font-size: 12px; color: var(--muted); }

.ubar__bod.is-on { background: var(--ok-bg); color: var(--ok); }
.ubar__bod.is-on .ico, .ubar__bod.is-on span { color: inherit; }

@media (max-width: 900px) {
    .ubar__bod span { display: none; }
}

/* Tko je na vrhu ne dobiva poziv na nadogradnju nego potvrdu — mirna oznaka,
   ne gumb, jer nema kamo voditi. */
.ubar__vrh {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 5px;
    background: var(--w06); box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--ink-2); font-weight: 500; white-space: nowrap;
}
.ubar__vrh .ico { color: var(--accent-deep); }
.ubar__cta .ico { opacity: .8; }

/* Meta mora biti barem 24 px visoka — inače je promaši prst. */
.ubar__alt {
    display: inline-flex; align-items: center;
    min-height: 26px; padding: 3px 4px;
    color: var(--ink); white-space: nowrap; font-weight: 500;
}
.ubar__alt:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Kad kvote nema, poziv ide skroz desno. */
.ubar__quota + .ubar__cta { margin-left: 0; }
.ubar__perms + .ubar__cta,
.ubar__msg + .ubar__cta { margin-left: auto; }

/* Srednji ekran: ime ostaje u prvom retku uz prava, poziv ide desno. */
@media (max-width: 1100px) {
    .ubar__in { gap: 8px 14px; padding: 8px var(--pad); font-size: 12.5px; }
    .ubar__perms { gap: 12px; }
    .uperm span { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .quota__bar { width: 56px; }
}

@media (max-width: 900px) {
    /* Umjesto skrivanja natpisa ide kraći naziv — sam znak ne kaže na što
       se odnosi, pa bi tri gola znaka bila zagonetka. */
    .uperm__pun    { display: none; }
    .uperm__kratko { display: inline; }
    .uperm { padding: 3px 0; }
    .ubar__perms { gap: 10px; }
    /* Na uskom ostaje samo "danas" — brojka bez ijedne riječi ne govori
       ništa, a puna rečenica ne stane. */
    .quota__lbl { font-size: 11.5px; }
    .quota__lbl--pun { display: none; }
    .ubar__quota { margin-left: auto; }
}

@media (max-width: 620px) {
    .ubar__who { flex: 1 1 100%; }
    .ubar__quota { margin-left: 0; }
    .ubar__cta { margin-left: auto !important; }
}

@media (max-width: 560px) {
    .uperm .ico { width: 16px; height: 16px; }
    .ubar__msg { flex: 1 1 100%; }
}

/* Traka koja čeka odluku javlja se točkom na ikoni računa — inače se ne bi
   znalo da se nešto dogodilo dok se ne otvori profil. */
.loginlink.ima-novo { position: relative; }
.loginlink.ima-novo::after {
    content: ''; position: absolute; top: 4px; right: 4px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--paper);
    animation: tockaKuca 2s ease-in-out infinite;
}
@keyframes tockaKuca { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }

/* Brojka uz stavku u izborniku. */
.adminmenu__broj {
    margin-left: auto; min-width: 19px; padding: 1px 6px;
    border-radius: 999px; background: var(--accent); color: var(--accent-ink);
    font-style: normal; font-size: 11.5px; font-weight: 700; text-align: center;
}