:root{
    --bg:#f5f7fb;
    --card:#ffffff;
    --text:#152033;
    --muted:#6b7280;
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --secondary:#eef2ff;
    --danger:#dc2626;
    --success:#16a34a;
    --border:#e5e7eb;
    --shadow:0 18px 40px rgba(15,23,42,.08);
    --radius:22px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}
img,video{max-width:100%}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top left,#dbeafe,transparent 32%),linear-gradient(135deg,#f8fafc,#eef2ff)}
.login-card{width:min(420px,100%);background:rgba(255,255,255,.88);backdrop-filter:blur(14px);padding:34px;border-radius:28px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.7)}
.login-logo{width:68px;height:68px;border-radius:22px;display:grid;place-items:center;background:#dbeafe;font-size:32px;margin-bottom:16px}
.login-card h1{margin:0;font-size:34px}.login-card p{color:var(--muted);margin-top:6px}
.app-shell{min-height:100vh;display:flex}.sidebar{width:270px;background:#0f172a;color:#e5e7eb;padding:22px;position:fixed;left:0;top:0;bottom:0;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}.brand-icon{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:#1d4ed8;font-size:22px}.brand strong{display:block;font-size:20px}.brand small{color:#94a3b8}.nav-menu{display:grid;gap:8px}.nav-menu a,.logout{padding:13px 14px;border-radius:14px;color:#cbd5e1}.nav-menu a:hover,.nav-menu a.active{background:#1e293b;color:#fff}.logout{margin-top:auto;background:#172033}.main-content{margin-left:270px;flex:1;padding:26px;min-width:0}.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}.topbar h1{margin:0;font-size:30px}.eyebrow{margin:0 0 4px;color:var(--primary);text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.08em}.topbar-user{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:10px 14px;box-shadow:0 8px 22px rgba(15,23,42,.04)}.topbar-user span{display:block;font-weight:800}.topbar-user small{color:var(--muted)}
.grid{display:grid;gap:18px}.cards-3{grid-template-columns:repeat(3,1fr)}.cards-4{grid-template-columns:repeat(4,1fr)}.two-cols{grid-template-columns:1fr 1fr}.detail-layout{grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr)}.stat-card,.panel,.hero-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.stat-card{padding:20px;display:flex;align-items:center;gap:16px}.stat-card>span{width:54px;height:54px;border-radius:18px;background:#eff6ff;display:grid;place-items:center;font-size:25px}.stat-card strong{display:block;font-size:26px}.stat-card small{color:var(--muted)}.hero-card{margin:18px 0;padding:24px;display:flex;align-items:center;justify-content:space-between;gap:18px}.hero-card h2,.panel h2{margin:0}.hero-card p,.panel-header p{color:var(--muted);margin:8px 0 0}.hero-card.compact{margin:0}.panel{padding:20px}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.panel-header.wrap{flex-wrap:wrap}.alert{padding:14px 16px;border-radius:16px;margin-bottom:18px;font-weight:700}.floating-alert{position:fixed;top:16px;right:16px;z-index:50}.alert-success{background:#dcfce7;color:#166534}.alert-error{background:#fee2e2;color:#991b1b}
.btn{border:0;border-radius:14px;padding:11px 16px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.2s}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:var(--secondary);color:#3730a3}.btn-gray{background:#e5e7eb;color:#334155}.btn-gray:hover{background:#d1d5db}.btn-danger{background:var(--danger);color:#fff}.btn-success{background:var(--success);color:#fff}.btn-ghost{background:#f8fafc;color:#475569}.btn-sm{padding:7px 10px;border-radius:10px;font-size:13px}.full{width:100%}.big{padding:15px;font-size:16px}.icon-btn{border:0;background:#f1f5f9;border-radius:12px;width:40px;height:40px;cursor:pointer}.mobile-menu{display:none}
.form-stack{display:grid;gap:14px}label{display:grid;gap:7px}label span{font-weight:800;font-size:14px}input,textarea,select{width:100%;border:1px solid var(--border);border-radius:14px;padding:12px 13px;background:#fff;outline:none}input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(37,99,235,.1)}textarea{resize:vertical}.mt{margin-top:14px}
.report-list{display:grid;gap:12px}.report-item{display:flex;gap:14px;padding:12px;border:1px solid var(--border);border-radius:18px;background:#fff;align-items:center}.report-item h3{margin:0 0 4px}.report-item p{margin:0 0 8px;color:var(--muted)}.media-thumb{width:72px;height:72px;border-radius:16px;background:#f1f5f9;display:grid;place-items:center;overflow:hidden;flex:none}.media-thumb img{width:100%;height:100%;object-fit:cover}.media-thumb span{font-size:28px}.badge{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}.badge-blue{background:#dbeafe;color:#1d4ed8}.badge-purple{background:#ede9fe;color:#6d28d9}.badge-orange{background:#ffedd5;color:#c2410c}.badge-red{background:#fee2e2;color:#b91c1c}.badge-green{background:#dcfce7;color:#15803d}.badge-gray{background:#f1f5f9;color:#475569}.empty-state{border:1px dashed #cbd5e1;border-radius:18px;padding:26px;text-align:center;color:var(--muted);background:#f8fafc}.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.filter-bar input,.filter-bar select{max-width:220px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--border);vertical-align:middle}th{font-size:13px;color:#64748b}td small{display:block;color:var(--muted);margin-top:4px}.tiny-thumb{width:54px;height:54px;border-radius:14px;object-fit:cover}.video-pill{background:#f1f5f9;border-radius:999px;padding:7px 10px;font-weight:800}.action-cell{display:flex;gap:8px;align-items:center}.inline-form{display:inline-flex}
.camera-box,.preview-box{border:1px solid var(--border);border-radius:22px;overflow:hidden;background:#0f172a;margin-bottom:18px}.camera-toolbar,.preview-header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:#fff;color:var(--text)}#cameraVideo,#watermarkCanvas{display:block;width:100%;max-height:430px;object-fit:contain;background:#0f172a}.camera-actions{padding:12px 14px;background:#fff;display:flex;gap:10px;justify-content:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.camera-actions .btn{min-width:130px}.preview-box{background:#fff}.preview-box.is-empty .preview-header #clearMediaBtn,.preview-box.camera-open .preview-header #clearMediaBtn{display:none}.preview-empty{min-height:220px;display:grid;place-items:center;text-align:center;color:var(--muted);background:#f8fafc;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:24px}.preview-box img,.preview-box video{display:block;width:100%;max-height:440px;margin:auto;object-fit:contain;background:#0f172a}.camera-toggle-row{padding:14px;background:#fff}.meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:4px 0 6px}.meta-grid div{border:1px solid var(--border);border-radius:18px;padding:14px;background:#f8fafc}.meta-grid strong{display:block;margin-top:6px}.meta-grid small{display:block;color:var(--muted);margin-top:3px}.report-form{display:grid;gap:16px}.media-panel{padding:10px}.main-media{width:100%;border-radius:18px;max-height:670px;object-fit:contain;background:#0f172a}.description-text{font-size:16px;line-height:1.65}.info-list{display:grid;gap:10px;margin:18px 0}.info-list div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border);padding-bottom:10px}.info-list span{color:var(--muted)}.note-box{background:#f8fafc;border:1px solid var(--border);border-radius:16px;padding:14px;line-height:1.55}.note-box.small{font-size:14px;margin-top:10px}.danger-zone{border-color:#fecaca}.request-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.request-card{border:1px solid var(--border);border-radius:20px;padding:16px;background:#fff}.request-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.request-card p{line-height:1.55;color:#334155}.request-meta{display:grid;gap:4px;color:var(--muted);font-size:13px;margin:12px 0}.admin-review-form{display:grid;gap:10px}.split-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.timeline{display:grid;gap:12px}.timeline-item{padding:12px 14px;border:1px solid var(--border);border-radius:16px;background:#f8fafc}.timeline-item strong,.timeline-item span,.timeline-item small{display:block}.timeline-item span{color:#334155;margin:4px 0}.timeline-item small{color:var(--muted)}

.cards-2{grid-template-columns:repeat(2,1fr)}.mt-dashboard{margin-top:18px}.quick-filter-row{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}.data-note{margin:0 0 16px}.report-summary-grid{margin-bottom:0}

.sidebar-backdrop{display:none}
@media (max-width:1100px){.cards-4{grid-template-columns:repeat(2,1fr)}.detail-layout,.two-cols,.user-layout{grid-template-columns:1fr}.request-grid{grid-template-columns:1fr}}
@media (max-width:820px){.cards-2{grid-template-columns:1fr}.sidebar{transform:translateX(-110%);transition:.2s}.sidebar.open{transform:translateX(0)}.sidebar-backdrop.show{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:10}.main-content{margin-left:0;padding:18px}.mobile-menu{display:inline-grid;place-items:center}.topbar{align-items:flex-start}.topbar-user{display:none}.cards-3,.cards-4,.meta-grid{grid-template-columns:1fr}.hero-card{align-items:flex-start;flex-direction:column}.filter-bar input,.filter-bar select{max-width:100%}.filter-bar>*{flex:1 1 100%}.topbar h1{font-size:24px}.panel{padding:16px}}

.global-loading{position:fixed;inset:0;background:rgba(15,23,42,.52);display:none;align-items:center;justify-content:center;z-index:9999;padding:20px;backdrop-filter:blur(6px)}
.global-loading.show{display:flex}
.global-loading-card{width:min(340px,100%);background:#fff;border:1px solid rgba(255,255,255,.7);border-radius:24px;padding:26px;text-align:center;box-shadow:0 24px 80px rgba(15,23,42,.28);display:grid;gap:10px;place-items:center}
.global-loading-card strong{font-size:18px;color:var(--text)}
.global-loading-card small{color:var(--muted);line-height:1.5}
.spinner{width:46px;height:46px;border-radius:999px;border:5px solid #dbeafe;border-top-color:var(--primary);animation:spin .8s linear infinite;margin-bottom:4px}
.app-popup{position:fixed;left:50%;top:22px;transform:translate(-50%,-18px);opacity:0;pointer-events:none;z-index:10000;max-width:min(460px,calc(100% - 28px));padding:14px 18px;border-radius:16px;font-weight:900;box-shadow:0 16px 42px rgba(15,23,42,.2);transition:.2s;text-align:center}
.app-popup.show{opacity:1;transform:translate(-50%,0)}
.app-popup.success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.app-popup.error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
@keyframes spin{to{transform:rotate(360deg)}}

/* Revisi mobile menu ala floating bottom navigation */
.mobile-bottom-nav{display:none}
.profile-hero{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.profile-hero h2{margin:0 0 8px;font-size:26px}
.profile-avatar{width:74px;height:74px;border-radius:26px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-size:34px;font-weight:900;box-shadow:0 16px 32px rgba(37,99,235,.22)}
.profile-actions{display:grid;gap:10px;margin-top:18px}

@media (max-width:820px){
    :root{
        --primary:#f97316;
        --primary-dark:#ea580c;
        --secondary:#fff7ed;
        --shadow:0 18px 46px rgba(15,23,42,.08);
    }
    body{background:#fff7ed}
    .app-shell{display:block;min-height:100vh}
    .main-content{margin-left:0;padding:0 14px 112px;background:#fff7ed;min-height:100vh}
    .topbar{margin:0 -14px 20px;padding:24px 18px 56px;background:linear-gradient(135deg,#f97316 0%,#fb923c 58%,#fdba74 100%);color:#fff;border-radius:0 0 34px 34px;box-shadow:0 18px 36px rgba(249,115,22,.2);position:relative;overflow:hidden}
    .topbar:before{content:"";position:absolute;right:-90px;top:-70px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.12)}
    .topbar:after{content:"";position:absolute;right:54px;bottom:-70px;width:220px;height:140px;border-radius:50%;background:rgba(255,255,255,.1)}
    .topbar>*{position:relative;z-index:1}
    .topbar h1{font-size:27px;letter-spacing:-.02em;color:#fff;line-height:1.15}
    .topbar .eyebrow{color:rgba(255,255,255,.88)}
    .icon-btn.mobile-menu{display:inline-grid;place-items:center;background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px)}
    .sidebar{width:min(300px,86vw);background:#111827;border-radius:0 28px 28px 0;padding-bottom:118px}
    .sidebar .nav-menu a,.sidebar .logout{font-size:15px}
    .topbar-user{display:none}
    .main-content>.grid.cards-3:first-of-type,
    .main-content>.grid.cards-4:first-of-type,
    .main-content>.grid.cards-2:first-of-type{margin-top:-42px;position:relative;z-index:2}
    .cards-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
    .cards-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .cards-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .stat-card{padding:14px 10px;border-radius:22px;display:grid;justify-items:center;text-align:center;gap:7px;min-height:128px}
    .stat-card>span{width:44px;height:44px;border-radius:16px;background:#fff1e7;color:#f97316;font-size:22px}
    .stat-card strong{font-size:22px;line-height:1.1;word-break:break-word}
    .stat-card small{font-size:12px;line-height:1.25}
    .panel,.hero-card,.stat-card{border-color:rgba(249,115,22,.12);box-shadow:0 14px 36px rgba(15,23,42,.07)}
    .panel{border-radius:26px;padding:16px;margin-bottom:14px;background:rgba(255,255,255,.96)}
    .panel-header{align-items:flex-start}.panel-header h2{font-size:22px}.panel-header a{color:#f97316;font-weight:800}
    .hero-card{margin:14px 0;padding:18px;border-radius:26px;background:#fff;gap:14px}
    .hero-card h2{font-size:22px}
    .hero-card p{font-size:14px;line-height:1.45}
    .hero-card .action-cell{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .btn{border-radius:16px;box-shadow:none}.btn-primary{background:linear-gradient(135deg,#f97316,#ea580c)}.btn-secondary{background:#fff7ed;color:#c2410c}.btn-gray{background:#e5e7eb;color:#475569}.btn-ghost{background:#fff;color:#64748b;border:1px solid #f1f5f9}.btn-success{background:#16a34a}.btn-danger{background:#dc2626}
    .report-item{border-radius:22px;gap:12px;padding:10px}.media-thumb{width:64px;height:64px;border-radius:18px}.report-item h3{font-size:16px}.report-item p{font-size:13px;line-height:1.35}.badge{padding:6px 9px;font-size:11px}
    .two-cols,.detail-layout,.user-layout{grid-template-columns:1fr}
    .filter-bar{background:#fff;border-radius:22px;padding:12px;border:1px solid rgba(249,115,22,.12);box-shadow:0 10px 28px rgba(15,23,42,.05)}
    .table-wrap{overflow:visible}
    .mobile-card-table,.mobile-card-table thead,.mobile-card-table tbody,.mobile-card-table tr,.mobile-card-table th,.mobile-card-table td{display:block;width:100%}
    .mobile-card-table thead{display:none}
    .mobile-card-table tr{background:#fff;border:1px solid rgba(249,115,22,.12);border-radius:22px;padding:12px;margin-bottom:12px;box-shadow:0 10px 26px rgba(15,23,42,.05)}
    .mobile-card-table td{border:0;padding:7px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:right}
    .mobile-card-table td:before{content:attr(data-label);font-weight:800;color:#64748b;text-align:left;min-width:96px}
    .mobile-card-table td:nth-child(1):before{content:'Media'}
    .mobile-card-table td:nth-child(2):before{content:'Judul'}
    .mobile-card-table td:nth-child(3):before{content:'Pelapor'}
    .mobile-card-table td:nth-child(4):before{content:'Waktu'}
    .mobile-card-table td:nth-child(5):before{content:'Status'}
    .mobile-card-table td:nth-child(6):before{content:'Aksi'}
    .tiny-thumb{width:70px;height:70px;border-radius:18px}
    .preview-box{border-radius:26px}.preview-header,.camera-toolbar,.camera-actions,.camera-toggle-row{padding:12px}.camera-actions{gap:8px;flex-wrap:wrap}.camera-actions .btn{min-width:calc(50% - 4px);flex:1}.camera-actions #stopRecordBtn{min-width:100%}.preview-empty{min-height:190px}.meta-grid{grid-template-columns:1fr;gap:10px}.meta-grid div{border-radius:20px}
    .main-media{border-radius:22px;max-height:68vh}.info-list div{display:grid;gap:3px}.info-list strong{text-align:left;word-break:break-word}.request-grid{grid-template-columns:1fr}
    .floating-alert{left:14px;right:14px;top:14px}.app-popup{top:14px}.global-loading-card{border-radius:26px}
    .profile-panel{margin-top:-42px;position:relative;z-index:2}.profile-hero{align-items:center}.profile-avatar{width:66px;height:66px;border-radius:24px;background:linear-gradient(135deg,#f97316,#ea580c);box-shadow:0 16px 32px rgba(249,115,22,.22)}

    .mobile-bottom-nav{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:0 14px calc(10px + env(safe-area-inset-bottom));pointer-events:none}
    .mobile-nav-inner{height:78px;max-width:560px;margin:0 auto;background:rgba(255,255,255,.96);border:1px solid rgba(226,232,240,.9);border-radius:28px;box-shadow:0 16px 46px rgba(15,23,42,.18);display:grid;grid-template-columns:1fr 1fr 98px 1fr 1fr;align-items:end;padding:10px 10px 8px;position:relative;pointer-events:auto;backdrop-filter:blur(16px)}
    .mobile-nav-inner:before{content:"";position:absolute;left:50%;top:-20px;transform:translateX(-50%);width:104px;height:52px;background:#fff;border-radius:0 0 58px 58px;box-shadow:0 10px 24px rgba(15,23,42,.05);z-index:0}
    .mobile-nav-item,.mobile-nav-camera{position:relative;z-index:1;display:grid;justify-items:center;gap:5px;color:#7c818b;font-size:11px;font-weight:800;line-height:1;padding:6px 4px 3px;min-width:0;text-align:center}
    .mobile-nav-item svg{width:24px;height:24px;fill:currentColor}.mobile-nav-item.active{color:#f97316}.mobile-nav-camera{align-self:center;color:#f97316;margin-top:-44px;padding:0 0 2px}.mobile-camera-circle{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff8a00,#f05a00);color:#fff;box-shadow:0 16px 34px rgba(249,115,22,.42),0 0 0 10px #fff}.mobile-camera-circle svg{width:34px;height:34px;fill:currentColor}.mobile-nav-camera span:last-child{margin-top:7px;font-size:12px}.mobile-nav-camera.active .mobile-camera-circle{transform:translateY(-2px);box-shadow:0 18px 38px rgba(249,115,22,.48),0 0 0 10px #fff}
}

@media (max-width:430px){
    .main-content{padding-left:12px;padding-right:12px}.topbar{margin-left:-12px;margin-right:-12px}.cards-3{gap:8px}.stat-card{padding:12px 7px;min-height:118px}.stat-card strong{font-size:20px}.stat-card small{font-size:11px}.stat-card>span{width:40px;height:40px;font-size:20px}.mobile-nav-inner{grid-template-columns:1fr 1fr 86px 1fr 1fr;height:74px;border-radius:26px}.mobile-camera-circle{width:68px;height:68px}.mobile-nav-item,.mobile-nav-camera{font-size:10.5px}.mobile-nav-item svg{width:22px;height:22px}
}


/* Revisi status informasi data + profil menu */
.profile-stats{margin:16px 0}.stat-card.mini{min-height:auto;padding:16px}.status-summary-grid{margin-bottom:14px}.status-info-list{display:grid;gap:14px}.status-info-card{border:1px solid #e2e8f0;background:#fff;border-radius:24px;padding:18px;box-shadow:0 14px 34px rgba(15,23,42,.06);display:grid;gap:14px}.status-info-card.is-deleted{border-color:#fecaca;background:linear-gradient(180deg,#fff 0%,#fff7f7 100%)}.status-info-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.status-info-head h3{margin:4px 0 0;font-size:20px}.status-kicker{font-size:12px;font-weight:900;color:#f97316;text-transform:uppercase;letter-spacing:.08em}.status-file-strip{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:#f8fafc;border:1px solid #eef2f7}.status-file-icon{width:46px;height:46px;border-radius:16px;background:#fff7ed;color:#f97316;display:grid;place-items:center;font-size:24px}.status-file-strip strong{display:block}.status-file-strip small{display:block;color:#64748b;margin-top:3px}.info-list.compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.info-list.compact div{padding:11px 12px;border-radius:16px}.status-note-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.status-note-grid .note-box{margin:0;line-height:1.55}.status-note-grid strong{color:#0f172a}
@media (min-width:821px){.hero-card .action-cell{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.hero-card.compact .action-cell{justify-content:flex-start}}
@media (max-width:820px){.status-info-head{display:grid}.info-list.compact,.status-note-grid{grid-template-columns:1fr}.status-info-card{border-radius:24px;padding:15px}.status-info-head h3{font-size:18px}.status-file-strip{align-items:flex-start}.hero-card .action-cell{grid-template-columns:1fr}.profile-stats.cards-3{grid-template-columns:1fr 1fr 1fr}.profile-stats .stat-card{min-height:104px}}
@media (max-width:430px){.profile-stats.cards-3{grid-template-columns:1fr}.status-info-meta div{grid-template-columns:1fr}.status-info-head .badge{justify-self:start}}

/* Revisi: Status Informasi Data dibuat accordion agar rapi */
.status-info-card.is-accordion{padding:0;overflow:hidden;gap:0}
.status-info-toggle{width:100%;border:0;background:transparent;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;text-align:left;padding:16px 18px;cursor:pointer;color:var(--text)}
.status-info-toggle:hover{background:#f8fafc}
.status-info-title h3{margin:4px 0 3px;font-size:18px;line-height:1.25}
.status-info-title small{display:block;color:#64748b;line-height:1.45}
.accordion-chevron{width:34px;height:34px;border-radius:12px;background:#f1f5f9;color:#64748b;display:grid;place-items:center;font-size:22px;line-height:1;transition:.2s ease;flex:none}
.status-info-card.is-open .accordion-chevron{transform:rotate(180deg);background:#fff7ed;color:#ea580c}
.status-info-card.is-open .status-info-toggle{border-bottom:1px solid #eef2f7;background:#fffaf5}
.status-info-body{padding:16px 18px 18px;display:grid;gap:14px;animation:accordionDrop .18s ease-out}
.status-info-body[hidden]{display:none!important}
.status-note-grid .full-note{grid-column:1/-1}
@keyframes accordionDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:820px){
    .status-info-toggle{grid-template-columns:auto minmax(0,1fr) auto;align-items:start;padding:14px;gap:10px}
    .status-info-toggle>.badge{grid-column:2/3;justify-self:start;margin-top:4px}
    .accordion-chevron{grid-column:3/4;grid-row:1/3}
    .status-info-title h3{font-size:16px}
    .status-info-body{padding:14px}
}
@media (max-width:430px){
    .status-info-toggle{grid-template-columns:auto minmax(0,1fr) auto}
    .status-info-toggle .status-file-icon{width:42px;height:42px;border-radius:14px;font-size:22px}
    .status-info-title small{font-size:12px}
}

/* Revisi Login Email / QR */
.login-page-modern{background:radial-gradient(circle at 15% 10%,#fed7aa,transparent 28%),radial-gradient(circle at 85% 20%,#bfdbfe,transparent 26%),linear-gradient(135deg,#fff7ed,#f8fafc)}
.login-card-modern{width:min(460px,100%);display:grid;gap:16px}
.login-start{display:grid;gap:10px;margin-top:8px}
.login-credit{font-size:13px;color:#64748b;text-align:center;line-height:1.5;margin-top:2px}.login-credit strong{color:#f97316;font-weight:900}
.login-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.login-back-btn{grid-column:1/-1;background:#f8fafc;color:#475569;border:1px solid var(--border);margin-top:2px}
.login-back-btn:hover{background:#eef2f7}
.login-method-btn{border:1px solid var(--border);background:#fff;border-radius:18px;padding:14px 12px;display:grid;gap:6px;justify-items:center;text-align:center;cursor:pointer;font-weight:900;color:#334155;box-shadow:0 8px 24px rgba(15,23,42,.04)}
.login-method-btn span{width:42px;height:42px;border-radius:15px;background:#fff7ed;color:#f97316;display:grid;place-items:center;font-size:22px}
.login-method-btn.active{border-color:#fdba74;background:#fff7ed;color:#c2410c;box-shadow:0 12px 30px rgba(249,115,22,.14)}
.login-panel{border:1px solid var(--border);background:#fff;border-radius:22px;padding:16px;box-shadow:0 12px 28px rgba(15,23,42,.05)}
.qr-login-panel{display:grid;gap:12px}
.qr-scan-stage{display:grid;gap:12px}.qr-scan-stage[hidden]{display:none!important}
.qr-step-head{display:flex;gap:12px;align-items:center;background:#fff7ed;border:1px solid #fed7aa;border-radius:18px;padding:12px;text-align:left;color:#334155}
.qr-step-head strong{display:block;color:#0f172a}.qr-step-head small{display:block;color:#64748b;line-height:1.35;margin-top:2px}.qr-step-badge{width:34px;height:34px;border-radius:13px;background:#f97316;color:#fff;display:grid;place-items:center;font-weight:900;flex:none}
.qr-success-card{display:flex;gap:12px;align-items:center;background:#ecfdf5;border:1px solid #bbf7d0;border-radius:16px;padding:12px;color:#065f46;text-align:left}
.qr-success-card span{width:36px;height:36px;border-radius:14px;background:#16a34a;color:#fff;display:grid;place-items:center;font-weight:900;flex:none}.qr-success-card strong{display:block;color:#064e3b}.qr-success-card small{display:block;color:#047857;line-height:1.35;margin-top:2px}
.qr-scan-box{border:1px dashed #fdba74;background:#fff7ed;border-radius:22px;min-height:250px;overflow:hidden;position:relative;display:grid;place-items:center;text-align:center;color:#334155}
.qr-scan-empty{display:grid;gap:8px;padding:20px;place-items:center}.qr-scan-empty strong{font-size:18px}.qr-scan-empty small,.qr-helper{color:#64748b;line-height:1.45;margin:0}
#qrScannerVideo{width:100%;height:300px;object-fit:cover;background:#0f172a;display:block}
.qr-scan-line{position:absolute;left:12%;right:12%;top:50%;height:3px;border-radius:99px;background:#f97316;box-shadow:0 0 18px rgba(249,115,22,.65);animation:qrScanLine 1.6s ease-in-out infinite}
@keyframes qrScanLine{0%,100%{transform:translateY(-70px)}50%{transform:translateY(70px)}}
.qr-pin-form{background:#f8fafc;border:1px solid #e2e8f0;border-radius:18px;padding:12px}
.qr-admin-box{display:grid;gap:8px;min-width:220px}.qr-admin-box details{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:10px}.qr-admin-box summary{font-weight:900;cursor:pointer;color:#f97316}.qr-admin-img{width:180px;max-width:100%;display:block;background:#fff;border-radius:14px;padding:8px;margin:10px auto}.qr-admin-box code{font-size:11px;word-break:break-all;color:#0f172a}.qr-mini-form{display:grid;grid-template-columns:minmax(130px,1fr) auto;gap:8px;align-items:center}.qr-mini-form input{padding:9px 10px;border-radius:12px}.qr-login-cell{text-align:left}.user-actions{flex-wrap:wrap}.user-identity{display:flex;gap:10px;align-items:center}.user-avatar-small{width:40px;height:40px;border-radius:14px;background:#fff7ed;color:#f97316;display:grid;place-items:center;font-weight:900;flex:none}

@media (max-width:820px){
    .login-page-modern{align-items:start;padding:18px;background:#fff7ed}.login-card-modern{border-radius:28px;padding:22px;box-shadow:0 18px 48px rgba(249,115,22,.12)}.login-logo{background:#fff7ed;color:#f97316}.login-methods{grid-template-columns:1fr}.login-panel{padding:14px;border-radius:20px}.qr-scan-box{min-height:220px}#qrScannerVideo{height:260px}.qr-mini-form{grid-template-columns:1fr}.qr-admin-box{min-width:0;width:100%}.qr-admin-img{width:160px}.qr-login-cell{display:grid!important;gap:8px;text-align:left!important}.user-table td:nth-child(1):before{content:'Pengguna'}.user-table td:nth-child(2):before{content:'Role'}.user-table td:nth-child(3):before{content:'Status'}.user-table td:nth-child(4):before{content:'QR Login'}.user-table td:nth-child(5):before{content:'Aksi'}.user-table td:nth-child(6):before{content:''}.user-table td{align-items:flex-start}.user-table .action-cell{justify-content:flex-start;text-align:left}.user-table .qr-login-cell:before{align-self:start}.user-actions .inline-form,.user-actions .btn{width:100%}.user-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;width:100%}.user-actions .btn{justify-content:center}.user-actions .inline-form .btn{width:100%}
}
@media (max-width:430px){.login-card-modern{padding:20px}.qr-scan-box{min-height:205px}#qrScannerVideo{height:235px}.user-actions{grid-template-columns:1fr}.login-card h1{font-size:30px}}

/* Password show/private toggle */
.password-field{position:relative;display:flex;align-items:center;width:100%}
.password-field input{padding-right:82px;width:100%}
.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;border-radius:10px;background:#f1f5f9;color:#334155;font-weight:800;font-size:12px;padding:7px 10px;cursor:pointer;line-height:1;min-width:58px}
.password-toggle:hover{background:#e2e8f0;color:#0f172a}
.password-toggle:focus{outline:0;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
@media(max-width:640px){.password-field input{padding-right:76px}.password-toggle{font-size:11px;min-width:54px;padding:7px 8px}}

/* Revisi: Laporan PDF Admin per hari, minggu, bulan */
.pdf-toolbar{margin-bottom:16px}.pdf-filter-bar{align-items:end}.compact-field{display:grid;gap:7px}.compact-field span{font-size:12px;font-weight:900;color:#64748b}.compact-field input,.compact-field select{min-width:180px}.pdf-report-area{background:#fff;border:1px solid #e2e8f0;border-radius:28px;padding:22px;box-shadow:0 18px 44px rgba(15,23,42,.07);display:grid;gap:18px}.pdf-report-cover{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:2px solid #f1f5f9;padding-bottom:18px}.pdf-report-cover h2{font-size:28px;margin:4px 0 8px;color:#0f172a}.pdf-report-subtitle{margin:3px 0;color:#475569}.pdf-report-meta{min-width:210px;background:#fff7ed;border:1px solid #fed7aa;border-radius:20px;padding:14px;text-align:right;display:grid;gap:3px}.pdf-report-meta span,.pdf-report-meta small{color:#64748b}.pdf-report-meta strong{color:#c2410c}.pdf-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.pdf-summary-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:18px;padding:14px;display:grid;gap:4px}.pdf-summary-card span{font-size:12px;color:#64748b;font-weight:900}.pdf-summary-card strong{font-size:26px;color:#f97316}.pdf-report-list{display:grid;gap:16px}.pdf-report-item{border:1px solid #e2e8f0;border-radius:24px;padding:16px;break-inside:avoid-page;page-break-inside:avoid;background:#fff}.pdf-report-item-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:1px solid #f1f5f9;padding-bottom:12px}.pdf-report-item-head small{color:#f97316;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.pdf-report-item-head h3{font-size:21px;margin:5px 0 0;color:#0f172a}.pdf-report-content{display:grid;grid-template-columns:260px 1fr;gap:14px;margin-top:14px}.pdf-media-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:18px;min-height:180px;display:grid;place-items:center;overflow:hidden}.pdf-media-box img{display:block;width:100%;height:220px;object-fit:cover}.pdf-video-box{padding:18px;text-align:center;display:grid;gap:8px;color:#334155}.pdf-video-box strong{font-size:18px}.pdf-video-box span{font-size:12px;word-break:break-all;color:#64748b}.pdf-video-box small{color:#94a3b8;line-height:1.45}.pdf-data-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.pdf-data-row{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:10px;display:grid;gap:4px}.pdf-data-row span{font-size:11px;color:#64748b;font-weight:900;text-transform:uppercase;letter-spacing:.03em}.pdf-data-row strong{font-size:13px;color:#0f172a;word-break:break-word}.pdf-note-section{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.pdf-note-section>div{background:#fff7ed;border:1px solid #fed7aa;border-radius:16px;padding:12px}.pdf-note-section span{font-size:12px;color:#c2410c;font-weight:900}.pdf-note-section p{margin:6px 0 0;color:#334155;line-height:1.55}.pdf-empty{margin-top:0}

@media (max-width:820px){.pdf-toolbar .panel-header{display:grid;gap:12px}.pdf-filter-bar{grid-template-columns:1fr}.compact-field input,.compact-field select{min-width:0;width:100%}.pdf-report-area{padding:16px;border-radius:24px}.pdf-report-cover{display:grid}.pdf-report-meta{text-align:left;min-width:0}.pdf-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pdf-report-content{grid-template-columns:1fr}.pdf-data-box{grid-template-columns:1fr}.pdf-note-section{grid-template-columns:1fr}.pdf-media-box img{height:auto;max-height:320px}.pdf-report-item{padding:14px;border-radius:22px}.pdf-report-item-head{display:grid}.pdf-report-item-head .badge{justify-self:start}}

@media print{
    @page{size:A4;margin:12mm}
    body{background:#fff!important;color:#0f172a!important;font-size:11pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
    .no-print,.sidebar,.sidebar-backdrop,.topbar,.mobile-bottom-nav,.global-loading,.app-popup,.alert,.floating-alert{display:none!important}
    .app-shell{display:block!important;min-height:auto!important;background:#fff!important}
    .main-content{padding:0!important;margin:0!important;max-width:none!important;background:#fff!important}
    .pdf-report-area{box-shadow:none!important;border:0!important;border-radius:0!important;padding:0!important;gap:10mm!important}
    .pdf-report-cover{border-bottom:2px solid #0f172a!important;padding-bottom:5mm!important}
    .pdf-report-cover h2{font-size:20pt!important;margin:1mm 0 2mm!important}.pdf-report-subtitle{font-size:10.5pt!important}.pdf-report-meta{border:1px solid #fed7aa!important;background:#fff7ed!important;border-radius:5mm!important;padding:4mm!important}
    .pdf-summary-grid{grid-template-columns:repeat(4,1fr)!important;gap:3mm!important}.pdf-summary-card{border-radius:4mm!important;padding:4mm!important;background:#f8fafc!important}.pdf-summary-card strong{font-size:18pt!important}
    .pdf-report-list{gap:5mm!important}.pdf-report-item{border:1px solid #cbd5e1!important;border-radius:5mm!important;padding:5mm!important;margin:0 0 5mm!important;box-shadow:none!important;break-inside:avoid-page;page-break-inside:avoid}.pdf-report-item-head h3{font-size:15pt!important}.pdf-report-content{grid-template-columns:62mm 1fr!important;gap:4mm!important}.pdf-media-box{min-height:42mm!important;border-radius:4mm!important}.pdf-media-box img{height:auto!important;max-height:60mm!important;object-fit:contain!important}.pdf-data-box{grid-template-columns:repeat(2,1fr)!important;gap:2.5mm!important}.pdf-data-row{border-radius:3mm!important;padding:2.5mm!important}.pdf-data-row span{font-size:8pt!important}.pdf-data-row strong{font-size:9.5pt!important}.pdf-note-section{grid-template-columns:1fr 1fr!important;gap:3mm!important}.pdf-note-section>div{border-radius:3.5mm!important;padding:3mm!important}.badge{border:1px solid rgba(15,23,42,.15)!important}
    a[href]:after{content:""!important}
}

/* Revisi: Admin branding website + login tengah */
.brand-icon-img{overflow:hidden}
.brand-icon-img img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.login-page-modern{display:grid;place-items:center!important;align-items:center!important;justify-items:center!important;min-height:100vh;padding:24px}
.login-card-modern{text-align:center;margin:auto}
.login-card-modern .form-stack,.login-card-modern .qr-step-head,.login-card-modern .qr-success-card{text-align:left}
.login-logo-uploaded{margin-left:auto;margin-right:auto;overflow:hidden;background:#fff7ed;color:#f97316;box-shadow:0 14px 34px rgba(249,115,22,.14)}
.login-logo-uploaded img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.field-help{display:block;color:#64748b;font-size:12px;line-height:1.45;margin-top:2px;font-weight:600}.branding-layout{align-items:start}.branding-form-card,.branding-preview-card{min-width:0}.branding-form textarea{line-height:1.55}.split-actions{display:flex;gap:10px;flex-wrap:wrap}.split-actions .btn{flex:1;min-width:180px}.branding-preview-login{background:radial-gradient(circle at 15% 10%,#fed7aa,transparent 28%),radial-gradient(circle at 85% 20%,#bfdbfe,transparent 26%),linear-gradient(135deg,#fff7ed,#f8fafc);border:1px solid #fed7aa;border-radius:28px;padding:24px;display:grid;place-items:center}.preview-login-card{transform:scale(.9);box-shadow:0 18px 44px rgba(15,23,42,.09);width:min(390px,100%)}.branding-current-files{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.branding-current-files div{background:#f8fafc;border:1px solid #e2e8f0;border-radius:18px;padding:12px;display:grid;gap:4px}.branding-current-files span{color:#64748b;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.03em}.branding-current-files strong{word-break:break-word;color:#0f172a}.branding-form input[type=file]{padding:10px;background:#f8fafc;border-style:dashed}
@media (max-width:820px){.branding-layout{grid-template-columns:1fr}.branding-preview-login{padding:16px;border-radius:24px}.preview-login-card{transform:none;padding:20px}.branding-current-files{grid-template-columns:1fr}.login-page-modern{padding:18px;align-items:center!important}.login-card-modern{max-height:none}}
@media (max-width:430px){.split-actions{display:grid}.split-actions .btn{min-width:0}.login-page-modern{padding:14px}.login-card-modern{width:100%}}

/* Revisi: Login fokus Email / QR */
.login-focus-page{position:relative;overflow:hidden;background:radial-gradient(circle at 18% 12%,rgba(249,115,22,.22),transparent 30%),radial-gradient(circle at 84% 18%,rgba(37,99,235,.16),transparent 28%),linear-gradient(135deg,#fff7ed 0%,#f8fafc 55%,#eef2ff 100%)}
.login-focus-page:before,.login-focus-page:after{content:"";position:absolute;border-radius:999px;pointer-events:none}.login-focus-page:before{width:260px;height:260px;left:-120px;bottom:-110px;background:rgba(249,115,22,.12)}.login-focus-page:after{width:220px;height:220px;right:-110px;top:-90px;background:rgba(37,99,235,.1)}
.login-focus-card{position:relative;z-index:1;width:min(480px,100%);padding:30px;text-align:center;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.82);box-shadow:0 28px 90px rgba(15,23,42,.13)}
.login-brand-area{display:grid;justify-items:center;gap:7px}.login-brand-area .login-logo{margin-bottom:4px}.login-brand-area h1{line-height:1.05;letter-spacing:-.035em}.login-brand-area p{margin:0;line-height:1.45;max-width:340px}
.login-main-enter{display:grid;gap:2px;padding:15px 16px}.login-main-enter small{font-size:12px;font-weight:800;opacity:.9}
.login-method-picker{grid-template-columns:1fr;gap:12px;text-align:left;margin-top:2px}.login-choice-head{text-align:center;margin:0 0 2px}.login-choice-head h2{font-size:22px;margin:0;color:#0f172a;letter-spacing:-.02em}.login-choice-head p{margin:5px 0 0;color:#64748b;font-size:14px}
.login-choice-card{grid-template-columns:52px 1fr;justify-items:start;text-align:left;align-items:center;gap:3px 12px;padding:14px;border-radius:20px}.login-choice-card .login-choice-icon{grid-row:1/3;width:52px;height:52px;border-radius:18px;background:#fff7ed;color:#f97316;font-size:24px;box-shadow:inset 0 0 0 1px #fed7aa}.login-choice-card strong{font-size:15px;color:#0f172a}.login-choice-card small{font-size:12px;line-height:1.35;color:#64748b;font-weight:700}.login-choice-card.active{background:#fff7ed;border-color:#fdba74}
.login-focus-panel{padding:16px;display:grid;gap:14px;text-align:left;background:linear-gradient(180deg,#fff,#fffaf7);border-color:#fed7aa;box-shadow:0 18px 44px rgba(249,115,22,.08)}.login-focus-panel[hidden]{display:none!important}
.login-focus-top{display:grid;grid-template-columns:40px 52px 1fr;align-items:center;gap:11px;background:#fff7ed;border:1px solid #fed7aa;border-radius:20px;padding:11px}.login-focus-top strong{display:block;font-size:16px;color:#0f172a}.login-focus-top small{display:block;margin-top:2px;color:#64748b;line-height:1.35;font-weight:700}.login-focus-back{width:40px;height:40px;border:0;border-radius:15px;background:#fff;color:#f97316;font-size:22px;font-weight:900;cursor:pointer;box-shadow:0 8px 20px rgba(249,115,22,.12)}.login-focus-back:hover{transform:translateY(-1px)}.login-focus-icon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;color:#fff;font-size:24px;box-shadow:0 12px 24px rgba(249,115,22,.22)}.login-focus-icon.email{background:linear-gradient(135deg,#f97316,#ea580c)}.login-focus-icon.qr{background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 12px 24px rgba(37,99,235,.22)}
.login-form-clean{background:#fff;border:1px solid #f1f5f9;border-radius:20px;padding:14px}.login-form-clean label span,.qr-pin-form-focus label span{color:#334155}.login-form-clean input,.qr-pin-form-focus input{background:#f8fafc;border-color:#e2e8f0}.login-form-clean input:focus,.qr-pin-form-focus input:focus{background:#fff;border-color:#f97316;box-shadow:0 0 0 4px rgba(249,115,22,.12)}
.qr-scan-box-focus{min-height:310px;border-radius:26px;border:1px solid #fed7aa;background:linear-gradient(135deg,#111827,#0f172a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 18px 44px rgba(15,23,42,.1)}.qr-scan-box-focus #qrScannerVideo{height:310px}.qr-empty-icon{width:66px;height:66px;border-radius:24px;background:#fff;color:#f97316;display:grid;place-items:center;font-size:30px;box-shadow:0 14px 30px rgba(15,23,42,.18)}.qr-scan-empty-focus{color:#fff}.qr-scan-empty-focus small{color:#cbd5e1;max-width:260px}.qr-corner{position:absolute;width:34px;height:34px;border-color:#f97316;z-index:2;pointer-events:none}.qr-corner.tl{left:18px;top:18px;border-left:4px solid;border-top:4px solid;border-radius:13px 0 0 0}.qr-corner.tr{right:18px;top:18px;border-right:4px solid;border-top:4px solid;border-radius:0 13px 0 0}.qr-corner.bl{left:18px;bottom:18px;border-left:4px solid;border-bottom:4px solid;border-radius:0 0 0 13px}.qr-corner.br{right:18px;bottom:18px;border-right:4px solid;border-bottom:4px solid;border-radius:0 0 13px 0}.qr-pin-form-focus{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:14px}.qr-pin-form-focus[hidden]{display:none!important}.login-qr-view .qr-success-card{border-radius:18px}
@media(max-width:520px){.login-focus-card{padding:22px;border-radius:30px}.login-brand-area h1{font-size:30px}.login-focus-top{grid-template-columns:38px 46px 1fr;padding:10px;border-radius:18px}.login-focus-back{width:38px;height:38px}.login-focus-icon{width:46px;height:46px;border-radius:16px;font-size:21px}.login-choice-card{grid-template-columns:48px 1fr;padding:13px}.login-choice-card .login-choice-icon{width:48px;height:48px}.qr-scan-box-focus{min-height:280px}.qr-scan-box-focus #qrScannerVideo{height:280px}.login-form-clean,.qr-pin-form-focus{padding:12px}.login-focus-panel{padding:13px;border-radius:22px}}
@media(max-width:380px){.login-focus-card{padding:18px}.login-focus-top{grid-template-columns:1fr;justify-items:center;text-align:center}.login-focus-back{justify-self:start}.login-focus-top div:last-child{text-align:center}.qr-scan-box-focus{min-height:250px}.qr-scan-box-focus #qrScannerVideo{height:250px}}

/* Revisi akses foto/video admin */
.settings-mini-panel {
    border: 1px solid rgba(15, 23, 42, .08);
    background: #fff7ed;
    border-radius: 18px;
    padding: 16px;
    display: grid;
    gap: 12px;
}

.settings-mini-panel strong {
    display: block;
    color: #111827;
    margin-bottom: 3px;
}

.settings-mini-panel small {
    color: #6b7280;
}

.toggle-row {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(249, 115, 22, .14);
    cursor: pointer;
}

.toggle-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #f97316;
}

.toggle-row span {
    font-weight: 700;
    color: #374151;
}

.media-access-notice {
    border-radius: 18px;
    padding: 14px 16px;
    display: grid;
    gap: 4px;
    border: 1px solid rgba(15, 23, 42, .08);
}

.media-access-notice strong {
    color: #111827;
}

.media-access-notice span {
    color: #6b7280;
    font-size: 13px;
}

.media-access-notice.is-allowed {
    background: #ecfdf5;
    border-color: rgba(34, 197, 94, .2);
}

.media-access-notice.is-blocked {
    background: #fff1f2;
    border-color: rgba(239, 68, 68, .2);
}

.media-access-cell {
    min-width: 180px;
}

.media-access-form {
    display: grid;
    gap: 8px;
    align-items: start;
}

.media-access-form select {
    min-width: 145px;
    padding: 9px 10px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .12);
    background: #fff;
    font-weight: 700;
    color: #334155;
}

.media-access-form small {
    color: #6b7280;
    line-height: 1.35;
}

.branding-current-media strong {
    color: #ea580c;
}

#cameraToggleBtn:disabled,
.report-form button[type="submit"]:disabled {
    opacity: .58;
    cursor: not-allowed;
}

@media (max-width: 760px) {
    .media-access-form {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .media-access-form small {
        grid-column: 1 / -1;
    }

    .settings-mini-panel {
        padding: 14px;
    }
}

/* Revisi: Mobile lebih rapi, khusus Manajemen User dan halaman lain */
@media (max-width: 820px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .app-shell,
    .main-content,
    .panel,
    .hero-card,
    .stat-card,
    .table-wrap,
    .mobile-card-table,
    .mobile-card-table tbody,
    .mobile-card-table tr,
    .mobile-card-table td,
    .form-stack,
    .filter-bar,
    .request-card,
    .report-item,
    .info-list,
    .pdf-report-area,
    .branding-layout,
    .user-management-layout,
    .user-form-card,
    .user-list-card {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .main-content {
        overflow-x: hidden;
    }

    .panel-header,
    .panel-header.wrap {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
        gap: 10px;
    }

    .panel-header .btn,
    .panel-header a.btn {
        width: 100%;
        justify-content: center;
    }

    input,
    textarea,
    select,
    button,
    .btn {
        max-width: 100%;
    }

    .btn {
        white-space: normal;
        line-height: 1.25;
    }

    .action-cell,
    .split-actions,
    .quick-filter-row,
    .filter-bar {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 9px;
    }

    .action-cell .btn,
    .action-cell .inline-form,
    .action-cell .inline-form button,
    .split-actions .btn,
    .quick-filter-row .btn,
    .filter-bar .btn {
        width: 100%;
        justify-content: center;
    }

    .report-item {
        align-items: flex-start;
    }

    .report-item > div,
    .report-item h3,
    .report-item p,
    .report-item small,
    .info-list strong,
    .info-list span {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Tabel mobile jadi card, bukan geser kanan-kiri */
    .table-wrap {
        width: 100%;
        overflow-x: visible !important;
    }

    .mobile-card-table {
        table-layout: fixed;
    }

    .mobile-card-table tr {
        width: 100%;
        overflow: hidden;
    }

    .mobile-card-table td {
        min-width: 0 !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .mobile-card-table td::before {
        content: attr(data-label) !important;
    }

    /* Manajemen User admin: card mobile yang lebih clean */
    .user-management-layout {
        gap: 14px;
    }

    .user-form-card,
    .user-list-card {
        overflow: hidden;
        border-radius: 26px;
    }

    .user-list-card .table-wrap {
        margin: 0;
    }

    .user-table,
    .user-table thead,
    .user-table tbody,
    .user-table tr,
    .user-table th,
    .user-table td {
        display: block !important;
        width: 100% !important;
    }

    .user-table thead {
        display: none !important;
    }

    .user-table tr {
        background: #fff;
        border: 1px solid rgba(249,115,22,.14);
        border-radius: 24px;
        padding: 14px;
        margin-bottom: 14px;
        box-shadow: 0 12px 30px rgba(15,23,42,.06);
    }

    .user-table td {
        display: grid !important;
        grid-template-columns: 1fr;
        justify-items: stretch;
        text-align: left !important;
        gap: 8px;
        padding: 10px 0 !important;
        border: 0 !important;
    }

    .user-table td + td {
        border-top: 1px solid #f1f5f9 !important;
    }

    .user-table td::before {
        content: attr(data-label) !important;
        min-width: 0 !important;
        color: #94a3b8;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .07em;
        line-height: 1.2;
    }

    .user-identity {
        display: grid;
        grid-template-columns: 42px minmax(0,1fr);
        align-items: start;
        width: 100%;
        min-width: 0;
    }

    .user-identity > div,
    .user-identity strong,
    .user-identity small {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .media-access-cell,
    .qr-login-cell {
        min-width: 0 !important;
    }

    .media-access-form,
    .qr-mini-form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }

    .media-access-form select,
    .media-access-form button,
    .qr-mini-form input,
    .qr-mini-form button,
    .qr-admin-box,
    .qr-admin-box details,
    .qr-admin-box summary,
    .qr-admin-box small,
    .qr-admin-box a,
    .qr-admin-box form {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
    }

    .qr-admin-box {
        overflow: hidden;
    }

    .qr-admin-box details {
        overflow: hidden;
    }

    .qr-admin-img {
        width: min(190px, 100%);
        height: auto;
    }

    .user-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .user-actions .btn,
    .user-actions .inline-form,
    .user-actions .inline-form button {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    /* Form dan filter mobile biar tidak pecah */
    .form-stack label,
    .compact-field,
    .filter-bar label {
        min-width: 0;
        width: 100%;
    }

    .filter-bar input,
    .filter-bar select,
    .filter-bar button,
    .compact-field input,
    .compact-field select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .profile-stats.cards-3,
    .pdf-summary-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 430px) {
    .user-table tr {
        padding: 12px;
        border-radius: 22px;
    }

    .user-actions {
        grid-template-columns: 1fr !important;
    }

    .user-identity {
        grid-template-columns: 38px minmax(0,1fr);
    }

    .user-avatar-small {
        width: 38px;
        height: 38px;
        border-radius: 13px;
    }

    .profile-stats.cards-3,
    .pdf-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* Revisi: tombol jepret/rekam berada tepat di atas tombol tutup kamera */
.preview-box.camera-open .camera-actions{position:relative;z-index:2}
.preview-box.camera-open .camera-toggle-row{padding-top:10px}
@media (max-width:520px){
    .preview-box.camera-open .camera-actions{display:grid;grid-template-columns:1fr;gap:8px;padding:12px}
    .preview-box.camera-open .camera-actions .btn{width:100%;min-width:0;padding:13px 14px}
    .preview-box.camera-open .camera-toggle-row{padding:10px 12px 12px}
}

/* Revisi: hilangkan warna biru saat tap/klik di mobile */
html,
body,
a,
button,
summary,
label,
.btn,
.card,
.stat-card,
.nav-link,
.sidebar,
.mobile-bottom-nav,
.mobile-nav,
.mobile-nav a,
.mobile-nav button,
.report-card,
.user-table,
.user-table tr,
.user-table td,
.accordion-item,
.accordion-header,
.qr-card,
.preview-box,
.camera-actions,
.camera-toggle-row {
    -webkit-tap-highlight-color: transparent;
}

button,
.btn,
a,
summary,
.mobile-nav a,
.mobile-nav button,
.camera-actions .btn,
.camera-toggle-row .btn {
    touch-action: manipulation;
}

button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
a:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

@media (hover: none) and (pointer: coarse) {
    body,
    .app-shell,
    .sidebar,
    .topbar,
    .mobile-bottom-nav,
    .mobile-nav,
    .mobile-nav *,
    .nav-link,
    .dashboard-card,
    .stat-card,
    .report-card,
    .user-table,
    .user-table tr,
    .user-table td,
    .user-identity,
    .user-actions,
    .qr-card,
    .accordion-header,
    .camera-actions,
    .camera-toggle-row,
    .login-brand,
    .login-choice,
    .login-method-card,
    .status-chip,
    .badge {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    input,
    textarea,
    select,
    option,
    [contenteditable="true"],
    .selectable-text,
    .report-description,
    .note-text {
        -webkit-user-select: text;
        user-select: text;
        -webkit-touch-callout: default;
    }

    img,
    video,
    canvas,
    svg {
        -webkit-user-drag: none;
        user-drag: none;
    }
}

/* Revisi: info kompresi foto/video */
.media-compress-notice{
    border:1px solid rgba(249,115,22,.22);
    background:#fff7ed;
    color:#9a3412;
    border-radius:18px;
    padding:13px 16px;
    display:grid;
    gap:4px;
}
.media-compress-notice strong{color:#c2410c}
.media-compress-notice span{font-size:13px;color:#9a3412;line-height:1.45}
.media-quality-panel{background:#fff7ed;border-color:#fed7aa}

/* Revisi: Tambah Laporan dibuat bertahap agar mobile lebih enak */
.report-wizard-panel{max-width:860px;margin:0 auto}
.report-wizard-form{gap:18px}
.report-stepper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:4px}
.report-stepper-item{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--border);border-radius:16px;background:#fff;color:#64748b;min-width:0}
.report-stepper-item span{width:28px;height:28px;border-radius:10px;background:#f1f5f9;color:#64748b;display:grid;place-items:center;font-weight:900;flex:none}
.report-stepper-item strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.report-stepper-item.is-active{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8;box-shadow:0 10px 24px rgba(37,99,235,.08)}
.report-stepper-item.is-active span{background:var(--primary);color:#fff}
.report-stepper-item.is-done{border-color:#bbf7d0;background:#f0fdf4;color:#15803d}
.report-stepper-item.is-done span{background:#16a34a;color:#fff}
.report-step{display:grid;gap:16px;animation:reportStepFade .18s ease-out}
@keyframes reportStepFade{from{opacity:.55;transform:translateY(6px)}to{opacity:1;transform:none}}
.step-title-card{border:1px solid rgba(249,115,22,.16);background:linear-gradient(135deg,#fff7ed,#ffffff);border-radius:22px;padding:16px 18px}
.step-title-card span{display:inline-flex;padding:5px 9px;border-radius:999px;background:#ffedd5;color:#c2410c;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.step-title-card h3{margin:9px 0 5px;font-size:22px;line-height:1.2}
.step-title-card p{margin:0;color:#64748b;line-height:1.5}
.report-step-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;align-items:center}
.report-step-actions.single{grid-template-columns:1fr}
.report-step-actions.final{grid-template-columns:1fr 1.4fr}
.report-final-meta{margin-top:0}
.report-step .preview-box{margin-bottom:0}
.report-step input[readonly]{background:#f8fafc;color:#334155;cursor:not-allowed}
@media (max-width:820px){
    .report-wizard-panel{border-radius:24px;padding:14px}
    .report-stepper{gap:7px}
    .report-stepper-item{display:grid;justify-items:center;text-align:center;padding:8px 4px;border-radius:15px;gap:5px}
    .report-stepper-item span{width:26px;height:26px;border-radius:9px;font-size:12px}
    .report-stepper-item strong{font-size:10.5px;max-width:100%}
    .step-title-card{border-radius:20px;padding:14px}
    .step-title-card h3{font-size:19px}
    .step-title-card p{font-size:13px}
    .report-step-actions,.report-step-actions.final{grid-template-columns:1fr;gap:8px}
    .report-step-actions .btn{width:100%;padding:13px 14px}
}

/* Revisi: Admin dapat hapus histori aktivitas dan reset ID database */
.maintenance-card{
    grid-column:1/-1;
    background:linear-gradient(135deg,#fff,#fff7ed);
}
.maintenance-summary{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-bottom:16px;
}
.maintenance-summary div{
    background:#fff;
    border:1px solid #fed7aa;
    border-radius:18px;
    padding:13px;
    display:grid;
    gap:4px;
}
.maintenance-summary span{
    color:#9a3412;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.maintenance-summary strong{
    font-size:24px;
    color:#0f172a;
}
.maintenance-actions-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.maintenance-action-box{
    margin:0;
    background:#fff;
}
.maintenance-action-box label span{
    font-size:13px;
    font-weight:900;
    color:#334155;
}
.maintenance-action-box input{
    text-transform:uppercase;
}
@media (max-width:820px){
    .maintenance-summary,
    .maintenance-actions-grid{
        grid-template-columns:1fr;
    }
    .maintenance-card{
        border-radius:24px;
    }
}

/* Revisi: Pengajuan Pengawas Admin menjadi tabel accordion + hapus permanen */
.panel-header-wrap{align-items:flex-start;flex-wrap:wrap}.muted.compact{margin-top:6px;color:var(--muted);font-size:14px;line-height:1.5}.request-table-accordion{display:grid;gap:10px}.request-table-head,.request-table-row{display:grid;grid-template-columns:1.1fr 1.1fr 1.5fr .9fr 1.1fr 36px;gap:12px;align-items:center}.request-table-head{padding:0 16px 8px;color:#64748b;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.request-table-item{border:1px solid var(--border);border-radius:22px;background:#fff;box-shadow:0 10px 30px rgba(15,23,42,.04);overflow:hidden}.request-table-row{width:100%;border:0;background:#fff;padding:15px 16px;text-align:left;cursor:pointer;color:var(--text);transition:background .15s ease}.request-table-row:hover{background:#fff7ed}.request-table-item.is-open .request-table-row{background:#fff7ed;border-bottom:1px solid #fed7aa}.request-cell{display:grid;gap:4px;min-width:0}.request-cell strong,.request-cell small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.request-cell strong{font-size:14px;color:#0f172a}.request-cell small{font-size:12px;color:#64748b}.request-cell.primary strong{color:#ea580c}.status-cell .badge{justify-self:start}.request-chevron{width:30px;height:30px;border-radius:999px;background:#f8fafc;display:grid;place-items:center;font-size:18px;color:#64748b;transition:transform .18s ease,background .18s ease}.request-table-item.is-open .request-chevron{transform:rotate(180deg);background:#ffedd5;color:#ea580c}.request-table-detail{padding:16px;background:#fffaf5}.request-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.request-detail-box{background:#fff;border:1px solid #fed7aa;border-radius:18px;padding:14px;min-width:0}.request-detail-box h3{margin:0 0 12px;font-size:15px;color:#9a3412}.request-note-area{grid-column:1/-1}.detail-list.compact-list{display:grid;gap:9px}.detail-list.compact-list div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:start;border-bottom:1px solid #f1f5f9;padding-bottom:8px}.detail-list.compact-list div:last-child{border-bottom:0;padding-bottom:0}.detail-list.compact-list span{color:#64748b;font-size:13px}.detail-list.compact-list strong{font-size:13px;word-break:break-word;color:#0f172a}.request-detail-actions{display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px;margin-top:14px}.request-review-inline{min-width:min(100%,420px);background:#fff;border:1px solid #fed7aa;border-radius:18px;padding:12px}.request-review-inline textarea{width:100%}.request-detail-actions form{margin:0}.request-detail-actions .btn{white-space:normal}.request-table-detail .note-box.small{background:#fff7ed;border-color:#fed7aa;color:#334155}.request-table-detail .note-box.small strong{color:#9a3412}
@media (max-width:920px){.request-table-head{display:none}.request-table-row{grid-template-columns:1fr 34px;gap:10px;padding:14px}.request-cell{padding:0}.request-cell.status-cell,.request-cell.time-cell{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.request-cell:not(.primary){margin-top:2px}.request-cell.primary{grid-column:1/2}.request-chevron{grid-column:2/3;grid-row:1/2;align-self:center}.request-table-row .request-cell:nth-child(2),.request-table-row .request-cell:nth-child(3),.request-table-row .request-cell:nth-child(4),.request-table-row .request-cell:nth-child(5){grid-column:1/-1}.request-cell strong,.request-cell small{white-space:normal}.request-detail-grid{grid-template-columns:1fr}.request-table-detail{padding:12px}.detail-list.compact-list div{grid-template-columns:1fr;gap:3px}.request-detail-actions{display:grid;grid-template-columns:1fr}.request-detail-actions .btn,.request-detail-actions form{width:100%}.request-review-inline{min-width:0}.split-actions{grid-template-columns:1fr}}

/* Revisi: Admin Analisa Data */
.analysis-hero{margin-bottom:16px}.analysis-filter-panel{margin-bottom:16px}.analysis-cover{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px;background:linear-gradient(135deg,#fff,#fff7ed)}.analysis-cover h2{margin:2px 0 6px;font-size:28px}.analysis-cover p{margin:0;color:#64748b}.analysis-cover-meta{min-width:230px;background:#0f172a;color:#fff;border-radius:22px;padding:16px;text-align:right;box-shadow:0 16px 34px rgba(15,23,42,.16);display:grid;gap:4px}.analysis-cover-meta span,.analysis-cover-meta small{color:#cbd5e1}.analysis-summary-grid{margin-bottom:16px}.analysis-mini-grid{margin-bottom:18px}.analysis-mini-card{display:grid;gap:6px;min-height:128px}.analysis-mini-card span{font-weight:900;color:#f97316}.analysis-mini-card strong{font-size:32px;color:#0f172a}.analysis-mini-card small{color:#64748b}.analysis-chart-layout{margin-bottom:18px}.analysis-chart-card{min-height:360px}.analysis-bar-chart{display:grid;gap:10px}.analysis-bar-row{display:grid;grid-template-columns:72px minmax(0,1fr) 38px 62px;gap:10px;align-items:center}.analysis-bar-label{font-size:12px;font-weight:900;color:#64748b}.analysis-bar-track{height:16px;border-radius:999px;background:#f1f5f9;overflow:hidden}.analysis-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#f97316,#fb923c);box-shadow:0 8px 16px rgba(249,115,22,.2)}.analysis-bar-row strong{font-size:14px;text-align:right}.analysis-bar-row small{font-size:12px;color:#64748b}.analysis-hour-chart{height:184px;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:5px;align-items:end;padding:12px 4px 4px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:20px}.analysis-hour-item{display:grid;gap:4px;justify-items:center;align-items:end;min-width:0}.analysis-hour-bar{width:100%;max-width:18px;border-radius:999px 999px 5px 5px;background:linear-gradient(180deg,#3b82f6,#2563eb)}.analysis-hour-item span{font-size:10px;color:#64748b;writing-mode:vertical-rl;transform:rotate(180deg);line-height:1}.analysis-hour-item small{font-size:10px;font-weight:900;color:#0f172a}.analysis-highlight-box{margin-top:14px;background:#fff7ed;border:1px solid #fed7aa;border-radius:18px;padding:14px;display:grid;gap:3px}.analysis-highlight-box span{font-size:12px;font-weight:900;color:#c2410c;text-transform:uppercase;letter-spacing:.04em}.analysis-highlight-box strong{font-size:18px}.analysis-highlight-box small{color:#64748b}.analysis-user-section,.analysis-attendance-section,.analysis-bottom-layout{margin-bottom:18px}.analysis-user-table td strong{display:inline-block}.analysis-user-table .badge{margin:2px}.analysis-attendance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.analysis-attendance-card{border:1px solid #e2e8f0;border-radius:24px;background:#fff;box-shadow:0 14px 34px rgba(15,23,42,.05);padding:16px;display:grid;gap:14px}.analysis-attendance-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.analysis-attendance-head strong{display:block}.analysis-attendance-head small{display:block;color:#64748b;margin-top:4px}.analysis-day-chip-grid{display:flex;flex-wrap:wrap;gap:7px}.analysis-day-chip{width:48px;min-height:48px;border-radius:14px;display:grid;place-items:center;padding:6px;border:1px solid #e2e8f0;background:#f8fafc;color:#64748b;text-align:center}.analysis-day-chip b{font-size:14px;line-height:1}.analysis-day-chip small{font-size:11px;font-weight:900;line-height:1}.analysis-day-chip.is-filled{background:#dcfce7;border-color:#bbf7d0;color:#166534}.analysis-day-chip.is-empty{background:#f1f5f9;border-color:#e2e8f0;color:#94a3b8}.compact-analysis-list{gap:10px}.compact-analysis-list .report-item{align-items:flex-start}.compact-analysis-list .report-item>div:last-child{min-width:0}.compact-analysis-list h3{font-size:16px}.compact-analysis-list p{font-size:13px;line-height:1.4;word-break:break-word}

@media (max-width:1100px){.analysis-chart-layout,.analysis-bottom-layout{grid-template-columns:1fr}.analysis-attendance-grid{grid-template-columns:1fr}}
@media (max-width:820px){.analysis-cover{display:grid;border-radius:26px;margin-top:-42px;position:relative;z-index:2}.analysis-cover-meta{text-align:left;min-width:0}.analysis-summary-grid{margin-top:0}.analysis-mini-grid.cards-3{grid-template-columns:1fr 1fr 1fr}.analysis-mini-card{min-height:112px;text-align:center;padding:14px}.analysis-mini-card strong{font-size:24px}.analysis-chart-card{min-height:auto}.analysis-bar-row{grid-template-columns:58px minmax(0,1fr) 30px;gap:8px}.analysis-bar-row small{grid-column:2/-1;margin-top:-6px}.analysis-hour-chart{overflow:visible;gap:3px;height:174px}.analysis-hour-item span{font-size:9px}.analysis-hour-item small{font-size:9px}.analysis-user-table td:nth-child(1):before{content:'User'}.analysis-user-table td:nth-child(2):before{content:'Laporan'}.analysis-user-table td:nth-child(3):before{content:'Media'}.analysis-user-table td:nth-child(4):before{content:'Ukuran'}.analysis-user-table td:nth-child(5):before{content:'Jam Aktif'}.analysis-user-table td:nth-child(6):before{content:'Rentang'}.analysis-user-table td:nth-child(7):before{content:'Status'}.analysis-user-table td{align-items:flex-start}.analysis-user-table td:nth-child(1){display:block;text-align:left}.analysis-user-table td:nth-child(1):before{display:block;margin-bottom:6px}.analysis-user-table .user-identity{justify-content:flex-start}.analysis-attendance-card{border-radius:22px;padding:14px}.analysis-attendance-head{display:grid}.analysis-attendance-head .badge{justify-self:start}.analysis-day-chip{width:42px;min-height:42px;border-radius:12px}.analysis-day-chip b{font-size:13px}.analysis-day-chip small{font-size:10px}}
@media (max-width:430px){.analysis-mini-grid.cards-3{grid-template-columns:1fr}.analysis-bar-row{grid-template-columns:50px minmax(0,1fr) 28px}.analysis-hour-chart{grid-template-columns:repeat(12,minmax(0,1fr));height:auto;align-items:end}.analysis-hour-item{min-height:106px}.analysis-hour-item span{writing-mode:horizontal-tb;transform:none}.analysis-day-chip{width:39px;min-height:39px}.analysis-cover h2{font-size:22px}}

@media print{.analysis-filter-panel,.analysis-hero .action-cell{display:none!important}.analysis-cover{box-shadow:none!important;border:0!important;background:#fff!important;padding:0 0 6mm!important;margin:0 0 5mm!important}.analysis-cover-meta{background:#fff7ed!important;color:#0f172a!important;border:1px solid #fed7aa!important;box-shadow:none!important}.analysis-summary-grid,.analysis-mini-grid{break-inside:avoid;page-break-inside:avoid}.analysis-chart-layout,.analysis-bottom-layout{grid-template-columns:1fr!important}.analysis-chart-card,.analysis-user-section,.analysis-attendance-section,.analysis-bottom-layout>.panel{break-inside:avoid;page-break-inside:avoid;margin-bottom:5mm!important;box-shadow:none!important}.analysis-attendance-grid{grid-template-columns:1fr!important}.analysis-hour-chart{height:42mm!important}.analysis-day-chip{break-inside:avoid}}

/* Revisi: login QR lebih personal + tombol kembali lebih jelas */
.login-focus-top{
    grid-template-columns:minmax(136px,auto) 52px minmax(0,1fr)!important;
}
.login-focus-back-detail{
    min-height:42px;
    border:0;
    border-radius:16px;
    background:#fff;
    color:#f97316;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 13px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(249,115,22,.12);
    white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
}
.login-focus-back-detail span{
    width:24px;
    height:24px;
    border-radius:10px;
    background:#fff7ed;
    display:grid;
    place-items:center;
    font-size:17px;
    line-height:1;
}
.login-focus-back-detail strong{
    color:#f97316!important;
    font-size:12px!important;
    letter-spacing:.01em;
}
.login-focus-back-detail:hover{transform:translateY(-1px)}
.qr-user-confirm-card{
    background:linear-gradient(135deg,#ecfdf5,#f0fdf4);
    border-color:#86efac;
    box-shadow:0 14px 30px rgba(22,163,74,.08);
}
.qr-user-confirm-card [data-qr-welcome-title]{
    font-size:15px;
    color:#064e3b;
}
.qr-user-confirm-card [data-qr-welcome-text]{
    color:#047857;
}
@media(max-width:520px){
    .login-focus-top{
        grid-template-columns:1fr!important;
        justify-items:center;
        text-align:center;
        gap:10px;
    }
    .login-focus-back-detail{
        width:100%;
        justify-self:stretch;
    }
    .login-focus-top>div:last-child{text-align:center}
}

.inline-input-unit{display:flex;align-items:center;gap:10px;width:100%}.inline-input-unit input{flex:1;min-width:0}.inline-input-unit strong{background:#f8fafc;border:1px solid var(--border);border-radius:14px;padding:11px 14px;color:#334155;white-space:nowrap}.auto-logout-panel{border-color:#fed7aa;background:linear-gradient(180deg,#fff7ed,#fff)}.auto-logout-panel .toggle-row{background:#fff}
@media (max-width:640px){.inline-input-unit{align-items:stretch}.inline-input-unit strong{display:grid;place-items:center;min-width:72px}.auto-logout-panel{border-radius:20px}}

/* Revisi: banyak foto/video dalam satu laporan */
.multi-media-summary {
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(249, 115, 22, .08);
    color: #9a3412;
    font-weight: 800;
    margin-bottom: 12px;
}

.multi-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    width: 100%;
}

.multi-media-card {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
    display: grid;
    gap: 8px;
}

.multi-media-card img,
.multi-media-card video {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 14px;
    background: #0f172a;
}

.multi-media-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.multi-media-head span {
    color: #f97316;
    font-weight: 800;
    font-size: 12px;
}

.multi-media-card small {
    color: #64748b;
    font-size: 12px;
}

.multi-media-remove {
    justify-self: stretch;
}

.report-media-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.report-media-gallery.is-multiple {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.report-media-item {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 20px;
    padding: 12px;
    background: #fff;
    display: grid;
    gap: 10px;
}

.report-media-item .main-media {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    border-radius: 16px;
    background: #0f172a;
}

.media-item-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.media-item-head span,
.report-media-item small {
    color: #64748b;
    font-size: 12px;
}

.pdf-media-list-box {
    display: grid;
    gap: 10px;
}

.pdf-media-mini {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    padding: 8px;
    display: grid;
    gap: 6px;
    background: #fff;
}

.pdf-media-mini img {
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    border-radius: 10px;
}

@media (max-width: 640px) {
    .multi-media-grid,
    .report-media-gallery.is-multiple {
        grid-template-columns: 1fr;
    }

    .media-item-head {
        align-items: flex-start;
        flex-direction: column;
    }
}



/* Revisi: rapikan ukuran foto profil user */
.topbar-user-profile{
    display:flex!important;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    max-width:280px;
    min-width:0;
}
.topbar-user-profile>div{min-width:0;display:grid;gap:2px}
.topbar-user-profile span:not(.topbar-avatar){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.topbar-user-profile small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}

.topbar-avatar,
.user-avatar-small,
.profile-avatar,
.admin-profile-preview,
.admin-user-photo{
    display:grid!important;
    place-items:center!important;
    flex:0 0 auto!important;
    overflow:hidden!important;
    background:#fff7ed;
    color:#f97316;
    font-weight:900;
    line-height:1;
    border:1px solid rgba(249,115,22,.18);
}
.topbar-avatar{width:38px!important;height:38px!important;border-radius:14px!important;font-size:15px!important}
.user-avatar-small{width:42px!important;height:42px!important;border-radius:14px!important;font-size:15px!important}
.profile-avatar{width:78px!important;height:78px!important;border-radius:26px!important;font-size:30px!important}
.admin-profile-preview{width:58px!important;height:58px!important;border-radius:20px!important;font-size:20px!important}
.admin-user-photo{width:48px!important;height:48px!important;border-radius:16px!important;font-size:16px!important}

.topbar-avatar img,
.user-avatar-small img,
.profile-avatar img,
.admin-profile-preview img,
.admin-user-photo img{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    display:block!important;
    object-fit:cover!important;
    object-position:center!important;
    border-radius:inherit!important;
    margin:0!important;
    padding:0!important;
}
.topbar-avatar.has-photo,
.user-avatar-small.has-photo,
.profile-avatar.has-photo,
.admin-profile-preview.has-photo,
.admin-user-photo.has-photo{
    background:#f8fafc!important;
    color:transparent!important;
    padding:0!important;
}

.profile-photo-field{display:grid;gap:9px;min-width:0}
.profile-photo-field>span{font-size:14px;font-weight:900;color:#334155}
.profile-photo-field small,.profile-photo-cell small{font-size:12px;line-height:1.4;color:#64748b}
.profile-photo-preview-row,.profile-photo-control{display:flex;align-items:center;gap:10px;min-width:0;width:100%}
.profile-photo-control{align-items:start}
.profile-photo-cell{min-width:220px;max-width:260px}
.profile-photo-mini-form{display:grid;gap:8px;min-width:0;width:100%}
.profile-photo-mini-form .btn{width:100%;justify-content:center}
.file-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;max-width:100%;border:1px dashed #cbd5e1;background:#f8fafc;color:#334155;border-radius:14px;padding:10px 12px;font-weight:900;cursor:pointer;overflow:hidden;text-align:center}
.file-pill input{position:absolute;inset:0;opacity:0;cursor:pointer}
.file-pill span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.file-pill.compact{width:100%;padding:9px 10px}

.profile-hero{min-width:0}
.profile-hero>div:last-child{min-width:0}
.profile-hero h2{word-break:break-word;line-height:1.2}
.user-identity{min-width:0}
.user-identity>div{min-width:0}
.user-identity strong,.user-identity small{overflow:hidden;text-overflow:ellipsis;word-break:break-word}

@media (max-width:820px){
    .topbar-user-profile{display:none!important}
    .profile-photo-cell{min-width:0!important;max-width:none!important;width:100%!important}
    .profile-photo-mini-form{width:100%!important}
    .profile-photo-control{display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;gap:10px!important;align-items:center!important}
    .profile-photo-preview-row{display:grid!important;grid-template-columns:58px minmax(0,1fr)!important;align-items:center!important}
    .file-pill,.file-pill.compact{width:100%!important;max-width:100%!important}
    .profile-hero{display:grid!important;grid-template-columns:74px minmax(0,1fr)!important;align-items:center!important;gap:12px!important}
    .profile-avatar{width:68px!important;height:68px!important;border-radius:23px!important;font-size:26px!important}
    .user-table td:nth-child(1):before{content:'Pengguna'}
    .user-table td:nth-child(2):before{content:'Foto Profil'}
    .user-table td:nth-child(3):before{content:'Role'}
    .user-table td:nth-child(4):before{content:'Status'}
    .user-table td:nth-child(5):before{content:'Akses Media'}
    .user-table td:nth-child(6):before{content:'QR Login'}
    .user-table td:nth-child(7):before{content:'Aksi'}
}
@media (max-width:430px){
    .profile-hero{grid-template-columns:1fr!important;text-align:center!important;justify-items:center!important}
    .profile-hero .badge{justify-content:center!important}
    .profile-photo-preview-row{grid-template-columns:54px minmax(0,1fr)!important}
    .admin-profile-preview{width:54px!important;height:54px!important;border-radius:18px!important}
    .profile-photo-control{grid-template-columns:44px minmax(0,1fr)!important}
    .admin-user-photo{width:44px!important;height:44px!important;border-radius:15px!important}
    .user-avatar-small{width:40px!important;height:40px!important;border-radius:14px!important}
}

/* Revisi: album bukti laporan + Manajemen User lebih rapi */
.report-album{display:grid;gap:14px;min-width:0}
.report-album-stage{min-width:0}
.report-album-slide{display:grid;gap:12px;min-width:0}
.report-album-counter{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:16px;background:#f8fafc;border:1px solid var(--border)}
.report-album-counter span{font-weight:900;color:#334155}
.report-album-counter strong{font-size:12px;color:#f97316;background:#fff7ed;border:1px solid #fed7aa;border-radius:999px;padding:6px 10px;white-space:nowrap}
.album-main-media{cursor:zoom-in;border:1px solid rgba(15,23,42,.08)}
.report-album-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.report-album-meta div{border:1px solid var(--border);border-radius:16px;background:#f8fafc;padding:11px 12px;min-width:0}
.report-album-meta span{display:block;color:#64748b;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
.report-album-meta strong{display:block;color:#0f172a;font-size:13px;overflow-wrap:anywhere}
.report-album-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:9px;padding:10px;border:1px solid var(--border);border-radius:18px;background:#f8fafc;max-height:210px;overflow:auto}
.report-album-thumb{position:relative;border:2px solid transparent;background:#fff;border-radius:16px;padding:5px;height:76px;display:grid;place-items:center;overflow:hidden;cursor:pointer;box-shadow:0 8px 18px rgba(15,23,42,.05);-webkit-tap-highlight-color:transparent}
.report-album-thumb img{width:100%;height:100%;object-fit:cover;border-radius:11px;display:block}
.report-album-thumb.is-active{border-color:#f97316;box-shadow:0 10px 24px rgba(249,115,22,.18)}
.album-thumb-number{position:absolute;top:5px;left:5px;width:22px;height:22px;border-radius:999px;background:#f97316;color:#fff;font-weight:900;font-size:11px;display:grid;place-items:center;z-index:1}
.album-video-thumb{width:100%;height:100%;border-radius:11px;background:#0f172a;color:#fff;display:grid;place-items:center;font-size:24px}
.album-mini-preview{position:relative;display:flex;align-items:center;gap:0;min-width:0}
.album-mini-item{width:42px;height:42px;border-radius:13px;border:2px solid #fff;background:#f1f5f9;display:grid;place-items:center;overflow:hidden;box-shadow:0 8px 18px rgba(15,23,42,.08);margin-left:-10px;flex:none;cursor:zoom-in}
.album-mini-item:first-child{margin-left:0}.album-mini-item img{width:100%;height:100%;object-fit:cover;display:block}.album-mini-item.is-video span{font-size:20px}.album-mini-more{width:34px;height:34px;border-radius:999px;background:#f97316;color:#fff;font-weight:900;display:grid;place-items:center;margin-left:-8px;border:2px solid #fff;box-shadow:0 8px 18px rgba(249,115,22,.18);font-size:12px}.media-thumb-album{width:104px;height:auto;min-height:72px;padding:8px;background:#fff7ed;border:1px solid #fed7aa}.media-thumb-album .album-mini-preview{justify-content:center}.table-album-preview .album-mini-item{width:38px;height:38px;border-radius:12px}.dashboard-album-preview .album-mini-item{width:40px;height:40px;border-radius:13px}
.app-image-lightbox{position:fixed;inset:0;background:rgba(15,23,42,.82);display:none;align-items:center;justify-content:center;padding:20px;z-index:9999}.app-image-lightbox.show{display:flex}.app-image-lightbox-card{position:relative;width:min(980px,100%);max-height:92vh;background:#fff;border-radius:24px;padding:14px;box-shadow:0 24px 80px rgba(0,0,0,.35);display:grid;gap:10px}.app-image-lightbox img{max-width:100%;max-height:76vh;object-fit:contain;border-radius:18px;background:#0f172a;margin:auto}.app-image-lightbox-title{font-weight:900;color:#0f172a;padding-right:48px;overflow-wrap:anywhere}.app-image-lightbox-close{position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;border-radius:14px;background:#f1f5f9;color:#0f172a;font-size:24px;font-weight:900;cursor:pointer}

.user-management-layout-v2{grid-template-columns:minmax(300px,420px) minmax(0,1fr);align-items:start}.user-form-card-v2{position:sticky;top:18px}.user-form-grid{grid-template-columns:1fr}.user-form-photo-field{border:1px solid #eef2f7;background:#f8fafc;border-radius:18px;padding:12px}.user-form-actions{display:grid;grid-template-columns:1fr;gap:10px}.admin-user-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}.admin-user-card{border:1px solid #e5e7eb;border-radius:24px;background:linear-gradient(180deg,#fff,#fffaf5);box-shadow:0 14px 34px rgba(15,23,42,.06);padding:16px;display:grid;gap:14px;min-width:0}.admin-user-card-head{display:grid;gap:12px;border-bottom:1px solid #f1f5f9;padding-bottom:13px}.admin-user-main{display:grid;grid-template-columns:44px minmax(0,1fr);gap:11px;align-items:center;min-width:0}.admin-user-main strong,.admin-user-main small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-user-main strong{font-size:16px;color:#0f172a}.admin-user-main small{color:#64748b;font-size:12px;margin-top:2px}.admin-user-badges{display:flex;flex-wrap:wrap;gap:6px}.admin-user-sections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.admin-user-section{border:1px solid #eef2f7;border-radius:18px;background:#fff;padding:12px;display:grid;gap:10px;align-content:start;min-width:0}.admin-user-section h3{margin:0;color:#334155;font-size:13px;text-transform:uppercase;letter-spacing:.04em}.admin-user-section .profile-photo-control{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center}.admin-user-section .inline-form,.admin-user-section .inline-form button,.admin-user-section .btn{width:100%;justify-content:center}.admin-user-section details{width:100%;min-width:0}.admin-user-section summary{cursor:pointer;font-weight:900;color:#f97316;background:#fff7ed;border-radius:13px;padding:9px 10px;-webkit-tap-highlight-color:transparent}.admin-user-section .qr-admin-img{display:block;margin:10px auto;width:min(180px,100%);height:auto;border-radius:16px}.admin-user-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;border-top:1px solid #f1f5f9;padding-top:13px}.admin-user-actions .btn,.admin-user-actions form,.admin-user-actions button{width:100%;justify-content:center;min-width:0}.qr-mini-form{display:grid;gap:8px}.qr-admin-box{display:grid;gap:8px}.media-access-form{display:grid;gap:8px}
@media(max-width:1200px){.user-management-layout-v2{grid-template-columns:1fr}.user-form-card-v2{position:static}.admin-user-sections{grid-template-columns:1fr 1fr}.admin-user-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.report-album-meta{grid-template-columns:1fr}.report-album-strip{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));max-height:180px}.report-album-thumb{height:66px;border-radius:14px}.report-album-counter{align-items:flex-start;flex-direction:column}.media-thumb-album{width:92px}.admin-user-card-grid{grid-template-columns:1fr}.admin-user-card{border-radius:22px;padding:13px}.admin-user-sections{grid-template-columns:1fr}.admin-user-actions{grid-template-columns:1fr}.admin-user-main{grid-template-columns:42px minmax(0,1fr)}.app-image-lightbox{padding:12px}.app-image-lightbox-card{border-radius:20px;padding:10px}.app-image-lightbox img{max-height:72vh}.report-item-album{align-items:flex-start}}

/* Revisi final: album bukti aktif + preview foto/video + layout lebih stabil */
*{box-sizing:border-box}
img,video,canvas,svg{max-width:100%;height:auto}
.panel,.card,.report-item,.admin-user-card,.admin-user-section{min-width:0;overflow-wrap:anywhere}
.report-album-hint{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:10px 12px;border:1px solid #fed7aa;background:#fff7ed;color:#9a3412;border-radius:16px;font-size:13px;font-weight:800;line-height:1.45}
.report-album-hint::before{content:'💡'}
.report-album-slide[hidden]{display:none!important}
.report-album-stage{border:1px solid #e2e8f0;border-radius:24px;padding:12px;background:linear-gradient(180deg,#ffffff,#f8fafc);box-shadow:0 14px 34px rgba(15,23,42,.05)}
.report-album-slide.is-active{animation:albumFade .18s ease both}@keyframes albumFade{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:none}}
.report-album-counter{position:relative;z-index:1}.album-main-media{display:block;width:100%;max-height:68vh;object-fit:contain;background:#0f172a;border-radius:20px;cursor:zoom-in}.report-album video.album-main-media{cursor:pointer}.report-album-strip{position:relative}.report-album-thumb{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;background:#fff}.report-album-thumb:active{transform:scale(.97)}.report-album-thumb:focus-visible,.album-mini-item:focus-visible{outline:3px solid rgba(249,115,22,.35);outline-offset:2px}.report-album-thumb.is-active::after{content:'Aktif';position:absolute;right:5px;bottom:5px;background:#16a34a;color:#fff;border-radius:999px;padding:3px 7px;font-size:9px;font-weight:900}.album-mini-preview{isolation:isolate}.album-mini-item{position:relative;transition:transform .16s ease;outline:none}.album-mini-item:hover{transform:translateY(-2px);z-index:5}.album-mini-item.is-video{background:linear-gradient(135deg,#0f172a,#334155);color:#fff}.album-mini-item.is-video::after{content:'Video';position:absolute;left:3px;right:3px;bottom:3px;background:rgba(15,23,42,.72);border-radius:999px;color:#fff;font-size:8px;font-weight:900;padding:2px 0;text-align:center}.media-thumb-album{overflow:visible}.app-media-lightbox{position:fixed;inset:0;background:rgba(15,23,42,.84);display:none;align-items:center;justify-content:center;padding:20px;z-index:10000;backdrop-filter:blur(5px)}.app-media-lightbox.show{display:flex}.media-preview-open{overflow:hidden}.app-media-lightbox-card{position:relative;width:min(980px,100%);max-height:92vh;background:#fff;border-radius:26px;padding:14px;box-shadow:0 24px 90px rgba(0,0,0,.38);display:grid;gap:10px}.app-media-lightbox-img,.app-media-lightbox-video{display:block;max-width:100%;max-height:76vh;object-fit:contain;border-radius:18px;background:#0f172a;margin:auto}.app-media-lightbox-video{width:100%}.app-media-lightbox-title{font-weight:900;color:#0f172a;padding-right:50px;overflow-wrap:anywhere;line-height:1.4}.app-media-lightbox-close{position:absolute;top:12px;right:12px;width:42px;height:42px;border:0;border-radius:15px;background:#f1f5f9;color:#0f172a;font-size:25px;font-weight:900;cursor:pointer;display:grid;place-items:center}.app-media-lightbox-close:hover{background:#fee2e2;color:#991b1b}

.admin-user-card-grid{align-items:start}.admin-user-card{padding:18px!important;gap:16px!important}.admin-user-card-head{grid-template-columns:1fr;gap:12px!important}.admin-user-main{grid-template-columns:54px minmax(0,1fr)!important}.admin-user-main .user-avatar-small{width:54px!important;height:54px!important;border-radius:18px!important}.admin-user-badges{align-items:center}.admin-user-sections{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);align-items:stretch}.admin-user-section{border-radius:20px!important;background:#fff!important;box-shadow:0 8px 22px rgba(15,23,42,.04);height:100%}.admin-user-section h3{display:flex;align-items:center;gap:6px}.admin-user-section.profile-section h3::before{content:'👤'}.admin-user-section.media-section h3::before{content:'🎥'}.admin-user-section.qr-section h3::before{content:'🔐'}.admin-user-actions{align-items:stretch}.admin-user-actions .btn,.admin-user-actions button{min-height:38px;white-space:normal;line-height:1.2}.profile-photo-control{min-width:0}.profile-photo-control .file-pill{min-width:0}.profile-photo-control .file-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qr-admin-box details[open]{border:1px solid #fed7aa;background:#fff7ed;border-radius:16px;padding:8px}.qr-admin-box details[open] summary{margin-bottom:8px}.qr-admin-img{background:#fff;padding:8px;border:1px solid #e2e8f0}
@media(max-width:1100px){.admin-user-sections{grid-template-columns:1fr 1fr}.admin-user-section.qr-section{grid-column:1/-1}}
@media(max-width:760px){body{overflow-x:hidden}.content,.main-content,.app-main{max-width:100vw;overflow-x:hidden}.report-album-stage{padding:9px;border-radius:20px}.album-main-media{max-height:54vh;border-radius:16px}.report-album-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:8px}.report-album-thumb{height:70px}.report-album-meta{gap:8px}.report-album-hint{font-size:12px;border-radius:14px}.album-mini-item{width:38px;height:38px;border-radius:12px}.album-mini-more{width:31px;height:31px;font-size:11px}.app-media-lightbox{padding:10px}.app-media-lightbox-card{border-radius:20px;padding:10px;max-height:94vh}.app-media-lightbox-img,.app-media-lightbox-video{max-height:72vh;border-radius:14px}.app-media-lightbox-title{font-size:14px;padding-right:46px}.admin-user-card-grid{grid-template-columns:1fr!important;gap:12px}.admin-user-card{padding:14px!important;border-radius:22px!important}.admin-user-main{grid-template-columns:48px minmax(0,1fr)!important}.admin-user-main .user-avatar-small{width:48px!important;height:48px!important}.admin-user-sections{grid-template-columns:1fr!important;gap:10px!important}.admin-user-section{padding:12px!important}.admin-user-actions{grid-template-columns:1fr 1fr!important;gap:8px!important}.admin-user-actions .btn,.admin-user-actions button{width:100%;min-height:42px}.profile-photo-control{grid-template-columns:46px minmax(0,1fr)!important}.admin-user-photo{width:46px!important;height:46px!important}.qr-mini-form,.media-access-form{gap:8px}.qr-admin-img{width:min(170px,100%)!important}}
@media(max-width:430px){.report-album-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-user-actions{grid-template-columns:1fr!important}.admin-user-main strong{white-space:normal!important;line-height:1.25}.admin-user-main small{white-space:normal!important;word-break:break-word}.panel-header.wrap{align-items:flex-start}}

/* Revisi: preview album bisa ganti bukti di dalam modal */
.app-media-lightbox-card{overflow:hidden}
.app-media-lightbox-stage{position:relative;display:grid;place-items:center;min-height:120px;background:#0f172a;border-radius:18px;overflow:hidden}
.app-media-lightbox-img,.app-media-lightbox-video{max-height:70vh!important;cursor:pointer}
.app-media-lightbox-video{cursor:default!important;background:#0f172a}
.app-media-lightbox-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.app-media-lightbox-counter{font-size:13px;font-weight:900;color:#475569;white-space:nowrap;background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;padding:7px 11px}
.app-media-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:56px;border:0;border-radius:18px;background:rgba(255,255,255,.92);color:#0f172a;font-size:42px;font-weight:900;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 14px 36px rgba(15,23,42,.25);-webkit-tap-highlight-color:transparent;transition:transform .15s ease,background .15s ease}
.app-media-lightbox-nav:hover{background:#fff7ed;color:#f97316}.app-media-lightbox-nav:active{transform:translateY(-50%) scale(.96)}
.app-media-lightbox-prev{left:18px}.app-media-lightbox-next{right:18px}.app-media-lightbox-nav[hidden]{display:none!important}
.app-media-lightbox-thumbs{display:flex;align-items:center;gap:7px;overflow-x:auto;max-width:68%;padding:4px;scrollbar-width:thin}
.app-media-lightbox-thumbs[hidden]{display:none!important}
.app-media-lightbox-thumb{width:48px;height:48px;border:2px solid transparent;border-radius:14px;background:#f1f5f9;display:grid;place-items:center;overflow:hidden;cursor:pointer;flex:none;padding:3px;-webkit-tap-highlight-color:transparent;box-shadow:0 8px 18px rgba(15,23,42,.08)}
.app-media-lightbox-thumb img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}.app-media-lightbox-thumb span{font-size:22px}.app-media-lightbox-thumb.is-active{border-color:#f97316;background:#fff7ed;box-shadow:0 10px 24px rgba(249,115,22,.22)}
.app-media-lightbox.has-multiple .app-media-lightbox-title::after{content:'  • geser / klik panah untuk ganti';font-size:12px;color:#64748b;font-weight:700}
@media(max-width:760px){.app-media-lightbox-stage{border-radius:15px}.app-media-lightbox-card{padding:9px!important}.app-media-lightbox-img,.app-media-lightbox-video{max-height:62vh!important}.app-media-lightbox-nav{width:42px;height:50px;border-radius:15px;font-size:34px}.app-media-lightbox-prev{left:8px}.app-media-lightbox-next{right:8px}.app-media-lightbox-bottom{align-items:flex-start;flex-direction:column}.app-media-lightbox-thumbs{max-width:100%;width:100%}.app-media-lightbox-counter{font-size:12px;padding:6px 10px}.app-media-lightbox-thumb{width:44px;height:44px;border-radius:13px}.app-media-lightbox.has-multiple .app-media-lightbox-title::after{display:block;margin-top:2px}}


/* Dashboard latest report preview: one clean cover only */
.dashboard-media-cover{position:relative;width:100%;height:100%;min-height:72px;border-radius:16px;background:#f8fafc;display:grid;place-items:center;overflow:hidden;border:1px solid #e2e8f0;isolation:isolate}
.dashboard-media-cover img{width:100%;height:100%;object-fit:cover;display:block}
.dashboard-media-cover.is-video{background:linear-gradient(135deg,#0f172a,#334155);color:#fff;gap:3px;text-align:center}
.dashboard-video-icon{width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:17px;line-height:1;padding-left:2px;box-shadow:0 10px 24px rgba(15,23,42,.25)}
.dashboard-media-cover small{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:inherit;opacity:.92}
.dashboard-media-cover.is-empty{color:#94a3b8;background:#f8fafc}.dashboard-media-cover.is-empty span{font-size:24px}.dashboard-media-count{position:absolute;right:6px;top:6px;min-width:24px;height:24px;border-radius:999px;background:#fff;color:#f97316;display:grid;place-items:center;font-size:11px;font-weight:900;border:1px solid rgba(249,115,22,.22);box-shadow:0 8px 18px rgba(15,23,42,.16)}
.report-item .media-thumb:has(.dashboard-media-cover){background:#fff;padding:0;border:1px solid #e2e8f0}
@media(max-width:720px){.dashboard-media-cover{min-height:64px;border-radius:16px}.dashboard-video-icon{width:30px;height:30px;font-size:15px}.dashboard-media-count{right:4px;top:4px;min-width:22px;height:22px;font-size:10px}}


/* Revisi: badge jumlah bukti di Dashboard dibuat putih, bukan bulatan orange */
.dashboard-media-count{background:#fff!important;color:#f97316!important;border:1px solid rgba(249,115,22,.24)!important;box-shadow:0 8px 18px rgba(15,23,42,.16)!important}


/* Revisi: preview Dashboard dibuat super clean — hanya gambar/video icon dan angka jumlah */
.dashboard-media-cover{
    background:#f8fafc!important;
    gap:0!important;
}
.dashboard-media-cover small{
    display:none!important;
}
.dashboard-media-cover.is-video{
    background:linear-gradient(135deg,#111827,#334155)!important;
}
.dashboard-media-cover.is-empty{
    background:#f8fafc!important;
}
.dashboard-empty-icon{
    width:34px;
    height:34px;
    border-radius:12px;
    background:#fff;
    color:#94a3b8;
    display:grid;
    place-items:center;
    font-size:18px;
    border:1px solid #e2e8f0;
}
.dashboard-video-icon{
    width:38px!important;
    height:38px!important;
    border-radius:999px!important;
    background:#fff!important;
    color:#f97316!important;
    display:grid!important;
    place-items:center!important;
    font-size:18px!important;
    line-height:1!important;
    padding-left:2px!important;
    box-shadow:0 10px 24px rgba(15,23,42,.22)!important;
}
.dashboard-media-count{
    top:6px!important;
    right:6px!important;
    min-width:25px!important;
    height:25px!important;
    padding:0 6px!important;
    background:#fff!important;
    color:#f97316!important;
    border:1px solid rgba(249,115,22,.25)!important;
    box-shadow:0 8px 18px rgba(15,23,42,.16)!important;
}
.report-item .media-thumb:has(.dashboard-media-cover){
    padding:0!important;
    overflow:hidden!important;
}
@media(max-width:720px){
    .dashboard-video-icon{width:34px!important;height:34px!important;font-size:16px!important}
    .dashboard-media-count{top:5px!important;right:5px!important;min-width:23px!important;height:23px!important;font-size:10px!important}
}

/* Revisi: rapikan semua preview data supaya konsisten dan tidak berantakan */
.media-thumb-data-preview,
.media-thumb-album,
.media-thumb:has(.dashboard-media-cover){
    width:82px!important;
    height:74px!important;
    min-width:82px!important;
    min-height:74px!important;
    padding:0!important;
    border-radius:18px!important;
    background:#fff!important;
    border:1px solid #e2e8f0!important;
    overflow:hidden!important;
    box-shadow:0 10px 24px rgba(15,23,42,.06)!important;
    display:grid!important;
    place-items:center!important;
    flex:none!important;
}
.report-item .media-thumb-data-preview{align-self:center}
.media-thumb-data-preview .dashboard-media-cover,
.media-thumb-album .dashboard-media-cover{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    border:0!important;
    border-radius:17px!important;
    box-shadow:none!important;
}
.dashboard-media-cover img{width:100%!important;height:100%!important;object-fit:cover!important}
.dashboard-media-cover.is-video{background:#f8fafc!important;color:#f97316!important}
.dashboard-video-icon{
    width:36px!important;
    height:36px!important;
    background:#fff!important;
    border:1px solid #fed7aa!important;
    color:#f97316!important;
    box-shadow:0 8px 18px rgba(15,23,42,.12)!important;
}
.dashboard-media-count{
    top:6px!important;
    right:6px!important;
    min-width:24px!important;
    height:24px!important;
    padding:0 6px!important;
    border-radius:999px!important;
    background:#fff!important;
    color:#f97316!important;
    border:1px solid rgba(249,115,22,.28)!important;
    box-shadow:0 7px 16px rgba(15,23,42,.14)!important;
    font-size:10px!important;
    line-height:1!important;
}
.report-list .report-item{
    display:grid!important;
    grid-template-columns:82px minmax(0,1fr)!important;
    align-items:center!important;
    gap:13px!important;
}
.report-list .report-item > div:not(.media-thumb):not(.media-thumb-data-preview):not(.media-thumb-album){
    min-width:0!important;
}
.report-list .report-item h3,
.report-list .report-item p{
    overflow-wrap:anywhere;
}
.data-preview-cell .media-summary-text{
    display:block;
    margin-top:7px;
    color:#64748b;
    font-size:12px;
    line-height:1.35;
    max-width:150px;
}
.table-album-preview,
.album-mini-preview.table-album-preview{
    background:#fff!important;
    border:1px solid #e2e8f0!important;
    border-radius:18px!important;
    padding:6px!important;
    width:max-content!important;
    max-width:112px!important;
    overflow:hidden!important;
}
.table-album-preview .album-mini-item{
    width:36px!important;
    height:36px!important;
    margin-left:-8px!important;
    border-radius:12px!important;
}
.table-album-preview .album-mini-more{
    background:#fff!important;
    color:#f97316!important;
    border:1px solid rgba(249,115,22,.28)!important;
    box-shadow:0 6px 14px rgba(15,23,42,.12)!important;
}
@media(max-width:820px){
    .media-thumb-data-preview,
    .media-thumb-album,
    .media-thumb:has(.dashboard-media-cover){
        width:74px!important;
        height:68px!important;
        min-width:74px!important;
        min-height:68px!important;
        border-radius:17px!important;
    }
    .report-list .report-item{
        grid-template-columns:74px minmax(0,1fr)!important;
        gap:11px!important;
        padding:11px!important;
    }
    .dashboard-video-icon{width:32px!important;height:32px!important;font-size:15px!important}
    .dashboard-media-count{top:5px!important;right:5px!important;min-width:22px!important;height:22px!important;font-size:10px!important}
    .mobile-card-table td.data-preview-cell{
        display:grid!important;
        grid-template-columns:96px minmax(0,1fr)!important;
        align-items:center!important;
        gap:6px 12px!important;
        text-align:left!important;
    }
    .mobile-card-table td.data-preview-cell::before{
        grid-column:1;
        grid-row:1 / span 2;
        align-self:center;
        min-width:0!important;
    }
    .mobile-card-table td.data-preview-cell .media-thumb-data-preview{
        grid-column:2;
        grid-row:1;
        justify-self:end;
    }
    .mobile-card-table td.data-preview-cell .media-summary-text{
        grid-column:2;
        grid-row:2;
        justify-self:end;
        max-width:160px;
        text-align:right;
        margin-top:0;
    }
}
@media(max-width:420px){
    .report-list .report-item{grid-template-columns:68px minmax(0,1fr)!important}
    .media-thumb-data-preview,
    .media-thumb-album,
    .media-thumb:has(.dashboard-media-cover){width:68px!important;height:64px!important;min-width:68px!important;min-height:64px!important}
    .mobile-card-table td.data-preview-cell{grid-template-columns:82px minmax(0,1fr)!important}
    .mobile-card-table td.data-preview-cell .media-summary-text{max-width:145px;font-size:11px}
}

/* Revisi final: rapikan Manajemen User Admin */
.user-management-layout-v2{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    align-items:start!important;
}
.user-form-card-v2{
    position:static!important;
    max-width:none!important;
    width:100%!important;
}
.user-form-card-v2 .panel-header{
    padding-bottom:12px!important;
    border-bottom:1px solid #eef2f7!important;
}
.user-form-card-v2 .panel-header h2,
.user-list-card-v2 .panel-header h2{
    margin:0!important;
    line-height:1.2!important;
}
.user-form-card-v2 .panel-header p,
.user-list-card-v2 .panel-header p{
    margin:5px 0 0!important;
    color:#64748b!important;
    line-height:1.45!important;
}
.user-form-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:14px!important;
    align-items:end!important;
}
.user-form-grid label{
    min-width:0!important;
}
.user-form-grid input,
.user-form-grid select{
    width:100%!important;
    min-width:0!important;
}
.user-form-photo-field{
    grid-column:span 2!important;
    height:100%!important;
    align-content:center!important;
    border:1px solid #e5e7eb!important;
    background:linear-gradient(180deg,#fff,#f8fafc)!important;
    box-shadow:0 10px 22px rgba(15,23,42,.04)!important;
}
.user-form-actions{
    grid-column:span 2!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:10px!important;
    align-items:center!important;
}
.user-form-actions .btn{
    min-height:44px!important;
    justify-content:center!important;
}
.user-list-card-v2{
    overflow:visible!important;
}
.user-list-card-v2>.panel-header{
    position:relative!important;
    z-index:1!important;
    background:linear-gradient(180deg,#ffffff,#fffaf5)!important;
    border:1px solid #eef2f7!important;
    border-radius:22px!important;
    padding:16px!important;
    margin-bottom:14px!important;
}
.admin-user-card-grid{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(420px,1fr))!important;
    gap:16px!important;
    align-items:start!important;
}
.admin-user-card{
    display:grid!important;
    gap:15px!important;
    padding:16px!important;
    border-radius:24px!important;
    border:1px solid #e7edf5!important;
    background:#fff!important;
    box-shadow:0 14px 34px rgba(15,23,42,.07)!important;
    overflow:hidden!important;
}
.admin-user-card-head{
    display:flex!important;
    justify-content:space-between!important;
    align-items:flex-start!important;
    gap:14px!important;
    padding:0 0 14px!important;
    border-bottom:1px solid #f1f5f9!important;
}
.admin-user-main{
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:center!important;
    min-width:0!important;
    flex:1 1 auto!important;
}
.admin-user-main .user-avatar-small{
    width:58px!important;
    height:58px!important;
    border-radius:20px!important;
    font-size:20px!important;
    flex:none!important;
}
.admin-user-main strong{
    display:block!important;
    font-size:16px!important;
    line-height:1.25!important;
    color:#0f172a!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}
.admin-user-main small{
    display:block!important;
    font-size:12px!important;
    line-height:1.35!important;
    color:#64748b!important;
    margin-top:3px!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}
.admin-user-badges{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:flex-end!important;
    gap:7px!important;
    min-width:120px!important;
}
.admin-user-sections{
    display:grid!important;
    grid-template-columns:1fr 1fr 1fr!important;
    gap:12px!important;
    align-items:stretch!important;
}
.admin-user-section{
    display:grid!important;
    gap:10px!important;
    align-content:start!important;
    min-width:0!important;
    padding:13px!important;
    border-radius:20px!important;
    border:1px solid #edf2f7!important;
    background:linear-gradient(180deg,#ffffff,#fbfdff)!important;
    box-shadow:0 8px 22px rgba(15,23,42,.04)!important;
}
.admin-user-section h3{
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    font-size:12px!important;
    line-height:1.2!important;
    color:#334155!important;
    letter-spacing:.04em!important;
    text-transform:uppercase!important;
}
.admin-user-section.profile-section h3::before{content:'👤';font-size:14px}.admin-user-section.media-section h3::before{content:'🎥';font-size:14px}.admin-user-section.qr-section h3::before{content:'🔐';font-size:14px}
.profile-photo-mini-form,
.media-access-form,
.qr-mini-form,
.qr-admin-box{
    display:grid!important;
    gap:9px!important;
    width:100%!important;
    min-width:0!important;
}
.profile-photo-control{
    display:grid!important;
    grid-template-columns:50px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
}
.admin-user-photo{
    width:50px!important;
    height:50px!important;
    border-radius:17px!important;
    font-size:17px!important;
    flex:none!important;
}
.admin-user-photo img,
.admin-user-main .user-avatar-small img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    display:block!important;
}
.file-pill,
.file-pill.compact{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    justify-content:center!important;
    text-align:center!important;
}
.file-pill span,
.file-pill.compact span{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}
.admin-user-section select,
.admin-user-section input[type='password'],
.admin-user-section input[type='text']{
    width:100%!important;
    min-width:0!important;
}
.admin-user-section .btn,
.admin-user-section button,
.admin-user-section a.btn,
.admin-user-section .inline-form,
.admin-user-section .inline-form button{
    width:100%!important;
    justify-content:center!important;
    min-width:0!important;
}
.admin-user-section small{
    display:block!important;
    color:#64748b!important;
    font-size:12px!important;
    line-height:1.4!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
}
.qr-admin-box details{
    width:100%!important;
    border:1px solid #ffedd5!important;
    background:#fff7ed!important;
    border-radius:16px!important;
    overflow:hidden!important;
}
.qr-admin-box summary{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    padding:10px 12px!important;
    border-radius:0!important;
    cursor:pointer!important;
    color:#ea580c!important;
    font-weight:900!important;
    text-align:center!important;
    list-style:none!important;
}
.qr-admin-box summary::-webkit-details-marker{display:none!important}
.qr-admin-box summary::after{content:'Lihat';font-size:11px;background:#fff;border:1px solid #fed7aa;color:#f97316;border-radius:999px;padding:2px 7px;margin-left:auto}
.qr-admin-box details[open] summary::after{content:'Tutup'}
.qr-admin-box details[open]{padding-bottom:10px!important}
.qr-admin-img{
    display:block!important;
    width:min(170px,88%)!important;
    height:auto!important;
    margin:10px auto!important;
    padding:8px!important;
    border:1px solid #e2e8f0!important;
    border-radius:18px!important;
    background:#fff!important;
}
.admin-user-actions{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:9px!important;
    padding-top:14px!important;
    border-top:1px solid #f1f5f9!important;
    align-items:stretch!important;
}
.admin-user-actions .btn,
.admin-user-actions button,
.admin-user-actions form{
    width:100%!important;
    min-width:0!important;
}
.admin-user-actions .btn,
.admin-user-actions button{
    min-height:42px!important;
    justify-content:center!important;
    white-space:normal!important;
    line-height:1.2!important;
    padding-left:10px!important;
    padding-right:10px!important;
}
@media(max-width:1180px){
    .user-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .user-form-photo-field,.user-form-actions{grid-column:1/-1!important}
    .admin-user-card-grid{grid-template-columns:1fr!important}
    .admin-user-sections{grid-template-columns:1fr 1fr!important}
    .admin-user-section.qr-section{grid-column:1/-1!important}
}
@media(max-width:760px){
    .user-management-layout-v2{gap:14px!important}
    .user-form-card-v2,.user-list-card-v2{padding:14px!important;border-radius:22px!important}
    .user-form-grid{grid-template-columns:1fr!important;gap:12px!important}
    .user-form-photo-field,.user-form-actions{grid-column:auto!important}
    .user-form-actions{grid-template-columns:1fr!important}
    .user-list-card-v2>.panel-header{padding:13px!important;border-radius:19px!important}
    .admin-user-card-grid{gap:12px!important}
    .admin-user-card{padding:13px!important;border-radius:22px!important;gap:13px!important}
    .admin-user-card-head{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
    .admin-user-main{grid-template-columns:52px minmax(0,1fr)!important;gap:10px!important}
    .admin-user-main .user-avatar-small{width:52px!important;height:52px!important;border-radius:18px!important}
    .admin-user-main strong{white-space:normal!important;overflow:visible!important;line-height:1.25!important}
    .admin-user-main small{white-space:normal!important;word-break:break-word!important;overflow:visible!important}
    .admin-user-badges{justify-content:flex-start!important;min-width:0!important}
    .admin-user-sections{grid-template-columns:1fr!important;gap:10px!important}
    .admin-user-section.qr-section{grid-column:auto!important}
    .admin-user-section{padding:12px!important;border-radius:18px!important}
    .profile-photo-control{grid-template-columns:48px minmax(0,1fr)!important}
    .admin-user-photo{width:48px!important;height:48px!important;border-radius:16px!important}
    .admin-user-actions{grid-template-columns:1fr 1fr!important;gap:8px!important}
    .admin-user-actions .btn,.admin-user-actions button{min-height:43px!important;font-size:13px!important}
}
@media(max-width:430px){
    .admin-user-actions{grid-template-columns:1fr!important}
    .admin-user-main{grid-template-columns:48px minmax(0,1fr)!important}
    .admin-user-main .user-avatar-small{width:48px!important;height:48px!important}
    .profile-photo-control{grid-template-columns:46px minmax(0,1fr)!important}
    .admin-user-photo{width:46px!important;height:46px!important}
}

/* Revisi profesional: Manajemen User Admin */
.user-management-pro{
    grid-template-columns:minmax(320px,420px) minmax(0,1fr)!important;
    align-items:start!important;
    gap:22px!important;
}
.user-management-pro .panel{
    border:1px solid rgba(226,232,240,.95)!important;
    box-shadow:0 18px 48px rgba(15,23,42,.07)!important;
}
.user-management-pro .user-form-card-v2{
    position:sticky!important;
    top:22px!important;
    border-radius:28px!important;
    background:linear-gradient(180deg,#ffffff,#f8fafc)!important;
}
.user-management-pro .user-form-card-v2 .panel-header{
    margin:-4px -4px 16px!important;
    padding:16px!important;
    border-radius:22px!important;
    background:linear-gradient(135deg,#0f172a,#1e293b)!important;
    color:#fff!important;
}
.user-management-pro .user-form-card-v2 .panel-header h2,
.user-management-pro .user-form-card-v2 .panel-header p{color:#fff!important}
.user-management-pro .user-form-card-v2 .panel-header p{opacity:.78!important}
.user-management-pro .user-form-grid{
    grid-template-columns:1fr!important;
    gap:13px!important;
}
.user-management-pro .user-form-grid label span,
.user-management-pro .profile-photo-field>span{
    color:#334155!important;
    font-size:13px!important;
}
.user-management-pro .user-form-grid input,
.user-management-pro .user-form-grid select{
    min-height:46px!important;
    background:#fff!important;
}
.user-management-pro .user-form-photo-field{
    border:1px solid #e2e8f0!important;
    background:#fff!important;
    border-radius:20px!important;
    padding:14px!important;
}
.user-management-pro .admin-profile-preview{
    width:56px!important;
    height:56px!important;
    border-radius:18px!important;
}
.user-management-pro .user-form-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
}
.user-management-pro .admin-users-header-pro{
    align-items:center!important;
    padding-bottom:14px!important;
    border-bottom:1px solid #f1f5f9!important;
}
.admin-users-summary{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:10px!important;
    margin-bottom:18px!important;
}
.admin-users-summary>div{
    border:1px solid #e2e8f0!important;
    border-radius:18px!important;
    background:linear-gradient(180deg,#fff,#f8fafc)!important;
    padding:13px!important;
    min-width:0!important;
}
.admin-users-summary strong{
    display:block!important;
    font-size:22px!important;
    line-height:1!important;
    color:#0f172a!important;
}
.admin-users-summary span{
    display:block!important;
    margin-top:7px!important;
    font-size:12px!important;
    color:#64748b!important;
    font-weight:800!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
.user-management-pro .admin-user-card-grid{
    grid-template-columns:1fr!important;
    gap:16px!important;
}
.admin-user-card-pro{
    position:relative!important;
    overflow:hidden!important;
    border-radius:28px!important;
    border:1px solid #e2e8f0!important;
    background:#fff!important;
    box-shadow:0 18px 44px rgba(15,23,42,.065)!important;
    padding:0!important;
    gap:0!important;
}
.admin-user-card-pro::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:5px;
    background:#2563eb;
}
.admin-user-card-pro.role-lapor::before{background:#f97316!important}
.admin-user-card-pro.role-pengawas::before{background:#7c3aed!important}
.admin-user-card-pro.role-admin::before{background:#0f172a!important}
.admin-user-card-pro.status-frozen{background:linear-gradient(180deg,#fff,#fff7f7)!important}
.admin-user-card-pro .admin-user-card-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:16px!important;
    padding:18px 20px!important;
    border-bottom:1px solid #eef2f7!important;
    background:linear-gradient(180deg,#ffffff,#fbfdff)!important;
}
.admin-user-card-pro .admin-user-main{
    display:grid!important;
    grid-template-columns:64px minmax(0,1fr)!important;
    gap:14px!important;
    align-items:center!important;
}
.admin-user-card-pro .admin-user-main .user-avatar-small{
    width:64px!important;
    height:64px!important;
    border-radius:22px!important;
    box-shadow:0 12px 24px rgba(15,23,42,.12)!important;
}
.admin-user-card-pro .admin-user-main strong{
    font-size:18px!important;
    letter-spacing:-.01em!important;
    white-space:normal!important;
    overflow:visible!important;
    line-height:1.25!important;
}
.admin-user-card-pro .admin-user-main small{
    font-size:12.5px!important;
    color:#64748b!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    line-height:1.4!important;
}
.admin-user-card-pro .admin-user-badges{
    justify-content:flex-end!important;
    min-width:0!important;
    max-width:240px!important;
}
.admin-user-card-pro .admin-user-sections{
    display:grid!important;
    grid-template-columns:minmax(220px,.9fr) minmax(230px,1fr) minmax(260px,1.1fr)!important;
    gap:14px!important;
    padding:18px 20px!important;
    background:#fff!important;
}
.admin-user-card-pro .admin-user-section{
    border-radius:22px!important;
    border:1px solid #e7edf5!important;
    background:#f8fafc!important;
    box-shadow:none!important;
    padding:15px!important;
    gap:12px!important;
}
.admin-user-card-pro .admin-user-section h3{
    display:flex!important;
    justify-content:space-between!important;
    align-items:center!important;
    margin:0 0 2px!important;
    font-size:12px!important;
    color:#475569!important;
    text-transform:uppercase!important;
    letter-spacing:.08em!important;
}
.admin-user-card-pro .admin-user-section h3::before,
.admin-user-card-pro .admin-user-section h3::after{
    display:none!important;
    content:none!important;
}
.admin-user-card-pro .profile-photo-mini-form,
.admin-user-card-pro .media-access-form,
.admin-user-card-pro .qr-mini-form,
.admin-user-card-pro .qr-admin-box{
    display:grid!important;
    gap:10px!important;
}
.admin-user-card-pro .profile-photo-control{
    display:grid!important;
    grid-template-columns:54px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:center!important;
}
.admin-user-card-pro .admin-user-photo{
    width:54px!important;
    height:54px!important;
    border-radius:18px!important;
}
.admin-user-card-pro .file-pill,
.admin-user-card-pro .file-pill.compact{
    min-height:38px!important;
    border-radius:14px!important;
    background:#fff!important;
    border:1px solid #e2e8f0!important;
}
.admin-user-card-pro .media-access-form select,
.admin-user-card-pro .qr-mini-form input{
    min-height:42px!important;
    border-radius:14px!important;
    background:#fff!important;
}
.admin-user-card-pro .media-effective-text{
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    border-radius:999px!important;
    background:#ecfdf5!important;
    color:#047857!important;
    padding:7px 10px!important;
    font-weight:900!important;
    width:max-content!important;
    max-width:100%!important;
}
.admin-user-card-pro .qr-admin-box details{
    border:1px solid #e2e8f0!important;
    background:#fff!important;
    border-radius:18px!important;
    overflow:hidden!important;
}
.admin-user-card-pro .qr-admin-box summary{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    padding:11px 13px!important;
    color:#0f172a!important;
    background:#fff!important;
    font-weight:900!important;
    cursor:pointer!important;
    list-style:none!important;
}
.admin-user-card-pro .qr-admin-box summary::-webkit-details-marker{display:none!important}
.admin-user-card-pro .qr-admin-box summary::after{
    content:'Buka'!important;
    background:#eff6ff!important;
    color:#2563eb!important;
    border:1px solid #dbeafe!important;
    border-radius:999px!important;
    padding:4px 9px!important;
    font-size:11px!important;
    margin-left:auto!important;
}
.admin-user-card-pro .qr-admin-box details[open] summary::after{content:'Tutup'!important}
.admin-user-card-pro .qr-admin-img{
    width:min(160px,86%)!important;
    margin:12px auto!important;
    display:block!important;
    border-radius:18px!important;
    padding:10px!important;
    background:#fff!important;
    border:1px solid #e2e8f0!important;
}
.admin-user-card-pro .qr-admin-box details small,
.admin-user-card-pro .qr-admin-box details .btn{
    margin-left:12px!important;
    margin-right:12px!important;
    width:calc(100% - 24px)!important;
}
.admin-user-card-pro .admin-user-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:flex-end!important;
    gap:9px!important;
    padding:16px 20px!important;
    border-top:1px solid #eef2f7!important;
    background:#fbfdff!important;
}
.admin-user-card-pro .admin-user-actions .btn,
.admin-user-card-pro .admin-user-actions button{
    min-height:40px!important;
    min-width:104px!important;
    border-radius:13px!important;
    font-size:13px!important;
    padding:8px 12px!important;
}
.admin-user-card-pro .admin-user-actions form{
    width:auto!important;
    display:inline-flex!important;
}

@media(max-width:1280px){
    .user-management-pro{grid-template-columns:1fr!important}
    .user-management-pro .user-form-card-v2{position:static!important}
    .user-management-pro .user-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .user-management-pro .user-form-photo-field,
    .user-management-pro .user-form-actions{grid-column:1/-1!important}
    .admin-user-card-pro .admin-user-sections{grid-template-columns:1fr 1fr!important}
    .admin-user-card-pro .qr-section{grid-column:1/-1!important}
}
@media(max-width:900px){
    .admin-users-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important}
    .admin-user-card-pro .admin-user-card-head{grid-template-columns:1fr!important;align-items:start!important}
    .admin-user-card-pro .admin-user-badges{justify-content:flex-start!important;max-width:100%!important}
    .admin-user-card-pro .admin-user-sections{grid-template-columns:1fr!important}
    .admin-user-card-pro .qr-section{grid-column:auto!important}
}
@media(max-width:760px){
    .user-management-pro{gap:14px!important}
    .user-management-pro .user-form-card-v2,
    .user-management-pro .user-list-card-v2{border-radius:24px!important;padding:14px!important;overflow:hidden!important}
    .user-management-pro .user-form-grid{grid-template-columns:1fr!important}
    .user-management-pro .user-form-photo-field,
    .user-management-pro .user-form-actions{grid-column:auto!important}
    .admin-users-header-pro .btn{width:100%!important}
    .admin-users-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
    .admin-users-summary>div{padding:11px!important;border-radius:16px!important}
    .admin-users-summary strong{font-size:20px!important}
    .admin-user-card-pro{border-radius:24px!important}
    .admin-user-card-pro .admin-user-card-head{padding:15px!important}
    .admin-user-card-pro .admin-user-main{grid-template-columns:56px minmax(0,1fr)!important;gap:12px!important}
    .admin-user-card-pro .admin-user-main .user-avatar-small{width:56px!important;height:56px!important;border-radius:20px!important}
    .admin-user-card-pro .admin-user-main strong{font-size:16px!important}
    .admin-user-card-pro .admin-user-sections{padding:14px!important;gap:11px!important}
    .admin-user-card-pro .admin-user-section{padding:13px!important;border-radius:19px!important}
    .admin-user-card-pro .profile-photo-control{grid-template-columns:50px minmax(0,1fr)!important}
    .admin-user-card-pro .admin-user-photo{width:50px!important;height:50px!important;border-radius:17px!important}
    .admin-user-card-pro .admin-user-actions{display:grid!important;grid-template-columns:1fr 1fr!important;padding:14px!important;gap:8px!important}
    .admin-user-card-pro .admin-user-actions form,
    .admin-user-card-pro .admin-user-actions .btn,
    .admin-user-card-pro .admin-user-actions button{width:100%!important;min-width:0!important}
}
@media(max-width:430px){
    .admin-users-summary{grid-template-columns:1fr 1fr!important}
    .admin-user-card-pro .admin-user-card-head,
    .admin-user-card-pro .admin-user-sections,
    .admin-user-card-pro .admin-user-actions{padding-left:12px!important;padding-right:12px!important}
    .admin-user-card-pro .admin-user-actions{grid-template-columns:1fr!important}
    .admin-user-card-pro .admin-user-main{grid-template-columns:50px minmax(0,1fr)!important}
    .admin-user-card-pro .admin-user-main .user-avatar-small{width:50px!important;height:50px!important}
}

/* Revisi fit: Manajemen User Admin lebih muat di 100% zoom dan responsif */
.user-management-pro,
.user-management-pro *,
.user-management-pro *::before,
.user-management-pro *::after{
    box-sizing:border-box!important;
}
.user-management-pro{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(260px,340px) minmax(0,1fr)!important;
    gap:16px!important;
    overflow:visible!important;
}
.user-management-pro .panel,
.user-management-pro .user-form-card-v2,
.user-management-pro .user-list-card-v2{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
}
.user-management-pro .user-form-card-v2{
    border-radius:24px!important;
}
.user-management-pro .user-form-card-v2 .panel-header{
    padding:14px!important;
    margin:-2px -2px 14px!important;
}
.user-management-pro .user-form-grid{
    gap:11px!important;
}
.user-management-pro .user-form-grid input,
.user-management-pro .user-form-grid select,
.user-management-pro .user-form-grid textarea,
.user-management-pro .admin-user-section input,
.user-management-pro .admin-user-section select,
.user-management-pro .admin-user-section textarea{
    max-width:100%!important;
    min-width:0!important;
}
.user-management-pro .admin-users-header-pro{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:12px!important;
    align-items:start!important;
}
.user-management-pro .admin-users-header-pro h2,
.user-management-pro .admin-users-header-pro p{
    overflow-wrap:anywhere!important;
}
.admin-users-summary{
    grid-template-columns:repeat(auto-fit,minmax(104px,1fr))!important;
    gap:8px!important;
}
.admin-users-summary>div{
    padding:11px 12px!important;
    border-radius:16px!important;
}
.admin-users-summary strong{
    font-size:20px!important;
}
.admin-users-summary span{
    font-size:11px!important;
    white-space:normal!important;
    line-height:1.25!important;
}
.user-management-pro .admin-user-card-grid{
    grid-template-columns:1fr!important;
    gap:12px!important;
    min-width:0!important;
}
.admin-user-card-pro{
    min-width:0!important;
    max-width:100%!important;
    border-radius:22px!important;
}
.admin-user-card-pro .admin-user-card-head{
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    padding:14px 16px!important;
}
.admin-user-card-pro .admin-user-main{
    grid-template-columns:54px minmax(0,1fr)!important;
    gap:11px!important;
    min-width:0!important;
}
.admin-user-card-pro .admin-user-main .user-avatar-small{
    width:54px!important;
    height:54px!important;
    border-radius:18px!important;
}
.admin-user-card-pro .admin-user-main strong,
.admin-user-card-pro .admin-user-main small{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}
.admin-user-card-pro .admin-user-badges{
    justify-content:flex-start!important;
    max-width:100%!important;
    min-width:0!important;
}
.admin-user-card-pro .admin-user-sections{
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
    gap:10px!important;
    padding:14px 16px!important;
    min-width:0!important;
}
.admin-user-card-pro .admin-user-section{
    min-width:0!important;
    padding:12px!important;
    border-radius:18px!important;
    gap:10px!important;
}
.admin-user-card-pro .profile-photo-control{
    grid-template-columns:46px minmax(0,1fr)!important;
    gap:9px!important;
}
.admin-user-card-pro .admin-user-photo{
    width:46px!important;
    height:46px!important;
    border-radius:15px!important;
}
.admin-user-card-pro .file-pill,
.admin-user-card-pro .file-pill.compact,
.admin-user-card-pro .btn,
.admin-user-card-pro button{
    max-width:100%!important;
    min-width:0!important;
}
.admin-user-card-pro .media-effective-text{
    width:100%!important;
    max-width:100%!important;
    justify-content:center!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
}
.admin-user-card-pro .qr-admin-box,
.admin-user-card-pro .qr-admin-box details,
.admin-user-card-pro .qr-mini-form{
    min-width:0!important;
    max-width:100%!important;
}
.admin-user-card-pro .qr-admin-img{
    width:min(132px,82%)!important;
    padding:7px!important;
    border-radius:14px!important;
}
.admin-user-card-pro .qr-admin-box details small,
.admin-user-card-pro .qr-admin-box details .btn{
    width:calc(100% - 20px)!important;
    margin-left:10px!important;
    margin-right:10px!important;
}
.admin-user-card-pro .qr-mini-form{
    grid-template-columns:1fr!important;
}
.admin-user-card-pro .admin-user-actions{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(92px,1fr))!important;
    justify-content:stretch!important;
    gap:8px!important;
    padding:13px 16px!important;
}
.admin-user-card-pro .admin-user-actions form,
.admin-user-card-pro .admin-user-actions .btn,
.admin-user-card-pro .admin-user-actions button{
    width:100%!important;
    min-width:0!important;
}
.admin-user-card-pro .admin-user-actions .btn,
.admin-user-card-pro .admin-user-actions button{
    min-height:38px!important;
    padding:8px 9px!important;
    font-size:12.5px!important;
}

@media(max-width:1420px){
    .user-management-pro{
        grid-template-columns:minmax(240px,320px) minmax(0,1fr)!important;
        gap:14px!important;
    }
    .admin-user-card-pro .admin-user-sections{
        grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important;
    }
}
@media(max-width:1180px){
    .user-management-pro{
        grid-template-columns:1fr!important;
    }
    .user-management-pro .user-form-card-v2{
        position:static!important;
    }
    .user-management-pro .user-form-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
    .user-management-pro .user-form-photo-field,
    .user-management-pro .user-form-actions{
        grid-column:1/-1!important;
    }
    .admin-user-card-pro .admin-user-sections{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }
}
@media(max-width:900px){
    .user-management-pro .admin-users-header-pro{
        grid-template-columns:1fr!important;
    }
    .user-management-pro .admin-users-header-pro .btn{
        width:100%!important;
    }
    .admin-user-card-pro .admin-user-sections{
        grid-template-columns:1fr!important;
    }
    .admin-user-card-pro .admin-user-main strong,
    .admin-user-card-pro .admin-user-main small{
        white-space:normal!important;
        overflow:visible!important;
        overflow-wrap:anywhere!important;
    }
}
@media(max-width:760px){
    .user-management-pro{
        gap:12px!important;
    }
    .user-management-pro .user-form-card-v2,
    .user-management-pro .user-list-card-v2{
        padding:12px!important;
        border-radius:20px!important;
    }
    .user-management-pro .user-form-grid{
        grid-template-columns:1fr!important;
    }
    .user-management-pro .user-form-photo-field,
    .user-management-pro .user-form-actions{
        grid-column:auto!important;
    }
    .admin-users-summary{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
    .admin-user-card-pro .admin-user-card-head,
    .admin-user-card-pro .admin-user-sections,
    .admin-user-card-pro .admin-user-actions{
        padding-left:12px!important;
        padding-right:12px!important;
    }
    .admin-user-card-pro .admin-user-main{
        grid-template-columns:48px minmax(0,1fr)!important;
    }
    .admin-user-card-pro .admin-user-main .user-avatar-small{
        width:48px!important;
        height:48px!important;
        border-radius:16px!important;
    }
    .admin-user-card-pro .admin-user-actions{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}
@media(max-width:420px){
    .admin-users-summary{
        grid-template-columns:1fr 1fr!important;
    }
    .admin-user-card-pro .admin-user-actions{
        grid-template-columns:1fr!important;
    }
    .admin-user-card-pro .profile-photo-control{
        grid-template-columns:42px minmax(0,1fr)!important;
    }
    .admin-user-card-pro .admin-user-photo{
        width:42px!important;
        height:42px!important;
    }
}

/* Revisi: form Manajemen User Admin dibuat berurutan atas ke bawah */
.user-management-pro .user-form-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    align-items:stretch!important;
}
.user-management-pro .user-form-grid > label,
.user-management-pro .user-form-photo-field,
.user-management-pro .user-form-actions{
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:100%!important;
}
.user-management-pro .user-form-grid > label{
    display:grid!important;
    gap:7px!important;
    margin:0!important;
}
.user-management-pro .user-form-grid > label span,
.user-management-pro .profile-photo-field > span{
    font-weight:800!important;
    color:#334155!important;
}
.user-management-pro .user-form-grid input,
.user-management-pro .user-form-grid select{
    width:100%!important;
    min-height:46px!important;
}
.user-management-pro .user-form-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:2px!important;
}
@media(min-width:1181px){
    .user-management-pro{
        grid-template-columns:minmax(280px,380px) minmax(0,1fr)!important;
    }
}

/* Revisi: QR Login Manajemen User Admin dibuat lebih rapi dan mudah digunakan */
.admin-user-card-pro .qr-section-clean{
    background:linear-gradient(180deg,#ffffff,#f8fafc)!important;
    border:1px solid #e2e8f0!important;
    overflow:hidden!important;
}
.admin-user-card-pro .qr-section-clean .qr-section-title{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    margin-bottom:2px!important;
    min-width:0!important;
}
.admin-user-card-pro .qr-section-clean .qr-section-title h3{
    margin:0!important;
    display:block!important;
    min-width:0!important;
}
.qr-status-pill{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    padding:5px 9px!important;
    font-size:11px!important;
    font-weight:900!important;
    white-space:nowrap!important;
    line-height:1!important;
    flex:none!important;
}
.qr-status-pill.active{
    background:#ecfdf5!important;
    color:#047857!important;
    border:1px solid #bbf7d0!important;
}
.qr-status-pill.inactive{
    background:#f8fafc!important;
    color:#64748b!important;
    border:1px solid #e2e8f0!important;
}
.admin-user-card-pro .qr-admin-box-clean{
    display:grid!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
}
.admin-user-card-pro .qr-preview-card{
    display:grid!important;
    grid-template-columns:116px minmax(0,1fr)!important;
    align-items:center!important;
    gap:12px!important;
    border:1px solid #e2e8f0!important;
    border-radius:18px!important;
    background:#fff!important;
    padding:12px!important;
    min-width:0!important;
}
.admin-user-card-pro .qr-preview-card .qr-admin-img{
    width:104px!important;
    height:104px!important;
    object-fit:contain!important;
    margin:0!important;
    padding:7px!important;
    border-radius:14px!important;
    border:1px solid #e2e8f0!important;
    background:#fff!important;
    box-shadow:0 10px 22px rgba(15,23,42,.07)!important;
    flex:none!important;
}
.admin-user-card-pro .qr-preview-info{
    display:grid!important;
    gap:5px!important;
    min-width:0!important;
}
.admin-user-card-pro .qr-preview-info strong{
    font-size:14px!important;
    color:#0f172a!important;
    line-height:1.25!important;
}
.admin-user-card-pro .qr-preview-info small{
    margin:0!important;
    color:#64748b!important;
    line-height:1.45!important;
    overflow-wrap:anywhere!important;
}
.admin-user-card-pro .qr-action-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    width:100%!important;
}
.admin-user-card-pro .qr-pin-form,
.admin-user-card-pro .qr-disable-form{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
}
.admin-user-card-pro .qr-pin-form label{
    display:grid!important;
    gap:6px!important;
    margin:0!important;
    width:100%!important;
    min-width:0!important;
}
.admin-user-card-pro .qr-pin-form label span{
    color:#334155!important;
    font-weight:900!important;
    font-size:12px!important;
}
.admin-user-card-pro .qr-pin-form input{
    width:100%!important;
    min-height:42px!important;
    border-radius:14px!important;
    background:#fff!important;
    min-width:0!important;
}
.admin-user-card-pro .qr-section-clean .btn,
.admin-user-card-pro .qr-section-clean button,
.admin-user-card-pro .qr-section-clean a.btn{
    width:100%!important;
    justify-content:center!important;
    min-width:0!important;
    min-height:40px!important;
    border-radius:14px!important;
    white-space:normal!important;
    line-height:1.2!important;
}
.admin-user-card-pro .qr-empty-box{
    border:1px dashed #cbd5e1!important;
    background:#fff!important;
    border-radius:18px!important;
    padding:12px!important;
}
.admin-user-card-pro .qr-empty-box p{
    margin:0!important;
    color:#64748b!important;
    font-size:13px!important;
    font-weight:800!important;
}
@media(max-width:1180px){
    .admin-user-card-pro .qr-preview-card{
        grid-template-columns:130px minmax(0,1fr)!important;
    }
    .admin-user-card-pro .qr-preview-card .qr-admin-img{
        width:118px!important;
        height:118px!important;
    }
}
@media(max-width:760px){
    .admin-user-card-pro .qr-preview-card{
        grid-template-columns:108px minmax(0,1fr)!important;
        gap:10px!important;
        padding:10px!important;
    }
    .admin-user-card-pro .qr-preview-card .qr-admin-img{
        width:96px!important;
        height:96px!important;
    }
}
@media(max-width:420px){
    .admin-user-card-pro .qr-section-clean .qr-section-title{
        align-items:flex-start!important;
        flex-direction:column!important;
        gap:7px!important;
    }
    .admin-user-card-pro .qr-preview-card{
        grid-template-columns:1fr!important;
        text-align:center!important;
        place-items:center!important;
    }
    .admin-user-card-pro .qr-preview-info{
        text-align:center!important;
    }
    .admin-user-card-pro .qr-preview-card .qr-admin-img{
        width:132px!important;
        height:132px!important;
    }
}

/* Revisi: rapikan tombol Lihat/Privat sandi QR di Manajemen User Admin */
.admin-user-card-pro .qr-pin-form .password-field{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 76px!important;
    gap:8px!important;
    align-items:center!important;
    width:100%!important;
    position:relative!important;
}
.admin-user-card-pro .qr-pin-form .password-field input{
    padding-right:13px!important;
    width:100%!important;
    min-width:0!important;
}
.admin-user-card-pro .qr-pin-form .password-field .password-toggle{
    position:static!important;
    transform:none!important;
    width:auto!important;
    min-width:76px!important;
    height:42px!important;
    padding:0 10px!important;
    border:1px solid #e2e8f0!important;
    border-radius:14px!important;
    background:#f8fafc!important;
    color:#334155!important;
    box-shadow:none!important;
    white-space:nowrap!important;
    line-height:1!important;
}
.admin-user-card-pro .qr-pin-form .password-field .password-toggle:hover{
    background:#e2e8f0!important;
    color:#0f172a!important;
}
@media(max-width:430px){
    .admin-user-card-pro .qr-pin-form .password-field{
        grid-template-columns:1fr!important;
        gap:7px!important;
    }
    .admin-user-card-pro .qr-pin-form .password-field .password-toggle{
        width:100%!important;
        min-width:0!important;
    }
}


/* Revisi: foto profil pada konfirmasi Login QR */
.qr-user-confirm-card{
    align-items:center;
    gap:14px;
}
.qr-user-confirm-card>span{
    display:none!important;
}
.qr-user-photo-confirm{
    width:58px;
    height:58px;
    flex:0 0 58px;
    border-radius:22px;
    background:linear-gradient(135deg,#16a34a,#22c55e);
    color:#fff;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:3px solid #fff;
    box-shadow:0 12px 28px rgba(22,163,74,.18);
}
.qr-user-photo-confirm img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.qr-user-photo-confirm span{
    width:100%;
    height:100%;
    display:grid!important;
    place-items:center;
    background:transparent!important;
    color:#fff!important;
    font-size:22px;
    font-weight:900;
}
.qr-user-photo-confirm span[hidden],
.qr-user-photo-confirm img[hidden]{display:none!important}
@media(max-width:420px){
    .qr-user-confirm-card{
        align-items:center;
        grid-template-columns:58px minmax(0,1fr);
    }
    .qr-user-confirm-card strong,
    .qr-user-confirm-card small{
        word-break:break-word;
    }
}