/* Tatimost — brand site. Cosmic violet, gold, space-color. */
:root{
  --bg:#0a0712; --bg2:#160e26; --fg:#ece8f5; --muted:#a99fc0;
  --accent:#e0a44a; --accent-soft:#f0c987;
  --violet:#b794f6; --magenta:#d96fb0; --line:#2a2140;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--fg);
  background:
    radial-gradient(900px 500px at 12% 8%, rgba(183,148,246,.16) 0%, transparent 55%),
    radial-gradient(1000px 600px at 88% 22%, rgba(217,111,176,.13) 0%, transparent 55%),
    radial-gradient(1200px 700px at 50% 110%, rgba(126,90,200,.20) 0%, transparent 60%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);
  background-attachment:fixed;
  font:17px/1.7 -apple-system,BlinkMacSystemFont,'Segoe UI',Inter,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent-soft)}
.serif{font-family:'Cormorant Garamond',Georgia,serif}

/* full-bleed cosmic hero with her Flux still */
.hero{position:relative;min-height:78vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:40px 24px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;
  background:url('/assets/hero.jpg') center/cover no-repeat;
  filter:saturate(1.15) brightness(.85);transform:scale(1.05)}
.hero::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 40%, transparent 0%, rgba(10,7,18,.55) 70%, var(--bg) 100%),
    linear-gradient(180deg, rgba(22,14,38,.35) 0%, rgba(10,7,18,.85) 100%)}
.hero>*{position:relative;z-index:1}
.hero h1{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(3.4rem,11vw,6.5rem);font-weight:600;margin:0;line-height:.95;
  letter-spacing:.07em;color:#fff;text-shadow:0 2px 40px rgba(183,148,246,.5)}
.hero .tagline{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(1.2rem,3.5vw,1.7rem);color:var(--accent-soft);margin:.6rem 0 0;letter-spacing:.05em}

header{padding:80px 24px 24px;text-align:center}
header h1{font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(2.6rem,8vw,4rem);font-weight:600;margin:0;letter-spacing:.06em;line-height:1;
  background:linear-gradient(180deg,#fff 0%,var(--violet) 130%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
header p{color:var(--accent-soft);margin:.6rem 0 0;font-style:italic;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:1.3rem;letter-spacing:.04em}

nav{display:flex;gap:30px;justify-content:center;padding:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(10,7,18,.78);backdrop-filter:blur(12px);z-index:10}
nav a{color:var(--fg);text-transform:uppercase;font-size:.74rem;letter-spacing:.2em;font-weight:500}
nav a:hover{color:var(--violet)}

main{max-width:780px;margin:0 auto;padding:64px 24px}
section{margin-bottom:72px}
h2{font-family:'Cormorant Garamond',Georgia,serif;
  font-size:2.3rem;font-weight:600;letter-spacing:.02em;margin:0 0 .6rem;
  background:linear-gradient(90deg,var(--accent) 0%,var(--violet) 120%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h3{font-size:1.15rem;margin:0 0 .3rem;letter-spacing:.01em;color:var(--fg)}
.lead{font-size:1.4rem;line-height:1.65;color:var(--fg);font-family:'Cormorant Garamond',Georgia,serif}
.muted{color:var(--muted)}
.rule{width:60px;height:2px;margin:0 0 26px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--magenta))}

.card{border:1px solid var(--line);border-radius:16px;padding:26px 28px;margin:18px 0;
  background:linear-gradient(180deg,rgba(183,148,246,.05),rgba(255,255,255,.012));
  backdrop-filter:blur(4px);transition:border-color .25s,transform .25s,box-shadow .25s}
.card:hover{border-color:rgba(183,148,246,.4);transform:translateY(-3px);
  box-shadow:0 12px 40px -12px rgba(183,148,246,.25)}
.tag{display:inline-block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--violet);border:1px solid var(--line);border-radius:99px;padding:3px 12px;margin-bottom:12px}
.pair{color:var(--muted);font-size:.92rem;margin-top:6px}
.embed{aspect-ratio:16/9;width:100%;border:1px dashed var(--line);border-radius:12px;
  display:flex;align-items:center;justify-content:center;color:var(--muted);
  font-size:.85rem;margin-top:14px;background:rgba(0,0,0,.25)}
.shot{width:100%;border-radius:14px;border:1px solid var(--line);display:block;margin:8px 0}
figure{margin:0}
figcaption{color:var(--muted);font-size:.82rem;margin-top:8px;text-align:center;font-style:italic}

/* auto-synced YouTube videos — playable embeds */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;margin-top:8px}
.video-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(183,148,246,.06),rgba(255,255,255,.012));
  transition:border-color .25s,box-shadow .25s}
