:root {
    --app-accent: #6f42c1;
    --app-accent-rgb: 111, 66, 193;
}

html, body { min-height: 100%; }
body { background: var(--bs-tertiary-bg); }

.navbar-brand { font-weight: 700; letter-spacing: .01em; }
.app-navbar { background: linear-gradient(135deg, #24123f, #45207a); }
[data-bs-theme="dark"] .app-navbar { background: linear-gradient(135deg, #130a20, #2d1552); }

.btn-primary {
    --bs-btn-bg: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-hover-bg: #5e37a6;
    --bs-btn-hover-border-color: #5e37a6;
    --bs-btn-active-bg: #533092;
    --bs-btn-active-border-color: #533092;
}

.text-app-accent { color: var(--app-accent) !important; }
.card { border-color: var(--bs-border-color-translucent); }
.track-art { width: 64px; height: 64px; object-fit: cover; border-radius: .75rem; background: var(--bs-secondary-bg); flex: 0 0 auto; }
.sticky-search { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bs-body-bg) 94%, transparent); backdrop-filter: blur(8px); padding: .75rem 0; }
.comment-cell { white-space: pre-wrap; min-width: 180px; max-width: 360px; }
.status-pending > * { background-color: rgba(255, 193, 7, .08) !important; }
.status-queued > * { background-color: rgba(13, 202, 240, .08) !important; }
.status-played > * { background-color: rgba(25, 135, 84, .08) !important; }
.qr-box { width: 116px; min-height: 116px; padding: 10px; background: #fff; border-radius: .75rem; display: grid; place-items: center; }
.qr-large { width: 280px; min-height: 280px; margin: 0 auto; padding: 12px; background: #fff; border-radius: 1rem; display: grid; place-items: center; }
.qr-box img, .qr-box canvas, .qr-large img, .qr-large canvas { max-width: 100%; height: auto !important; }

.theme-toggle { min-width: 2.7rem; }
.event-card .card-body { padding: 1.25rem; }
.mobile-actions .btn { white-space: nowrap; }

@media (max-width: 767.98px) {
    .container { --bs-gutter-x: 1.5rem; }
    main.container { padding-top: 1.25rem !important; padding-bottom: 1.5rem !important; }
    .display-6 { font-size: calc(1.35rem + 1.2vw); }
    .track-art { width: 56px; height: 56px; }
    .event-card .event-layout { flex-direction: column; }
    .event-card .qr-wrap { align-self: center; margin-top: .75rem; }
    .mobile-actions { display: grid !important; grid-template-columns: 1fr 1fr; }
    .mobile-actions .btn { width: 100%; }
    .table-responsive .btn-group { display: grid; gap: .35rem; }
    .table-responsive .btn-group > .btn { border-radius: .375rem !important; }
}

@media (max-width: 420px) {
    .mobile-actions { grid-template-columns: 1fr; }
    .qr-large { width: 240px; min-height: 240px; }
}

.poster-preview-shell {
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: 1rem;
    display: grid;
    place-items: center;
}
.poster-preview {
    display: block;
    width: min(100%, 520px);
    height: auto;
    background: #fff;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.16);
}
@media (max-width: 575.98px) {
    #posterModal .modal-footer .btn { width: 100%; }
}