body {
    background: #f3f7ff;
    color: #0f172a;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.auth-body {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 45%, #60a5fa 100%);
}
.login-card {
    overflow: hidden;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 40px 100px rgba(15, 23, 42, 0.35);
}
.login-hero {
    padding: 3rem;
    background: radial-gradient(circle at top left, rgba(255,255,255,.12), transparent 40%), linear-gradient(160deg, #111827, #1d4ed8, #60a5fa);
    color: white;
    min-height: 100%;
    align-items: center;
}
.login-hero h1 { font-size: 2.4rem; line-height: 1.1; margin: 0; }
.app-shell {
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 100vh;
}
.sidebar {
    background: linear-gradient(180deg, #0f172a, #111827 40%, #172554);
    color: #e2e8f0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.brand-box { display:flex; align-items:center; gap: 1rem; }
.brand-mark {
    width: 54px; height: 54px; border-radius: 16px;
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    color: white; display:flex; align-items:center; justify-content:center;
    font-size: 1.6rem; box-shadow: 0 12px 30px rgba(96,165,250,.35);
}
.brand-title { font-weight: 700; font-size: 1.1rem; }
.brand-subtitle { font-size: .84rem; color: #94a3b8; }
.sidebar .nav-link {
    color: #cbd5e1; border-radius: 14px; padding: .85rem 1rem; display:flex; gap:.75rem; align-items:center;
}
.sidebar .nav-link:hover, .sidebar .nav-link.active { background: rgba(255,255,255,.08); color: white; }
.sidebar-user {
    border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 1rem;
    background: rgba(255,255,255,.04);
}
.main-content { padding: 1.75rem; }
.page-title { font-size: 1.8rem; margin: 0; }
.page-subtitle { color: #64748b; margin-top: .3rem; }
.content-card, .stat-card {
    background: white; border-radius: 24px; padding: 1.35rem; border: 1px solid rgba(15,23,42,.06);
    box-shadow: 0 20px 45px rgba(15,23,42,.06);
}
.stat-label { color: #64748b; font-size: .95rem; }
.stat-value { font-size: 2rem; font-weight: 700; margin-top: .35rem; }
.table-modern > :not(caption) > * > * { padding: .95rem .75rem; }
.table-modern thead th { color: #64748b; font-size: .83rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid #e2e8f0; }
.table-modern tbody td { border-color: #eef2ff; }
.qr-thumb { width: 68px; height: 68px; object-fit: cover; border-radius: 14px; border: 1px solid #e2e8f0; background: white; }
.qr-thumb-empty { display:flex; align-items:center; justify-content:center; font-size: 1.5rem; color: #94a3b8; }
.qr-preview-box { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 24px; padding: 1rem; display:flex; justify-content:center; }
.preview-link-box { background: #eff6ff; border-radius: 18px; padding: 1rem; }
.sticky-side { position: sticky; top: 1.5rem; }
.scan-feed .list-group-item { border-color: #eef2ff; }
.form-control, .form-select { border-radius: 14px; padding: .8rem .95rem; }
.btn { border-radius: 14px; padding: .75rem 1rem; }
.btn-primary { background: linear-gradient(135deg, #2563eb, #1d4ed8); border: 0; }
.topbar { min-height: 64px; }
@media (max-width: 992px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { min-height: auto; }
    .sticky-side { position: static; }
}

.qr-preview-target { min-width: 220px; min-height: 220px; display:flex; align-items:center; justify-content:center; }
.qr-preview-target canvas, .qr-preview-target svg { max-width: 100%; height: auto; }
.logo-current { display:flex; align-items:center; gap: .75rem; }
.logo-thumb { width: 48px; height: 48px; object-fit: contain; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; padding: .25rem; }
.form-control-color { padding: .45rem .55rem; }


.mobile-header { display: none; }
.mobile-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(15,23,42,.08);
}
.mobile-brand-text { min-width: 0; flex: 1; }
.mobile-brand-title { font-weight: 700; line-height: 1.1; }
.mobile-brand-subtitle { color: #64748b; font-size: .82rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-menu-btn { width: 42px; height: 42px; padding: 0; display:flex; align-items:center; justify-content:center; border-radius: 12px; }
.mobile-offcanvas .offcanvas-body { background: #f8fbff; }
.mobile-offcanvas .nav-link { color: #334155; border-radius: 14px; padding: .9rem 1rem; display:flex; gap:.75rem; align-items:center; }
.mobile-offcanvas .nav-link.active, .mobile-offcanvas .nav-link:hover { background: #e0eaff; color: #0f172a; }
.filter-actions { display:flex; align-items:flex-end; }
.mobile-card-list { display: none; }
.mobile-item-card { background: #fff; border: 1px solid rgba(15,23,42,.06); border-radius: 22px; padding: 1rem; box-shadow: 0 14px 30px rgba(15,23,42,.05); }
.mobile-item-card + .mobile-item-card { margin-top: 1rem; }
.mobile-item-head { display:flex; gap:.9rem; align-items:flex-start; }
.mobile-item-meta { min-width: 0; flex: 1; }
.mobile-item-title { font-weight: 700; font-size: 1.05rem; }
.mobile-item-sub { color: #64748b; font-size: .92rem; }
.mobile-data-list { display:grid; gap:.45rem; margin-top: .85rem; }
.mobile-data-row { display:flex; justify-content:space-between; gap: 1rem; font-size: .92rem; }
.mobile-data-row .label { color: #64748b; }
.mobile-data-row .value { text-align:right; font-weight: 600; }
.mobile-actions { display:flex; flex-wrap: wrap; gap:.5rem; margin-top: 1rem; }
.mobile-actions .btn { flex: 1 1 calc(50% - .5rem); min-width: 120px; }
.inline-action-wrap { display:flex; gap:.35rem; flex-wrap: wrap; justify-content:flex-end; }
.inline-action-wrap .btn { min-width: fit-content; }
@media (max-width: 1199.98px) {
    .app-shell { grid-template-columns: 260px 1fr; }
}
@media (max-width: 991.98px) {
    .mobile-header { display: block; }
    .app-shell { display: block; min-height: auto; }
    .main-content { padding: 1rem; }
    .topbar { min-height: auto; margin-top: .25rem; }
    .page-title { font-size: 1.45rem; }
    .content-card, .stat-card { border-radius: 20px; padding: 1rem; }
    .qr-preview-box { padding: .75rem; }
    .sticky-side { position: static; top: auto; }
}
@media (max-width: 767.98px) {
    .main-content { padding: .9rem; }
    .content-card, .stat-card { padding: .95rem; border-radius: 18px; }
    .topbar { display:none !important; }
    .page-subtitle { font-size: .94rem; }
    .table-responsive-stack { overflow: visible; }
    .table-responsive-stack .table-modern thead { display: none; }
    .table-responsive-stack .table-modern,
    .table-responsive-stack .table-modern tbody,
    .table-responsive-stack .table-modern tr,
    .table-responsive-stack .table-modern td { display: block; width: 100%; }
    .table-responsive-stack .table-modern tr {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 18px;
        padding: .35rem 0;
        margin-bottom: .9rem;
        box-shadow: 0 12px 28px rgba(15,23,42,.04);
    }
    .table-responsive-stack .table-modern td {
        border: 0 !important;
        padding: .55rem .9rem !important;
    }
    .table-responsive-stack .table-modern td::before {
        content: attr(data-label);
        display: block;
        font-size: .76rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #64748b;
        margin-bottom: .15rem;
    }
    .table-responsive-stack .table-modern td.text-end,
    .table-responsive-stack .table-modern td.mobile-left {
        text-align: left !important;
    }
    .table-responsive-stack .table-modern td.text-end::before,
    .table-responsive-stack .table-modern td.mobile-left::before {
        text-align: left !important;
    }
    .inline-action-wrap { justify-content:flex-start; }
    .inline-action-wrap .btn { flex: 1 1 calc(50% - .35rem); }
    .desktop-qrs-table { display: none; }
    .mobile-card-list { display: block; }
    .qr-thumb { width: 72px; height: 72px; }
    .form-control, .form-select, .btn { font-size: 16px; }
    .qr-preview-target { min-width: 100%; min-height: 240px; }
    .mobile-actions .btn { flex-basis: 100%; }
}