:root{--navy:#071a37;--blue:#0b4f9c;--red:#d71920;--gold:#f2c94c;--soft:#f5f7fb;--line:#d9e2ef;--text:#0f172a;--muted:#667085}

*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:#eef2f7;color:var(--text)}button,input,select,textarea{font-family:inherit}button{border:0;border-radius:12px;background:linear-gradient(135deg,var(--blue),#0a2c5f);color:#fff;font-weight:800;padding:10px 14px;cursor:pointer}button:hover{filter:brightness(1.05)}button.small{padding:6px 9px;border-radius:9px;font-size:12px;margin:2px}.btn-secondary{background:#e8eef8!important;color:#082b57!important}.danger{background:#dc2626!important}.hidden{display:none!important}.muted{color:var(--muted);font-size:13px;line-height:1.45}.notice{background:#fff8dd;border:1px solid #f2d77c;border-radius:14px;padding:14px;margin:10px 0;color:#594200}.pill{display:inline-block;background:#e8eef8;color:#082b57;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800}.login-page{min-height:100vh;display:grid;place-items:center;position:relative;background:linear-gradient(120deg,rgba(7,23,48,.65),rgba(9,42,90,.38),rgba(230,176,52,.22)),url('assets/login-background.png') center/cover no-repeat}.login-overlay{position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.18),transparent 34%),linear-gradient(90deg,rgba(7,26,55,.45),rgba(7,26,55,.12))}.login-card{position:relative;width:min(430px,92vw);background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,0.25);border-radius:26px;padding:30px;box-shadow:0 28px 90px rgba(0,0,0,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.login-card h1{margin:0;color:#082b57;font-size:32px}.login-card p{color:#44536b;margin-bottom:22px}.login-card input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;margin:8px 0;background:white}.login-card button{width:100%;margin:12px 0}.login-card small{display:block;color:#667085;line-height:1.4}.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:linear-gradient(180deg,#071a37,#0c254b);color:#fff;padding:20px;position:sticky;top:0;height:100vh;overflow:auto}.brand{font-size:24px;font-weight:950;letter-spacing:.4px;margin-bottom:16px}.brand span{color:var(--gold)}.role-badge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:12px;border-radius:16px;font-size:13px;margin-bottom:14px;color:#eaf2ff}.sidebar nav{display:grid;gap:7px}.sidebar nav button{background:transparent;text-align:left;border:1px solid rgba(255,255,255,.08);color:#dbeafe;font-weight:750;padding:10px 12px}.sidebar nav button:hover{background:rgba(255,255,255,.10)}.logout{width:100%;margin-top:16px;background:rgba(255,255,255,.12)}.content{padding:24px;overflow:auto}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.topbar h2{margin:0;color:#0f2444}.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:16px;box-shadow:0 8px 24px rgba(15,23,42,.05)}.card h3{margin:0 0 12px;color:#0f2444}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.field{display:grid;gap:6px;min-width:0}.field span{font-size:12px;font-weight:800;color:#334155}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 11px;background:#fff;min-width:0}.field textarea{min-height:82px;resize:vertical}.actions{display:flex;gap:10px;flex-wrap:wrap}.dash-hero{background:linear-gradient(135deg,#0b3f7a,#071a37);color:#fff;border-radius:22px;padding:22px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}.dash-hero h2{margin:0 0 6px}.dash-hero p{margin:0;color:#dbeafe}.stats{margin-bottom:16px}.stat{background:#fff;border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:18px;padding:16px;box-shadow:0 8px 20px rgba(15,23,42,.05)}.stat small{color:#667085;font-weight:800}.stat b{display:block;font-size:34px;color:#082b57;margin-top:5px}table{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border-radius:12px;overflow:hidden}th,td{text-align:left;border-bottom:1px solid #eef2f7;padding:9px;vertical-align:middle}th{background:#f6f8fb;color:#334155;font-size:12px;text-transform:uppercase}tr:hover td{background:#fafcff}.avatar{width:42px;height:42px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}.profile-card{text-align:center}.profile-photo{width:120px;height:140px;object-fit:cover;border-radius:16px;border:4px solid #fff;box-shadow:0 8px 22px rgba(0,0,0,.15)}.print-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.print-actions select{padding:10px 12px;border:1px solid var(--line);border-radius:12px;min-width:280px}.bar-chart{display:grid;gap:9px}.bar-item{display:grid;grid-template-columns:82px 1fr 28px;gap:8px;align-items:center;font-size:12px}.bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar-track{height:12px;background:#eaf0f8;border-radius:99px;overflow:hidden}.bar-track span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--gold));border-radius:99px}.pie-wrap{display:flex;gap:14px;align-items:center;margin-top:12px}.pie{width:90px;height:90px;border-radius:50%;border:6px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.12)}.pie-legend{display:grid;gap:4px;font-size:12px}.pie-legend span{display:flex;align-items:center;gap:6px}.pie-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* KTA Rev 54 Template - menggunakan background unggahan terbaru */

.rev50-sheet{width:210mm;min-height:297mm;margin:auto;background:#fff;padding:10mm;display:flex;gap:10mm;align-items:flex-start;justify-content:center}

.rev50-card{width: 54mm;height: 85.6mm;position:relative;overflow:hidden;border-radius:3.8mm;background-image:url('assets/kta-portrait-bg-epson.jpg');background-size:100% 100%;background-repeat:no-repeat;background-position:center;box-shadow:0 4px 18px rgba(0,0,0,.18);font-family:Arial,Helvetica,sans-serif;color:#082b57}

.rev50-logo{position:absolute;top:4.2mm;width:15mm;height:10mm;display:grid;place-items:center;z-index:2}.rev50-logo img{max-width:100%;max-height:100%;object-fit:contain}.rev50-logo b{font-size:4.6mm;color:#0c3365;letter-spacing:.4mm}.rev50-logo-left{left:6mm}.rev50-logo-right{right:6mm}

.rev50-title{position:absolute;left:22mm;right:22mm;top:4.7mm;text-align:center;z-index:2}.rev50-title h1{margin:0;color:#071a37;font-size:5.8mm;letter-spacing:.32mm;line-height:1;font-weight:950;white-space:nowrap}.rev50-title p{margin:.8mm 0 0;color:#163b67;font-size:1.95mm;line-height:1;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rev50-title strong{display:block;margin:.65mm 0 0;color:#c9141b;font-size:2.25mm;line-height:1;font-weight:950;letter-spacing:.18mm;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rev50-badge{position:absolute;left:33mm;right:33mm;top:17.1mm;height:5.2mm;border-radius:999px;background:linear-gradient(180deg,#115fb0,#072c63);color:#fff;display:grid;place-items:center;font-size:2.8mm;font-weight:950;letter-spacing:.22mm;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1.2mm 2.4mm rgba(0,0,0,.18);z-index:2}

.rev50-photo{position:absolute;left:7.8mm;top:23.2mm;width:20.5mm;height:25.5mm;border:0.45mm solid #246cae;border-radius:2mm;overflow:hidden;display:grid;place-items:center;color:#6f7f92;background:#eef2f4;font-size:2.5mm;font-weight:900;z-index:2}.rev50-photo img{width:100%;height:100%;object-fit:cover}

.rev50-front-values{position:absolute;left:33mm;top:24.2mm;width:45.2mm;z-index:2}.rev50-row{display:grid;grid-template-columns:15.2mm 2mm 1fr;align-items:center;height:3.35mm;font-size:2.15mm;line-height:1;color:#082b57}.rev50-row b{font-weight:950}.rev50-row span{font-weight:950;text-align:center}.rev50-row strong{font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:.12mm solid rgba(8,43,87,.54);padding-bottom:.2mm;min-width:0}

.rev50-front-daerah{position:absolute;left:6.7mm;bottom:3.25mm;width:41mm;color:#fff;font-size:2.35mm;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 1px rgba(0,0,0,.42);z-index:2}.rev50-front-no{position:absolute;right:7mm;bottom:3.1mm;width:35mm;text-align:right;color:#fff0a3;font-size:2.35mm;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 1px rgba(0,0,0,.42);z-index:2}

.rev50-back-title{top:4.5mm}.rev50-back-badge{top:16.6mm}.rev50-rules{position:absolute;left:7.5mm;top:23mm;width:52mm;color:#082b57;z-index:2}.rev50-rules h2{margin:0 0 1.1mm;font-size:3mm;letter-spacing:.18mm;color:#071a37}.rev50-rules ol{margin:0;padding-left:4.2mm;font-size:2.15mm;line-height:1.22;font-weight:850}.rev50-rules li{margin:.45mm 0}.rev50-qr{position:absolute;right:6.7mm;top:25.3mm;width:15mm;height:18.2mm;background:#fff;border:.5mm solid #0c3d78;border-radius:1.4mm;display:grid;place-items:center;overflow:hidden;z-index:2}.rev50-qr svg{width:12.1mm;height:12.1mm}.rev50-qr em{font-style:normal;font-size:1.75mm;font-weight:950;color:#0c3d78;line-height:1}.rev50-sign{position:absolute;text-align:center;color:#082b57;z-index:2}.rev50-sign-left{left:15.5mm;top:40.2mm;width:19.5mm}.rev50-sign-right{left:50.5mm;top:40.2mm;width:19.5mm}.rev50-sign-title{font-size:2.05mm;font-weight:950;line-height:1.04;margin-bottom:.25mm}.rev50-ttd{height:4.7mm;max-width:18.5mm;object-fit:contain;display:block;margin:0 auto -0.35mm}.rev50-sign-line{height:.16mm;background:#082b57;margin:0 auto .25mm;width:17.5mm}.rev50-sign-name{font-size:1.8mm;line-height:1.05;font-weight:950;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:3.8mm}.rev50-stamp-wrap{position:absolute;left:38mm;top:39.7mm;width:9.5mm;height:9.5mm;display:grid;place-items:center;z-index:3}.rev50-stamp{max-width:9.5mm;max-height:9.5mm;object-fit:contain;opacity:.92}.rev50-back-address{position:absolute;left:7.4mm;bottom:2.25mm;width:70.8mm;color:white;font-size:1.72mm;font-weight:850;line-height:1.08;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-shadow:0 1px 1px rgba(0,0,0,.35);z-index:2}

@media(max-width:900px){.app{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.grid.two{grid-template-columns:1fr}.rev50-sheet{transform:scale(.78);transform-origin:top left;width:380mm}.content{padding:14px}}

@media print{html,body{width:210mm!important;height:297mm!important;background:white!important;overflow:hidden!important}.sidebar,.topbar,.print-actions,.no-print{display:none!important}.app,.content,#view,.card{display:block!important;width:210mm!important;height:auto!important;margin:0!important;padding:0!important;background:white!important;box-shadow:none!important;border:0!important;overflow:hidden!important}.rev50-sheet{width:210mm!important;height:297mm!important;padding:10mm!important;gap:10mm!important;align-items:flex-start!important;justify-content:center!important;page-break-after:avoid!important}.rev50-card{width: 54mm!important;height: 85.6mm!important;}.rev50-card.rev50-portrait{width:54mm!important;height:85.6mm!important;box-shadow:none!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}.rev50-title h1{font-size:5.6mm!important}.rev50-row{height:3.35mm!important;font-size:2.05mm!important}.rev50-sign-left{left:15.5mm!important;top:40.2mm!important;width:19.5mm!important}.rev50-sign-right{left:50.5mm!important;top:40.2mm!important;width:19.5mm!important}.rev50-stamp-wrap{left:38mm!important;top:39.7mm!important;width:9.8mm!important;height:9.8mm!important}.rev50-stamp{max-width:9.8mm!important;max-height:9.8mm!important}.rev50-back-address{font-size:1.68mm!important;bottom:2.2mm!important}@page{size:A4 portrait;margin:0}}





/* ===== Online Final Revisi 55: UI shell & Login Rev50 ===== */

:root{--ui-blue:#1267bd;--ui-light:#eff7ff;--ui-deep:#08335f;--ui-gold:#f6c33b;--ui-red:#d61f26}

.login-page{align-items:center;justify-items:center;padding:42px 62px;background-image:linear-gradient(90deg,rgba(4,24,47,.18),rgba(4,24,47,.40)),url('assets/login-background.png');background-position:center;background-size:cover}

.login-card{margin:0 auto;border-top:5px solid var(--ui-gold);width:min(420px,92vw);box-shadow:0 28px 90px rgba(0,0,0,.28)}

.login-logo-container{display:flex;justify-content:center;margin-bottom:20px}

.login-logo-container img{height:80px;width:auto;object-fit:contain}

.login-card h1{font-size:29px;color:var(--ui-deep);text-align:center}

.login-card p{text-align:center}

.login-identity{position:absolute;left:38px;bottom:35px;background:rgba(255,255,255,.92);padding:14px 18px;border-radius:18px;border-left:6px solid var(--ui-gold);box-shadow:0 10px 30px rgba(0,0,0,.18);display:grid;gap:3px;min-width:310px;color:#0c315d}

.identity-logos{display:flex;align-items:center;gap:14px;margin-bottom:6px}.identity-logos img{height:38px;width:80px;object-fit:contain}.identity-logos img:last-child{width:54px}

.login-identity b{font-size:17px}.login-identity span{font-size:12px;font-weight:700;color:#334e70}

.sidebar{background:linear-gradient(180deg,#1267bd,#08417e);padding:16px;color:#fff}

.brand-panel{margin:-16px -16px 16px;padding:14px;background:linear-gradient(135deg,#f7fbff,#e3f2ff);color:#08335f;border-bottom:4px solid var(--ui-gold)}

.brand-logos{display:flex;gap:9px;align-items:center;margin-bottom:8px}.brand-logos img{width:74px;height:42px;object-fit:contain}.brand-logos img:last-child{width:47px}

.brand-panel strong{font-size:15px;display:block}.brand-panel small{font-size:10.5px;font-weight:700;line-height:1.35}

.role-badge{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}

.sidebar nav button{border-color:rgba(255,255,255,.22);color:#fff}.sidebar nav button:hover{background:rgba(255,255,255,.18)}

.dash-hero{background:linear-gradient(120deg,#1f83db,#0e5eae);box-shadow:0 12px 32px rgba(18,103,189,.24)}

.stat{border-left-color:#39a6eb}.topbar h2{color:#08335f}

.tab-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.tab-row button.active{background:var(--ui-gold);color:#08335f}

.approval-status{font-weight:800;border-radius:20px;padding:4px 8px;font-size:11px}.approval-pending{background:#fff1c9;color:#835d00}.approval-approved{background:#d6f5e3;color:#116338}.approval-rejected{background:#fee2e2;color:#991b1b}



/* ===== Revisi 55: KTA printable overlay ===== */

.rev50-sheet{box-sizing:border-box;align-items:flex-start}

.rev50-title{left:18.5mm;right:18.5mm;top:5.6mm}

.rev50-title h1{font-size:4.25mm;letter-spacing:.18mm}

.rev50-title p{font-size:1.48mm;margin-top:.62mm}

.rev50-title strong{font-size:1.65mm;margin-top:.58mm}

.rev50-logo{top:3.75mm;width:13.4mm;height:9.2mm}

.rev50-logo-left{left:4.2mm}.rev50-logo-right{right:4.2mm}

.rev50-badge{left:32.5mm;right:32.5mm;top:15.4mm;height:4.4mm;font-size:2.2mm;white-space:nowrap}

.rev50-photo{left:6.2mm;top:22mm;width:19.5mm;height:26mm}

.rev50-front-values{left:29mm;top:22.2mm;width:49.5mm}

.rev50-row{grid-template-columns:13.5mm 2mm 1fr;height:3.35mm;font-size:1.95mm}

.rev50-front .rev50-front-daerah,.rev50-front .rev50-front-no{display:none!important}

.rev50-rules{left:7mm;top:22.5mm;width:53.5mm}

.rev50-rules h2{font-size:2.45mm;margin-bottom:1mm}

.rev50-rules ol{font-size:1.78mm;line-height:1.25;padding-left:4.2mm}

.rev50-rules li{margin:.4mm 0}

.rev50-qr{right:6.5mm;top:25mm;width:13.6mm;height:16mm}

.rev50-qr canvas,.rev50-qr img{width:10.7mm!important;height:10.7mm!important;image-rendering:pixelated}

.rev50-qr em{font-size:1.45mm}

.rev50-sign-left{left:12.3mm;top:39.8mm;width:22mm}

.rev50-sign-right{left:49mm;top:39.8mm;width:22mm}

.rev50-sign-title{font-size:1.72mm}.rev50-ttd{height:4.25mm;max-width:18mm}.rev50-sign-name{font-size:1.45mm;min-height:3mm}

.rev50-stamp-wrap{left:38.55mm;top:39.35mm;width:9.1mm;height:9.1mm}.rev50-stamp{max-width:9.1mm;max-height:9.1mm}

.rev50-back-address{left:10mm;right:10mm;width:auto;bottom:2.35mm;color:#111;text-shadow:none;font-size:1.35mm;font-weight:750;line-height:1.08;text-align:center;display:block;white-space:nowrap;text-overflow:ellipsis}



/* Standard report print view */

.report-table{font-size:12px}.report-table th{background:#eaf4fe;color:#08335f}

.report-print-header{display:none}

@media(max-width:700px){.login-page{justify-items:center;padding:24px}.login-identity{left:16px;right:16px;bottom:16px;min-width:0}.login-card{margin:0 0 148px}}

@media print{

  .rev50-title h1{font-size:4.15mm!important}

  .rev50-title p{font-size:1.45mm!important}

  .rev50-title strong{font-size:1.62mm!important}

  .rev50-front-values{left:29mm!important;top:22.2mm!important;width:49.5mm!important}

  .rev50-row{height:3.28mm!important;font-size:1.9mm!important}

  .rev50-front .rev50-front-daerah,.rev50-front .rev50-front-no{display:none!important}

  .rev50-rules h2{font-size:2.4mm!important}.rev50-rules ol{font-size:1.75mm!important}

  .rev50-back-address{font-size:1.3mm!important;color:#111!important;text-shadow:none!important;text-align:center!important}

  body.report-print .sidebar,body.report-print .topbar,body.report-print .print-actions,body.report-print .grid.stats,body.report-print .grid.two{display:none!important}

  body.report-print #view .card:last-child{display:block!important;width:275mm!important;margin:8mm auto!important}

  body.report-print #view .card:last-child h3{font-size:18pt!important;margin-bottom:10mm!important}

  body.report-print table{font-size:10pt!important}

}





/* ===== Revisi 56: KTA template alignment update ===== */



.rev50-logo{top:6.7mm!important;width:12.2mm!important;height:8.6mm!important}

.rev50-logo-left{left:8.0mm!important}.rev50-logo-right{right:8.0mm!important}

.rev50-title{left:17mm!important;right:17mm!important;top:9.8mm!important;text-align:center!important}

.rev50-title h1{font-size:3.45mm!important;letter-spacing:.10mm!important;line-height:1.02!important;white-space:normal!important}

.rev50-title p{font-size:1.28mm!important;line-height:1.12!important;margin-top:.8mm!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}

.rev50-title strong{font-size:1.45mm!important;line-height:1.12!important;margin-top:.55mm!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}

.rev50-badge{left:31mm!important;right:31mm!important;top:18.8mm!important;height:3.7mm!important;font-size:1.95mm!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important}

.rev50-photo{left:8.5mm!important;top:24.3mm!important;width:18.8mm!important;height:24.6mm!important;border-radius:2.2mm!important}

.rev50-front-values{left:31.4mm!important;top:25.0mm!important;width:44.8mm!important}

.rev50-row{grid-template-columns:12.2mm 1.8mm 1fr!important;height:3.05mm!important;font-size:1.72mm!important}

.rev50-row strong{padding-bottom:.15mm!important}

.rev50-back-title{top:9.8mm!important}

.rev50-back-badge{top:18.8mm!important}

.rev50-rules{left:8.0mm!important;top:24.6mm!important;width:49.5mm!important}

.rev50-rules h2{font-size:2.05mm!important;margin:0 0 .7mm!important}

.rev50-rules ol{font-size:1.52mm!important;line-height:1.16!important;padding-left:3.7mm!important}

.rev50-rules li{margin:.25mm 0!important}

.rev50-qr{right:7.4mm!important;top:26.6mm!important;width:12.3mm!important;height:14.4mm!important;padding:.5mm!important;grid-template-rows:1fr auto!important}

.rev50-qr img{display:block;width:9.5mm!important;height:9.5mm!important;object-fit:contain!important}

.rev50-qr em{font-size:1.18mm!important;letter-spacing:.02mm!important}

.rev50-sign-left{left:15.2mm!important;top:40.8mm!important;width:18mm!important}

.rev50-sign-right{left:50.6mm!important;top:40.8mm!important;width:18mm!important}

.rev50-sign-title{font-size:1.56mm!important;margin-bottom:.2mm!important}

.rev50-ttd{height:3.8mm!important;max-width:16.8mm!important}

.rev50-sign-line{width:16.5mm!important}.rev50-sign-name{font-size:1.32mm!important;min-height:2.7mm!important;line-height:1.02!important}

.rev50-stamp-wrap{left:39.3mm!important;top:40.0mm!important;width:8.6mm!important;height:8.6mm!important}

.rev50-stamp{max-width:8.6mm!important;max-height:8.6mm!important}

.rev50-back-address{left:10mm!important;right:10mm!important;bottom:2.0mm!important;width:auto!important;color:#111!important;font-size:1.22mm!important;line-height:1.05!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-shadow:none!important}

@media print{

  .rev50-title{top:9.8mm!important}

  .rev50-title h1{font-size:3.35mm!important}

  .rev50-title p{font-size:1.24mm!important}

  .rev50-title strong{font-size:1.42mm!important}

  .rev50-badge{top:18.8mm!important;height:3.7mm!important;font-size:1.9mm!important}

  .rev50-front-values{left:31.4mm!important;top:25.0mm!important;width:44.8mm!important}

  .rev50-row{font-size:1.68mm!important;height:3.00mm!important}

  .rev50-rules{top:24.6mm!important;width:49.5mm!important}

  .rev50-rules h2{font-size:2.0mm!important}

  .rev50-rules ol{font-size:1.48mm!important}

  .rev50-qr{top:26.6mm!important;width:12.3mm!important;height:14.4mm!important}

  .rev50-qr img{width:9.5mm!important;height:9.5mm!important}

}





/* ===== Revisi 57: clean identity, filters & mass print ===== */

.login-identity{background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important;padding:0!important;text-shadow:0 2px 7px rgba(0,0,0,.48)}

.login-identity span{color:#fff!important}.identity-logos img{filter:drop-shadow(0 3px 5px rgba(0,0,0,.3));object-fit:contain!important;background:transparent!important}

.brand-panel{background:transparent!important;border-bottom:1px solid rgba(255,255,255,.28)!important;color:#fff!important}

.brand-panel small,.brand-panel strong{color:#fff!important}.brand-logos img{background:transparent!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}

.section-header{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:14px}.section-header h3{margin:0!important}.search-box{display:flex;align-items:center;gap:10px;min-width:min(460px,60vw)}.search-box input,.search-input{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:#fff}.search-box span{font-size:12px;color:var(--muted);white-space:nowrap;font-weight:700}

.report-control,.kta-control{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}.inline-field{min-width:280px}.toolbar-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,240px) minmax(260px,1fr);gap:10px;flex:1}.toolbar-grid select{padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff}

@media(max-width:980px){.section-header{display:block}.search-box{margin-top:10px;min-width:0}.toolbar-grid{grid-template-columns:1fr}}

@media print{body.print-kta-batch .rev50-sheet{page-break-after:always!important;break-after:page!important} body.print-kta-batch .rev50-sheet:last-child{page-break-after:avoid!important;break-after:avoid!important}}





/* ===== Revisi 58: penyempurnaan posisi header, logo, ketentuan dan QR ===== */

.rev50-logo{top:4.0mm!important;width:12.2mm!important;height:8.1mm!important}

.rev50-logo-left{left:8.0mm!important}.rev50-logo-right{right:8.0mm!important}

.rev50-title{left:16mm!important;right:16mm!important;top:8.7mm!important;text-align:center!important}

.rev50-title h1{font-size:2.85mm!important;letter-spacing:.06mm!important;line-height:1.04!important;white-space:nowrap!important;overflow:visible!important}

.rev50-title p{font-size:1.16mm!important;line-height:1.12!important;margin-top:.65mm!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}

.rev50-title strong{font-size:1.30mm!important;line-height:1.12!important;margin-top:.50mm!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}

.rev50-badge{left:31.5mm!important;right:31.5mm!important;top:16.7mm!important;height:3.55mm!important;font-size:1.78mm!important;letter-spacing:.08mm!important}

.rev50-photo{top:22.4mm!important}

.rev50-front-values{top:23.2mm!important}

.rev50-back-title{top:8.7mm!important}

.rev50-back-badge{top:16.7mm!important}

.rev50-rules{left:8.0mm!important;top:21.8mm!important;width:49.2mm!important}

.rev50-rules h2{font-size:1.78mm!important;margin:0 0 .58mm!important;letter-spacing:.08mm!important}

.rev50-rules ol{font-size:1.37mm!important;line-height:1.13!important;padding-left:3.5mm!important}

.rev50-rules li{margin:.19mm 0!important}

.rev50-qr{right:7.2mm!important;top:23.1mm!important;width:12.8mm!important;height:15.2mm!important;background:#fff!important;z-index:5!important;display:grid!important;grid-template-rows:1fr auto!important;padding:.5mm!important}

.rev50-qr img{display:block!important;width:10.3mm!important;height:10.3mm!important;object-fit:contain!important;visibility:visible!important;opacity:1!important}

.rev50-qr em{font-size:1.12mm!important;color:#0c3d78!important}

.rev50-sign-left{top:38.6mm!important}.rev50-sign-right{top:38.6mm!important}.rev50-stamp-wrap{top:38.3mm!important}

@media print{

  .rev50-logo{top:4.0mm!important;width:12.2mm!important;height:8.1mm!important}

  .rev50-title{top:8.7mm!important}

  .rev50-title h1{font-size:2.82mm!important;white-space:nowrap!important}

  .rev50-title p{font-size:1.13mm!important;white-space:nowrap!important}

  .rev50-title strong{font-size:1.27mm!important;white-space:nowrap!important}

  .rev50-badge{top:16.7mm!important;height:3.55mm!important;font-size:1.76mm!important}

  .rev50-rules{top:21.8mm!important}.rev50-rules h2{font-size:1.76mm!important}.rev50-rules ol{font-size:1.34mm!important}

  .rev50-qr{top:23.1mm!important;width:12.8mm!important;height:15.2mm!important}

  .rev50-qr img{width:10.3mm!important;height:10.3mm!important}

  .rev50-sign-left,.rev50-sign-right{top:38.6mm!important}.rev50-stamp-wrap{top:38.3mm!important}

}





/* ===== Revisi 59: identity panel blocks with transparent-only logos ===== */

.login-identity{background:rgba(255,255,255,.94)!important;border:1px solid rgba(255,255,255,.75)!important;border-left:6px solid var(--ui-gold)!important;box-shadow:0 12px 32px rgba(0,0,0,.20)!important;color:#0c315d!important;padding:14px 18px!important;text-shadow:none!important}

.login-identity span{color:#334e70!important}

.identity-logos img{background:transparent!important;filter:drop-shadow(0 2px 3px rgba(8,43,87,.14))!important}

.brand-panel{background:linear-gradient(135deg,#f8fcff,#e7f3ff)!important;border-bottom:4px solid var(--ui-gold)!important;color:#08335f!important}

.brand-panel small,.brand-panel strong{color:#08335f!important}

.brand-logos img{background:transparent!important;filter:drop-shadow(0 2px 2px rgba(8,43,87,.14))!important}





/* ===== Revisi 60: panel transparan & logo unggahan resmi ===== */

.login-identity{

  background:rgba(255,255,255,.92)!important;

  border:1px solid rgba(255,255,255,.8)!important;

  border-left:5px solid var(--ui-gold)!important;

  box-shadow:0 14px 38px rgba(0,0,0,.15)!important;

  backdrop-filter:none!important;

  -webkit-backdrop-filter:none!important;

  color:#0c315d!important;

}

.login-identity b{color:#0c315d!important;text-shadow:none!important}

.login-identity span{color:#334e70!important;text-shadow:none!important}

.identity-logos img{object-fit:contain!important;background:transparent!important;filter:drop-shadow(0 2px 3px rgba(8,43,87,.14))!important}

.brand-panel{

  background:rgba(255,255,255,.12)!important;

  border:1px solid rgba(255,255,255,.22)!important;

  border-bottom:3px solid var(--ui-gold)!important;

  border-radius:14px!important;

  margin:0 0 16px!important;

  padding:13px!important;

  backdrop-filter:blur(6px)!important;

  -webkit-backdrop-filter:blur(6px)!important;

  color:#fff!important;

}

.brand-panel strong,.brand-panel small{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.20)!important}

.brand-logos img{object-fit:contain!important;background:transparent!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.22))!important}



/* ===== Revisi 61: rapatkan area tanda tangan belakang KTA ===== */

.rev50-sign-left{

  left:17.4mm!important;

  width:18mm!important;

}

.rev50-sign-right{

  left:48.6mm!important;

  width:18mm!important;

}

.rev50-stamp-wrap{

  left:38.5mm!important;

}

@media print{

  .rev50-sign-left{

    left:17.4mm!important;

    width:18mm!important;

  }

  .rev50-sign-right{

    left:48.6mm!important;

    width:18mm!important;

  }

  .rev50-stamp-wrap{

    left:38.5mm!important;

  }

}



/* ===== Revisi 62: hasil print KTA hanya kartu depan-belakang ===== */

@media print{

  body.print-kta-single,

  body.print-kta-batch{

    width:297mm!important;

    height:auto!important;

    margin:0!important;

    padding:0!important;

    background:#fff!important;

    overflow:visible!important;

  }



  body.print-kta-single #loginPage,

  body.print-kta-batch #loginPage,

  body.print-kta-single .sidebar,

  body.print-kta-batch .sidebar,

  body.print-kta-single .topbar,

  body.print-kta-batch .topbar,

  body.print-kta-single #view > *:not(#ktaPreview),

  body.print-kta-batch #view > *:not(#ktaPreview){

    display:none!important;

  }



  body.print-kta-single .app,

  body.print-kta-batch .app,

  body.print-kta-single .content,

  body.print-kta-batch .content,

  body.print-kta-single #view,

  body.print-kta-batch #view{

    display:block!important;

    width:297mm!important;

    height:auto!important;

    min-height:0!important;

    margin:0!important;

    padding:0!important;

    background:#fff!important;

    overflow:visible!important;

  }



  body.print-kta-single #ktaPreview,

  body.print-kta-batch #ktaPreview{

    display:block!important;

    position:static!important;

    width:297mm!important;

    margin:0!important;

    padding:0!important;

    background:#fff!important;

  }



  body.print-kta-single #ktaPreview .rev50-sheet{

    display:flex!important;

    width:297mm!important;

    height:210mm!important;

    min-height:210mm!important;

    margin:0!important;

    padding:16mm 10mm!important;

    gap:10mm!important;

    justify-content:center!important;

    align-items:flex-start!important;

    page-break-after:avoid!important;

    break-after:avoid!important;

  }



  body.print-kta-batch #ktaPreview .rev50-sheet{

    display:flex!important;

    width:297mm!important;

    height:210mm!important;

    min-height:210mm!important;

    margin:0!important;

    padding:16mm 10mm!important;

    gap:10mm!important;

    justify-content:center!important;

    align-items:flex-start!important;

    page-break-after:always!important;

    break-after:page!important;

  }



  body.print-kta-batch #ktaPreview .rev50-sheet:last-child{

    page-break-after:avoid!important;

    break-after:avoid!important;

  }



  body.print-kta-single .rev50-card,

  body.print-kta-batch .rev50-card{

    flex:none!important;

    -webkit-print-color-adjust:exact!important;

    print-color-adjust:exact!important;

  }



  @page{

    size:A4 landscape;

    margin:0;

  }

}



/* ===== Revisi 63: identitas daerah yang sedang login ===== */

.role-badge .sidebar-identity-label{

  display:block;

  font-size:9.5px;

  font-weight:800;

  letter-spacing:.12em;

  color:rgba(255,255,255,.76);

  margin-bottom:6px;

}

.role-badge b{

  display:block;

  font-size:14px;

  line-height:1.28;

  color:#fff;

  margin-bottom:3px;

}

.role-badge span{

  font-size:11px;

  color:rgba(255,255,255,.88);

  line-height:1.28;

  word-break:break-word;

}



/* ===== Revisi 64: tombol pengaturan urutan otomatis ===== */

button:disabled{

  opacity:.42;

  cursor:not-allowed;

  filter:none!important;

}



/* ===== Revisi 65: notifikasi dan ringkasan approval ===== */

.stat.pending-stat{border-left-color:#f59e0b;background:#fffcf4}

.stat.approved-stat{border-left-color:#16a34a;background:#f5fff8}

.notification-card{border-top:4px solid #f6c33b}

.notification-card .section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}

.notify-list{display:grid;gap:8px;margin-top:12px}

.notify-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #e2e8f0;border-radius:12px;background:#fbfdff}

.notify-row.unread{border-left:4px solid #f59e0b;background:#fffaf0}

.notify-row div{display:grid;gap:3px}

.notify-row div b{font-size:13px;color:#08335f}

.notify-row div span{font-size:12px;color:#64748b}

.approval-status.approval-pending{background:#fff1c9;color:#835d00}

.approval-status.approval-approved{background:#d6f5e3;color:#116338}

.approval-status.approval-rejected{background:#fee2e2;color:#991b1b}





/* ===== Revisi 66: Copyright footer login dan sidebar dashboard ===== */

.login-identity{top:35px!important;bottom:auto!important;}

.login-copyright{

  position:absolute;

  left:38px;

  bottom:22px;

  z-index:2;

  font-size:12px;

  font-weight:700;

  letter-spacing:.02em;

  color:rgba(255,255,255,.92);

  text-shadow:0 1px 5px rgba(0,0,0,.48);

}

.sidebar{display:flex!important;flex-direction:column!important;}

.sidebar nav{flex:0 0 auto;}

.sidebar-copyright{

  margin-top:auto;

  padding:18px 4px 4px;

  text-align:left;

  font-size:11px;

  font-weight:700;

  color:rgba(255,255,255,.78);

  letter-spacing:.02em;

}

@media(max-width:700px){

  .login-identity{bottom:50px!important;}

  .login-copyright{left:16px;bottom:18px;font-size:11px;}

}

@media print{

  .login-copyright,.sidebar-copyright{display:none!important;}

}



/* ===== Revisi 67: Copyright center pada login dan dashboard ===== */

.login-copyright{

  left:0!important;

  right:0!important;

  width:100%!important;

  text-align:center!important;

  padding:0 16px!important;

  margin:0!important;

}

.sidebar-copyright{

  display:block!important;

  width:100%!important;

  text-align:center!important;

  padding:18px 0 4px!important;

  margin-left:auto!important;

  margin-right:auto!important;

}

@media(max-width:700px){

  .login-copyright{

    left:0!important;

    right:0!important;

    width:100%!important;

    text-align:center!important;

    padding:0 12px!important;

  }

}

@media print{

  .login-copyright,.sidebar-copyright{display:none!important;}

}



/* ===== Revisi 68: Ikon notifikasi dashboard dengan badge merah ===== */

.topbar-actions{

  display:flex;

  align-items:center;

  gap:10px;

}

.notification-shell{

  position:relative;

}

.notification-button{

  width:46px;

  height:46px;

  padding:0!important;

  border-radius:14px!important;

  display:grid;

  place-items:center;

  position:relative;

  background:#fff!important;

  color:#08335f!important;

  border:1px solid #d7e4f3!important;

  box-shadow:0 4px 14px rgba(8,51,95,.08);

}

.notification-button:hover{

  background:#edf6ff!important;

}

.notification-button.has-alert{

  border-color:#efbac0!important;

}

.bell-icon{

  font-size:20px;

  line-height:1;

}

.notification-count{

  position:absolute;

  top:-6px;

  right:-6px;

  min-width:20px;

  height:20px;

  padding:0 5px;

  border-radius:12px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:#dc2626;

  color:#fff;

  font-size:11px;

  font-weight:900;

  border:2px solid #fff;

}

.notification-panel{

  position:absolute;

  top:54px;

  right:0;

  width:min(360px,85vw);

  background:#fff;

  border:1px solid #d9e2ef;

  border-radius:16px;

  box-shadow:0 18px 44px rgba(15,23,42,.18);

  z-index:100;

  overflow:hidden;

}

.notification-panel-head{

  padding:13px 15px;

  background:#edf6ff;

  color:#08335f;

  border-bottom:1px solid #d9e2ef;

}

.notification-panel-body{

  max-height:330px;

  overflow-y:auto;

  padding:8px;

}

.notification-item{

  padding:10px;

  margin:4px 0;

  border-radius:11px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:8px;

  background:#f8fbff;

  border:1px solid #eef3f9;

}

.notification-item.pending{

  border-left:4px solid #dc2626;

  background:#fff8f8;

}

.notification-item div{

  display:grid;

  gap:3px;

  min-width:0;

}

.notification-item b{

  font-size:12px;

  color:#08335f;

}

.notification-item div span{

  font-size:11px;

  color:#64748b;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

}

.notification-empty{

  padding:12px 8px;

  margin:0;

}

.notification-link{

  width:100%;

  border-radius:0!important;

  padding:12px!important;

}

@media(max-width:700px){

  .topbar{align-items:flex-start;gap:12px;}

  .topbar-actions{flex-shrink:0;}

}

@media print{

  .notification-shell{display:none!important;}

}



.verify-card{background:#f5faff;border:1px solid #d9e8fb;border-radius:14px;padding:14px;margin-top:14px}.verify-card p{margin:7px 0;color:#12345d}



/* ===== Revisi 70: status aktif/nonaktif Admin Daerah ===== */

.admin-status{

  display:inline-flex;

  align-items:center;

  padding:5px 10px;

  border-radius:999px;

  font-size:11px;

  font-weight:900;

}

.admin-active{background:#dcfce7;color:#166534}

.admin-inactive{background:#fee2e2;color:#991b1b}

button.admin-enable{background:#16a34a!important;color:#fff!important}



/* ===== Revisi 71: login pertama wajib ganti password ===== */

.password-change-page{

  min-height:100vh;

  display:grid;

  place-items:center;

  padding:24px;

  background:linear-gradient(120deg,rgba(7,23,48,.48),rgba(9,42,90,.34)),url('assets/login-background.png') center/cover no-repeat;

}

.password-change-card{

  width:min(470px,94vw);

  background:rgba(255,255,255,.97);

  border-radius:24px;

  padding:28px;

  border-top:5px solid var(--ui-gold);

  box-shadow:0 22px 60px rgba(0,0,0,.28);

}

.password-logo-row{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:18px;

  margin-bottom:12px;

}

.password-logo-row img:first-child{height:54px;width:110px;object-fit:contain}

.password-logo-row img:last-child{height:54px;width:68px;object-fit:contain}

.password-change-card h1{

  margin:0 0 8px;

  text-align:center;

  color:#08335f;

}

.password-change-card p{

  color:#475569;

  font-size:13px;

  line-height:1.5;

  text-align:center;

  margin:0 0 18px;

}

.password-change-card input{

  width:100%;

  padding:12px 13px;

  border:1px solid var(--line);

  border-radius:12px;

  background:#fff;

}

.password-change-card button{

  width:100%;

  margin-top:14px;

}

.password-policy{

  margin-top:10px;

  padding:10px 12px;

  background:#edf6ff;

  border-radius:10px;

  font-size:12px;

  color:#334e70;

}

.password-logout{margin-top:8px!important}



/* ===== Revisi 71: pagination seluruh daftar/tabel ===== */

.table-pagination{

  display:flex;

  align-items:center;

  justify-content:space-between;

  flex-wrap:wrap;

  gap:10px;

  padding:12px 2px 2px;

  font-size:12px;

  color:#526176;

}

.page-size-control label{

  display:flex;

  align-items:center;

  gap:7px;

  font-weight:700;

}

.page-size-control select{

  padding:6px 9px;

  border:1px solid var(--line);

  border-radius:8px;

  background:#fff;

}

.page-info{

  font-weight:700;

  color:#334155;

}

.page-actions{

  display:flex;

  gap:6px;

}

@media(max-width:700px){

  .table-pagination{flex-direction:column;align-items:flex-start}

}

@media print{

  .password-change-page,.table-pagination{display:none!important}

}



/* ===== Revisi 72: Persetujuan aman, profil view, dan arsip ===== */

.approval-toolbar .section-header{

  display:flex;

  justify-content:space-between;

  align-items:flex-start;

  gap:14px;

  flex-wrap:wrap;

  margin-bottom:14px;

}

.approval-switch{

  display:flex;

  gap:6px;

}

.approval-switch button{

  background:#edf4fc!important;

  color:#08335f!important;

}

.approval-switch button.active{

  background:#1267bd!important;

  color:#fff!important;

}

.approval-bulk-actions{

  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:8px;

  padding:12px;

  background:#f5f9fe;

  border:1px solid #e2ecf7;

  border-radius:13px;

  margin:10px 0 16px;

}

.select-all-request{

  margin-right:8px;

  display:flex;

  gap:6px;

  align-items:center;

  font-size:12px;

  font-weight:800;

  color:#334155;

}

.approval-actions{white-space:nowrap}

.approval-archived{background:#e5e7eb;color:#374151}

.modal-shell{

  position:fixed;

  inset:0;

  z-index:400;

  display:grid;

  place-items:center;

  padding:18px;

  background:rgba(2,12,27,.58);

}

.modal-card{

  width:min(790px,96vw);

  max-height:92vh;

  overflow:auto;

  background:#fff;

  border-radius:20px;

  padding:18px;

  box-shadow:0 26px 70px rgba(0,0,0,.28);

}

.modal-head{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding-bottom:12px;

  border-bottom:1px solid #e6edf6;

}

.modal-head h3{margin:0;color:#08335f}

.modal-close{

  font-size:26px;

  line-height:1;

  padding:0!important;

  width:38px;

  height:38px;

  background:#edf4fc!important;

  color:#08335f!important;

}

.request-meta{

  display:flex;

  flex-wrap:wrap;

  align-items:center;

  gap:8px;

  margin:14px 0;

  font-size:12px;

  color:#526176;

}

.request-profile-grid{

  display:grid;

  grid-template-columns:170px 1fr;

  gap:18px;

}

.request-photo{

  height:215px;

  border-radius:14px;

  border:1px solid #d9e2ef;

  background:#f5f7fb;

  display:grid;

  place-items:center;

  overflow:hidden;

  color:#667085;

  font-size:12px;

}

.request-photo img{width:100%;height:100%;object-fit:cover}

.profile-detail-list{display:grid;gap:6px}

.profile-read-row{

  display:grid;

  grid-template-columns:115px 10px 1fr;

  gap:6px;

  font-size:13px;

  line-height:1.35;

  border-bottom:1px dashed #e2e8f0;

  padding-bottom:5px;

}

.profile-read-row b{color:#526176}

.profile-read-row strong{color:#0f2444;word-break:break-word}

.pending-kta{

  display:inline-block;

  background:#fff1c9;

  color:#835d00;

  border-radius:999px;

  padding:3px 8px;

  font-size:11px;

}

.modal-actions{

  display:flex;

  flex-wrap:wrap;

  gap:8px;

  justify-content:flex-end;

  border-top:1px solid #e6edf6;

  padding-top:14px;

  margin-top:16px;

}

@media(max-width:700px){

  .request-profile-grid{grid-template-columns:1fr}

  .request-photo{width:150px;height:190px;margin:auto}

  .profile-read-row{grid-template-columns:98px 8px 1fr;font-size:12px}

}

@media print{

  .modal-shell,.approval-bulk-actions{display:none!important}

}



/* ===== Revisi 73: Ulang Tahun & WhatsApp ===== */

.birthday-summary-card{border-top:4px solid #f59e0b;background:linear-gradient(135deg,#fffdf7,#fff)}

.birthday-summary-card .section-header,.birthday-hero{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}

.birthday-hero{border-top:4px solid #f59e0b}

.birthday-hero h3{font-size:19px}

.checkbox-field{align-content:start}

.consent-line{display:flex;align-items:flex-start;gap:8px;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:#fff;line-height:1.35;font-size:12px;color:#334155}

.consent-line input{width:auto;margin-top:1px}

@media print{.birthday-summary-card,.birthday-hero{display:none!important}}



/* ===== Revisi 74: Aktivasi Mandiri Anggota via Magic Link ===== */

.btn-activation{

  background:linear-gradient(135deg,#f6c33b,#dca51a)!important;

  color:#08335f!important;

  margin-top:4px!important;

}

.btn-magic-login{

  background:#edf6ff!important;

  color:#08335f!important;

  border:1px solid #d5e5f7!important;

  margin-top:5px!important;

}

.activation-modal{

  position:fixed;

  top:0;

  left:0;

  right:0;

  bottom:0;

  z-index:500;

  background:rgba(3,17,36,.64);

  display:grid;

  place-items:center;

  padding:18px;

}

.activation-card{

  position:relative;

  width:min(470px,96vw);

  background:#fff;

  border-radius:20px;

  border-top:5px solid var(--ui-gold);

  padding:26px 24px 22px;

  box-shadow:0 25px 70px rgba(0,0,0,.3);

}

.activation-card h2{

  margin:0 0 8px;

  color:#08335f;

}

.activation-card p{

  color:#526176;

  font-size:13px;

  line-height:1.45;

}

.activation-card input{

  width:100%;

  padding:11px 12px;

  border:1px solid var(--line);

  border-radius:10px;

  background:#fff;

}

.activation-card button[type="submit"]{

  width:100%;

  margin-top:16px;

}

.activation-close{

  position:absolute;

  right:12px;

  top:12px;

  width:36px;

  height:36px;

  padding:0!important;

  border-radius:999px!important;

  background:#edf6ff!important;

  color:#08335f!important;

  font-size:25px;

  line-height:1;

}

.activation-security-note{

  margin:14px 0 0!important;

  padding:10px 12px;

  border-radius:10px;

  background:#f5f9fe;

  font-size:11.5px!important;

}

@media print{

  .activation-modal{display:none!important}

}



/* ===== Revisi 77: Tampilan Login Center & Responsive di Handphone ===== */

.login-page{

  min-height:100dvh;

}



/* Smartphone portrait/tablet kecil:

   form, blok identitas, dan copyright menjadi satu susunan rapi di tengah.

   Posisi absolute lama dinonaktifkan agar tampilan tidak bergeser. */

@media (max-width:700px){

  .login-page{

    min-height:100dvh!important;

    display:flex!important;

    flex-direction:column!important;

    align-items:center!important;

    justify-content:center!important;

    gap:10px!important;

    padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;

    overflow-y:auto!important;

    background-position:center center!important;

  }

  @media (min-height:580px) {

    .login-page {

      height: 100dvh!important;

      max-height: 100dvh!important;

      overflow-y: hidden!important;

    }

  }

  .login-overlay{

    position:fixed!important;

  }

  .login-card{

    position:relative!important;

    z-index:2!important;

    width:min(100%,420px)!important;

    margin:0 auto!important;

    padding:18px 18px 14px!important;

    border-radius:24px!important;

    flex:0 0 auto!important;

  }

  .login-card h1{

    font-size:clamp(22px,6.5vw,25px)!important;

    line-height:1.16!important;

    letter-spacing:-.02em!important;

  }

  .login-card p{

    font-size:13px!important;

    line-height:1.35!important;

    margin:8px 0 10px!important;

  }

  .login-card input{

    padding:10px 12px!important;

    margin:4px 0!important;

  }

  .login-card button{

    margin:6px 0!important;

    padding:10px 12px!important;

    font-size:13.5px!important;

  }

  .login-card small{

    margin-top:8px!important;

    font-size:11px!important;

  }

  .login-identity{

    position:relative!important;

    left:auto!important;

    right:auto!important;

    bottom:auto!important;

    z-index:2!important;

    width:min(100%,420px)!important;

    min-width:0!important;

    margin:0 auto!important;

    padding:10px 12px!important;

    border-radius:18px!important;

    flex:0 0 auto!important;

  }

  .identity-logos{

    gap:10px!important;

    margin-bottom:4px!important;

  }

  .identity-logos img:first-child{

    height:28px!important;

    width:auto!important;

    max-width:85px!important;

  }

  .identity-logos img:last-child{

    height:32px!important;

    width:auto!important;

    max-width:50px!important;

  }

  .login-identity b{

    font-size:13px!important;

    line-height:1.25!important;

  }

  .login-identity span{

    font-size:11px!important;

    line-height:1.25!important;

  }

  .login-copyright{

    position:relative!important;

    left:auto!important;

    right:auto!important;

    bottom:auto!important;

    z-index:2!important;

    display:block!important;

    width:min(100%,420px)!important;

    margin:0 auto!important;

    padding:2px 0 0!important;

    text-align:center!important;

    font-size:11px!important;

  }

  .member-login-help{

    font-size:11px!important;

    margin:6px 0 0!important;

    line-height:1.3!important;

  }

}



/* Pada HP dengan tinggi layar lebih pendek, konten dapat discroll tanpa terpotong. */

@media (max-width:700px) and (max-height:580px){

  .login-page{

    justify-content:flex-start!important;

    padding-top:16px!important;

  }

  .login-card{

    padding:14px 15px 12px!important;

  }

  .login-card p{

    margin:6px 0 8px!important;

  }

  .login-identity{

    padding:8px 10px!important;

  }

}



/* Ponsel sempit: jarak dan tulisan tetap proporsional. */

@media (max-width:380px){

  .login-page{padding-left:12px!important;padding-right:12px!important;gap:8px!important}

  .login-card{padding:16px 14px 12px!important}

  .login-card h1{font-size:21px!important}

  .login-card p{font-size:12.5px!important}

  .login-identity b{font-size:12.5px!important}

}



/* ===== Revisi 78: login hidden fix + Dashboard Anggota setelah Magic Link ===== */

/* Fix utama: aturan responsive Revisi 77 memakai display:flex!important.

   Saat sesi login aktif, class hidden harus tetap menang agar form login hilang. */

.login-page.hidden,

.activation-modal.hidden,

.password-change-page.hidden{

  display:none!important;

}

.member-welcome{

  background:linear-gradient(135deg,#1267bd,#08335f);

  color:#fff;

  border-radius:22px;

  padding:22px;

  margin-bottom:16px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:14px;

}

.member-welcome small{font-size:11px;font-weight:900;letter-spacing:.13em;color:#dbeafe}

.member-welcome h2{margin:6px 0;color:#fff}

.member-welcome p{margin:0;color:#e1efff}

.member-status{

  padding:8px 13px;border-radius:999px;background:#d6f5e3;color:#116338;

  font-weight:900;font-size:12px;

}

.member-kta-number{font-size:23px!important;letter-spacing:.03em}

.member-unit{font-size:18px!important}

.member-actions{display:flex;gap:10px;flex-wrap:wrap}

@media(max-width:900px){

  .app.member-app{display:flex!important;flex-direction:column!important;min-height:100dvh!important}

  .app.member-app .content{order:1!important;padding:14px!important}

  .app.member-app .sidebar{order:2!important;position:relative!important;height:auto!important;min-height:auto!important;margin-top:10px!important}

  .app.member-app .topbar{margin-bottom:12px!important}

  .app.member-app .topbar #pageTitle{font-size:22px!important}

  .member-welcome{flex-direction:column!important;align-items:flex-start!important;padding:18px!important}

  .member-actions button{flex:1 1 100%!important}

}



/* ===== Revisi 79: Paksa Login Hilang & Aktifkan Interaksi Dashboard Anggota ===== */

body.session-authenticated #loginPage{

  display:none!important;

  visibility:hidden!important;

  opacity:0!important;

  pointer-events:none!important;

  height:0!important;

  min-height:0!important;

  width:0!important;

  overflow:hidden!important;

  position:fixed!important;

  z-index:-1!important;

}

body.session-authenticated #app:not(.hidden){

  display:grid!important;

  pointer-events:auto!important;

  position:relative!important;

  z-index:2!important;

}

/* ===== Revisi 89: Notifikasi Sistem Tampil di Atas Halaman ===== */

.app-toast{

  position:fixed;

  top:max(18px,calc(env(safe-area-inset-top) + 12px));

  left:50%;

  bottom:auto;

  transform:translateX(-50%);

  z-index:9999999 !important;

  width:max-content;

  max-width:min(460px,calc(100vw - 28px));

  padding:13px 16px;

  border-radius:14px;

  background:#08335f;

  color:#fff;

  font-size:13px;

  font-weight:700;

  text-align:center;

  line-height:1.4;

  box-shadow:0 16px 42px rgba(0,0,0,.25);

  opacity:1;

  pointer-events:none;

  transition:opacity .3s ease,transform .3s ease;

}

.app-toast-hide{

  opacity:0;

  transform:translate(-50%,-14px);

}

@media screen and (max-width:700px){

  .app-toast{

    top:max(12px,calc(env(safe-area-inset-top) + 10px));

    width:calc(100vw - 28px);

    max-width:420px;

    padding:12px 14px;

    font-size:13px;

    border-radius:13px;

  }

}

.member-actions{position:relative;z-index:3}

.member-actions button{

  position:relative;

  z-index:3;

  touch-action:manipulation;

  -webkit-tap-highlight-color:transparent;

}

@media(max-width:900px){

  body.session-authenticated #app.member-app:not(.hidden){

    display:flex!important;

    flex-direction:column!important;

    min-height:100dvh!important;

  }

  .member-actions button{

    min-height:48px!important;

  }

}



/* ===== Revisi 80: Kartu Anggota responsive mobile & Ubah Password Anggota ===== */

.member-password-button{

  border:1px solid #d5e5f7!important;

}

.member-password-card{

  max-width:680px;

}

.password-form-grid{

  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:14px;

  margin-top:14px;

}

.member-password-policy{

  margin-top:14px;

  max-width:100%;

}

.member-password-actions{

  margin-top:16px;

}



/* Tampilan kartu hanya di layar handphone anggota.

   Ukuran kartu cetak/PDF tetap mengikuti ukuran fisik KTA. */

@media screen and (max-width:700px){

  body.session-authenticated #app.member-app .content{

    padding:10px!important;

  }

  body.session-authenticated #app.member-app .kta-control{

    padding:12px!important;

    margin-bottom:12px!important;

  }

  body.session-authenticated #app.member-app .kta-control .toolbar-grid{

    grid-template-columns:1fr!important;

  }

  body.session-authenticated #app.member-app .kta-control .search-input,

  body.session-authenticated #app.member-app .kta-control select{

    display:none!important;

  }

  body.session-authenticated #app.member-app .kta-control .actions{

    width:100%!important;

    display:grid!important;

    grid-template-columns:1fr 1fr!important;

    gap:8px!important;

  }

  body.session-authenticated #app.member-app .kta-control .actions button{

    padding:11px 7px!important;

    font-size:12px!important;

  }

  body.session-authenticated #app.member-app #ktaPreview{

    width:100%!important;

    overflow:hidden!important;

    background:transparent!important;

  }

  body.session-authenticated #app.member-app #ktaPreview .rev50-sheet.member-mobile-kta-sheet{

    width:100%!important;

    min-height:0!important;

    height:auto!important;

    padding:4px 0 18px!important;

    margin:0!important;

    background:transparent!important;

    display:flex!important;

    flex-direction:column!important;

    align-items:center!important;

    justify-content:flex-start!important;

    gap:14px!important;

    transform:none!important;

    overflow:visible!important;

  }

  body.session-authenticated #app.member-app #ktaPreview .rev50-sheet.member-mobile-kta-sheet .rev50-card{

    flex:0 0 auto!important;

    transform-origin:top center!important;

  }

  .password-form-grid{

    grid-template-columns:1fr!important;

  }

  .member-password-card{

    margin-top:0!important;

  }

  .member-password-actions button{

    flex:1 1 100%!important;

  }

}

@media print{

  .member-password-card{display:none!important}

  #ktaPreview .rev50-card{

    transform:none!important;

    margin-bottom:0!important;

  }

}



/* ===== Revisi 81: Login Anggota dengan Password ===== */

.member-login-help{

  margin:10px 0 0!important;

  padding:9px 11px;

  border-radius:10px;

  background:#f3f8fe;

  color:#526176!important;

  font-size:11.5px!important;

  line-height:1.4!important;

}

.login-card button[disabled]{

  opacity:.65;

  cursor:wait;

}



/* ===== Revisi 82: Login Password & Lupa Password Anggota ===== */

.btn-forgot-password{

  background:transparent!important;

  color:#0c4a8f!important;

  border:1px dashed #b8d0ea!important;

  margin-top:5px!important;

}

.btn-forgot-password:hover{

  background:#eef6ff!important;

}

.login-card button[disabled]{

  opacity:.65;

  cursor:wait;

}

#memberRecoveryPage:not(.hidden){

  display:grid!important;

  z-index:800!important;

}

@media(max-width:700px){

  .btn-forgot-password{

    min-height:44px!important;

  }

}



/* ===== Revisi 83: Semua popup benar-benar center pada handphone ===== */

html, body{

  max-width:100vw;

  overflow-x:hidden;

}



/* Center universal untuk modal popup aplikasi */

.activation-modal:not(.hidden),

.modal-shell:not(.hidden){

  position:fixed!important;

  inset:0!important;

  left:0!important;

  right:0!important;

  top:0!important;

  bottom:0!important;

  width:100vw!important;

  max-width:100vw!important;

  min-height:100dvh!important;

  height:100dvh!important;

  padding:16px!important;

  margin:0!important;

  display:flex!important;

  align-items:center!important;

  justify-content:center!important;

  overflow-y:auto!important;

  overflow-x:hidden!important;

  transform:none!important;

}



/* Card popup selalu dihitung dari lebar layar, bukan elemen induk */

.activation-modal:not(.hidden) .activation-card,

.modal-shell:not(.hidden) .modal-card{

  position:relative!important;

  left:auto!important;

  right:auto!important;

  top:auto!important;

  bottom:auto!important;

  transform:none!important;

  width:min(470px, calc(100vw - 32px))!important;

  max-width:calc(100vw - 32px)!important;

  min-width:0!important;

  margin:auto!important;

  flex:0 1 auto!important;

  box-sizing:border-box!important;

}



/* Profil pengajuan lebih lebar saat desktop, tetapi tetap center di HP */

.modal-shell:not(.hidden) .modal-card{

  width:min(790px, calc(100vw - 32px))!important;

}



/* Halaman ganti/reset password juga center */

.password-change-page:not(.hidden){

  min-height:100dvh!important;

  width:100vw!important;

  max-width:100vw!important;

  display:flex!important;

  align-items:center!important;

  justify-content:center!important;

  padding:16px!important;

  overflow-x:hidden!important;

}

.password-change-page:not(.hidden) .password-change-card{

  width:min(470px, calc(100vw - 32px))!important;

  max-width:calc(100vw - 32px)!important;

  margin:auto!important;

}



/* Mobile: card tidak terlalu mepet tepi dan isi tetap nyaman dibaca */

@media screen and (max-width:700px){

  .activation-modal:not(.hidden),

  .modal-shell:not(.hidden){

    padding:14px!important;

    align-items:center!important;

  }

  .activation-modal:not(.hidden) .activation-card,

  .modal-shell:not(.hidden) .modal-card{

    width:calc(100vw - 28px)!important;

    max-width:calc(100vw - 28px)!important;

    margin:auto!important;

    padding:22px 18px 18px!important;

    border-radius:22px!important;

  }

  .activation-card h2{

    font-size:clamp(22px, 6.2vw, 27px)!important;

    line-height:1.16!important;

    padding-right:38px!important;

  }

  .activation-close{

    right:10px!important;

    top:10px!important;

  }

  .modal-shell:not(.hidden) .modal-card{

    max-height:calc(100dvh - 28px)!important;

  }

  .password-change-page:not(.hidden) .password-change-card{

    width:calc(100vw - 28px)!important;

    max-width:calc(100vw - 28px)!important;

    margin:auto!important;

  }

}



/* Untuk tinggi layar pendek, popup tetap center bila muat,

   dan dapat discroll aman bila kontennya lebih tinggi dari layar. */

@media screen and (max-width:700px) and (max-height:640px){

  .activation-modal:not(.hidden),

  .modal-shell:not(.hidden),

  .password-change-page:not(.hidden){

    align-items:flex-start!important;

    padding-top:14px!important;

    padding-bottom:14px!important;

  }

}



/* ===== Revisi 84: Dialog Konfirmasi & Notifikasi Sistem ===== */

.system-dialog-card{

  width:min(470px,calc(100vw - 32px))!important;

}

.system-dialog-card h2{

  padding-right:0!important;

  margin-bottom:8px!important;

}

.system-dialog-actions{

  display:flex;

  justify-content:flex-end;

  gap:9px;

  margin-top:18px;

}

.system-dialog-actions button{

  margin:0!important;

  min-width:120px;

}

.system-dialog textarea{

  width:100%;

  resize:vertical;

  min-height:96px;

  padding:12px;

  border:1px solid var(--line);

  border-radius:12px;

  font:inherit;

  box-sizing:border-box;

}

@media screen and (max-width:700px){

  .system-dialog-actions{

    display:grid!important;

    grid-template-columns:1fr 1fr!important;

  }

  .system-dialog-actions button{

    min-width:0!important;

    width:100%!important;

    min-height:46px!important;

  }

}



/* ===== Revisi 85: KTA vertikal mobile untuk semua role ===== */

/* Berlaku untuk Pengurus Nasional, Pengurus Daerah, dan Anggota saat preview di HP.

   Kartu cetak/PDF tetap pada ukuran fisik asli. */

@media screen and (max-width:700px){

  body.session-authenticated #app:not(.hidden) #ktaPreview{

    width:100%!important;

    max-width:100%!important;

    overflow:hidden!important;

    padding:0!important;

    margin-top:10px!important;

    background:transparent!important;

  }



  body.session-authenticated #app:not(.hidden) #ktaPreview .rev50-sheet.mobile-kta-vertical-sheet{

    width:100%!important;

    min-height:0!important;

    height:auto!important;

    padding:4px 0 18px!important;

    margin:0 auto!important;

    background:transparent!important;

    display:flex!important;

    flex-direction:column!important;

    align-items:center!important;

    justify-content:flex-start!important;

    gap:14px!important;

    transform:none!important;

    transform-origin:center top!important;

    overflow:visible!important;

  }



  body.session-authenticated #app:not(.hidden) #ktaPreview .rev50-sheet.mobile-kta-vertical-sheet .rev50-card{

    flex:0 0 auto!important;

    transform-origin:top center!important;

  }



  /* Toolbar pengurus tetap tampil dan dibuat rapi di atas kartu. */

  body.session-authenticated #app:not(.hidden) .kta-control{

    padding:12px!important;

    margin-bottom:10px!important;

    overflow:hidden!important;

  }

  body.session-authenticated #app:not(.hidden) .kta-control .toolbar-grid{

    grid-template-columns:1fr!important;

    gap:8px!important;

  }

  body.session-authenticated #app:not(.hidden) .kta-control .search-input,

  body.session-authenticated #app:not(.hidden) .kta-control select{

    width:100%!important;

    max-width:100%!important;

    box-sizing:border-box!important;

  }

  body.session-authenticated #app:not(.hidden) .kta-control .actions{

    width:100%!important;

    display:grid!important;

    grid-template-columns:1fr!important;

    gap:8px!important;

  }

  body.session-authenticated #app:not(.hidden) .kta-control .actions button{

    width:100%!important;

    min-height:44px!important;

    padding:10px 8px!important;

    font-size:12px!important;

  }



  /* Akun Anggota tidak memerlukan pencarian/pemilih kartu sendiri. */

  body.session-authenticated #app.member-app:not(.hidden) .kta-control .search-input,

  body.session-authenticated #app.member-app:not(.hidden) .kta-control select{

    display:none!important;

  }

}



@media print{

  #ktaPreview .rev50-sheet.mobile-kta-vertical-sheet{

    width:297mm!important;

    height:210mm!important;

    display:flex!important;

    flex-direction:row!important;

    gap:10mm!important;

    padding:10mm!important;

  }

  #ktaPreview .rev50-sheet.mobile-kta-vertical-sheet .rev50-card{

    transform:none!important;

    margin-bottom:0!important;

  }

}



/* ===== Revisi 86: Print/PDF KTA memakai dokumen khusus tanpa menu dashboard ===== */

/* Kelas ini dipakai di halaman cetak baru yang hanya berisi KTA.

   Tidak ada sidebar, header aplikasi, filter, atau tombol yang ikut tercetak. */

body.kta-only-print #ktaPrintRoot{

  background:#fff!important;

}

@media print{

  body.kta-only-print *{

    visibility:visible!important;

  }

  body.kta-only-print #ktaPrintRoot{

    display:block!important;

    position:static!important;

  }

}



/* ===== Revisi 87: Panel Lonceng Notifikasi Center pada Handphone ===== */

.notification-panel-head{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

}

.notification-close{

  display:none;

  width:34px!important;

  height:34px!important;

  min-width:34px!important;

  padding:0!important;

  border-radius:999px!important;

  background:#dfeefe!important;

  color:#08335f!important;

  font-size:24px!important;

  line-height:1!important;

  box-shadow:none!important;

}

.notification-backdrop{

  display:none;

}

@media screen and (max-width:700px){

  body.notification-panel-open{

    overflow:hidden!important;

  }

  .notification-backdrop:not(.hidden){

    display:block!important;

    position:fixed!important;

    inset:0!important;

    width:100vw!important;

    height:100dvh!important;

    z-index:1090!important;

    background:rgba(2,12,27,.58)!important;

  }

  .notification-panel:not(.hidden){

    position:fixed!important;

    top:50%!important;

    left:50%!important;

    right:auto!important;

    bottom:auto!important;

    transform:translate(-50%,-50%)!important;

    width:calc(100vw - 28px)!important;

    max-width:420px!important;

    max-height:calc(100dvh - 32px)!important;

    margin:0!important;

    border-radius:22px!important;

    z-index:1100!important;

    overflow:hidden!important;

    box-sizing:border-box!important;

    box-shadow:0 24px 65px rgba(0,0,0,.34)!important;

  }

  .notification-panel-head{

    padding:14px 14px 14px 16px!important;

  }

  .notification-panel-head b{

    font-size:16px!important;

    line-height:1.25!important;

  }

  .notification-close{

    display:grid!important;

    place-items:center!important;

  }

  .notification-panel-body{

    max-height:calc(100dvh - 185px)!important;

    overflow-y:auto!important;

    padding:9px!important;

  }

  .notification-item{

    padding:11px 10px!important;

    gap:7px!important;

  }

  .notification-item b{

    font-size:12px!important;

  }

  .notification-item div span{

    max-width:44vw!important;

  }

  .notification-link{

    min-height:47px!important;

    border-radius:0!important;

  }

}

@media print{

  .notification-backdrop,.notification-panel{

    display:none!important;

  }

}



/* ===== Revisi 88: Responsive Daftar Data Nasional/Daerah pada Handphone ===== */

@media screen and (max-width:700px){

  html, body{

    width:100%!important;

    max-width:100vw!important;

    overflow-x:hidden!important;

  }

  body.session-authenticated #app:not(.hidden),

  body.session-authenticated #app:not(.hidden) .content,

  body.session-authenticated #app:not(.hidden) #view{

    width:100%!important;

    max-width:100vw!important;

    min-width:0!important;

    overflow-x:hidden!important;

  }

  body.session-authenticated #app:not(.hidden) .content{

    padding:10px!important;

  }

  body.session-authenticated #app:not(.hidden) .card,

  body.session-authenticated #app:not(.hidden) .grid,

  body.session-authenticated #app:not(.hidden) .grid.two,

  body.session-authenticated #app:not(.hidden) .stats{

    width:100%!important;

    max-width:100%!important;

    min-width:0!important;

  }

  body.session-authenticated #app:not(.hidden) .card{

    padding:12px!important;

    border-radius:16px!important;

  }

  body.session-authenticated #app:not(.hidden) .grid.two{

    grid-template-columns:1fr!important;

  }

  body.session-authenticated #app:not(.hidden) .section-header{

    display:flex!important;

    flex-direction:column!important;

    align-items:stretch!important;

    gap:8px!important;

  }

  body.session-authenticated #app:not(.hidden) .search-box{

    width:100%!important;

    min-width:0!important;

    flex-direction:column!important;

    align-items:stretch!important;

  }



  /* Seluruh daftar data tampil sebagai card, bukan tabel melebar. */

  #view .responsive-data-table{

    display:block!important;

    width:100%!important;

    max-width:100%!important;

    border-collapse:separate!important;

    background:transparent!important;

    overflow:visible!important;

  }

  #view .responsive-data-table thead{

    position:absolute!important;

    width:1px!important;

    height:1px!important;

    overflow:hidden!important;

    clip-path:inset(50%)!important;

    white-space:nowrap!important;

  }

  #view .responsive-data-table tbody{

    display:grid!important;

    width:100%!important;

    gap:10px!important;

  }

  #view .responsive-data-table tbody tr{

    display:block!important;

    width:100%!important;

    padding:8px 11px!important;

    background:#fff!important;

    border:1px solid #d9e2ef!important;

    border-radius:14px!important;

    box-shadow:0 4px 14px rgba(15,23,42,.045)!important;

  }

  #view .responsive-data-table tbody tr:hover td{

    background:transparent!important;

  }

  #view .responsive-data-table tbody td{

    display:grid!important;

    grid-template-columns:minmax(94px,35%) minmax(0,1fr)!important;

    gap:8px!important;

    align-items:start!important;

    width:100%!important;

    min-width:0!important;

    padding:7px 0!important;

    border-bottom:1px dashed #e5edf6!important;

    white-space:normal!important;

    overflow-wrap:anywhere!important;

    font-size:13px!important;

  }

  #view .responsive-data-table tbody td:last-child{

    border-bottom:0!important;

  }

  #view .responsive-data-table tbody td::before{

    content:attr(data-label);

    display:block;

    font-size:11px!important;

    font-weight:850!important;

    letter-spacing:.02em!important;

    text-transform:uppercase!important;

    color:#526176!important;

  }

  #view .responsive-data-table tbody td.mobile-photo-cell{

    align-items:center!important;

  }

  #view .responsive-data-table tbody td.mobile-photo-cell .avatar{

    width:52px!important;

    height:52px!important;

  }

  #view .responsive-data-table tbody td.mobile-actions-cell{

    display:block!important;

    padding-top:10px!important;

  }

  #view .responsive-data-table tbody td.mobile-actions-cell::before{

    margin-bottom:8px!important;

  }

  #view .responsive-data-table tbody td.mobile-actions-cell button{

    display:block!important;

    width:100%!important;

    min-height:43px!important;

    margin:6px 0!important;

    padding:10px 8px!important;

  }

  #view .responsive-data-table .approval-status,

  #view .responsive-data-table .pill{

    width:max-content!important;

    max-width:100%!important;

  }



  /* Pagination pada HP mengikuti lebar layar. */

  #view .table-pagination{

    display:flex!important;

    flex-direction:column!important;

    align-items:stretch!important;

    gap:9px!important;

    width:100%!important;

    padding:10px 0 0!important;

  }

  #view .table-pagination .page-info{

    text-align:center!important;

    font-size:12px!important;

  }

  #view .table-pagination .page-actions{

    display:grid!important;

    grid-template-columns:1fr 1fr!important;

    gap:8px!important;

  }

  #view .table-pagination .page-actions button{

    width:100%!important;

    min-height:42px!important;

  }

  #view .page-size-control select{

    max-width:110px!important;

  }



  /* Laporan chart ikut rapi ketika layar sempit. */

  #view .bar-item{

    grid-template-columns:minmax(72px,94px) 1fr 24px!important;

    width:100%!important;

  }

  #view .bar-label{

    white-space:normal!important;

    overflow-wrap:anywhere!important;

  }

  #view .pie-wrap{

    flex-direction:column!important;

    align-items:flex-start!important;

  }

  #view .pie-legend{

    width:100%!important;

  }



  /* Tombol export/cetak laporan tidak keluar layar. */

  #view .report-control .actions{

    display:grid!important;

    grid-template-columns:1fr!important;

    width:100%!important;

  }

  #view .report-control .actions button{

    width:100%!important;

    min-height:44px!important;

  }

}



/* ===== Revisi 91: Blok Identitas Login Putih Transparan dan Center ===== */

/* Area identitas organisasi pada halaman login dibuat lebih cerah dan mudah dibaca. */

.login-page .login-identity{

  background:#ffffff!important;

  border:1px solid #e2e8f0!important;

  border-left:5px solid var(--ui-gold)!important;

  border-radius:20px!important;

  box-shadow:0 14px 36px rgba(8,31,60,.10)!important;

  backdrop-filter:none!important;

  -webkit-backdrop-filter:none!important;

  padding:16px 20px!important;

  color:#08335f!important;

  text-shadow:none!important;

  display:flex!important;

  flex-direction:column!important;

  align-items:center!important;

  justify-content:center!important;

  text-align:center!important;

  gap:3px!important;

}

.login-page .identity-logos{

  width:100%!important;

  display:flex!important;

  justify-content:center!important;

  align-items:center!important;

  gap:16px!important;

  margin:0 0 9px!important;

}

.login-page .identity-logos img{

  background:transparent!important;

  object-fit:contain!important;

  filter:drop-shadow(0 2px 4px rgba(8,43,87,.12))!important;

}

.login-page .login-identity b{

  width:100%!important;

  color:#08335f!important;

  text-shadow:none!important;

  text-align:center!important;

  font-weight:850!important;

}

.login-page .login-identity span{

  width:100%!important;

  color:#334e70!important;

  text-shadow:none!important;

  text-align:center!important;

  font-weight:700!important;

}



/* Desktop: tetap sebagai blok area bawah pojok, isi berada di tengah. */

@media screen and (min-width:701px){

  .login-page .login-identity{

    min-width:360px!important;

    padding:16px 24px!important;

  }

}



/* Handphone: blok tetap cerah, proporsional dan center di bawah form login. */

@media screen and (max-width:700px){

  .login-page .login-identity{

    position:relative!important;

    left:auto!important;

    right:auto!important;

    top:auto!important;

    bottom:auto!important;

    margin:0 auto!important;

    width:min(100%,420px)!important;

    padding:14px 16px!important;

    border-left-width:4px!important;

  }

  .login-page .identity-logos{

    gap:14px!important;

    margin-bottom:8px!important;

  }

  .login-page .login-identity b{

    font-size:15px!important;

    line-height:1.3!important;

  }

  .login-page .login-identity span{

    font-size:12px!important;

    line-height:1.35!important;

  }

}



/* ===== Revisi 92 Final: Blok Identitas Sidebar Logo & Tulisan Center ===== */

/* Struktur aktual aplikasi: .brand-panel, .brand-logos, .sidebar-identity-label */

.sidebar .brand-panel,

.brand-panel{

  display:flex!important;

  flex-direction:column!important;

  align-items:center!important;

  justify-content:center!important;

  text-align:center!important;

  padding-left:18px!important;

  padding-right:18px!important;

}

.sidebar .brand-panel .brand-logos,

.brand-panel .brand-logos{

  width:100%!important;

  display:flex!important;

  align-items:center!important;

  justify-content:center!important;

  gap:16px!important;

  margin-left:auto!important;

  margin-right:auto!important;

  margin-bottom:10px!important;

}

.sidebar .brand-panel .brand-logos img,

.brand-panel .brand-logos img{

  display:block!important;

  object-fit:contain!important;

  margin:0!important;

}

.sidebar .brand-panel h1,

.sidebar .brand-panel h2,

.sidebar .brand-panel h3,

.sidebar .brand-panel p,

.sidebar .brand-panel b,

.sidebar .brand-panel span,

.sidebar .brand-panel .sidebar-identity-label,

.brand-panel h1,

.brand-panel h2,

.brand-panel h3,

.brand-panel p,

.brand-panel b,

.brand-panel span,

.brand-panel .sidebar-identity-label{

  width:100%!important;

  display:block!important;

  margin-left:auto!important;

  margin-right:auto!important;

  text-align:center!important;

}

/* antisipasi teks nama aplikasi yang berada langsung dalam elemen label */

.sidebar-identity-label{

  text-align:center!important;

  align-items:center!important;

  justify-content:center!important;

}

@media screen and (max-width:900px){

  .sidebar .brand-panel,

  .brand-panel{

    align-items:center!important;

    justify-content:center!important;

    text-align:center!important;

  }

  .sidebar .brand-panel .brand-logos,

  .brand-panel .brand-logos{

    justify-content:center!important;

  }

}



/* ===== Revisi 94: Navigasi dinamis, responsif & profesional ===== */

.sidebar nav{display:flex;flex-direction:column;gap:4px}

.sidebar nav .menu-flat{display:flex;flex-direction:column;gap:4px}

.sidebar nav button{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:1px solid transparent;color:#cfe0fb;font-weight:650;font-size:13.5px;padding:9px 11px;border-radius:10px;text-align:left;line-height:1.2;transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s ease}

.sidebar nav button .nav-ic{width:18px;height:18px;flex:0 0 18px;opacity:.85}

.sidebar nav button>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.sidebar nav button:hover{background:rgba(255,255,255,.10);color:#fff}

.sidebar nav button:active{transform:scale(.985)}

.sidebar nav button.active{background:rgba(242,201,76,.16);color:#fff;border-color:rgba(242,201,76,.30);box-shadow:inset 3px 0 0 var(--gold)}

.sidebar nav button.active .nav-ic{opacity:1;color:var(--gold)}



.sidebar nav .menu-group{display:flex;flex-direction:column}

.sidebar nav .menu-group-head{display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:0;color:#8fa9d4;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:11px 9px 6px;cursor:pointer;border-radius:8px}

.sidebar nav .menu-group-head .nav-ic{width:15px;height:15px;flex:0 0 15px;opacity:.7}

.sidebar nav .menu-group-head>span{flex:1 1 auto;text-align:left}

.sidebar nav .menu-group-head .nav-caret{width:16px;height:16px;flex:0 0 16px;opacity:.8;transition:transform .22s ease}

.sidebar nav .menu-group:not(.open) .menu-group-head .nav-caret{transform:rotate(-90deg)}

.sidebar nav .menu-group-head:hover{color:#cfe0fb}

.sidebar nav .menu-group-body{display:flex;flex-direction:column;gap:4px;overflow:hidden;max-height:0;opacity:0;transition:max-height .26s ease,opacity .2s ease}

.sidebar nav .menu-group.open .menu-group-body{max-height:520px;opacity:1}



.menu-toggle{display:none}

.menu-toggle svg{width:22px;height:22px}

.sidebar-close{display:none}

.sidebar-backdrop{display:none}



@media(max-width:900px){

  .app,.app.member-app{display:block!important}

  .content,.app.member-app .content{order:0!important;padding:14px!important}

  .topbar{gap:8px}

  .menu-toggle{display:inline-flex!important;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border-radius:11px;background:#fff;border:1px solid var(--line);color:var(--ui-deep,#08335f);flex:0 0 auto;cursor:pointer}

  .menu-toggle:active{transform:scale(.96)}

  .sidebar,.app.member-app .sidebar{position:fixed!important;top:0!important;left:0!important;bottom:0!important;height:100dvh!important;width:min(82vw,300px)!important;margin:0!important;z-index:1200!important;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:0 18px 60px rgba(0,0,0,.45);overflow:auto!important;order:0!important}

  .app.sidebar-open .sidebar,.app.member-app.sidebar-open .sidebar{transform:translateX(0)!important}

  .sidebar-backdrop{display:block!important;position:fixed;inset:0;background:rgba(4,12,28,.55);opacity:0;pointer-events:none;transition:opacity .28s ease;z-index:1100}

  .app.sidebar-open .sidebar-backdrop{opacity:1;pointer-events:auto}

  .sidebar-close{display:inline-flex!important;position:absolute!important;top:14px!important;right:14px!important;left:auto!important;width:38px!important;height:38px!important;align-items:center!important;justify-content:center!important;background:rgba(255,255,255,.18)!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:12px!important;color:#fff!important;font-size:24px!important;font-weight:800!important;line-height:1!important;cursor:pointer!important;z-index:1300!important;box-shadow:0 4px 14px rgba(0,0,0,.28)!important}

}

@media print{.menu-toggle,.sidebar-close,.sidebar-backdrop{display:none!important}}



/* ===== Revisi 95: Ganti Avatar Profil Sidebar ===== */

.sidebar-avatar-container {

  position: relative;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  cursor: pointer;

  overflow: hidden;

  flex-shrink: 0;

}

.sidebar-avatar-container img.sidebar-avatar {

  width: 42px;

  height: 42px;

  object-fit: cover;

  border-radius: 50%;

  border: 2px solid var(--ui-gold, #f2c94c);

  display: block;

}

.sidebar-avatar-container .sidebar-avatar-fallback {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.15);

  display: grid;

  place-items: center;

  border: 2px solid rgba(255, 255, 255, 0.25);

}

.sidebar-avatar-container .sidebar-avatar-hover {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.55);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transition: opacity 0.2s ease;

  z-index: 2;

}

.sidebar-avatar-container:hover .sidebar-avatar-hover {

  opacity: 1 !important;

}



/* ===== Revisi 96: Fix KTA layout di WebView Android ===== */

/* Masalah: unit mm dan transform:scale(.78) dari line 12 menyebabkan

   KTA berantakan di WebView Android karena DPI/viewport berbeda.

   Solusi: override scaling khusus mobile preview, gunakan sizing yang

   responsif berdasarkan lebar viewport. */



/* Preview KTA di mobile — tampilkan kartu secara vertikal dengan ukuran terkontrol */

@media screen and (max-width:900px){

  /* Override rule di line 12 yang memaksa scale(.78) dan width:380mm */

  #ktaPreview .rev50-sheet{

    transform:none!important;

    width:100%!important;

    min-height:auto!important;

    height:auto!important;

    padding:8px 0!important;

    margin:0 auto!important;

    display:flex!important;

    flex-direction:column!important;

    align-items:center!important;

    gap:14px!important;

    background:transparent!important;

  }



  /* Kartu KTA individual: gunakan pixel sizing yang konsisten */

  #ktaPreview .rev50-card{

    width:min(324px, calc(100vw - 28px))!important;

    height:auto!important;

    aspect-ratio:54 / 85.6!important;

    flex:0 0 auto!important;

    transform:none!important;

    margin:0!important;

    transform-origin:top center!important;

    box-shadow:0 4px 16px rgba(0,0,0,.15)!important;

  }



  /* Pastikan konten di dalam kartu tetap proporsional */

  #ktaPreview .rev50-card *{

    max-width:100%;

  }



  /* Override KTA control button layout untuk mobile */

  .kta-control .actions{

    width:100%!important;

    display:grid!important;

    grid-template-columns:1fr 1fr!important;

    gap:8px!important;

  }

  .kta-control .actions button{

    padding:10px 6px!important;

    font-size:11px!important;

    min-height:44px!important;

    white-space:normal!important;

    line-height:1.2!important;

  }

}



/* Khusus layar sangat kecil (< 380px) */

@media screen and (max-width:380px){

  #ktaPreview .rev50-card{

    width:calc(100vw - 20px)!important;

  }

  .kta-control .actions{

    grid-template-columns:1fr!important;

  }

}



/* Pastikan print/PDF tidak terpengaruh override mobile */

@media print{

  #ktaPreview .rev50-sheet{

    flex-direction:row!important;

    width:297mm!important;

    height:210mm!important;

    padding:16mm 10mm!important;

    gap:10mm!important;

    background:#fff!important;

  }

  

}





/* ===== Revisi 97: Fix final KTA untuk APK/WebView Android =====

   Tujuan: preview mobile tetap pakai ukuran fisik kartu lalu diskalakan,

   bukan mengecilkan width kartu yang membuat posisi mm berantakan. */

.rev50-card{

  width: 54mm!important;

  height: 85.6mm!important;

  aspect-ratio:auto!important;

  contain:layout paint!important;

  -webkit-print-color-adjust:exact!important;

  print-color-adjust:exact!important;

}

.rev50-title{

  left:17.8mm!important;

  right:17.8mm!important;

  width:auto!important;

  text-align:center!important;

  display:block!important;

  top:8.45mm!important;

}

.rev50-title h1{

  display:block!important;

  width:100%!important;

  text-align:center!important;

  font-size:2.72mm!important;

  line-height:1.02!important;

  letter-spacing:.05mm!important;

  white-space:nowrap!important;

  overflow:visible!important;

}

.rev50-title p{

  display:block!important;

  width:100%!important;

  text-align:center!important;

  font-size:1.04mm!important;

  line-height:1.08!important;

  margin-top:.58mm!important;

  white-space:normal!important;

  overflow:visible!important;

  text-overflow:clip!important;

  letter-spacing:0!important;

}

.rev50-title strong{

  display:block!important;

  width:100%!important;

  text-align:center!important;

  font-size:1.18mm!important;

  line-height:1.08!important;

  margin-top:.42mm!important;

  white-space:normal!important;

  overflow:visible!important;

  text-overflow:clip!important;

  letter-spacing:.03mm!important;

}

.rev50-badge{

  top:16.85mm!important;

  left:31.5mm!important;

  right:31.5mm!important;

  height:3.25mm!important;

  font-size:1.58mm!important;

}

.rev50-logo{

  top:4.15mm!important;

  width:11.4mm!important;

  height:8mm!important;

}

.rev50-logo-left{left:7.8mm!important}

.rev50-logo-right{right:7.8mm!important}

.rev50-photo{

  top:23.6mm!important;

  left:8.3mm!important;

  width:18.6mm!important;

  height:24.2mm!important;

}

.rev50-front-values{

  top:24.35mm!important;

  left:31.1mm!important;

  width:45.2mm!important;

}

.rev50-row{

  grid-template-columns:12.1mm 1.7mm 1fr!important;

  height:2.95mm!important;

  font-size:1.56mm!important;

  line-height:1!important;

}

.rev50-back-title{top:8.45mm!important}

.rev50-back-badge{top:16.85mm!important}

.rev50-rules{

  top:21.15mm!important;

  left:8mm!important;

  width:47.5mm!important;

  max-height:15.8mm!important;

  overflow:hidden!important;

  color:#082b57!important;

}

.rev50-rules h2{

  font-size:1.55mm!important;

  line-height:1!important;

  margin:0 0 .42mm!important;

  letter-spacing:.05mm!important;

}

.rev50-rules ol{

  font-size:1.04mm!important;

  line-height:1.08!important;

  padding-left:3.15mm!important;

  margin:0!important;

  font-weight:800!important;

}

.rev50-rules li{margin:.06mm 0!important}

.rev50-qr{

  top:23.2mm!important;

  right:7.5mm!important;

  width:11.8mm!important;

  height:13.7mm!important;

  padding:.45mm!important;

}

.rev50-qr img,

.rev50-qr canvas{

  width:9.05mm!important;

  height:9.05mm!important;

  object-fit:contain!important;

}

.rev50-qr em{font-size:1.02mm!important}

.rev50-sign-left{

  left:16.6mm!important;

  top:38.25mm!important;

  width:18mm!important;

}

.rev50-sign-right{

  left:49.2mm!important;

  top:38.25mm!important;

  width:18mm!important;

}

.rev50-sign-title{font-size:1.24mm!important;line-height:1.02!important;margin-bottom:.12mm!important}

.rev50-ttd{height:3.35mm!important;max-width:16mm!important;margin-bottom:-.22mm!important}

.rev50-sign-line{width:15.5mm!important}

.rev50-sign-name{font-size:1.08mm!important;line-height:1.03!important;min-height:2.3mm!important}

.rev50-stamp-wrap{

  left:38.75mm!important;

  top:38.25mm!important;

  width:8.2mm!important;

  height:8.2mm!important;

}

.rev50-stamp{max-width:8.2mm!important;max-height:8.2mm!important}

.rev50-back-address{

  bottom:1.75mm!important;

  left:9mm!important;

  right:9mm!important;

  font-size:1.02mm!important;

  line-height:1.05!important;

}

.kta-print-preview-actions .actions{

  display:flex!important;

  flex-wrap:wrap!important;

  gap:8px!important;

}

@media screen and (max-width:900px){

  #ktaPreview .rev50-sheet,

  #ktaPreview .rev50-sheet.mobile-kta-vertical-sheet,

  #ktaPreview .rev50-sheet.member-mobile-kta-sheet{

    width:100%!important;

    min-height:0!important;

    height:auto!important;

    padding:6px 0 18px!important;

    margin:0 auto!important;

    background:transparent!important;

    display:flex!important;

    flex-direction:column!important;

    align-items:center!important;

    justify-content:flex-start!important;

    gap:14px!important;

    overflow:visible!important;

    transform:none!important;

  }

  

  .kta-control .actions,

  .kta-print-preview-actions .actions{

    width:100%!important;

    display:grid!important;

    grid-template-columns:1fr!important;

    gap:8px!important;

  }

  .kta-control .actions button,

  .kta-print-preview-actions .actions button{

    width:100%!important;

    min-height:44px!important;

    white-space:normal!important;

    line-height:1.2!important;

  }

}

@media print{

  .rev50-card{

    width: 54mm!important;

    height: 85.6mm!important;

    aspect-ratio:auto!important;

    transform:none!important;

    margin-bottom:0!important;

  }

  .rev50-title{top:8.45mm!important;text-align:center!important}

  .rev50-rules{top:21.15mm!important;max-height:15.8mm!important;overflow:hidden!important}

}







/* ===== Master Portrait Layout Enforced ===== */

#ktaPreview{overflow:auto!important;-webkit-overflow-scrolling:touch!important;padding:4px 0 18px!important}

#ktaPreview .rev50-sheet,#ktaPreview .rev50-sheet.mobile-kta-vertical-sheet,#ktaPreview .rev50-sheet.member-mobile-kta-sheet{width:auto!important;min-height:0!important;height:auto!important;padding:0!important;margin:0 auto 20px!important;background:transparent!important;display:flex!important;flex-direction:row!important;align-items:flex-start!important;justify-content:center!important;gap:40px!important;overflow:visible!important;transform:none!important;transform-origin:top center!important;box-sizing:border-box!important;flex-wrap:nowrap!important}

#ktaPreview .rev50-sheet.mobile-kta-vertical-sheet,#ktaPreview .rev50-sheet.member-mobile-kta-sheet{flex-direction:column!important;gap:16px!important;align-items:center!important;justify-content:flex-start!important}

#ktaPreview .rev50-card{box-shadow:0 4px 18px rgba(0,0,0,.18)!important;margin:0!important;transform:none!important}

.kta-print-preview-actions .actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important}

@media screen and (max-width:900px){.kta-control .actions,.kta-print-preview-actions .actions{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important}.kta-control .actions button,.kta-print-preview-actions .actions button{width:100%!important;min-height:44px!important;white-space:normal!important;line-height:1.2!important}}

@media print{.rev50-sheet{display:flex!important;flex-direction:row!important;width:210mm!important;height:297mm!important;min-height:297mm!important;margin:0!important;padding:16mm 10mm!important;gap:10mm!important;box-sizing:border-box!important;justify-content:center!important;align-items:flex-start!important;background:#fff!important;overflow:hidden!important}.rev50-card{transform:none!important;margin:0!important;box-shadow:none!important}}



/* ===== Revisi 102: Final fix preview APK, PNG high-res, dan PDF KTA =====

   Semua elemen KTA dikunci dalam kanvas virtual 856 x 540 px per sisi.

   Preview HP diskalakan dari wrapper, bukan dari isi kartu, agar layout tidak pecah. */

.rev50-card{

  font-size:1px!important;

  width: 54mm !important;

  height: 85.6mm !important;

  min-width: 54mm !important;

  max-width: 54mm !important;

  aspect-ratio:auto!important;

  position:relative!important;

  overflow:hidden!important;

  flex: 0 0 54mm !important;

  border-radius:38px!important;

  background-image:url('assets/kta-portrait-bg-epson.jpg')!important;

  background-size:100% 100%!important;

  background-repeat:no-repeat!important;

  background-position:center!important;

  font-family:Arial,Helvetica,sans-serif!important;

  color:#082b57!important;

  contain:layout paint!important;

  -webkit-print-color-adjust:exact!important;

  print-color-adjust:exact!important;

}

/* ===== Enforce Clean Master Portrait Styling ===== */

#ktaPreview{overflow:hidden!important;-webkit-overflow-scrolling:touch!important;padding:4px 0 18px!important;display:flex!important;justify-content:center!important;align-items:flex-start!important;background:transparent!important}

#ktaPreview .rev50-sheet,

#ktaPreview .rev50-sheet.mobile-kta-vertical-sheet,

#ktaPreview .rev50-sheet.member-mobile-kta-sheet{

  width:auto!important;

  height: 85.6mm !important;

  min-height: 85.6mm !important;

  padding:0!important;

  margin:0 auto!important;

  background:transparent!important;

  display:flex!important;

  flex-direction:row!important;

  align-items:flex-start!important;

  justify-content:flex-start!important;

  gap:40px!important;

  overflow:visible!important;

  transform-origin:top center!important;

  box-sizing:border-box!important;

  flex-wrap:nowrap!important;

}

#ktaPreview .rev50-sheet.mobile-kta-vertical-sheet,

#ktaPreview .rev50-sheet.member-mobile-kta-sheet{

  width: 54mm !important;

  height:1096px!important;

  min-height:1096px!important;

  flex-direction:column!important;

  gap:16px!important;

}

#ktaPreview .rev50-card{box-shadow:0 4px 18px rgba(0,0,0,.18)!important;margin:0!important;transform:none!important}

@media print{

  .rev50-card{width: 54mm !important;height: 85.6mm !important;transform:none!important;margin:0!important;box-shadow:none!important}

}





/* ===== Revisi 103: Preview KTA APK mengikuti website =====

   Depan dan belakang selalu sejajar horizontal seperti tampilan website.

   Sheet yang diperkecil, bukan isi kartu. Ini mencegah KTA melebar,

   mencegah bagian belakang terpotong, dan menjaga posisi elemen tetap stabil. */

#ktaPreview.kta-preview-row-mode,

#ktaPreview{

  max-width:100%!important;

  overflow:visible!important;

  -webkit-overflow-scrolling:touch!important;

  background:transparent!important;

}

#ktaPreview.kta-preview-row-mode .rev50-sheet,

#ktaPreview .rev50-sheet,

#ktaPreview .rev50-sheet.mobile-kta-vertical-sheet,

#ktaPreview .rev50-sheet.member-mobile-kta-sheet{

  display:flex!important;

  flex-direction:row!important;

  flex-wrap:nowrap!important;

  align-items:flex-start!important;

  justify-content:flex-start!important;

  width:auto!important;

  height: 85.6mm !important;

  min-height: 85.6mm !important;

  padding:0!important;

  margin-left:auto!important;

  margin-right:auto!important;

  background:transparent!important;

  overflow:visible!important;

  box-sizing:border-box!important;

  transform-origin:top center!important;

}

#ktaPreview.kta-preview-row-mode .rev50-card,

#ktaPreview .rev50-card{

  width: 54mm !important;

  height: 85.6mm !important;

  min-width: 54mm !important;

  max-width: 54mm !important;

  flex: 0 0 54mm !important;

  aspect-ratio:auto!important;

  transform:none!important;

  margin:0!important;

  box-sizing:border-box!important;

}

@media screen and (max-width:900px){

  #ktaPreview .rev50-sheet,

  #ktaPreview .rev50-sheet.mobile-kta-vertical-sheet,

  #ktaPreview .rev50-sheet.member-mobile-kta-sheet{

    flex-direction:row!important;

    width:auto!important;

    height: 85.6mm !important;

    min-height: 85.6mm !important;

    padding:0!important;

    gap:14px!important;

    overflow:visible!important;

  }

  #ktaPreview .rev50-card{

    width: 54mm !important;

    height: 85.6mm !important;

    min-width: 54mm !important;

    max-width: 54mm !important;

    flex: 0 0 54mm !important;

    transform:none!important;

  }

}



/* ===== Revisi 104: Filter KTA tampil di bawah dan export tidak muncul di layar ===== */

#ktaPreview.kta-filter-preview,

#ktaPreview.kta-preview-row-mode,

#ktaPreview{

  display:block!important;

  width:100%!important;

  max-width:100%!important;

  overflow:visible!important;

  background:transparent!important;

  padding:4px 0 22px!important;

}

#ktaPreview .kta-preview-item{

  width:100%!important;

  display:flex!important;

  justify-content:center!important;

  align-items:flex-start!important;

  overflow:visible!important;

  background:transparent!important;

  margin:0 auto 18px!important;

  box-sizing:border-box!important;

}

#ktaPreview .kta-preview-item .rev50-sheet{

  display:flex!important;

  flex-direction:row!important;

  flex-wrap:nowrap!important;

  align-items:flex-start!important;

  justify-content:flex-start!important;

  background:transparent!important;

  overflow:visible!important;

  transform-origin:top center!important;

  box-sizing:border-box!important;

}

.kta-export-host{

  position:fixed!important;

  left:0!important;

  top:calc(100vh + 32px)!important;

  width:1712px!important;

  height: 85.6mm !important;

  overflow:visible!important;

  pointer-events:none!important;

  background:transparent!important;

  z-index:-2147483647!important;

}

.kta-export-host .rev50-sheet{

  box-shadow:none!important;

  background:transparent!important;

}



/* ===== Revisi 105: Keterangan status anggota tidak aktif ===== */

.inactive-reason-field{

  border:1px solid #fecaca;

  background:#fff8f8;

  border-radius:14px;

  padding:10px;

}

.inactive-reason-field span{

  color:#991b1b!important;

}

.inactive-reason-field small{

  font-size:11px;

  color:#7f1d1d;

  line-height:1.3;

}

.inactive-reason-field select{

  border-color:#fca5a5!important;

  background:#fff!important;

}

.member-status-inactive{

  background:#fee2e2!important;

  color:#991b1b!important;

}

.member-status-active{

  background:#dcfce7!important;

  color:#166534!important;

}

.inactive-reason-badge{

  display:block;

  margin-top:4px;

  font-size:10.5px;

  font-weight:800;

  line-height:1.2;

  color:#991b1b;

}

@media print{

  .inactive-reason-field{display:none!important;}

}



/* ===== Revisi 73: Center text small pada login card ===== */

.login-card small {

  text-align: center !important;

  color: #08335f !important;

  font-weight: 750 !important;

}



/* ===== Revisi 74: Login card glassmorphism more transparent ===== */

.login-card {

  background: rgba(255, 255, 255, 0.22) !important;

  backdrop-filter: blur(2px) !important;

  -webkit-backdrop-filter: blur(2px) !important;

}



/* ===== Revisi 75: Keterbacaan teks pada form login transparan ===== */

.btn-forgot-password {

  background: #eef4fc !important;

  color: #08335f !important;

  border: 1px solid #c8dcf5 !important;

  font-weight: 800 !important;

}

.btn-forgot-password:hover {

  background: #dbeafe !important;

}

.login-card p, .member-login-help {

  color: #08335f !important;

  font-weight: 700 !important;

}





/* Workflow KTA Digital */

.kta-workflow-card{max-width:860px!important;width:min(94vw,860px)!important;max-height:92vh;overflow:auto;}

.kta-workflow-card .grid.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}

.revision-result{margin-top:14px;}

.pending-kta{font-weight:800;color:#92400e;background:#fef3c7;border-radius:999px;padding:4px 10px;display:inline-block;}

@media(max-width:760px){.kta-workflow-card .grid.two{grid-template-columns:1fr;}}





/* ========================================================= */

/* TATA LETAK TEMPLATE 1: HOLOGRAPHIC HUD (CYBERPUNK SCI-FI)  */

/* ========================================================= */

.layout-hud .sidebar {

  background: #06090f !important;

  border-right: 2px solid #00f2fe !important;

  box-shadow: 0 0 20px rgba(0, 242, 254, 0.15) !important;

  font-family: 'Courier New', Courier, monospace !important;

}

.layout-hud .sidebar .brand-panel strong {

  color: #00f2fe !important;

  text-shadow: 0 0 8px rgba(0, 242, 254, 0.8) !important;

  font-size: 15px !important;

  letter-spacing: 1px !important;

}

.layout-hud .sidebar .brand-panel small {

  color: #ff6b00 !important;

  font-weight: bold !important;

  text-shadow: 0 0 4px rgba(255, 107, 0, 0.5) !important;

}

.layout-hud .sidebar .role-badge {

  border: 1px dashed #ff6b00 !important;

  background: rgba(255, 107, 0, 0.05) !important;

  border-radius: 4px !important;

  color: #ff6b00 !important;

  text-shadow: 0 0 4px rgba(255, 107, 0, 0.3) !important;

}

.layout-hud .sidebar nav button {

  border-radius: 0 !important;

  border: 1px solid rgba(0, 242, 254, 0.15) !important;

  background: rgba(0, 242, 254, 0.02) !important;

  color: #a5f3fc !important;

  margin-bottom: 4px !important;

  transition: all 0.2s ease !important;

}

.layout-hud .sidebar nav button:hover {

  background: rgba(0, 242, 254, 0.12) !important;

  border-color: #00f2fe !important;

  box-shadow: 0 0 10px rgba(0, 242, 254, 0.3) !important;

  transform: translateX(4px) !important;

}

.layout-hud .sidebar nav button.active {

  background: rgba(255, 107, 0, 0.15) !important;

  border-color: #ff6b00 !important;

  color: #fff !important;

  box-shadow: 0 0 12px rgba(255, 107, 0, 0.4) !important;

}

.layout-hud .sidebar nav button.active .nav-ic {

  color: #ff6b00 !important;

}

.layout-hud .sidebar nav .menu-group-head {

  color: #00f2fe !important;

  letter-spacing: 0.12em !important;

  border-bottom: 1px solid rgba(0, 242, 254, 0.2) !important;

  margin-top: 10px !important;

}

.layout-hud .sidebar-copyright {

  font-family: monospace !important;

  color: #555 !important;

  text-align: center !important;

}

/* HUD styling elements inside content */

.layout-hud .card {

  border: 1px solid rgba(0, 242, 254, 0.2) !important;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05) !important;

  border-radius: 8px !important;

}

.layout-hud .card h3 {

  color: #0c4a6e !important;

  font-weight: 800 !important;

  border-bottom: 2px solid rgba(0, 242, 254, 0.2) !important;

  padding-bottom: 6px !important;

}

.layout-hud .dash-hero {

  border: 2px solid #00f2fe !important;

  background: #0f172a !important;

  color: #00f2fe !important;

  box-shadow: 0 0 15px rgba(0, 242, 254, 0.2) !important;

  border-radius: 8px !important;

}

.layout-hud .dash-hero p {

  color: #a5f3fc !important;

}

.layout-hud .stat {

  border: 1px solid rgba(255, 107, 0, 0.3) !important;

  border-left: 5px solid #ff6b00 !important;

  border-radius: 8px !important;

}





/* ========================================================= */

/* TATA LETAK TEMPLATE 3: TACTILE BENTO GRID & DOCK          */

/* ========================================================= */

@media screen and (min-width: 901px) {

  /* Ubah layout grid utama menjadi compact dock (lebar 68px) */

  .app.layout-bento {

    grid-template-columns: 68px 1fr !important;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

  }

  

  /* Sidebar compact melayang */

  .layout-bento .sidebar {

    width: 68px !important;

    padding: 20px 8px !important;

    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

    z-index: 1000 !important;

    position: fixed !important;

    left: 0;

    top: 0;

    bottom: 0;

    height: 100vh !important;

    background: #0f172a !important;

    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.08) !important;

    display: flex !important;

    flex-direction: column !important;

    overflow: hidden !important;

  }

  

  /* Efek membesar saat di-hover */

  .layout-bento .sidebar:hover {

    width: 260px !important;

  }

  

  /* Sembunyikan tulisan menu dan brand label saat ringkas, tampilkan saat hover */

  .layout-bento .sidebar nav button span,

  .layout-bento .sidebar .brand-panel strong,

  .layout-bento .sidebar .brand-panel small,

  .layout-bento .sidebar .brand-panel .sidebar-identity-label,

  .layout-bento .sidebar .brand-panel .brand-logos img:last-child {

    opacity: 0;

    transition: opacity 0.15s ease !important;

    pointer-events: none;

  }

  

  .layout-bento .sidebar:hover nav button span,

  .layout-bento .sidebar:hover .brand-panel strong,

  .layout-bento .sidebar:hover .brand-panel small,

  .layout-bento .sidebar:hover .brand-panel .sidebar-identity-label,

  .layout-bento .sidebar:hover .brand-panel .brand-logos img:last-child {

    opacity: 1;

    pointer-events: auto;

  }

  

  .layout-bento .sidebar nav button {

    justify-content: center !important;

    padding: 11px !important;

  }

  

  .layout-bento .sidebar:hover nav button {

    justify-content: flex-start !important;

  }

  

  .layout-bento .sidebar nav button .nav-ic {

    margin: 0 !important;

  }

  

  .layout-bento .sidebar:hover nav button .nav-ic {

    margin-right: 10px !important;

  }

  

  /* Bento Grid Stats tactile effect */

  .layout-bento .stat {

    border: 0 !important;

    box-shadow: 6px 6px 12px #e2e8f0, -6px -6px 12px #ffffff !important;

    background: #f8fafc !important;

    border-radius: 20px !important;

    transition: transform 0.2s ease, box-shadow 0.2s ease !important;

  }

  .layout-bento .stat:hover {

    transform: translateY(-4px) !important;

    box-shadow: 8px 8px 16px #cbd5e1, -8px -8px 16px #ffffff !important;

  }

  .layout-bento .card {

    border: 0 !important;

    background: #ffffff !important;

    box-shadow: 8px 8px 24px rgba(15, 23, 42, 0.06) !important;

    border-radius: 24px !important;

  }

}



/* ===== Audit Request Profile Card Full Screen on Mobile ===== */

@media screen and (max-width: 900px) {

  .modal-shell:not(.hidden) .modal-card.request-profile-card {

    width: 100vw !important;

    max-width: 100vw !important;

    height: 100dvh !important;

    max-height: 100dvh !important;

    min-height: 100dvh !important;

    margin: 0 !important;

    border-radius: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    overflow: hidden !important;

    padding: 24px 20px !important;

  }

}

@media (min-width: 901px) {
  .sidebar-selectors {
    display: none !important;
  }
  #memberBottomNav .bottom-nav,
  .app.member-app .bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 520px !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 40px rgba(7, 26, 55, 0.4) !important;
    z-index: 999900 !important;
    padding: 6px 16px !important;
  }
}



/* ===== REDESIGN DASHBOARD ANGGOTA (FINTECH LOOK) ===== */



/* Global Member App Layout Overrides on Mobile */

@media (max-width: 900px) {

  .app.member-app .topbar {

    display: none !important;

  }

  .app.member-app .sidebar {

    display: none !important;

  }

  .app.member-app #sidebarBackdrop {

    display: none !important;

  }

  .app.member-app .content {

    padding: 20px 20px 100px !important; /* Extra bottom padding for bottom nav */

    background: linear-gradient(180deg, #f0f6fc 0%, #ffffff 100%) !important;

    min-height: 100dvh !important;

  }

}



/* Header Section */

.member-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 24px;

  padding-top: 8px;

}

.member-greeting {

  display: flex;

  flex-direction: column;

  gap: 2px;

}

.greeting-subtitle {

  font-size: 14px;

  color: var(--muted);

  font-weight: 600;

}

.greeting-title {

  font-size: 24px;

  color: #071a37;

  font-weight: 800;

  margin: 0;

}

.status-badge-wrapper {

  margin-top: 4px;

}

.status-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 4px 10px;

  border-radius: 99px;

  font-size: 11px;

  font-weight: 800;

}

.status-badge.active {

  background: #dcfce7;

  color: #15803d;

}

.status-badge.inactive {

  background: #fee2e2;

  color: #b91c1c;

}

.status-dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: currentColor;

}

.member-header-actions {

  position: relative;

}

.member-notification-btn {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  box-shadow: 0 4px 12px rgba(0,0,0,0.05);

  display: grid;

  place-items: center;

  font-size: 20px;

  cursor: pointer;

  position: relative;

  color: #071a37 !important;

  padding: 0 !important;

}

.member-notification-count {

  position: absolute;

  top: -2px;

  right: -2px;

  background: #ef4444;

  color: #ffffff;

  font-size: 10px;

  font-weight: 800;

  min-width: 18px;

  height: 18px;

  border-radius: 99px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 2px solid #ffffff;

  padding: 0 4px;

}



/* 3D KTA Card Flip */

.kta-flip-wrapper {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 85.6mm !important;
  margin: 0 auto 20px auto !important;
}

.kta-flip-sizer {
  width: 54mm !important;
  height: 85.6mm !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
  position: relative !important;
  margin: 0 auto !important;
}

.kta-flip-container {
  width: 54mm !important;
  height: 85.6mm !important;
  perspective: 1200px !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  margin: 0 auto !important;
  transform: none !important;
  transform-origin: center center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.kta-flip-card {

  position: relative;

  width: 100%;

  height: 100%;

  transition: transform 0.75s cubic-bezier(0.34, 1.3, 0.64, 1) !important;

  transform-style: preserve-3d !important;

  will-change: transform;

}

.kta-flip-container.flipped .kta-flip-card {

  transform: rotateY(180deg);

}

.kta-flip-front, .kta-flip-back {

  position: absolute;

  width: 100%;

  height: 100%;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  top: 0;

  left: 0;

}

.kta-flip-back {

  transform: rotateY(180deg);

}

.kta-flip-hint {

  text-align: center;

  font-size: 12px;

  color: var(--muted);

  margin-top: 8px;

  margin-bottom: 28px;

  font-weight: 600;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  opacity: 0.8;

}

.kta-flip-hint svg {

  animation: spinCardHint 3s infinite linear;

}

@keyframes spinCardHint {

  0% { transform: rotate(0deg); }

  50% { transform: rotate(180deg); }

  100% { transform: rotate(360deg); }

}



/* Quick Access Grid Section */

.quick-access-section {

  margin-bottom: 28px;

}

.quick-access-section h3,

.info-section h3 {

  font-size: 16px;

  font-weight: 800;

  color: #071a37;

  margin: 0 0 14px;

}

.quick-access-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 12px;

}

.quick-card {

  background: #ffffff;

  border-radius: 16px;

  padding: 16px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 10px;

  cursor: pointer;

  border: 1px solid #f1f5f9;

  box-shadow: 0 4px 12px rgba(15,23,42,0.02);

  transition: all 0.2s ease;

}

.quick-card:active {

  transform: scale(0.96);

  filter: brightness(0.95);

}

.quick-icon {

  width: 48px;

  height: 48px;

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  transition: transform 0.2s ease;

}

.quick-card:hover .quick-icon {

  transform: translateY(-2px);

}

.quick-label {

  font-size: 13px;

  font-weight: 700;

  color: #334155;

  text-align: center;

}



/* Color palettes for quick cards */

.card-blue .quick-icon {

  background: rgba(18, 103, 189, 0.1);

  color: #1267bd;

}

.card-blue {

  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);

  border-left: 3px solid #1267bd;

}

.card-green .quick-icon {

  background: rgba(22, 163, 74, 0.1);

  color: #16a34a;

}

.card-green {

  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);

  border-left: 3px solid #16a34a;

}

.card-orange .quick-icon {

  background: rgba(234, 88, 12, 0.1);

  color: #ea580c;

}

.card-orange {

  background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);

  border-left: 3px solid #ea580c;

}

.card-purple .quick-icon {

  background: rgba(147, 51, 234, 0.1);

  color: #9333ea;

}

.card-purple {

  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);

  border-left: 3px solid #9333ea;

}



/* Latest Info Section */

.info-section {

  margin-bottom: 28px;

}

.info-list {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.info-card {

  background: #ffffff;

  border-radius: 14px;

  padding: 14px;

  display: flex;

  align-items: flex-start;

  gap: 12px;

  border: 1px solid #f1f5f9;

  box-shadow: 0 4px 12px rgba(15,23,42,0.02);

}

.info-card-icon {

  width: 36px;

  height: 36px;

  border-radius: 10px;

  background: #f1f5f9;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 18px;

  flex-shrink: 0;

}

.info-card-content {

  display: flex;

  flex-direction: column;

  gap: 2px;

}

.info-card-content h4 {

  font-size: 14px;

  font-weight: 700;

  color: #071a37;

  margin: 0;

}

.info-card-content p {

  font-size: 12px;

  color: var(--muted);

  margin: 0;

  line-height: 1.4;

}

.info-card-content .info-date {

  font-size: 10px;

  color: #94a3b8;

  font-weight: 500;

  margin-top: 4px;

}



/* Bottom Navigation Bar */

.bottom-nav {

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  height: 72px;

  background: linear-gradient(135deg, #071a37, #0c254b);

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 -8px 32px rgba(7, 26, 55, 0.25);

  display: flex;

  justify-content: space-around;

  align-items: center;

  padding: 0 10px;

  z-index: 1000;

}

.nav-item {

  background: transparent !important;

  color: #8fa9d4 !important;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  height: 100%;

  flex: 1;

  padding: 0 !important;

  border-radius: 0 !important;

  font-weight: 600;

}

.nav-item:hover {

  filter: none;

}

.nav-item.active {

  color: #e6b034 !important; /* Premium Gold */

}

.nav-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.2s ease;

}

.nav-item.active .nav-icon {

  transform: translateY(-2px);

}

.nav-label {

  font-size: 10px;

  font-weight: 700;

}

.nav-scan-wrapper {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-end;

  height: 100%;

  padding-bottom: 8px;

  flex: 1;

}

.nav-scan-btn {

  position: absolute;

  top: -24px;

  left: 50%;

  transform: translateX(-50%);

  width: 58px;

  height: 58px;

  border-radius: 50%;

  background: linear-gradient(135deg, #e6b034, #b8860b) !important;

  box-shadow: 0 8px 24px rgba(230, 176, 52, 0.4);

  border: 4px solid #071a37 !important;

  display: grid;

  place-items: center;

  color: #071a37 !important;

  z-index: 1001;

  padding: 0 !important;

  transition: all 0.2s ease;

}

.nav-scan-btn:active {

  transform: translateX(-50%) scale(0.9);

  box-shadow: 0 4px 10px rgba(230, 176, 52, 0.25);

}

.scan-icon {

  display: flex;

  align-items: center;

  justify-content: center;

}

.scan-label {

  color: #8fa9d4;

  margin-top: 2px;

}



/* Simulated Scanner Styles */

.scanner-modal {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(7, 26, 55, 0.85);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  z-index: 2000;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

}

.scanner-container {

  width: 100%;

  max-width: 400px;

  background: #ffffff;

  border-radius: 24px;

  padding: 24px;

  box-shadow: 0 20px 50px rgba(0,0,0,0.3);

  display: flex;

  flex-direction: column;

  gap: 20px;

}

.scanner-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.scanner-header h3 {

  margin: 0;

  font-size: 18px;

  color: #071a37;

  font-weight: 800;

}

.scanner-close-btn {

  background: #f1f5f9 !important;

  color: #475569 !important;

  width: 32px;

  height: 32px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  font-size: 20px;

  padding: 0 !important;

}

.scanner-viewfinder {

  position: relative;

  width: 100%;

  aspect-ratio: 1;

  background: #020617;

  border-radius: 16px;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

}

.scanner-laser {

  position: absolute;

  left: 0;

  right: 0;

  height: 2px;

  background: #ef4444;

  box-shadow: 0 0 10px #ef4444, 0 0 20px #ef4444;

  animation: scanLaserAnim 2.5s infinite ease-in-out;

  z-index: 2;

}

@keyframes scanLaserAnim {

  0% { top: 10%; }

  50% { top: 90%; }

  100% { top: 10%; }

}

.scanner-corners {

  position: absolute;

  inset: 40px;

  border: 2px dashed rgba(255,255,255,0.4);

  border-radius: 8px;

}

.scanner-corners::before,

.scanner-corners::after {

  content: '';

  position: absolute;

  width: 20px;

  height: 20px;

  border: 4px solid #1267bd;

}

.scanner-corners::before {

  top: -4px;

  left: -4px;

  border-right: 0;

  border-bottom: 0;

  border-top-left-radius: 8px;

}

.scanner-corners::after {

  top: -4px;

  right: -4px;

  border-left: 0;

  border-bottom: 0;

  border-top-right-radius: 8px;

}

/* Bottom corners */

.scanner-viewfinder::before,

.scanner-viewfinder::after {

  content: '';

  position: absolute;

  width: 20px;

  height: 20px;

  border: 4px solid #1267bd;

  z-index: 1;

}

.scanner-viewfinder::before {

  bottom: 36px;

  left: 36px;

  border-right: 0;

  border-top: 0;

  border-bottom-left-radius: 8px;

}

.scanner-viewfinder::after {

  bottom: 36px;

  right: 36px;

  border-left: 0;

  border-top: 0;

  border-bottom-right-radius: 8px;

}

.scanner-tip {

  position: absolute;

  bottom: 12px;

  left: 12px;

  right: 12px;

  text-align: center;

  color: rgba(255,255,255,0.8);

  font-size: 11px;

  font-weight: 500;

  z-index: 3;

  background: rgba(0,0,0,0.6);

  padding: 6px 10px;

  border-radius: 8px;

  backdrop-filter: blur(4px);

}

.scanner-actions {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.scanner-actions button {

  width: 100%;

}

.scanner-manual-input-group {

  display: flex;

  gap: 8px;

  margin-top: 10px;

  border-top: 1px solid #e2e8f0;

  padding-top: 14px;

}

.scanner-manual-input-group input {

  flex: 1;

  padding: 10px 14px;

  border: 1px solid #cbd5e1;

  border-radius: 12px;

  font-size: 13px;

  outline: none;

}

.scanner-manual-input-group button {

  width: auto;

  flex-shrink: 0;

}/* Scoped Member App Bright and Vibrant Wallet Theme Override */

.app.member-app .content {

  background: linear-gradient(135deg, #f0f4f9 0%, #eef2f7 100%) !important;

  color: #0f172a !important;

  padding-bottom: 120px !important;

}



.app.member-app .member-greeting .greeting-subtitle {

  color: #475569 !important;

}



.app.member-app .member-greeting .greeting-title {

  color: #071a37 !important;

}



.app.member-app .member-notification-btn {

  background: #ffffff !important;

  border: 1px solid #cbd5e1 !important;

  color: #071a37 !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;

}



.app.member-app .quick-access-section h3,

.app.member-app .info-section h3 {

  color: #071a37 !important;

}



.app.member-app .quick-card {

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

}



.app.member-app .quick-card:active {

  transform: scale(0.96) !important;

  filter: brightness(0.97) !important;

}



.app.member-app .quick-label {

  color: #334155 !important;

}



/* Dynamic color palettes with transparent glow effect for grid menus */

.app.member-app .card-blue .quick-icon {

  background: rgba(59, 130, 246, 0.1) !important;

  color: #1d4ed8 !important;

}

.app.member-app .card-blue {

  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%) !important;

  border-left: 4px solid #3b82f6 !important;

  border: 1px solid rgba(59, 130, 246, 0.18) !important;

  border-left-width: 4px !important;

}



.app.member-app .card-green .quick-icon {

  background: rgba(34, 197, 94, 0.1) !important;

  color: #15803d !important;

}

.app.member-app .card-green {

  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;

  border-left: 4px solid #22c55e !important;

  border: 1px solid rgba(34, 197, 94, 0.18) !important;

  border-left-width: 4px !important;

}



.app.member-app .card-orange .quick-icon {

  background: rgba(249, 115, 22, 0.1) !important;

  color: #c2410c !important;

}

.app.member-app .card-orange {

  background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%) !important;

  border-left: 4px solid #f97316 !important;

  border: 1px solid rgba(249, 115, 22, 0.18) !important;

  border-left-width: 4px !important;

}



.app.member-app .card-purple .quick-icon {

  background: rgba(168, 85, 247, 0.1) !important;

  color: #7e22ce !important;

}

.app.member-app .card-purple {

  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%) !important;

  border-left: 4px solid #a855f7 !important;

  border: 1px solid rgba(168, 85, 247, 0.18) !important;

  border-left-width: 4px !important;

}



/* Latest Info list overrides with dynamic distinct backgrounds */

.app.member-app .info-card {

  border: 1px solid #e2e8f0 !important;

  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

}



.app.member-app .info-card:nth-child(1) {

  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;

  border: 1px solid rgba(34, 197, 94, 0.18) !important;

  border-left: 4px solid #22c55e !important;

}

.app.member-app .info-card:nth-child(1) .info-card-icon {

  background: rgba(34, 197, 94, 0.1) !important;

  color: #15803d !important;

}



.app.member-app .info-card:nth-child(2) {

  background: linear-gradient(135deg, #ffffff 0%, #fffde6 100%) !important;

  border: 1px solid rgba(242, 201, 76, 0.25) !important;

  border-left: 4px solid #f2c94c !important;

}

.app.member-app .info-card:nth-child(2) .info-card-icon {

  background: rgba(242, 201, 76, 0.15) !important;

  color: #855d00 !important;

}



.app.member-app .info-card:nth-child(3) {

  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%) !important;

  border: 1px solid rgba(59, 130, 246, 0.18) !important;

  border-left: 4px solid #3b82f6 !important;

}

.app.member-app .info-card:nth-child(3) .info-card-icon {

  background: rgba(59, 130, 246, 0.1) !important;

  color: #1d4ed8 !important;

}



.app.member-app .info-card-content h4 {

  color: #071a37 !important;

}



.app.member-app .info-card-content p {

  color: #475569 !important;

}



.app.member-app .info-card-content .info-date {

  color: #64748b !important;

}



/* Light themed Bottom Navigation overrides - Now premium dark */

.app.member-app .bottom-nav {

  background: linear-gradient(135deg, #071a37, #0c254b) !important;

  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;

  box-shadow: 0 -8px 32px rgba(7, 26, 55, 0.25) !important;

}



.app.member-app .nav-item {

  color: #8fa9d4 !important;

}



.app.member-app .nav-item.active {

  color: #e6b034 !important; /* Premium Gold */

}



.app.member-app .nav-scan-btn {

  background: linear-gradient(135deg, #e6b034, #b8860b) !important;

  border: 4px solid #071a37 !important;

  box-shadow: 0 8px 24px rgba(230, 176, 52, 0.3) !important;

  color: #071a37 !important;

}



.app.member-app .kta-flip-hint {

  color: #667085 !important;

}



/* Scoped Member App overrides for all other subpages (Profiles, Edit, Change Password) */

.app.member-app .card {

  background: #ffffff !important;

  border: 1px solid #cbd5e1 !important;

  color: #0f172a !important;

  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05) !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

}



.app.member-app .card h3,

.app.member-app .card h4,

.app.member-app .card p,

.app.member-app .card b,

.app.member-app .card strong,

.app.member-app .card span {

  color: #0f172a !important;

}



.app.member-app .field span {

  color: #334155 !important;

}



.app.member-app .field input,

.app.member-app .field select,

.app.member-app .field textarea {

  background: #ffffff !important;

  border: 1px solid #cbd5e1 !important;

  color: #0f172a !important;

}



.app.member-app .field input:focus,

.app.member-app .field select:focus,

.app.member-app .field textarea:focus {

  border-color: #1267bd !important;

  outline: none !important;

}



.app.member-app table {

  background: #ffffff !important;

  color: #0f172a !important;

}



.app.member-app th {

  background: #f6f8fb !important;

  color: #334155 !important;

  border-bottom: 1px solid #eef2f7 !important;

}



.app.member-app td {

  border-bottom: 1px solid #eef2f7 !important;

  color: #0f172a !important;

}



.app.member-app tr:hover td {

  background: #fafcff !important;

}



.app.member-app .history-editor-section h3 {

  color: #0f172a !important;

}



.app.member-app .btn-secondary {

  background: #e8eef8 !important;

  color: #082b57 !important;

}

.app.member-app .btn-secondary:hover {

  background: #d0e0f5 !important;

}



.app.member-app {

  --history-bg: #fafcff !important;

}



.profile-photo-edit-btn {

  transition: transform 0.2s ease, filter 0.2s ease;

}



.profile-photo-edit-btn:hover {

  filter: brightness(1.15) !important;

  transform: scale(1.08) !important;

}



.profile-photo:hover {

  opacity: 0.9;

  filter: brightness(1.05);

  transition: all 0.2s ease;

}



/* ===== Promo Modal Styles (BPJS BPU Modal) ===== */

.promo-card-wrapper {

  position: relative;

  width: min(390px, 92vw);

  background: linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%);

  border-radius: 28px;

  box-shadow: 0 24px 70px rgba(7, 26, 55, 0.25);

  border: 1px solid rgba(255, 255, 255, 0.8);

  overflow: hidden;

  animation: promoPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  display: flex;

  flex-direction: column;

}



@keyframes promoPop {

  0% { transform: scale(0.9) translateY(20px); opacity: 0; }

  100% { transform: scale(1) translateY(0); opacity: 1; }

}



.promo-close {

  position: absolute;

  top: 14px;

  right: 14px;

  z-index: 100;

  width: 32px;

  height: 32px;

  border-radius: 50%;

  background: rgba(15, 23, 42, 0.08);

  border: 0;

  color: #334155;

  font-size: 20px;

  font-weight: 800;

  cursor: pointer;

  display: grid;

  place-items: center;

  transition: all 0.2s ease;

  line-height: 1;

}



.promo-close:hover {

  background: rgba(15, 23, 42, 0.16);

  color: #000000;

  transform: rotate(90deg);

}



.promo-card-content {

  display: flex;

  flex-direction: column;

}



.promo-header {

  text-align: center;

  padding: 24px 20px 12px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

}



.promo-logo-group {

  margin-bottom: 2px;

}



.bpjs-logo-text {

  font-size: 11px;

  font-weight: 800;

  color: #1267bd;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  background: rgba(18, 103, 189, 0.08);

  padding: 4px 10px;

  border-radius: 99px;

}



.promo-header h2 {

  font-size: 20px;

  font-weight: 900;

  color: #071a37;

  margin: 4px 0;

  line-height: 1.25;

}



.promo-price-tag {

  display: flex;

  align-items: baseline;

  justify-content: center;

  gap: 2px;

  background: linear-gradient(90deg, rgba(18,103,189,0.05), rgba(18,103,189,0.12), rgba(18,103,189,0.05));

  width: 100%;

  padding: 6px 0;

  border-radius: 12px;

  margin: 4px 0;

}



.price-value {

  font-size: 32px;

  font-weight: 950;

  color: #1267bd;

  letter-spacing: -0.5px;

}



.price-per {

  font-size: 14px;

  font-weight: 800;

  color: #64748b;

}



.promo-subtitle {

  font-size: 12.5px;

  font-weight: 800;

  color: #334155;

  margin: 0;

}



.promo-period {

  font-size: 10.5px;

  color: #64748b;

  margin: 0;

  font-weight: 700;

}



.promo-body {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.promo-worker-section {

  width: 100%;

  height: 144px;

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: hidden;

  background: radial-gradient(circle, rgba(18, 103, 189, 0.06) 0%, transparent 70%);

}



.promo-worker-img {

  height: 100%;

  object-fit: contain;

  filter: drop-shadow(0 8px 16px rgba(18, 103, 189, 0.15));

}



.promo-details-section {

  padding: 0 24px;

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.promo-program-badge {

  text-align: center;

  font-size: 11px;

  font-weight: 800;

  color: #475569;

}



.program-badges {

  display: flex;

  justify-content: center;

  gap: 8px;

  margin-top: 5px;

}



.program-badges .badge {

  font-size: 10.5px;

  font-weight: 800;

  padding: 4px 10px;

  border-radius: 99px;

  box-shadow: 0 2px 5px rgba(0,0,0,0.03);

}



.program-badges .badge.jkk {

  background: #e0f2fe;

  color: #0369a1;

  border: 1px solid #bae6fd;

}



.program-badges .badge.jkm {

  background: #f3e8ff;

  color: #6b21a8;

  border: 1px solid #e9d5ff;

}



.promo-benefits-list {

  list-style: none;

  padding: 0;

  margin: 4px 0 0;

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.promo-benefits-list li {

  font-size: 12px;

  line-height: 1.35;

  color: #334155;

  display: flex;

  align-items: flex-start;

  gap: 8px;

}



.promo-benefits-list li::before {

  content: "\2705";

  font-size: 12px;

  flex-shrink: 0;

}



.promo-benefits-list li b {

  color: #0f172a;

}



.promo-footer {

  padding: 16px 24px 24px;

  text-align: center;

  display: flex;

  flex-direction: column;

  gap: 12px;

  align-items: center;

}



.promo-cta-btn {

  width: 100%;

  padding: 13px;

  border-radius: 99px;

  background: linear-gradient(135deg, #1267bd, #08335f) !important;

  color: #ffffff !important;

  font-size: 14.5px;

  font-weight: 900;

  border: 0;

  cursor: pointer;

  box-shadow: 0 8px 24px rgba(18, 103, 189, 0.35);

  transition: all 0.2s ease;

}



.promo-cta-btn:hover {

  filter: brightness(1.1);

  transform: translateY(-1.5px);

  box-shadow: 0 10px 28px rgba(18, 103, 189, 0.45);

}



.promo-cta-btn:active {

  transform: translateY(0);

  box-shadow: 0 4px 12px rgba(18, 103, 189, 0.25);

}



.promo-footnote {

  font-size: 9px;

  color: #94a3b8;

  margin: 0;

  line-height: 1.3;

  max-width: 290px;

}



/* Ensure the member app content has extra bottom padding on all screens, especially mobile, to prevent bottom nav from covering content */

body.session-authenticated #app.member-app:not(.hidden) .content {

  padding-bottom: 120px !important;

}



/* Force KTA Card text elements to be dark blue/red and clear on the light template background */

.rev50-card,

.rev50-card b,

.rev50-card span,

.rev50-card strong,

.rev50-card h1,

.rev50-card h2,

.rev50-card p,

.rev50-card li,

.rev50-card ol {

  color: inherit;

}



.rev50-row {

  color: #082b57 !important;

}

.rev50-row b,

.rev50-row span,

.rev50-row strong {

  color: #082b57 !important;

}



.rev50-title h1 {

  color: #071a37 !important;

}

.rev50-title p {

  color: #163b67 !important;

}

.rev50-title strong {

  color: #c9141b !important;

}

.rev50-rules,

.rev50-rules h2,

.rev50-rules ol,

.rev50-rules li {

  color: #082b57 !important;

}

.rev50-sign,

.rev50-sign-title,

.rev50-sign-name {

  color: #082b57 !important;

}

.rev50-back-address {

  color: #111111 !important;

}



/* Profile History Tabbed Layout Styles */

.profile-tabs-container {

  margin-top: 20px;

  width: 100%;

}

.profile-tabs-header {

  display: flex;

  gap: 8px;

  overflow-x: auto;

  padding-bottom: 10px;

  margin-bottom: 14px;

  border-bottom: 1px solid var(--line);

  -webkit-overflow-scrolling: touch;

}

.profile-tabs-header::-webkit-scrollbar {

  height: 4px;

}

.profile-tabs-header::-webkit-scrollbar-thumb {

  background: var(--line);

  border-radius: 2px;

}

.profile-tab-btn {

  padding: 8px 16px;

  background: var(--soft);

  border: 1px solid var(--line);

  border-radius: 10px;

  font-size: 13px;

  font-weight: 700;

  color: var(--navy);

  cursor: pointer;

  white-space: nowrap;

  transition: all 0.2s ease;

}

.profile-tab-btn:hover {

  background: var(--line);

}

.profile-tab-btn.active {

  background: var(--blue) !important;

  color: #ffffff !important;

  border-color: var(--blue) !important;

  box-shadow: 0 4px 10px rgba(0, 82, 204, 0.2);

}

.profile-tab-content {

  animation: fadeIn 0.25s ease-in-out;

}



/* Profile Accordion Styles */

.profile-accordion-card {

  padding: 0 !important;

  overflow: hidden !important;

  border-radius: 18px !important;

  border: 1px solid var(--line) !important;

  background: #ffffff !important;

}

.profile-accordion-header {

  width: 100%;

  background: none;

  border: none;

  padding: 16px 18px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-family: inherit;

  font-size: 15px;

  font-weight: 700;

  color: var(--navy);

  cursor: pointer;

  text-align: left;

  transition: background 0.2s ease;

  outline: none;

}

.profile-accordion-header:hover {

  background: var(--soft);

}

.profile-accordion-header.active {

  border-bottom: 1px solid var(--line);

  background: var(--soft);

}

.profile-accordion-content {

  padding: 18px;

  animation: fadeIn 0.2s ease-in-out;

}

.accordion-arrow {

  font-size: 12px;

  color: var(--muted);

}











/* =========================================================

   Revisi 106 — Nuansa merah-putih, kartu anggota, dan foto terpisah

   Tidak memodifikasi warna artwork KTA yang dicetak.

   ========================================================= */

:root{

  --primary-red:#C8102E;

  --primary-red-dark:#A30D25;

  --secondary-red:#FF4D4D;

  --soft-red:#FFF5F5;

  --neutral-bg:#F8F8F8;

  --line-red:#F3C3CA;

  --blue:var(--primary-red);

  --ui-blue:var(--primary-red);

  --ui-deep:#8F0C21;

  --ui-red:var(--primary-red);

}

body{background:var(--neutral-bg)!important;}

.sidebar{background:linear-gradient(180deg,#C8102E 0%,#A30D25 100%)!important;}

.brand-panel{background:linear-gradient(135deg,#fff 0%,#FFF5F5 100%)!important;border-bottom-color:var(--primary-red)!important;color:#8F0C21!important;}

.sidebar nav button{border-color:rgba(255,255,255,.25)!important;color:#fff!important;}

.sidebar nav button:hover,.sidebar nav button.active{background:rgba(255,255,255,.16)!important;}

.topbar h2,.card h3,.quick-access-section h3,.info-section h3{color:#8F0C21!important;}

button{background:linear-gradient(135deg,var(--primary-red),var(--primary-red-dark))!important;}

button.btn-secondary,.btn-secondary{background:#FFF5F5!important;color:#9D1128!important;border:1px solid var(--line-red)!important;}

.card{background:#fff!important;border:1px solid var(--line-red)!important;box-shadow:0 10px 26px rgba(152,14,36,.08)!important;}

.card:hover{box-shadow:0 14px 32px rgba(152,14,36,.12)!important;}

.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid rgba(200,16,46,.18);border-color:var(--primary-red)!important;}

.dash-hero{background:linear-gradient(135deg,#C8102E 0%,#921124 100%)!important;}

.stat{border-left-color:var(--primary-red)!important;}

.stat b{color:#9D1128!important;}

th{background:#FFF5F5!important;color:#8F0C21!important;}

tr:hover td{background:#FFF9F9!important;}



/* Area kartu pada halaman anggota: red-white, icon modern tebal 32–40px. */

.quick-access-grid{gap:14px!important;}

.quick-card.member-action-card{

  min-height:150px;

  background:linear-gradient(135deg,#FFFFFF 0%,#FFF5F5 100%)!important;

  border:1px solid var(--line-red)!important;

  border-left:4px solid var(--primary-red)!important;

  box-shadow:0 10px 24px rgba(200,16,46,.10)!important;

}

.quick-card.member-action-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(200,16,46,.16)!important;}

.quick-card.member-action-card .quick-icon{

  width:64px!important;height:64px!important;border-radius:18px!important;

  background:linear-gradient(135deg,#C8102E,#E30613)!important;color:#fff!important;

  box-shadow:0 8px 16px rgba(200,16,46,.20)!important;

}

.quick-card.member-action-card .quick-icon svg{width:38px!important;height:38px!important;stroke-width:2.8!important;}

.quick-card.member-action-card .quick-label{color:#8F0C21!important;font-size:13px!important;font-weight:800!important;}



/* Dua tombol foto terpisah: Profil tidak pernah mengubah Foto KTA. */

.member-photo-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 14px;}

.member-photo-action{

  display:inline-flex!important;align-items:center;gap:7px;padding:8px 11px!important;

  border-radius:10px!important;font-size:12px!important;background:linear-gradient(135deg,#C8102E,#A30D25)!important;

  box-shadow:0 5px 12px rgba(200,16,46,.16)!important;

}

.member-photo-action.member-photo-action-kta{background:#FFF5F5!important;color:#9D1128!important;border:1px solid var(--line-red)!important;}

.member-photo-action svg{flex:0 0 auto;}

.member-kta-number{background:#FFF5F5!important;color:#9D1128!important;border:1px solid var(--line-red)!important;}

.member-profile-status{display:block;text-align:center;}

.member-profile-status .inactive-reason-badge{margin:6px auto 0;color:#9D1128!important;}

.member-status-reason{display:block;font-size:10px;font-weight:800;color:#FFE4E6;margin-top:3px;}



/* Status tidak aktif dengan keterangan yang terbaca jelas. */

.inactive-reason-field{border-color:#F3C3CA!important;background:#FFF5F5!important;}

.inactive-reason-field span,.inactive-reason-field small{color:#9D1128!important;}

.inactive-reason-field select{border-color:#F3C3CA!important;}

.member-status-inactive{background:#FFE4E6!important;color:#9D1128!important;}

.member-status-active{background:#FFF5F5!important;color:#9D1128!important;border:1px solid var(--line-red)!important;}

.inactive-reason-badge{color:#9D1128!important;}



@media(max-width:620px){

  .quick-card.member-action-card{min-height:136px!important;padding:14px!important;}

  .quick-card.member-action-card .quick-icon{width:58px!important;height:58px!important;}

  .quick-card.member-action-card .quick-icon svg{width:34px!important;height:34px!important;}

  .member-photo-actions{width:100%;}

  .member-photo-action{flex:1 1 150px;justify-content:center;}

}





/* =========================================================

   Revisi 108 — Akses cepat dan profil lebih nyaman di mata

   Merah dipakai sebagai aksen/CTA, bukan warna dominan card.

   ========================================================= */

/* Akses Cepat: permukaan putih netral, ikon merah lembut, satu aksen garis. */

.app.member-app .quick-access-section h3 {

  color: #273244 !important;

}

.app.member-app .quick-card.member-action-card {

  min-height: 142px !important;

  background: #ffffff !important;

  border: 1px solid #e5e7eb !important;

  border-left: 3px solid #e7a2b0 !important;

  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.055) !important;

}

.app.member-app .quick-card.member-action-card:hover {

  transform: translateY(-2px) !important;

  border-color: #d7dde5 !important;

  border-left-color: #c8102e !important;

  box-shadow: 0 11px 22px rgba(15, 23, 42, 0.09) !important;

}

.app.member-app .quick-card.member-action-card .quick-icon {

  width: 58px !important;

  height: 58px !important;

  border-radius: 17px !important;

  background: #fff1f2 !important;

  color: #b4233f !important;

  box-shadow: none !important;

}

.app.member-app .quick-card.member-action-card .quick-icon svg {

  width: 36px !important;

  height: 36px !important;

  stroke-width: 2.5 !important;

}

.app.member-app .quick-card.member-action-card .quick-label {

  color: #344054 !important;

  font-size: 13px !important;

  font-weight: 750 !important;

}



/* Profil: seluruh card, accordions, dan form kembali menjadi putih-netral. */

.app.member-app .member-profile-page .card,

.app.member-app .member-profile-page .profile-accordion-card {

  background: #ffffff !important;

  border: 1px solid #e5e7eb !important;

  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.055) !important;

}

.app.member-app .member-profile-page .profile-header-card {

  background: linear-gradient(150deg, #ffffff 0%, #fcfcfd 100%) !important;

  border-top: 3px solid #e8b4be !important;

}

.app.member-app .member-profile-page .card h3,

.app.member-app .member-profile-page .profile-header-card h3 {

  color: #1f2937 !important;

}

.app.member-app .member-profile-page .profile-photo {

  border-color: #e5e7eb !important;

  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12) !important;

}

.app.member-app .member-profile-page .member-photo-action,

.app.member-app .member-profile-page .member-photo-action.member-photo-action-kta {

  background: #ffffff !important;

  color: #475467 !important;

  border: 1px solid #d8dee7 !important;

  box-shadow: none !important;

}

.app.member-app .member-profile-page .member-photo-action:hover,

.app.member-app .member-profile-page .member-photo-action.member-photo-action-kta:hover {

  background: #f8fafc !important;

  border-color: #c7d0db !important;

}

.app.member-app .member-profile-page .member-photo-action span {

  color: #475467 !important;

}

.app.member-app .member-profile-page .member-photo-action svg {

  color: #b4233f !important;

}

.app.member-app .member-profile-page .member-kta-number {

  background: #f8fafc !important;

  border: 1px solid #e2e8f0 !important;

  color: #475467 !important;

}



/* Accordions tidak lagi memakai latar/tombol merah penuh. */

.app.member-app .member-profile-page .profile-accordion-header {

  background: #ffffff !important;

  color: #253041 !important;

  border: 0 !important;

  box-shadow: none !important;

}

.app.member-app .member-profile-page .profile-accordion-header:hover,

.app.member-app .member-profile-page .profile-accordion-header.active {

  background: #f8fafc !important;

  color: #253041 !important;

}

.app.member-app .member-profile-page .profile-accordion-header.active {

  border-bottom: 1px solid #e5e7eb !important;

}

.app.member-app .member-profile-page .profile-accordion-header span,

.app.member-app .member-profile-page .profile-accordion-content span {

  color: #253041 !important;

}

.app.member-app .member-profile-page .profile-accordion-content {

  background: #ffffff !important;

}

.app.member-app .member-profile-page .profile-accordion-content [style*="color: var(--muted)"] {

  color: #667085 !important;

}

.app.member-app .member-profile-page .profile-accordion-content [style*="border-bottom"] {

  border-color: #eef0f3 !important;

}

.app.member-app .member-profile-page .member-edit-profile-button {

  background: #f8fafc !important;

  color: #475467 !important;

  border: 1px solid #d8dee7 !important;

  box-shadow: none !important;

}

.app.member-app .member-profile-page .member-edit-profile-button span {

  color: #475467 !important;

}

.app.member-app .member-profile-page .member-logout-button {

  background: #ffffff !important;

  color: #b4233f !important;

  border: 1px solid #f1c6ce !important;

  box-shadow: none !important;

}

.app.member-app .member-profile-page .member-logout-button svg {

  color: #b4233f !important;

}

.app.member-app .member-profile-page .member-logout-button:hover {

  background: #fff7f8 !important;

}



/* Form edit tetap netral; merah hanya untuk tombol Simpan sebagai CTA utama. */

.app.member-app .member-profile-edit-page .field input,

.app.member-app .member-profile-edit-page .field select,

.app.member-app .member-profile-edit-page .field textarea {

  border-color: #d8dee7 !important;

  background: #ffffff !important;

}

.app.member-app .member-profile-edit-page .field input:focus,

.app.member-app .member-profile-edit-page .field select:focus,

.app.member-app .member-profile-edit-page .field textarea:focus {

  border-color: #b4233f !important;

  outline: 2px solid rgba(180, 35, 63, 0.10) !important;

}

.app.member-app .member-profile-edit-page .history-editor-section .card,

.app.member-app .member-profile-edit-page .history-editor-section {

  border-color: #e5e7eb !important;

}

.app.member-app .member-profile-edit-page .member-save-profile-button {

  background: linear-gradient(135deg, #c8102e, #a30d25) !important;

  box-shadow: 0 5px 12px rgba(180, 35, 63, 0.18) !important;

}

@media (max-width: 620px) {

  .app.member-app .quick-card.member-action-card {

    min-height: 132px !important;

  }

  .app.member-app .quick-card.member-action-card .quick-icon {

    width: 54px !important;

    height: 54px !important;

  }

  .app.member-app .quick-card.member-action-card .quick-icon svg {

    width: 34px !important;

    height: 34px !important;

  }

}



/* =========================================================

   Revisi 109 — Akses keluar harus terlihat jelas di halaman anggota

   ========================================================= */

/* Aksi keluar ditempatkan pada Akses Cepat agar tidak tersembunyi di halaman profil. */

.app.member-app .quick-card.member-action-card.quick-logout-card {

  grid-column: 1 / -1;

  min-height: 74px !important;

  padding: 12px 16px !important;

  flex-direction: row !important;

  justify-content: flex-start !important;

  text-align: left !important;

  background: #fffafb !important;

  border: 1px solid #efd2d8 !important;

  border-left: 3px solid #c98291 !important;

  color: #344054 !important;

  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.045) !important;

}

.app.member-app .quick-card.member-action-card.quick-logout-card:hover {

  background: #fff5f6 !important;

  border-left-color: #b4233f !important;

  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;

}

.app.member-app .quick-card.member-action-card.quick-logout-card .quick-icon {

  flex: 0 0 auto;

  width: 42px !important;

  height: 42px !important;

  border-radius: 13px !important;

  background: #fff1f2 !important;

  color: #b4233f !important;

}

.app.member-app .quick-card.member-action-card.quick-logout-card .quick-icon svg {

  width: 25px !important;

  height: 25px !important;

  stroke-width: 2.7 !important;

}

.app.member-app .quick-card.member-action-card.quick-logout-card .quick-label,

.app.member-app .member-profile-page .member-logout-button .member-logout-label {

  display: inline-block !important;

  visibility: visible !important;

  opacity: 1 !important;

  color: #344054 !important;

  font-size: 14px !important;

  font-weight: 800 !important;

  line-height: 1.2 !important;

}

.app.member-app .member-profile-page .member-logout-button .member-logout-label {

  color: #b4233f !important;

}

@media (max-width: 620px) {

  .app.member-app .quick-card.member-action-card.quick-logout-card {

    min-height: 70px !important;

  }

}





/* =========================================================

   Revisi 110 — Superadmin/Nasional dan Admin PUK lebih netral

   Merah digunakan hanya pada aksi destruktif, indikator penting,

   dan elemen merek kecil. Halaman anggota tetap memakai revisi 108–109.

   ========================================================= */

/* Palet administratif: putih, abu-biru sangat muda, dan biru navy lembut. */

.app:not(.member-app){

  --blue:#1f5f9e;

  --ui-blue:#1f5f9e;

  --ui-deep:#153b68;

  --soft:#f6f8fb;

  --line:#dce5ef;

}

.app:not(.member-app) .content{

  background:#f7f9fc!important;

}



/* Sidebar tidak lagi merah penuh. */

.app:not(.member-app) .sidebar{

  background:linear-gradient(180deg,#17375f 0%,#102846 100%)!important;

}

.app:not(.member-app) .brand-panel{

  background:linear-gradient(135deg,#ffffff 0%,#f2f7fc 100%)!important;

  border-bottom-color:#b9d5ef!important;

  color:#143a68!important;

}

.app:not(.member-app) .brand-panel h1,

.app:not(.member-app) .brand-panel h2,

.app:not(.member-app) .brand-panel h3,

.app:not(.member-app) .brand-panel p,

.app:not(.member-app) .brand-panel b,

.app:not(.member-app) .brand-panel span,

.app:not(.member-app) .brand-panel .sidebar-identity-label{

  color:#143a68!important;

  text-shadow:none!important;

}

.app:not(.member-app) .role-badge{

  background:rgba(255,255,255,.10)!important;

  border-color:rgba(255,255,255,.18)!important;

}

.app:not(.member-app) .sidebar nav button{

  border-color:rgba(255,255,255,.12)!important;

  color:#e7f0fb!important;

}

.app:not(.member-app) .sidebar nav button:hover{

  background:rgba(255,255,255,.10)!important;

  color:#ffffff!important;

}

.app:not(.member-app) .sidebar nav button.active{

  background:rgba(122,184,232,.18)!important;

  border-color:rgba(158,210,247,.32)!important;

  box-shadow:inset 3px 0 0 #8bc5ee!important;

}

.app:not(.member-app) .sidebar nav button.active .nav-ic{

  color:#a9dbfb!important;

}

.app:not(.member-app) .sidebar nav .menu-group-head{

  color:#a9bfda!important;

}

.app:not(.member-app) .sidebar nav .menu-group-head:hover{

  color:#e7f0fb!important;

}

.app:not(.member-app) .logout{

  background:rgba(255,255,255,.10)!important;

  color:#ffffff!important;

  border:1px solid rgba(255,255,255,.16)!important;

  box-shadow:none!important;

}



/* Permukaan konten administratif dibuat netral. */

.app:not(.member-app) .topbar h2,

.app:not(.member-app) .card h3,

.app:not(.member-app) .info-section h3{

  color:#21354f!important;

}

.app:not(.member-app) .card{

  background:#ffffff!important;

  border:1px solid #dfe7ef!important;

  box-shadow:0 7px 18px rgba(15,23,42,.055)!important;

}

.app:not(.member-app) .card:hover{

  box-shadow:0 10px 24px rgba(15,23,42,.075)!important;

}

.app:not(.member-app) .dash-hero{

  background:linear-gradient(135deg,#1b416f 0%,#2d5e92 100%)!important;

  box-shadow:0 10px 24px rgba(25,66,109,.16)!important;

}

.app:not(.member-app) .dash-hero p{

  color:#e9f2fb!important;

}

.app:not(.member-app) .pill{background:rgba(255,255,255,.16);color:#ffffff;border:1px solid rgba(255,255,255,.22);}

.app:not(.member-app) .stat{

  border-color:#dfe7ef!important;

  border-left-color:#78aeda!important;

  box-shadow:0 6px 16px rgba(15,23,42,.045)!important;

}

.app:not(.member-app) .stat b{

  color:#214c7a!important;

}

.app:not(.member-app) .pending-stat{

  border-left-color:#e6b85c!important;

}

.app:not(.member-app) .approved-stat{

  border-left-color:#63ad86!important;

}

.app:not(.member-app) th{

  background:#f3f7fb!important;

  color:#3d5875!important;

}

.app:not(.member-app) tr:hover td{

  background:#f8fbfe!important;

}

.app:not(.member-app) .bar-track span{

  background:linear-gradient(90deg,#4b8ac5,#79b6df)!important;

}



/* Tombol: biru lembut untuk aksi biasa; merah hanya aksi bahaya. */

.app:not(.member-app) button:not(.danger):not(.admin-enable){

  background:linear-gradient(135deg,#2e6fae,#1f568d)!important;

  color:#ffffff!important;

  box-shadow:0 5px 12px rgba(31,86,141,.14)!important;

}

.app:not(.member-app) button:not(.danger):not(.admin-enable):hover{

  filter:brightness(1.04)!important;

}

.app:not(.member-app) button.btn-secondary,

.app:not(.member-app) .btn-secondary{

  background:#f5f8fc!important;

  color:#34506f!important;

  border:1px solid #d7e1ec!important;

  box-shadow:none!important;

}

.app:not(.member-app) button.danger,

.app:not(.member-app) .danger{

  background:#c93b4c!important;

  color:#ffffff!important;

  box-shadow:0 5px 12px rgba(201,59,76,.14)!important;

}

.app:not(.member-app) .approval-switch button{

  background:#edf5fc!important;

  color:#355878!important;

  border:1px solid #d8e6f3!important;

  box-shadow:none!important;

}

.app:not(.member-app) .approval-switch button.active{

  background:#2e6fae!important;

  color:#ffffff!important;

  border-color:#2e6fae!important;

}

.app:not(.member-app) .notification-button{

  background:#ffffff!important;

  color:#214c7a!important;

  border-color:#d7e4f3!important;

  box-shadow:0 4px 14px rgba(15,23,42,.06)!important;

}

.app:not(.member-app) .notification-button:hover{

  background:#f2f7fc!important;

}



/* Form dan elemen pendukung tetap tenang secara visual. */

.app:not(.member-app) .field input:focus,

.app:not(.member-app) .field select:focus,

.app:not(.member-app) .field textarea:focus{

  outline:2px solid rgba(48,111,174,.12)!important;

  border-color:#5e99cf!important;

}

.app:not(.member-app) .field input,

.app:not(.member-app) .field select,

.app:not(.member-app) .field textarea{

  border-color:#d7e1ec!important;

}

.app:not(.member-app) .notification-card{

  border-top-color:#e0b85c!important;

}

.app:not(.member-app) .notify-row{

  border-color:#e1e8f0!important;

  background:#fcfdff!important;

}

.app:not(.member-app) .notify-row.unread{

  border-left-color:#e0b85c!important;

  background:#fffdf7!important;

}

.app:not(.member-app) .notify-row div b{

  color:#214c7a!important;

}



/* Pengecualian yang tetap merah: hapus/nonaktifkan dan badge peringatan. */

.app:not(.member-app) .approval-status.approval-rejected,

.app:not(.member-app) .admin-inactive{

  background:#fce8eb!important;

  color:#a82235!important;

}





/* =========================================================

   Revisi 111 — Header, identitas sidebar, dan mode tampilan admin

   - Identitas dua logo tidak memakai latar putih.

   - Mode tampilan hanya mengubah aksen administratif secara halus.

   - Tidak ada override global pada body, card, atau seluruh tombol aplikasi.

   ========================================================= */



/* Variabel dasar untuk Admin PUK dan Superadmin/Nasional. */

.app:not(.member-app){

  --admin-sidebar-top:#173a63;

  --admin-sidebar-bottom:#102846;

  --admin-brand-top:#224a77;

  --admin-brand-bottom:#183a61;

  --admin-brand-text:#ffffff;

  --admin-brand-subtext:#d7e5f4;

  --admin-accent:#2e6fae;

  --admin-accent-deep:#1f568d;

  --admin-accent-soft:#edf5fc;

  --admin-accent-line:#d7e4f3;

  --admin-active-line:#8bc5ee;

  --admin-active-bg:rgba(46,111,174,.18);

  --admin-active-border:rgba(139,197,238,.36);

  --admin-accent-mid:#83b4dc;

  --admin-hero-start:#1b416f;

  --admin-hero-end:#2d5e92;

  --admin-focus:rgba(48,111,174,.15);

}



/* Mode tetap tenang: hanya aksen antarmuka administrasi yang berganti. */

.app.admin-mode-emerald{

  --admin-accent:#26835f;

  --admin-accent-deep:#1b664a;

  --admin-accent-soft:#eef8f3;

  --admin-accent-line:#cee8da;

  --admin-active-line:#83caa7;

  --admin-active-bg:rgba(38,131,95,.17);

  --admin-active-border:rgba(131,202,167,.36);

  --admin-accent-mid:#7dc19f;

  --admin-hero-start:#214f4a;

  --admin-hero-end:#347765;

  --admin-focus:rgba(38,131,95,.15);

  --admin-sidebar-top:#123f2f;

  --admin-sidebar-bottom:#0b261c;

  --admin-brand-top:#1a4c3a;

  --admin-brand-bottom:#12372a;

}

.app.admin-mode-dark{

  --admin-accent:#526f92;

  --admin-accent-deep:#354d6a;

  --admin-accent-soft:#f0f4f8;

  --admin-accent-line:#d5dee8;

  --admin-active-line:#aebfd0;

  --admin-active-bg:rgba(82,111,146,.16);

  --admin-active-border:rgba(174,191,208,.36);

  --admin-accent-mid:#96aac0;

  --admin-hero-start:#253d58;

  --admin-hero-end:#47627e;

  --admin-focus:rgba(82,111,146,.15);

  --admin-sidebar-top:#1a2330;

  --admin-sidebar-bottom:#10161e;

  --admin-brand-top:#222d3d;

  --admin-brand-bottom:#18222d;

}



/* Penyelarasan latar belakang sidebar berdasarkan mode aktif di layar PC */

.app.member-app.admin-mode-classic .sidebar {

  background: linear-gradient(180deg, #173a63 0%, #102846 100%) !important;

}

.app:not(.member-app).admin-mode-classic .sidebar {

  background: linear-gradient(180deg, var(--admin-sidebar-top), var(--admin-sidebar-bottom)) !important;

}

.app.admin-mode-emerald .sidebar {

  background: linear-gradient(180deg, var(--admin-sidebar-top), var(--admin-sidebar-bottom)) !important;

}

.app.admin-mode-dark .sidebar {

  background: linear-gradient(180deg, var(--admin-sidebar-top), var(--admin-sidebar-bottom)) !important;

}



/* Panel identitas dibuat gelap agar dua logo dan tulisan mudah terlihat. */

.app:not(.member-app) .brand-panel{

  background:linear-gradient(145deg,var(--admin-brand-top),var(--admin-brand-bottom))!important;

  border-bottom:1px solid rgba(208,229,248,.28)!important;

  color:var(--admin-brand-text)!important;

  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)!important;

}

.app:not(.member-app) .brand-panel strong,

.app:not(.member-app) .brand-panel small,

.app:not(.member-app) .brand-panel h1,

.app:not(.member-app) .brand-panel h2,

.app:not(.member-app) .brand-panel h3,

.app:not(.member-app) .brand-panel p,

.app:not(.member-app) .brand-panel b,

.app:not(.member-app) .brand-panel span,

.app:not(.member-app) .brand-panel .sidebar-identity-label{

  color:var(--admin-brand-text)!important;

  text-shadow:0 1px 2px rgba(3,18,39,.28)!important;

}

.app:not(.member-app) .brand-panel small{

  color:var(--admin-brand-subtext)!important;

}

.app:not(.member-app) .brand-panel .brand-logos{

  padding:7px 10px!important;

  border-radius:14px!important;

  background:rgba(6,26,52,.24)!important;

  border:1px solid rgba(255,255,255,.12)!important;

}

.app:not(.member-app) .brand-panel .brand-logos img{

  background:transparent!important;

  filter:drop-shadow(0 2px 4px rgba(0,0,0,.22))!important;

}



/* Header Dashboard: judul dan lonceng berada satu baris. */

.app:not(.member-app) .topbar{

  display:grid!important;

  grid-template-columns:minmax(0,1fr) auto!important;

  align-items:center!important;

  gap:14px!important;

}

.topbar-heading{

  display:flex;

  align-items:center;

  gap:12px;

  min-width:0;

}

.topbar-title-stack{

  min-width:0;

}

.topbar-title-stack h2{

  margin:0!important;

}

.dashboard-greeting{

  margin:4px 0 0!important;

  color:#667f9b!important;

  font-size:12px!important;

  font-weight:700!important;

  line-height:1.3!important;

}

.app:not(.member-app) .topbar-actions{

  width:auto!important;

  margin:0!important;

  margin-left:auto!important;

  flex-wrap:nowrap!important;

  justify-content:flex-end!important;

}

.app:not(.member-app) .notification-shell{

  display:flex;

  align-items:center;

}

.app:not(.member-app) .notification-button{

  align-self:center!important;

}



/* Gunakan token mode, bukan nilai warna global yang memengaruhi semua halaman. */

.app:not(.member-app) .sidebar,

.app.admin-mode-emerald .sidebar,

.app.admin-mode-dark .sidebar{

  background:linear-gradient(180deg,var(--admin-sidebar-top),var(--admin-sidebar-bottom))!important;

}

.app:not(.member-app) .sidebar nav button.active,

.app.admin-mode-emerald .sidebar nav button.active,

.app.admin-mode-dark .sidebar nav button.active{

  background:var(--admin-active-bg)!important;

  border-color:var(--admin-active-border)!important;

  box-shadow:inset 3px 0 0 var(--admin-active-line)!important;

}

.app:not(.member-app) .sidebar nav button.active .nav-ic,

.app.admin-mode-emerald .sidebar nav button.active .nav-ic,

.app.admin-mode-dark .sidebar nav button.active .nav-ic{

  color:var(--admin-active-line)!important;

}

.app:not(.member-app) .dash-hero,

.app.admin-mode-emerald .dash-hero,

.app.admin-mode-dark .dash-hero{

  background:linear-gradient(135deg,var(--admin-hero-start),var(--admin-hero-end))!important;

}

.app:not(.member-app) button:not(.danger):not(.admin-enable),

.app.admin-mode-emerald button:not(.danger):not(.admin-enable),

.app.admin-mode-dark button:not(.danger):not(.admin-enable){

  background:linear-gradient(135deg,var(--admin-accent),var(--admin-accent-deep))!important;

}

.app:not(.member-app) .approval-switch button.active,

.app.admin-mode-emerald .approval-switch button.active,

.app.admin-mode-dark .approval-switch button.active{

  background:var(--admin-accent)!important;

  border-color:var(--admin-accent)!important;

}

.app:not(.member-app) .notification-button,

.app.admin-mode-emerald .notification-button,

.app.admin-mode-dark .notification-button{

  color:var(--admin-accent-deep)!important;

  border-color:var(--admin-accent-line)!important;

}

.app:not(.member-app) .notification-button:hover,

.app.admin-mode-emerald .notification-button:hover,

.app.admin-mode-dark .notification-button:hover{

  background:var(--admin-accent-soft)!important;

}

.app:not(.member-app) .field input:focus,

.app.admin-mode-emerald .field input:focus,

.app.admin-mode-dark .field input:focus,

.app:not(.member-app) .field select:focus,

.app.admin-mode-emerald .field select:focus,

.app.admin-mode-dark .field select:focus,

.app:not(.member-app) .field textarea:focus,

.app.admin-mode-emerald .field textarea:focus,

.app.admin-mode-dark .field textarea:focus{

  outline:2px solid var(--admin-focus)!important;

  border-color:var(--admin-accent)!important;

}

.app:not(.member-app) .bar-track span,

.app.admin-mode-emerald .bar-track span,

.app.admin-mode-dark .bar-track span{

  background:linear-gradient(90deg,var(--admin-accent),var(--admin-accent-mid))!important;

}



/* Panel identitas dibuat gelap agar dua logo dan tulisan mudah terlihat. */

.app:not(.member-app) .brand-panel,

.app.admin-mode-emerald .brand-panel,

.app.admin-mode-dark .brand-panel{

  background:linear-gradient(145deg,var(--admin-brand-top),var(--admin-brand-bottom))!important;

  border-bottom:1px solid rgba(208,229,248,.28)!important;

  color:var(--admin-brand-text)!important;

  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)!important;

}

.app:not(.member-app) .brand-panel strong,

.app.admin-mode-emerald .brand-panel strong,

.app.admin-mode-dark .brand-panel strong,

.app:not(.member-app) .brand-panel small,

.app.admin-mode-emerald .brand-panel small,

.app.admin-mode-dark .brand-panel small,

.app:not(.member-app) .brand-panel h1,

.app.admin-mode-emerald .brand-panel h1,

.app.admin-mode-dark .brand-panel h1,

.app:not(.member-app) .brand-panel h2,

.app.admin-mode-emerald .brand-panel h2,

.app.admin-mode-dark .brand-panel h2,

.app:not(.member-app) .brand-panel h3,

.app.admin-mode-emerald .brand-panel h3,

.app.admin-mode-dark .brand-panel h3,

.app:not(.member-app) .brand-panel p,

.app.admin-mode-emerald .brand-panel p,

.app.admin-mode-dark .brand-panel p,

.app:not(.member-app) .brand-panel b,

.app.admin-mode-emerald .brand-panel b,

.app.admin-mode-dark .brand-panel b,

.app:not(.member-app) .brand-panel span,

.app.admin-mode-emerald .brand-panel span,

.app.admin-mode-dark .brand-panel span,

.app:not(.member-app) .brand-panel .sidebar-identity-label,

.app.admin-mode-emerald .brand-panel .sidebar-identity-label,

.app.admin-mode-dark .brand-panel .sidebar-identity-label{

  color:var(--admin-brand-text)!important;

}



/* Mobile: lonceng tetap sejajar dengan judul, selector lain tetap berada di sidebar. */

@media (max-width:900px){

  .app:not(.member-app) .topbar{

    grid-template-columns:minmax(0,1fr) auto!important;

    align-items:center!important;

  }

  .app:not(.member-app) .topbar-actions{

    width:auto!important;

    flex:0 0 auto!important;

  }

  .app:not(.member-app) .dashboard-greeting{

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

  }

}





/* =========================================================

   Revisi 112 — Header identitas Admin/Superadmin dan penghapusan menu Tata Letak

   - Panel dua logo selalu gelap, termasuk pada desktop dan mobile.

   - Selector Tata Letak dihapus dari HTML dan disembunyikan sebagai pengaman cache.

   ========================================================= */



/* Pengaman akhir: selector ber-ID ini mengalahkan override putih dari revisi lama. */

#app .sidebar .brand-panel,

#app:not(.member-app) .sidebar .brand-panel{

  background-color:#122f52!important;

  background-image:linear-gradient(145deg,#1d4b7c 0%,#102846 100%)!important;

  border:1px solid rgba(190,219,246,.26)!important;

  border-bottom:1px solid rgba(190,219,246,.30)!important;

  color:#ffffff!important;

  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 18px rgba(4,20,42,.16)!important;

  backdrop-filter:none!important;

  -webkit-backdrop-filter:none!important;

}

#app .sidebar .brand-panel .brand-logos{

  background:rgba(4,24,49,.42)!important;

  border:1px solid rgba(224,239,252,.18)!important;

  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;

}

#app .sidebar .brand-panel strong,

#app .sidebar .brand-panel small,

#app .sidebar .brand-panel h1,

#app .sidebar .brand-panel h2,

#app .sidebar .brand-panel h3,

#app .sidebar .brand-panel p,

#app .sidebar .brand-panel b,

#app .sidebar .brand-panel span{

  color:#ffffff!important;

  text-shadow:0 1px 2px rgba(2,15,34,.38)!important;

}

#app .sidebar .brand-panel small{color:#d9e9f8!important;}

#app .sidebar .brand-panel .brand-logos img{

  background:transparent!important;

  filter:drop-shadow(0 2px 4px rgba(0,0,0,.30))!important;

}



/* Menu Tata Letak sudah dihentikan; aturan ini juga menangani HTML/cache lama. */

.layout-selector-el{display:none!important;}





/* Revisi 113 — Dashboard Admin/Superadmin dibuat ringkas seperti dashboard anggota */

.admin-dashboard-hero{

  padding:20px 22px;

}

.admin-dashboard-hero h2{

  margin:0 0 6px;

}

.admin-dashboard-hero p{

  margin:0;

  max-width:760px;

}

.admin-dashboard-role{

  margin-top:10px!important;

  font-size:13px;

  color:#e2e8f0!important;

}

.admin-dashboard-section{

  margin-bottom:28px;

}

.admin-dashboard-grid{

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:14px;

}

.admin-action-card,

.admin-summary-card{

  position:relative;

  min-height:144px;

  align-items:flex-start;

  justify-content:flex-start;

  gap:10px;

  padding:18px 16px;

}

.admin-action-card{

  cursor:pointer;

}

.admin-action-card:hover{

  transform:translateY(-3px);

  box-shadow:0 18px 34px rgba(15,23,42,.08);

}

.admin-action-card:focus-visible{

  outline:3px solid rgba(59,130,246,.22);

  outline-offset:2px;

}

.admin-action-card .quick-icon,

.admin-summary-card .quick-icon{

  width:56px;

  height:56px;

  border-radius:16px;

}

.admin-action-card .quick-icon svg,

.admin-summary-card .quick-icon svg{

  width:36px;

  height:36px;

  stroke-width:2.3;

}

.admin-action-card .quick-label,

.admin-summary-card .quick-label{

  width:100%;

  text-align:left;

  font-size:14px;

  font-weight:800;

  color:#0f172a;

}

.admin-quick-desc{

  width:100%;

  text-align:left;

  font-size:12px;

  line-height:1.5;

  color:#64748b;

}

.admin-quick-value{

  margin-top:auto;

  font-size:28px;

  line-height:1;

  font-weight:900;

  color:#0b3f7a;

}

.admin-quick-badge{

  position:absolute;

  top:12px;

  right:12px;

  min-width:26px;

  height:26px;

  padding:0 8px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:999px;

  background:#dc2626;

  color:#fff;

  font-size:11px;

  font-weight:800;

  box-shadow:0 8px 18px rgba(220,38,38,.18);

}

@media (max-width:640px){

  .admin-dashboard-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:12px;

  }

  .admin-action-card,

  .admin-summary-card{

    min-height:132px;

    padding:16px 14px;

  }

  .admin-action-card .quick-icon,

  .admin-summary-card .quick-icon{

    width:50px;

    height:50px;

  }

  .admin-action-card .quick-icon svg,

  .admin-summary-card .quick-icon svg{

    width:32px;

    height:32px;

  }

  .admin-quick-value{

    font-size:24px;

  }

}





/* Revisi 114 — Kartu dashboard dibuat lebih padat dan ikon dipusatkan */

.admin-dashboard-section{

  margin-bottom:20px;

}

.admin-dashboard-grid{

  gap:10px;

}

.admin-action-card,

.admin-summary-card{

  align-items:center;

  justify-content:center;

  text-align:center;

  gap:7px;

  padding:12px 10px;

}

.admin-summary-card{

  min-height:108px;

}

.admin-action-card{

  min-height:116px;

}

.admin-action-card .quick-icon,

.admin-summary-card .quick-icon{

  width:46px;

  height:46px;

  border-radius:14px;

  margin:0 auto;

}

.admin-action-card .quick-icon svg,

.admin-summary-card .quick-icon svg{

  width:29px;

  height:29px;

  stroke-width:2.35;

}

.admin-action-card .quick-label,

.admin-summary-card .quick-label{

  width:100%;

  text-align:center;

  font-size:12px;

  line-height:1.25;

}

.admin-quick-desc{

  display:none;

}

.admin-quick-value{

  margin-top:0;

  width:100%;

  text-align:center;

  font-size:23px;

}

.admin-quick-badge{

  top:8px;

  right:8px;

  min-width:22px;

  height:22px;

  padding:0 6px;

  font-size:10px;

}

@media (max-width:640px){

  .admin-dashboard-section{margin-bottom:18px;}

  .admin-dashboard-grid{gap:9px;}

  .admin-summary-card{min-height:100px;}

  .admin-action-card{min-height:110px;}

  .admin-action-card,

  .admin-summary-card{padding:11px 8px;}

  .admin-action-card .quick-icon,

  .admin-summary-card .quick-icon{

    width:42px;

    height:42px;

  }

  .admin-action-card .quick-icon svg,

  .admin-summary-card .quick-icon svg{

    width:27px;

    height:27px;

  }

  .admin-action-card .quick-label,

  .admin-summary-card .quick-label{font-size:11px;}

  .admin-quick-value{font-size:21px;}

}





/* Revisi 116 — Menu Profil Anggota grid 2 kolom, ringkas dan bertahap */

.member-profile-menu-page{padding-bottom:18px;}

.member-profile-overview{

  display:flex;

  align-items:center;

  gap:14px;

  padding:14px;

  margin-bottom:18px;

}

.member-profile-overview-photo{

  width:64px;

  height:72px;

  object-fit:cover;

  border-radius:14px;

  border:2px solid #e2e8f0;

  flex:0 0 auto;

}

.member-profile-overview-copy{min-width:0;}

.member-profile-overview-copy h3{

  margin:0 0 3px!important;

  font-size:16px!important;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

}

.member-profile-overview-copy p{

  margin:0;

  color:#64748b;

  font-size:12px;

  font-weight:700;

}

.member-profile-overview-status{

  display:inline-flex;

  margin-top:7px;

  padding:3px 8px;

  border-radius:999px;

  font-size:11px;

  font-weight:800;

}

.member-profile-overview-status.active{background:#ecfdf5;color:#047857;}

.member-profile-overview-status.inactive{background:#fef2f2;color:#b91c1c;}

.member-profile-menu-heading{margin:0 0 12px;}

.member-profile-menu-heading h3{margin:0 0 3px;font-size:16px;color:#0f2444;}

.member-profile-menu-heading p{margin:0;color:#64748b;font-size:12px;}

.member-profile-menu-grid{

  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:10px;

}

.member-profile-menu-card{

  position:relative;

  min-height:112px;

  padding:12px 10px 10px;

  border:1px solid #e8edf5;

  border-radius:15px;

  background:#fff;

  color:#0f172a;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  gap:5px;

  box-shadow:0 4px 12px rgba(15,23,42,.03);

  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;

}

.member-profile-menu-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(15,23,42,.08);}

.member-profile-menu-card:active{transform:scale(.98);}

.member-profile-menu-card:focus-visible{outline:3px solid rgba(37,99,235,.22);outline-offset:2px;}

.member-profile-menu-icon{

  width:42px;

  height:42px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:13px;

}

.member-profile-menu-title{font-size:12px;font-weight:850;line-height:1.2;}

.member-profile-menu-note{font-size:10px;line-height:1.3;color:#64748b;}

.member-profile-menu-arrow{position:absolute;right:9px;top:8px;font-size:18px;line-height:1;color:#94a3b8;}

.member-profile-tone-blue .member-profile-menu-icon{background:#eff6ff;color:#2563eb;}

.member-profile-tone-green .member-profile-menu-icon{background:#ecfdf5;color:#059669;}

.member-profile-tone-orange .member-profile-menu-icon{background:#fff7ed;color:#ea580c;}

.member-profile-tone-purple .member-profile-menu-icon{background:#faf5ff;color:#7e22ce;}

.member-profile-logout-link{

  width:100%;

  margin-top:16px;

  padding:10px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:7px;

  border:1px solid #fecaca;

  border-radius:12px;

  background:#fff;

  color:#b91c1c;

  font-size:12px;

  font-weight:800;

  box-shadow:none;

}

.member-profile-logout-link:hover{background:#fef2f2;}

.member-profile-detail-page{padding-bottom:20px;}

.member-profile-back{

  padding:0;

  margin:0 0 14px;

  border:0;

  background:transparent;

  color:#2563eb;

  box-shadow:none;

  display:inline-flex;

  align-items:center;

  gap:6px;

  font-size:12px;

  font-weight:800;

}

.member-profile-back:hover{filter:none;color:#1d4ed8;}

.member-profile-detail-heading{margin-bottom:12px;}

.member-profile-detail-heading h3{margin:0 0 4px;color:#0f2444;font-size:17px;}

.member-profile-detail-heading p{margin:0;color:#64748b;font-size:12px;line-height:1.45;}

.member-profile-detail-card{padding:14px;margin-bottom:0;}

.member-profile-info-list{display:grid;gap:0;}

.member-profile-info-row{

  display:grid;

  grid-template-columns:minmax(112px,.9fr) minmax(0,1.25fr);

  gap:12px;

  padding:11px 0;

  border-bottom:1px dashed #e2e8f0;

  align-items:start;

}

.member-profile-info-row:first-child{padding-top:0;}

.member-profile-info-row:last-child{padding-bottom:0;border-bottom:0;}

.member-profile-info-row>span{color:#64748b;font-size:12px;line-height:1.4;}

.member-profile-info-row>strong{color:#172033;font-size:12px;line-height:1.45;text-align:right;overflow-wrap:anywhere;}

.member-profile-file-link,.member-profile-edit-inline{

  margin-top:14px;

  padding:9px 11px;

  border:1px solid #dbeafe;

  border-radius:10px;

  background:#eff6ff;

  color:#1d4ed8;

  display:inline-flex;

  align-items:center;

  gap:6px;

  font-size:12px;

  font-weight:800;

  box-shadow:none;

}

.member-profile-edit-inline{width:100%;justify-content:center;}

.member-profile-empty{color:#94a3b8;font-size:12px;font-weight:600;}

.member-profile-history-wrap{margin-top:0;}

.member-profile-history-wrap>div{margin-top:0!important;}

@media(max-width:420px){

  .member-profile-menu-card{min-height:104px;padding:10px 8px;}

  .member-profile-menu-icon{width:38px;height:38px;border-radius:12px;}

  .member-profile-menu-icon svg{width:28px!important;height:28px!important;}

  .member-profile-menu-note{font-size:9.5px;}

  .member-profile-info-row{grid-template-columns:1fr;gap:3px;}

  .member-profile-info-row>strong{text-align:left;}

}





/* =========================================================

   Revisi 117 — Profil Anggota Netral dan Nyaman di Mata

   Kartu menu profil dibuat putih/netral; merah hanya untuk aksi keluar.

   ========================================================= */

.app.member-app .member-profile-page,

.app.member-app .member-profile-detail-page{

  color:#172033;

}

.app.member-app .member-profile-overview.card,

.app.member-app .member-profile-detail-card.card{

  background:#ffffff!important;

  border:1px solid #e2e8f0!important;

  box-shadow:0 6px 18px rgba(15,23,42,.045)!important;

}

.app.member-app .member-profile-overview-copy h3,

.app.member-app .member-profile-menu-heading h3,

.app.member-app .member-profile-detail-heading h3{

  color:#172033!important;

}

.app.member-app .member-profile-menu-heading p,

.app.member-app .member-profile-detail-heading p{

  color:#64748b!important;

}

/* Kartu menu dibuat sebagai tombol, sehingga harus menimpa tombol global berwarna merah. */

.app.member-app button.member-profile-menu-card{

  min-height:112px;

  background:#ffffff!important;

  color:#172033!important;

  border:1px solid #e2e8f0!important;

  box-shadow:0 4px 12px rgba(15,23,42,.035)!important;

}

.app.member-app button.member-profile-menu-card:hover{

  background:#f8fafc!important;

  border-color:#cbd5e1!important;

  box-shadow:0 10px 20px rgba(15,23,42,.075)!important;

  filter:none!important;

}

.app.member-app .member-profile-menu-card .member-profile-menu-title{

  color:#172033!important;

}

.app.member-app .member-profile-menu-card .member-profile-menu-note{

  color:#64748b!important;

}

.app.member-app .member-profile-menu-card .member-profile-menu-arrow{

  color:#94a3b8!important;

}

/* Warna hanya dipakai sebagai aksen lembut pada ikon, bukan blok kartu. */

.app.member-app .member-profile-tone-blue .member-profile-menu-icon{background:#eff6ff!important;color:#2563eb!important;}

.app.member-app .member-profile-tone-green .member-profile-menu-icon{background:#ecfdf5!important;color:#059669!important;}

.app.member-app .member-profile-tone-orange .member-profile-menu-icon{background:#fff7ed!important;color:#ea580c!important;}

.app.member-app .member-profile-tone-purple .member-profile-menu-icon{background:#faf5ff!important;color:#7e22ce!important;}

.app.member-app button.member-profile-back{

  background:transparent!important;

  color:#2563eb!important;

  border:0!important;

  box-shadow:none!important;

  filter:none!important;

}

.app.member-app button.member-profile-back:hover{

  background:#eff6ff!important;

  color:#1d4ed8!important;

}

.app.member-app button.member-profile-file-link,

.app.member-app button.member-profile-edit-inline{

  background:#eff6ff!important;

  color:#1d4ed8!important;

  border:1px solid #dbeafe!important;

  box-shadow:none!important;

  filter:none!important;

}

.app.member-app button.member-profile-file-link:hover,

.app.member-app button.member-profile-edit-inline:hover{

  background:#dbeafe!important;

  border-color:#bfdbfe!important;

}

.app.member-app button.member-profile-logout-link{

  background:#ffffff!important;

  color:#b4233f!important;

  border:1px solid #fecdd3!important;

  box-shadow:none!important;

  filter:none!important;

}

.app.member-app button.member-profile-logout-link:hover{

  background:#fff1f2!important;

  border-color:#fda4af!important;

}

/* Aksi simpan dibuat navy lembut agar konsisten dengan permukaan profil yang netral. */

.app.member-app .member-profile-edit-page button.member-save-profile-button{

  background:linear-gradient(135deg,#1d4ed8,#1e40af)!important;

  color:#ffffff!important;

  border:0!important;

}

.app.member-app .member-profile-edit-page .member-photo-action{

  background:#eff6ff!important;

  color:#1d4ed8!important;

  border:1px solid #dbeafe!important;

  box-shadow:none!important;

}

.app.member-app .member-profile-edit-page .member-photo-action.member-photo-action-kta{

  background:#f8fafc!important;

  color:#475569!important;

  border:1px solid #e2e8f0!important;

}

@media(max-width:420px){

  .app.member-app button.member-profile-menu-card{min-height:104px;}

}





/* =========================================================

   Revisi 118 — Riwayat Anggota Netral

   Riwayat berada pada member-profile-detail-page sehingga

   perlu override tersendiri agar tidak mengikuti tombol merah global.

   ========================================================= */

.app.member-app .member-profile-detail-page .member-profile-history-wrap{

  margin-top:0;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap .profile-accordion-card{

  padding:0!important;

  overflow:hidden!important;

  background:#ffffff!important;

  border:1px solid #e2e8f0!important;

  border-radius:14px!important;

  box-shadow:0 5px 14px rgba(15,23,42,.04)!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap button.profile-accordion-header{

  width:100%!important;

  display:flex!important;

  align-items:center!important;

  justify-content:space-between!important;

  padding:14px 15px!important;

  background:#ffffff!important;

  color:#172033!important;

  border:0!important;

  border-left:3px solid #cbd5e1!important;

  border-radius:0!important;

  box-shadow:none!important;

  filter:none!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap button.profile-accordion-header:hover,

.app.member-app .member-profile-detail-page .member-profile-history-wrap button.profile-accordion-header.active{

  background:#f8fafc!important;

  color:#172033!important;

  border-left-color:#60a5fa!important;

  box-shadow:none!important;

  filter:none!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap button.profile-accordion-header.active{

  border-bottom:1px solid #e2e8f0!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap .profile-accordion-header span{

  color:#172033!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap .accordion-arrow{

  color:#64748b!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap .profile-accordion-content{

  padding:14px!important;

  background:#ffffff!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap .table-responsive{

  border-color:#e2e8f0!important;

  background:#ffffff!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap table{

  background:#ffffff!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap th,

.app.member-app .member-profile-detail-page .member-profile-history-wrap thead tr{

  background:#f8fafc!important;

  color:#334155!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap th{

  border-bottom-color:#e2e8f0!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap td{

  color:#334155!important;

  border-bottom-color:#eef2f7!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap tr:hover td{

  background:#fafcff!important;

}

/* Status sertifikat dibuat hijau lembut atau abu netral, bukan blok merah. */

.app.member-app .member-profile-detail-page .member-profile-history-wrap .approval-status.approval-approved{

  background:#ecfdf5!important;

  color:#047857!important;

  border:1px solid #a7f3d0!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap .approval-status.approval-rejected{

  background:#f8fafc!important;

  color:#475569!important;

  border:1px solid #dbe3ec!important;

}

.app.member-app .member-profile-detail-page .member-profile-history-wrap a{

  color:#2563eb!important;

}





/* =========================================================

   Revisi 119 — Akses Cepat Anggota tanpa duplikasi fungsi

   Beranda mempertahankan grid 2x2: Kartu, Profil, Status, Bantuan.

   Ubah Profil dan Ubah Sandi hanya tersedia di menu Profil.

   ========================================================= */

/* Old duplicate member action card styles removed to allow modern grid and aesthetic card layouts to render correctly */

.app.member-app .member-home-quick-access .member-quick-card-kta .quick-icon{background:#eff6ff!important;color:#2563eb!important;}

.app.member-app .member-home-quick-access .member-quick-card-profile .quick-icon{background:#ecfdf5!important;color:#059669!important;}

.app.member-app .member-home-quick-access .member-quick-card-status .quick-icon{background:#fff7ed!important;color:#ea580c!important;}

.app.member-app .member-home-quick-access .member-quick-card-help .quick-icon{background:#faf5ff!important;color:#7e22ce!important;}

.app.member-app .member-quick-logout-link{

  width:100%!important;

  margin-top:12px!important;

  min-height:42px!important;

  display:flex!important;

  align-items:center!important;

  justify-content:center!important;

  gap:7px!important;

  padding:10px 12px!important;

  background:#ffffff!important;

  color:#b4233f!important;

  border:1px solid #f1c6ce!important;

  border-radius:12px!important;

  box-shadow:none!important;

  font-size:12px!important;

  font-weight:800!important;

}

.app.member-app .member-quick-logout-link:hover{

  background:#fff7f8!important;

  border-color:#e9aebb!important;

  filter:none!important;

}

.app.member-app .member-quick-logout-link svg{color:#b4233f!important;}



/* Status Pengajuan anggota: netral dan selaras dengan kartu akses cepat. */

.app.member-app .member-activity-page{

  background:#ffffff!important;

  border:1px solid #e2e8f0!important;

  box-shadow:0 7px 18px rgba(15,23,42,.05)!important;

}

.app.member-app .member-activity-page h3{color:#172033!important;}

.app.member-app .member-activity-page .approval-switch{flex-wrap:wrap!important;}

.app.member-app .member-activity-page button.member-activity-tab{

  background:#f8fafc!important;

  color:#475569!important;

  border:1px solid #dbe3ec!important;

  box-shadow:none!important;

  padding:8px 10px!important;

  font-size:12px!important;

}

.app.member-app .member-activity-page button.member-activity-tab.active,

.app.member-app .member-activity-page button.member-activity-tab:hover{

  background:#eff6ff!important;

  color:#1d4ed8!important;

  border-color:#bfdbfe!important;

  filter:none!important;

}



/* Halaman Bantuan PUK dibuat netral agar nyaman dibaca. */

.app.member-app .member-help-page{padding-bottom:20px;}

.app.member-app .member-help-heading{margin-bottom:12px;}

.app.member-app .member-help-heading h3{margin:0 0 4px;color:#172033!important;font-size:17px;}

.app.member-app .member-help-heading p{margin:0;color:#64748b;font-size:12px;line-height:1.5;}

.app.member-app .member-help-card,

.app.member-app .member-help-detail-card{

  background:#ffffff!important;

  border:1px solid #e2e8f0!important;

  box-shadow:0 7px 18px rgba(15,23,42,.05)!important;

}

.app.member-app .member-help-card{

  display:flex!important;

  align-items:center!important;

  gap:12px!important;

  padding:14px!important;

}

.app.member-app .member-help-icon{

  width:52px;

  height:52px;

  display:flex;

  align-items:center;

  justify-content:center;

  flex:0 0 auto;

  border-radius:16px;

  background:#faf5ff;

  color:#7e22ce;

}

.app.member-app .member-help-copy span{display:block;color:#64748b;font-size:11px;font-weight:700;}

.app.member-app .member-help-copy h4{margin:3px 0 0;color:#172033;font-size:15px;line-height:1.35;}

.app.member-app .member-help-detail-card{padding:0!important;overflow:hidden!important;}

.app.member-app .member-help-row{

  display:grid;

  grid-template-columns:minmax(112px,.8fr) minmax(0,1.2fr);

  gap:12px;

  padding:13px 14px;

  border-bottom:1px solid #eef2f7;

}

.app.member-app .member-help-row:last-of-type{border-bottom:0;}

.app.member-app .member-help-row span{color:#64748b;font-size:12px;}

.app.member-app .member-help-row strong{color:#172033;font-size:12px;line-height:1.45;text-align:right;overflow-wrap:anywhere;}

.app.member-app .member-help-actions{display:flex;gap:8px;flex-wrap:wrap;padding:14px;border-top:1px solid #eef2f7;}

.app.member-app .member-help-action{

  display:inline-flex!important;

  align-items:center!important;

  gap:7px!important;

  padding:9px 11px!important;

  border-radius:10px!important;

  background:#f8fafc!important;

  color:#475569!important;

  border:1px solid #dbe3ec!important;

  text-decoration:none!important;

  font-size:12px!important;

  font-weight:800!important;

}

.app.member-app .member-help-action:hover{background:#eff6ff!important;color:#1d4ed8!important;border-color:#bfdbfe!important;}

.app.member-app .member-help-action-primary{background:#ecfdf5!important;color:#047857!important;border-color:#a7f3d0!important;}

.app.member-app .member-help-action-primary:hover{background:#d1fae5!important;color:#047857!important;border-color:#6ee7b7!important;}

.app.member-app .member-help-empty{margin:0;padding:14px;color:#64748b;font-size:12px;line-height:1.5;border-top:1px solid #eef2f7;}

@media(max-width:420px){

  .app.member-app .member-home-quick-access button.member-action-card{min-height:110px!important;padding:12px 8px!important;}

  .app.member-app .member-home-quick-access button.member-action-card .quick-icon{width:48px!important;height:48px!important;}

  .app.member-app .member-home-quick-access button.member-action-card .quick-icon svg{width:30px!important;height:30px!important;}

  .app.member-app .member-help-row{grid-template-columns:1fr;gap:3px;}

  .app.member-app .member-help-row strong{text-align:left;}

}





/* Revisi 120 — Header Anggota: ikon lonceng dan logout ringkas + panel notifikasi portal */

.app.member-app .member-header-actions{

  display:flex!important;

  align-items:center!important;

  justify-content:flex-end!important;

  gap:8px!important;

  flex-shrink:0!important;

}

.app.member-app .member-header-action-btn{

  width:40px!important;

  height:40px!important;

  min-width:40px!important;

  padding:0!important;

  border-radius:12px!important;

  display:grid!important;

  place-items:center!important;

  position:relative!important;

  background:#ffffff!important;

  box-shadow:0 4px 12px rgba(15,23,42,.05)!important;

}

.app.member-app .member-header-action-btn svg{

  width:20px!important;

  height:20px!important;

  stroke-width:2.35!important;

}

.app.member-app .member-notification-btn,
.member-notification-btn,
.member-header-action-btn.member-notification-btn {
  border: 1px solid #facc15 !important;
  color: #eab308 !important;
  background: rgba(254, 240, 138, 0.18) !important;
}

.app.member-app .member-notification-btn svg,
.member-notification-btn svg {
  stroke: #eab308 !important;
  fill: rgba(253, 224, 71, 0.35) !important;
}

.app.member-app .member-notification-btn:hover,
.member-notification-btn:hover {
  background: rgba(254, 240, 138, 0.35) !important;
  border-color: #eab308 !important;
  filter: none !important;
}

.app.member-app .member-logout-header-btn{

  border:1px solid #f1c7cf!important;

  color:#b4233f!important;

}

.app.member-app .member-logout-header-btn:hover{

  background:#fff7f8!important;

  border-color:#e7a8b5!important;

  filter:none!important;

}

.app.member-app .member-notification-count{

  top:-5px!important;

  right:-5px!important;

  min-width:17px!important;

  height:17px!important;

  font-size:9px!important;

}

#memberNotificationPortal{

  position:relative;

  z-index:1200;

}

body.member-notification-portal-active .notification-backdrop:not(.hidden){

  display:block!important;

  position:fixed!important;

  inset:0!important;

  z-index:1190!important;

  background:rgba(2,12,27,.22)!important;

}

body.member-notification-portal-active .notification-panel:not(.hidden){

  position:fixed!important;

  top:76px!important;

  right:18px!important;

  left:auto!important;

  bottom:auto!important;

  width:min(360px,calc(100vw - 28px))!important;

  z-index:1200!important;

}

@media screen and (max-width:700px){

  body.member-notification-portal-active .notification-backdrop:not(.hidden){

    background:rgba(2,12,27,.58)!important;

  }

  body.member-notification-portal-active .notification-panel:not(.hidden){

    top:50%!important;

    left:50%!important;

    right:auto!important;

    transform:translate(-50%,-50%)!important;

    width:calc(100vw - 28px)!important;

    max-width:420px!important;

  }

}

/* Pengaman untuk DOM cache lama: logout lama tidak lagi tampil di bawah grid. */

.app.member-app .member-quick-logout-link,

.app.member-app .member-profile-logout-link{

  display:none!important;

}



/* Revisi 121 — Profil PUK & Laporan PUK ringkas/dinamis */

.puk-profile-summary .section-header,

.puk-profile-editor .section-header,

.report-data-header{

  gap:14px;

  align-items:flex-start;

}

.puk-profile-summary .section-header h3,

.puk-profile-editor .section-header h3,

.report-data-header h3{

  margin-bottom:5px;

}

.puk-kta-notice{

  margin:0 0 16px;

  background:#eef6ff;

  border-color:#bfd8f5;

  color:#173e69;

}

.puk-info-grid > div{

  background:#f8fafc;

  border:1px solid #e5edf5;

  border-radius:12px;

  padding:12px;

}

.puk-info-grid b{

  display:block;

  color:#334155;

  font-size:12px;

}

.puk-info-grid p{

  margin:5px 0 0;

  color:#0f172a;

  font-size:14px;

}

.puk-address-highlight{

  margin-top:14px;

  display:grid;

  gap:5px;

  padding:14px;

  border:1px solid #c9dcef;

  border-radius:14px;

  background:#f2f8ff;

}

.puk-address-highlight span{

  color:#4b6684;

  font-size:12px;

  font-weight:800;

}

.puk-address-highlight strong{

  color:#0f2c4e;

  line-height:1.5;

}

.puk-asset-grid{

  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:12px;

}

.puk-asset-box{

  min-height:118px;

  display:grid;

  grid-template-rows:auto 1fr;

  gap:10px;

  padding:12px;

  border:1px solid #e2eaf2;

  border-radius:14px;

  background:#fbfdff;

  text-align:center;

}

.puk-asset-box b{

  color:#334155;

  font-size:12px;

}

.puk-asset-box > div{

  display:grid;

  place-items:center;

}

.puk-asset-preview{max-height:54px;max-width:100%;object-fit:contain;border:1px solid var(--line);background:#fff;border-radius:6px;padding:2px}

.puk-stamp-preview{max-height:68px;max-width:100%;object-fit:contain;border:1px solid var(--line);background:#fff;border-radius:6px;padding:2px}



.report-summary-grid{

  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:12px;

  margin:0 0 16px;

}

.report-summary-grid .stat{

  min-height:102px;

  margin:0;

  padding:14px 15px;

  border-left-width:4px;

  border-radius:14px;

}

.report-summary-grid .stat small{

  font-size:12px;

}

.report-summary-grid .stat b{

  margin-top:5px;

  font-size:27px;

}

.report-data-card{

  margin-top:16px;

}

.report-data-count{

  display:inline-flex;

  align-items:center;

  min-height:28px;

  padding:4px 10px;

  border-radius:999px;

  background:#edf5ff;

  color:#1f5c96;

  font-size:12px;

  font-weight:800;

  white-space:nowrap;

}

.report-table-controls{

  display:grid;

  grid-template-columns:minmax(200px,1.8fr) minmax(140px,.7fr) minmax(120px,.55fr);

  gap:10px;

  align-items:end;

  margin:14px 0;

}

.report-search-field,

.report-filter-field{

  display:grid;

  gap:5px;

}

.report-search-field span,

.report-filter-field span{

  color:#64748b;

  font-size:11px;

  font-weight:800;

}

.report-search-field input,

.report-filter-field select{

  width:100%;

  min-height:40px;

  padding:9px 11px;

  border:1px solid #d8e2ec;

  border-radius:10px;

  background:#fff;

  color:#0f172a;

}

.report-readonly-table th{white-space:nowrap}

.report-readonly-table td{vertical-align:middle}

.report-subvalue{display:block;margin-top:3px;color:#64748b;font-size:11px;font-weight:600}

.report-pagination{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  padding-top:12px;

  color:#64748b;

  font-size:12px;

}

.report-pagination-actions{display:flex;align-items:center;gap:8px;white-space:nowrap}

.report-pagination-actions button:disabled{opacity:.48;cursor:not-allowed;filter:none}

@media (max-width:720px){

  .puk-asset-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}

  .puk-asset-box{min-height:102px;padding:9px 6px;font-size:11px}

  .puk-asset-preview{max-height:42px}

  .puk-stamp-preview{max-height:50px}

  .report-table-controls{grid-template-columns:1fr 1fr}

  .report-search-field{grid-column:1/-1}

  .report-pagination{align-items:flex-start;flex-direction:column}

}

@media (max-width:420px){

  .report-summary-grid{gap:10px}

  .report-summary-grid .stat{min-height:92px;padding:12px}

  .report-summary-grid .stat b{font-size:24px}

  .puk-asset-grid{grid-template-columns:1fr}

  .report-table-controls{grid-template-columns:1fr}

  .report-search-field{grid-column:auto}

}





/* Revisi 122 — Pemilihan PUK eksplisit bagi Superadmin pada Profil PUK & KTA */

.puk-selector-intro h3{margin:0 0 8px;color:#0f2444;}

.puk-selector-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px;}

.puk-selector-card{

  min-height:168px;

  padding:18px;

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  text-align:left;

  gap:8px;

  color:#0f2444;

  background:linear-gradient(135deg,#ffffff 0%,#f4f8ff 100%)!important;

  border:1px solid #dbe7f7!important;

  box-shadow:0 8px 20px rgba(15,23,42,.05);

}

.puk-selector-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(15,23,42,.10);}

.puk-selector-card:focus-visible{outline:3px solid rgba(37,99,235,.22);outline-offset:2px;}

.puk-selector-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#e8f0ff;color:#235ea9;}

.puk-selector-card strong{font-size:15px;line-height:1.3;color:#0f2444;}

.puk-selector-card small{font-size:12px;color:#64748b;line-height:1.4;}

.puk-selector-card em{margin-top:auto;font-size:12px;font-style:normal;font-weight:800;color:#235ea9;}

@media(max-width:640px){.puk-selector-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.puk-selector-card{min-height:150px;padding:14px;}.puk-selector-icon{width:42px;height:42px;}}





/* Revisi 124 — Dashboard tetap tampil apabila satu sumber data opsional bermasalah */

.dashboard-data-warning{

  margin:-4px 0 16px;

  padding:10px 12px;

  border:1px solid #f4d58d;

  border-radius:12px;

  background:#fff9e8;

  color:#7c5b00;

  font-size:12px;

  font-weight:700;

  line-height:1.45;

}

.dashboard-load-fallback{

  max-width:620px;

  margin:40px auto;

  text-align:center;

}

.dashboard-load-fallback h3{ margin-bottom:8px; }

.dashboard-load-fallback .actions{ justify-content:center; margin-top:16px; }

.dashboard-load-detail{

  margin:12px 0 0;

  padding:10px;

  border-radius:10px;

  background:#f8fafc;

  color:#475569;

  font-size:12px;

  line-height:1.45;

  overflow-wrap:anywhere;

}



/* PC/Desktop Layout Grid & Card Adjustments - Aesthetic square cards */

@media screen and (min-width: 901px) {

  .quick-access-grid,

  .app.member-app .member-home-quick-access .quick-access-grid {

    grid-template-columns: repeat(auto-fill, minmax(150px, 180px)) !important;

    gap: 16px !important;

    justify-content: flex-start !important;

  }



  .admin-dashboard-grid {

    grid-template-columns: repeat(4, 180px) !important;

    gap: 16px !important;

    justify-content: center !important;

  }



  .quick-card:not(.quick-logout-card),

  .admin-action-card,

  .admin-summary-card,

  .app.member-app .member-home-quick-access button.member-action-card:not(.quick-logout-card) {

    aspect-ratio: 1 / 1 !important;

    min-height: unset !important;

    height: auto !important;

    max-width: 180px !important;

    padding: 16px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    box-sizing: border-box !important;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

  }



  .quick-card:not(.quick-logout-card):not(.admin-summary-card):hover,

  .admin-action-card:hover,

  .app.member-app .member-home-quick-access button.member-action-card:not(.quick-logout-card):hover {

    transform: translateY(-4px) scale(1.02) !important;

    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;

  }



  /* Center icons and labels inside action/summary cards for consistent grid look */

  .admin-action-card .quick-icon,

  .admin-summary-card .quick-icon {

    margin: 0 auto 8px !important;

  }

  

  .admin-action-card .quick-label,

  .admin-summary-card .quick-label {

    text-align: center !important;

    margin-bottom: 4px !important;

  }

  

  .admin-quick-value {

    text-align: center !important;

    margin-top: 4px !important;

  }

}



/* Custom Searchable Select (Combobox) styling */

.searchable-select-wrapper {

  position: relative;

  width: 100%;

  min-width: 0;

}

.searchable-select-wrapper:has(.open) {

  z-index: 9999;

}

.searchable-select-trigger {

  display: flex;

  justify-content: space-between;

  align-items: center;

  width: 100%;

  min-width: 0;

  border: 1px solid var(--line);

  border-radius: 12px;

  padding: 10px 14px;

  background: #fff;

  cursor: pointer;

  font-size: 13px;

  font-weight: 700;

  color: var(--text);

  min-height: 40px;

  user-select: none;

  transition: border-color 0.2s ease, box-shadow 0.2s ease;

}

.searchable-select-trigger:hover {

  border-color: #cbd5e1;

}

.searchable-select-trigger.open {

  border-color: var(--blue);

  box-shadow: 0 0 0 3px rgba(11, 79, 156, 0.12);

  border-bottom-left-radius: 0;

  border-bottom-right-radius: 0;

}

.searchable-select-label {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  flex: 1;

  text-align: left;

  min-width: 0;

}

.searchable-select-arrow {

  font-size: 9px;

  color: var(--muted);

  margin-left: 8px;

  transition: transform 0.2s ease;

}

.searchable-select-trigger.open .searchable-select-arrow {

  transform: rotate(180deg);

}



.searchable-select-dropdown {

  position: absolute;

  top: 100%;

  left: 0;

  right: 0;

  background: #fff;

  border: 1px solid #cbd5e1;

  border-top: none;

  border-bottom-left-radius: 12px;

  border-bottom-right-radius: 12px;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

  z-index: 1000;

  overflow: hidden;

  display: flex;

  flex-direction: column;

}

.searchable-select-dropdown.hidden {

  display: none !important;

}



.searchable-select-search-box {

  padding: 8px;

  border-bottom: 1px solid var(--line);

  background: #f8fafc;

}

.searchable-select-search-input {

  width: 100%;

  padding: 8px 12px;

  border: 1px solid var(--line);

  border-radius: 8px;

  font-size: 12px;

  outline: none;

  background: #fff;

}

.searchable-select-search-input:focus {

  border-color: var(--blue);

}



.searchable-select-options {

  max-height: 200px;

  overflow-y: auto;

}

.searchable-select-option {

  padding: 10px 14px;

  font-size: 13px;

  font-weight: 600;

  color: #334155;

  cursor: pointer;

  text-align: left;

  transition: background 0.15s ease;

}

.searchable-select-option:hover {

  background: #f1f5f9;

}

.searchable-select-option.selected {

  background: #eff6ff;

  color: var(--blue);

  font-weight: 800;

}



/* =========================================================

   Aesthetic Mobile Grid Card layout (HP Tampilan Dinamis & Hidup)

   ========================================================= */

@media screen and (max-width: 900px) {

  /* Layout Grid: 4 columns on mobile exactly like the screenshot */

  .quick-access-grid,

  .app.member-app .member-home-quick-access .quick-access-grid,

  .admin-dashboard-grid {

    display: grid !important;

    grid-template-columns: repeat(4, 1fr) !important;

    gap: 16px 8px !important; /* more vertical gap, tighter horizontal */

    width: 100% !important;

    justify-content: space-between !important;

    box-sizing: border-box !important;

  }



  /* Reset Card Box Styling to make them flat circular buttons with label below */

  .quick-card,

  .admin-action-card,

  .admin-summary-card,

  .app.member-app .member-home-quick-access button.member-action-card {

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    padding: 4px 2px !important;

    margin: 0 !important;

    min-height: unset !important;

    height: auto !important;

    aspect-ratio: auto !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: flex-start !important;

    text-align: center !important;

    border-radius: 0 !important;

    position: relative !important;

    transition: transform 0.2s ease, opacity 0.2s ease !important;

    -webkit-tap-highlight-color: transparent !important;

  }



  /* Active tap feedback */

  .quick-card:active,

  .admin-action-card:active,

  .admin-summary-card:active,

  .app.member-app .member-home-quick-access button.member-action-card:active {

    transform: scale(0.92) !important;

    opacity: 0.8 !important;

  }



  /* Icon wrapper: perfect circles with premium gradients & dropshadows */

  .quick-card .quick-icon,

  .admin-action-card .quick-icon,

  .admin-summary-card .quick-icon,

  .app.member-app .member-home-quick-access button.member-action-card .quick-icon {

    width: 58px !important;

    height: 58px !important;

    border-radius: 50% !important; /* Perfect circle */

    margin: 0 auto 8px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08) !important;

    transition: all 0.2s ease !important;

    flex-shrink: 0 !important;

  }



  /* Premium theme/color options for circles */

  /* Blue tone */

  .card-blue .quick-icon,

  .member-quick-card-kta .quick-icon,

  .quick-card.card-blue .quick-icon {

    background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;

    color: #2563eb !important;

    border: 1px solid rgba(37, 99, 235, 0.15) !important;

  }

  

  /* Green tone */

  .card-green .quick-icon,

  .member-quick-card-profile .quick-icon,

  .quick-card.card-green .quick-icon {

    background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;

    color: #059669 !important;

    border: 1px solid rgba(5, 150, 105, 0.15) !important;

  }



  /* Orange/Yellow/Red tone */

  .card-orange .quick-icon,

  .member-quick-card-status .quick-icon,

  .quick-card.card-orange .quick-icon {

    background: linear-gradient(135deg, #fff7ed, #ffedd5) !important;

    color: #ea580c !important;

    border: 1px solid rgba(234, 88, 12, 0.15) !important;

  }



  /* Purple/Indigo/Pink tone */

  .card-purple .quick-icon,

  .member-quick-card-help .quick-icon,

  .quick-card.card-purple .quick-icon {

    background: linear-gradient(135deg, #faf5ff, #f3e8ff) !important;

    color: #7e22ce !important;

    border: 1px solid rgba(126, 34, 206, 0.15) !important;

  }



  /* Make SVG icons scale beautifully inside the 58px circles */

  .quick-card .quick-icon svg,

  .admin-action-card .quick-icon svg,

  .admin-summary-card .quick-icon svg,

  .app.member-app .member-home-quick-access button.member-action-card .quick-icon svg {

    width: 26px !important;

    height: 26px !important;

    stroke-width: 2.2 !important;

  }



  /* Labels placed underneath the circular icon, clean, micro-animated */

  .quick-card .quick-label,

  .admin-action-card .quick-label,

  .admin-summary-card .quick-label,

  .app.member-app .member-home-quick-access button.member-action-card .quick-label {

    font-size: 11px !important;

    font-weight: 700 !important;

    color: #1e293b !important;

    line-height: 1.3 !important;

    margin: 0 !important;

    padding: 0 2px !important;

    white-space: normal !important;

    word-break: break-word !important;

    text-align: center !important;

  }



  /* Specific styling to ensure summary value is rendered cleanly under icon */

  .admin-summary-card .admin-quick-value {

    font-size: 14px !important;

    font-weight: 800 !important;

    color: #0f172a !important;

    margin: 4px 0 1px 0 !important;

    text-align: center !important;

    line-height: 1 !important;

  }

  

  .admin-summary-card .quick-label {

    font-size: 10px !important;

    color: #64748b !important;

    font-weight: 600 !important;

  }



  /* Hide descriptions on mobile screens to maintain clean layout */

  .admin-quick-desc {

    display: none !important;

  }



  /* Align badges perfectly on the top-right of the circle icon */

  .admin-quick-badge,

  .admin-action-card .admin-quick-badge {

    position: absolute !important;

    top: -2px !important;

    right: calc(50% - 29px) !important;

    background: #ef4444 !important;

    color: #ffffff !important;

    font-size: 8px !important;

    font-weight: 800 !important;

    padding: 2px 6px !important;

    border-radius: 99px !important;

    border: 1.5px solid #ffffff !important;

    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4) !important;

    line-height: 1 !important;

    transform: none !important;

  }



  /* Logout button styling at the bottom of the grid */

  .app.member-app .quick-card.member-action-card.quick-logout-card {

    grid-column: 1 / -1 !important;

    width: 100% !important;

    min-height: 48px !important;

    margin-top: 12px !important;

    border-radius: 12px !important;

    border: 1px solid #fee2e2 !important;

    background: #fff5f5 !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    padding: 10px 16px !important;

    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.05) !important;

  }

  .app.member-app .quick-card.member-action-card.quick-logout-card:active {

    background: #fef2f2 !important;

    transform: scale(0.98) !important;

  }

  .app.member-app .quick-card.member-action-card.quick-logout-card .quick-icon {

    width: unset !important;

    height: unset !important;

    background: transparent !important;

    color: #dc2626 !important;

    border: none !important;

    box-shadow: none !important;

    margin: 0 !important;

  }

  .app.member-app .quick-card.member-action-card.quick-logout-card .quick-icon svg {

    width: 18px !important;

    height: 18px !important;

  }

  .app.member-app .quick-card.member-action-card.quick-logout-card .quick-label {

    color: #dc2626 !important;

    font-size: 13px !important;

    font-weight: 800 !important;

  }

}









/* =========================================================

   Revisi 131 — Mobile Launcher Grid untuk Admin, Pusat, dan Anggota

   Tujuan: menu mobile terasa seperti aplikasi native; ikon hidup,

   rapat, mudah dipindai, dan label tetap terbaca pada layar kecil.

   Berlaku hanya untuk dashboard/akses cepat dan tidak mengubah

   tabel, formulir, maupun tampilan desktop.

   ========================================================= */

@media screen and (max-width: 900px) {

  /* Ruang konten dibuat nyaman untuk launcher grid dan bottom navigation anggota. */

  .content{

    padding:16px 14px 30px!important;

  }

  .app.member-app .content{

    padding-bottom:104px!important;

  }



  /* Hero tetap menjadi kartu utama seperti banner pada aplikasi mobile. */

  .admin-dashboard-hero{

    min-height:126px!important;

    padding:18px 18px!important;

    border-radius:22px!important;

    background:

      radial-gradient(circle at 90% 16%,rgba(255,255,255,.19),transparent 34%),

      linear-gradient(135deg,#075a9c 0%,#0d3c78 58%,#082a58 100%)!important;

    box-shadow:0 14px 26px rgba(8,51,95,.16)!important;

  }

  .admin-dashboard-hero h2{

    max-width:235px!important;

    font-size:19px!important;

    line-height:1.22!important;

  }

  .admin-dashboard-hero p{

    max-width:260px!important;

    font-size:12px!important;

    line-height:1.45!important;

  }

  .admin-dashboard-role{

    margin-top:8px!important;

    font-size:11px!important;

  }



  /* Pemisah bagian ringkas agar halaman tidak terasa penuh atau datar. */

  .quick-access-section,

  .admin-dashboard-section{

    margin-bottom:26px!important;

  }

  .quick-access-section h3,

  .info-section h3{

    display:flex!important;

    align-items:center!important;

    gap:8px!important;

    margin:0 0 13px!important;

    color:#172033!important;

    font-size:15px!important;

    line-height:1.25!important;

  }

  .quick-access-section h3::before{

    content:'';

    width:4px;

    height:17px;

    border-radius:999px;

    background:linear-gradient(180deg,#2f98dc,#1267bd);

    flex:0 0 auto;

  }

  .app.member-app .member-home-quick-access h3::before{

    background:linear-gradient(180deg,#16a34a,#087a3d);

  }



  /* Empat kartu per baris seperti launcher aplikasi; tiap kartu lebih konsisten. */

  .quick-access-grid,

  .admin-dashboard-grid,

  .app.member-app .member-home-quick-access .quick-access-grid{

    display:grid!important;

    grid-template-columns:repeat(4,minmax(0,1fr))!important;

    column-gap:8px!important;

    row-gap:20px!important;

    width:100%!important;

    align-items:start!important;

    justify-content:stretch!important;

  }

  .admin-summary-grid{

    row-gap:14px!important;

  }



  /* Tile bersih: ikon bundar + tulisan di bawah, tanpa kotak besar. */

  .quick-card,

  .admin-action-card,

  .admin-summary-card,

  .app.member-app .member-home-quick-access button.member-action-card{

    appearance:none!important;

    width:100%!important;

    min-width:0!important;

    min-height:0!important;

    height:auto!important;

    margin:0!important;

    padding:0 1px!important;

    border:0!important;

    border-radius:0!important;

    background:transparent!important;

    box-shadow:none!important;

    color:#172033!important;

    display:flex!important;

    flex-direction:column!important;

    align-items:center!important;

    justify-content:flex-start!important;

    gap:0!important;

    position:relative!important;

    text-align:center!important;

    cursor:pointer!important;

    -webkit-tap-highlight-color:transparent!important;

    transition:transform .18s ease,opacity .18s ease!important;

  }

  .admin-summary-card{

    cursor:default!important;

  }

  .quick-card:hover,

  .admin-action-card:hover,

  .admin-summary-card:hover,

  .app.member-app .member-home-quick-access button.member-action-card:hover{

    transform:translateY(-2px)!important;

    background:transparent!important;

    box-shadow:none!important;

    filter:none!important;

  }

  .quick-card:active,

  .admin-action-card:active,

  .app.member-app .member-home-quick-access button.member-action-card:active{

    transform:scale(.93)!important;

    opacity:.78!important;

  }



  /* Ukuran responsif: normal 60 px, tetap aman dan terbaca pada layar 320 px. */

  .quick-card .quick-icon,

  .admin-action-card .quick-icon,

  .admin-summary-card .quick-icon,

  .app.member-app .member-home-quick-access button.member-action-card .quick-icon{

    width:clamp(52px,15vw,62px)!important;

    height:clamp(52px,15vw,62px)!important;

    min-width:0!important;

    min-height:0!important;

    margin:0 auto 8px!important;

    border-radius:50%!important;

    display:grid!important;

    place-items:center!important;

    box-shadow:0 7px 15px rgba(15,23,42,.10)!important;

    position:relative!important;

    overflow:visible!important;

  }

  .quick-card .quick-icon::after,

  .admin-action-card .quick-icon::after,

  .admin-summary-card .quick-icon::after,

  .app.member-app .member-home-quick-access button.member-action-card .quick-icon::after{

    content:'';

    position:absolute;

    inset:4px auto auto 8px;

    width:40%;

    height:20%;

    border-radius:50%;

    background:rgba(255,255,255,.56);

    transform:rotate(-22deg);

    pointer-events:none;

  }

  .quick-card .quick-icon svg,

  .admin-action-card .quick-icon svg,

  .admin-summary-card .quick-icon svg,

  .app.member-app .member-home-quick-access button.member-action-card .quick-icon svg{

    width:28px!important;

    height:28px!important;

    stroke-width:2.25!important;

    position:relative!important;

    z-index:1!important;

  }



  /* Palet lembut agar tiap fungsi cepat dikenali, tetap selaras dengan tema aplikasi. */

  .card-blue .quick-icon,

  .member-quick-card-kta .quick-icon,

  .quick-card.card-blue .quick-icon{

    background:linear-gradient(135deg,#dff3ff,#c5e8ff)!important;

    color:#087ac0!important;

    border:1px solid rgba(8,122,192,.14)!important;

  }

  .card-green .quick-icon,

  .member-quick-card-profile .quick-icon,

  .quick-card.card-green .quick-icon{

    background:linear-gradient(135deg,#dff9ee,#c8f1dd)!important;

    color:#07824a!important;

    border:1px solid rgba(7,130,74,.14)!important;

  }

  .card-orange .quick-icon,

  .member-quick-card-status .quick-icon,

  .quick-card.card-orange .quick-icon{

    background:linear-gradient(135deg,#fff1de,#ffe2bc)!important;

    color:#dd7212!important;

    border:1px solid rgba(221,114,18,.14)!important;

  }

  .card-purple .quick-icon,

  .member-quick-card-help .quick-icon,

  .quick-card.card-purple .quick-icon{

    background:linear-gradient(135deg,#f2e8ff,#e6d3ff)!important;

    color:#7c36bd!important;

    border:1px solid rgba(124,54,189,.14)!important;

  }



  /* Label terkunci ke tinggi dua baris: baris ikon tidak terlihat bergeser. */

  .quick-card .quick-label,

  .admin-action-card .quick-label,

  .admin-summary-card .quick-label,

  .app.member-app .member-home-quick-access button.member-action-card .quick-label{

    min-height:2.72em!important;

    display:flex!important;

    align-items:flex-start!important;

    justify-content:center!important;

    width:100%!important;

    margin:0!important;

    padding:0 1px!important;

    color:#1f2937!important;

    font-size:11px!important;

    font-weight:750!important;

    line-height:1.35!important;

    letter-spacing:-.01em!important;

    text-align:center!important;

    white-space:normal!important;

    overflow-wrap:anywhere!important;

    word-break:normal!important;

  }



  /* Nilai ringkasan dipertahankan kecil namun jelas, tidak membuat ikon terlalu besar. */

  .admin-summary-card .admin-quick-value{

    order:3!important;

    width:100%!important;

    margin:1px 0 0!important;

    color:#0f3e72!important;

    font-size:15px!important;

    font-weight:900!important;

    line-height:1.05!important;

  }

  .admin-summary-card .quick-label{

    min-height:1.35em!important;

    color:#5d6b7c!important;

    font-size:9.5px!important;

    font-weight:700!important;

  }



  /* Badge ditempatkan di tepi lingkaran seperti notifikasi aplikasi. */

  .admin-quick-badge,

  .admin-action-card .admin-quick-badge{

    top:-3px!important;

    right:calc(50% - clamp(28px,7.5vw,31px))!important;

    min-width:19px!important;

    height:19px!important;

    padding:0 5px!important;

    display:flex!important;

    align-items:center!important;

    justify-content:center!important;

    border:2px solid #fff!important;

    border-radius:999px!important;

    background:#ef4444!important;

    color:#fff!important;

    font-size:8px!important;

    font-weight:900!important;

    line-height:1!important;

    box-shadow:0 3px 8px rgba(239,68,68,.32)!important;

    z-index:3!important;

  }



  /* Kartu akses cepat anggota tetap ada 2x2 secara fungsi, tetapi divisualkan 4 kolom jika menu bertambah. */

  .app.member-app .member-home-quick-access .member-shortcut-grid{

    row-gap:20px!important;

  }

}



/* Ponsel sangat sempit: empat kolom tetap nyaman tanpa ikon/teks terasa terlalu besar. */

@media screen and (max-width: 360px) {

  .quick-access-grid,

  .admin-dashboard-grid,

  .app.member-app .member-home-quick-access .quick-access-grid{

    column-gap:5px!important;

    row-gap:18px!important;

  }

  .quick-card .quick-icon,

  .admin-action-card .quick-icon,

  .admin-summary-card .quick-icon,

  .app.member-app .member-home-quick-access button.member-action-card .quick-icon{

    width:52px!important;

    height:52px!important;

    margin-bottom:7px!important;

  }

  .quick-card .quick-icon svg,

  .admin-action-card .quick-icon svg,

  .admin-summary-card .quick-icon svg,

  .app.member-app .member-home-quick-access button.member-action-card .quick-icon svg{

    width:25px!important;

    height:25px!important;

  }

  .quick-card .quick-label,

  .admin-action-card .quick-label,

  .admin-summary-card .quick-label,

  .app.member-app .member-home-quick-access button.member-action-card .quick-label{

    font-size:10px!important;

    line-height:1.28!important;

  }

}





/* =========================================================

   Revisi 132 — Laporan PUK: Mobile Summary Launcher Grid

   Ringkasan laporan Admin PUK dan Superadmin memakai pola

   ikon bundar + label + nilai, agar konsisten dengan dashboard.

   ========================================================= */

@media screen and (max-width:900px){

  .report-summary-launcher{

    display:grid!important;

    grid-template-columns:repeat(4,minmax(0,1fr))!important;

    column-gap:8px!important;

    row-gap:20px!important;

    width:100%!important;

    margin:4px 0 22px!important;

    align-items:start!important;

  }

  .report-summary-launcher .report-stat-tile{

    min-width:0!important;

    min-height:0!important;

    margin:0!important;

    padding:0 1px!important;

    border:0!important;

    border-radius:0!important;

    background:transparent!important;

    box-shadow:none!important;

    display:flex!important;

    flex-direction:column!important;

    align-items:center!important;

    justify-content:flex-start!important;

    text-align:center!important;

    position:relative!important;

  }

  .report-summary-launcher .report-stat-icon{

    width:clamp(52px,15vw,62px)!important;

    height:clamp(52px,15vw,62px)!important;

    margin:0 auto 8px!important;

    border-radius:50%!important;

    display:grid!important;

    place-items:center!important;

    position:relative!important;

    overflow:visible!important;

    box-shadow:0 7px 15px rgba(15,23,42,.10)!important;

  }

  .report-summary-launcher .report-stat-icon::after{

    content:'';

    position:absolute;

    inset:4px auto auto 8px;

    width:40%;

    height:20%;

    border-radius:50%;

    background:rgba(255,255,255,.56);

    transform:rotate(-22deg);

    pointer-events:none;

  }

  .report-summary-launcher .report-stat-icon svg{

    width:27px!important;

    height:27px!important;

    stroke-width:2.25!important;

    position:relative!important;

    z-index:1!important;

  }

  .report-summary-launcher .report-stat-tile small{

    min-height:2.72em!important;

    width:100%!important;

    margin:0!important;

    padding:0 1px!important;

    display:flex!important;

    align-items:flex-start!important;

    justify-content:center!important;

    color:#1f2937!important;

    font-size:10.5px!important;

    font-weight:750!important;

    line-height:1.32!important;

    text-align:center!important;

    white-space:normal!important;

    overflow-wrap:anywhere!important;

  }

  .report-summary-launcher .report-stat-tile b{

    min-height:1.15em!important;

    width:100%!important;

    margin:2px 0 0!important;

    color:#0f3e72!important;

    font-size:15px!important;

    font-weight:900!important;

    line-height:1.12!important;

    text-align:center!important;

    white-space:nowrap!important;

  }

  .report-stat-blue .report-stat-icon{

    background:linear-gradient(135deg,#dff3ff,#c5e8ff)!important;

    color:#087ac0!important;

    border:1px solid rgba(8,122,192,.14)!important;

  }

  .report-stat-green .report-stat-icon{

    background:linear-gradient(135deg,#dff9ee,#c8f1dd)!important;

    color:#07824a!important;

    border:1px solid rgba(7,130,74,.14)!important;

  }

  .report-stat-orange .report-stat-icon{

    background:linear-gradient(135deg,#fff1de,#ffe2bc)!important;

    color:#dd7212!important;

    border:1px solid rgba(221,114,18,.14)!important;

  }

  .report-stat-purple .report-stat-icon{

    background:linear-gradient(135deg,#f2e8ff,#e6d3ff)!important;

    color:#7c36bd!important;

    border:1px solid rgba(124,54,189,.14)!important;

  }

}

@media screen and (max-width:360px){

  .report-summary-launcher{

    column-gap:5px!important;

    row-gap:18px!important;

  }

  .report-summary-launcher .report-stat-icon{

    width:52px!important;

    height:52px!important;

    margin-bottom:7px!important;

  }

  .report-summary-launcher .report-stat-icon svg{

    width:25px!important;

    height:25px!important;

  }

  .report-summary-launcher .report-stat-tile small{

    font-size:9.5px!important;

    line-height:1.28!important;

  }

  .report-summary-launcher .report-stat-tile b{

    font-size:14px!important;

  }

}



/* ===== Edit Foto Profil Langsung dari Dashboard Anggota ===== */

.dashboard-avatar-container {

  position: relative;

  width: 50px;

  height: 50px;

  border-radius: 50%;

  cursor: pointer;

  overflow: hidden;

  flex-shrink: 0;

  border: 2px solid rgba(255,255,255,0.15);

  box-shadow: 0 4px 12px rgba(0,0,0,0.25);

}

.dashboard-avatar-container img.dashboard-avatar {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.dashboard-avatar-container .dashboard-avatar-hover {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.55);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transition: opacity 0.2s ease;

  z-index: 2;

}

.dashboard-avatar-container:hover .dashboard-avatar-hover {

  opacity: 1 !important;

}



/* Fix vertical stretching of form fields in grid layouts */

.field {

  align-self: start;

}





/* ===== Fix Tampilan Login pada Layar PC/Desktop (Agar Tidak Mengalami Pergeseran / Scroll Kebawah) ===== */

@media (min-width: 701px) {

  .login-page {

    height: 100vh !important;

    min-height: 100vh !important;

    max-height: 100vh !important;

    overflow: hidden !important;

    padding: 20px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 15px !important; /* Spasi aman antara form dan copyright agar tidak menumpuk */

  }

  

  .login-card {

    padding: 24px 28px !important;

    border-radius: 20px !important;

    margin: 0 !important;

    width: 410px !important;

    overflow: hidden !important;

  }



  .login-logo-container {
    margin-bottom: 12px !important;
  }

  .login-logo-container img {
    height: 92px !important;
    width: 92px !important;
  }



  .login-card h1 {

    font-size: 24px !important;

    margin-bottom: 4px !important;

  }



  .login-card p {

    font-size: 13px !important;

    line-height: 1.35 !important;

    margin-bottom: 14px !important;

  }



  .login-card input {

    padding: 11px 12px !important;

    margin: 5px 0 !important;

    font-size: 13.5px !important;

  }



  .password-wrapper {

    margin: 5px 0 !important;

  }



  .password-wrapper input {

    padding: 11px 40px 11px 12px !important;

    margin: 0 !important;

    font-size: 13.5px !important;

  }



  .login-card button {

    margin: 6px 0 !important;

    padding: 10px 12px !important;

    font-size: 13.5px !important;

  }



  .member-login-help {

    font-size: 11px !important;

    margin: 8px 0 0 !important;

    padding: 8px 10px !important;

  }



  .login-card small {

    margin-top: 6px !important;

    font-size: 11px !important;

    color: #ffffff !important;

    font-weight: 700 !important;

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;

  }



  .login-copyright {

    position: relative !important;

    left: auto !important;

    right: auto !important;

    bottom: auto !important;

    margin: 0 !important;

    text-align: center !important;

    font-size: 11px !important;

    color: rgba(255, 255, 255, 0.92) !important;

    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.48) !important;

    z-index: 2 !important;

  }

}



/* Global adjustment for login small text readability */

.login-card small {

  color: #ffffff !important;

  font-weight: 700 !important;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;

}











/* ===== Overrides for Classic (Blue) Mode in member app to replace red colors with blue ===== */

.admin-mode-classic .quick-card.member-action-card {

  background: linear-gradient(135deg, #FFFFFF 0%, #eff6ff 100%) !important;

  border: 1px solid #c8dcf5 !important;

  border-left: 4px solid #173a63 !important;

  box-shadow: 0 10px 24px rgba(23, 58, 99, 0.08) !important;

}



.admin-mode-classic .quick-card.member-action-card .quick-icon {

  background: linear-gradient(135deg, #173a63, #2e6fae) !important;

  box-shadow: 0 8px 16px rgba(23, 58, 99, 0.15) !important;

}



.admin-mode-classic .quick-card.member-action-card .quick-label {

  color: #173a63 !important;

}



.admin-mode-classic .member-photo-action {

  background: linear-gradient(135deg, #173a63, #2e6fae) !important;

  box-shadow: 0 5px 12px rgba(23, 58, 99, 0.15) !important;

}



.admin-mode-classic .dash-hero {

  background: linear-gradient(135deg, #173a63 0%, #102846 100%) !important;

}



.admin-mode-classic .stat {

  border-left-color: #173a63 !important;

}



.admin-mode-classic .stat b {

  color: #173a63 !important;

}



.admin-mode-classic th {

  background: #eff6ff !important;

  color: #173a63 !important;

}



.admin-mode-classic tr:hover td {

  background: #f5f9ff !important;

}



.admin-mode-classic button:not(.danger):not(.admin-enable) {

  background: linear-gradient(135deg, #173a63, #2e6fae) !important;

}



.admin-mode-classic button.btn-secondary,

.admin-mode-classic .btn-secondary {

  background: #eff6ff !important;

  color: #173a63 !important;

  border: 1px solid #c8dcf5 !important;

}



.admin-mode-classic .card {

  border: 1px solid #c8dcf5 !important;

  box-shadow: 0 10px 26px rgba(23, 58, 99, 0.05) !important;

}



.admin-mode-classic .card:hover {

  box-shadow: 0 14px 32px rgba(23, 58, 99, 0.08) !important;

}



.admin-mode-classic .topbar h2,

.admin-mode-classic .card h3,

.admin-mode-classic .quick-access-section h3,

.admin-mode-classic .info-section h3 {

  color: #173a63 !important;

}



.admin-mode-classic .field input:focus,

.admin-mode-classic .field select:focus,

.admin-mode-classic .field textarea:focus {

  outline: 2px solid rgba(23, 58, 99, 0.1) !important;

  border-color: #173a63 !important;

}



/* ===== Hilangkan area kecil (background & border) yang mengelilingi logo atas di sidebar ===== */

#app .sidebar .brand-panel .brand-logos,

.app .brand-panel .brand-logos,

.brand-panel .brand-logos {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  padding: 0 !important;

}



/* ===== Fitur Sembunyikan KTA (Blur) ===== */

.kta-flip-front, .kta-flip-back {

  transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;

}

.kta-flip-wrapper.kta-hidden-mode,
.kta-flip-container.kta-hidden-mode {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  filter: none !important;
}

.kta-flip-container.kta-hidden-mode .kta-flip-front,
.kta-flip-container.kta-hidden-mode .kta-flip-back {
  display: none !important;
  filter: none !important;
  opacity: 0 !important;
}



/* ===== Penyelarasan background brand-panel (logo area) atas berdasarkan mode aktif ===== */

#app.admin-mode-emerald .sidebar .brand-panel {

  background-color: #12372a !important;

  background-image: linear-gradient(145deg, #1a4c3a 0%, #12372a 100%) !important;

  border: 1px solid rgba(180, 230, 200, 0.2) !important;

}

#app.admin-mode-dark .sidebar .brand-panel {

  background-color: #18222d !important;

  background-image: linear-gradient(145deg, #222d3d 0%, #18222d 100%) !important;

  border: 1px solid rgba(200, 210, 220, 0.15) !important;

}

#app.admin-mode-classic .sidebar .brand-panel {

  background-color: #122f52 !important;

  background-image: linear-gradient(145deg, #1d4b7c 0%, #102846 100%) !important;

  border: 1px solid rgba(190, 219, 246, 0.26) !important;

}



/* ===== Sidebar Layout Optimization (Thin, Visible Scrollbar for Easy Navigation) ===== */

@media (min-width: 901px) {

  .sidebar {

    height: 100vh !important;

    overflow-y: auto !important; /* Enable scrolling for the entire sidebar */

    display: flex !important;

    flex-direction: column !important;

    scrollbar-width: thin !important; /* Firefox: thin scrollbar */

    scrollbar-color: rgba(255, 255, 255, 0.25) transparent !important;

  }

  /* Custom scrollbar for Webkit (Chrome, Safari, Edge) */

  .sidebar::-webkit-scrollbar {

    width: 6px !important;

  }

  .sidebar::-webkit-scrollbar-track {

    background: transparent !important;

  }

  .sidebar::-webkit-scrollbar-thumb {

    background-color: rgba(255, 255, 255, 0.25) !important;

    border-radius: 3px !important;

  }

  .sidebar::-webkit-scrollbar-thumb:hover {

    background-color: rgba(255, 255, 255, 0.45) !important;

  }

}



/* Sembunyikan detail nama PUK pada sidebar halaman anggota (tampilan PC) */

@media (min-width: 901px) {

  .app.member-app .sidebar-identity-detail {

    display: none !important;

  }

}





/* ===== Visual Feedback for Refresh Button ===== */

.topbar-refresh-button {

  width: 46px;

  height: 46px;

  padding: 0 !important;

  border-radius: 14px !important;

  display: grid;

  place-items: center;

  cursor: pointer;

  background: #ffffff !important;

  color: var(--admin-accent-deep, #214c7a) !important;

  border: 1px solid var(--admin-accent-line, #d7e4f3) !important;

  box-shadow: 0 4px 14px rgba(15,23,42,.06) !important;

  transition: all 0.2s ease;

  font-size: 20px;

}

.topbar-refresh-button:hover {

  background: var(--admin-accent-soft, #f2f7fc) !important;

  transform: translateY(-1px);

}

.topbar-refresh-button:active {

  transform: translateY(0);

}

.app.admin-mode-emerald .topbar-refresh-button {

  color: var(--admin-accent-deep) !important;

  border-color: var(--admin-accent-line) !important;

}

.app.admin-mode-emerald .topbar-refresh-button:hover {

  background: var(--admin-accent-soft) !important;

}

.app.admin-mode-dark .topbar-refresh-button {

  color: var(--admin-accent-deep) !important;

  border-color: var(--admin-accent-line) !important;

}

.app.admin-mode-dark .topbar-refresh-button:hover {

  background: var(--admin-accent-soft) !important;

}



@keyframes spin {

  from { transform: rotate(0deg); }

  to { transform: rotate(360deg); }

}

.topbar-refresh-button.spinning svg,

.topbar-refresh-button.spinning span {

  animation: spin 0.8s linear infinite;

}



/* ===== Warna icon refresh halaman anggota putih agar kontras dengan background gelap ===== */

.app.member-app .topbar-refresh-button {

  color: #ffffff !important;

  border-color: rgba(255, 255, 255, 0.25) !important;

  background: rgba(255, 255, 255, 0.1) !important;

  box-shadow: none !important;

}

.app.member-app .topbar-refresh-button:hover {

  background: rgba(255, 255, 255, 0.2) !important;

  border-color: rgba(255, 255, 255, 0.4) !important;

}



/* ===== theme-dark: Full Dark Mode Support (Revisi 125) ===== */

body.theme-dark {

  background: #090d16 !important;

  color: #f8fafc !important;

  --text: #f8fafc;

  --muted: #94a3b8;

  --line: #1e293b;

  --soft: #1e293b;

}



body.theme-dark .topbar h2,

body.theme-dark .section-header h3,

body.theme-dark .card h3,

body.theme-dark .modal-head h3,

body.theme-dark .member-help-heading h3,

body.theme-dark .modal-card h3 {

  color: #f8fafc !important;

}



body.theme-dark .card,

body.theme-dark .stat,

body.theme-dark .admin-dashboard-mock,

body.theme-dark .modal-card,

body.theme-dark .request-profile-card,

body.theme-dark .kta-preview-card,

body.theme-dark .member-help-card {

  background: #151d30 !important;

  border-color: #27354f !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;

}



body.theme-dark .stat b {

  color: #60a5fa !important;

}



body.theme-dark .stat small,

body.theme-dark .muted,

body.theme-dark .notice-warning-banner span {

  color: #94a3b8 !important;

}



body.theme-dark table {

  background: #151d30 !important;

}



body.theme-dark th {

  background: #0d1424 !important;

  color: #94a3b8 !important;

  border-bottom: 1px solid #27354f !important;

}



body.theme-dark td {

  border-bottom: 1px solid #27354f !important;

  color: #cbd5e1 !important;

}



body.theme-dark tr:hover td {

  background: #1e293b !important;

}



body.theme-dark .field span,

body.theme-dark .search-box span {

  color: #cbd5e1 !important;

}



body.theme-dark .field input,

body.theme-dark .field select,

body.theme-dark .field textarea,

body.theme-dark .search-box input,

body.theme-dark .search-input,

body.theme-dark .toolbar-grid select,

body.theme-dark .searchable-select-trigger {

  background: #0d1424 !important;

  color: #f8fafc !important;

  border-color: #27354f !important;

}



body.theme-dark .searchable-select-dropdown {

  background: #151d30 !important;

  border-color: #27354f !important;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;

}



body.theme-dark .searchable-select-search {

  background: #0d1424 !important;

  color: #f8fafc !important;

  border-color: #27354f !important;

}



body.theme-dark .searchable-select-option:hover {

  background: #1e293b !important;

}



body.theme-dark .searchable-select-option.selected {

  background: #2563eb !important;

  color: #ffffff !important;

}



body.theme-dark .btn-secondary {

  background: #27354f !important;

  color: #f8fafc !important;

}



body.theme-dark .btn-secondary:hover {

  background: #334668 !important;

}



body.theme-dark .notice {

  background: #1e1b4b !important;

  border-color: #312e81 !important;

  color: #e0e7ff !important;

}



body.theme-dark .app.admin-mode-dark .notification-button {

  color: #cbd5e1 !important;

  border-color: #27354f !important;

  background: transparent !important;

}



body.theme-dark .app.admin-mode-dark .notification-button:hover {

  background: #1e293b !important;

}



body.theme-dark .app.admin-mode-dark .topbar-refresh-button {

  color: #cbd5e1 !important;

  border-color: #27354f !important;

  background: transparent !important;

}



body.theme-dark .app.admin-mode-dark .topbar-refresh-button:hover {

  background: #1e293b !important;

}



body.theme-dark .tab-row button {

  background: #151d30 !important;

  color: #94a3b8 !important;

  border: 1px solid #27354f !important;

}



body.theme-dark .tab-row button.active {

  background: #f2c94c !important;

  color: #0f172a !important;

  border-color: #f2c94c !important;

}



body.theme-dark .approval-pending {

  background: rgba(245, 158, 11, 0.15) !important;

  color: #fbbf24 !important;

}



body.theme-dark .approval-approved {

  background: rgba(16, 185, 129, 0.15) !important;

  color: #34d399 !important;

}



body.theme-dark .approval-rejected {

  background: rgba(239, 68, 68, 0.15) !important;

  color: #f87171 !important;

}



body.theme-dark .notice-warning-banner {

  background: #271616 !important;

  border-color: #5a2323 !important;

  color: #feb2b2 !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;

}



body.theme-dark .notice-warning-banner b {

  color: #fca5a5 !important;

}



body.theme-dark .mock-row {

  background: #0d1424 !important;

  border-color: #27354f !important;

  color: #f8fafc !important;

}



body.theme-dark .mock-row .nip {

  color: #94a3b8 !important;

}



body.theme-dark .circle-progress::before {

  background: #151d30 !important;

}



body.theme-dark .circle-progress .circle-inner {

  color: #f8fafc !important;

}



/* Dark Mode support overrides for Member Profile page */

body.theme-dark .app.member-app .member-profile-page .card,

body.theme-dark .app.member-app .member-profile-page .profile-accordion-card,

body.theme-dark .app.member-app .member-profile-page .profile-header-card,

body.theme-dark .member-profile-overview.card,

body.theme-dark .member-profile-detail-card {

  background: #151d30 !important;

  border-color: #27354f !important;

}



body.theme-dark .app.member-app .member-profile-page .card h3,

body.theme-dark .app.member-app .member-profile-page .profile-header-card h3,

body.theme-dark .member-profile-detail-heading h3,

body.theme-dark .member-profile-overview-copy h3,

body.theme-dark .member-profile-menu-heading h3 {

  color: #f8fafc !important;

}



body.theme-dark .app.member-app .member-profile-page .profile-accordion-header {

  background: #151d30 !important;

  color: #f8fafc !important;

  border-color: #27354f !important;

}



body.theme-dark .app.member-app .member-profile-page .profile-accordion-header:hover,

body.theme-dark .app.member-app .member-profile-page .profile-accordion-header.active {

  background: #1e293b !important;

  color: #f8fafc !important;

}



body.theme-dark .app.member-app .member-profile-page .profile-accordion-header.active {

  border-bottom: 1px solid #27354f !important;

}



body.theme-dark .app.member-app .member-profile-page .profile-accordion-header span,

body.theme-dark .app.member-app .member-profile-page .profile-accordion-content span,

body.theme-dark .member-profile-info-row > strong {

  color: #cbd5e1 !important;

}



body.theme-dark .app.member-app .member-profile-page .profile-accordion-content {

  background: #151d30 !important;

}



body.theme-dark .app.member-app .member-profile-page .profile-accordion-content [style*="color: var(--muted)"],

body.theme-dark .member-profile-info-row > span,

body.theme-dark .member-profile-detail-heading p,

body.theme-dark .member-profile-overview-copy p,

body.theme-dark .member-profile-menu-heading p {

  color: #94a3b8 !important;

}



body.theme-dark .app.member-app .member-profile-page .profile-accordion-content [style*="border-bottom"] {

  border-color: #27354f !important;

}



/* Button & Link overrides */

body.theme-dark .app.member-app button.member-profile-back,

body.theme-dark button.member-profile-back {

  background: transparent !important;

  color: #60a5fa !important;

}



body.theme-dark .app.member-app button.member-profile-back:hover,

body.theme-dark button.member-profile-back:hover {

  background: rgba(96, 165, 250, 0.15) !important;

  color: #93c5fd !important;

}



body.theme-dark .app.member-app button.member-profile-file-link,

body.theme-dark .app.member-app button.member-profile-edit-inline,

body.theme-dark button.member-profile-file-link,

body.theme-dark button.member-profile-edit-inline {

  background: #1d4ed8 !important;

  color: #ffffff !important;

  border: 1px solid #3b82f6 !important;

}



body.theme-dark .app.member-app button.member-profile-file-link:hover,

body.theme-dark .app.member-app button.member-profile-edit-inline:hover,

body.theme-dark button.member-profile-file-link:hover,

body.theme-dark button.member-profile-edit-inline:hover {

  background: #2563eb !important;

  border-color: #60a5fa !important;

}



body.theme-dark .app.member-app .member-profile-page .member-edit-profile-button {

  background: #1e293b !important;

  color: #cbd5e1 !important;

  border: 1px solid #27354f !important;

}



body.theme-dark .app.member-app .member-profile-page .member-edit-profile-button span {

  color: #cbd5e1 !important;

}



body.theme-dark .app.member-app .member-profile-page .member-photo-action,

body.theme-dark .app.member-app .member-profile-page .member-photo-action.member-photo-action-kta {

  background: #1e293b !important;

  color: #cbd5e1 !important;

  border-color: #27354f !important;

}



body.theme-dark .app.member-app .member-profile-page .member-photo-action:hover,

body.theme-dark .app.member-app .member-profile-page .member-photo-action.member-photo-action-kta:hover {

  background: #27354f !important;

  border-color: #3b82f6 !important;

}



body.theme-dark .app.member-app .member-profile-page .member-photo-action span {

  color: #cbd5e1 !important;

}



body.theme-dark .app.member-app .member-profile-page .member-kta-number {

  background: #0d1424 !important;

  border-color: #27354f !important;

  color: #f8fafc !important;

}



body.theme-dark .app.member-app .member-profile-page .member-logout-button {

  background: #2d171c !important;

  color: #fca5a5 !important;

  border: 1px solid #7f1d1d !important;

}



body.theme-dark .app.member-app .member-profile-page .member-logout-button:hover {

  background: #4c1d24 !important;

}



body.theme-dark .member-profile-overview-copy p {

  color: #94a3b8 !important;

}



body.theme-dark .member-profile-overview-status.active {

  background: rgba(16, 185, 129, 0.15) !important;

  color: #34d399 !important;

}



body.theme-dark .member-profile-overview-status.inactive {

  background: rgba(239, 68, 68, 0.15) !important;

  color: #f87171 !important;

}



/* Ensure member-profile-back has absolutely no background block and clear text colors */

.app button.member-profile-back,

button.member-profile-back,

.member-profile-back {

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

  padding: 0 !important;

  color: #2563eb !important;

  text-decoration: none !important;

}



.app button.member-profile-back:hover,

button.member-profile-back:hover,

.member-profile-back:hover {

  background: transparent !important;

  color: #1d4ed8 !important;

  text-decoration: underline !important;

}



body.theme-dark .app button.member-profile-back,

body.theme-dark button.member-profile-back,

body.theme-dark .member-profile-back {

  background: transparent !important;

  color: #60a5fa !important;

}



body.theme-dark .app button.member-profile-back:hover,

body.theme-dark button.member-profile-back:hover,

body.theme-dark .member-profile-back:hover {

  background: transparent !important;

  color: #93c5fd !important;

  text-decoration: underline !important;

}



/* Ensure member-profile-edit-inline and file links are solid buttons with white text for maximum contrast */

.app button.member-profile-edit-inline,

button.member-profile-edit-inline,

.member-profile-edit-inline,

.app button.member-profile-file-link,

button.member-profile-file-link,

.member-profile-file-link {

  background: #0b4f9c !important;

  color: #ffffff !important;

  border: 1px solid #0b4f9c !important;

  box-shadow: none !important;

  border-radius: 12px !important;

  padding: 10px 14px !important;

  font-weight: 800 !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 8px !important;

  cursor: pointer !important;

  width: 100% !important;

  box-sizing: border-box !important;

}



.app button.member-profile-edit-inline:hover,

button.member-profile-edit-inline:hover,

.member-profile-edit-inline:hover,

.app button.member-profile-file-link:hover,

button.member-profile-file-link:hover,

.member-profile-file-link:hover {

  background: #082b57 !important;

  border-color: #082b57 !important;

  color: #ffffff !important;

}



/* Dark mode overrides for these solid buttons */

body.theme-dark .app button.member-profile-edit-inline,

body.theme-dark button.member-profile-edit-inline,

body.theme-dark .member-profile-edit-inline,

body.theme-dark .app button.member-profile-file-link,

body.theme-dark button.member-profile-file-link,

body.theme-dark .member-profile-file-link {

  background: #2563eb !important;

  color: #ffffff !important;

  border: 1px solid #2563eb !important;

}



body.theme-dark .app button.member-profile-edit-inline:hover,

body.theme-dark button.member-profile-edit-inline:hover,

body.theme-dark .member-profile-edit-inline:hover,

body.theme-dark .app button.member-profile-file-link:hover,

body.theme-dark button.member-profile-file-link:hover,

body.theme-dark .member-profile-file-link:hover {

  background: #1d4ed8 !important;

  border-color: #1d4ed8 !important;

  color: #ffffff !important;

}



/* ===== theme-dark: Member App Dark Mode Overrides (Revisi 126) ===== */

body.theme-dark .app.member-app .content,

body.theme-dark .content {

  background: #090d16 !important;

  color: #f8fafc !important;

}



body.theme-dark .app.member-app .member-greeting .greeting-subtitle {

  color: #94a3b8 !important;

}



body.theme-dark .app.member-app .member-greeting .greeting-title {

  color: #f8fafc !important;

}



body.theme-dark .app.member-app .member-notification-btn {

  background: #151d30 !important;

  border: 1px solid #27354f !important;

  color: #cbd5e1 !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;

}



body.theme-dark .app.member-app .quick-access-section h3,

body.theme-dark .app.member-app .info-section h3 {

  color: #f8fafc !important;

}



body.theme-dark .app.member-app .quick-card {

  background: #151d30 !important;

  border: 1px solid #27354f !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;

}



body.theme-dark .app.member-app .quick-label {

  color: #cbd5e1 !important;

}



/* Card gradients in dark mode */

body.theme-dark .app.member-app .card-blue {

  background: linear-gradient(135deg, #151d30 0%, #172554 100%) !important;

  border-color: #27354f !important;

  border-left: 4px solid #3b82f6 !important;

}



body.theme-dark .app.member-app .card-green {

  background: linear-gradient(135deg, #151d30 0%, #064e3b 100%) !important;

  border-color: #27354f !important;

  border-left: 4px solid #22c55e !important;

}



body.theme-dark .app.member-app .card-orange {

  background: linear-gradient(135deg, #151d30 0%, #7c2d12 100%) !important;

  border-color: #27354f !important;

  border-left: 4px solid #f97316 !important;

}



body.theme-dark .app.member-app .card-purple {

  background: linear-gradient(135deg, #151d30 0%, #581c87 100%) !important;

  border-color: #27354f !important;

  border-left: 4px solid #a855f7 !important;

}



/* Profile menu cards in dark mode */

body.theme-dark .app.member-app button.member-profile-menu-card {

  background: #151d30 !important;

  border-color: #27354f !important;

}



body.theme-dark .app.member-app button.member-profile-menu-card:hover {

  background: #1e293b !important;

  border-color: #3b82f6 !important;

}



body.theme-dark .app.member-app .member-profile-menu-card .member-profile-menu-title {

  color: #f8fafc !important;

}



body.theme-dark .app.member-app .member-profile-menu-card .member-profile-menu-note {

  color: #94a3b8 !important;

}



body.theme-dark .app.member-app .member-profile-menu-card .member-profile-menu-arrow {

  color: #cbd5e1 !important;

}



/* Dynamic color icons inside menu cards */

body.theme-dark .app.member-app .member-profile-tone-blue .member-profile-menu-icon {

  background: rgba(59, 130, 246, 0.15) !important;

  color: #60a5fa !important;

}



body.theme-dark .app.member-app .member-profile-tone-green .member-profile-menu-icon {

  background: rgba(34, 197, 94, 0.15) !important;

  color: #4ade80 !important;

}



body.theme-dark .app.member-app .member-profile-tone-orange .member-profile-menu-icon {

  background: rgba(249, 115, 22, 0.15) !important;

  color: #fb923c !important;

}



body.theme-dark .app.member-app .member-profile-tone-purple .member-profile-menu-icon {

  background: rgba(168, 85, 247, 0.15) !important;

  color: #c084fc !important;

}



/* Notification panel overrides for dark mode */

body.theme-dark .notification-panel {

  background: #151d30 !important;

  border: 1px solid #27354f !important;

  color: #f8fafc !important;

  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;

}



body.theme-dark .notification-item {

  border-bottom: 1px solid #27354f !important;

}



body.theme-dark .notification-item:hover {

  background: #1e293b !important;

}



body.theme-dark .notification-item h4 {

  color: #f8fafc !important;

}



body.theme-dark .notification-item p {

  color: #cbd5e1 !important;

}



body.theme-dark .notification-item small {

  color: #94a3b8 !important;

}



body.theme-dark .notification-panel-header {

  border-bottom: 1px solid #27354f !important;

}



body.theme-dark .notification-panel-header h3 {

  color: #f8fafc !important;

}



/* ===== theme-classic & theme-emerald: Light Themes Contrast Fixes (Revisi 127) ===== */

body.theme-classic .app.member-app .content,

body.theme-emerald .app.member-app .content {

  background: #f8fafc !important; /* Pure clean background, removes low-contrast blue gradient */

  color: #0f172a !important;

}



body.theme-classic button.member-profile-back,

body.theme-classic .member-profile-back,

body.theme-emerald button.member-profile-back,

body.theme-emerald .member-profile-back {

  color: #0b4f9c !important; /* Deep dark blue for high readability on white/grey */

  background: transparent !important;

  font-weight: 800 !important;

}



body.theme-classic button.member-profile-back:hover,

body.theme-classic .member-profile-back:hover,

body.theme-emerald button.member-profile-back:hover,

body.theme-emerald .member-profile-back:hover {

  color: #082b57 !important;

  text-decoration: underline !important;

  background: transparent !important;

}



body.theme-classic button.member-profile-edit-inline,

body.theme-classic .member-profile-edit-inline,

body.theme-classic button.member-profile-file-link,

body.theme-classic .member-profile-file-link,

body.theme-emerald button.member-profile-edit-inline,

body.theme-emerald .member-profile-edit-inline,

body.theme-emerald button.member-profile-file-link,

body.theme-emerald .member-profile-file-link {

  background: #0b4f9c !important; /* Crisp solid deep blue */

  color: #ffffff !important;

  border: 1px solid #0b4f9c !important;

}



body.theme-classic button.member-profile-edit-inline:hover,

body.theme-classic .member-profile-edit-inline:hover,

body.theme-classic button.member-profile-file-link:hover,

body.theme-classic .member-profile-file-link:hover,

body.theme-emerald button.member-profile-edit-inline:hover,

body.theme-emerald .member-profile-edit-inline:hover,

body.theme-emerald button.member-profile-file-link:hover,

body.theme-emerald .member-profile-file-link:hover {

  background: #082b57 !important;

  border-color: #082b57 !important;

  color: #ffffff !important;

}



/* ===== theme-dark: Dark Theme High-Contrast Overrides ===== */

body.theme-dark .app.member-app .content {

  background: #090d16 !important;

  color: #f8fafc !important;

}



body.theme-dark button.member-profile-back,

body.theme-dark .member-profile-back {

  color: #60a5fa !important; /* Sky blue on dark background */

  background: transparent !important;

  font-weight: 800 !important;

}



body.theme-dark button.member-profile-back:hover,

body.theme-dark .member-profile-back:hover {

  color: #93c5fd !important;

  text-decoration: underline !important;

  background: transparent !important;

}



body.theme-dark button.member-profile-edit-inline,

body.theme-dark .member-profile-edit-inline,

body.theme-dark button.member-profile-file-link,

body.theme-dark .member-profile-file-link {

  background: #2563eb !important; /* Brighter blue for dark theme */

  color: #ffffff !important;

  border: 1px solid #2563eb !important;

}



body.theme-dark button.member-profile-edit-inline:hover,

body.theme-dark .member-profile-edit-inline:hover,

body.theme-dark button.member-profile-file-link:hover,

body.theme-dark .member-profile-file-link:hover {

  background: #1d4ed8 !important;

  border-color: #1d4ed8 !important;

  color: #ffffff !important;

}



/* Ensure Member App Quick Access buttons are clean, transparent, and borderless across all themes */

.app.member-app .member-home-quick-access button.member-action-card,

.app.member-app .quick-card.member-action-card {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  padding: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

}



/* Light themes: classic (mode biru) & emerald (mode hijau) label text color */

body.theme-classic .app.member-app .member-home-quick-access button.member-action-card .quick-label,

body.theme-emerald .app.member-app .member-home-quick-access button.member-action-card .quick-label,

body.theme-classic .app.member-app .quick-card.member-action-card .quick-label,

body.theme-emerald .app.member-app .quick-card.member-action-card .quick-label {

  color: #071a37 !important; /* Deep navy text for maximum contrast on light background */

  font-weight: 800 !important;

  font-size: 11px !important;

  margin-top: 6px !important;

  min-height: unset !important;

}



/* Dark theme: label text color */

body.theme-dark .app.member-app .member-home-quick-access button.member-action-card .quick-label,

body.theme-dark .app.member-app .quick-card.member-action-card .quick-label {

  color: #f8fafc !important; /* Pure white text for maximum contrast on dark background */

  font-weight: 800 !important;

  font-size: 11px !important;

  margin-top: 6px !important;

  min-height: unset !important;

}





/* ===== Login Form Compact Overrides to Prevent Scrolling & Overflow ===== */

.login-page {

  overflow: hidden !important;

  overflow-y: hidden !important;

}

.login-card {

  padding: 16px 20px 12px !important;

  border-radius: 20px !important;

}

@media (min-width: 701px) {

  .login-card {

    padding: 18px 24px 14px !important;

  }

}

.login-logo-container {
  margin-bottom: 12px !important;
}

.login-logo-container img {
  height: 108px !important;
  width: 108px !important;
  max-height: 108px !important;
}

.login-card h1 {

  font-size: 20px !important;

  margin-bottom: 2px !important;

}

.login-card p {

  margin-bottom: 10px !important;

}

.login-card input {

  padding: 9px 12px !important;

  margin: 4px 0 !important;

}

.login-card button {

  padding: 9px 12px !important;

  margin: 4px 0 !important;

  height: 38px !important;

  min-height: unset !important;

}

.login-action-row {

  display: flex !important;

  gap: 8px !important;

  width: 100% !important;

  margin: 4px 0 !important;

}

.login-action-row button {

  flex: 1 !important;

  margin: 0 !important;

  font-size: 11px !important;

  height: 34px !important;

  min-height: unset !important;

  padding: 0 4px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

}

.member-login-help {

  font-size: 10px !important;

  line-height: 1.25 !important;

  margin: 4px 0 2px 0 !important;

  opacity: 0.85;

}

.login-card small {

  margin-top: 4px !important;

  font-size: 9.5px !important;

  opacity: 0.7;

}
/* QR Code Size Enhancements for Better Physical Print Readability */
.rev50-qr {
    width: 165px!important;
    height: 195px!important;
}
.rev50-qr img, .rev50-qr canvas, .rev50-qr svg {
    width: 135px!important;
    height: 135px!important;
}
.rev50-qr em {
    font-size: 12px!important;
}

@media print {
    #ktaPrintRoot .rev50-qr {
        width: 16.5mm!important;
        height: 19.5mm!important;
    }
    #ktaPrintRoot .rev50-qr img {
        width: 13.5mm!important;
        height: 13.5mm!important;
    }
    #ktaPrintRoot .rev50-qr em {
        font-size: 1.2mm!important;
    }
}


/* QR Code Relocation and Resizing to Prevent Overlapping with Secretary Signature */
.rev50-qr {
    top: 185px!important;
    right: 30px!important;
    width: 165px!important;
    height: 195px!important;
}
.rev50-sign-right {
    left: 470px!important;
}

/* Print Layout Relocation and Resizing */
@media print {
    #ktaPrintRoot .rev50-qr {
        top: 18.5mm!important;
        right: 3.0mm!important;
        width: 16.5mm!important;
        height: 19.5mm!important;
    }
    #ktaPrintRoot .rev50-sign-right {
        left: 46.5mm!important;
    }
}


/* Synchronize KTA Header Text Sizes on Front and Back Cards */
.rev50-title h1, .rev50-back-title h1 {
    font-size: 27.2px!important;
    line-height: 1.02!important;
}
.rev50-title p, .rev50-back-title p {
    font-size: 16px!important;
    line-height: 1.15!important;
}
.rev50-title strong, .rev50-back-title strong {
    font-size: 13.5px!important;
    line-height: 1.08!important;
    font-weight: 950!important;
}

@media print {
    #ktaPrintRoot .rev50-title h1, 
    #ktaPrintRoot .rev50-back-title h1 {
        font-size: 5.6mm!important;
    }
    #ktaPrintRoot .rev50-title p, 
    #ktaPrintRoot .rev50-back-title p {
        font-size: 3.3mm!important;
    }
    #ktaPrintRoot .rev50-title strong, 
    #ktaPrintRoot .rev50-back-title strong {
        font-size: 2.8mm!important;
        font-weight: 950!important;
    }
}


.sidebar-selectors { display: none !important; }
/* ===== KTA Visibility Toggle Slide/Scale Animation ===== */
#ktaFlipCardWrapper.kta-hidden-active {
  max-height: 0 !important;
  opacity: 0 !important;
  transform: scaleY(0) scale(0.9) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none !important;
}
/* ===== Scrollable Modal Body Style for Detailed Profil Modal ===== */
.modal-body-scroll::-webkit-scrollbar {
  width: 6px;
}
.modal-body-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.modal-body-scroll::-webkit-scrollbar-thumb {
  background-color: #cbd5e0;
  border-radius: 99px;
}
.modal-body-scroll {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e0 transparent;
}

/* ===== FIXED TRANSPARENT GLASSMORPHISM LOGIN CARD OVERRIDE ===== */
html, body {
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
}

body:has(#loginPage:not(.hidden)) {
  overflow: hidden !important;
  height: 100vh !important;
}

#loginPage, .login-page {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  /* BACKGROUND IMAGE FULL OPACITY, VIBRANT & CRISP (NO FADING GRADIENT) */
  background: url('assets/login-background.png') center/cover no-repeat !important;
}

.login-overlay {
  display: none !important; /* Hapus overlay agar background gambar 100% jernih */
}

form.login-card, .login-card {
  position: relative !important;
  z-index: 10 !important;
  width: min(390px, 92vw) !important;
  max-height: calc(100vh - 40px) !important;
  overflow: hidden !important;
  padding: 24px 28px !important;
  margin: auto !important;
  box-sizing: border-box !important;
  border-radius: 22px !important;
  
  /* KARTU FORM LOGIN SEMI-TRANSPARAN FLEKSIBEL (TANPA BLUR SUPAYA TEKS 100% TAJAM) */
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.login-card h1, .login-card h2 {
  color: #0b4f9c !important;
  font-weight: 800 !important;
}

.login-card p {
  font-size: 12px !important;
  margin: 4px 0 10px 0 !important;
  line-height: 1.4 !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  text-align: center !important;
}

.login-card input[type="email"],
.login-card input[type="password"] {
  width: 100% !important;
  padding: 11px 14px !important;
  font-size: 13.5px !important;
  border-radius: 10px !important;
  margin: 4px 0 !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
}

.login-card button[type="submit"] {
  width: 100% !important;
  padding: 11.5px 16px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  margin-top: 8px !important;
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}

.login-card .btn-activation {
  width: 100% !important;
  padding: 10.5px 16px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  margin-top: 6px !important;
  background: linear-gradient(135deg, #eab308, #ca8a04) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.25) !important;
}

.login-card .btn-magic-login,
.login-card .btn-forgot-password {
  padding: 8px 12px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

.member-login-help {
  font-size: 11px !important;
  margin: 8px 0 3px 0 !important;
  line-height: 1.35 !important;
  color: #334155 !important;
  font-weight: 600 !important;
  text-align: center !important;
}

/* TEKS BAWAH 100% TAJAM & SANGAT CLEAR */
.login-card small {
  font-size: 11px !important;
  color: #000000 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  margin-top: 4px !important;
  display: block !important;
  color: #000000 !important; /* HITAM PEKAT TEBAL */
  font-weight: 800 !important;
  text-align: center !important;
  opacity: 1 !important;
  filter: none !important;
}

.login-copyright {
  position: relative !important;
  z-index: 10 !important;
  margin-top: 10px !important;
  margin-bottom: 4px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 5px rgba(0,0,0,0.9) !important;
  text-align: center !important;
}


/* ===== MOBILE DASHBOARD HERO & SUMMARY GRID OVERRIDES ===== */
@media (max-width: 600px) {
  .dash-hero.admin-dashboard-hero {
    padding: 12px 14px !important;
    margin-bottom: 12px !important;
    border-radius: 16px !important;
  }
  .dash-hero.admin-dashboard-hero h2 {
    font-size: 14px !important;
    line-height: 1.25 !important;
    margin-bottom: 3px !important;
  }
  .dash-hero.admin-dashboard-hero p {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
  }
  .admin-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .admin-summary-card {
    padding: 12px 10px !important;
    border-radius: 14px !important;
    text-align: center !important;
  }
  .admin-summary-card .admin-quick-value {
    font-size: 20px !important;
    font-weight: 800 !important;
  }
}

/* ===== PERFECT CENTERED 3-LINE NO-STACKING MOBILE HEADER OVERRIDE ===== */


/* ===== ULTIMATE MOBILE DASHBOARD CLEANUP GUARANTEE ===== */
@media (max-width: 600px) {
  .dash-hero,
  .dash-hero.admin-dashboard-hero {
    position: relative !important;
    padding: 16px 16px !important;
    margin-bottom: 16px !important;
    border-radius: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    background: linear-gradient(135deg, #0b4f9c 0%, #071a37 100%) !important;
    box-shadow: 0 8px 24px rgba(7, 26, 55, 0.18) !important;
    overflow: hidden !important;
    display: block !important;
  }

  .dash-hero.admin-dashboard-hero div {
    width: 100% !important;
    text-transform: none !important;
    white-space: normal !important;
    transform: none !important;
    text-align: left !important;
    letter-spacing: normal !important;
  }

  .dash-hero.admin-dashboard-hero h2 {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    margin: 0 0 6px 0 !important;
    white-space: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: #ffffff !important;
    text-align: left !important;
    max-width: 100% !important;
  }

  .dash-hero.admin-dashboard-hero p {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    margin: 0 0 6px 0 !important;
    white-space: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: #dbeafe !important;
    text-align: left !important;
    max-width: 100% !important;
  }

  .dash-hero.admin-dashboard-hero .admin-dashboard-role {
    margin-top: 8px !important;
    font-size: 11.5px !important;
    color: #fde047 !important;
    font-weight: 700 !important;
    text-transform: none !important;
    white-space: normal !important;
    display: block !important;
  }

  .admin-summary-grid,
  .dashboard-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  .admin-summary-card,
  .quick-card {
    border-radius: 16px !important;
    padding: 14px 10px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .quick-card label,
  .admin-summary-card span {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #0f172a !important;
    margin-top: 6px !important;
  }

  .quick-access-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
  }
}


/* ===== ULTIMATE LOGIN BUTTON CLICKABILITY GUARANTEE ===== */
.login-page {
  position: relative !important;
  z-index: 1 !important;
}

.login-overlay {
  pointer-events: none !important;
  z-index: 2 !important;
}

.login-card {
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

.login-card button,
.login-card a,
.login-action-row button {
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.activation-modal,
.modal-shell {
  z-index: 99999 !important;
}


/* ===== BULLETPROOF LOGIN CLICKABILITY & MODAL DISPLAY ===== */
.login-card button,
.btn-activation,
.btn-magic-login,
.btn-forgot-password {
  position: relative !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
}

#ktaRegistrationModal:not(.hidden),
#memberActivationModal:not(.hidden),
#magicLoginModal:not(.hidden),
#forgotPasswordModal:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 999999 !important;
}


/* ===== COMPACT ZERO-SCROLL LOGIN CARD FIT GUARANTEE ===== */
.login-page {
  min-height: 100dvh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}

.login-card {
  width: min(410px, 94vw) !important;
  max-height: calc(100dvh - 20px) !important;
  overflow-y: auto !important;
  margin: 0 auto !important;
  padding: 16px 20px !important;
  box-sizing: border-box !important;
}

.login-card button {
  margin: 3px 0 !important;
}

.login-copyright {
  position: absolute !important;
  bottom: 6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 10px !important;
  opacity: 0.6 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}


/* ===== REVISI PORTRAIT KTA CARD DESIGN ===== */
.rev50-sheet {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8mm !important;
  align-items: flex-start !important;
  justify-content: center !important;
  background: #ffffff !important;
}

.rev50-card.rev50-portrait {
  width: 54mm !important;
  height: 85.6mm !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 3.8mm !important;
  background-image: url('assets/kta-portrait-bg-epson.jpg') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.2) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  color: #082b57 !important;
  box-sizing: border-box !important;
}

/* 1. Both Logos Top Left Side-by-Side */
.rev50-portrait-logos {
  position: absolute !important;
  top: 3.5mm !important;
  left: 3.5mm !important;
  display: flex !important;
  align-items: center !important;
  gap: 2mm !important;
  z-index: 5 !important;
}

.rev50-portrait-logos img {
  height: 7.2mm !important;
  width: auto !important;
  max-width: 10mm !important;
  object-fit: contain !important;
}

/* 2. Thick Line Divider 1 */
.rev50-portrait-line-1 {
  position: absolute !important;
  top: 11.8mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  height: 0.6mm !important;
  background: #082b57 !important;
  z-index: 5 !important;
}

/* 3. Header Text Below Line 1 */
.rev50-portrait-header {
  position: absolute !important;
  top: 12.8mm !important;
  left: 2.5mm !important;
  right: 2.5mm !important;
  text-align: center !important;
  z-index: 5 !important;
}

.rev50-portrait-header .puk-title-line1 {
  font-size: 1.85mm !important;
  font-weight: 800 !important;
  color: #082b57 !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1mm !important;
}

.rev50-portrait-header .puk-title-line2 {
  font-size: 1.85mm !important;
  font-weight: 800 !important;
  color: #082b57 !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1mm !important;
}

.rev50-portrait-header .puk-title-line3 {
  font-size: 1.95mm !important;
  font-weight: 950 !important;
  color: #dc2626 !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1mm !important;
  margin-top: 0.3mm !important;
}

.rev50-portrait-header .puk-title-line4 {
  font-size: 2.2mm !important;
  font-weight: 950 !important;
  color: #0b4f9c !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15mm !important;
  margin-top: 0.3mm !important;
}

/* 4. Thick Line Divider 2 */
.rev50-portrait-line-2 {
  position: absolute !important;
  top: 24.8mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  height: 0.6mm !important;
  background: #082b57 !important;
  z-index: 5 !important;
}

/* 5. Member Photo & Data Values */
.rev50-portrait-photo {
  position: absolute !important;
  top: 26.5mm !important;
  left: 3.5mm !important;
  width: 17.5mm !important;
  height: 22.5mm !important;
  border: 0.45mm solid #0b4f9c !important;
  border-radius: 1.5mm !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  background: #eef2f4 !important;
  color: #6f7f92 !important;
  font-size: 2.2mm !important;
  font-weight: 900 !important;
  z-index: 5 !important;
}

.rev50-portrait-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.rev50-portrait-values-top {
  position: absolute !important;
  top: 26.5mm !important;
  left: 22.5mm !important;
  right: 3.5mm !important;
  z-index: 5 !important;
}

.rev50-portrait-values-bottom {
  position: absolute !important;
  top: 50.5mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  z-index: 5 !important;
}

.rev50-portrait-row {
  display: grid !important;
  grid-template-columns: 14mm 1.8mm 1fr !important;
  align-items: center !important;
  height: 3.4mm !important;
  font-size: 1.95mm !important;
  line-height: 1 !important;
  color: #082b57 !important;
}

.rev50-portrait-row b {
  font-weight: 950 !important;
}

.rev50-portrait-row span {
  font-weight: 950 !important;
  text-align: center !important;
}

.rev50-portrait-row strong {
  font-weight: 850 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border-bottom: 0.12mm solid rgba(8,43,87,0.4) !important;
  padding-bottom: 0.15mm !important;
  min-width: 0 !important;
  color: #041d3b !important;
}

/* Portrait Back Card Specifics */
.rev50-portrait-back-rules {
  position: absolute !important;
  top: 26.5mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  font-size: 1.75mm !important;
  line-height: 1.25 !important;
  color: #082b57 !important;
  z-index: 5 !important;
}

.rev50-portrait-back-rules h2 {
  font-size: 2.1mm !important;
  font-weight: 950 !important;
  margin: 0 0 1mm 0 !important;
  color: #0b4f9c !important;
  text-align: center !important;
}

.rev50-portrait-back-rules ol {
  margin: 0 !important;
  padding-left: 3.5mm !important;
}

.rev50-portrait-qr {
  position: absolute !important;
  top: 45.5mm !important;
  left: 3.5mm !important;
  width: 17mm !important;
  text-align: center !important;
  z-index: 5 !important;
}

.rev50-portrait-qr img {
  width: 15mm !important;
  height: 15mm !important;
  object-fit: contain !important;
  border-radius: 1mm !important;
  border: 0.2mm solid rgba(0,0,0,0.1) !important;
  display: block !important;
  margin: 0 auto !important;
}

.rev50-portrait-qr em {
  font-style: normal !important;
  font-size: 1.4mm !important;
  font-weight: 900 !important;
  display: block !important;
  margin-top: 0.5mm !important;
  color: #082b57 !important;
}

.rev50-portrait-signs {
  position: absolute !important;
  top: 45.5mm !important;
  left: 22mm !important;
  right: 3.5mm !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 2mm !important;
  z-index: 5 !important;
}

.rev50-portrait-sign-box {
  flex: 1 !important;
  text-align: center !important;
  font-size: 1.5mm !important;
}

.rev50-portrait-sign-box .sign-title {
  font-weight: 800 !important;
  color: #082b57 !important;
  line-height: 1.1 !important;
}

.rev50-portrait-sign-box .sign-img {
  height: 6mm !important;
  object-fit: contain !important;
  margin: 0.5mm auto !important;
  display: block !important;
}

.rev50-portrait-sign-box .sign-name {
  font-weight: 900 !important;
  border-top: 0.15mm solid #082b57 !important;
  padding-top: 0.2mm !important;
  margin-top: 0.5mm !important;
  color: #041d3b !important;
}

.rev50-portrait-address {
  position: absolute !important;
  bottom: 2.5mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  text-align: center !important;
  font-size: 1.5mm !important;
  color: #082b57 !important;
  line-height: 1.2 !important;
  z-index: 5 !important;
  border-top: 0.15mm solid rgba(8,43,87,0.3) !important;
  padding-top: 0.8mm !important;
}


/* ===== FORCE ISO CR80 PORTRAIT KTA CARD DEFAULT OVERRIDES ===== */
.rev50-card,
.rev50-card.rev50-portrait {
  width: 54mm !important;
  height: 85.6mm !important;
  min-width: 54mm !important;
  min-height: 85.6mm !important;
  max-width: 54mm !important;
  max-height: 85.6mm !important;
  aspect-ratio: 54 / 85.6 !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 3.8mm !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  box-sizing: border-box !important;
}

.rev50-card.rev50-front,
.rev50-card.rev50-portrait.rev50-front {
  background-image: url('assets/kta-portrait-bg-epson.jpg') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.rev50-card.rev50-back,
.rev50-card.rev50-portrait.rev50-back {
  background-image: url('assets/kta-portrait-bg-back-epson.jpg') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

@media print {
  .rev50-card,
  .rev50-card.rev50-portrait {
    width: 54mm !important;
    height: 85.6mm !important;
    min-width: 54mm !important;
    min-height: 85.6mm !important;
    max-width: 54mm !important;
    max-height: 85.6mm !important;
    box-shadow: none !important;
    page-break-inside: avoid !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}


/* ===== EXACT HAND-DRAWN SKETCH PORTRAIT KTA CARD DESIGN ===== */
.rev50-sheet {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12mm !important;
  align-items: flex-start !important;
  justify-content: center !important;
  background: transparent !important;
  padding: 10px !important;
}

.rev50-card,
.rev50-card.rev50-portrait {
  width: 54mm !important;
  height: 85.6mm !important;
  min-width: 54mm !important;
  min-height: 85.6mm !important;
  max-width: 54mm !important;
  max-height: 85.6mm !important;
  aspect-ratio: 54 / 85.6 !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 3.8mm !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2) !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
}

.rev50-card.rev50-front {
  background-image: url('assets/kta-portrait-bg-epson.jpg') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.rev50-card.rev50-back {
  background-image: url('assets/kta-portrait-bg-back-epson.jpg') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.rev50-portrait-logos {
  position: absolute !important;
  top: 3.5mm !important;
  left: 3.5mm !important;
  display: flex !important;
  align-items: center !important;
  gap: 2mm !important;
  z-index: 20 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.rev50-portrait-back-logos {
  position: absolute !important;
  top: 4.5mm !important;
  left: 50% !important;
  right: auto !important;
  width: max-content !important;
  max-width: 100% !important;
  height: 8.8mm !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3.5mm !important;
  margin: 0 auto !important;
  z-index: 50 !important;
  text-align: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.rev50-portrait-logos img,
.rev50-portrait-logos .logo-img-equal {
  width: 8.5mm !important;
  height: 8.5mm !important;
  min-width: 8.5mm !important;
  min-height: 8.5mm !important;
  max-width: 8.5mm !important;
  max-height: 8.5mm !important;
  object-fit: contain !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.rev50-portrait-back-logos img,
.rev50-portrait-back-logos .logo-img-equal {
  width: 8.5mm !important;
  height: 8.5mm !important;
  min-width: 8.5mm !important;
  min-height: 8.5mm !important;
  max-width: 8.5mm !important;
  max-height: 8.5mm !important;
  object-fit: contain !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.rev50-portrait-line-1 {
  position: absolute !important;
  top: 11.5mm !important;
  left: 3.2mm !important;
  right: 3.2mm !important;
  height: 0.5mm !important;
  background: #0b4f9c !important;
  z-index: 5 !important;
}

.rev50-portrait-line-2 {
  position: absolute !important;
  top: 24mm !important;
  left: 3.2mm !important;
  right: 3.2mm !important;
  height: 0.5mm !important;
  background: #0b4f9c !important;
  z-index: 5 !important;
}

.rev50-portrait-header {
  position: absolute !important;
  top: 12.2mm !important;
  left: 2mm !important;
  right: 2mm !important;
  text-align: center !important;
  z-index: 5 !important;
}

.rev50-portrait-header .puk-title-line1,
.rev50-portrait-header .puk-title-line2 {
  font-size: 1.7mm !important;
  font-weight: 800 !important;
  color: #071a37 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}

.rev50-portrait-header .puk-title-line3 {
  font-size: 1.8mm !important;
  font-weight: 900 !important;
  color: #dc2626 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}

.rev50-portrait-header .puk-title-line4 {
  font-size: 1.85mm !important;
  font-weight: 900 !important;
  color: #0b4f9c !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  margin-top: 0.3mm !important;
}

.rev50-portrait-photo-centered {
  position: absolute !important;
  top: 25.5mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 22mm !important;
  height: 27mm !important;
  border: 0.5mm solid #0b4f9c !important;
  border-radius: 1.5mm !important;
  overflow: hidden !important;
  background: #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.2mm !important;
  font-weight: 800 !important;
  color: #64748b !important;
  z-index: 5 !important;
}

.rev50-portrait-photo-centered img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.rev50-portrait-values-below-photo {
  position: absolute !important;
  top: 54mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8mm !important;
  z-index: 5 !important;
}

.rev50-portrait-row {
  display: grid !important;
  grid-template-columns: 13.5mm 1.5mm 1fr !important;
  align-items: center !important;
  font-size: 1.95mm !important;
  line-height: 1.1 !important;
  color: #071a37 !important;
}

.rev50-portrait-row b { font-weight: 800 !important; }
.rev50-portrait-row span { text-align: center !important; font-weight: 800 !important; }
.rev50-portrait-row strong { font-weight: 700 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; color: #0f172a !important; }

.rev50-portrait-red-footer-kta {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 5.5mm !important;
  background: #dc2626 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.1mm !important;
  font-weight: 900 !important;
  letter-spacing: 0.2mm !important;
  z-index: 5 !important;
}

.rev50-portrait-back-header {
  position: absolute !important;
  top: 12.2mm !important;
  left: 2mm !important;
  right: 2mm !important;
  text-align: center !important;
  z-index: 5 !important;
}

.rev50-portrait-back-header .puk-back-title1 {
  font-size: 2.1mm !important;
  font-weight: 950 !important;
  color: #071a37 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15mm !important;
}

.rev50-portrait-back-header .puk-back-title2 {
  font-size: 1.85mm !important;
  font-weight: 800 !important;
  color: #0b4f9c !important;
  text-transform: uppercase !important;
  margin-top: 0.3mm !important;
}

.rev50-portrait-back-rules-new {
  position: absolute !important;
  top: 21mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  z-index: 5 !important;
}

.rev50-portrait-back-rules-new h2 {
  margin: 0 0 0.8mm !important;
  font-size: 2mm !important;
  font-weight: 900 !important;
  color: #071a37 !important;
  text-transform: uppercase !important;
}

.rev50-portrait-back-rules-new ol {
  margin: 0 !important;
  padding-left: 3.5mm !important;
  font-size: 1.6mm !important;
  line-height: 1.25 !important;
  color: #1e293b !important;
  font-weight: 600 !important;
}

.rev50-portrait-back-qr-centered {
  position: absolute !important;
  top: 42mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 17mm !important;
  height: 19mm !important;
  background: #ffffff !important;
  border: 0.4mm solid #0b4f9c !important;
  border-radius: 1mm !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1mm !important;
  z-index: 5 !important;
}

.rev50-portrait-back-qr-centered img,
.rev50-portrait-back-qr-centered svg {
  width: 13.5mm !important;
  height: 13.5mm !important;
  object-fit: contain !important;
}

.rev50-portrait-back-qr-centered em {
  font-style: normal !important;
  font-size: 1.2mm !important;
  font-weight: 900 !important;
  color: #0b4f9c !important;
  margin-top: 0.4mm !important;
}

.rev50-portrait-back-signs-row {
  position: absolute !important;
  bottom: 8.5mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  display: flex !important;
  justify-content: space-between !important;
  z-index: 5 !important;
}

.rev50-portrait-sign-col {
  width: 22mm !important;
  text-align: center !important;
}

.rev50-portrait-sign-col .sign-title {
  font-size: 1.6mm !important;
  font-weight: 800 !important;
  color: #071a37 !important;
}

.rev50-portrait-sign-col .sign-img {
  height: 5mm !important;
  max-width: 20mm !important;
  object-fit: contain !important;
  margin: 0.3mm auto !important;
  display: block !important;
}

.rev50-portrait-sign-col .sign-name {
  font-size: 1.5mm !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  border-top: 0.15mm solid #071a37 !important;
  padding-top: 0.3mm !important;
}

.rev50-portrait-back-address-footer {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 6.5mm !important;
  background: #071a37 !important;
  color: #ffffff !important;
  padding: 0.5mm 2mm !important;
  font-size: 1.45mm !important;
  line-height: 1.15 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
}

@media print {
  .rev50-card,
  .rev50-card.rev50-portrait {
    width: 54mm !important;
    height: 85.6mm !important;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}


/* ===== MAXIMUM SPECIFICITY PORTRAIT (BERDIRI) KTA OVERRIDES ===== */
#ktaPreview,
body #ktaPreview,
body.session-authenticated #app #ktaPreview {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12mm !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 12px !important;
  background: transparent !important;
}

#ktaPreview .rev50-sheet,
body #ktaPreview .rev50-sheet,
body.session-authenticated #app #ktaPreview .rev50-sheet {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 12mm !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  transform: none !important;
}

#ktaPreview .rev50-card,
#ktaPreview .rev50-card.rev50-portrait,
body #ktaPreview .rev50-card,
body #ktaPreview .rev50-card.rev50-portrait,
body.session-authenticated #app #ktaPreview .rev50-card,
body.session-authenticated #app #ktaPreview .rev50-card.rev50-portrait {
  width: 54mm !important;
  height: 85.6mm !important;
  min-width: 54mm !important;
  min-height: 85.6mm !important;
  max-width: 54mm !important;
  max-height: 85.6mm !important;
  aspect-ratio: 54 / 85.6 !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 3.8mm !important;
  box-shadow: 0 6px 22px rgba(0,0,0,0.22) !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  background-image: url('assets/kta-portrait-bg-epson.jpg') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

#ktaPreview .rev50-card.rev50-back,
body #ktaPreview .rev50-card.rev50-back,
body.session-authenticated #app #ktaPreview .rev50-card.rev50-back {
  background-image: url('assets/kta-portrait-bg-back-epson.jpg') !important;
}


/* ===== OFFICIAL USER UPLOADED PORTRAIT KTA TEMPLATE STYLES ===== */
#ktaPreview,
body #ktaPreview,
body.session-authenticated #app #ktaPreview {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 14mm !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 15px !important;
  background: transparent !important;
}

#ktaPreview .rev50-sheet,
body #ktaPreview .rev50-sheet {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 14mm !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  background: transparent !important;
}

#ktaPreview .rev50-card,
#ktaPreview .rev50-card.rev50-portrait,
body #ktaPreview .rev50-card,
body #ktaPreview .rev50-card.rev50-portrait {
  width: 54mm !important;
  height: 85.6mm !important;
  min-width: 54mm !important;
  min-height: 85.6mm !important;
  max-width: 54mm !important;
  max-height: 85.6mm !important;
  aspect-ratio: 54 / 85.6 !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 3.8mm !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22) !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
}

#ktaPreview .rev50-card.rev50-front,
body #ktaPreview .rev50-card.rev50-front {
  background-image: url('assets/kta-portrait-bg-epson.jpg') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

#ktaPreview .rev50-card.rev50-back,
body #ktaPreview .rev50-card.rev50-back {
  background-image: url('assets/kta-portrait-bg-back-epson.jpg') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

@media print {
  #ktaPreview .rev50-card,
  #ktaPreview .rev50-card.rev50-portrait,
  .rev50-card,
  .rev50-card.rev50-portrait {
    width: 54mm !important;
    height: 85.6mm !important;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}


/* ===== REAL SIZE KTA PORTRAIT ELEMENT PROPORTIONS ===== */
.rev50-portrait-logos {
  position: absolute !important;
  top: 3.2mm !important;
  left: 3.5mm !important;
  display: flex !important;
  align-items: center !important;
  gap: 1.8mm !important;
  z-index: 5 !important;
}

.rev50-portrait-back-logos {
  position: absolute !important;
  top: 4.5mm !important;
  left: 50% !important;
  right: auto !important;
  width: max-content !important;
  max-width: 100% !important;
  height: 8.8mm !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3.5mm !important;
  margin: 0 auto !important;
  z-index: 50 !important;
  text-align: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.rev50-portrait-logos img {
  height: 7.2mm !important;
  width: auto !important;
  max-width: 9.5mm !important;
  object-fit: contain !important;
}

.rev50-portrait-back-logos img,
.rev50-portrait-back-logos .logo-img-equal {
  width: 8.2mm !important;
  height: 8.2mm !important;
  min-width: 8.2mm !important;
  min-height: 8.2mm !important;
  max-width: 8.2mm !important;
  max-height: 8.2mm !important;
  object-fit: contain !important;
  display: inline-block !important;
}

.rev50-portrait-line-1 {
  position: absolute !important;
  top: 11.2mm !important;
  left: 3.2mm !important;
  right: 3.2mm !important;
  height: 0.4mm !important;
  background: #0b4f9c !important;
  z-index: 5 !important;
}

.rev50-portrait-header {
  position: absolute !important;
  top: 11.8mm !important;
  left: 2mm !important;
  right: 2mm !important;
  text-align: center !important;
  z-index: 5 !important;
}

.rev50-portrait-header .puk-title-line1,
.rev50-portrait-header .puk-title-line2 {
  font-size: 1.6mm !important;
  font-weight: 800 !important;
  color: #071a37 !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}

.rev50-portrait-header .puk-title-line3 {
  font-size: 1.7mm !important;
  font-weight: 900 !important;
  color: #dc2626 !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}

.rev50-portrait-header .puk-title-line4 {
  font-size: 1.75mm !important;
  font-weight: 900 !important;
  color: #0b4f9c !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  margin-top: 0.2mm !important;
}

.rev50-portrait-line-2 {
  position: absolute !important;
  top: 23.2mm !important;
  left: 3.2mm !important;
  right: 3.2mm !important;
  height: 0.4mm !important;
  background: #0b4f9c !important;
  z-index: 5 !important;
}

.rev50-portrait-photo-centered {
  position: absolute !important;
  top: 24.5mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 21mm !important;
  height: 26mm !important;
  border: 0.45mm solid #0b4f9c !important;
  border-radius: 1.5mm !important;
  overflow: hidden !important;
  background: #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.2mm !important;
  font-weight: 800 !important;
  color: #64748b !important;
  z-index: 5 !important;
}

.rev50-portrait-photo-centered img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.rev50-portrait-values-below-photo {
  position: absolute !important;
  top: 52.5mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.7mm !important;
  z-index: 5 !important;
}

.rev50-portrait-row {
  display: grid !important;
  grid-template-columns: 13.5mm 1.5mm 1fr !important;
  align-items: center !important;
  font-size: 1.85mm !important;
  line-height: 1.05 !important;
  color: #071a37 !important;
}

.rev50-portrait-row b { font-weight: 800 !important; }
.rev50-portrait-row span { text-align: center !important; font-weight: 800 !important; }
.rev50-portrait-row strong { font-weight: 700 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; color: #0f172a !important; }

.rev50-portrait-red-footer-kta {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 5.2mm !important;
  background: #dc2626 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2mm !important;
  font-weight: 900 !important;
  letter-spacing: 0.15mm !important;
  z-index: 5 !important;
}

.rev50-portrait-back-header {
  position: absolute !important;
  top: 11.8mm !important;
  left: 2mm !important;
  right: 2mm !important;
  text-align: center !important;
  z-index: 5 !important;
}

.rev50-portrait-back-header .puk-back-title1 {
  font-size: 2mm !important;
  font-weight: 950 !important;
  color: #071a37 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15mm !important;
}

.rev50-portrait-back-header .puk-back-title2 {
  font-size: 1.75mm !important;
  font-weight: 800 !important;
  color: #0b4f9c !important;
  text-transform: uppercase !important;
  margin-top: 0.2mm !important;
}

.rev50-portrait-back-rules-new {
  position: absolute !important;
  top: 20mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  z-index: 5 !important;
}

.rev50-portrait-back-rules-new h2 {
  margin: 0 0 0.6mm !important;
  font-size: 1.9mm !important;
  font-weight: 900 !important;
  color: #071a37 !important;
  text-transform: uppercase !important;
}

.rev50-portrait-back-rules-new ol {
  margin: 0 !important;
  padding-left: 3.2mm !important;
  font-size: 1.5mm !important;
  line-height: 1.2 !important;
  color: #1e293b !important;
  font-weight: 600 !important;
}

.rev50-portrait-back-qr-centered {
  position: absolute !important;
  top: 41mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 16mm !important;
  height: 18mm !important;
  background: #ffffff !important;
  border: 0.4mm solid #0b4f9c !important;
  border-radius: 1mm !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.8mm !important;
  z-index: 5 !important;
}

.rev50-portrait-back-qr-centered img,
.rev50-portrait-back-qr-centered svg {
  width: 12.8mm !important;
  height: 12.8mm !important;
  object-fit: contain !important;
}

.rev50-portrait-back-qr-centered em {
  font-style: normal !important;
  font-size: 1.1mm !important;
  font-weight: 900 !important;
  color: #0b4f9c !important;
  margin-top: 0.3mm !important;
}

.rev50-portrait-back-signs-row {
  position: absolute !important;
  bottom: 8mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  display: flex !important;
  justify-content: space-between !important;
  z-index: 5 !important;
}

.rev50-portrait-sign-col {
  width: 21mm !important;
  text-align: center !important;
}

.rev50-portrait-sign-col .sign-title {
  font-size: 1.5mm !important;
  font-weight: 800 !important;
  color: #071a37 !important;
}

.rev50-portrait-sign-col .sign-img {
  height: 4.8mm !important;
  max-width: 19mm !important;
  object-fit: contain !important;
  margin: 0.2mm auto !important;
  display: block !important;
}

.rev50-portrait-sign-col .sign-name {
  font-size: 1.45mm !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  border-top: 0.15mm solid #071a37 !important;
  padding-top: 0.2mm !important;
}

.rev50-portrait-back-address-footer {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 6mm !important;
  background: #071a37 !important;
  color: #ffffff !important;
  padding: 0.5mm 1.5mm !important;
  font-size: 1.4mm !important;
  line-height: 1.1 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
}


/* ===== EXACT USER SPECIFICATIONS FOR KTA PORTRAIT FRONT & BACK ===== */
.logo-img-equal {
  width: 7.8mm !important;
  height: 7.8mm !important;
  max-width: 7.8mm !important;
  max-height: 7.8mm !important;
  object-fit: contain !important;
}

/* FRONT CARD */
.rev50-portrait-logos {
  position: absolute !important;
  top: 3.2mm !important;
  left: 3.5mm !important;
  display: flex !important;
  align-items: center !important;
  gap: 1.8mm !important;
  z-index: 5 !important;
}

/* 2. Garis pertama dipendek, rata dengan logo epson */
.rev50-portrait-line-1-short {
  position: absolute !important;
  top: 11.6mm !important;
  left: 3.5mm !important;
  width: 17.5mm !important;
  height: 0.45mm !important;
  background: #0b4f9c !important;
  z-index: 5 !important;
}

/* 3. Tulisan header turun 1 tingkat, rata kiri, fontsize naikkan 2 tingkat */
.rev50-portrait-header-left {
  position: absolute !important;
  top: 12.8mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  text-align: left !important;
  z-index: 5 !important;
}

.rev50-portrait-header-left .puk-title-line1,
.rev50-portrait-header-left .puk-title-line2 {
  font-size: 1.9mm !important;
  font-weight: 850 !important;
  color: #071a37 !important;
  line-height: 1.08 !important;
  text-transform: uppercase !important;
}

.rev50-portrait-header-left .puk-title-line3 {
  font-size: 1.95mm !important;
  font-weight: 900 !important;
  color: #dc2626 !important;
  line-height: 1.08 !important;
  text-transform: uppercase !important;
}

.rev50-portrait-header-left .puk-title-line4 {
  font-size: 2mm !important;
  font-weight: 900 !important;
  color: #0b4f9c !important;
  line-height: 1.08 !important;
  text-transform: uppercase !important;
  margin-top: 0.2mm !important;
}

/* 4. Garis kedua panjangnya sama dengan ujung tulisan */
.rev50-portrait-line-2-header {
  position: absolute !important;
  top: 24.2mm !important;
  left: 3.5mm !important;
  width: 47mm !important;
  height: 0.45mm !important;
  background: #0b4f9c !important;
  z-index: 5 !important;
}

/* Foto Anggota di Tengah */
.rev50-portrait-photo-centered {
  position: absolute !important;
  top: 25.5mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 21mm !important;
  height: 26mm !important;
  border: 0.45mm solid #0b4f9c !important;
  border-radius: 1.5mm !important;
  overflow: hidden !important;
  background: #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.2mm !important;
  font-weight: 800 !important;
  color: #64748b !important;
  z-index: 5 !important;
}

/* 5. Data anggota naikkan size font 2 tingkat */
.rev50-portrait-values-below-photo {
  position: absolute !important;
  top: 52.8mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75mm !important;
  z-index: 5 !important;
}

.rev50-portrait-row {
  display: grid !important;
  grid-template-columns: 14mm 1.5mm 1fr !important;
  align-items: center !important;
  font-size: 2.1mm !important;
  line-height: 1.08 !important;
  color: #071a37 !important;
}

.rev50-portrait-row b { font-weight: 850 !important; }
.rev50-portrait-row span { text-align: center !important; font-weight: 850 !important; }
.rev50-portrait-row strong { font-weight: 750 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; color: #0f172a !important; }

/* 6. Footer (area merah) no KTA posisi tengah-tengah, size font naik 3 tingkat */
.rev50-portrait-red-footer-centered {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 5.5mm !important;
  background: #dc2626 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 2.5mm !important;
  font-weight: 950 !important;
  letter-spacing: 0.2mm !important;
  z-index: 5 !important;
}

/* BACK CARD */
/* 1. Kedua logo berada ditengah, ukuran proporsional */
.rev50-portrait-back-logos-centered {
  position: absolute !important;
  top: 3.2mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3mm !important;
  z-index: 5 !important;
}

/* 2. Tulisan header belakang size naik 2 tingkat */
.rev50-portrait-back-header-large {
  position: absolute !important;
  top: 12mm !important;
  left: 2mm !important;
  right: 2mm !important;
  text-align: center !important;
  z-index: 5 !important;
}

.rev50-portrait-back-header-large .puk-back-title1 {
  font-size: 2.2mm !important;
  font-weight: 950 !important;
  color: #071a37 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15mm !important;
}

.rev50-portrait-back-header-large .puk-back-title2 {
  font-size: 1.9mm !important;
  font-weight: 850 !important;
  color: #0b4f9c !important;
  text-transform: uppercase !important;
  margin-top: 0.2mm !important;
}

/* 3. Ketentuan KTA 4 poin eksplisit, size naik 2 tingkat */
.rev50-portrait-back-rules-explicit {
  position: absolute !important;
  top: 19.8mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  z-index: 5 !important;
}

.rev50-portrait-back-rules-explicit h2 {
  margin: 0 0 0.6mm !important;
  font-size: 2.1mm !important;
  font-weight: 900 !important;
  color: #071a37 !important;
  text-transform: uppercase !important;
}

.rev50-portrait-back-rules-explicit ol {
  margin: 0 !important;
  padding-left: 3.2mm !important;
  font-size: 1.75mm !important;
  line-height: 1.2 !important;
  color: #1e293b !important;
  font-weight: 650 !important;
}

.rev50-portrait-back-rules-explicit li {
  margin-bottom: 0.4mm !important;
}

/* QR Code */
.rev50-portrait-back-qr-centered {
  position: absolute !important;
  top: 41.5mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 15mm !important;
  height: 17mm !important;
  background: #ffffff !important;
  border: 0.4mm solid #0b4f9c !important;
  border-radius: 1mm !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.8mm !important;
  z-index: 5 !important;
}

.rev50-portrait-back-qr-centered img,
.rev50-portrait-back-qr-centered svg {
  width: 12mm !important;
  height: 12mm !important;
  object-fit: contain !important;
}

.rev50-portrait-back-qr-centered em {
  font-style: normal !important;
  font-size: 1.1mm !important;
  font-weight: 900 !important;
  color: #0b4f9c !important;
  margin-top: 0.2mm !important;
}

/* 4 & 5. Nama ketua & sekretaris naik keatas 2 tingkat, nama berada diatas garis, stempel & ttd tampil */
.rev50-portrait-back-signs-up {
  position: absolute !important;
  bottom: 9.5mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  z-index: 5 !important;
}

.rev50-portrait-sign-col {
  width: 21mm !important;
  text-align: center !important;
  position: relative !important;
}

.rev50-portrait-sign-col .sign-title {
  font-size: 1.6mm !important;
  font-weight: 850 !important;
  color: #071a37 !important;
}

.rev50-portrait-sign-col .sign-img {
  height: 5.5mm !important;
  max-width: 19mm !important;
  object-fit: contain !important;
  margin: 0.2mm auto !important;
  display: block !important;
}

.rev50-portrait-sign-col .sign-img-placeholder {
  height: 5.5mm !important;
}

/* NAMA BERADA DI ATAS GARIS */
.sign-name-above-line {
  font-size: 1.55mm !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  margin-bottom: 0.2mm !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sign-line-underline {
  height: 0.2mm !important;
  background: #071a37 !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.rev50-portrait-stamp-center {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 1mm !important;
  width: 9.5mm !important;
  height: 9.5mm !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 6 !important;
  pointer-events: none !important;
}

.rev50-portrait-stamp-center .stamp-img {
  max-width: 9.5mm !important;
  max-height: 9.5mm !important;
  object-fit: contain !important;
  opacity: 0.9 !important;
}

/* 6. Footer alamat PUK */
.rev50-portrait-back-address-footer {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 6mm !important;
  background: #071a37 !important;
  color: #ffffff !important;
  padding: 0.5mm 1.5mm !important;
  font-size: 1.45mm !important;
  line-height: 1.1 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
}


/* ===== V2 EXACT SPECIFICATIONS OVERRIDES ===== */

/* DEPAN */
/* 1. tulisan Header turun 1 tingkat, size font naik 2 tingkat */
.rev50-portrait-header-left {
  position: absolute !important;
  top: 13.8mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  text-align: left !important;
  z-index: 5 !important;
}

.rev50-portrait-header-left .puk-title-line1,
.rev50-portrait-header-left .puk-title-line2 {
  font-size: 2.1mm !important;
  font-weight: 850 !important;
  color: #071a37 !important;
  line-height: 1.08 !important;
  text-transform: uppercase !important;
}

.rev50-portrait-header-left .puk-title-line3 {
  font-size: 2.15mm !important;
  font-weight: 900 !important;
  color: #dc2626 !important;
  line-height: 1.08 !important;
  text-transform: uppercase !important;
}

.rev50-portrait-header-left .puk-title-line4 {
  font-size: 2.2mm !important;
  font-weight: 900 !important;
  color: #0b4f9c !important;
  line-height: 1.08 !important;
  text-transform: uppercase !important;
  margin-top: 0.2mm !important;
}

.rev50-portrait-line-2-header {
  position: absolute !important;
  top: 25.5mm !important;
  left: 3.5mm !important;
  width: 47mm !important;
  height: 0.45mm !important;
  background: #0b4f9c !important;
  z-index: 5 !important;
}

/* 2. area foto turun 2 tingkat */
.rev50-portrait-photo-centered {
  position: absolute !important;
  top: 27.2mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 21mm !important;
  height: 25.5mm !important;
  border: 0.45mm solid #0b4f9c !important;
  border-radius: 1.5mm !important;
  overflow: hidden !important;
  background: #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.2mm !important;
  font-weight: 800 !important;
  color: #64748b !important;
  z-index: 5 !important;
}

/* 3. data anggota, font size naikkan 3 tingkat */
.rev50-portrait-values-below-photo {
  position: absolute !important;
  top: 53.8mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8mm !important;
  z-index: 5 !important;
}

.rev50-portrait-row {
  display: grid !important;
  grid-template-columns: 14.5mm 1.5mm 1fr !important;
  align-items: center !important;
  font-size: 2.35mm !important;
  line-height: 1.1 !important;
  color: #071a37 !important;
}

.rev50-portrait-row b { font-weight: 850 !important; }
.rev50-portrait-row span { text-align: center !important; font-weight: 850 !important; }
.rev50-portrait-row strong { font-weight: 750 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; color: #0f172a !important; }

/* 4. footer, font size naikkan 3 tingkat */
.rev50-portrait-red-footer-centered {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 5.6mm !important;
  background: #dc2626 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 2.8mm !important;
  font-weight: 950 !important;
  letter-spacing: 0.2mm !important;
  z-index: 5 !important;
}

/* BELAKANG */
/* 1. kedua logo turun 3 tingkat */
.rev50-portrait-back-logos-centered {
  position: absolute !important;
  top: 5mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3mm !important;
  z-index: 5 !important;
}

/* 2. tulisan header naikkan 3 tingkat */
.rev50-portrait-back-header-large {
  position: absolute !important;
  top: 14mm !important;
  left: 2mm !important;
  right: 2mm !important;
  text-align: center !important;
  z-index: 5 !important;
}

.rev50-portrait-back-header-large .puk-back-title1 {
  font-size: 2.4mm !important;
  font-weight: 950 !important;
  color: #071a37 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15mm !important;
}

.rev50-portrait-back-header-large .puk-back-title2 {
  font-size: 2.1mm !important;
  font-weight: 850 !important;
  color: #0b4f9c !important;
  text-transform: uppercase !important;
  margin-top: 0.2mm !important;
}

/* 3. Ketentuan 1-4 font size naikkan 4 tingkat */
.rev50-portrait-back-rules-explicit {
  position: absolute !important;
  top: 22.5mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  z-index: 5 !important;
}

.rev50-portrait-back-rules-explicit h2 {
  margin: 0 0 0.6mm !important;
  font-size: 2.3mm !important;
  font-weight: 900 !important;
  color: #071a37 !important;
  text-transform: uppercase !important;
}

.rev50-portrait-back-rules-explicit ol {
  margin: 0 !important;
  padding-left: 3.2mm !important;
  font-size: 1.95mm !important;
  line-height: 1.25 !important;
  color: #1e293b !important;
  font-weight: 650 !important;
}

.rev50-portrait-back-rules-explicit li {
  margin-bottom: 0.5mm !important;
}

/* 4. code QR turun 4, kode perbesar */
.rev50-portrait-back-qr-centered {
  position: absolute !important;
  top: 45mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 17.5mm !important;
  height: 19.5mm !important;
  background: #ffffff !important;
  border: 0.4mm solid #0b4f9c !important;
  border-radius: 1mm !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.8mm !important;
  z-index: 5 !important;
}

.rev50-portrait-back-qr-centered img,
.rev50-portrait-back-qr-centered svg {
  width: 14.5mm !important;
  height: 14.5mm !important;
  object-fit: contain !important;
}

.rev50-portrait-back-qr-centered em {
  font-style: normal !important;
  font-size: 1.25mm !important;
  font-weight: 900 !important;
  color: #0b4f9c !important;
  margin-top: 0.2mm !important;
}

/* 5. Nama Ketua Sekretaris, garis tanda tangan stempel naik 3 tingkat */
.rev50-portrait-back-signs-up {
  position: absolute !important;
  bottom: 11.5mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  z-index: 5 !important;
}

.rev50-portrait-sign-col .sign-title {
  font-size: 1.7mm !important;
  font-weight: 850 !important;
  color: #071a37 !important;
}

.rev50-portrait-sign-col .sign-img {
  height: 6mm !important;
  max-width: 19mm !important;
  object-fit: contain !important;
  margin: 0.2mm auto !important;
  display: block !important;
}

.sign-name-above-line {
  font-size: 1.7mm !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  margin-bottom: 0.2mm !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* ===== V3 EXACT SPECIFICATIONS CSS OVERRIDES ===== */

/* DEPAN */
/* 1. DEPAN: font size naikkan 3 tingkat, paragraf naikkan 2 tingkat */
.rev50-portrait-header-v3 {
  position: absolute !important;
  top: 12.2mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  text-align: left !important;
  z-index: 5 !important;
}

.rev50-portrait-header-v3 .puk-title-line1,
.rev50-portrait-header-v3 .puk-title-line2 {
  font-size: 2.2mm !important;
  font-weight: 850 !important;
  color: #071a37 !important;
  line-height: 1.08 !important;
  text-transform: uppercase !important;
}

.rev50-portrait-header-v3 .puk-title-line3 {
  font-size: 2.3mm !important;
  font-weight: 900 !important;
  color: #dc2626 !important;
  line-height: 1.08 !important;
  text-transform: uppercase !important;
}

.rev50-portrait-header-v3 .puk-title-line4 {
  font-size: 2.4mm !important;
  font-weight: 900 !important;
  color: #0b4f9c !important;
  line-height: 1.08 !important;
  text-transform: uppercase !important;
  margin-top: 0.2mm !important;
}

.rev50-portrait-line-2-header-v3 {
  position: absolute !important;
  top: 26.2mm !important;
  left: 3.5mm !important;
  width: 47mm !important;
  height: 0.45mm !important;
  background: #0b4f9c !important;
  z-index: 5 !important;
}

/* 2. DEPAN: foto anggota turun 2 tingkat */
.rev50-portrait-photo-v3 {
  position: absolute !important;
  top: 28mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 21mm !important;
  height: 25.5mm !important;
  border: 0.45mm solid #0b4f9c !important;
  border-radius: 1.5mm !important;
  overflow: hidden !important;
  background: #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.2mm !important;
  font-weight: 800 !important;
  color: #64748b !important;
  z-index: 5 !important;
}

.rev50-portrait-photo-v3 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center !important;
  background: #ffffff !important;
}

/* BELAKANG */
/* 1. BELAKANG: kedua logo turun 3 tingkat */
.rev50-portrait-back-logos-v3 {
  position: absolute !important;
  top: 6mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3mm !important;
  z-index: 5 !important;
}

/* 2. BELAKANG: header + FEDERASI SERIKAT PEKERJA GLOBAL INDONESIA (Warna Merah Bold) */
.rev50-portrait-back-header-v3 {
  position: absolute !important;
  top: 14.5mm !important;
  left: 2mm !important;
  right: 2mm !important;
  text-align: center !important;
  z-index: 5 !important;
}

.rev50-portrait-back-header-v3 .puk-back-title1 {
  font-size: 2.2mm !important;
  font-weight: 950 !important;
  color: #071a37 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15mm !important;
}

.rev50-portrait-back-header-v3 .puk-back-title2 {
  font-size: 1.95mm !important;
  font-weight: 850 !important;
  color: #0b4f9c !important;
  text-transform: uppercase !important;
}

.rev50-portrait-back-header-v3 .puk-back-title3-red {
  font-size: 2.05mm !important;
  font-weight: 900 !important;
  color: #dc2626 !important;
  text-transform: uppercase !important;
  margin: 0.1mm 0 !important;
}

.rev50-portrait-back-header-v3 .puk-back-title4 {
  font-size: 1.9mm !important;
  font-weight: 850 !important;
  color: #0b4f9c !important;
  text-transform: uppercase !important;
}

/* 3. BELAKANG: tulisan ketentuan 1-4 naikkan size font 3 tingkat */
.rev50-portrait-back-rules-v3 {
  position: absolute !important;
  top: 23mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  z-index: 5 !important;
}

.rev50-portrait-back-rules-v3 h2 {
  margin: 0 0 0.6mm !important;
  font-size: 2.3mm !important;
  font-weight: 900 !important;
  color: #071a37 !important;
  text-transform: uppercase !important;
}

.rev50-portrait-back-rules-v3 ol {
  margin: 0 !important;
  padding-left: 3.2mm !important;
  font-size: 2.1mm !important;
  line-height: 1.22 !important;
  color: #1e293b !important;
  font-weight: 650 !important;
}

.rev50-portrait-back-rules-v3 li {
  margin-bottom: 0.5mm !important;
}

/* 4. BELAKANG: code QR turun 4 tingkat */
.rev50-portrait-back-qr-v3 {
  position: absolute !important;
  top: 47mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 17.5mm !important;
  height: 19.5mm !important;
  background: #ffffff !important;
  border: 0.4mm solid #0b4f9c !important;
  border-radius: 1mm !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.8mm !important;
  z-index: 5 !important;
}

.rev50-portrait-back-qr-v3 img,
.rev50-portrait-back-qr-v3 svg {
  width: 14.5mm !important;
  height: 14.5mm !important;
  object-fit: contain !important;
}

.rev50-portrait-back-qr-v3 em {
  font-style: normal !important;
  font-size: 1.25mm !important;
  font-weight: 900 !important;
  color: #0b4f9c !important;
  margin-top: 0.2mm !important;
}

/* 5 & 6 & 7. BELAKANG: nama ketua sekretaris dan stempel naik 2 tingkat + tulisan diatasnya + TTD perbesar & garis perjelas */
.rev50-portrait-back-signs-v3 {
  position: absolute !important;
  bottom: 11mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  z-index: 5 !important;
}

/* 6. Tulisan diatas ketua sekretaris */
.puk-board-header-text {
  text-align: center !important;
  font-size: 1.55mm !important;
  font-weight: 850 !important;
  color: #071a37 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  margin-bottom: 0.8mm !important;
}

.rev50-portrait-signs-row-cols {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  position: relative !important;
}

/* 7. Tanda tangan perbesar dan perjelas garis tanda tangannya */
.sign-img-large {
  height: 7mm !important;
  max-width: 21mm !important;
  object-fit: contain !important;
  margin: 0.2mm auto !important;
  display: block !important;
}

.sign-img-placeholder-large {
  height: 7mm !important;
}

.sign-line-thick {
  height: 0.35mm !important;
  background: #071a37 !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* 8. BELAKANG: footer, font size alamat perbesar 2 tingkat */
.rev50-portrait-back-address-v3 {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 6.2mm !important;
  background: #071a37 !important;
  color: #ffffff !important;
  padding: 0.5mm 1.5mm !important;
  font-size: 1.75mm !important;
  line-height: 1.15 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
}


/* ===== V4 EXACT SPECIFICATIONS CSS OVERRIDES ===== */

/* DEPAN */
/* 4. logo epson perbesar sama seperti besarnya logo fspgi */
.logo-img-equal {
  width: 8.5mm !important;
  height: 8.5mm !important;
  max-width: 8.5mm !important;
  max-height: 8.5mm !important;
  object-fit: contain !important;
}

/* 1. tulisan header turun lagi 2 tingkat */
.rev50-portrait-header-v3 {
  position: absolute !important;
  top: 14.2mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  text-align: left !important;
  z-index: 5 !important;
}

.rev50-portrait-line-2-header-v3 {
  position: absolute !important;
  top: 28.2mm !important;
  left: 3.5mm !important;
  width: 47mm !important;
  height: 0.45mm !important;
  background: #0b4f9c !important;
  z-index: 5 !important;
}

/* 2. foto turun 3 tingkat */
.rev50-portrait-photo-v3 {
  position: absolute !important;
  top: 30.5mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 21mm !important;
  height: 25.5mm !important;
  border: 0.45mm solid #0b4f9c !important;
  border-radius: 1.5mm !important;
  overflow: hidden !important;
  background: #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.2mm !important;
  font-weight: 800 !important;
  color: #64748b !important;
  z-index: 5 !important;
}

/* 3. tulisan data anggota semua turun 4 tingkat */
.rev50-portrait-values-below-photo {
  position: absolute !important;
  top: 57.5mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8mm !important;
  z-index: 5 !important;
}

/* BELAKANG */
/* 1. ketentuan dan 1-4 turun 4 tingkat */
.rev50-portrait-back-rules-v3 {
  position: absolute !important;
  top: 27mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  z-index: 5 !important;
}

/* 2. kode QR turun 4 tingkat, perbesar */
.rev50-portrait-back-qr-v3 {
  position: absolute !important;
  top: 51mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 18.5mm !important;
  height: 20.5mm !important;
  background: #ffffff !important;
  border: 0.4mm solid #0b4f9c !important;
  border-radius: 1mm !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.8mm !important;
  z-index: 5 !important;
}

.rev50-portrait-back-qr-v3 img,
.rev50-portrait-back-qr-v3 svg {
  width: 15.5mm !important;
  height: 15.5mm !important;
  object-fit: contain !important;
}

/* 3. Pimpinan Unit Kerja naik 3 tingkat, font size naik 3 tingkat */
.puk-board-header-text {
  text-align: center !important;
  font-size: 1.85mm !important;
  font-weight: 900 !important;
  color: #071a37 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  margin-bottom: 1.2mm !important;
}

/* 4. nama ketua dan sekretaris naik 3 tingkat */
/* 5. tanda tangan tolong diperjelas, tebal */
.rev50-portrait-back-signs-v3 {
  position: absolute !important;
  bottom: 13.5mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  z-index: 5 !important;
}

.sign-img-large {
  height: 7.5mm !important;
  max-width: 22mm !important;
  object-fit: contain !important;
  margin: 0.2mm auto !important;
  display: block !important;
  filter: contrast(140%) brightness(90%) !important;
}

.sign-line-thick {
  height: 0.4mm !important;
  background: #071a37 !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.sign-name-above-line {
  font-size: 1.75mm !important;
  font-weight: 950 !important;
  color: #0f172a !important;
  margin-bottom: 0.2mm !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* ===== V5 EXACT SPECIFICATIONS CSS OVERRIDES ===== */

/* DEPAN */
/* 1. logo epson naikkan 1 tingkat agar sama dengan logo fspgi */
.rev50-portrait-logos {
  position: absolute !important;
  top: 3.2mm !important;
  left: 3.5mm !important;
  display: flex !important;
  align-items: center !important;
  gap: 2mm !important;
  z-index: 5 !important;
}

.logo-img-equal {
  width: 8.5mm !important;
  height: 8.5mm !important;
  max-width: 8.5mm !important;
  max-height: 8.5mm !important;
  object-fit: contain !important;
  vertical-align: middle !important;
}

/* 2. foto turun 2 tingkat, perbesar */
.rev50-portrait-photo-v3 {
  position: absolute !important;
  top: 31.5mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 22.5mm !important;
  height: 27.5mm !important;
  border: 0.5mm solid #0b4f9c !important;
  border-radius: 1.5mm !important;
  overflow: hidden !important;
  background: #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.3mm !important;
  font-weight: 800 !important;
  color: #64748b !important;
  z-index: 5 !important;
}

/* 3. data anggota turun 3 tingkat, font size naikkan 3 tingkat */
.rev50-portrait-values-below-photo {
  position: absolute !important;
  top: 60mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85mm !important;
  z-index: 5 !important;
}

.rev50-portrait-row {
  display: grid !important;
  grid-template-columns: 15mm 1.5mm 1fr !important;
  align-items: center !important;
  font-size: 2.5mm !important;
  line-height: 1.1 !important;
  color: #071a37 !important;
}

/* BELAKANG */
/* 1. Ketentuan 1-4 turun 3 tingkat */
.rev50-portrait-back-rules-v3 {
  position: absolute !important;
  top: 28.5mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  z-index: 5 !important;
}

/* 2. kode QR turun 4 tingkat, perbesar */
.rev50-portrait-back-qr-v3 {
  position: absolute !important;
  top: 53.5mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 19.5mm !important;
  height: 21.5mm !important;
  background: #ffffff !important;
  border: 0.45mm solid #0b4f9c !important;
  border-radius: 1mm !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.8mm !important;
  z-index: 5 !important;
}

.rev50-portrait-back-qr-v3 img,
.rev50-portrait-back-qr-v3 svg {
  width: 16.5mm !important;
  height: 16.5mm !important;
  object-fit: contain !important;
}

/* 3. tulisan Ketua dan Sekretaris turun 2 tingkat */
.sign-title {
  font-size: 1.75mm !important;
  font-weight: 850 !important;
  color: #071a37 !important;
  margin-top: 0.8mm !important;
}

/* 4. tanda tangan perbesar, dan perjelas */
.sign-img-large {
  height: 8mm !important;
  max-width: 23mm !important;
  object-fit: contain !important;
  margin: 0.2mm auto !important;
  display: block !important;
  filter: contrast(150%) brightness(85%) !important;
}

.sign-img-placeholder-large {
  height: 8mm !important;
}


/* ===== V6 EXACT SPECIFICATIONS CSS OVERRIDES ===== */

/* DEPAN */
/* 1. logo epson perbesar agar sama dengan logo FSPGI */
.logo-img-equal {
  width: 9.2mm !important;
  height: 9.2mm !important;
  max-width: 9.2mm !important;
  max-height: 9.2mm !important;
  object-fit: contain !important;
  vertical-align: middle !important;
}

/* 2. data anggota turun 3 tingkat */
.rev50-portrait-values-below-photo {
  position: absolute !important;
  top: 62.5mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85mm !important;
  z-index: 5 !important;
}

/* BELAKANG */
/* 1. kode qr turun 3 tingkat */
.rev50-portrait-back-qr-v3 {
  position: absolute !important;
  top: 56mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 18.5mm !important;
  height: 20.5mm !important;
  background: #ffffff !important;
  border: 0.45mm solid #0b4f9c !important;
  border-radius: 1mm !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.8mm !important;
  z-index: 5 !important;
}

/* 2. tulisan PIMPINAN UNIT KERJA turun 2 tingkat */
.puk-board-header-text {
  text-align: center !important;
  font-size: 1.85mm !important;
  font-weight: 900 !important;
  color: #071a37 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  margin-top: 1.8mm !important;
  margin-bottom: 1.2mm !important;
}

/* 3. tulisan Ketua dan Sekretaris turun 2 tingkat */
.sign-title {
  font-size: 1.75mm !important;
  font-weight: 850 !important;
  color: #071a37 !important;
  margin-top: 1.8mm !important;
}


/* ===== V7 EXACT SPECIFICATIONS CSS OVERRIDES ===== */

/* BELAKANG */
/* 1. tulisan PIMPINAN UNIT KERJA turun 2 tingkat */
.puk-board-header-text {
  text-align: center !important;
  font-size: 1.85mm !important;
  font-weight: 900 !important;
  color: #071a37 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  margin-top: 3.5mm !important;
  margin-bottom: 1.2mm !important;
}

/* 2. kode QR turun 2 tingkat */
.rev50-portrait-back-qr-v3 {
  position: absolute !important;
  top: 58mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 18.5mm !important;
  height: 20.5mm !important;
  background: #ffffff !important;
  border: 0.45mm solid #0b4f9c !important;
  border-radius: 1mm !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.8mm !important;
  z-index: 5 !important;
}


/* ===== V8 EXACT SPECIFICATIONS OVERRIDES ===== */
/* BELAKANG */
/* 1. tulisan PIMPINAN UNIT KERJA turun 2 tingkat */
.puk-board-header-text {
  text-align: center !important;
  font-size: 1.85mm !important;
  font-weight: 900 !important;
  color: #071a37 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  margin-top: 3.5mm !important;
  margin-bottom: 1.2mm !important;
}

/* 2. kode QR turun 2 tingkat */
.rev50-portrait-back-qr-v3 {
  position: absolute !important;
  top: 58mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 18.5mm !important;
  height: 20.5mm !important;
  background: #ffffff !important;
  border: 0.45mm solid #0b4f9c !important;
  border-radius: 1mm !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.8mm !important;
  z-index: 5 !important;
}


/* ===== V9 EXACT SPECIFICATIONS OVERRIDES ===== */
/* 1. tulisan PIMPINAN UNIT KERJA turun 2 tingkat lagi */
.puk-board-header-text {
  text-align: center !important;
  font-size: 1.85mm !important;
  font-weight: 900 !important;
  color: #071a37 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  margin-top: 6mm !important;
  margin-bottom: 1.2mm !important;
}


/* ===== V10 EXACT SPECIFICATIONS OVERRIDES ===== */
/* 1. tulisan PIMPINAN UNIT KERJA turun 2 tingkat lagi */
.puk-board-header-text {
  text-align: center !important;
  font-size: 1.85mm !important;
  font-weight: 900 !important;
  color: #071a37 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  margin-top: 8.5mm !important;
  margin-bottom: 1.2mm !important;
}


/* ===== V11 EXACT SPECIFICATIONS OVERRIDES ===== */
/* 1. tulisan PIMPINAN UNIT KERJA turun 2 tingkat lagi */
.puk-board-header-text {
  text-align: center !important;
  font-size: 1.85mm !important;
  font-weight: 900 !important;
  color: #071a37 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  margin-top: 11mm !important;
  margin-bottom: 1.2mm !important;
}


/* ===== V12 EXACT SPECIFICATIONS OVERRIDES ===== */
/* tulisan PIMPINAN UNIT KERJA independen posisi top: 49mm (turun 2 tingkat secara presisi) */
.puk-board-header-text-v12 {
  position: absolute !important;
  top: 49mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  text-align: center !important;
  font-size: 1.85mm !important;
  font-weight: 900 !important;
  color: #071a37 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  z-index: 5 !important;
}

.puk-board-header-text {
  display: none !important;
}


/* ===== V13 EXACT SPECIFICATIONS OVERRIDES ===== */
/* kode QR diperjelas dan dibesarkan */
.rev50-portrait-back-qr-v3 {
  position: absolute !important;
  top: 56.5mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 20.5mm !important;
  height: 22.5mm !important;
  background: #ffffff !important;
  border: 0.5mm solid #0b4f9c !important;
  border-radius: 1.2mm !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.8mm !important;
  z-index: 5 !important;
  box-shadow: 0 1mm 3mm rgba(0,0,0,0.12) !important;
}

.rev50-portrait-back-qr-v3 img,
.rev50-portrait-back-qr-v3 svg {
  width: 17.8mm !important;
  height: 17.8mm !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}

.rev50-portrait-back-qr-v3 em {
  font-style: normal !important;
  font-size: 1.3mm !important;
  font-weight: 900 !important;
  color: #0b4f9c !important;
  margin-top: 0.2mm !important;
  letter-spacing: 0.1mm !important;
}


/* ===== V14 EXACT SPECIFICATIONS OVERRIDES ===== */
/* kode QR turun 2 tingkat */
.rev50-portrait-back-qr-v3 {
  position: absolute !important;
  top: 60.5mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 20.5mm !important;
  height: 22.5mm !important;
  background: #ffffff !important;
  border: 0.5mm solid #0b4f9c !important;
  border-radius: 1.2mm !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.8mm !important;
  z-index: 5 !important;
  box-shadow: 0 1mm 3mm rgba(0,0,0,0.12) !important;
}

/* ===================================================
   PORTRAIT KTA EPSON MASTER TEMPLATE EXACT SPECIFICATIONS
   =================================================== */

.rev50-card.rev50-portrait {
  width: 54mm !important;
  height: 85.6mm !important;
  min-width: 54mm !important;
  min-height: 85.6mm !important;
  max-width: 54mm !important;
  max-height: 85.6mm !important;
  aspect-ratio: 54 / 85.6 !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 3.8mm !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  box-sizing: border-box !important;
  color: #082b57 !important;
}

.rev50-card.rev50-portrait.rev50-front {
  background-image: url('assets/kta-portrait-bg-epson.jpg') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.rev50-card.rev50-portrait.rev50-back {
  background-image: url('assets/kta-portrait-bg-back-epson.jpg') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* DEPAN: LOGOS TOP LEFT */
.rev50-card.rev50-portrait .rev50-portrait-logos {
  position: absolute !important;
  top: 3.5mm !important;
  left: 3.5mm !important;
  display: flex !important;
  align-items: center !important;
  gap: 2mm !important;
  z-index: 5 !important;
}

.rev50-card.rev50-portrait .rev50-portrait-logos .logo-img-equal {
  width: 8.5mm !important;
  height: 8.5mm !important;
  max-width: 8.5mm !important;
  max-height: 8.5mm !important;
  object-fit: contain !important;
}

/* DEPAN: LINE UNDER LOGOS */
.rev50-card.rev50-portrait .rev50-portrait-line-1-short {
  position: absolute !important;
  top: 13.2mm !important;
  left: 3.5mm !important;
  width: 20mm !important;
  height: 0.45mm !important;
  background: #082b57 !important;
  z-index: 5 !important;
}

/* DEPAN: HEADER TEXT */
.rev50-card.rev50-portrait .rev50-portrait-header-v3 {
  position: absolute !important;
  top: 14.5mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  text-align: left !important;
  z-index: 5 !important;
}

.rev50-card.rev50-portrait .rev50-portrait-header-v3 .puk-title-line1,
.rev50-card.rev50-portrait .rev50-portrait-header-v3 .puk-title-line2,
.rev50-card.rev50-portrait .rev50-portrait-header-v3 .puk-title-line3,
.rev50-card.rev50-portrait .rev50-portrait-header-v3 .puk-title-line4 {
  font-size: 1.85mm !important;
  font-weight: 900 !important;
  color: #082b57 !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05mm !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* DEPAN: LINE UNDER HEADER TEXT */
.rev50-card.rev50-portrait .rev50-portrait-line-2-header-v3 {
  position: absolute !important;
  top: 22.2mm !important;
  left: 3.5mm !important;
  width: 47mm !important;
  height: 0.45mm !important;
  background: #082b57 !important;
  z-index: 5 !important;
}

/* DEPAN: PHOTO (CENTERED) */
.rev50-card.rev50-portrait .rev50-portrait-photo-v3 {
  position: absolute !important;
  top: 25.5mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 22.5mm !important;
  height: 27.5mm !important;
  border: 0.5mm solid #082b57 !important;
  border-radius: 2mm !important;
  overflow: hidden !important;
  background: #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.2mm !important;
  font-weight: 800 !important;
  color: #64748b !important;
  z-index: 5 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

.rev50-card.rev50-portrait .rev50-portrait-photo-v3 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* DEPAN: MEMBER DATA ROWS */
.rev50-card.rev50-portrait .rev50-portrait-values-v3 {
  position: absolute !important;
  top: 55mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8mm !important;
  z-index: 5 !important;
}

.rev50-card.rev50-portrait .rev50-portrait-row {
  display: grid !important;
  grid-template-columns: 14mm 1.5mm 1fr !important;
  align-items: center !important;
  font-size: 2.1mm !important;
  line-height: 1.15 !important;
  color: #082b57 !important;
}

.rev50-card.rev50-portrait .rev50-portrait-row b {
  font-weight: 900 !important;
}

.rev50-card.rev50-portrait .rev50-portrait-row span {
  font-weight: 900 !important;
  text-align: center !important;
}

.rev50-card.rev50-portrait .rev50-portrait-row strong {
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  color: #041d3b !important;
}

/* DEPAN & BELAKANG: RED FOOTER BANNER AT BOTTOM */
.rev50-card.rev50-portrait .rev50-portrait-red-footer-v3 {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 8mm !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 2.5mm !important;
  font-weight: 900 !important;
  letter-spacing: 0.15mm !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 0 1mm !important;
  z-index: 5 !important;
}

/* BELAKANG: LOGOS TOP CENTERED */
.rev50-card.rev50-portrait .rev50-portrait-back-logos {
  position: absolute !important;
  top: 4.5mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3mm !important;
  z-index: 5 !important;
}

.rev50-card.rev50-portrait .rev50-portrait-back-logos .logo-img-equal {
  width: 8.5mm !important;
  height: 8.5mm !important;
  max-width: 8.5mm !important;
  max-height: 8.5mm !important;
  object-fit: contain !important;
}

/* BELAKANG: HEADER TEXT */
.rev50-card.rev50-portrait .rev50-portrait-back-header {
  position: absolute !important;
  top: 13.5mm !important;
  left: 2mm !important;
  right: 2mm !important;
  text-align: center !important;
  z-index: 5 !important;
}

.rev50-card.rev50-portrait .rev50-portrait-back-header .puk-back-title1,
.rev50-card.rev50-portrait .rev50-portrait-back-header .puk-back-title2 {
  font-size: 2.05mm !important;
  font-weight: 900 !important;
  color: #082b57 !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
  letter-spacing: 0.1mm !important;
}

/* BELAKANG: KETENTUAN RULES LIST */
.rev50-card.rev50-portrait .rev50-portrait-back-rules-v3 {
  position: absolute !important;
  top: 20mm !important;
  left: 3.5mm !important;
  right: 3.5mm !important;
  z-index: 5 !important;
}

.rev50-card.rev50-portrait .rev50-portrait-back-rules-v3 ol {
  margin: 0 !important;
  padding-left: 3.2mm !important;
  font-size: 1.75mm !important;
  line-height: 1.25 !important;
  color: #082b57 !important;
  font-weight: 700 !important;
}

.rev50-card.rev50-portrait .rev50-portrait-back-rules-v3 li {
  margin-bottom: 0.4mm !important;
}

/* BELAKANG: QR CODE BOX */
.rev50-card.rev50-portrait .rev50-portrait-back-qr-v3 {
  position: absolute !important;
  top: 39.0mm !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 18.5mm !important;
  height: 20.5mm !important;
  background: #ffffff !important;
  border: 0.45mm solid #0b4f9c !important;
  border-radius: 1.2mm !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.6mm !important;
  z-index: 5 !important;
  box-shadow: 0 1mm 2mm rgba(0,0,0,0.08) !important;
}

.rev50-card.rev50-portrait .rev50-portrait-back-qr-v3 img,
.rev50-card.rev50-portrait .rev50-portrait-back-qr-v3 svg {
  width: 15.5mm !important;
  height: 15.5mm !important;
  object-fit: contain !important;
}

.rev50-card.rev50-portrait .rev50-portrait-back-qr-v3 .qr-verify-label {
  font-size: 1.15mm !important;
  font-weight: 900 !important;
  color: #0b4f9c !important;
  margin-top: 0.2mm !important;
  letter-spacing: 0.1mm !important;
}

/* BELAKANG: BOARD HEADER SUBTITLE ABOVE SIGNATURES */
.rev50-card.rev50-portrait .puk-board-header-text-v12 {
  position: absolute !important;
  top: 60.5mm !important;
  left: 2mm !important;
  right: 2mm !important;
  text-align: center !important;
  font-size: 1.5mm !important;
  font-weight: 900 !important;
  color: #082b57 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  z-index: 5 !important;
}

/* BELAKANG: SIGNATURES SECTION */
.rev50-card.rev50-portrait .rev50-portrait-back-signs-v3 {
  position: absolute !important;
  top: 66.5mm !important;
  left: 3mm !important;
  right: 3mm !important;
  z-index: 5 !important;
}

.rev50-card.rev50-portrait .rev50-portrait-signs-row-v3 {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  position: relative !important;
}

.rev50-card.rev50-portrait .rev50-portrait-sign-col-v3 {
  width: 20mm !important;
  text-align: center !important;
}

.rev50-card.rev50-portrait .sign-img-v3 {
  height: 5.5mm !important;
  max-width: 19mm !important;
  object-fit: contain !important;
  margin: 0 auto 0.2mm !important;
  display: block !important;
}

.rev50-card.rev50-portrait .sign-img-placeholder-v3 {
  height: 5.5mm !important;
}

.rev50-card.rev50-portrait .sign-name-v3 {
  font-size: 1.45mm !important;
  font-weight: 900 !important;
  color: #082b57 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 0.2mm !important;
}

.rev50-card.rev50-portrait .sign-line-v3 {
  height: 0.35mm !important;
  background: #082b57 !important;
  width: 100% !important;
  margin: 0 auto 0.2mm !important;
}

.rev50-card.rev50-portrait .sign-title-label {
  font-size: 1.35mm !important;
  font-weight: 800 !important;
  color: #082b57 !important;
}

/* BELAKANG: STAMP IMAGE OVERLAY - UNIFIED EXACT MILLIMETER POSITION */
.rev50-card.rev50-portrait .rev50-portrait-stamp-v3,
#ktaPreview .rev50-card.rev50-portrait .rev50-portrait-stamp-v3,
.kta-export-host .rev50-card.rev50-portrait .rev50-portrait-stamp-v3,
#ktaPrintRoot .rev50-card.rev50-portrait .rev50-portrait-stamp-v3,
.rev50-portrait-stamp-v3 {
  position: absolute !important;
  left: 21.75mm !important;
  top: 65.5mm !important;
  width: 10.5mm !important;
  height: 10.5mm !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 20 !important;
  pointer-events: none !important;
  transform: none !important;
  margin: 0 !important;
}

.rev50-card.rev50-portrait .rev50-portrait-stamp-v3 img,
#ktaPreview .rev50-card.rev50-portrait .rev50-portrait-stamp-v3 img,
.kta-export-host .rev50-card.rev50-portrait .rev50-portrait-stamp-v3 img,
#ktaPrintRoot .rev50-card.rev50-portrait .rev50-portrait-stamp-v3 img,
.rev50-portrait-stamp-v3 img {
  width: 10.5mm !important;
  height: 10.5mm !important;
  max-width: 10.5mm !important;
  max-height: 10.5mm !important;
  object-fit: contain !important;
  opacity: .92 !important;
  filter: contrast(1.3) brightness(0.9) !important;
  mix-blend-mode: multiply !important;
  display: block !important;
}





/* =====================================================================
   REVISI KTA PORTRAIT EPSON — MASTER FINAL SESUAI TEMPLATE YANG DIUPLOAD
   Ukuran fisik setiap sisi: 54 mm x 85,6 mm (portrait/berdiri)
   ===================================================================== */
:root{--kta-w:54mm;--kta-h:85.6mm;--kta-gap:14mm;--kta-ink:#071a37;--kta-blue:#0b4f9c}
.rev50-sheet,#ktaPreview .rev50-sheet,.kta-export-host .rev50-sheet,#ktaPrintRoot .rev50-sheet{width:calc((var(--kta-w) * 2) + var(--kta-gap))!important;height:var(--kta-h)!important;min-width:calc((var(--kta-w) * 2) + var(--kta-gap))!important;min-height:var(--kta-h)!important;max-width:none!important;padding:0!important;margin:0 auto!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:flex-start!important;justify-content:flex-start!important;gap:var(--kta-gap)!important;overflow:visible!important;background:transparent!important;box-sizing:border-box!important;transform-origin:top center!important}
.rev50-card,.rev50-card.rev50-portrait,#ktaPreview .rev50-card,.kta-export-host .rev50-card,#ktaPrintRoot .rev50-card{width:var(--kta-w)!important;height:var(--kta-h)!important;min-width:var(--kta-w)!important;min-height:var(--kta-h)!important;max-width:var(--kta-w)!important;max-height:var(--kta-h)!important;flex:0 0 var(--kta-w)!important;aspect-ratio:54/85.6!important;position:relative!important;overflow:hidden!important;margin:0!important;padding:0!important;border:0!important;border-radius:3.8mm!important;box-sizing:border-box!important;contain:layout paint!important;font-family:Arial,Helvetica,sans-serif!important;font-size:1px!important;color:var(--kta-ink)!important;background-color:#fff!important;background-size:100% 100%!important;background-repeat:no-repeat!important;background-position:center!important;box-shadow:0 2.2mm 5mm rgba(15,23,42,.20)!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
.rev50-card.rev50-front{background-image:url('assets/kta-portrait-bg-epson.jpeg')!important}
.rev50-card.rev50-back{background-image:url('assets/kta-portrait-bg-back-epson.jpeg')!important}.rev50-card.rev50-portrait .logo-img-equal,.rev50-card.rev50-portrait .rev50-portrait-logos img,.rev50-card.rev50-portrait .rev50-portrait-back-logos img{height:8.8mm!important;width:auto!important;min-height:8.8mm!important;max-height:8.8mm!important;max-width:10.2mm!important;object-fit:contain!important;border-radius:0!important;flex-shrink:0!important}
.rev50-card.rev50-portrait .rev50-portrait-line-1-short{position:absolute!important;top:13.5mm!important;left:3.5mm!important;width:25.2mm!important;height:.42mm!important;background:var(--kta-ink)!important;z-index:5!important}
.rev50-card.rev50-portrait .rev50-portrait-header-v3{position:absolute!important;top:14.1mm!important;left:3.5mm!important;right:3.3mm!important;text-align:left!important;z-index:5!important}
.rev50-card.rev50-portrait .rev50-portrait-header-v3 .puk-title-line1,.rev50-card.rev50-portrait .rev50-portrait-header-v3 .puk-title-line2,.rev50-card.rev50-portrait .rev50-portrait-header-v3 .puk-title-line3,.rev50-card.rev50-portrait .rev50-portrait-header-v3 .puk-title-line4{margin:0 0 0.15mm 0!important;padding:0!important;font-size:1.62mm!important;font-weight:900!important;color:var(--kta-ink)!important;line-height:1.22!important;letter-spacing:.01mm!important;text-transform:uppercase!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
.rev50-card.rev50-portrait .rev50-portrait-header-v3 .puk-title-line3{font-size:1.35mm!important;color:#dc2626!important;font-weight:900!important;letter-spacing:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.rev50-card.rev50-portrait .rev50-portrait-line-2-header-v3{position:absolute!important;top:23.8mm!important;left:3.5mm!important;width:35.5mm!important;height:.42mm!important;background:var(--kta-ink)!important;z-index:5!important}
.rev50-card.rev50-portrait .rev50-portrait-photo-v3{position:absolute!important;top:26.5mm!important;left:16.35mm!important;transform:none!important;margin:0!important;width:21.3mm!important;min-width:21.3mm!important;max-width:21.3mm!important;height:25.7mm!important;min-height:25.7mm!important;max-height:25.7mm!important;border:.45mm solid var(--kta-blue)!important;border-radius:1.8mm!important;overflow:hidden!important;background:#ffffff!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:2mm!important;font-weight:900!important;color:#64748b!important;z-index:5!important;box-shadow:none!important;box-sizing:border-box!important}
.rev50-card.rev50-portrait .rev50-portrait-photo-v3 img{width:21.3mm!important;height:25.7mm!important;min-width:21.3mm!important;max-width:21.3mm!important;min-height:25.7mm!important;max-height:25.7mm!important;object-fit:fill!important;object-position:center!important;background:#ffffff!important;display:block!important}
.rev50-card.rev50-portrait .rev50-portrait-values-v3{position:absolute!important;top:56.4mm!important;left:3.5mm!important;right:3.5mm!important;display:flex!important;flex-direction:column!important;gap:.55mm!important;z-index:5!important;text-align:left!important}
.rev50-card.rev50-portrait .rev50-portrait-row{display:grid!important;grid-template-columns:13.8mm 1.8mm minmax(0,1fr)!important;align-items:baseline!important;font-size:2.08mm!important;line-height:1.12!important;color:var(--kta-ink)!important;text-align:left!important}
.rev50-card.rev50-portrait .rev50-portrait-row b{font-weight:500!important;text-align:left!important}.rev50-card.rev50-portrait .rev50-portrait-row span{font-weight:700!important;text-align:center!important}.rev50-card.rev50-portrait .rev50-portrait-row strong{font-weight:800!important;color:#041d3b!important;text-align:left!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0!important}
.rev50-card.rev50-portrait .rev50-portrait-red-footer-v3{position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:9.8mm!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0 1.2mm!important;box-sizing:border-box!important;color:#fff!important;font-size:2.85mm!important;font-weight:950!important;line-height:1!important;letter-spacing:.15mm!important;text-transform:uppercase!important;text-align:center!important;z-index:5!important}
.rev50-card.rev50-portrait .rev50-portrait-back-logos{position:absolute!important;top:4.5mm!important;left:16.5mm!important;width:21mm!important;transform:none!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:3.4mm!important;z-index:5!important}
.rev50-card.rev50-portrait .rev50-portrait-back-header{position:absolute!important;top:13.9mm!important;left:2.2mm!important;right:2.2mm!important;text-align:center!important;z-index:5!important}
.rev50-card.rev50-portrait .rev50-portrait-back-header .puk-back-title1,.rev50-card.rev50-portrait .rev50-portrait-back-header .puk-back-title2{margin:0!important;padding:0!important;font-size:2.05mm!important;font-weight:900!important;color:var(--kta-ink)!important;text-transform:uppercase!important;line-height:1.08!important;letter-spacing:.07mm!important}
.rev50-card.rev50-portrait .rev50-portrait-back-rules-v3{position:absolute!important;top:21.2mm!important;left:3.4mm!important;right:3.2mm!important;z-index:5!important;text-align:left!important}
.rev50-card.rev50-portrait .rev50-portrait-back-rules-v3 ol{margin:0!important;padding-left:3.1mm!important;font-size:1.53mm!important;line-height:1.17!important;color:var(--kta-ink)!important;font-weight:700!important;text-align:left!important}.rev50-card.rev50-portrait .rev50-portrait-back-rules-v3 li{margin:0 0 .38mm!important;padding:0!important;text-align:left!important}
.rev50-card.rev50-portrait .rev50-portrait-back-qr-v3{position:absolute!important;top:39.8mm!important;left:19.85mm!important;width:14.3mm!important;height:17.7mm!important;transform:none!important;margin:0!important;padding:.55mm!important;box-sizing:border-box!important;background:#fff!important;border:.42mm solid var(--kta-blue)!important;border-radius:1.1mm!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;z-index:5!important;box-shadow:none!important}
.rev50-card.rev50-portrait .rev50-portrait-back-qr-v3 img,.rev50-card.rev50-portrait .rev50-portrait-back-qr-v3 svg{width:11.8mm!important;height:11.8mm!important;display:block!important;object-fit:contain!important;margin:0 auto!important;}.rev50-card.rev50-portrait .rev50-portrait-back-qr-v3 .qr-verify-label{margin-top:.28mm!important;font-size:1.02mm!important;font-weight:900!important;line-height:1!important;color:var(--kta-blue)!important;letter-spacing:.08mm!important;white-space:nowrap!important}
.rev50-card.rev50-portrait .puk-board-header-text-v12{position:absolute!important;top:58.8mm!important;left:2.2mm!important;right:2.2mm!important;text-align:center!important;font-size:1.48mm!important;font-weight:900!important;color:var(--kta-ink)!important;line-height:1.05!important;text-transform:uppercase!important;z-index:5!important}
.rev50-card.rev50-portrait .rev50-portrait-back-signs-v3{position:absolute!important;top:64.8mm!important;left:3mm!important;right:3mm!important;z-index:5!important}.rev50-card.rev50-portrait .rev50-portrait-signs-row-v3{width:100%!important;display:flex!important;justify-content:space-between!important;align-items:flex-end!important;position:relative!important}.rev50-card.rev50-portrait .rev50-portrait-sign-col-v3{width:20.7mm!important;text-align:center!important;position:relative!important;z-index:5!important}
.rev50-card.rev50-portrait .sign-img-v3{height:7.2mm!important;max-height:7.5mm!important;max-width:20mm!important;object-fit:contain!important;margin:0 auto .05mm!important;display:block!important;opacity:1!important;filter:contrast(1.6) brightness(0.78) drop-shadow(0 0 0.15px #000000)!important;mix-blend-mode:multiply!important;}.rev50-card.rev50-portrait .sign-img-placeholder-v3{height:7.2mm!important}.rev50-card.rev50-portrait .sign-name-v3{font-size:1.35mm!important;font-weight:900!important;color:var(--kta-ink)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin:0 0 .08mm!important}.rev50-card.rev50-portrait .sign-line-v3{height:.32mm!important;background:var(--kta-ink)!important;width:100%!important;margin:0 auto .15mm!important}.rev50-card.rev50-portrait .sign-title-label{font-size:1.28mm!important;font-weight:800!important;color:var(--kta-ink)!important;line-height:1!important}

#ktaPreview{display:block!important;width:100%!important;max-width:100%!important;overflow:visible!important;padding:8px 0 24px!important;background:transparent!important}#ktaPreview .kta-preview-item{width:100%!important;display:flex!important;justify-content:center!important;align-items:flex-start!important;overflow:visible!important;background:transparent!important;box-sizing:border-box!important}.kta-export-host{width:auto!important;height:auto!important;overflow:visible!important;background:#fff!important}.kta-export-host .rev50-sheet{transform:none!important;box-shadow:none!important}.kta-export-host .rev50-card{box-shadow:none!important}#ktaPrintRoot{display:flex!important;flex-direction:column!important;align-items:center!important;gap:18mm!important}#ktaPrintRoot .rev50-sheet{transform:none!important;page-break-after:always!important;break-after:page!important}#ktaPrintRoot .rev50-sheet:last-child{page-break-after:avoid!important;break-after:avoid!important}
@media print{@page{size:A4 portrait;margin:10mm}html,body{width:auto!important;height:auto!important;overflow:visible!important;background:#fff!important}.rev50-card,.rev50-card.rev50-portrait,#ktaPrintRoot .rev50-card{width:54mm!important;height:85.6mm!important;box-shadow:none!important}.rev50-sheet,#ktaPrintRoot .rev50-sheet{width:122mm!important;height:85.6mm!important;min-height:85.6mm!important;gap:14mm!important;page-break-inside:avoid!important;break-inside:avoid!important}}

.rev50-card.rev50-back .rev50-portrait-red-footer-v3{font-size:2.3mm!important;line-height:1.05!important;padding-left:1.8mm!important;padding-right:1.8mm!important}
.member-home-quick-access,.quick-access-section{margin-top:36px!important;padding-top:12px!important}

/* ===== SCOPED & BULLETPROOF LOGIN PAGE DISPLAY & CLICKABILITY ===== */
.hidden,
#loginPage.hidden,
#forcePasswordPage.hidden,
.login-page.hidden,
.activation-modal.hidden,
.modal-shell.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -999999 !important;
}

#loginPage:not(.hidden),
#forcePasswordPage:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 900000 !important;
  pointer-events: auto !important;
  background: url('assets/login-background.png') center/cover no-repeat !important;
}

.login-overlay {
  pointer-events: none !important;
  z-index: 1 !important;
}

.login-card, form.login-card {
  position: relative !important;
  z-index: 900005 !important;
  pointer-events: auto !important;
}

.login-card button, 
.login-card input, 
.login-card a {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.login-card input {
  cursor: text !important;
}

/* Eye Icon Absolute Position Fix inside Password Wrapper */
.login-card .password-wrapper {
  position: relative !important;
  width: 100% !important;
  display: block !important;
}

.login-card .password-wrapper input {
  width: 100% !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
}

.login-card .password-wrapper span {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== KTA BACK LOGOS & STAMP EXACT CENTER POSITIONING ===== */
.rev50-card.rev50-portrait .rev50-portrait-back-logos,
#ktaPreview .rev50-card.rev50-portrait .rev50-portrait-back-logos,
body #ktaPreview .rev50-card.rev50-portrait .rev50-portrait-back-logos,
.rev50-portrait-back-logos {
  position: absolute !important;
  top: 4.5mm !important;
  left: 50% !important;
  right: auto !important;
  width: max-content !important;
  max-width: 100% !important;
  height: 8.8mm !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3.5mm !important;
  margin: 0 auto !important;
  z-index: 50 !important;
  text-align: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.rev50-card.rev50-portrait .rev50-portrait-back-logos img,
.rev50-card.rev50-portrait .rev50-portrait-back-logos .logo-img-equal,
.rev50-portrait-back-logos img,
.rev50-portrait-back-logos .logo-img-equal {
  width: 8.8mm !important;
  height: 8.8mm !important;
  min-width: 8.8mm !important;
  min-height: 8.8mm !important;
  max-width: 8.8mm !important;
  max-height: 8.8mm !important;
  object-fit: contain !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}



/* ===== REMOVE WHITE CIRCLE BACKGROUND FROM ALL KTA LOGOS ===== */
.rev50-card .logo-img-equal,
.rev50-card.rev50-portrait .rev50-portrait-logos img,
.rev50-card.rev50-portrait .rev50-portrait-back-logos img,
.rev50-portrait-logos img,
.rev50-portrait-back-logos img,
.logo-img-equal {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}


/* ===== PATCH 20260723 V17: DUAL LOGO KTA BELAKANG + EXPORT PARITY ===== */
.rev50-card.rev50-portrait .rev50-portrait-back-logos,
#ktaPreview .rev50-card.rev50-portrait .rev50-portrait-back-logos,
.kta-export-host .rev50-card.rev50-portrait .rev50-portrait-back-logos,
#ktaPrintRoot .rev50-card.rev50-portrait .rev50-portrait-back-logos {
  position: absolute !important;
  top: 3.25mm !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 9.8mm !important;
  margin: 0 auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  z-index: 50 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.rev50-card.rev50-portrait .rev50-portrait-back-logos .kta-back-dual-logo-strip,
#ktaPreview .rev50-card.rev50-portrait .rev50-portrait-back-logos .kta-back-dual-logo-strip,
.kta-export-host .rev50-card.rev50-portrait .rev50-portrait-back-logos .kta-back-dual-logo-strip,
#ktaPrintRoot .rev50-card.rev50-portrait .rev50-portrait-back-logos .kta-back-dual-logo-strip {
  width: 28mm !important;
  height: 9.8mm !important;
  min-width: 28mm !important;
  min-height: 9.8mm !important;
  max-width: 28mm !important;
  max-height: 9.8mm !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.rev50-card.rev50-portrait .rev50-portrait-back-logos .kta-back-dual-logo-fallback,
#ktaPreview .rev50-card.rev50-portrait .rev50-portrait-back-logos .kta-back-dual-logo-fallback,
.kta-export-host .rev50-card.rev50-portrait .rev50-portrait-back-logos .kta-back-dual-logo-fallback,
#ktaPrintRoot .rev50-card.rev50-portrait .rev50-portrait-back-logos .kta-back-dual-logo-fallback {
  display: none;
  width: 28mm !important;
  height: 9.8mm !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3.4mm !important;
  margin: 0 auto !important;
}

.rev50-card.rev50-portrait .rev50-portrait-back-logos .kta-back-dual-logo-fallback .logo-img-equal,
#ktaPreview .rev50-card.rev50-portrait .rev50-portrait-back-logos .kta-back-dual-logo-fallback .logo-img-equal,
.kta-export-host .rev50-card.rev50-portrait .rev50-portrait-back-logos .kta-back-dual-logo-fallback .logo-img-equal,
#ktaPrintRoot .rev50-card.rev50-portrait .rev50-portrait-back-logos .kta-back-dual-logo-fallback .logo-img-equal {
  width: 8.8mm !important;
  height: 8.8mm !important;
  min-width: 8.8mm !important;
  min-height: 8.8mm !important;
  max-width: 8.8mm !important;
  max-height: 8.8mm !important;
  object-fit: contain !important;
  display: block !important;
}

.rev50-card.rev50-portrait .rev50-portrait-back-header,
#ktaPreview .rev50-card.rev50-portrait .rev50-portrait-back-header,
.kta-export-host .rev50-card.rev50-portrait .rev50-portrait-back-header,
#ktaPrintRoot .rev50-card.rev50-portrait .rev50-portrait-back-header {
  top: 14.15mm !important;
}

#btnToggleHideKta {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0369a1 !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.35) !important;
}

#btnToggleHideKta svg {
  stroke: #ffffff !important;
}

/* DATA ANGGOTA: 2-COLUMN COMPACT ACTION BUTTON GRID */
.member-action-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 175px !important;
  margin: 0 !important;
}

.member-action-grid button {
  width: 100% !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 4px 6px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

/* FIX LOGIN FORM CLICKABILITY & INPUT FOCUS */
#loginPage {
  pointer-events: auto !important;
  z-index: 900000 !important;
}

#loginPage .login-overlay {
  display: none !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

#loginPage .login-card,
#loginPage form,
#loginPage input,
#loginPage button,
#loginPage a {
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  z-index: 900005 !important;
}

#loginPage input {
  cursor: text !important;
  background: #ffffff !important;
}

#loginPage button {
  cursor: pointer !important;
}

/* Presisi Ikon Mata Password - Selalu Absolut di Tengah Kanan Input */
#loginPage .password-wrapper {
  position: relative !important;
  width: 100% !important;
  display: block !important;
  z-index: 900005 !important;
}

#loginPage .password-wrapper input {
  width: 100% !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

#loginPage .password-wrapper span {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  z-index: 900010 !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* MEMBER FILTER TOOLBAR styling */
.member-filter-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.member-filter-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.member-filter-count-badge {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  border: 1px solid #bae6fd !important;
  white-space: nowrap !important;
}

.member-filter-controls {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  flex-grow: 1 !important;
  justify-content: flex-end !important;
}

.member-filter-search-wrapper {
  position: relative !important;
  min-width: 240px !important;
  max-width: 320px !important;
  flex-grow: 1 !important;
}

.member-filter-search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
}

.member-filter-search-wrapper input[type="search"] {
  width: 100% !important;
  padding: 9.5px 12px 9.5px 36px !important;
  font-size: 13px !important;
  border-radius: 12px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  color: #0f172a !important;
  transition: all 0.2s ease !important;
}

.member-filter-search-wrapper input[type="search"]:focus {
  border-color: #0284c7 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

.member-filter-controls select {
  padding: 9.5px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.member-filter-controls select:focus {
  border-color: #0284c7 !important;
  outline: none !important;
}

/* Mobile & Tablet Responsiveness */
@media screen and (max-width: 900px) {
  .member-filter-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 14px !important;
  }
  .member-filter-title {
    justify-content: space-between !important;
    width: 100% !important;
  }
  .member-filter-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .member-filter-search-wrapper {
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .member-filter-controls select {
    width: 100% !important;
  }
}

/* RESPONSIVE SCROLLABLE TABLES */
.responsive-table-container {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin-top: 8px !important;
  margin-bottom: 16px !important;
  border-radius: 12px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
}

.responsive-table-container table {
  width: 100% !important;
  min-width: 650px !important; /* Force content width so horizontal scrolling triggers on mobile */
  border-collapse: collapse !important;
  margin: 0 !important;
}

/* KTA Filter & Single Modal Styles */
.modal-shell {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.modal-shell.hidden {
  display: none !important;
}

.modal-card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  border: 1px solid #e2e8f0;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-close {
  background: #f1f5f9;
  border: none;
  font-size: 20px;
  font-weight: 700;
  color: #64748b;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: #e2e8f0;
  color: #0f172a;
}







/* ===== ADMIN KTA 07: Filter-first batch print/download ===== */
.kta-filter-panel,.kta-member-picker,.kta-preview-toolbar{border:1px solid rgba(148,163,184,.28);box-shadow:0 14px 34px rgba(15,23,42,.07)}
.kta-filter-heading,.kta-picker-heading,.kta-preview-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.kta-filter-heading h3,.kta-picker-heading h3,.kta-preview-toolbar h3{margin:0 0 5px;font-size:18px;color:#0f172a}
.kta-filter-heading p,.kta-picker-heading p,.kta-preview-toolbar p{margin:0}
.kta-selected-badge{display:inline-flex;align-items:center;justify-content:center;min-width:92px;padding:8px 13px;border-radius:999px;background:#e0ecff;color:#164e9b;font-size:12px;font-weight:900}
.kta-filter-stats{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;margin:18px 0}
.kta-filter-stats>div{padding:13px 14px;border:1px solid #dbe5f1;border-radius:14px;background:linear-gradient(180deg,#fff,#f8fbff)}
.kta-filter-stats small{display:block;color:#64748b;font-size:11px;font-weight:800;margin-bottom:4px}
.kta-filter-stats b{font-size:22px;color:#0f3768}
.kta-filter-grid{display:grid;grid-template-columns:minmax(240px,1.35fr) minmax(190px,.8fr) minmax(210px,1fr);gap:12px;align-items:end}
.kta-filter-grid .field{margin:0}
.kta-filter-quick-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid #e2e8f0}
.kta-picker-heading{margin-bottom:14px}.kta-picker-heading>strong{font-size:12px;padding:7px 11px;border-radius:999px;background:#f1f5f9;color:#334155}
.kta-selection-table-wrap{overflow:auto;border:1px solid #dbe3ed;border-radius:14px;background:#fff}
.kta-selection-table{width:100%;min-width:790px;border-collapse:separate;border-spacing:0;margin:0}
.kta-selection-table th{position:sticky;top:0;z-index:2;background:#eef4fb;color:#334155;font-size:11.5px;text-transform:none;letter-spacing:.1px;padding:11px 12px;border-bottom:1px solid #d7e1ec;text-align:left}
.kta-selection-table td{padding:11px 12px;border-bottom:1px solid #edf1f6;font-size:12.5px;vertical-align:middle}
.kta-selection-table tbody tr:last-child td{border-bottom:0}.kta-selection-table tbody tr:hover{background:#f8fbff}.kta-selection-table tbody tr.kta-row-selected{background:#eef6ff}
.kta-selection-table td b{display:block;color:#0f172a}.kta-selection-table td small{display:block;margin-top:3px;color:#64748b;text-transform:lowercase}
.kta-check-col{width:44px;text-align:center!important}.kta-check-col input{width:18px;height:18px;accent-color:#0d5cab;cursor:pointer}
.kta-filter-empty{padding:38px 20px;border:1px dashed #cbd5e1;border-radius:14px;background:#f8fafc;text-align:center;color:#64748b;font-weight:700}
.kta-batch-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.kta-action-group{padding:14px;border:1px solid #dbe5ef;border-radius:14px;background:#fafcff;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kta-action-group h4{width:100%;margin:0 0 2px;font-size:12px;color:#475569;text-transform:uppercase;letter-spacing:.4px}.kta-action-group button{flex:1;min-width:145px}
.kta-preview-toolbar{align-items:center;margin-bottom:14px}.kta-preview-toolbar .actions{display:flex;gap:8px;flex-wrap:wrap}
.email-lowercase,input[type="email"]{text-transform:lowercase!important}
@media(max-width:900px){.kta-filter-stats{grid-template-columns:repeat(2,1fr)}.kta-filter-grid{grid-template-columns:1fr}.kta-batch-actions{grid-template-columns:1fr}.kta-action-group{display:grid;grid-template-columns:1fr}.kta-action-group h4{grid-column:1}.kta-action-group button{width:100%}.kta-preview-toolbar .actions{width:100%;display:grid;grid-template-columns:1fr}.kta-preview-toolbar .actions button{width:100%}}


/* =========================================================
   ADMIN KTA 08 — Single-PUK filter, true pagination, mobile reports
   ========================================================= */
.kta-filter-grid{
  grid-template-columns:minmax(240px,1.5fr) minmax(190px,.8fr)!important;
}
.kta-selection-table{min-width:650px}
.kta-list-pagination{margin-top:14px;border-top:1px solid #e2e8f0}
.kta-pagination-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.kta-page-size,.report-page-size{display:flex;align-items:center;gap:6px;color:#64748b;font-size:12px;font-weight:800}
.kta-page-size select,.report-page-size select{min-height:34px;padding:5px 9px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#0f172a;font-weight:800}
.report-mobile-surface{width:100%;min-width:0;max-width:100%}
.report-mobile-surface>.grid.two{align-items:start}
.report-mobile-surface .table-wrap{max-width:100%}
.report-output-pagination{margin-top:12px}

@media screen and (max-width:700px){
  .kta-filter-panel,.kta-member-picker,.report-mobile-surface .card{min-width:0!important;max-width:100%!important;overflow:visible!important}
  .kta-filter-heading,.kta-picker-heading{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .kta-selected-badge,.kta-picker-heading>strong{justify-self:start!important}
  .kta-filter-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin:14px 0!important}
  .kta-filter-stats>div{padding:11px!important;min-width:0!important}
  .kta-filter-stats b{font-size:20px!important}
  .kta-filter-grid{grid-template-columns:1fr!important}
  .kta-filter-quick-actions{display:grid!important;grid-template-columns:1fr!important}
  .kta-filter-quick-actions button{width:100%!important;min-height:43px!important}
  .kta-selection-table-wrap{overflow:visible!important;border:0!important;background:transparent!important}
  #view .kta-selection-table.responsive-data-table{min-width:0!important;width:100%!important;max-width:100%!important}
  #view .kta-selection-table.responsive-data-table tbody{display:grid!important;gap:10px!important}
  #view .kta-selection-table.responsive-data-table tbody tr{padding:10px 12px!important}
  #view .kta-selection-table.responsive-data-table tbody td{grid-template-columns:minmax(92px,34%) minmax(0,1fr)!important}
  #view .kta-selection-table.responsive-data-table .kta-check-col{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;text-align:left!important}
  #view .kta-selection-table.responsive-data-table .kta-check-col::before{margin-right:12px!important}
  .kta-list-pagination{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;align-items:stretch!important}
  .kta-list-pagination>span{text-align:center!important}
  .kta-pagination-controls{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;gap:8px!important}
  .kta-page-size{grid-column:1/-1!important;justify-content:space-between!important}
  .kta-page-size select{min-width:92px!important}
  .kta-pagination-controls strong{grid-column:1/-1;text-align:center;order:4;font-size:12px;color:#475569}
  .kta-pagination-controls button{width:100%!important;min-height:42px!important}

  .report-mobile-surface{overflow:hidden!important}
  .report-mobile-surface .report-control{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
  .report-mobile-surface .report-control>div:first-child{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important;width:100%!important;gap:10px!important}
  .report-mobile-surface .report-control .pill{justify-self:start!important;max-width:100%!important;white-space:normal!important}
  .report-mobile-surface .report-control .inline-field{width:100%!important;margin:0!important}
  .report-mobile-surface .report-control .inline-field select{width:100%!important;max-width:100%!important;min-height:44px!important;padding:10px 12px!important;white-space:normal!important}
  .report-mobile-surface .report-control .actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:8px!important;margin:0!important}
  .report-mobile-surface .report-control .actions button{width:100%!important;min-height:43px!important;white-space:normal!important}
  .report-mobile-surface>.grid.two,.report-mobile-surface .card>.grid.two{grid-template-columns:1fr!important;width:100%!important;gap:12px!important}
  .report-mobile-surface .bar-chart,.report-mobile-surface .pie-wrap,.report-mobile-surface .pie-legend{max-width:100%!important;min-width:0!important}
  .report-mobile-surface .pie-wrap{display:grid!important;grid-template-columns:1fr!important;justify-items:center!important;gap:14px!important}
  .report-mobile-surface .pie-legend{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .report-mobile-surface .bar-item{grid-template-columns:minmax(78px,30%) minmax(0,1fr) auto!important;gap:7px!important}
  .report-mobile-surface .bar-label{font-size:11px!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .report-mobile-surface .table-wrap{overflow:visible!important;border:0!important;max-width:100%!important}
  #view .report-mobile-surface table.responsive-data-table{min-width:0!important;width:100%!important;max-width:100%!important;margin:0!important}
  #view .report-mobile-surface table.responsive-data-table tbody td{grid-template-columns:minmax(102px,38%) minmax(0,1fr)!important;gap:9px!important;align-items:start!important}
  #view .report-mobile-surface table.responsive-data-table tbody td::before{font-size:10.5px!important;line-height:1.35!important}
  #view .report-mobile-surface table.responsive-data-table tbody td[colspan]{display:block!important;text-align:center!important}
  #view .report-mobile-surface table.responsive-data-table tbody td[colspan]::before{display:none!important}
  .report-mobile-surface .responsive-simple-info{display:block!important;width:100%!important;max-width:100%!important;border-collapse:separate!important}
  .report-mobile-surface .responsive-simple-info tbody{display:grid!important;gap:8px!important;width:100%!important}
  .report-mobile-surface .responsive-simple-info tr{display:grid!important;grid-template-columns:minmax(112px,40%) minmax(0,1fr)!important;gap:9px!important;align-items:start!important;width:100%!important;padding:10px 11px!important;border:1px solid #e2e8f0!important;border-radius:12px!important;background:#f8fafc!important;height:auto!important}
  .report-mobile-surface .responsive-simple-info td{display:block!important;width:auto!important;min-width:0!important;padding:0!important;border:0!important;white-space:normal!important;overflow-wrap:anywhere!important;font-size:12px!important;color:#0f172a!important}
  .report-mobile-surface .responsive-simple-info td:first-child{width:auto!important;color:#64748b!important;font-size:10.5px!important;font-weight:850!important;text-transform:uppercase!important}
  .report-mobile-surface .report-pagination,.report-mobile-surface .report-output-pagination{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important;gap:10px!important;width:100%!important}
  .report-mobile-surface .report-pagination>span{text-align:center!important}
  .report-mobile-surface .report-pagination-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;gap:8px!important;white-space:normal!important}
  .report-mobile-surface .report-page-size{grid-column:1/-1!important;justify-content:space-between!important}
  .report-mobile-surface .report-pagination-actions strong,.report-mobile-surface .report-pagination-actions>span{grid-column:1/-1!important;text-align:center!important;order:4!important;font-size:12px!important}
  .report-mobile-surface .report-pagination-actions button{width:100%!important;min-height:42px!important}
}

@media screen and (max-width:380px){
  .kta-filter-stats{grid-template-columns:1fr 1fr!important}
  #view .kta-selection-table.responsive-data-table tbody td,
  #view .report-mobile-surface table.responsive-data-table tbody td{grid-template-columns:minmax(88px,36%) minmax(0,1fr)!important;font-size:12px!important}
  .report-mobile-surface .responsive-simple-info tr{grid-template-columns:1fr!important;gap:4px!important}
}

/* =========================================================
   ADMIN DASHBOARD 10 — Premium operational workspace
   Cumulative after ADMIN_KTA_08. Scoped to .dashboard-v10.
   ========================================================= */
.dashboard-v10{
  --dash-ink:#10233d;
  --dash-muted:#64748b;
  --dash-line:#dce6f2;
  --dash-soft:#f5f8fc;
  display:grid;
  gap:22px;
  width:100%;
  max-width:1380px;
  margin:0 auto;
}
.dashboard-v10 *{box-sizing:border-box}
.dashboard-v10-hero{
  position:relative;
  isolation:isolate;
  min-height:210px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  padding:32px 34px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:28px;
  background:
    radial-gradient(circle at 88% 22%,rgba(93,183,255,.38),transparent 24%),
    radial-gradient(circle at 68% 125%,rgba(40,209,163,.24),transparent 34%),
    linear-gradient(132deg,#071c38 0%,#0b4078 54%,#12649b 100%);
  color:#fff;
  box-shadow:0 22px 48px rgba(8,38,72,.20);
}
.dashboard-v10-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:310px;
  height:310px;
  top:-190px;
  right:17%;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  box-shadow:0 0 0 34px rgba(255,255,255,.035),0 0 0 72px rgba(255,255,255,.025);
}
.dashboard-v10-hero-copy{max-width:720px;min-width:0}
.dashboard-v10-eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  margin-bottom:12px;
  padding:5px 10px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#cae8ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
}
.dashboard-v10-hero h2{
  margin:0 0 5px!important;
  color:#fff!important;
  font-size:clamp(28px,3vw,42px)!important;
  line-height:1.06!important;
  font-weight:900!important;
  letter-spacing:-.035em!important;
}
.dashboard-v10-puk{
  display:block;
  margin:0 0 13px;
  color:#f8cb55;
  font-size:clamp(15px,1.6vw,20px);
  line-height:1.3;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.dashboard-v10-hero p{
  max-width:650px!important;
  margin:0!important;
  color:#dbeafe!important;
  font-size:14px!important;
  line-height:1.65!important;
}
.dashboard-v10-hero-meta{
  flex:0 0 265px;
  display:grid;
  gap:9px;
  align-self:flex-start;
  justify-items:end;
  text-align:right;
}
.dashboard-v10-hero-meta span{
  display:inline-flex;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:rgba(4,18,37,.24);
  color:#e8f4ff;
  font-size:11px;
  font-weight:750;
}
.dashboard-v10-hero-meta b{
  max-width:245px;
  color:#ff7d7d;
  font-size:10px;
  line-height:1.45;
  letter-spacing:.08em;
}
.dashboard-v10-section{
  padding:22px;
  border:1px solid var(--dash-line);
  border-radius:24px;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
  box-shadow:0 12px 32px rgba(37,65,98,.07);
}
.dashboard-v10-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:17px;
}
.dashboard-v10-section-head>div>span{
  display:block;
  margin-bottom:3px;
  color:#2780c5;
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.13em;
}
.dashboard-v10-section-head h3{
  margin:0!important;
  color:var(--dash-ink)!important;
  font-size:18px!important;
  line-height:1.25!important;
  font-weight:900!important;
  letter-spacing:-.018em;
}
.dashboard-v10-section-head p{
  margin:0!important;
  color:var(--dash-muted)!important;
  font-size:11.5px!important;
  line-height:1.4!important;
  text-align:right;
}
.dashboard-v10-summary-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:13px!important;
}
.dashboard-v10 .dashboard-v10-summary{
  min-width:0!important;
  min-height:108px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:13px!important;
  margin:0!important;
  padding:16px!important;
  border:1px solid #e1eaf4!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 7px 18px rgba(45,75,108,.065)!important;
  text-align:left!important;
  transform:none!important;
}
.dashboard-v10-summary-icon{
  flex:0 0 48px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:#1576b8;
  background:#e7f4ff;
}
.dashboard-v10-summary.card-green .dashboard-v10-summary-icon{color:#078759;background:#e2f8ef}
.dashboard-v10-summary.card-orange .dashboard-v10-summary-icon{color:#ce6a11;background:#fff0de}
.dashboard-v10-summary.card-purple .dashboard-v10-summary-icon{color:#7439bd;background:#f1e8ff}
.dashboard-v10-summary-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.dashboard-v10-summary-copy span{
  margin:0!important;
  color:var(--dash-muted)!important;
  font-size:11px!important;
  line-height:1.25!important;
  font-weight:750!important;
}
.dashboard-v10-summary-copy strong{
  color:var(--dash-ink);
  font-size:27px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.04em;
}
.dashboard-v10-action-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:13px!important;
}
.dashboard-v10 .dashboard-v10-action{
  position:relative!important;
  min-width:0!important;
  min-height:132px!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr) 20px!important;
  align-items:center!important;
  gap:12px!important;
  margin:0!important;
  padding:17px 15px!important;
  border:1px solid #e0e9f3!important;
  border-radius:19px!important;
  background:#fff!important;
  box-shadow:0 8px 20px rgba(43,70,102,.06)!important;
  color:var(--dash-ink)!important;
  text-align:left!important;
  cursor:pointer!important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}
.dashboard-v10 .dashboard-v10-action:hover{
  transform:translateY(-3px)!important;
  border-color:#bfd8ed!important;
  box-shadow:0 15px 28px rgba(33,83,126,.12)!important;
}
.dashboard-v10 .dashboard-v10-action:focus-visible{
  outline:3px solid rgba(35,137,207,.22)!important;
  outline-offset:2px!important;
}
.dashboard-v10-action-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:#147aba;
  background:linear-gradient(145deg,#e9f6ff,#d9efff);
}
.dashboard-v10-action.card-green .dashboard-v10-action-icon{color:#078357;background:linear-gradient(145deg,#e5faef,#d6f4e6)}
.dashboard-v10-action.card-orange .dashboard-v10-action-icon{color:#ca6812;background:linear-gradient(145deg,#fff2e1,#ffe5c6)}
.dashboard-v10-action.card-purple .dashboard-v10-action-icon{color:#7439b9;background:linear-gradient(145deg,#f4ebff,#e9dbff)}
.dashboard-v10-action-copy{
  min-width:0;
  display:grid;
  gap:5px;
}
.dashboard-v10-action-copy strong{
  color:var(--dash-ink);
  font-size:13.5px;
  line-height:1.3;
  font-weight:900;
  letter-spacing:-.01em;
}
.dashboard-v10-action-copy span{
  color:var(--dash-muted);
  font-size:10.5px;
  line-height:1.45;
  font-weight:600;
}
.dashboard-v10-action-arrow{
  color:#9aafc4;
  font-size:25px;
  line-height:1;
  font-weight:400;
}
.dashboard-v10 .dashboard-v10-badge{
  position:absolute!important;
  top:10px!important;
  right:10px!important;
  min-width:22px!important;
  height:22px!important;
  display:grid!important;
  place-items:center!important;
  padding:0 6px!important;
  border:2px solid #fff!important;
  border-radius:999px!important;
  background:#ef4444!important;
  color:#fff!important;
  font-size:9px!important;
  font-weight:900!important;
  box-shadow:0 5px 12px rgba(239,68,68,.26)!important;
}
.member-empty-state{
  display:grid;
  justify-items:center;
  gap:6px;
  padding:34px 18px;
  margin-top:12px;
  border:1px dashed #c9d6e5;
  border-radius:17px;
  background:#f8fafc;
  text-align:center;
}
.member-empty-state .member-empty-icon{
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#e8f3fc;
  color:#2078b3;
  font-size:24px;
}
.member-empty-state h4{margin:2px 0 0;color:#19324e;font-size:14px}
.member-empty-state p{margin:0;color:#64748b;font-size:11.5px}

@media (max-width:1100px){
  .dashboard-v10-summary-grid,.dashboard-v10-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dashboard-v10 .dashboard-v10-action{min-height:110px!important}
}
@media (max-width:700px){
  .dashboard-v10{gap:16px}
  .dashboard-v10-hero{
    min-height:0;
    display:grid;
    align-items:start;
    gap:18px;
    padding:22px 20px;
    border-radius:22px;
  }
  .dashboard-v10-hero-meta{
    width:100%;
    flex-basis:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    justify-items:initial;
    text-align:left;
  }
  .dashboard-v10-hero-meta b{max-width:170px;text-align:right;font-size:8px}
  .dashboard-v10-hero h2{font-size:26px!important}
  .dashboard-v10-puk{font-size:14px}
  .dashboard-v10-hero p{font-size:12px!important;line-height:1.55!important}
  .dashboard-v10-section{padding:17px 14px;border-radius:20px}
  .dashboard-v10-section-head{align-items:flex-start;margin-bottom:14px}
  .dashboard-v10-section-head h3{font-size:16px!important}
  .dashboard-v10-section-head p{display:none}
  .dashboard-v10-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .dashboard-v10 .dashboard-v10-summary{
    min-height:94px!important;
    gap:10px!important;
    padding:13px 11px!important;
    border-radius:16px!important;
  }
  .dashboard-v10-summary-icon{flex-basis:40px;width:40px;height:40px;border-radius:13px}
  .dashboard-v10-summary-icon svg{width:21px!important;height:21px!important}
  .dashboard-v10-summary-copy span{font-size:9.5px!important}
  .dashboard-v10-summary-copy strong{font-size:23px}
  .dashboard-v10-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .dashboard-v10 .dashboard-v10-action{
    min-height:142px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:10px!important;
    padding:14px!important;
    border-radius:17px!important;
  }
  .dashboard-v10-action-icon{width:43px;height:43px;border-radius:14px}
  .dashboard-v10-action-icon svg{width:23px!important;height:23px!important}
  .dashboard-v10-action-copy{gap:4px}
  .dashboard-v10-action-copy strong{font-size:12px;line-height:1.28}
  .dashboard-v10-action-copy span{font-size:9.5px;line-height:1.35}
  .dashboard-v10-action-arrow{position:absolute;right:12px;bottom:11px;font-size:21px}
}
@media (max-width:380px){
  .dashboard-v10-hero{padding:19px 17px}
  .dashboard-v10-eyebrow{font-size:8.5px;letter-spacing:.1em}
  .dashboard-v10-hero h2{font-size:23px!important}
  .dashboard-v10-hero-meta span{font-size:9px;padding:6px 8px}
  .dashboard-v10 .dashboard-v10-summary{padding:11px 9px!important}
  .dashboard-v10-summary-icon{flex-basis:36px;width:36px;height:36px}
  .dashboard-v10-summary-copy span{font-size:8.7px!important}
  .dashboard-v10-summary-copy strong{font-size:21px}
  .dashboard-v10 .dashboard-v10-action{min-height:136px!important;padding:12px!important}
  .dashboard-v10-action-copy strong{font-size:11.5px}
  .dashboard-v10-action-copy span{font-size:9px}
}

@media (prefers-color-scheme:dark){
  body.dark .dashboard-v10-section,
  body[data-theme="dark"] .dashboard-v10-section{background:#101b2b;border-color:#26364b}
  body.dark .dashboard-v10 .dashboard-v10-summary,
  body.dark .dashboard-v10 .dashboard-v10-action,
  body[data-theme="dark"] .dashboard-v10 .dashboard-v10-summary,
  body[data-theme="dark"] .dashboard-v10 .dashboard-v10-action{background:#142236!important;border-color:#2a3a50!important}
  body.dark .dashboard-v10-section-head h3,
  body.dark .dashboard-v10-summary-copy strong,
  body.dark .dashboard-v10-action-copy strong,
  body[data-theme="dark"] .dashboard-v10-section-head h3,
  body[data-theme="dark"] .dashboard-v10-summary-copy strong,
  body[data-theme="dark"] .dashboard-v10-action-copy strong{color:#edf5ff!important}
}


/* =========================================================
   ADMIN DASHBOARD 11 — Password case, realtime header, report 7
   ========================================================= */
#loginPassword.password-case-sensitive,
input[type="password"],
input[id*="password" i]{
  text-transform:none!important;
  font-variant-caps:normal!important;
}
.dashboard-v10-puk{margin-bottom:4px}
.dashboard-v10-federation{
  display:block;
  margin:0 0 13px;
  color:#ff8c8c;
  font-size:10px;
  line-height:1.4;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.dashboard-v10-hero-meta{flex-basis:auto;min-width:max-content}
.dashboard-v10-datetime{
  display:inline-flex!important;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.dashboard-v10-datetime em{font-style:normal}
.dashboard-v10-datetime i{font-style:normal;color:#8bc8f4}
.dashboard-v10-datetime strong{color:#fff;font-size:inherit;font-weight:900;letter-spacing:.02em}
@media(max-width:700px){
  .dashboard-v10-federation{font-size:8.7px;letter-spacing:.065em;margin-bottom:11px}
  .dashboard-v10-hero-meta{min-width:0;width:100%;justify-content:flex-start}
  .dashboard-v10-datetime{max-width:100%;font-size:9.5px!important;gap:5px;flex-wrap:wrap;white-space:normal}
}
@media(max-width:380px){
  .dashboard-v10-federation{font-size:8px}
  .dashboard-v10-datetime{font-size:8.7px!important}
}


/* =========================================================
   ADMIN / MEMBER UI 12 — Premium member dashboard, sidebar,
   and elegant appearance controls
   ========================================================= */
:root{
  --v12-side-top:#102f56;
  --v12-side-bottom:#071a32;
  --v12-side-accent:#74b8ec;
  --v12-side-glow:rgba(77,163,225,.28);
  --v12-panel:#ffffff;
  --v12-panel-line:#dce7f2;
  --v12-ink:#102a43;
  --v12-muted:#64788e;
}
body.theme-emerald{
  --v12-side-top:#144d3d;
  --v12-side-bottom:#08281f;
  --v12-side-accent:#7ed0aa;
  --v12-side-glow:rgba(69,184,132,.26);
}
body.theme-dark{
  --v12-side-top:#27384d;
  --v12-side-bottom:#111a25;
  --v12-side-accent:#a9bdd3;
  --v12-side-glow:rgba(135,163,194,.22);
}

/* Premium left navigation for both admin and member workspaces. */
.app{grid-template-columns:292px minmax(0,1fr)!important}
.sidebar{
  position:sticky!important;
  isolation:isolate;
  padding:17px 14px 14px!important;
  background:
    radial-gradient(circle at 8% 4%,var(--v12-side-glow),transparent 27%),
    radial-gradient(circle at 98% 92%,rgba(255,255,255,.08),transparent 28%),
    linear-gradient(165deg,var(--v12-side-top),var(--v12-side-bottom))!important;
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:18px 0 48px rgba(9,26,49,.12);
}
.sidebar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.055),transparent 32%,transparent 68%,rgba(255,255,255,.025));
  z-index:-1;
}
.sidebar>*{position:relative;z-index:1}
.sidebar .brand-panel,
.brand-panel{
  margin:0 0 12px!important;
  padding:17px 14px 15px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:23px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.045))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 30px rgba(3,14,30,.16)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.sidebar .brand-panel .brand-logos{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:11px!important;
  margin:0 0 12px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
}
.brand-logo-shell{
  width:52px;height:52px;border-radius:0;display:grid!important;place-items:center;
  background:transparent!important;border:none!important;
  box-shadow:none!important;
}
.sidebar .brand-panel .brand-logos .brand-logo-shell img{
  width:48px!important;height:48px!important;max-width:48px!important;max-height:48px!important;
  object-fit:contain!important;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.35))!important;
}
.brand-logo-divider{display:none!important}
.sidebar-brand-kicker{
  color:#a9c8e8!important;font-size:8.5px!important;font-weight:900!important;
  letter-spacing:.16em!important;text-transform:uppercase;margin:0 0 5px!important;
}
#sidebarBrandTitle{
  color:#fff!important;font-size:11.5px!important;line-height:1.35!important;font-weight:900!important;
  letter-spacing:.025em;margin:0!important;text-shadow:0 2px 6px rgba(0,0,0,.2);
}
#sidebarBrandSubtitle{
  color:#ff9c9c!important;font-size:8.5px!important;line-height:1.4!important;font-weight:800!important;
  letter-spacing:.055em;margin:6px 0 0!important;
}
.role-badge{
  padding:11px!important;margin:0 0 13px!important;border-radius:20px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  background:rgba(4,20,40,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important;
}
.sidebar-user-card{display:flex;align-items:center;gap:11px;width:100%;min-width:0}
.sidebar-user-copy{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.sidebar-user-copy .sidebar-identity-label{
  width:auto!important;text-align:left!important;color:#9fc1df!important;font-size:8px!important;
  font-weight:900!important;letter-spacing:.13em!important;margin:0 0 3px!important;
}
.sidebar-user-copy>b{
  color:#fff!important;font-size:12.5px!important;font-weight:850!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin:0 0 2px!important;text-align:left!important;width:100%!important;
}
.sidebar-user-copy>span{
  color:#c5d7e9!important;font-size:9.5px!important;font-weight:650!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:left!important;width:100%!important;
}
.sidebar-user-copy .online-status{margin-top:5px!important;color:#6ee7b7!important;font-size:9px!important}
.sidebar-avatar-container,.sidebar-avatar-container img.sidebar-avatar,.sidebar-avatar-container .sidebar-avatar-fallback{
  width:46px!important;height:46px!important;
}
.sidebar-avatar-container img.sidebar-avatar{border:2px solid rgba(255,255,255,.9)!important;box-shadow:0 0 0 3px rgba(116,184,236,.22)}
.sidebar nav{gap:5px!important;padding:2px 0}
.sidebar nav .menu-flat{gap:5px!important}
.sidebar nav button:not(.menu-group-head){
  min-height:45px;padding:10px 11px!important;border-radius:13px!important;
  color:#c8dbed!important;border:1px solid transparent!important;background:transparent!important;
  box-shadow:none!important;font-size:12.5px!important;font-weight:720!important;
}
.sidebar nav button:not(.menu-group-head):hover{
  color:#fff!important;background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.08)!important;
  transform:translateX(2px);
}
.sidebar nav button:not(.menu-group-head).active{
  color:#fff!important;
  background:linear-gradient(115deg,rgba(255,255,255,.18),rgba(255,255,255,.075))!important;
  border-color:rgba(255,255,255,.17)!important;
  box-shadow:inset 3px 0 0 var(--v12-side-accent),0 8px 18px rgba(1,12,27,.14)!important;
}
.sidebar nav button .nav-ic{width:18px!important;height:18px!important;color:#9fc2df;opacity:1!important}
.sidebar nav button.active .nav-ic{color:var(--v12-side-accent)!important}
.sidebar-nav-arrow{font-style:normal;font-size:19px;line-height:1;color:rgba(255,255,255,.32);transition:.18s}
.sidebar nav button:hover .sidebar-nav-arrow,.sidebar nav button.active .sidebar-nav-arrow{color:#fff;transform:translateX(2px)}
.sidebar nav .menu-group-head{
  min-height:35px;padding:11px 8px 5px!important;color:#86a8c7!important;font-size:9px!important;
  letter-spacing:.13em!important;font-weight:900!important;background:transparent!important;box-shadow:none!important;
}
.sidebar nav .menu-group-head:hover{color:#cfe5f7!important;background:transparent!important}
.sidebar nav .menu-group-head .nav-ic{width:14px!important;height:14px!important}
.sidebar nav .menu-group-body{gap:5px!important}
.sidebar-selectors{margin:15px 0 0!important;flex-direction:column!important;gap:9px!important}
.sidebar-mode-card{
  padding:11px;border:1px solid rgba(255,255,255,.12);border-radius:18px;
  background:rgba(3,18,36,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}
.sidebar-mode-heading{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.sidebar-mode-icon{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;color:#d8eafb;background:rgba(255,255,255,.09)}
.sidebar-mode-icon svg{width:17px;height:17px}
.sidebar-mode-heading>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.sidebar-mode-heading strong{font-size:10.5px;color:#fff;letter-spacing:.02em}
.sidebar-mode-heading small{font-size:8.5px;color:#93b1ce}
.theme-mode-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.theme-mode-button{
  min-width:0!important;padding:7px 4px!important;border-radius:11px!important;border:1px solid rgba(255,255,255,.1)!important;
  background:rgba(255,255,255,.055)!important;color:#bcd1e4!important;box-shadow:none!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;
  font-size:8.5px!important;font-weight:800!important;line-height:1!important;
}
.theme-mode-button:hover{background:rgba(255,255,255,.1)!important;filter:none!important}
.theme-mode-button.active{
  background:#fff!important;color:#173b62!important;border-color:#fff!important;
  box-shadow:0 6px 14px rgba(0,0,0,.18)!important;
}
.theme-swatch{display:block;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.48),0 2px 5px rgba(0,0,0,.18)}
.swatch-classic{background:linear-gradient(135deg,#227bc3,#72b8eb)}
.swatch-emerald{background:linear-gradient(135deg,#248664,#71c9a2)}
.swatch-dark{background:linear-gradient(135deg,#33475f,#879db4)}
.sidebar-refresh-button{
  width:100%;min-height:42px;padding:9px 12px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  border:1px solid rgba(255,255,255,.12)!important;border-radius:13px!important;background:rgba(255,255,255,.07)!important;
  color:#d7e8f7!important;box-shadow:none!important;font-size:10.5px!important;font-weight:800!important;
}
.sidebar-refresh-button svg{width:16px;height:16px}
.sidebar-refresh-button:hover{background:rgba(255,255,255,.12)!important;filter:none!important}
.sidebar .logout{
  min-height:43px;margin-top:10px!important;border-radius:13px!important;border:1px solid rgba(255,144,144,.22)!important;
  background:rgba(166,35,52,.18)!important;color:#ffd3d7!important;box-shadow:none!important;font-size:11px!important;
}
.sidebar .logout:hover{background:rgba(187,43,61,.28)!important;filter:none!important}
.sidebar-copyright{margin-top:12px!important;color:rgba(208,225,241,.48)!important;font-size:8.5px!important;letter-spacing:.08em}

/* Elegant compact mode switch in the admin top bar. */
.topbar-theme-switch{
  display:inline-flex;align-items:center;gap:3px;padding:4px;border:1px solid #dce6f0;border-radius:14px;
  background:rgba(255,255,255,.92);box-shadow:0 5px 15px rgba(15,42,68,.07);
}
.topbar-theme-switch button{
  width:31px;height:31px;padding:0!important;border-radius:10px!important;background:transparent!important;
  border:1px solid transparent!important;box-shadow:none!important;display:grid!important;place-items:center;color:inherit!important;
}
.topbar-theme-switch button:hover{background:#f2f6fa!important;filter:none!important}
.topbar-theme-switch button.active{background:#fff!important;border-color:#d5e1ec!important;box-shadow:0 4px 10px rgba(15,42,68,.12)!important}
.topbar-theme-switch .theme-swatch{width:11px;height:11px;box-shadow:0 0 0 2px #fff,0 0 0 3px #dce5ee}

/* Premium member home dashboard. */
.app.member-app .content{
  background:
    radial-gradient(circle at 90% 0,rgba(76,151,210,.10),transparent 25%),
    linear-gradient(145deg,#f4f8fc 0%,#edf3f8 100%)!important;
}
.member-dashboard-v12{width:min(1280px,100%);margin:0 auto;padding:2px 0 36px}
.member-v12-hero{
  position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:176px;padding:25px 27px;border-radius:27px;color:#fff;
  background:linear-gradient(132deg,#123c69 0%,#1e6097 58%,#2d7eb4 100%);
  border:1px solid rgba(255,255,255,.24);box-shadow:0 20px 42px rgba(20,69,111,.19);
}
body.theme-emerald .member-v12-hero{background:linear-gradient(132deg,#174d40 0%,#23725b 58%,#3a9575 100%)}
body.theme-dark .member-v12-hero{background:linear-gradient(132deg,#26394f 0%,#3b536d 58%,#56718d 100%)}
.member-v12-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.09),transparent 38%),radial-gradient(circle at 78% 20%,rgba(255,255,255,.17),transparent 26%);
}
.member-v12-hero-glow{position:absolute;right:-75px;bottom:-110px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.08);z-index:-1}
.member-v12-hero-main{display:flex;align-items:center;gap:18px;min-width:0}
.member-v12-avatar-shell{width:78px!important;height:78px!important;flex:0 0 78px;border-radius:24px!important;overflow:hidden!important;box-shadow:0 0 0 5px rgba(255,255,255,.12),0 14px 30px rgba(0,0,0,.18)}
.member-v12-avatar-shell img.dashboard-avatar{width:78px!important;height:78px!important;border-radius:24px!important;border:2px solid rgba(255,255,255,.88)!important;object-fit:cover!important}
.member-v12-avatar-shell input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:10}
.member-v12-avatar-shell .dashboard-avatar-hover{border-radius:24px!important;background:rgba(3,23,45,.56)!important;color:#fff!important}
.member-v12-hero-copy{min-width:0}
.member-v12-eyebrow{display:block;color:#bfe1fa;font-size:9px;font-weight:900;letter-spacing:.16em;margin-bottom:7px}
.member-v12-hero-copy p{margin:0 0 3px;color:#dceefa;font-size:12px;font-weight:650}
.member-v12-hero-copy h2{margin:0;color:#fff!important;font-size:clamp(22px,3vw,31px)!important;line-height:1.14;font-weight:900;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member-v12-status-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.member-v12-status{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);font-size:10px;font-weight:850;color:#fff}
.member-v12-status i{width:7px;height:7px;border-radius:50%;background:#5ee59b;box-shadow:0 0 0 4px rgba(94,229,155,.15)}
.member-v12-status.pending i{background:#f8d166;box-shadow:0 0 0 4px rgba(248,209,102,.15)}
.member-v12-status.inactive i{background:#ff8b95;box-shadow:0 0 0 4px rgba(255,139,149,.15)}
.member-v12-status-reason{font-size:9.5px;color:#dceafa;font-weight:700}
.member-v12-hero-actions{display:flex;align-self:flex-start;gap:8px;flex:0 0 auto}
.member-v12-icon-button{
  position:relative;width:41px;height:41px;padding:0!important;border-radius:13px!important;display:grid!important;place-items:center!important;
  color:#fff!important;background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.2)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important;backdrop-filter:blur(8px);
}
.member-v12-icon-button:hover{background:rgba(255,255,255,.2)!important;filter:none!important;transform:translateY(-1px)}
.member-v12-icon-button.member-v12-logout{color:#ffd5d9!important}
.member-v12-icon-button .member-notification-count{top:-5px!important;right:-5px!important}
.member-v12-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:15px 0}
.member-v12-summary{
  min-width:0;display:flex;align-items:center;gap:11px;padding:14px;border:1px solid var(--v12-panel-line);border-radius:19px;
  background:rgba(255,255,255,.92);box-shadow:0 8px 23px rgba(28,58,85,.055);
}
.member-v12-summary-icon{width:42px;height:42px;flex:0 0 42px;border-radius:14px;display:grid;place-items:center}
.member-v12-summary>div{display:flex;flex-direction:column;min-width:0;gap:3px}
.member-v12-summary small{font-size:9px;color:#708399;font-weight:800;letter-spacing:.035em}
.member-v12-summary strong{font-size:12.5px;color:#173550;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member-v12-summary.tone-blue .member-v12-summary-icon{color:#226eae;background:#e7f3fc}
.member-v12-summary.tone-purple .member-v12-summary-icon{color:#7652ae;background:#f1eafb}
.member-v12-summary.tone-green .member-v12-summary-icon,.member-v12-summary.tone-success .member-v12-summary-icon{color:#27805e;background:#e8f7f0}
.member-v12-summary.tone-warning .member-v12-summary-icon{color:#b66b19;background:#fff2df}
.member-v12-alert-stack{display:grid;gap:9px;margin:0 0 15px}
.member-v12-alert{
  width:100%;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:13px 15px!important;text-align:left;border-radius:17px!important;box-shadow:none!important;
}
.member-v12-alert.alert-revision{background:#fff7ed!important;color:#9a4d16!important;border:1px solid #f5d1ad!important}
.member-v12-alert.alert-profile{background:#fff1f2!important;color:#9d3441!important;border:1px solid #f4c5cb!important}
.member-v12-alert-icon{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.7)}
.member-v12-alert-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.member-v12-alert-copy strong{font-size:12px}.member-v12-alert-copy small{font-size:10px;line-height:1.45;font-weight:650}
.member-v12-alert-arrow{font-size:23px}
.member-v12-main-grid{display:grid;grid-template-columns:minmax(0,1.46fr) minmax(300px,.72fr);gap:15px;align-items:start}
.member-v12-panel,.member-v12-info-section{
  min-width:0;border:1px solid var(--v12-panel-line);border-radius:23px;background:rgba(255,255,255,.94);
  box-shadow:0 12px 32px rgba(24,57,87,.065);
}
.member-v12-panel{padding:18px}
.member-v12-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:0 0 15px}
.member-v12-section-head>div{min-width:0}.member-v12-section-head span{display:block;color:#5681a6;font-size:8px;font-weight:900;letter-spacing:.15em;margin-bottom:4px}
.member-v12-section-head h3{margin:0!important;color:#163650!important;font-size:17px!important;font-weight:900!important;letter-spacing:-.015em}
.member-v12-section-head>p{margin:0;color:#7b8da0;font-size:9.5px;font-weight:650;text-align:right;line-height:1.4}
.member-v12-kta-panel{overflow:hidden}
.member-v12-kta-wrap{min-width:0;padding-top:2px}
.member-v12-kta-panel .kta-flip-wrapper{margin-bottom:24px!important}
.member-v12-kta-panel .kta-flip-hint{margin-bottom:2px!important}
.member-v12-review-note{display:flex;align-items:flex-start;gap:10px;margin:0 0 13px;padding:12px;border-radius:15px;background:#eef6ff;border:1px solid #cfe3f7;color:#285b88}
.member-v12-review-note>span{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:#fff;flex:0 0 35px}
.member-v12-review-note strong{font-size:11.5px}.member-v12-review-note p{margin:3px 0 0;font-size:9.5px;line-height:1.45;color:#557796}
.member-v12-service-panel{position:sticky;top:18px}
.member-v12-service-list{display:grid;gap:9px}
.member-v12-service{
  width:100%;min-height:72px;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;
  padding:11px 12px!important;text-align:left!important;border-radius:16px!important;border:1px solid #e1e9f1!important;
  background:#fff!important;color:#173650!important;box-shadow:0 5px 14px rgba(25,55,82,.04)!important;
}
.member-v12-service:hover{transform:translateY(-2px);filter:none!important;box-shadow:0 10px 22px rgba(25,55,82,.085)!important}
.member-v12-service-icon{width:43px;height:43px;border-radius:14px;display:grid;place-items:center}
.member-v12-service-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.member-v12-service-copy strong{font-size:11.5px;color:#173650}.member-v12-service-copy small{font-size:9.2px;color:#708397;line-height:1.35;font-weight:600}
.member-v12-service-arrow{font-size:22px;color:#9aacbd}
.member-v12-service.tone-blue .member-v12-service-icon{color:#226eae;background:#e8f3fc}
.member-v12-service.tone-purple .member-v12-service-icon{color:#7450aa;background:#f1eafb}
.member-v12-service.tone-green .member-v12-service-icon{color:#27805e;background:#e8f7f0}
.member-v12-service.tone-orange .member-v12-service-icon{color:#b66b19;background:#fff1df}
.member-v12-info-section{margin-top:15px;padding:18px}
.member-v12-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.member-v12-info-card{display:flex;align-items:flex-start;gap:10px;padding:13px;border-radius:16px;background:#f7fafc;border:1px solid #e6edf4}
.member-v12-info-card>span{width:35px;height:35px;flex:0 0 35px;border-radius:12px;display:grid;place-items:center;color:#3977a7;background:#e8f2fa}
.member-v12-info-card>div{min-width:0}.member-v12-info-card strong{display:block;color:#1b3c58;font-size:10.5px;margin-bottom:4px}.member-v12-info-card p{margin:0;color:#708397;font-size:9.3px;line-height:1.45}

body.theme-dark .app.member-app .content{background:linear-gradient(145deg,#121c29,#182536)!important}
body.theme-dark .member-v12-summary,
body.theme-dark .member-v12-panel,
body.theme-dark .member-v12-info-section{background:#172638;border-color:#2b4055}
body.theme-dark .member-v12-summary strong,
body.theme-dark .member-v12-section-head h3,
body.theme-dark .member-v12-service-copy strong,
body.theme-dark .member-v12-info-card strong{color:#edf6ff!important}
body.theme-dark .member-v12-summary small,
body.theme-dark .member-v12-section-head>p,
body.theme-dark .member-v12-service-copy small,
body.theme-dark .member-v12-info-card p{color:#a9bdd0!important}
body.theme-dark .member-v12-service{background:#1b2d41!important;border-color:#30465c!important;color:#edf6ff!important}
body.theme-dark .member-v12-info-card{background:#1b2c3f;border-color:#2d4359}
body.theme-dark .member-v12-review-note{background:#1a3349;border-color:#31516c;color:#b9dcf5}
body.theme-dark .member-v12-review-note p{color:#9dbbd1}

@media(max-width:1100px){
  .member-v12-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .member-v12-main-grid{grid-template-columns:minmax(0,1fr)}
  .member-v12-service-panel{position:static}
  .member-v12-service-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .app,.app.member-app{display:block!important;grid-template-columns:1fr!important}
  .content,.app.member-app .content{order:0!important;padding:14px!important}
  .sidebar,.app.member-app .sidebar{position:fixed!important;top:0!important;left:0!important;bottom:0!important;height:100dvh!important;width:min(88vw,326px)!important;padding:17px 14px!important;margin:0!important;z-index:1200!important;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:0 18px 60px rgba(0,0,0,.45);overflow:auto!important;order:0!important}
  .app.sidebar-open .sidebar,.app.member-app.sidebar-open .sidebar{transform:translateX(0)!important}
  .topbar-theme-switch{display:none!important}
  .brand-logo-shell{width:50px;height:50px;background:transparent!important;border:none!important;box-shadow:none!important}
  .brand-logo-divider{display:none!important}
  .member-dashboard-v12{padding-bottom:92px}
}
@media(max-width:650px){
  .member-v12-hero{min-height:auto;padding:20px 17px;align-items:flex-start;border-radius:23px}
  .member-v12-hero-main{gap:13px;min-width:0}
  .member-v12-avatar-shell,.member-v12-avatar-shell img.dashboard-avatar{width:61px!important;height:61px!important}
  .member-v12-avatar-shell{flex-basis:61px;border-radius:19px!important}
  .member-v12-avatar-shell img.dashboard-avatar,.member-v12-avatar-shell .dashboard-avatar-hover{border-radius:19px!important}
  .member-v12-eyebrow{font-size:7.5px;letter-spacing:.11em;margin-bottom:5px}
  .member-v12-hero-copy p{font-size:10px}.member-v12-hero-copy h2{font-size:19px!important;max-width:54vw}
  .member-v12-status{font-size:8.5px;padding:5px 8px}
  .member-v12-hero-actions{gap:5px}.member-v12-icon-button{width:34px;height:34px;border-radius:11px!important}.member-v12-icon-button svg{width:17px!important;height:17px!important}
  .member-v12-summary-grid{gap:8px;margin:11px 0}
  .member-v12-summary{padding:11px 10px;border-radius:16px;gap:8px}.member-v12-summary-icon{width:35px;height:35px;flex-basis:35px;border-radius:12px}.member-v12-summary-icon svg{width:18px!important;height:18px!important}
  .member-v12-summary small{font-size:7.7px}.member-v12-summary strong{font-size:10.5px}
  .member-v12-panel,.member-v12-info-section{border-radius:20px;padding:14px}
  .member-v12-section-head{align-items:flex-start;margin-bottom:12px}.member-v12-section-head h3{font-size:15px!important}.member-v12-section-head>p{display:none}
  .member-v12-service-list{grid-template-columns:1fr}
  .member-v12-service{min-height:67px}
  .member-v12-info-grid{grid-template-columns:1fr}
  .member-v12-info-card{align-items:center}
}
@media(max-width:390px){
  .member-v12-hero{padding:17px 14px}.member-v12-hero-copy h2{font-size:17px!important;max-width:48vw}
  .member-v12-avatar-shell,.member-v12-avatar-shell img.dashboard-avatar{width:54px!important;height:54px!important}.member-v12-avatar-shell{flex-basis:54px}
  .member-v12-icon-button{width:31px;height:31px}.member-v12-summary-grid{grid-template-columns:1fr 1fr}
  .member-v12-summary{align-items:flex-start}.member-v12-summary strong{white-space:normal;line-height:1.25}
}


/* UI 12 finishing: consistent member topbar and general member surfaces. */
.app.member-app .topbar{
  min-height:58px;margin-bottom:14px!important;padding:8px 10px!important;border:1px solid rgba(213,226,238,.9);
  border-radius:18px;background:rgba(255,255,255,.84);box-shadow:0 8px 22px rgba(26,58,87,.055);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.app.member-app .topbar #pageTitle{color:#183a57!important;font-size:20px!important;font-weight:900!important;letter-spacing:-.02em}
.app.member-app .dashboard-greeting{color:#74899d!important;font-size:10px!important}
.app.member-app .menu-toggle{border-radius:13px!important;border-color:#d9e5ef!important;box-shadow:0 4px 12px rgba(20,55,82,.055)!important}
.app.member-app .card:not(.rev50-card){border-radius:21px!important;border-color:#dce7f1!important;box-shadow:0 10px 28px rgba(24,57,87,.06)!important}
.sidebar .logout{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important}
.sidebar .logout svg{width:16px;height:16px;flex:0 0 16px}
body.theme-dark .app.member-app .topbar{background:rgba(23,38,56,.88);border-color:#2c4258}
body.theme-dark .app.member-app .topbar #pageTitle{color:#eef6ff!important}
body.theme-dark .app.member-app .dashboard-greeting{color:#a9bdd0!important}
@media(max-width:650px){
  .app.member-app .topbar{min-height:54px;padding:6px 8px!important;border-radius:16px}
  .app.member-app .topbar #pageTitle{font-size:17px!important}
}

/* ===== V12: Notification queue scalability ===== */
.notification-panel-summary{
  padding:8px 12px;
  border-bottom:1px solid #e2e8f0;
  background:#f8fafc;
  color:#64748b;
  font-size:11px;
  font-weight:700;
  line-height:1.4;
}
.notification-panel-body{
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.notification-link{
  position:sticky;
  bottom:0;
  z-index:2;
}
@media screen and (max-width:700px){
  .notification-panel-summary{
    padding:8px 12px!important;
    font-size:10.5px!important;
  }
  .notification-panel-body{
    max-height:calc(100dvh - 230px)!important;
  }
}


/* ===== V12.1: Fix klik Foto Profil pada form revisi dari notifikasi ===== */
#memberNotificationPortal{
  pointer-events:none;
}
body.member-notification-portal-active #memberNotificationPortal{
  pointer-events:auto;
}

.revision-photo-field{
  position:relative;
  z-index:5;
}
.revision-file-picker{
  position:relative!important;
  isolation:isolate;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  min-height:52px!important;
  width:100%!important;
  padding:7px!important;
  border:1px solid var(--line)!important;
  border-radius:13px!important;
  background:#fff!important;
  overflow:hidden!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  z-index:20!important;
}
.revision-file-picker:focus-within{
  border-color:#3b82f6!important;
  box-shadow:0 0 0 3px rgba(59,130,246,.16)!important;
}
.revision-file-picker-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:38px!important;
  padding:8px 14px!important;
  border-radius:9px!important;
  background:linear-gradient(135deg,#2267a9,#0b4f9c)!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:900!important;
  white-space:nowrap!important;
  pointer-events:none!important;
}
.revision-file-picker-name{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:700!important;
  pointer-events:none!important;
}
.revision-file-picker.has-file .revision-file-picker-name{
  color:#166534!important;
}
.revision-file-picker input[type="file"]{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:inherit!important;
  opacity:.001!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  z-index:50!important;
  font-size:100px!important;
}
.revision-file-picker-help{
  color:#64748b!important;
  font-size:10.5px!important;
  line-height:1.4!important;
}
body.theme-dark .revision-file-picker{
  background:#111827!important;
  border-color:#334155!important;
}
body.theme-dark .revision-file-picker-name,
body.theme-dark .revision-file-picker-help{
  color:#cbd5e1!important;
}
@media(max-width:420px){
  .revision-file-picker{
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:8px!important;
  }
  .revision-file-picker-button{
    padding:8px 11px!important;
    font-size:11.5px!important;
  }
}

/* ================================================================
   V13 - ADMIN ACTIVATION MANAGER
   ================================================================ */
.btn-activation-admin{
  background:linear-gradient(135deg,#0f766e,#0d9488)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 4px 12px rgba(13,148,136,.2)!important;
}
.btn-activation-admin:hover{filter:brightness(1.04)}
.admin-activation-modal{z-index:950000!important;padding:18px!important;align-items:center!important;justify-content:center!important}
.admin-activation-card{width:min(720px,96vw)!important;max-height:min(92vh,900px)!important;overflow:auto!important;padding:0!important;border-radius:22px!important;background:var(--surface,#fff)!important;box-shadow:0 30px 90px rgba(2,6,23,.34)!important;border:1px solid rgba(148,163,184,.28)!important}
.admin-activation-head{position:sticky;top:0;z-index:3;padding:18px 20px!important;background:linear-gradient(135deg,#073b4c,#0f766e)!important;color:#fff!important;border-bottom:0!important}
.admin-activation-head h3{color:#fff!important;margin:3px 0 0!important;font-size:20px!important}
.admin-activation-head .modal-close{color:#fff!important;background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.2)!important}
.admin-activation-eyebrow{display:block;font-size:10px;font-weight:900;letter-spacing:.14em;color:#99f6e4}
.admin-activation-body{padding:20px}
.admin-activation-loading,.admin-activation-fatal{min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:32px}
.admin-activation-loading h4,.admin-activation-fatal h4{margin:0;font-size:18px;color:var(--text)}
.admin-activation-loading p,.admin-activation-fatal p{margin:0;color:var(--muted);max-width:480px}
.admin-activation-spinner{display:inline-block;width:28px;height:28px;border:3px solid rgba(15,118,110,.18);border-top-color:#0f766e;border-radius:50%;animation:adminActivationSpin .8s linear infinite}
@keyframes adminActivationSpin{to{transform:rotate(360deg)}}
.admin-activation-success{padding:12px 14px;margin-bottom:14px;border:1px solid #86efac;background:#f0fdf4;color:#166534;border-radius:12px;font-weight:800;line-height:1.45}
.admin-activation-summary{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid rgba(148,163,184,.28);border-radius:16px;background:linear-gradient(135deg,rgba(240,253,250,.96),rgba(248,250,252,.96));margin-bottom:14px}
.admin-activation-avatar{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:#0f766e;color:#fff;flex:0 0 auto}
.admin-activation-summary-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.admin-activation-summary-copy>strong{font-size:17px;color:var(--text);overflow-wrap:anywhere}
.admin-activation-summary-copy>span{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.admin-activation-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.activation-state{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:10.5px;font-weight:900;letter-spacing:.02em}
.activation-state-active{background:#dcfce7;color:#166534}.activation-state-pending{background:#fef3c7;color:#92400e}.activation-state-sent{background:#dbeafe;color:#1d4ed8}.activation-state-missing{background:#fee2e2;color:#991b1b}.activation-state-kta{background:#ccfbf1;color:#115e59}
.admin-activation-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:14px}
.admin-activation-meta-grid>div{padding:11px 12px;border-radius:12px;background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.18);min-width:0}
.admin-activation-meta-grid small{display:block;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.admin-activation-meta-grid b{font-size:12.5px;color:var(--text);overflow-wrap:anywhere}
.admin-activation-security-note{padding:11px 13px;margin-bottom:14px;border-radius:12px;background:#ecfeff;border:1px solid #a5f3fc;color:#155e75;font-size:12px;font-weight:700;line-height:1.5}
.admin-activation-field{margin-bottom:11px!important}
.admin-activation-field input,.admin-activation-field textarea{width:100%!important}
.admin-activation-error{padding:11px 13px;margin:10px 0;border-radius:12px;background:#fff1f2;border:1px solid #fecdd3;color:#be123c;font-size:12px;font-weight:800}
.admin-activation-action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.activation-action{min-height:108px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;text-align:left!important;gap:7px!important;padding:14px!important;border-radius:14px!important;margin:0!important;white-space:normal!important}
.activation-action b{font-size:13px}.activation-action span{font-size:10.8px;line-height:1.4;opacity:.9;font-weight:650}
.activation-action-correct{background:linear-gradient(135deg,#0f766e,#0d9488)!important;color:#fff!important}.activation-action-resend{background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;color:#fff!important}.activation-action-reset{background:linear-gradient(135deg,#b45309,#d97706)!important;color:#fff!important}
.activation-action:disabled{opacity:.42!important;cursor:not-allowed!important;filter:grayscale(.15)}
.admin-activation-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(148,163,184,.22)}
.admin-activation-busy{position:sticky;top:72px;z-index:4;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;margin:-4px 0 14px;border-radius:12px;background:rgba(255,255,255,.96);border:1px solid #99f6e4;box-shadow:0 10px 24px rgba(15,118,110,.14);color:#115e59}
.admin-activation-busy .admin-activation-spinner{width:20px;height:20px;border-width:2px}
.admin-activation-entry-actions{flex-wrap:wrap}
@media(max-width:720px){
  .admin-activation-modal{padding:0!important;align-items:flex-end!important}
  .admin-activation-card{width:100vw!important;max-height:95vh!important;border-radius:22px 22px 0 0!important}
  .admin-activation-body{padding:15px}
  .admin-activation-meta-grid{grid-template-columns:1fr}
  .admin-activation-action-grid{grid-template-columns:1fr}
  .activation-action{min-height:82px!important}
  .admin-activation-footer{display:grid;grid-template-columns:1fr 1fr}
}

/* V13.2 - Data Anggota dirender hanya setelah permintaan admin */
.member-lazy-empty-state {
  margin-top: 18px;
  padding: 34px 20px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  text-align: center;
  background: rgba(248, 250, 252, 0.72);
}
.member-lazy-empty-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.10);
  color: #2563eb;
  font-size: 28px;
  font-weight: 800;
}
.member-lazy-empty-state h4 {
  margin: 0 0 8px;
  font-size: 18px;
}
.member-lazy-empty-state p {
  max-width: 620px;
  margin: 0 auto 18px;
  color: var(--muted);
  line-height: 1.55;
}
.member-list-visibility-actions {
  display: flex;
  justify-content: flex-end;
  margin: 14px 0 10px;
}
@media (max-width: 640px) {
  .member-lazy-empty-state {
    padding: 26px 16px;
  }
  .member-lazy-empty-state button,
  .member-list-visibility-actions button {
    width: 100%;
  }
}