/*
Theme Name:  SongShift AI
Theme URI:   https://songshift.ai
Author:      SongShift AI / SpeakShift
Author URI:  https://speakshift.ai
Description: Official theme for SongShift AI — personalized AI-generated songs. Brand-matched to SpeakShift's design system.
Version:     1.0.0
License:     GPL-2.0+
Text Domain: songshift-ai
Tags:        dark, full-width-template, custom-menu, custom-logo
*/

/* ============================================================
   SONGSHIFT AI — BRAND SYSTEM (matched to SpeakShift)
   Brand analysis: SpeakShift uses dark navy backgrounds,
   cyan-blue gradient accents, clean sans-serif type (Outfit),
   pill buttons, generous spacing, glassmorphism cards.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ─── DESIGN TOKENS ─── */
:root {
  --bg-deep:        #07090f;
  --bg-navy:        #0d1220;
  --bg-card:        #111827;
  --bg-card-hover:  #161f30;
  --bg-light:       #f0f4fa;

  --grad-a:         #00d4ff;
  --grad-b:         #0055ff;
  --gradient:       linear-gradient(135deg, #00d4ff 0%, #0077ff 55%, #0044cc 100%);
  --gradient-soft:  linear-gradient(135deg, rgba(0,212,255,.12) 0%, rgba(0,85,255,.12) 100%);

  --text-1:         #f0f4ff;
  --text-2:         #8da4c4;
  --text-3:         #5a7090;
  --text-dark:      #0d1220;

  --cyan:           #00d4ff;
  --blue:           #0077ff;
  --gold:           #ffd166;
  --green:          #00e5a0;

  --border:         rgba(0,180,255,.14);
  --border-light:   rgba(255,255,255,.07);
  --border-card:    rgba(0,212,255,.11);

  --font-head:      'Outfit', sans-serif;
  --font-body:      'Plus Jakarta Sans', sans-serif;

  --section-xl:     128px;
  --section-lg:     96px;
  --section-md:     64px;

  --radius-sm:      6px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --radius-xl:      32px;
  --radius-pill:    9999px;

  --shadow-card:    0 4px 32px rgba(0,0,0,.45);
  --shadow-glow:    0 0 48px rgba(0,180,255,.18);
  --shadow-btn:     0 4px 24px rgba(0,119,255,.42);
}

/* ─── BASE ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-body);font-size:16px;line-height:1.65;color:var(--text-1);background:var(--bg-deep)}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan);text-decoration:none;transition:color .2s}
a:hover{color:#fff}
ul,ol{list-style:none}
button{cursor:pointer}

/* ─── TYPOGRAPHY ─── */
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);line-height:1.12;font-weight:700;color:var(--text-1)}
h1{font-size:clamp(40px,6vw,80px);font-weight:900;letter-spacing:-2px}
h2{font-size:clamp(28px,4vw,48px);font-weight:800;letter-spacing:-.5px}
h3{font-size:clamp(20px,2.5vw,26px);font-weight:700}
h4{font-size:20px;font-weight:600}
p{margin-bottom:1rem;color:var(--text-2)}
p:last-child{margin-bottom:0}

