/* =============================================
   BODIES IN CONCERT - Main Stylesheet
   Dark, sensual, elegant. Adult aesthetic.
   ============================================= */
:root {
    --bg: #0a0110;
    --bg-soft: #12061e;
    --text: #f9f2ff;
    --text-muted: #b9a6cf;
    --accent: #ff3d9e;
    --accent-soft: #ff8ad0;
    --danger: #ff5a6e;
    --neon: #ff4db8;
    --gold: #ffd1ec;
    --panel: #140624;
    --line: rgba(255, 61, 158, 0.22);
    --glow: 0 0 6px rgba(255,61,158,0.5), 0 0 18px rgba(255,61,158,0.3), 0 0 36px rgba(168,85,247,0.22);
    --glow-soft: 0 0 6px rgba(255,61,158,0.35), 0 0 14px rgba(255,61,158,0.18);
    --font-serif: 'Georgia', 'Times New Roman', serif;
    --font-sans: 'Helvetica Neue', Arial, sans-serif;
    --max-width: 720px;
}
html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    line-height: 1.65;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; }
/* ---------- Neon glow accents ---------- */
.hero__title { text-shadow: var(--glow); }
.hero__kick { text-shadow: 0 0 8px rgba(255,61,158,0.35); }
.hero__tagline { text-shadow: 0 0 10px rgba(168,85,247,0.25); }
.teaser__num { text-shadow: var(--glow-soft); }
.btn--primary { box-shadow: inset 0 0 0 1px transparent, 0 0 14px rgba(255,61,158,0.12); }
.btn--primary:hover { box-shadow: 0 0 22px rgba(255,61,158,0.5), 0 0 45px rgba(168,85,247,0.25); }
.btn--ghost:hover { text-shadow: 0 0 8px rgba(255,61,158,0.5); }
.hero__intro em { text-shadow: var(--glow-soft); }
.site-foot { border-color: rgba(255,61,158,0.22); }
/* ---------- Landing ---------- */
.landing {
    position: relative;
    min-height: 100vh;
}
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    background:
        radial-gradient(ellipse at 70% 20%, rgba(255,61,158,0.16), transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(168,85,247,0.14), transparent 55%),
        radial-gradient(ellipse at 50% 50%, rgba(255,77,184,0.06), transparent 65%),
        var(--bg);
    text-align: center;
    animation: ambient 12s ease-in-out infinite;
}
@keyframes ambient {
    0%, 100% { filter: brightness(0.96); }
    50% { filter: brightness(1.06); }
}
.hero__content { max-width: 720px; margin: 0 auto; }
.hero__kick {
    font-size: 0.9rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}
.hero__title {
    font-family: var(--font-serif);
    font-size: clamp(2.8rem, 8vw, 5rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--text);
    margin-bottom: 1rem;
    text-shadow: 0 0 40px rgba(255,61,158,0.2);
}
.hero__tagline {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    font-style: italic;
}
.hero__teasers {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 2.5rem;
    font-family: var(--font-serif);
}
.teaser {
    font-size: 1.05rem;
    color: var(--text);
}
.teaser em { color: var(--text-muted); font-size: 0.9rem; }
.teaser__num {
    display: inline-block;
    color: var(--accent);
    margin-right: 0.6rem;
    font-style: italic;
}
/* ---------- Intro section on landing ---------- */
.hero__intro {
    max-width: 640px;
    margin: 0 auto 2.5rem;
    text-align: center;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text);
    padding: 1.8rem 1rem;
}
.hero__intro p { margin-bottom: 1.2rem; }
.hero__intro p:last-child { margin-bottom: 0; }
.hero__intro em { color: var(--accent-soft); font-style: italic; }
/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 0.85rem 2.2rem;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--accent);
    border-radius: 40px;
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn--primary {
    background: transparent;
    color: var(--accent-soft);
}
.btn--primary:hover {
    background: var(--accent);
    color: var(--bg);
    box-shadow: 0 0 25px rgba(255,61,158,0.4);
}
.btn--ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--line);
}
.btn--ghost:hover { color: var(--accent-soft); border-color: var(--accent); }
.btn--block { display: block; width: 100%; text-align: center; }
.hero__note { margin-top: 1.6rem; font-size: 0.85rem; color: var(--text-muted); }
/* ---------- Login ---------- */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; }
.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--bg-soft);
    border: 1px solid rgba(255,61,158,.35);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 0 22px rgba(255,61,158,.16), 0 0 50px rgba(168,85,247,.12), 0 20px 60px rgba(0,0,0,0.5);
    animation: login-card-neon 5s ease-in-out infinite;
}
@keyframes login-card-neon {
    0%,100% { box-shadow: 0 0 16px rgba(255,61,158,.14), 0 0 44px rgba(168,85,247,.10), 0 20px 60px rgba(0,0,0,0.5); }
    50% { box-shadow: 0 0 34px rgba(255,61,158,.34), 0 0 75px rgba(168,85,247,.24), 0 20px 60px rgba(0,0,0,0.5); }
}
.login-card h2 { font-family: var(--font-serif); font-weight: 400; font-size: 1.9rem; margin-bottom: 0.5rem; color: #fff; text-shadow: 0 0 8px rgba(255,77,184,.85), 0 0 22px rgba(255,61,158,.6), 0 0 45px rgba(168,85,247,.4); }
.login-card__sub { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.6rem; }
.login-card__foot { margin-top: 1.4rem; font-size: 0.8rem; color: var(--text-muted); }
.login-form { display: flex; flex-direction: column; gap: 1rem; }
.login-form input {
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 1rem;
    text-align: center;
    letter-spacing: 0.2em;
    outline: none;
    transition: border-color 0.2s;
}
.login-form input:focus { border-color: var(--accent); }
.alert { padding: 0.8rem 1rem; border-radius: 8px; margin-bottom: 1.2rem; font-size: 0.9rem; }
.alert--error { background: rgba(255,90,110,0.1); color: var(--danger); border: 1px solid rgba(255,90,110,0.3); }
/* ---------- Sidebar ---------- */
.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 240px;
    height: 100vh;
    background: var(--bg-soft);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    z-index: 10;
}
.sidebar__brand {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    color: var(--text);
    text-decoration: none;
    margin-bottom: 2.5rem;
}
.sidebar__nav { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
.sidebar__link {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    text-decoration: none;
    color: var(--text-muted);
    border-radius: 8px;
    transition: all 0.2s;
}
.sidebar__link:hover { color: var(--text); background: rgba(255,61,158,0.06); }
.sidebar__link.is-active { color: var(--accent-soft); background: rgba(255,61,158,0.1); }
.sidebar__num { font-family: var(--font-serif); font-style: italic; color: var(--accent); }
.sidebar__logout { margin-top: 1rem; text-decoration: none; color: var(--text-muted); font-size: 0.8rem; }
.sidebar__logout:hover { color: var(--danger); }
/* ---------- Landing footer ---------- */
.site-foot {
    width: 100%;
    padding: 1.4rem 1rem 1.2rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    border-top: 1px solid rgba(255,61,158,.25);
    text-shadow: 0 0 10px rgba(255,61,158,.12), 0 0 24px rgba(168,85,247,.08);
    background: linear-gradient(180deg, rgba(255,61,158,.06), rgba(18,6,30,.55) 45%, var(--bg));
}
.ftag { color: #ffc4e4 !important; text-shadow: 0 0 6px rgba(255,77,184,.55), 0 0 18px rgba(255,61,158,.35), 0 0 34px rgba(168,85,247,.2); }