:root { 
    --bg-color: #f8f9fa; 
    --card-bg: #ffffff; 
    --text-main: #1a1a1a; 
    --text-sub: #666; 
    --bit-green: rgba(103,156,139,1); /* Matching your Bandsintown widget */
}
body { font-family: 'Poppins', -apple-system, system-ui, sans-serif; background: linear-gradient(135deg, #f5f7f9 0%, #f0f4f8 50%, #f5f7f9 100%); min-height: 100vh; color: var(--text-main); margin: 0; padding: 20px 15px; }
.container { width: 100%; max-width: 600px; margin: 0 auto; }
.dashboard { display: flex; flex-direction: column; }
.sidebar { text-align: center; margin-bottom: 30px; }
.main-content { flex: 1; }

/* Profile Sidebar */
.profile-pic { width: 140px; height: 140px; border-radius: 16px; object-fit: cover; margin: 0 auto 20px; border: 3px solid #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }

.social-icons { display: grid; grid-template-columns: repeat(3, 44px); justify-content: center; gap: 15px; width: max-content; margin: 15px auto 0; }
.social-icons a { color: var(--text-main); font-size: 1.3rem; transition: 0.2s; text-decoration: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.social-icons a:hover { transform: scale(1.1); background: rgba(103,156,139,0.1); color: var(--bit-green); }

h2 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; margin: 35px 0 16px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.08); color: var(--text-sub); }
h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.section-description { font-size: 0.9rem; color: var(--text-sub); margin: -8px 0 16px 0; line-height: 1.5; }

.featured-event-card {
    padding: 0;
    display: none;
    overflow: hidden;
    border-left: none;
}
.featured-event-media {
    width: 100%;
    display: block;
    aspect-ratio: 1200 / 628;
    object-fit: cover;
    background: #e9ecef;
}
.featured-event-row {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    position: relative;
    padding: 16px 106px 16px 16px;
}
.next-show-title { margin: 35px 0 10px; font-size: 1.4rem; letter-spacing: 0.4px; color: var(--text-main); border-top: none; padding-top: 0; text-transform: none; }

.link-card, .release-card, .event-card { background: var(--card-bg); border-radius: 12px; margin-bottom: 12px; display: flex; align-items: center; text-decoration: none; color: var(--text-main); box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: transform 0.2s, background 0.2s, box-shadow 0.2s; }
.link-card { padding: 16px; justify-content: space-between; font-weight: 500; }
.release-card { padding: 10px; gap: 12px; font-weight: 600; text-align: left; justify-content: space-between; }
.link-card:hover, .release-card:hover { transform: scale(1.01); background: #fdfdfd; }

/* Official Website Card */
.official-website-card { background: linear-gradient(135deg, var(--bit-green), rgba(103,156,139,0.8)); color: white; border-radius: 14px; padding: 24px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; text-decoration: none; box-shadow: 0 6px 20px rgba(103,156,139,0.3); transition: 0.2s; }
.official-website-card span { font-size: 1.1rem; font-weight: 600; }
.official-website-card i { font-size: 1.8rem; opacity: 0.8; }
.official-website-card:hover { transform: scale(1.02); box-shadow: 0 8px 25px rgba(103,156,139,0.4); }
.release-art { width: 55px; height: 55px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.release-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.release-title { font-size: 1rem; line-height: 1.2; }
.release-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.release-action {
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-main);
    white-space: nowrap;
    transition: 0.2s;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 38px;
    min-height: 32px;
}
.release-action:hover { border-color: var(--bit-green); color: var(--bit-green); }
.release-action.spotify { background: #1DB954; border-color: #1DB954; color: #fff; }
.release-action.spotify:hover { background: #18a34a; border-color: #18a34a; color: #fff; }
.release-action.apple { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.release-action.apple:hover { background: #000; border-color: #000; color: #fff; }
.release-action.info { border-color: rgba(103,156,139,0.45); color: var(--bit-green); padding: 6px; }
.release-action.info:hover { border-color: var(--bit-green); background: rgba(103,156,139,0.08); color: var(--bit-green); }
.release-action-label { display: inline; }
.release-action.info .release-action-label { display: none; }

.playlists-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.playlists-grid .link-card { margin-bottom: 0; }

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; margin-bottom: 15px; background: #000; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.video-container.video-container-portrait { padding-bottom: 177.78%; }

/* Event Cards */
.event-card { display: grid; grid-template-columns: 50px minmax(0, 1fr); padding: 16px 106px 16px 16px; gap: 16px; align-items: center; position: relative; border-left: 4px solid var(--bit-green); }
.event-card:hover { transform: translateY(-2px); background: #fdfdfd; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.event-date-container { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; text-align: center; }
.event-date-container .month { font-size: 0.7rem; font-weight: 600; color: var(--bit-green); text-transform: uppercase; }
.event-date-container .day { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.event-details { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.event-venue { font-weight: 600; font-size: 0.95rem; margin: 0; }
.event-title-toggle { display: none; }
.event-location { font-size: 0.85rem; color: var(--text-sub); margin: 4px 0 0 0; }
.event-cta { background: var(--bit-green); color: white; padding: 8px 16px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: 0.2s; width: 74px; display: inline-flex; align-items: center; justify-content: center; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); box-sizing: border-box; }
.event-cta.is-disabled { opacity: 0.5; }
.event-cta:hover { background: rgba(103,156,139,0.9); }
.events-status { text-align: center; padding: 20px; font-size: 0.9rem; }
.events-loading { color: var(--text-sub); }
.events-error { color: #d9534f; }
.events-error-link { color: inherit; text-decoration: underline; }
.skeleton-card { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 12px; padding: 16px; margin-bottom: 12px; height: 80px; }
@keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }


.footer { font-size: 0.7rem; color: #999; margin-top: 40px; padding-bottom: 20px; text-align: center; }

h1 { margin: 10px 0 5px; font-size: 1.3rem; }
.subtitle { color: var(--text-sub); margin-bottom: 20px; font-size: 0.9rem; }
.sidebar-video { margin-top: 20px; }
.spotify-brand { color: #1DB954; }
.section-spaced { margin-top: 30px; }

@media (max-width: 767px) {
    .social-icons { grid-template-columns: repeat(3, 56px); gap: 18px; }
    .social-icons a { width: 56px; height: 56px; font-size: 1.6rem; }
    .release-card { flex-direction: column; align-items: stretch; }
    .release-actions { justify-content: flex-start; }
    .release-action { padding: 6px; }
    .release-action-label { display: none; }
    .event-venue.is-truncated {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }
    .event-details.is-expanded .event-venue.is-truncated {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }
    .event-details.has-expandable-title .event-title-toggle {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        margin-top: 6px;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--bit-green);
        font: inherit;
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
    }
}

/* Responsive Dashboard Layout */
@media (min-width: 768px) {
    .container { max-width: 1000px; }
    .dashboard { flex-direction: row; gap: 40px; align-items: flex-start; }
    .sidebar { 
        flex: 0 0 280px; 
        text-align: center; 
        position: sticky;
        top: 20px;
        margin-bottom: 0;
    }
    .main-content { flex: 1; }
    .profile-pic { width: 160px; height: 160px; }
    h1 { margin: 15px 0 5px; font-size: 1.4rem; }
}