.text-gradient{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-white{color:#fff!important}

/* ─── LAYOUT ─── */
.container{max-width:1160px;margin-inline:auto;padding-inline:24px}
.container--narrow{max-width:760px;margin-inline:auto;padding-inline:24px}
.section-dark{background:var(--bg-deep);padding:var(--section-xl) 0}
.section-navy{background:var(--bg-navy);padding:var(--section-xl) 0}

.section-label{
  display:inline-block;
  font-family:var(--font-head);
  font-size:12px;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  background:var(--gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:14px
}
.section-head{text-align:center;margin-bottom:72px}
.section-head p{max-width:560px;margin-inline:auto;font-size:18px;margin-top:14px}

/* ─── BUTTONS ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-head);font-weight:700;font-size:15px;
  border-radius:var(--radius-pill);border:none;cursor:pointer;
  transition:transform .2s,box-shadow .2s;text-decoration:none;line-height:1;
  padding:14px 32px
}
.btn-primary{background:var(--gradient);color:#fff;box-shadow:var(--shadow-btn)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 36px rgba(0,119,255,.55);color:#fff}
.btn-secondary{background:transparent;color:var(--cyan);border:1.5px solid rgba(0,212,255,.5)}
.btn-secondary:hover{background:rgba(0,212,255,.07);border-color:var(--cyan);color:#fff;transform:translateY(-2px)}
.btn-lg{padding:17px 44px;font-size:17px}
.btn-xl{padding:19px 52px;font-size:18px}

/* ─── HEADER ─── */
#site-header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  background:rgba(7,9,15,.82);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border-light);
  transition:background .3s,box-shadow .3s
}
#site-header.scrolled{background:rgba(7,9,15,.97);box-shadow:0 2px 20px rgba(0,0,0,.5)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}

.site-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo-mark{
  width:36px;height:36px;
  background:var(--gradient);
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1
}
.logo-wordmark{
  font-family:var(--font-head);
  font-size:21px;font-weight:800;color:#fff;white-space:nowrap
}
.logo-wordmark em{color:var(--cyan);font-style:normal}

.main-nav{display:flex;align-items:center;gap:2px}
.main-nav a{
  font-family:var(--font-head);font-size:14px;font-weight:500;
  color:var(--text-2);padding:8px 15px;border-radius:var(--radius-md);
  transition:color .2s,background .2s
}
.main-nav a:hover,.main-nav .current-menu-item>a{color:#fff;background:rgba(255,255,255,.07)}
.nav-cta{margin-left:12px}
.menu-toggle{display:none;background:none;border:none;padding:8px;flex-direction:column;gap:5px}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--text-1);border-radius:2px;transition:.3s}

/* ─── HERO ─── */
.hero{
  min-height:100vh;display:flex;align-items:center;
  padding:110px 0 80px;position:relative;overflow:hidden;
  background:var(--bg-deep)
}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(0,180,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,180,255,.035) 1px,transparent 1px);
  background-size:52px 52px
}
.hero-glow{
  position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:960px;height:960px;
  background:radial-gradient(circle,rgba(0,100,255,.16) 0%,rgba(0,212,255,.08) 35%,transparent 65%);
  animation:glow-pulse 7s ease-in-out infinite
}
@keyframes glow-pulse{0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.04)}}

.hero-notes{position:absolute;inset:0;pointer-events:none}
.hn{position:absolute;font-size:22px;opacity:0;animation:float-note 14s ease-in-out infinite}
.hn:nth-child(1){top:18%;left:7%;animation-delay:0s}
.hn:nth-child(2){top:58%;left:4%;animation-delay:3s}
.hn:nth-child(3){top:25%;right:7%;animation-delay:5s}
.hn:nth-child(4){top:72%;right:5%;animation-delay:8s}
.hn:nth-child(5){top:82%;left:14%;animation-delay:11s}
@keyframes float-note{0%{opacity:0;transform:translateY(16px) rotate(-8deg)}20%{opacity:.28}80%{opacity:.15}100%{opacity:0;transform:translateY(-64px) rotate(8deg)}}

.hero-inner{position:relative;z-index:2;text-align:center;max-width:860px;margin-inline:auto}

