:root{
    --bg:#0f0f12;
    --fg: #b8b9bb;
    --muted:#a7adbb;
    --accent: #0540cc;
    --accent-2:#22b07d;
    --surface:#1a1d24;
    --surface-2:#242936;
    --border:#2e3445;
    --danger:#e74c3c;
    --warning:#f39c12;
    --success:#27ae60;
    --card-bg: #11332d;
    --shadow: 0 6px 18px rgba(20,20,20,0.08);
    --radius:10px;
    --gap:12px;
}
*{box-sizing: border-box;}
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
body{
    font-family: 'Open Sans Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,sans-serif;
    background: var(--bg); color: var(--fg); margin: 0;
}
a{color:inherit; text-decoration:none;}
img{display:block}
.center-text{text-align: center;}
.right-text{text-align: right;}
header.navbar{
    position:sticky; top:0; z-index:1000;
    background:var(--surface);
    border-bottom:1px solid var(--border);
}
.nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    max-width:1400px; margin:0 auto; padding:8px 16px; gap:16px;
}
.nav-left, .nav-right{ display:flex; align-items:center; gap:12px; }
.topic-pill { display: flex; align-items: center; gap: 12px; position: relative; }
.topic-title{ font-size:20px; font-weight:700; text-transform: capitalize; }
.select, .input, .btn{
    background:var(--surface-2); color:var(--fg);
    border:1px solid var(--border); border-radius:10px;
    padding:10px 12px; font-size:14px;
}
.input::placeholder{ color:var(--muted); }
.btn{ cursor:pointer; transition: .2s background; }
.btn:hover{ background:#2d3343; }
.btn-accent{ background:var(--accent); border-color:transparent; }
.btn-accent:hover{ filter:brightness(1.1); }
.nav-item{ position:relative; }
.dropdown{
    position:absolute; top:calc(100% + 8px); min-width:220px;
    background:var(--surface-2); border:1px solid var(--border);
    border-radius:12px; padding:8px;
    box-shadow:0 12px 30px rgba(0,0,0,0.35);
    z-index: 2000;
    visibility: hidden; opacity: 0; transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.nav-item[data-open="true"] > .dropdown{
    visibility: visible; opacity: 1; transform: translateY(0);
}
.dropdown a{ display:block; padding:10px 12px; border-radius:8px; color:var(--fg); }
.dropdown a:hover{ background:#2d3343; }
.nav-left .nav-item .dropdown{ left:0; }
.nav-right .nav-item .dropdown{ right:0; }
/* Topic dropdown: open directly UNDER the engaged topic icon/button */
.topic-nav.nav-right .nav-item .dropdown,
.topic-nav .nav-item .topic-dropdown {
    left: 0;
    right: auto;
    top: calc(100% + 8px);
    margin-left: 0;
    min-width: 300px;
    max-width: min(360px, calc(100vw - 24px));
}

/* Topic dropdown rows: icon and text on same line */
.topic-nav .topic-dropdown a,
.topic-nav .dropdown.topic-title a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    font-size: 0.95rem;
    line-height: 1.1;
    white-space: nowrap;
}

/* Larger icons inside the topic dropdown */
.topic-nav .topic-dropdown a img,
.topic-nav .dropdown.topic-title a img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: contain;
}

/* Keep engaged topic icon/text on one row */
.topic-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    white-space: nowrap;
}
.region-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.region-btn {
    padding: 8px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.region-btn:hover { background: #2d3343; border-color: var(--accent); }
.region-btn.active { background: var(--accent-2); border-color: transparent; color: #fff; font-weight: 600; }
.region-btn.reset { background: var(--accent); border-color: transparent; color: #fff; }
.region-btn.reset:hover { filter: brightness(1.1); }
.back-to-feed-btn {
    padding: 10px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none; border-radius: 10px; color: #fff;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: all 0.2s; display: flex; align-items: center; gap: 6px;
}
.back-to-feed-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); }
.category-button{ display:flex; align-items:center; gap:4px; cursor:pointer; background:var(--surface); border: none; }
.cat-icon{ width:56px; height:56px; border-radius:50%; background:var(--surface-2); display:grid; place-items:center; padding:0; }
.cat-icon img{ width:60px; height:60px; }
.topic-title { font-size: 1.5rem; font-weight: 600; color: #ffffff; line-height: 1; }
.topic-display { display: flex; align-items: center; gap: 10px; }
.member-portrait{ width:56px; height:56px; border-radius:50%; border:2px solid var(--border); object-fit:cover; cursor:pointer; }
.portrait-sm{ width:32px; height:32px; border-radius:50%; border:1px solid var(--border); object-fit:cover; display:inline-block; vertical-align:middle; margin-right:6px; }
.container {
    width: 100%;
    max-width: min(1400px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 16px;
}

.three-columns {
    display: grid;
    gap: 16px;

    /*
      Critical fix:
      minmax(0, ...) prevents long event cards from forcing
      the left column wider than the viewport.
    */
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.5fr)
        minmax(0, 0.9fr);

    align-items: start;
    width: 100%;
    max-width: 100%;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    min-width: 0;
    max-width: 100%;
}

.panel h2 {
    margin: 0 0 10px 0;
    font-size: 18px;
    overflow-wrap: anywhere;
}
.meta{ color:var(--muted); font-size:13px; }
.hidden{ display:none; }
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); z-index: 9999; visibility:hidden; opacity:0; transition:opacity .3s ease, visibility .3s ease; }
.modal[aria-hidden="false"]{ visibility:visible; opacity:1; }
.modal-content{ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; flex-direction: column; padding:18px; width:100%; max-width:720px; border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,0.5); max-height: calc(100vh - 3rem); position:relative; margin: 1.5rem; }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem; }
.close-modal{ position:absolute; right:10px; top:8px; border:0; background:transparent; font-size:2em; color: #A8D8FA; cursor: pointer; line-height: 1; padding: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.close-modal:hover { color: #ffffff; }
.btn-primary{ width: 100%; background:var(--accent); color:#fff; border:0; margin: 8px 0 12px 0; padding:8px 14px; border-radius:8px; cursor:pointer; }
.btn-primary:hover{ background:#2d3343;}
.btn-secondary{ background:#eee; border:0; padding:8px 12px; border-radius:8px; cursor:pointer; }
.event-card{ background:var(--card-bg); border-radius:10px; box-shadow:var(--shadow); padding:12px; margin-bottom:12px; display:grid; gap:12px; align-items:flex-start; }
.thumb img{width:100%;object-fit:cover;border-radius:8px}
.event-body{flex:1}
.counter{ color: #A8D8FA; font-size: 1em; margin-top: -2px; margin-bottom: -5px; font-weight: 700; }
.event-body h3{margin:0 0 6px}
.media{margin-top:8px}
.media.embed iframe{ width:100%; height:320px; border-radius:8px; border: 2px solid #A8D8FA; }
.rating-wrap { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.rating-dots { display: flex; gap: 6px; align-items: center; }
.dot { width: 18px; height: 18px; border-radius: 50%; background: #e6e6e6; display: inline-block; transition: background 0.2s ease, transform 0.2s ease; cursor: default; }
.dot.filled { background: linear-gradient(90deg, #21f5fc, #216efc); box-shadow: 0 2px 4px rgba(33, 110, 252, 0.3); }
.dot:hover { transform: scale(1.1); }
.rating-info { display: flex; align-items: center; gap: 8px; }
.rating-info small { color: var(--muted, #a7adbb); font-size: 12px; }
.avg-value, .cnt-value { font-weight: 600; color: var(--fg, #b8b9bb); }
.rate-action { display: flex; align-items: center; gap: 8px; }
.btn-rate { background: transparent; border: 1px solid var(--border, #2e3445); padding: 6px 12px; border-radius: 6px; cursor: pointer; color: #0FB3F3; font-size: 13px; font-weight: 600; transition: all 0.2s ease; }
.btn-rate:hover { background: rgba(15, 179, 243, 0.1); border-color: #0FB3F3; transform: translateY(-1px); }
.rate-slider { display: none; align-items: center; gap: 8px; padding: 8px; background: var(--surface-2, #242936); border-radius: 6px; border: 1px solid var(--border, #2e3445); }
.rate-slider.visible { display: flex !important; }
.rate-slider input[type="range"] { width: 160px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #e6e6e6 0%, #21f5fc 100%); outline: none; cursor: pointer; }
.btn-submit-rate { padding: 6px 12px; background: var(--accent-2, #22b07d); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.2s ease; }
.btn-submit-rate:hover { background: #1a8f5f; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(34, 176, 125, 0.3); }
.form-inputbx { width: 100%; height: 38px; margin: 3px auto 1px auto; padding: 3px 12px 3px 28px; background-color: #ffffff; border-radius: 6px; font-weight: 600; font-size: 1.2em; color: #000000; text-align: left; border: 1px solid #ccc; }
.form-inputbx.txt {padding-top: 9px;}
/* Secure drag/drop uploader zones: album creation + album feed post form. */
.album-drag-container,
.main-drag-container {
    width: 100%;
    margin: 12px 0;
}

.album-drag-container [data-secure-media-uploader],
.main-drag-container [data-secure-media-uploader] {
    display: block;
    width: 100%;
}

#drop-zone,
#album-drop-zone,
.album-drag-container [data-secure-drop-zone],
.main-drag-container [data-secure-drop-zone],
.album-drag-container .drop-zone,
.main-drag-container .drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 132px;
    box-sizing: border-box;
    border: 3px dashed #bdc3c7;
    border-radius: 12px;
    padding: 32px 24px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    background: rgba(255,255,255,0.03);
    color: #95a5a6;
    text-align: center;
}

#drop-zone.highlight,
#album-drop-zone.highlight,
#drop-zone:hover,
#album-drop-zone:hover,
.album-drag-container [data-secure-drop-zone].highlight,
.album-drag-container [data-secure-drop-zone].dragover,
.album-drag-container [data-secure-drop-zone].is-dragover,
.album-drag-container [data-secure-drop-zone]:hover,
.main-drag-container [data-secure-drop-zone].highlight,
.main-drag-container [data-secure-drop-zone].dragover,
.main-drag-container [data-secure-drop-zone].is-dragover,
.main-drag-container [data-secure-drop-zone]:hover,
.album-drag-container .drop-zone.highlight,
.album-drag-container .drop-zone:hover,
.main-drag-container .drop-zone.highlight,
.main-drag-container .drop-zone:hover {
    border-color: #3498db;
    background-color: rgba(52, 152, 219, 0.10);
    box-shadow: inset 0 0 0 1px rgba(52, 152, 219, 0.18);
}

.drop-zone-text,
.album-drag-container [data-secure-drop-zone] p,
.album-drag-container [data-secure-drop-zone] small,
.main-drag-container [data-secure-drop-zone] p,
.main-drag-container [data-secure-drop-zone] small {
    pointer-events: none;
}

.drop-zone-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #95a5a6;
    text-align: center;
}

.drop-zone-text .icon { font-size: 48px; margin-bottom: 10px; }

.album-drag-container [data-secure-drop-zone] p,
.main-drag-container [data-secure-drop-zone] p {
    margin: 0 0 6px;
    font-size: 0.95em;
    font-weight: 700;
}

.album-drag-container [data-secure-drop-zone] small,
.main-drag-container [data-secure-drop-zone] small {
    display: block;
    max-width: 640px;
    color: var(--muted, #a7adbb);
    font-size: 0.82em;
    line-height: 1.35;
}

#upload-previews,
#secure-album-upload-previews,
#secure-main-upload-previews,
.album-drag-container [data-secure-upload-previews],
.main-drag-container [data-secure-upload-previews] {
    margin-top: 12px;
    width: 100%;
}
.video-link-group { position: relative; width: 100%; z-index: 50; margin-top: 12px; }
.video-link-selector { background: var(--surface-2); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-size: 1em; width: 100%; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.video-link-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 4px; box-shadow: 0 8px 20px rgba(0,0,0,0.3); z-index: 150; display: none; }
.video-link-dropdown.active { display: block; }
.video-link-option { padding: 10px 12px; border-radius: 6px; cursor: pointer; transition: background 0.2s; }
.video-link-option:hover { background: #2d3343; }

/* ============================================================
   ALBUM CREATOR MANAGEMENT BUTTON STYLES
   ============================================================ */
.creator-manage-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #fff;
}

/* Album type specific colors */
.creator-manage-btn.album-public {
    background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}
.creator-manage-btn.album-public:hover {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(39, 174, 96, 0.4);
}

.creator-manage-btn.album-private {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    box-shadow: 0 4px 12px rgba(230, 126, 34, 0.3);
}
.creator-manage-btn.album-private:hover {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(230, 126, 34, 0.4);
}

.creator-manage-btn.album-subscription {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.3);
}
.creator-manage-btn.album-subscription:hover {
    background: linear-gradient(135deg, #a569bd 0%, #9b59b6 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(155, 89, 182, 0.4);
}

/* Button with messages - pulsing effect */
.creator-manage-btn.has-messages {
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 4px 12px currentColor; }
    50% { box-shadow: 0 4px 20px currentColor, 0 0 30px currentColor; }
}

.creator-manage-btn.album-public.has-messages {
    animation: pulse-public 2s infinite;
}
@keyframes pulse-public {
    0%, 100% { box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4); }
    50% { box-shadow: 0 4px 20px rgba(39, 174, 96, 0.6), 0 0 30px rgba(39, 174, 96, 0.3); }
}

.creator-manage-btn.album-private.has-messages {
    animation: pulse-private 2s infinite;
}
@keyframes pulse-private {
    0%, 100% { box-shadow: 0 4px 12px rgba(230, 126, 34, 0.4); }
    50% { box-shadow: 0 4px 20px rgba(230, 126, 34, 0.6), 0 0 30px rgba(230, 126, 34, 0.3); }
}

.creator-manage-btn.album-subscription.has-messages {
    animation: pulse-subscription 2s infinite;
}
@keyframes pulse-subscription {
    0%, 100% { box-shadow: 0 4px 12px rgba(155, 89, 182, 0.4); }
    50% { box-shadow: 0 4px 20px rgba(155, 89, 182, 0.6), 0 0 30px rgba(155, 89, 182, 0.3); }
}

.creator-btn-icon {
    font-size: 18px;
    line-height: 1;
}

.creator-btn-label {
    white-space: nowrap;
}

.creator-msg-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: #e74c3c;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--surface);
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
}

.creator-msg-badge.no-messages {
    display: none;
}

@media (max-width: 900px) {
    .topic-title{ display:none; }
    .three-columns{ grid-template-columns:1fr; }
    .creator-btn-label { display: none; }
    .creator-manage-btn { padding: 10px 12px; }
}
@media (max-width:720px){
    .thumb img{width:96px;height:70px}
    .media.embed iframe{height:220px}
    .modal-content { margin: 0.5rem; max-height: calc(100vh - 1rem); }
    .region-btn { font-size: 11px; padding: 6px 10px; }
}

/* ============================================
   EVENT SOURCE INFO & ACTION BUTTONS
   ============================================ */

.event-source-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
    padding: 8px 12px;
    background: var(--surface-2, #1a1a2e);
    border-radius: 6px;
    font-size: 13px;
}

.event-source-info .source-label {
    color: var(--muted, #888);
    font-weight: 500;
}

.event-source-info .source-album-name {
    color: var(--text-primary, #fff);
    font-weight: 600;
}

.event-source-info .source-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.source-badge.badge-public {
    background: rgba(39, 174, 96, 0.2);
    color: #27ae60;
    border: 1px solid rgba(39, 174, 96, 0.3);
}

.source-badge.badge-private {
    background: rgba(230, 126, 34, 0.2);
    color: #e67e22;
    border: 1px solid rgba(230, 126, 34, 0.3);
}

.source-badge.badge-subscription {
    background: rgba(155, 89, 182, 0.2);
    color: #9b59b6;
    border: 1px solid rgba(155, 89, 182, 0.3);
}

/* Event Action Buttons */
.event-action-wrapper {
    margin: 12px 0;
    text-align: center;
}

.btn-event {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

/* Public Album Button */
.btn-event-public {
    background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3);
}

.btn-event-public:hover {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}

/* Private Album - Join Button */
.btn-event-join-private {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(230, 126, 34, 0.3);
}

.btn-event-join-private:hover {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 126, 34, 0.4);
}

/* Private Album - Already Member Button */
.btn-event-private-member {
    background: linear-gradient(135deg, #d35400 0%, #a04000 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(211, 84, 0, 0.3);
}

.btn-event-private-member:hover {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(211, 84, 0, 0.4);
}

/* Subscription Album - Subscribe Button */
.btn-event-subscribe {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(155, 89, 182, 0.3);
}

.btn-event-subscribe:hover {
    background: linear-gradient(135deg, #a569bd 0%, #9b59b6 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.4);
}

/* Subscription Album - Already Subscribed Button */
.btn-event-subscribed {
    background: linear-gradient(135deg, #8e44ad 0%, #6c3483 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(142, 68, 173, 0.3);
}

.btn-event-subscribed:hover {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(142, 68, 173, 0.4);
}

/* Pending Status (not clickable) */
.btn-event-pending {
    background: linear-gradient(135deg, #7f8c8d 0%, #606060 100%);
    color: #bdc3c7;
    cursor: default;
    opacity: 0.85;
}

.btn-event-pending:hover {
    transform: none;
    box-shadow: none;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .event-source-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .btn-event {
        width: 100%;
        padding: 12px;
    }
}

.mbz-feed-slider {
    position: relative;
    width: 100%;
    margin: 12px 0;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(168, 216, 250, 0.35);
}

.mbz-feed-slides {
    position: relative;
    width: 100%;
}

.mbz-feed-slide {
    display: none;
    width: 100%;
    min-height: 240px;
    max-height: 460px;
    align-items: center;
    justify-content: center;
    background: #000;
}

.mbz-feed-slide.active {
    display: flex;
}

.mbz-feed-slide img,
.mbz-feed-slide video {
    width: 100%;
    max-height: 460px;
    object-fit: contain;
    display: block;
}

.mbz-audio-slide {
    width: 100%;
    min-height: 220px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #111827, #1f2937);
}

.mbz-audio-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 34px;
    background: rgba(255,255,255,0.12);
}

.mbz-audio-slide audio {
    width: min(520px, 100%);
}

.mbz-slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.mbz-slide-btn.prev {
    left: 10px;
}

.mbz-slide-btn.next {
    right: 10px;
}

.mbz-slide-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 7px;
    pointer-events: none;
}

.mbz-slide-dot {
    width: 7px;
    height: 7px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.55);
    padding: 0;
    pointer-events: auto;
    cursor: pointer;
}

.mbz-slide-dot.active {
    background: #fff;
    transform: scale(1.2);
}

.mbz-feed-slide {
    display: none !important;
}

.mbz-feed-slide.active {
    display: flex !important;
}


/* ============================================================
   FIX: Prevent album events column from expanding layout
   Applies to albums.php / album.php
   ============================================================ */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* If you added class="events-panel" in PHP */
.events-panel {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* Fallback if you did not add class="events-panel" */
.three-columns > .panel:first-child {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.feed-panel,
.side-panel,
.three-columns > .panel {
    min-width: 0;
    max-width: 100%;
}

.event-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    display: block;
}

.event-body {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

.event-body h3,
.event-body h5,
.event-body .meta,
.event-source-info,
.source-album-name {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

.event-card img,
.event-card video,
.event-card audio,
.event-card iframe,
.event-card .media,
.event-card .media.embed,
.event-card .mbz-feed-slider,
.event-card .mbz-feed-slides,
.event-card .mbz-feed-slide {
    max-width: 100%;
    min-width: 0;
}

.event-card iframe {
    width: 100%;
}

.event-card .mbz-feed-slider {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.event-card .mbz-feed-slide {
    min-height: 180px;
    max-height: 280px;
}

.event-card .mbz-feed-slide img,
.event-card .mbz-feed-slide video {
    width: 100%;
    max-height: 280px;
    object-fit: contain;
}

.event-card audio,
.event-card .mbz-audio-slide audio {
    width: 100%;
    max-width: 100%;
}

/* Album event source/action button wrap */
.event-source-info {
    min-width: 0;
}

.source-album-name {
    min-width: 0;
}

.btn-event,
.event-action-wrapper,
.rating-wrap,
.rate-action,
.rate-slider {
    max-width: 100%;
    min-width: 0;
}

.btn-event {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

.rating-wrap,
.rate-action,
.rate-slider {
    flex-wrap: wrap;
}

.rate-slider input[type="range"] {
    max-width: 100%;
}

@media (max-width: 1100px) {
    .three-columns {
        grid-template-columns:
            minmax(0, 0.85fr)
            minmax(0, 1.35fr)
            minmax(0, 0.85fr);
    }
}

@media (max-width: 900px) {
    .container {
        max-width: 100%;
        padding: 12px;
    }

    .three-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .events-panel,
    .three-columns > .panel:first-child {
        overflow: visible;
    }
}

@media (max-width: 600px) {
    .mbz-feed-slide {
        min-height: 220px;
        max-height: 390px;
    }

    .mbz-feed-slide img,
    .mbz-feed-slide video {
        max-height: 390px;
    }

    .mbz-slide-btn {
        width: 34px;
        height: 34px;
        font-size: 24px;
    }
}