* { letter-spacing: 0; }
body {
    font-family: Inter, Outfit, sans-serif;
    background-color: #fafaf9;
    background-image:
        linear-gradient(135deg, rgb(var(--theme-light-300) / .2), transparent 28%),
        linear-gradient(315deg, rgba(99, 102, 241, .12), transparent 30%);
    color: #0f172a;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.dark body {
    background-color: #0f172a;
    background-image:
        linear-gradient(135deg, rgb(var(--theme-dark-500) / .15), transparent 30%),
        linear-gradient(315deg, rgba(99, 102, 241, .1), transparent 30%);
    color: #f8fafc;
}
.scanner-shell {
    background:
        linear-gradient(135deg, rgb(var(--theme-dark-500) / .13), transparent 34%),
        radial-gradient(circle at 80% 20%, rgba(99,102,241,.16), transparent 28%),
        #020617;
    color: #f8fafc;
}
.eventin-container { max-width: 1180px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
.premium-card {
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(226,232,240,.9);
    box-shadow: 0 18px 60px rgba(15, 23, 42, .08);
    backdrop-filter: blur(18px);
}
.dark .premium-card,
.dark .glass-panel {
    background: rgba(30,41,59,.75);
    border: 1px solid rgba(51,65,85,.8);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .2);
    backdrop-filter: blur(18px);
}
.glass-panel {
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(226,232,240,.9);
    box-shadow: 0 18px 60px rgba(15, 23, 42, .08);
    backdrop-filter: blur(18px);
}
.scanner-shell .glass-panel,
.scanner-panel {
    background: rgba(15, 23, 42, .72);
    border: 1px solid rgb(var(--theme-dark-400) / .2);
    box-shadow: 0 0 42px rgb(var(--theme-dark-500) / .12);
    backdrop-filter: blur(18px);
}
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border-radius: 1.5rem;
    background: #0f172a;
    color: white;
    font-weight: 800;
    padding: .6rem 1.15rem;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .16);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 24px 52px rgba(15,23,42,.22); background: #111827; }
.btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, var(--theme-light-hex-300), var(--theme-dark-hex-500));
    color: #052e16;
    font-weight: 900;
    padding: .6rem 1.15rem;
    box-shadow: 0 18px 42px rgb(var(--theme-dark-500) / .22);
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 28px 64px rgb(var(--theme-dark-500) / .28); }
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border-radius: 1.5rem;
    border: 1px solid #e2e8f0;
    background: rgba(255,255,255,.8);
    color: #0f172a;
    font-weight: 800;
    padding: .6rem 1.15rem;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.btn-secondary:hover { transform: translateY(-2px); border-color: #cbd5e1; background: white; }
.dark .btn-secondary { background: rgba(30,41,59,.8); border-color: rgba(51,65,85,.8); color: #f8fafc; }
.dark .btn-secondary:hover { background: #1e293b; border-color: #475569; }
.input-modern {
    width: 100%;
    border-radius: 1.25rem;
    border: 1px solid #e2e8f0;
    background: rgba(255,255,255,.92);
    color: #0f172a;
    padding: .9rem 1rem;
    font-size: .92rem;
    outline: none;
    transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.input-modern:focus { border-color: var(--theme-dark-hex-500); box-shadow: 0 0 0 4px rgb(var(--theme-dark-500) / .14); background: white; }
.dark .input-modern { background: rgba(30,41,59,.6); border-color: #334155; color: #f8fafc; }
.dark .input-modern:focus { background: #1e293b; border-color: var(--theme-dark-hex-500); }
.bento-card {
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(226,232,240,.8);
    border-radius: 2rem;
    box-shadow: 0 12px 40px rgba(15, 23, 42, .04);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}
.bento-card:hover { transform: translateY(-4px); box-shadow: 0 24px 80px rgba(15,23,42,.12); border-color: rgb(var(--theme-dark-500) / .32); }
.dark .bento-card {
    background: rgba(30,41,59,.85);
    border: 1px solid rgba(51,65,85,.8);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
}
.dark .bento-card:hover {
    box-shadow: 0 24px 80px rgba(0, 0, 0, .3);
    border-color: rgb(var(--theme-dark-500) / .5);
}
.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 999px;
    border: 1px solid rgba(226,232,240,.9);
    background: rgba(255,255,255,.78);
    color: #334155;
    font-size: .72rem;
    font-weight: 800;
    padding: .35rem .7rem;
    text-transform: uppercase;
}
.dark .badge-soft {
    border-color: rgba(51,65,85,.8);
    background: rgba(30,41,59,.85);
    color: #cbd5e1;
}
.table-wrap { overflow-x: auto; border-radius: 1.75rem; border: 1px solid #e2e8f0; background: rgba(255,255,255,.82); box-shadow: 0 18px 60px rgba(15,23,42,.08); transition: background .3s, border-color .3s; }
.table-modern { width: 100%; min-width: 760px; border-collapse: collapse; }
.table-modern th { background: #f8fafc; color: #64748b; font-size: .72rem; text-transform: uppercase; font-weight: 900; padding: 1rem 1.25rem; text-align: left; transition: background .3s, color .3s; }
.table-modern td { border-top: 1px solid #e2e8f0; padding: 1rem 1.25rem; color: #334155; font-size: .9rem; transition: background .3s, color .3s, border-color .3s; }
.table-modern tr:hover td { background: rgba(248,250,252,.7); }
.dark .table-wrap { border-color: rgba(51,65,85,.8); background: rgba(30,41,59,.8); box-shadow: 0 18px 60px rgba(0,0,0,.3); }
.dark .table-modern th { background: #0f172a; color: #94a3b8; }
.dark .table-modern td { border-top-color: #334155; color: #cbd5e1; }
.dark .table-modern tr:hover td { background: rgba(15,23,42,.6); }
.shape-grid {
    background-image: radial-gradient(rgba(148, 163, 184, 0.2) 2px, transparent 2px);
    background-size: 24px 24px;
}
.dark .shape-grid {
    background-image: radial-gradient(rgba(51, 65, 85, 0.4) 2px, transparent 2px);
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 0.5rem)); }
}

.animate-marquee {
    animation: marquee 30s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ticket-cut:before, .ticket-cut:after {
    content: "";
    position: absolute;
    top: 58%;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #fafaf9;
    border: 1px solid #e2e8f0;
}
.ticket-cut:before { left: -16px; }
.ticket-cut:after { right: -16px; }
@media print {
    header, footer, .no-print { display: none !important; }
    body { background: white !important; color: black !important; }
    .ticket-print {
        max-width: 430px !important;
        margin: 0 auto !important;
        box-shadow: none !important;
        border: 1px solid #cbd5e1 !important;
    }
}

/* QR Scanner Page Styles */
.scanner-viewport {
    height: clamp(380px, 52vh, 590px);
}
#reader,
#reader > div,
#reader__scan_region {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}
#reader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 1.5rem !important; /* 24px */
    display: block !important;
}
#reader__dashboard, #reader__header_message, #reader__scan_region img, #reader__camera_selection, #reader__dashboard_section_fsr { display: none !important; }
#reader__scan_region { border: none !important; background: transparent !important; }

.scanner-frame:before, .scanner-frame:after {
    content: "";
    position: absolute;
    inset: 13%;
    border: 2px solid rgb(var(--theme-dark-400) / .8);
    border-radius: 28px;
    box-shadow: 0 0 28px rgb(var(--theme-dark-500) / .28);
    pointer-events: none;
    z-index: 20;
}
.scanner-frame:after {
    inset: 10%;
    border-color: rgb(var(--theme-light-300) / .18);
}

@media (max-width: 640px) {
    .scanner-viewport {
        height: clamp(330px, 48vh, 430px);
    }
    .scanner-frame:before {
        inset: 12%;
        border-radius: 22px;
    }
    .scanner-frame:after {
        inset: 8%;
        border-radius: 26px;
    }
}