/* =========================================================
   CAPTAIN 9'5 — captain95.co.za
   Top bar (logo / player / menu), Inter, black-white-grey,
   sentence case, borderless "empty space" inputs.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:    #ffffff;
  --ink:   #000000;
  --ink-soft: #4d4d4d;
  --ink-faint: #9a9a9a;
  --line:  #e4e4e4;
  --line-strong: #cccccc;

  --f: 'Inter', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --edge: clamp(1.25rem, 5vw, 4rem);
  --corner: clamp(16px, 3vw, 24px);
  --max: 1100px;
  --topbar-h: 64px;
  --footer-h: 52px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--topbar-h);
}
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }
::selection{ background: var(--ink); color: var(--bg); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--edge); }

/* =========================================================
   TOP BAR — logo left, burger right. Nothing else.
   ========================================================= */
.topbar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--topbar-h);
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--corner);
}
.topbar__logo{ display: flex; align-items: center; flex: none; }
.topbar__logo img{ height: 30px; width: 30px; display: block; }

.topbar__burger{
  flex: none; width: 34px; height: 34px; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.topbar__burger span{ display: block; width: 18px; height: 1.4px; background: var(--ink); position: relative; }
.topbar__burger span::before,.topbar__burger span::after{ content:''; position:absolute; left:0; width:18px; height:1.4px; background:var(--ink); transition: transform .2s ease; }
.topbar__burger span::before{ top:-6px; } .topbar__burger span::after{ top:6px; }
.topbar__burger.is-open span{ background: transparent; }
.topbar__burger.is-open span::before{ top:0; transform: rotate(45deg); }
.topbar__burger.is-open span::after{ top:0; transform: rotate(-45deg); }

/* =========================================================
   MENU — full-screen takeover, big numbered type. Not a
   generic slide-in list.
   ========================================================= */
.menu-panel{
  position: fixed; inset: 0; z-index: 71;
  background: var(--bg);
  opacity: 0; pointer-events: none; transform: translateY(-14px);
  transition: opacity .3s ease, transform .3s ease;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(5rem, 12vh, 7rem) clamp(1.5rem, 6vw, 4rem) 3rem;
  overflow-y: auto;
}
.menu-panel.is-open{ opacity: 1; pointer-events: auto; transform: none; }
.menu-panel__watermark{
  position: absolute; right: clamp(-2rem, 4vw, 2rem); bottom: clamp(-4rem, -2vw, -1rem);
  font-size: clamp(8rem, 30vw, 22rem); font-weight: 700; color: #f2f2f2;
  line-height: 1; z-index: -1; user-select: none; pointer-events: none;
}
.menu-panel__close{
  position: absolute; top: clamp(1.2rem, 4vw, 2rem); right: clamp(1.2rem, 4vw, 2rem);
  width: 40px; height: 40px; border: 1px solid var(--line-strong); background: none; cursor: pointer;
  font-size: 1.3rem; border-radius: 50%;
}
.menu-panel__close:hover{ border-color: var(--ink); }
.menu-panel__list{ list-style: none; margin: 0; padding: 0; max-width: 780px; }
.menu-panel__list li{ border-top: 1px solid var(--line); }
.menu-panel__list li:last-child{ border-bottom: 1px solid var(--line); }
.menu-panel__list a{
  display: flex; align-items: baseline; gap: 1.2rem;
  padding: clamp(.7rem, 2vw, 1.15rem) 0;
  font-size: clamp(1.5rem, 5vw, 2.6rem); font-weight: 700; letter-spacing: -.01em;
  transition: padding-left .25s ease, color .2s ease;
}
.menu-panel__list a .n{ font-size: .9rem; font-weight: 400; color: var(--ink-faint); min-width: 1.6em; }
.menu-panel__list a:hover{ padding-left: .6rem; color: var(--ink-soft); }
.menu-panel__list a:hover .n{ color: var(--ink); }

/* =========================================================
   FULL-SCREEN PLAYER
   ========================================================= */
.fullscreen-player{
  position: fixed; inset: 0; background: var(--bg); z-index: 80;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 5vw, 3rem);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.fullscreen-player.is-open{ opacity: 1; pointer-events: auto; }
.fullscreen-player__close{
  position: absolute; top: clamp(1.2rem, 4vw, 2rem); right: clamp(1.2rem, 4vw, 2rem);
  width: 36px; height: 36px; border: none; background: none; cursor: pointer; font-size: 1.4rem;
}
.fullscreen-player__art{
  width: min(280px, 60vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4f4f4, #cfcfcf 80%);
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2.4rem;
}
.fullscreen-player__art span{ font-size: 1.6rem; color: var(--ink-soft); font-weight: 600; }
.fullscreen-player__title{ font-size: 1.5rem; font-weight: 600; text-align: center; margin-bottom: .3rem; }
.fullscreen-player__sub{ font-size: .95rem; color: var(--ink-faint); text-align: center; margin-bottom: 2rem; }
.fullscreen-player__progress{ width: min(420px, 88vw); height: 4px; background: var(--line); border-radius: 2px; cursor: pointer; overflow: hidden; margin-bottom: .5rem; }
.fullscreen-player__progress-fill{ height: 100%; width: 0%; background: var(--ink); }
.fullscreen-player__time{ display: flex; justify-content: space-between; width: min(420px, 88vw); font-size: .75rem; color: var(--ink-faint); margin-bottom: 2rem; }
.fullscreen-player__controls{ display: flex; align-items: center; gap: 2rem; }
.fullscreen-player__controls button{ background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fullscreen-player__controls svg{ width: 20px; height: 20px; fill: var(--ink); }
.fullscreen-player__controls .play-btn{ width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--ink); }
.fullscreen-player__controls .play-btn svg{ width: 22px; height: 22px; }

/* =========================================================
   PREVIEW-ENDED PROMPT
   ========================================================= */
.preview-modal{
  position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 95;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.preview-modal.is-open{ opacity: 1; pointer-events: auto; }
.preview-modal__box{ background: var(--bg); border: 1px solid var(--ink); padding: 2rem; width: min(380px, 92vw); text-align: center; }
.preview-modal__box h2{ font-size: 1.15rem; font-weight: 600; margin: 0 0 .6rem; }
.preview-modal__box p{ font-size: .9rem; color: var(--ink-soft); margin: 0 0 1.6rem; }
.preview-modal__actions{ display: flex; flex-direction: column; gap: .7rem; }

/* =========================================================
   BUTTONS / LINKS
   ========================================================= */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--f); font-size: .9rem; font-weight: 500;
  padding: .8em 1.5em;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--bg);
  cursor: pointer; transition: background .16s ease, color .16s ease;
}
.btn:hover{ background: #333; }
.btn--ghost{ background: none; color: var(--ink); }
.btn--ghost:hover{ background: var(--ink); color: var(--bg); }
.btn--full{ width: 100%; }
.btn[disabled]{ opacity: .4; cursor: not-allowed; }
.link-underline{ border-bottom: 1px solid var(--ink); padding-bottom: .1em; }

/* =========================================================
   "EMPTY SPACE" FORM FIELDS — no boxes, just an underline
   ========================================================= */
.field{ margin-bottom: 1.5rem; }
.field label{ display: block; font-size: .8rem; color: var(--ink-soft); margin-bottom: .5rem; }
.field-input-wrap{ position: relative; }
.field input{
  width: 100%; border: none; border-bottom: 1px solid var(--line-strong);
  background: none; color: var(--ink);
  padding: .6em 0; font-family: var(--f); font-size: 1rem;
}
.field input:focus{ border-bottom-color: var(--ink); outline: none; }
.field input[type="password"]{ padding-right: 2rem; }
.field-toggle-pw{
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: .3rem;
  display: flex; align-items: center; justify-content: center;
}
.field-toggle-pw svg{ width: 18px; height: 18px; stroke: var(--ink-faint); }
.field-toggle-pw:hover svg{ stroke: var(--ink); }
.field--row{ display: flex; gap: 1.2rem; }
.field--row .field{ flex: 1; }
.form-note{ font-size: .8rem; color: var(--ink-faint); margin: -.6rem 0 1.6rem; }
.form-link-row{ text-align: right; margin-top: .9rem; }
.form-link-row a{ font-size: .84rem; color: var(--ink-soft); }
.form-link-row a:hover{ color: var(--ink); }
.form-msg{ font-size: .85rem; padding: .9em 0; border-bottom: 1px solid var(--line); margin-bottom: 1.4rem; display: none; }
.form-msg.is-visible{ display: block; }
.form-msg.is-error{ color: #a5321f; }
.form-msg.is-ok{ color: #4a7a4f; }

/* =========================================================
   FOOTER — normal flow, stacks cleanly on narrow viewports
   ========================================================= */
.site-footer{
  height: var(--footer-h);
  border-top: 1px solid var(--line);
  padding: 0 var(--corner);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .4rem 1.5rem;
}
.site-footer .copyright{ font-size: .74rem; color: var(--ink-faint); }
.site-footer .copyright a{ color: var(--ink-faint); }
.site-footer .copyright a:hover{ color: var(--ink); }
.site-footer .right{ display: flex; align-items: center; gap: .9rem; }
.site-footer .brand{ font-size: .8rem; color: var(--ink-soft); }
.site-footer .socials{ display: flex; align-items: center; gap: .65rem; }
.site-footer .socials a{ color: var(--ink-faint); display: flex; transition: color .15s ease; }
.site-footer .socials a:hover{ color: var(--ink); }
.site-footer .socials svg{ width: 15px; height: 15px; }
@media (max-width: 560px){
  :root{ --footer-h: 84px; }
  .site-footer{ flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: .6rem var(--corner); }
  .site-footer .right{ order: -1; }
}

/* =========================================================
   HOME — open space. Navigation lives only in the burger menu.
   ========================================================= */
.home-stage{ height: calc(100vh - var(--topbar-h) - var(--footer-h)); position: relative; }
.home-hero{
  position: absolute; inset: var(--corner);
  background: #f7f7f5;
  overflow: hidden;
}
.home-hero img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1s ease;
}
.home-hero img.is-active{ opacity: 1; }

/* =========================================================
   ABOUT
   ========================================================= */
.about-stage{ min-height: calc(100vh - var(--topbar-h)); display: flex; align-items: center; padding: 4rem var(--edge) 8rem; }
.about-stage .wrap{ max-width: 640px; }
.about-stage p{ font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--ink); max-width: 46ch; margin: 0 0 1.4rem; }

/* =========================================================
   SHOWS
   ========================================================= */
.shows-stage{ min-height: calc(100vh - var(--topbar-h)); padding: 4rem var(--edge) 8rem; }
.shows-list{ max-width: 620px; margin: 0 auto; }
.show-row{ padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.show-row:first-child{ border-top: 1px solid var(--line); }
.show-row .date{ font-size: .78rem; color: var(--ink-faint); margin-bottom: .4rem; }
.show-row .title{ font-size: 1.05rem; }
.show-row .place{ font-size: .85rem; color: var(--ink-soft); margin-top: .2rem; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-stage{ min-height: calc(100vh - var(--topbar-h)); display:flex; align-items:center; justify-content:center; padding: 4rem var(--edge) 8rem; text-align: center; }
.contact-groups{ display: flex; flex-direction: column; gap: 2.6rem; }
.contact-group h2{ font-size: .95rem; font-weight: 500; color: var(--ink-faint); margin: 0 0 .9rem; }
.contact-list{ list-style:none; margin: 0; padding: 0; display:flex; flex-direction: column; gap: .7rem; }
.contact-list a{ font-size: 1.05rem; border-bottom: 1px solid transparent; padding-bottom: .1em; transition: border-color .15s ease; }
.contact-list a:hover{ border-color: var(--ink); }
.contact-note{ font-size: .85rem; color: var(--ink-faint); max-width: 40ch; margin: 0 auto; }

/* =========================================================
   TERMS
   ========================================================= */
.terms-stage{ min-height: calc(100vh - var(--topbar-h)); padding: 4rem var(--edge) 8rem; }
.terms-stage .wrap{ max-width: 680px; }
.terms-stage h1{ font-size: 1.7rem; font-weight: 600; margin: 0 0 1.6rem; }
.terms-stage h2{ font-size: 1.05rem; font-weight: 600; margin: 2rem 0 .7rem; }
.terms-stage p{ font-size: .92rem; color: var(--ink-soft); max-width: 68ch; }
.terms-stage ul{ padding-left: 1.2rem; color: var(--ink-soft); font-size: .92rem; }

/* =========================================================
   MUSIC — hero image + collapsible Albums / EP's / Singles
   ========================================================= */
.music-page-head{ padding: clamp(3rem, 8vw, 5rem) 0 1rem; }
.music-page-head h1{ font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 600; margin: 0 0 .4rem; }
.music-page-head p{ font-size: .92rem; color: var(--ink-faint); margin: 0; }

/* Matches the topbar logo / footer corners exactly — full width,
   fixed corner inset, no max-width centering — rather than the
   wider, centered .wrap used by prose pages. */
.corner-wrap{ padding: 0 var(--corner); }

.desktop-stage{ padding: 3rem 0 8rem; }
.music-group{ padding: 0 var(--corner); border-bottom: 1px solid var(--line); }
.music-group__head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 0; cursor: pointer; background: none; border: none; width: 100%;
  font-family: var(--f); text-align: left;
}
.music-group__head h2{ font-size: 1.05rem; font-weight: 600; margin: 0; }
.music-group__head .count{ font-size: .8rem; color: var(--ink-faint); margin-left: .6rem; font-weight: 400; }
.music-group__chevron{ transition: transform .2s ease; }
.music-group.is-open .music-group__chevron{ transform: rotate(90deg); }
.music-group__body{ max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.music-group.is-open .music-group__body{ max-height: 900px; }
.music-group__inner{ padding-bottom: 2rem; }

.desktop-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, 92px);
  gap: 1.8rem 1.4rem;
  justify-content: start;
  align-items: start;
}
.file-item.is-open{ grid-column: 1 / -1; }

.file-item__head{
  background: none; border: none; cursor: pointer; padding: .5rem .3rem;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  width: 92px; text-align: center;
}
.file-item.is-open .file-item__head{
  width: auto; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 1rem; text-align: left; padding: .5rem 0;
}
.file-item .doc{
  width: 46px; height: 58px; position: relative; flex: none;
  background: linear-gradient(135deg, #ffffff 0%, #f4f4f4 100%);
  border: 1px solid var(--ink);
}
.file-item .doc::before{
  content: ''; position: absolute; top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid; border-width: 0 12px 12px 0;
  border-color: transparent var(--bg) transparent transparent;
  filter: drop-shadow(-1px 1px 0 var(--ink));
}
.file-item .doc::after{
  content: ''; position: absolute; left: 8px; right: 8px; top: 22px;
  height: 1px; background: var(--line-strong);
  box-shadow: 0 6px 0 var(--line-strong), 0 12px 0 var(--line-strong);
}
.file-item .name{ font-size: .72rem; line-height: 1.3; color: var(--ink); }
.file-item.is-open .name{ font-size: .92rem; font-weight: 600; }
.file-item .ext{ color: var(--ink-faint); font-weight: 400; }
.file-item .chev{ margin-left: auto; flex: none; transition: transform .2s ease; color: var(--ink-faint); display: none; }
.file-item.is-open .chev{ display: block; transform: rotate(90deg); }

.file-item__tracks{ max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.file-item.is-open .file-item__tracks{ max-height: 600px; }
.file-item__tracks-inner{ padding: .3rem 0 1.2rem; margin-left: calc(46px + 1rem); }
.file-track{
  display: flex; align-items: center; gap: .8rem;
  padding: .55rem 0; border-top: 1px solid var(--line);
  font-size: .88rem;
}
.file-track__play{
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--ink);
  background: var(--bg); flex: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.file-track__play svg{ width: 8px; height: 8px; fill: var(--ink); }
.file-track__play.is-playing{ background: var(--ink); }
.file-track__play.is-playing svg{ fill: var(--bg); }
.file-track__name{ flex: 1; }
.file-track.is-current .file-track__name{ font-weight: 600; }
.file-track__now{
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink);
  display: none; flex: none;
}
.file-track.is-current .file-track__now{ display: block; }
.file-track__dur{ font-size: .74rem; color: var(--ink-faint); }
.file-track__addlist{ font-size: .72rem; background: none; border: 1px solid var(--line-strong); padding: .3em .75em; cursor: pointer; color: var(--ink-soft); flex: none; }
.file-track__addlist:hover{ border-color: var(--ink); color: var(--ink); }

@media (max-width: 560px){
  .desktop-grid{ grid-template-columns: repeat(auto-fill, 78px); gap: 1.4rem 1rem; }
  .file-item__head{ width: 78px; }
  .file-item__tracks-inner{ margin-left: 0; }
}

.addlist-pop{
  position: fixed; z-index: 95; background: var(--bg); border: 1px solid var(--ink);
  width: min(260px, 80vw); box-shadow: 0 12px 26px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease;
}
.addlist-pop.is-open{ opacity: 1; pointer-events: auto; transform: none; }
.addlist-pop h3{ font-size: .8rem; font-weight: 500; padding: .7rem .9rem; border-bottom: 1px solid var(--line); margin: 0; }
.addlist-pop ul{ list-style: none; margin: 0; padding: 0; max-height: 180px; overflow-y: auto; }
.addlist-pop li button{ width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: .6rem .9rem; font-size: .84rem; border-bottom: 1px solid var(--line); }
.addlist-pop li button:hover{ background: #f6f6f6; }
.addlist-pop .new-row{ display: flex; gap: .4rem; padding: .7rem .9rem; }
.addlist-pop .new-row input{ flex: 1; min-width: 0; border: none; border-bottom: 1px solid var(--line-strong); padding: .4em 0; font-family: var(--f); font-size: .82rem; }
.addlist-pop .new-row button{ background: var(--ink); color: var(--bg); border: none; padding: .4em .7em; font-size: .8rem; cursor: pointer; }
.addlist-pop .note{ padding: .8rem .9rem; font-size: .8rem; color: var(--ink-faint); }

/* =========================================================
   NOW PLAYING — slim bottom bar, distinct from the top bar.
   Click it to expand the full-screen player.
   ========================================================= */
.now-playing{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: var(--bg); border-top: 1px solid var(--ink);
  transform: translateY(100%); transition: transform .25s ease;
  cursor: pointer;
}
.now-playing.is-active{ transform: translateY(0); }
.now-playing__progress{ position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--line); }
.now-playing__progress-fill{ height: 100%; width: 0%; background: var(--ink); transition: width .2s linear; }
.now-playing__row{
  max-width: var(--max); margin: 0 auto; padding: .7rem clamp(1.25rem, 5vw, 4rem);
  display: flex; align-items: center; gap: 1rem;
}
.now-playing__btn{
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ink);
  background: var(--bg); flex: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.now-playing__btn svg{ width: 10px; height: 10px; fill: var(--ink); }
.now-playing__meta{ flex: 1; min-width: 0; }
.now-playing__title{ font-size: .86rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-playing__sub{ font-size: .72rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* =========================================================
   ADMIN — hero image manager
   ========================================================= */
.admin-stage{ min-height: calc(100vh - var(--topbar-h)); padding: 4rem 0 8rem; }
.admin-stage .corner-wrap{ max-width: 900px; }
.admin-heading{ margin-bottom: 2rem; }
.admin-heading h1{ font-size: 1.6rem; font-weight: 600; margin: 0 0 .4rem; }
.admin-heading p{ margin: 0; color: var(--ink-faint); font-size: .88rem; }

.admin-upload{
  border: 1px dashed var(--line-strong); padding: 2rem;
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  text-align: center; margin-bottom: 2.4rem; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.admin-upload:hover, .admin-upload.is-dragover{ border-color: var(--ink); background: #fafafa; }
.admin-upload input[type="file"]{ display: none; }
.admin-upload .label{ font-size: .92rem; }
.admin-upload .note{ font-size: .76rem; color: var(--ink-faint); }

.admin-list{ display: flex; flex-direction: column; gap: 1.6rem; }
.admin-card{ border: 1px solid var(--line); display: flex; gap: 1.2rem; padding: 1rem; }
.admin-card__preview{
  position: relative; width: 160px; height: 100px; flex: none;
  background: var(--surface, #f5f5f3); overflow: hidden; cursor: crosshair;
}
.admin-card__preview img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.admin-card__crosshair{
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ink), 0 2px 6px rgba(0,0,0,.4);
  transform: translate(-50%, -50%); pointer-events: none;
}
.admin-card__body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.admin-card__filename{ font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-card__meta{ font-size: .74rem; color: var(--ink-faint); }
.admin-card__actions{ display: flex; align-items: center; gap: .7rem; margin-top: auto; flex-wrap: wrap; }
.admin-card__actions button{
  font-size: .74rem; background: none; border: 1px solid var(--line-strong);
  padding: .4em .8em; cursor: pointer; color: var(--ink-soft);
}
.admin-card__actions button:hover{ border-color: var(--ink); color: var(--ink); }
.admin-card__actions button.danger:hover{ border-color: #a5321f; color: #a5321f; }
.admin-card__toggle{ display: flex; align-items: center; gap: .5em; font-size: .76rem; color: var(--ink-soft); }
.admin-empty{ color: var(--ink-faint); font-size: .88rem; padding: 2rem 0; }
@media (max-width: 560px){
  .admin-card{ flex-direction: column; }
  .admin-card__preview{ width: 100%; height: 160px; }
}

/* =========================================================
   ACCOUNT

   ========================================================= */
.account-stage{ min-height: calc(100vh - var(--topbar-h)); padding: 4rem var(--edge) 8rem; }
.account-stage .wrap{ max-width: 420px; }
.account-heading{ margin-bottom: 2rem; }
.account-heading h1{ font-size: 1.6rem; font-weight: 600; margin: 0 0 .4rem; }
.account-heading p{ margin: 0; color: var(--ink-faint); font-size: .88rem; }

.tabs{ display: flex; gap: 1.6rem; border-bottom: 1px solid var(--line); margin-bottom: 1.8rem; }
.tabs button{ background: none; border: none; padding: .3rem 0 .8rem; font-size: .88rem; color: var(--ink-faint); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.is-active{ color: var(--ink); border-color: var(--ink); }
.tab-panel{ display: none; } .tab-panel.is-active{ display: block; }

.playlists{ margin-top: 2.4rem; }
.playlists h2{ font-size: .95rem; font-weight: 500; color: var(--ink-faint); margin: 0 0 1rem; }
.playlist-row{ display: flex; align-items: center; justify-content: space-between; padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; cursor: pointer; }
.playlist-row:first-child{ border-top: 1px solid var(--line); }
.playlist-row .count{ font-size: .78rem; color: var(--ink-faint); }
.new-playlist-row{ display: flex; gap: .8rem; margin-top: 1rem; align-items: flex-end; }
.new-playlist-row .field{ flex: 1; margin-bottom: 0; }
.playlist-detail{ margin-top: 1rem; }
.playlist-detail .track-row{ display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.playlist-detail .empty{ color: var(--ink-faint); font-size: .86rem; padding: 1rem 0; }