.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,212,255,.09);border:1px solid rgba(0,212,255,.22);
  border-radius:var(--radius-pill);padding:7px 20px;
  font-family:var(--font-head);font-size:13px;font-weight:600;color:var(--cyan);
  margin-bottom:28px;animation:fadey .6s ease both
}
.hero-badge .pulse{width:7px;height:7px;background:var(--cyan);border-radius:50%;animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

.hero h1{letter-spacing:-2px;margin-bottom:22px;animation:fadey .6s .08s ease both}
.hero-sub{font-size:clamp(17px,2.2vw,21px);color:var(--text-2);max-width:580px;margin-inline:auto;margin-bottom:40px;line-height:1.6;animation:fadey .6s .16s ease both}
.hero-ctas{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:56px;animation:fadey .6s .24s ease both}
.hero-proof{display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap;animation:fadey .6s .32s ease both}
.proof-stat .num{font-family:var(--font-head);font-size:28px;font-weight:800;color:var(--cyan);display:block;line-height:1}
.proof-stat .lbl{font-size:12px;color:var(--text-3);margin-top:4px}
.proof-divider{width:1px;height:44px;background:var(--border-light)}
@keyframes fadey{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ─── HOW IT WORKS ─── */
.hiw{background:var(--bg-navy);padding:var(--section-xl) 0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.steps::after{
  content:'';position:absolute;top:32px;
  left:calc(12.5% + 28px);right:calc(12.5% + 28px);height:1px;
  background:linear-gradient(90deg,transparent,var(--border),var(--border),transparent)
}
.step{
  text-align:center;padding:36px 22px;
  background:var(--bg-card);border:1px solid var(--border-card);
  border-radius:var(--radius-lg);transition:transform .25s,box-shadow .25s
}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow-glow)}
.step-n{
  width:56px;height:56px;
  background:var(--gradient);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-size:22px;font-weight:800;color:#fff;
  margin:0 auto 20px;box-shadow:0 0 24px rgba(0,119,255,.4)
}
.step h3{font-size:17px;color:#fff;margin-bottom:8px}
.step p{font-size:14px;color:var(--text-2);margin:0}

/* ─── GENRES ─── */
.genres{background:var(--bg-deep);padding:var(--section-xl) 0}
.genres-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.genre-item{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:26px 12px;
  background:var(--bg-card);border:1px solid var(--border-card);
  border-radius:var(--radius-lg);cursor:pointer;
  transition:all .25s;text-align:center
}
.genre-item:hover{border-color:var(--cyan);background:rgba(0,212,255,.05);transform:translateY(-5px);box-shadow:0 8px 28px rgba(0,212,255,.14)}
.genre-item:hover .g-name{color:var(--cyan)}
.g-emoji{font-size:30px}
.g-name{font-family:var(--font-head);font-size:13px;font-weight:600;color:var(--text-2)}

/* ─── FEATURES ─── */
.features{background:var(--bg-navy);padding:var(--section-xl) 0}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{
  background:var(--bg-card);border:1px solid var(--border-card);
  border-radius:var(--radius-lg);padding:36px 30px;
  transition:transform .25s,box-shadow .25s,border-color .25s
}
.feat:hover{transform:translateY(-6px);box-shadow:var(--shadow-glow);border-color:rgba(0,212,255,.28)}
.feat-icon{
  width:54px;height:54px;
  background:var(--gradient-soft);border:1px solid var(--border);
  border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;margin-bottom:20px
}
.feat h3{font-size:18px;color:#fff;margin-bottom:10px}
.feat p{font-size:14px;color:var(--text-2);line-height:1.7;margin:0}

/* ─── TESTIMONIALS ─── */
.testimonials{background:var(--bg-deep);padding:var(--section-xl) 0}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi{
  background:var(--bg-card);border:1px solid var(--border-card);
  border-radius:var(--radius-lg);padding:32px;
  position:relative;transition:transform .25s,box-shadow .25s
}
.testi:hover{transform:translateY(-4px);box-shadow:var(--shadow-glow)}
.testi::before{content:'"';position:absolute;top:16px;right:22px;font-family:var(--font-head);font-size:72px;font-weight:900;color:var(--cyan);opacity:.12;line-height:1}
.testi-stars{display:flex;gap:3px;margin-bottom:14px;font-size:15px;color:var(--gold)}
.testi-text{font-size:15px;line-height:1.7;color:var(--text-2);margin-bottom:22px}
.testi-author{display:flex;align-items:center;gap:12px}
.testi-av{
  width:44px;height:44px;border-radius:50%;
  background:var(--gradient);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:700;color:#fff;font-size:16px;flex-shrink:0
}
.testi-name{font-family:var(--font-head);font-weight:600;color:#fff;font-size:14px}
.testi-role{font-size:12px;color:var(--text-3)}

/* ─── CTA BAND ─── */
.cta-band{background:var(--bg-navy);padding:var(--section-lg) 0}
.cta-box{
  background:linear-gradient(135deg,rgba(0,119,255,.14) 0%,rgba(0,212,255,.09) 100%);
  border:1px solid var(--border);border-radius:var(--radius-xl);
  padding:72px 48px;text-align:center;position:relative;overflow:hidden
}
.cta-box::before{content:'';position:absolute;top:-100px;right:-100px;width:320px;height:320px;background:radial-gradient(circle,rgba(0,212,255,.1) 0%,transparent 70%)}
.cta-box::after{content:'';position:absolute;bottom:-80px;left:-80px;width:260px;height:260px;background:radial-gradient(circle,rgba(0,85,255,.1) 0%,transparent 70%)}
.cta-box>*{position:relative;z-index:1}
.cta-box h2{font-size:clamp(28px,4vw,48px);margin-bottom:14px}
.cta-box p{font-size:18px;max-width:500px;margin-inline:auto;margin-bottom:8px}
.cta-price{
  font-family:var(--font-head);font-size:80px;font-weight:900;
  color:#fff;line-height:1;margin:20px 0 4px;display:block
}
.cta-price-sub{font-size:14px;color:var(--text-3);margin-bottom:36px}
.cta-box .btn{margin-inline:auto}

/* ─── FOOTER ─── */
#site-footer{background:#030508;border-top:1px solid var(--border-light);padding:72px 0 32px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand-col .logo-wordmark{font-family:var(--font-head);font-size:22px;font-weight:800;color:#fff;display:block;margin-bottom:14px}
.footer-brand-col .logo-wordmark em{color:var(--cyan);font-style:normal}
.footer-brand-col p{font-size:14px;color:var(--text-3);line-height:1.65;max-width:250px;margin-bottom:20px}
.footer-col h5{font-family:var(--font-head);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-1);margin-bottom:16px}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:14px;color:var(--text-3);transition:color .2s}
.footer-col a:hover{color:var(--cyan)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:28px;border-top:1px solid var(--border-light)}
.footer-bottom p,.footer-bottom a{font-size:13px;color:var(--text-3);margin:0}
.footer-bottom a{color:var(--cyan)}
.sister-link{font-size:13px;color:var(--text-3)}
.sister-link a{color:var(--cyan);font-weight:600}

/* ─── ORDER PAGE ─── */
.order-hero{background:var(--bg-deep);padding:120px 0 48px;text-align:center}
.order-hero h1{margin-bottom:16px}
.order-hero p{font-size:18px;max-width:540px;margin-inline:auto;margin-bottom:24px}
.trust-row{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text-3)}
.trust-item .ti{color:var(--cyan)}
.order-form-section{background:var(--bg-deep);padding:0 0 96px}

/* ─── THANK YOU PAGE ─── */
.ty-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px 24px;background:var(--bg-deep);position:relative;overflow:hidden}
.ty-wrap::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(0,100,255,.13) 0%,transparent 65%)}
.ty-card{background:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--radius-xl);padding:64px 56px;text-align:center;max-width:580px;width:100%;position:relative;z-index:1}
.ty-icon{font-size:72px;margin-bottom:24px;animation:pop .5s cubic-bezier(.34,1.56,.64,1) both;display:block}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.ty-card h1{font-size:clamp(26px,4vw,40px);margin-bottom:14px}
.ty-card>p{font-size:18px;color:var(--text-2);line-height:1.6;margin-bottom:8px}
.ty-steps{display:flex;flex-direction:column;gap:12px;margin:28px 0;text-align:left}
.ty-step{display:flex;align-items:flex-start;gap:14px;background:rgba(0,212,255,.05);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 18px}
.ty-step .si{font-size:20px;flex-shrink:0;margin-top:2px}
.ty-step p{font-size:14px;color:var(--text-2);margin:0}
.ty-step strong{color:#fff}

/* ─── SIMPLE PAGES ─── */
.simple-wrap{background:var(--bg-deep);min-height:100vh;padding:120px 0 80px}
.simple-card{background:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--radius-xl);padding:56px 64px}
.simple-card h1{font-size:clamp(28px,4vw,44px);margin-bottom:8px}
.simple-meta{font-size:14px;color:var(--text-3);margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid var(--border-light)}
.simple-card h2{font-size:22px;color:var(--cyan);margin-top:40px;margin-bottom:12px}
.simple-card p,.simple-card li{font-size:16px;color:var(--text-2);line-height:1.75}
.simple-card ul,.simple-card ol{padding-left:22px;list-style:disc}
.simple-card ul li,.simple-card ol li{margin-bottom:6px}
.simple-card a{color:var(--cyan)}