.video-card:hover{border-color:rgba(183,148,246,.45);box-shadow:0 14px 44px -14px rgba(183,148,246,.3)}
.video-frame{position:relative;aspect-ratio:16/9;background:#000}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video-title{display:block;padding:13px 16px 16px;font-size:.96rem;line-height:1.35;color:var(--fg)}

.btn{display:inline-block;padding:13px 26px;border-radius:99px;
  font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:#0a0712;background:linear-gradient(90deg,var(--accent),var(--magenta));
  transition:transform .2s,box-shadow .2s}
.btn:hover{color:#0a0712;transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(217,111,176,.5)}

footer{text-align:center;color:var(--muted);padding:56px 24px;
  border-top:1px solid var(--line);font-size:.9rem}
footer a{margin:0 8px;color:var(--violet)}

/* ============ MUSIC PLAYER ============ */
body.has-player{padding-bottom:104px}            /* clear the fixed bar */
@media(max-width:600px){body.has-player{padding-bottom:148px}}

/* playlist tabs */
.tabs{display:inline-flex;gap:4px;padding:5px;margin:0 0 26px;border-radius:99px;
  border:1px solid var(--line);background:rgba(10,7,18,.5);backdrop-filter:blur(6px)}
.tabs button{appearance:none;border:0;cursor:pointer;font:inherit;
  padding:9px 20px;border-radius:99px;color:var(--muted);background:transparent;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;transition:.2s}
.tabs button:hover{color:var(--fg)}
.tabs button[aria-selected="true"]{color:#0a0712;
  background:linear-gradient(90deg,var(--accent),var(--magenta))}

/* song list */
.song-list{list-style:none;margin:0;padding:0}
.song-row{display:grid;grid-template-columns:26px 52px 1fr auto;align-items:center;gap:16px;
  width:100%;text-align:left;appearance:none;border:0;cursor:pointer;font:inherit;color:var(--fg);
  background:transparent;padding:10px 12px;border-radius:14px;transition:background .2s}
.song-row:hover{background:rgba(183,148,246,.08)}
.song-row:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.song-row .num{color:var(--muted);font-size:.92rem;text-align:center;font-variant-numeric:tabular-nums}
.song-row:hover .num,.song-row.playing .num{color:var(--violet)}
.song-row.playing{background:rgba(183,148,246,.12)}
.song-row.playing .s-title{color:var(--violet)}
.cover{width:52px;height:52px;border-radius:10px;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;color:#fff;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.6)}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.s-meta{min-width:0}
.s-title{display:block;font-size:1rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-sub{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.s-time{color:var(--muted);font-size:.88rem;font-variant-numeric:tabular-nums;padding-right:6px}
.song-row .eq{display:none}
.song-row.playing .eq{display:inline-flex}

/* equalizer bars on playing row */
.eq{gap:2px;height:14px;align-items:flex-end}
.eq span{width:3px;background:var(--violet);border-radius:2px;animation:eq 1s ease-in-out infinite}
.eq span:nth-child(2){animation-delay:.2s}.eq span:nth-child(3){animation-delay:.4s}
.eq.paused span{animation-play-state:paused}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}

/* persistent bottom player bar */
.player-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;
  padding:12px clamp(14px,4vw,28px);
  border-top:1px solid var(--line);background:rgba(13,9,24,.86);backdrop-filter:blur(16px);
  transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.player-bar.show{transform:translateY(0)}
.pb-now{display:flex;align-items:center;gap:12px;min-width:0}
.pb-now .cover{width:46px;height:46px;font-size:1.3rem}
.pb-text{min-width:0}
.pb-title{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-sub{color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-center{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;width:min(46vw,440px)}
.pb-controls{display:flex;align-items:center;gap:18px}
.pb-controls button{appearance:none;border:0;background:transparent;cursor:pointer;color:var(--fg);
  padding:0;display:flex;align-items:center;justify-content:center;transition:color .2s,transform .15s}
.pb-controls button:hover{color:var(--violet)}.pb-controls button:active{transform:scale(.9)}
.pb-play{width:42px;height:42px;border-radius:50%!important;
  background:linear-gradient(90deg,var(--accent),var(--magenta))!important;color:#0a0712!important}
.pb-play:hover{color:#0a0712!important;box-shadow:0 6px 20px -6px rgba(217,111,176,.6)}
.pb-scrub{display:flex;align-items:center;gap:10px;width:100%}
.pb-scrub .t{color:var(--muted);font-size:.72rem;font-variant-numeric:tabular-nums;flex:0 0 auto}
.pb-vol{display:flex;align-items:center;justify-content:flex-end;gap:8px;color:var(--muted)}
input[type=range].rng{appearance:none;-webkit-appearance:none;height:4px;border-radius:99px;cursor:pointer;
  background:linear-gradient(90deg,var(--violet) var(--p,0%),rgba(255,255,255,.16) var(--p,0%))}
input[type=range].rng::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.5);transition:transform .15s}
input[type=range].rng:hover::-webkit-slider-thumb{transform:scale(1.25)}
input[type=range].rng::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff}
.pb-scrub .rng{flex:1}
.pb-vol .rng{width:90px}
@media(max-width:600px){
  .player-bar{grid-template-columns:1fr;gap:8px;padding:10px 14px 12px}
  .pb-vol{display:none}
  .pb-center{width:100%}
  .pb-now{order:-1}
}

/* lyrics button in the bar */
.pb-lyrics{flex:0 0 auto;appearance:none;border:1px solid var(--line);background:transparent;
  color:var(--violet);cursor:pointer;font:inherit;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;padding:7px 13px;border-radius:99px;transition:.2s}
.pb-lyrics:hover{border-color:var(--violet);color:var(--accent-soft)}

/* lyrics overlay panel */
.lyrics-panel{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(6,4,12,.6);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s}
.lyrics-panel.show{opacity:1}
.lyrics-panel[hidden]{display:none}
.lp-inner{width:min(640px,100%);max-height:86vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#160e26,#0a0712);border:1px solid var(--line);
  border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -20px 60px -20px rgba(183,148,246,.4);
  transform:translateY(20px);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.lyrics-panel.show .lp-inner{transform:translateY(0)}
.lp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 24px 12px}
.lp-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.6rem;line-height:1.1;color:var(--fg)}
.lp-sub{color:var(--muted);font-size:.8rem;margin-top:2px}
.lp-close{appearance:none;border:0;background:transparent;color:var(--muted);font-size:1.4rem;
  cursor:pointer;line-height:1;padding:4px 6px;border-radius:8px}
.lp-close:hover{color:var(--fg)}
.lp-tabs{display:inline-flex;gap:4px;margin:0 24px 6px;padding:4px;border-radius:99px;
  border:1px solid var(--line);background:rgba(10,7,18,.5);align-self:flex-start}
.lp-tabs button{appearance:none;border:0;cursor:pointer;font:inherit;padding:7px 18px;border-radius:99px;
  color:var(--muted);background:transparent;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.lp-tabs button[aria-selected="true"]{color:#0a0712;background:linear-gradient(90deg,var(--accent),var(--magenta))}
.lp-tabs button[disabled]{opacity:.35;cursor:not-allowed}
.lp-body{margin:0;padding:8px 24px 28px;overflow-y:auto;white-space:pre-wrap;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:1.32rem;line-height:1.55;color:var(--fg)}
.lp-body.empty{color:var(--muted);font-style:italic;font-size:1.05rem}

/* ===== PLAYLISTS ===== */
#views{display:flex;flex-wrap:wrap;border-radius:18px}
.tab-new{color:var(--accent)!important;border:1px dashed rgba(224,164,74,.5)!important}
.tab-new:hover{border-color:var(--accent)!important;background:rgba(224,164,74,.08)!important}

.pl-tools{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:0 0 14px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,rgba(183,148,246,.06),rgba(255,255,255,.012))}
.pl-tools[hidden]{display:none}
.pl-tools-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.35rem;margin-right:10px;color:var(--fg)}
.pl-tools-btns{display:flex;gap:8px}
.pl-tool-btn{appearance:none;cursor:pointer;font:inherit;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--fg);background:transparent;border:1px solid var(--line);border-radius:99px;padding:8px 16px;transition:.2s}
.pl-tool-btn:hover{border-color:var(--violet);color:var(--violet)}
.pl-tool-btn.danger:hover{border-color:var(--magenta);color:var(--magenta)}
.pl-hint{font-size:.82rem;margin-top:18px}
.empty-pl{list-style:none;padding:26px 14px;color:var(--muted);line-height:1.6;text-align:center}

/* song row gains an action button column */
.song-row{grid-template-columns:24px 52px minmax(0,1fr) auto auto}
.row-act{appearance:none;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--muted);
  width:30px;height:30px;border-radius:50%;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;transition:.18s;margin-left:4px}
.row-act:hover{border-color:var(--violet);color:var(--violet);background:rgba(183,148,246,.12)}
.row-act[data-act="remove"]:hover{border-color:var(--magenta);color:var(--magenta)}

/* add-to-playlist sheet rows */
.pls-body{padding:6px 18px;overflow-y:auto;max-height:46vh}
.pls-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  appearance:none;cursor:pointer;font:inherit;color:var(--fg);text-align:left;
  background:transparent;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:8px 0;font-size:1rem;transition:.18s}
.pls-row:hover{border-color:var(--violet)}
.pls-row.on{border-color:rgba(183,148,246,.55);background:rgba(183,148,246,.1)}
.pls-check{color:var(--violet);font-weight:700}
.pls-empty{color:var(--muted);padding:14px 2px;font-style:italic}
.pls-foot{padding:8px 18px 26px}
.pls-new{display:block;text-align:center;width:100%}

/* name modal */
.name-modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(6,4,12,.7);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s}
.name-modal.show{opacity:1}
.name-modal[hidden]{display:none}
.nm-inner{width:min(420px,100%);background:linear-gradient(180deg,#160e26,#0a0712);
  border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 20px 60px -20px rgba(183,148,246,.4)}
.nm-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;margin-bottom:14px;color:var(--fg)}
.nm-input{width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--line);
  background:rgba(0,0,0,.3);color:var(--fg);font:inherit;font-size:1rem;outline:none}
.nm-input:focus{border-color:var(--violet)}
.nm-btns{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}