/* Contact form */
.cf-group{margin-bottom:20px}
.cf-label{display:block;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text-2);margin-bottom:7px}
.cf-input,.cf-textarea,.cf-select{
  width:100%;padding:12px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-card);
  border-radius:var(--radius-md);
  color:var(--text-1);font-family:var(--font-body);font-size:16px;
  transition:border-color .2s,box-shadow .2s;outline:none
}
.cf-input:focus,.cf-textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,212,255,.1)}
.cf-input::placeholder,.cf-textarea::placeholder{color:var(--text-3)}
.cf-textarea{min-height:130px;resize:vertical}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* ─── SCROLL REVEAL ─── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ─── ADMIN BAR ─── */
.admin-bar #site-header{top:32px}
@media screen and (max-width:782px){.admin-bar #site-header{top:46px}}

/* ─── A11Y ─── */
.skip-link{position:absolute;top:-40px;left:16px;padding:8px 16px;background:var(--cyan);color:#000;font-weight:700;border-radius:0 0 8px 8px;z-index:9999;transition:top .2s}
.skip-link:focus{top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* ─── RESPONSIVE ─── */
@media(max-width:1024px){
  .steps{grid-template-columns:repeat(2,1fr)}.steps::after{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .genres-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:768px){
  :root{--section-xl:72px;--section-lg:52px}
  .main-nav,.nav-cta{display:none}
  .menu-toggle{display:flex}
  .features-grid,.testi-grid{grid-template-columns:1fr}
  .genres-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .hero h1{letter-spacing:-1px}
  .cta-box{padding:40px 24px}
  .simple-card{padding:32px 24px}
  .ty-card{padding:40px 24px}
  .footer-bottom{flex-direction:column;text-align:center}
  .cf-row{grid-template-columns:1fr}
}
@media(max-width:520px){
  .genres-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .hero-ctas{flex-direction:column}
  .hero-proof{gap:16px}
  .proof-divider{display:none}
}

/* ─── MOBILE NAV OVERLAY ─── */
.mobile-nav{
  display:none;position:fixed;inset:0;
  background:rgba(7,9,15,.98);z-index:800;
  flex-direction:column;align-items:center;justify-content:center;gap:36px;
  padding:24px
}
.mobile-nav.open{display:flex}
.mobile-nav a{font-family:var(--font-head);font-size:26px;font-weight:700;color:var(--text-2);transition:color .2s}
.mobile-nav a:hover{color:var(--cyan)}
.mobile-close{position:absolute;top:20px;right:20px;background:none;border:none;color:var(--text-2);font-size:32px;cursor:pointer}

/* ─── SONGSHIFT PLUGIN FORM OVERRIDES (dark theme integration) ─── */
.songshift-wrapper{
  --ss-primary:var(--bg-deep);
  --ss-accent:var(--blue);
  --ss-accent-2:var(--cyan);
  --ss-surface:var(--bg-card);
  --ss-bg:var(--bg-navy);
  --ss-border:var(--border-card);
  --ss-text:var(--text-1);
  --ss-muted:var(--text-3);
  --ss-radius:12px;
  --ss-shadow:0 8px 48px rgba(0,0,0,.45),0 0 32px rgba(0,100,255,.12)
}
.songshift-form-container{background:var(--bg-card)!important;border:1px solid var(--border-card)!important}
.songshift-form-header{background:linear-gradient(135deg,#0a1020 0%,#0d1830 100%)!important;border-bottom:1px solid var(--border-card)!important}
.songshift-title{font-family:var(--font-head)!important;font-weight:800!important}
.songshift-field input,.songshift-field textarea,.songshift-field select{background:rgba(255,255,255,.04)!important;border-color:var(--border-card)!important;color:var(--text-1)!important;font-family:var(--font-body)!important}
.songshift-field input:focus,.songshift-field textarea:focus,.songshift-field select:focus{border-color:var(--cyan)!important;box-shadow:0 0 0 3px rgba(0,212,255,.11)!important;background:rgba(255,255,255,.06)!important}
.songshift-field label{color:var(--text-2)!important;font-family:var(--font-head)!important;letter-spacing:.5px}
.songshift-btn{background:var(--gradient)!important;border-radius:var(--radius-pill)!important;font-family:var(--font-head)!important;font-weight:700!important;box-shadow:var(--shadow-btn)!important;font-size:17px!important}
.songshift-hint{color:var(--text-3)!important}
.songshift-secure-note{color:var(--text-3)!important}

/* ── Account nav link ── */
.nav-account-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s, background .2s;
    flex-shrink: 0;
}
.nav-account-link:hover {
    color: var(--color-white);
    background: rgba(255,255,255,0.06);
}
@media (max-width: 900px) {
    .nav-account-link { display: none; }
}

/* ════════════════════════════════════════════
   HEADER OVERLAP FIX
   Fixed header is 70px tall. All non-hero pages
   need padding-top on #main-content. The hero
   already has padding:110px 0 80px so it's fine.
   simple-page, simple-wrap, order-hero and the
   account template all get a safe top push.
════════════════════════════════════════════ */

/* ── Header height token ── */
:root { --header-h: 64px; }
.admin-bar :root { --header-h: 96px; }
@media screen and (max-width: 782px) {
    .admin-bar :root { --header-h: 110px; }
}

/* NOTE: logo sizing, #main-content offset, and select fixes are in
   design-system.css which loads after this file and wins the cascade. */