/* Consolidated application stylesheet — base styles, embedded overrides, and V15.1 refresh. */

: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-ui.webp') 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-ui.webp');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-ui.webp') 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-ui.webp') 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-ui.webp') 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%;
  }
}

/* ================================================================
   V13.7 — AUTH FORMS UI CONSISTENCY
   Scope: Daftar KTA Digital, Aktivasi Akun, Email Link, Lupa Password
   Visual only — tidak mengubah ID, fungsi, validasi, atau alur autentikasi.
   ================================================================ */

#ktaRegistrationModal,
#memberActivationModal,
#magicLoginModal,
#forgotPasswordModal {
  padding: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.12), transparent 28%),
    rgba(3, 17, 36, .76) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

#ktaRegistrationModal .activation-card,
#memberActivationModal .activation-card,
#magicLoginModal .activation-card,
#forgotPasswordModal .activation-card {
  position: relative !important;
  width: min(560px, 96vw) !important;
  max-height: min(92dvh, 880px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 30px 30px 26px !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  border-top: 0 !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,250,252,.99) 100%) !important;
  box-shadow: 0 28px 90px rgba(2, 6, 23, .38) !important;
  scrollbar-width: thin !important;
  scrollbar-color: #94a3b8 transparent !important;
  box-sizing: border-box !important;
}

#ktaRegistrationModal .activation-card {
  width: min(920px, 96vw) !important;
}

#ktaRegistrationModal .activation-card::before,
#memberActivationModal .activation-card::before,
#magicLoginModal .activation-card::before,
#forgotPasswordModal .activation-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 6px !important;
  border-radius: 24px 24px 0 0 !important;
  background: linear-gradient(90deg, #0b4f9c 0%, #2563eb 52%, #f2b705 100%) !important;
  pointer-events: none !important;
}

#ktaRegistrationModal .activation-card h2,
#memberActivationModal .activation-card h2,
#magicLoginModal .activation-card h2,
#forgotPasswordModal .activation-card h2 {
  margin: 2px 52px 8px 0 !important;
  color: #0f2f5f !important;
  font-size: clamp(21px, 2vw, 26px) !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  letter-spacing: -.025em !important;
}

#ktaRegistrationModal .activation-card > p,
#memberActivationModal .activation-card > p,
#magicLoginModal .activation-card > p,
#forgotPasswordModal .activation-card > p {
  margin: 0 0 20px !important;
  color: #526176 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

#ktaRegistrationModal form,
#memberActivationModal form,
#magicLoginModal form,
#forgotPasswordModal form {
  width: 100% !important;
  margin: 0 !important;
}

#ktaRegistrationModal .grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 15px 16px !important;
  align-items: start !important;
}

#ktaRegistrationModal .field,
#memberActivationModal .field,
#magicLoginModal .field,
#forgotPasswordModal .field {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 0 14px !important;
  min-width: 0 !important;
}

#ktaRegistrationModal .grid.two > .field {
  margin-bottom: 0 !important;
}

#ktaRegistrationModal .field > span,
#memberActivationModal .field > span,
#magicLoginModal .field > span,
#forgotPasswordModal .field > span {
  display: block !important;
  color: #243b5a !important;
  font-size: 13.5px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  letter-spacing: .005em !important;
}

#ktaRegistrationModal input:not([type="hidden"]),
#ktaRegistrationModal select,
#memberActivationModal input,
#memberActivationModal select,
#magicLoginModal input,
#forgotPasswordModal input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 14px !important;
  outline: none !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-family: inherit !important;
  font-size: 16.5px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03) !important;
  box-sizing: border-box !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

#ktaRegistrationModal input::placeholder,
#memberActivationModal input::placeholder,
#magicLoginModal input::placeholder,
#forgotPasswordModal input::placeholder {
  color: #8b98aa !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

#ktaRegistrationModal input:focus,
#ktaRegistrationModal select:focus,
#memberActivationModal input:focus,
#memberActivationModal select:focus,
#magicLoginModal input:focus,
#forgotPasswordModal input:focus {
  border-color: #2563eb !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .13) !important;
}

#ktaRegistrationModal input[type="file"] {
  height: auto !important;
  min-height: 56px !important;
  padding: 8px 10px !important;
  color: #526176 !important;
  cursor: pointer !important;
}

#ktaRegistrationModal input[type="file"]::file-selector-button {
  min-height: 38px !important;
  margin-right: 10px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #e8f1ff !important;
  color: #0b4f9c !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

#ktaRegistrationModal .password-wrapper,
#memberActivationModal .password-wrapper {
  position: relative !important;
  width: 100% !important;
}

#ktaRegistrationModal .password-wrapper input,
#memberActivationModal .password-wrapper input {
  padding-right: 54px !important;
}

#ktaRegistrationModal .password-wrapper > span,
#memberActivationModal .password-wrapper > span {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  color: #64748b !important;
  cursor: pointer !important;
  z-index: 5 !important;
}

#ktaRegistrationModal .password-wrapper > span:hover,
#memberActivationModal .password-wrapper > span:hover {
  background: #eff6ff !important;
  color: #0b4f9c !important;
}

#ktaRegistrationModal form > button[type="submit"],
#memberActivationModal form > button[type="submit"],
#magicLoginModal form > button[type="submit"],
#forgotPasswordModal form > button[type="submit"] {
  width: 100% !important;
  min-height: 54px !important;
  margin: 18px 0 0 !important;
  padding: 12px 18px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #0b4f9c 0%, #1769c2 100%) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  letter-spacing: .005em !important;
  box-shadow: 0 10px 24px rgba(11, 79, 156, .22) !important;
  cursor: pointer !important;
}

#ktaRegistrationModal form > button[type="submit"]:hover,
#memberActivationModal form > button[type="submit"]:hover,
#magicLoginModal form > button[type="submit"]:hover,
#forgotPasswordModal form > button[type="submit"]:hover {
  filter: brightness(1.04) !important;
  transform: translateY(-1px) !important;
}

#ktaRegistrationModal .activation-close,
#memberActivationModal .activation-close,
#magicLoginModal .activation-close,
#forgotPasswordModal .activation-close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 1px solid #dbe5f1 !important;
  border-radius: 13px !important;
  background: #f5f9ff !important;
  color: #0b4f9c !important;
  font-size: 27px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

#ktaRegistrationModal .activation-security-note,
#memberActivationModal .activation-security-note,
#forgotPasswordModal .activation-security-note {
  margin: 18px 0 0 !important;
  padding: 12px 14px !important;
  border: 1px solid #dbeafe !important;
  border-radius: 13px !important;
  background: #eff6ff !important;
  color: #315270 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-weight: 650 !important;
  text-align: left !important;
}

@media (max-width: 680px) {
  #ktaRegistrationModal,
  #memberActivationModal,
  #magicLoginModal,
  #forgotPasswordModal {
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }

  #ktaRegistrationModal .activation-card,
  #memberActivationModal .activation-card,
  #magicLoginModal .activation-card,
  #forgotPasswordModal .activation-card {
    width: 100vw !important;
    max-width: none !important;
    max-height: 96dvh !important;
    margin: 0 !important;
    padding: 28px 18px 22px !important;
    border-radius: 24px 24px 0 0 !important;
  }

  #ktaRegistrationModal .activation-card::before,
  #memberActivationModal .activation-card::before,
  #magicLoginModal .activation-card::before,
  #forgotPasswordModal .activation-card::before {
    border-radius: 24px 24px 0 0 !important;
  }

  #ktaRegistrationModal .grid.two {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #ktaRegistrationModal .activation-card h2,
  #memberActivationModal .activation-card h2,
  #magicLoginModal .activation-card h2,
  #forgotPasswordModal .activation-card h2 {
    margin-right: 48px !important;
    font-size: 22px !important;
  }

  #ktaRegistrationModal .activation-card > p,
  #memberActivationModal .activation-card > p,
  #magicLoginModal .activation-card > p,
  #forgotPasswordModal .activation-card > p {
    font-size: 13.5px !important;
    margin-bottom: 18px !important;
  }

  #ktaRegistrationModal input:not([type="hidden"]),
  #ktaRegistrationModal select,
  #memberActivationModal input,
  #memberActivationModal select,
  #magicLoginModal input,
  #forgotPasswordModal input {
    min-height: 58px !important;
    height: 58px !important;
    font-size: 17px !important;
    border-radius: 14px !important;
  }

  #ktaRegistrationModal input[type="file"] {
    height: auto !important;
    min-height: 58px !important;
  }

  #ktaRegistrationModal .field > span,
  #memberActivationModal .field > span,
  #magicLoginModal .field > span,
  #forgotPasswordModal .field > span {
    font-size: 13.5px !important;
  }

  #ktaRegistrationModal form > button[type="submit"],
  #memberActivationModal form > button[type="submit"],
  #magicLoginModal form > button[type="submit"],
  #forgotPasswordModal form > button[type="submit"] {
    min-height: 56px !important;
    font-size: 16px !important;
  }

  #ktaRegistrationModal .activation-close,
  #memberActivationModal .activation-close,
  #magicLoginModal .activation-close,
  #forgotPasswordModal .activation-close {
    top: 14px !important;
    right: 14px !important;
  }
}

@media (max-height: 700px) and (min-width: 681px) {
  #ktaRegistrationModal .activation-card,
  #memberActivationModal .activation-card,
  #magicLoginModal .activation-card,
  #forgotPasswordModal .activation-card {
    max-height: calc(100dvh - 24px) !important;
    padding-top: 24px !important;
    padding-bottom: 22px !important;
  }
}


/* ==========================================================================
   V14 SAFE UI / RESPONSIVE / PERFORMANCE BASELINE
   Presentation-only hardening. Workflow, database schema, IDs and handlers
   remain compatible with V13.
   ========================================================================== */
:root{
  --v14-control-h:48px;
  --v14-touch:44px;
  --v14-radius:14px;
  --v14-shadow:0 12px 34px rgba(15,23,42,.08);
}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:320px;overflow-x:hidden}
button,input,select,textarea{font-size:max(16px,1rem)}
button{min-height:var(--v14-touch);line-height:1.2}
.field input,.field select,.field textarea,
.auth-modal input,.auth-modal select,.auth-modal textarea,
.member-filter-controls input,.member-filter-controls select{
  min-height:var(--v14-control-h);
  font-size:16px;
  line-height:1.35;
}
#view{width:100%;max-width:1540px;margin-inline:auto}
.card{box-shadow:var(--v14-shadow)}
.v14-data-loading,.v14-directory-loading{
  min-height:160px;display:flex;align-items:center;justify-content:center;gap:16px;
  text-align:left;color:#334155
}
.v14-data-loading h3{margin:0 0 5px}.v14-data-loading p,.v14-directory-loading p{margin:0;color:#64748b}
.v14-spinner{
  width:34px;height:34px;flex:0 0 auto;border:3px solid #dbe7f5;border-top-color:#155ea8;
  border-radius:50%;animation:v14-spin .75s linear infinite
}
@keyframes v14-spin{to{transform:rotate(360deg)}}
.member-list-visibility-actions{display:flex;justify-content:flex-end;margin:0 0 10px}
.member-filter-toolbar{position:relative}
.member-filter-controls input,.member-filter-controls select{background:#fff}
.modal,.auth-modal,.scanner-modal{overscroll-behavior:contain}
.modal>div,.auth-modal>div,.scanner-container{
  max-height:min(92dvh,900px);overflow-y:auto;overscroll-behavior:contain
}
img{max-width:100%}
.avatar{background:#eef2f7}

@media (max-width:900px){
  :root{--v14-control-h:52px;--v14-touch:46px}
  .content{padding:16px 14px calc(92px + env(safe-area-inset-bottom))}
  .topbar{gap:10px;align-items:flex-start}
  .topbar h2{font-size:clamp(20px,6vw,27px);line-height:1.15}
  .card{border-radius:16px;padding:16px}
  .grid,.grid.two{grid-template-columns:minmax(0,1fr)}
  .actions{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
  .actions>button,.actions>a{width:100%;justify-content:center}
  #view table{display:block;max-width:100%;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  #view table th,#view table td{min-width:max-content}
  .member-action-grid{min-width:210px!important}
  .table-pagination,.report-pagination,.kta-list-pagination{align-items:stretch!important}
  .table-pagination>div,.kta-pagination-controls{width:100%;justify-content:center}
  .bottom-nav{padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .modal,.auth-modal,.scanner-modal{padding:10px!important;align-items:flex-end!important}
  .modal>div,.auth-modal>div,.scanner-container{width:100%!important;max-width:100%!important;border-radius:20px 20px 14px 14px!important}
}
@media (max-width:420px){
  .content{padding-inline:10px}
  .card{padding:14px}
  .member-filter-toolbar{padding:0}
  .member-filter-title{align-items:flex-start;gap:8px}
  .member-filter-count-badge{white-space:normal;text-align:right}
  .dashboard-v10-summary-grid,.dashboard-v10-action-grid{grid-template-columns:minmax(0,1fr)!important}
  .login-card,.auth-shell,.auth-modal-card{border-radius:20px!important}
}
@media (min-width:901px) and (max-height:800px){
  .content{padding-top:16px;padding-bottom:16px}
  .card{margin-bottom:12px}
  .dashboard-v10{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{
  #view table{display:table!important;overflow:visible!important;white-space:normal!important}
  .v14-data-loading,.v14-directory-loading{display:none!important}
}

/* ==========================================================================
   V14.1 MOBILE ADMIN DASHBOARD COMPACT
   Mobile-only presentation refinement. No workflow, handler, database,
   permission, routing, or data-loading behavior is changed.
   ========================================================================== */
@media screen and (max-width:700px){
  .dashboard-v10{
    gap:10px!important;
    padding-bottom:2px;
  }

  .dashboard-v10-hero{
    min-height:0!important;
    gap:9px!important;
    padding:14px 14px 12px!important;
    border-radius:18px!important;
    box-shadow:0 12px 28px rgba(8,38,72,.17)!important;
  }
  .dashboard-v10-hero::before{
    width:190px!important;
    height:190px!important;
    top:-128px!important;
    right:-28px!important;
  }
  .dashboard-v10-hero-copy{
    max-width:none!important;
  }
  .dashboard-v10-eyebrow{
    min-height:21px!important;
    margin-bottom:6px!important;
    padding:3px 8px!important;
    border-radius:999px!important;
    font-size:7.7px!important;
    letter-spacing:.105em!important;
  }
  .dashboard-v10-hero h2{
    margin-bottom:3px!important;
    font-size:20px!important;
    line-height:1.08!important;
    letter-spacing:-.025em!important;
  }
  .dashboard-v10-puk{
    margin-bottom:3px!important;
    font-size:11.5px!important;
    line-height:1.25!important;
    letter-spacing:.01em!important;
  }
  .dashboard-v10-federation{
    margin-bottom:6px!important;
    font-size:7.2px!important;
    line-height:1.25!important;
    letter-spacing:.055em!important;
  }
  .dashboard-v10-hero p{
    display:-webkit-box!important;
    max-width:100%!important;
    margin:0!important;
    overflow:hidden!important;
    font-size:10.4px!important;
    line-height:1.36!important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .dashboard-v10-hero-meta{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    justify-content:flex-start!important;
  }
  .dashboard-v10-datetime{
    width:auto!important;
    max-width:100%!important;
    min-height:27px!important;
    gap:5px!important;
    padding:5px 8px!important;
    border-radius:9px!important;
    font-size:8.5px!important;
    line-height:1.2!important;
    white-space:normal!important;
  }

  .dashboard-v10-section{
    padding:12px!important;
    border-radius:18px!important;
    box-shadow:0 8px 22px rgba(37,65,98,.065)!important;
  }
  .dashboard-v10-section-head{
    align-items:flex-start!important;
    margin-bottom:9px!important;
  }
  .dashboard-v10-section-head>div>span{
    margin-bottom:2px!important;
    font-size:7.8px!important;
    letter-spacing:.12em!important;
  }
  .dashboard-v10-section-head h3{
    font-size:14px!important;
    line-height:1.2!important;
  }
  .dashboard-v10-section-head p{
    display:none!important;
  }

  .dashboard-v10-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .dashboard-v10 .dashboard-v10-summary{
    min-height:70px!important;
    gap:8px!important;
    padding:9px!important;
    border-radius:14px!important;
    box-shadow:0 5px 13px rgba(45,75,108,.055)!important;
  }
  .dashboard-v10-summary-icon{
    flex:0 0 34px!important;
    width:34px!important;
    height:34px!important;
    border-radius:11px!important;
  }
  .dashboard-v10-summary-icon svg{
    width:18px!important;
    height:18px!important;
  }
  .dashboard-v10-summary-copy{
    gap:2px!important;
  }
  .dashboard-v10-summary-copy span{
    font-size:8.6px!important;
    line-height:1.18!important;
  }
  .dashboard-v10-summary-copy strong{
    font-size:20px!important;
    line-height:1!important;
  }

  .dashboard-v10-action-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .dashboard-v10 .dashboard-v10-action{
    min-height:78px!important;
    grid-template-columns:35px minmax(0,1fr)!important;
    gap:8px!important;
    padding:10px!important;
    border-radius:15px!important;
    box-shadow:0 5px 14px rgba(43,70,102,.055)!important;
  }
  .dashboard-v10 .dashboard-v10-action:hover{
    transform:none!important;
  }
  .dashboard-v10-action-icon{
    width:35px!important;
    height:35px!important;
    border-radius:11px!important;
  }
  .dashboard-v10-action-icon svg{
    width:19px!important;
    height:19px!important;
  }
  .dashboard-v10-action-copy{
    gap:0!important;
  }
  .dashboard-v10-action-copy strong{
    display:-webkit-box!important;
    overflow:hidden!important;
    font-size:10.6px!important;
    line-height:1.24!important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .dashboard-v10-action-copy span{
    display:none!important;
  }
  .dashboard-v10-action-arrow{
    display:none!important;
  }
  .dashboard-v10 .dashboard-v10-badge{
    top:6px!important;
    right:6px!important;
    min-width:19px!important;
    height:19px!important;
    padding:0 5px!important;
    border-width:1.5px!important;
    font-size:8px!important;
  }
  .dashboard-v10-secondary-section{
    margin-bottom:0!important;
  }
}

@media screen and (max-width:380px){
  .dashboard-v10-hero{
    padding:12px!important;
  }
  .dashboard-v10-hero h2{
    font-size:18.5px!important;
  }
  .dashboard-v10-puk{
    font-size:10.6px!important;
  }
  .dashboard-v10-hero p{
    font-size:9.7px!important;
  }
  .dashboard-v10-section{
    padding:10px!important;
    border-radius:16px!important;
  }
  .dashboard-v10 .dashboard-v10-summary{
    min-height:66px!important;
    padding:8px!important;
    gap:7px!important;
  }
  .dashboard-v10-summary-icon{
    flex-basis:31px!important;
    width:31px!important;
    height:31px!important;
  }
  .dashboard-v10-summary-copy span{
    font-size:8px!important;
  }
  .dashboard-v10-summary-copy strong{
    font-size:18px!important;
  }
  .dashboard-v10 .dashboard-v10-action{
    min-height:72px!important;
    grid-template-columns:31px minmax(0,1fr)!important;
    gap:7px!important;
    padding:8px!important;
  }
  .dashboard-v10-action-icon{
    width:31px!important;
    height:31px!important;
  }
  .dashboard-v10-action-icon svg{
    width:17px!important;
    height:17px!important;
  }
  .dashboard-v10-action-copy strong{
    font-size:9.8px!important;
  }
}

@media screen and (max-width:340px){
  .dashboard-v10-hero p{
    display:none!important;
  }
  .dashboard-v10-federation{
    margin-bottom:3px!important;
  }
  .dashboard-v10 .dashboard-v10-summary,
  .dashboard-v10 .dashboard-v10-action{
    border-radius:13px!important;
  }
}

/* ================================================================
   V14.2 MEMBER MOBILE DASHBOARD COMPACT PROFESSIONAL
   Scope: presentational mobile-only hardening for the member dashboard.
   Business workflow, routes, authentication, data, KTA, and notifications
   remain unchanged.
   ================================================================ */
@media screen and (max-width:650px){
  /* Reduce excessive vertical space while keeping the dashboard readable. */
  .member-dashboard-v12{
    padding-bottom:86px!important;
  }
  .member-v12-main-grid{
    gap:11px!important;
  }
  .member-v12-panel,
  .member-v12-info-section{
    padding:12px!important;
    border-radius:18px!important;
  }
  .member-v12-section-head{
    margin-bottom:9px!important;
  }
  .member-v12-section-head span{
    font-size:8px!important;
    letter-spacing:.13em!important;
    margin-bottom:3px!important;
  }
  .member-v12-section-head h3{
    font-size:16px!important;
    line-height:1.2!important;
  }

  /* Dashboard KTA is a compact preview. Full KTA pages retain their size. */
  .member-v12-kta-panel{
    padding-bottom:10px!important;
  }
  .member-v12-kta-wrap{
    padding-top:0!important;
  }
  .member-v12-kta-panel .kta-flip-wrapper{
    min-height:72mm!important;
    height:72mm!important;
    margin:0 auto 9px!important;
  }
  .member-v12-kta-panel .kta-flip-sizer{
    width:45.4mm!important;
    height:72mm!important;
  }
  .member-v12-kta-panel .kta-flip-container{
    transform:scale(.84)!important;
    transform-origin:center center!important;
  }
  .member-v12-kta-panel .kta-flip-hint{
    margin:3px 0 0!important;
    font-size:10.5px!important;
    line-height:1.3!important;
  }

  /* Four primary services are visible at once in a clear 2 x 2 grid. */
  .member-v12-service-panel{
    padding:12px!important;
  }
  .member-v12-service-list{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .member-v12-service{
    min-width:0!important;
    min-height:94px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:8px!important;
    padding:11px!important;
    border-radius:16px!important;
    border:1px solid #dce8f2!important;
    background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%)!important;
    color:#15344f!important;
    box-shadow:0 7px 18px rgba(23,58,87,.07)!important;
    text-align:left!important;
  }
  .member-v12-service:active{
    transform:scale(.985)!important;
  }
  .member-v12-service-icon{
    width:39px!important;
    height:39px!important;
    flex:0 0 39px!important;
    border-radius:13px!important;
  }
  .member-v12-service-icon svg{
    width:20px!important;
    height:20px!important;
  }
  .member-v12-service-copy{
    width:100%!important;
    gap:0!important;
  }
  .member-v12-service-copy strong{
    display:block!important;
    color:#102f49!important;
    font-size:13px!important;
    font-weight:850!important;
    line-height:1.25!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .member-v12-service-copy small{
    display:none!important;
  }
  .member-v12-service-arrow{
    display:none!important;
  }

  /* Information remains available, but uses one compact swipeable row. */
  .member-v12-info-section{
    margin-top:11px!important;
    overflow:hidden!important;
  }
  .member-v12-info-grid{
    display:grid!important;
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(230px,82vw)!important;
    gap:9px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:1px 1px 5px!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  .member-v12-info-grid::-webkit-scrollbar{
    display:none!important;
  }
  .member-v12-info-card{
    min-height:76px!important;
    align-items:center!important;
    gap:10px!important;
    padding:11px 12px!important;
    border-radius:15px!important;
    background:#f8fbfd!important;
    border-color:#e2ebf3!important;
    scroll-snap-align:start!important;
    box-shadow:none!important;
  }
  .member-v12-info-card>span{
    width:37px!important;
    height:37px!important;
    flex-basis:37px!important;
    border-radius:12px!important;
  }
  .member-v12-info-card strong{
    color:#173650!important;
    font-size:12px!important;
    line-height:1.25!important;
    margin-bottom:3px!important;
  }
  .member-v12-info-card p{
    color:#5f7387!important;
    font-size:10.5px!important;
    line-height:1.38!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  /* Ensure readable contrast when legacy/theme rules are active. */
  body:not(.theme-dark) .member-v12-service,
  body:not(.theme-dark) .member-v12-service.tone-blue,
  body:not(.theme-dark) .member-v12-service.tone-purple,
  body:not(.theme-dark) .member-v12-service.tone-green,
  body:not(.theme-dark) .member-v12-service.tone-orange{
    background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%)!important;
  }
  body:not(.theme-dark) .member-v12-service-copy strong{
    color:#102f49!important;
  }

  body.theme-dark .member-v12-service{
    background:linear-gradient(180deg,#1c3044 0%,#182a3c 100%)!important;
    border-color:#314a61!important;
    box-shadow:0 7px 18px rgba(0,0,0,.16)!important;
  }
  body.theme-dark .member-v12-service-copy strong,
  body.theme-dark .member-v12-info-card strong{
    color:#eef7ff!important;
  }
  body.theme-dark .member-v12-info-card{
    background:#1b2c3f!important;
    border-color:#2d4359!important;
  }
  body.theme-dark .member-v12-info-card p{
    color:#b0c2d2!important;
  }
}

@media screen and (max-width:390px){
  .member-v12-service-list{
    gap:8px!important;
  }
  .member-v12-service{
    min-height:88px!important;
    padding:10px!important;
  }
  .member-v12-service-copy strong{
    font-size:12.2px!important;
  }
  .member-v12-kta-panel .kta-flip-wrapper{
    min-height:68mm!important;
    height:68mm!important;
  }
  .member-v12-kta-panel .kta-flip-sizer{
    width:42.9mm!important;
    height:68mm!important;
  }
  .member-v12-kta-panel .kta-flip-container{
    transform:scale(.794)!important;
  }
  .member-v12-info-grid{
    grid-auto-columns:minmax(220px,86vw)!important;
  }
}

/* ===== UI REDESIGN V2 : MODERN ENTERPRISE EXPERIENCE ===== */
:root{
 --new-bg:#f8fafc;
 --new-navy:#0f172a;
 --new-blue:#2563eb;
 --new-green:#10b981;
 --new-orange:#f59e0b;
}
body{background:var(--new-bg)!important;color:#1e293b!important}
.sidebar{
 background:linear-gradient(180deg,#020617 0%,#0f172a 55%,#172554 100%)!important;
 border-right:1px solid rgba(255,255,255,.08);
}
.brand{font-size:26px!important}
.content{padding:32px!important}
.topbar h2{font-size:28px!important;font-weight:900!important}
.card,.stat{
 border:none!important;
 border-radius:24px!important;
 box-shadow:0 12px 35px rgba(15,23,42,.08)!important;
 transition:.25s ease;
}
.card:hover,.stat:hover{
 transform:translateY(-5px);
 box-shadow:0 20px 45px rgba(15,23,42,.14)!important;
}
.dash-hero{
 background:
 radial-gradient(circle at 85% 20%,rgba(59,130,246,.35),transparent 30%),
 linear-gradient(135deg,#020617,#1d4ed8)!important;
 min-height:210px;
 padding:36px!important;
 border-radius:30px!important;
 position:relative;
 overflow:hidden;
 box-shadow:0 25px 60px rgba(37,99,235,.25)!important;
}
.dash-hero:after{
 content:"";
 position:absolute;
 width:180px;height:180px;
 right:-50px;bottom:-70px;
 border-radius:50%;
 background:rgba(255,255,255,.12);
}
.stat{
 border-left:none!important;
 position:relative;
 overflow:hidden;
 padding:22px!important;
}
.stat:before{
 content:"";
 position:absolute;
 left:0;top:0;width:100%;height:5px;
 background:linear-gradient(90deg,#2563eb,#10b981);
}
.stat b{font-size:42px!important;color:#0f172a!important}
.grid{gap:20px!important}
button{
 background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;
 border-radius:14px!important;
 box-shadow:0 8px 18px rgba(37,99,235,.25);
 transition:.2s ease;
}
button:hover{transform:translateY(-2px);filter:none!important}
.pill{
 background:#dbeafe!important;
 color:#1d4ed8!important;
}
/* modern empty states */
.card h3{font-size:20px!important}
@media(max-width:700px){
 .content{padding:16px!important}
 .dash-hero{padding:24px!important;min-height:170px}
 .topbar h2{font-size:22px!important}
 .stat b{font-size:34px!important}
}

/* V3 Modern Enterprise Dashboard Layer - UI only, no logic/database changes */
.admin-cockpit-mosaic-v3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.admin-live-panel{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(12px);border-radius:22px;padding:22px;color:white;transition:.25s ease}
.admin-live-panel:hover{transform:translateY(-4px);box-shadow:0 18px 35px rgba(0,0,0,.18)}
.admin-live-panel small{display:block;text-transform:uppercase;letter-spacing:.08em;opacity:.75}
.admin-live-panel strong{display:block;font-size:28px;margin:12px 0}
.admin-live-panel span{opacity:.8;font-size:13px}
.admin-live-panel i{display:inline-block;width:10px;height:10px;background:#22c55e;border-radius:50%;margin-right:8px}
@media(max-width:768px){.admin-cockpit-mosaic-v3{grid-template-columns:1fr}.admin-live-panel strong{font-size:24px}}

/* V4 Safe Visual Upgrade: Navigation + Action Center + Activity Experience */
:root{
 --v4-navy:#0f172a;
 --v4-blue:#2563eb;
 --v4-green:#10b981;
 --v4-bg:#f8fafc;
}
body{background:var(--v4-bg)!important}
/* modern navigation feeling */
.sidebar,.side-menu,.admin-sidebar{
 background:linear-gradient(180deg,#0f172a,#172554)!important;
 box-shadow:12px 0 35px rgba(15,23,42,.12)!important;
}
.sidebar a,.side-menu a,.admin-sidebar a{
 border-radius:14px!important;
 margin:4px 10px!important;
 transition:.25s ease!important;
}
.sidebar a:hover,.side-menu a:hover,.admin-sidebar a:hover{
 background:rgba(255,255,255,.12)!important;
 transform:translateX(4px);
}
/* action center cards */
.action-center,.quick-action,.dashboard-actions{
 border-radius:24px!important;
 background:#fff!important;
 box-shadow:0 12px 30px rgba(15,23,42,.08)!important;
}
.action-center .card,.quick-action .card,.dashboard-actions .card{
 border:1px solid #e2e8f0!important;
 border-radius:20px!important;
 transition:.25s ease!important;
}
.action-center .card:hover,.quick-action .card:hover,.dashboard-actions .card:hover{
 transform:translateY(-6px);
 box-shadow:0 18px 40px rgba(37,99,235,.14)!important;
}
/* fresh icons */
.icon-box,.menu-icon,.stat-icon{
 border-radius:16px!important;
 box-shadow:0 8px 18px rgba(37,99,235,.18)!important;
}
/* modern empty state */
.empty-state,.empty-card{
 border-radius:24px!important;
 background:linear-gradient(145deg,#ffffff,#f1f5f9)!important;
}
/* timeline */
.activity-timeline,.timeline{
 border-left:3px solid #dbeafe!important;
 padding-left:20px!important;
}
@media(max-width:768px){
 .action-center,.quick-action,.dashboard-actions{border-radius:18px!important}
 .sidebar a,.side-menu a,.admin-sidebar a{margin:3px 6px!important}
}

/* Revisi dashboard 2026-07-28: elemen hero yang ditandai dihapus dan kartu Operasional Harian duplikat dinonaktifkan. */
.admin-cockpit-mosaic-v3.admin-cockpit-clock-only{grid-template-columns:minmax(0,1fr);max-width:520px}
.admin-cockpit-clock-only .admin-live-panel{min-height:120px}
@media(max-width:768px){.admin-cockpit-mosaic-v3.admin-cockpit-clock-only{max-width:none}}


/* =========================================================
   Revisi 133 — Laporan PUK: toolbar rapi + ikon ringkasan
   lebih berwarna, futuristik, dan hemat ruang.
   ========================================================= */
.report-control-v2{
  position:relative;
  overflow:visible;
}
.report-toolbar-top{
  display:grid;
  grid-template-columns:minmax(220px,340px) minmax(280px,1fr);
  align-items:end;
  gap:14px;
  margin-bottom:14px;
}
.report-filter-pill-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  min-width:0;
}
.report-filter-pill-wrap small{
  color:#5e6f84;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.report-filter-pill{
  font-size:13px;
  padding:9px 14px;
  border-radius:999px;
  background:linear-gradient(135deg,#edf4ff,#dbeafe);
  color:#1b4d95;
  border:1px solid rgba(37,99,235,.10);
  box-shadow:0 10px 24px rgba(37,99,235,.10);
  white-space:normal;
}
.report-type-field{
  width:100%;
}
.report-type-field>span{
  font-size:12px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#37475f;
}
.report-type-select-native{
  width:100%!important;
  min-height:46px;
  padding:11px 42px 11px 14px!important;
  border-radius:14px!important;
  border:1px solid #d7e1ee!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  color:#153253!important;
  font-weight:800!important;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
  appearance:none;
  -webkit-appearance:none;
  background-image:linear-gradient(180deg,#ffffff,#f8fbff),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233b5b86' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position:0 0,right 14px center;
  background-size:auto,18px;
}
.report-type-select-native:focus{
  outline:none;
  border-color:#6ea8ff!important;
  box-shadow:0 0 0 4px rgba(59,130,246,.16),0 12px 28px rgba(37,99,235,.10);
}
.report-actions-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.report-actions-row button{
  min-width:160px;
}
.report-summary-grid.report-summary-launcher{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:6px 0 20px;
}
.report-summary-launcher .report-stat-tile{
  display:flex!important;
  align-items:center!important;
  gap:13px!important;
  min-width:0!important;
  min-height:102px!important;
  padding:16px!important;
  border:1px solid #e2e8f0!important;
  border-left:0!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,#ffffff,#fbfdff)!important;
  box-shadow:0 16px 34px rgba(15,23,42,.06)!important;
  position:relative!important;
  overflow:hidden!important;
}
.report-summary-launcher .report-stat-tile::before{
  content:'';
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:4px;
  background:var(--report-accent,#60a5fa);
}
.report-summary-launcher .report-stat-tile::after{
  content:'';
  position:absolute;
  right:-24px;
  top:-24px;
  width:88px;
  height:88px;
  border-radius:50%;
  background:radial-gradient(circle at center,rgba(255,255,255,.55),rgba(255,255,255,0));
  pointer-events:none;
}
.report-summary-launcher .report-stat-icon{
  flex:0 0 56px!important;
  width:56px!important;
  height:56px!important;
  margin:0!important;
  border-radius:18px!important;
  display:grid!important;
  place-items:center!important;
  position:relative!important;
  overflow:hidden!important;
  box-shadow:0 12px 22px rgba(15,23,42,.12)!important;
}
.report-summary-launcher .report-stat-icon::after{
  content:'';
  position:absolute;
  inset:6px auto auto 8px;
  width:44%;
  height:22%;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  transform:rotate(-22deg);
}
.report-summary-launcher .report-stat-icon svg{
  width:24px!important;
  height:24px!important;
  position:relative;
  z-index:1;
}
.report-summary-launcher .report-stat-tile small{
  display:block!important;
  margin:0 0 5px!important;
  min-height:auto!important;
  color:#5d7187!important;
  font-size:11px!important;
  font-weight:850!important;
  line-height:1.28!important;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:left!important;
}
.report-summary-launcher .report-stat-tile b{
  display:block!important;
  margin:0!important;
  color:#13375d!important;
  font-size:33px!important;
  font-weight:900!important;
  line-height:1.05!important;
  text-align:left!important;
}
.report-summary-launcher .report-stat-tile{
  --report-accent:#60a5fa;
}
.report-summary-launcher .report-stat-blue{
  --report-accent:#4da3ff;
}
.report-summary-launcher .report-stat-blue .report-stat-icon{
  background:linear-gradient(145deg,#dff3ff,#bfe4ff)!important;
  color:#0a78bf!important;
  border:1px solid rgba(10,120,191,.13)!important;
}
.report-summary-launcher .report-stat-green{
  --report-accent:#34d399;
}
.report-summary-launcher .report-stat-green .report-stat-icon{
  background:linear-gradient(145deg,#e3fbf0,#c7f3dd)!important;
  color:#11865a!important;
  border:1px solid rgba(17,134,90,.13)!important;
}
.report-summary-launcher .report-stat-orange{
  --report-accent:#f5a44a;
}
.report-summary-launcher .report-stat-orange .report-stat-icon{
  background:linear-gradient(145deg,#fff1df,#ffdba9)!important;
  color:#d97115!important;
  border:1px solid rgba(217,113,21,.13)!important;
}
.report-summary-launcher .report-stat-purple{
  --report-accent:#b071ff;
}
.report-summary-launcher .report-stat-purple .report-stat-icon{
  background:linear-gradient(145deg,#f5ecff,#e4d0ff)!important;
  color:#7b3ab7!important;
  border:1px solid rgba(123,58,183,.13)!important;
}
.report-summary-launcher .report-stat-cyan{
  --report-accent:#3bc7e8;
}
.report-summary-launcher .report-stat-cyan .report-stat-icon{
  background:linear-gradient(145deg,#e1faff,#c8f3fb)!important;
  color:#0f89a8!important;
  border:1px solid rgba(15,137,168,.13)!important;
}
@media screen and (max-width:1100px){
  .report-toolbar-top{
    grid-template-columns:minmax(0,1fr);
  }
  .report-summary-grid.report-summary-launcher{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media screen and (max-width:900px){
  .report-toolbar-top{
    gap:10px!important;
    margin-bottom:10px!important;
  }
  .report-filter-pill-wrap small{
    font-size:10px!important;
  }
  .report-filter-pill{
    font-size:12px!important;
    padding:8px 12px!important;
  }
  .report-type-select-native{
    min-height:44px!important;
    font-size:14px!important;
  }
  .report-summary-grid.report-summary-launcher{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .report-summary-launcher .report-stat-tile{
    min-height:0!important;
    padding:0 1px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    gap:0!important;
  }
  .report-summary-launcher .report-stat-tile::before,
  .report-summary-launcher .report-stat-tile::after{
    display:none!important;
  }
  .report-summary-launcher .report-stat-tile small,
  .report-summary-launcher .report-stat-tile b{
    text-align:center!important;
  }
  .report-actions-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
  }
  .report-actions-row button{
    width:100%!important;
    min-width:0!important;
  }
}
@media screen and (max-width:360px){
  .report-type-select-native{
    font-size:13px!important;
    padding-right:38px!important;
  }
}

/* ========================================================================== */
/* REVISION STAGE 10 — MEMBER DASHBOARD COMPACT + PREMIUM BOTTOM NAV          */
/* ========================================================================== */

/* Perjalanan keanggotaan dapat dibuka-tutup; default tertutup. */
.member-v15-journey-toggle {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: inherit !important;
  text-align: left;
  box-shadow: none !important;
  cursor: pointer;
}
.member-v15-journey-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.member-v15-journey-title small {
  color: #a93d69;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}
.member-v15-journey-title strong {
  margin-top: 3px;
  color: #153852;
  font-size: 18px;
  line-height: 1.2;
}
.member-v15-journey-title em {
  margin-top: 5px;
  overflow: hidden;
  color: #55738b;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-v15-journey-chevron {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  color: #176daf;
  border-radius: 12px;
  background: rgba(23,109,175,.09);
  transition: transform .22s ease, background .22s ease;
}
.member-v15-journey-chevron svg { width: 21px; height: 21px; }
.member-v15-journey:not(.is-collapsed) .member-v15-journey-chevron {
  transform: rotate(180deg);
  background: rgba(23,109,175,.15);
}
.member-v15-journey.is-collapsed .member-v15-journey-track { display: none; }
.member-v15-journey:not(.is-collapsed) .member-v15-journey-track { margin-top: 16px; }

/* Navigasi bawah modern, profesional, dan lebih terbaca. */
.app.member-app .bottom-nav {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  width: auto !important;
  height: 72px !important;
  padding: 7px 8px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 3px !important;
  background: linear-gradient(145deg, rgba(7,42,81,.98), rgba(7,83,145,.98)) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 36px rgba(3,35,69,.34), 0 4px 12px rgba(3,35,69,.22), inset 0 1px 0 rgba(255,255,255,.15) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
  overflow: visible !important;
  z-index: 1100 !important;
}
.app.member-app .bottom-nav .nav-item {
  position: relative !important;
  min-width: 0 !important;
  height: 56px !important;
  padding: 5px 3px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  color: rgba(236,246,255,.88) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease !important;
}
.app.member-app .bottom-nav .nav-item:active { transform: scale(.94) !important; }
.app.member-app .bottom-nav .nav-icon {
  width: 27px !important;
  height: 27px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  color: inherit !important;
  transition: transform .22s ease, color .22s ease !important;
}
.app.member-app .bottom-nav .nav-icon svg { width: 22px !important; height: 22px !important; stroke-width: 2.2 !important; }
.app.member-app .bottom-nav .nav-label {
  max-width: 100% !important;
  color: inherit !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-weight: 750 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  opacity: 1 !important;
}
.app.member-app .bottom-nav .nav-item.active {
  color: #fff !important;
  background: linear-gradient(145deg, rgba(40,157,232,.98), rgba(11,103,184,.98)) !important;
  box-shadow: 0 7px 17px rgba(0,97,173,.38), inset 0 1px 0 rgba(255,255,255,.26) !important;
  transform: translateY(-3px) !important;
}
.app.member-app .bottom-nav .nav-item.active .nav-icon { color: #ffe181 !important; transform: scale(1.06) !important; }
.app.member-app .bottom-nav .nav-item.active .nav-label { color: #fff !important; font-weight: 850 !important; }
.app.member-app .bottom-nav .nav-item.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: #ffe181;
  transform: translateX(-50%);
  box-shadow: 0 1px 5px rgba(255,225,129,.45);
}
.app.member-app .bottom-nav .nav-scan-wrapper {
  position: relative !important;
  height: 64px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 2px 3px !important;
  overflow: visible !important;
}
.app.member-app .bottom-nav .nav-scan-btn {
  position: absolute !important;
  left: 50% !important;
  top: -26px !important;
  width: 62px !important;
  height: 62px !important;
  min-height: 62px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  background: linear-gradient(145deg, #32b3f4 0%, #087dc9 52%, #07518c 100%) !important;
  border: 4px solid rgba(244,249,255,.98) !important;
  border-radius: 21px !important;
  box-shadow: 0 12px 24px rgba(0,83,151,.44), 0 3px 8px rgba(0,55,105,.28), inset 0 1px 0 rgba(255,255,255,.38) !important;
  transform: translateX(-50%) !important;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
  z-index: 3 !important;
}
.app.member-app .bottom-nav .nav-scan-btn::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px;
  pointer-events: none;
}
.app.member-app .bottom-nav .nav-scan-btn:active { transform: translateX(-50%) scale(.92) !important; }
.app.member-app .bottom-nav .scan-icon { display: grid !important; place-items: center !important; }
.app.member-app .bottom-nav .scan-icon svg { width: 27px !important; height: 27px !important; stroke-width: 2.7 !important; }
.app.member-app .bottom-nav .scan-label {
  margin-top: 0 !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  text-shadow: 0 1px 3px rgba(0,32,67,.34);
}
.app.member-app .content,
.app.member-app .member-dashboard-v12 { padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important; }
@media (max-width: 380px) {
  .app.member-app .bottom-nav { left: 7px !important; right: 7px !important; padding-inline: 5px !important; }
  .app.member-app .bottom-nav .nav-label,
  .app.member-app .bottom-nav .scan-label { font-size: 9.5px !important; }
  .app.member-app .bottom-nav .nav-scan-btn { width: 58px !important; height: 58px !important; min-height: 58px !important; }
}

/* =========================================================
   TAHAP 11 — dashboard anggota lebih ringkas dan terbaca
   ========================================================= */

/* Perjalanan keanggotaan: hilangkan latar gelap dari aturan lama. */
.app.member-app .member-v15-journey {
  position: relative !important;
  overflow: hidden !important;
  padding: 14px 16px !important;
  background: linear-gradient(145deg, #ffffff 0%, #f5faff 100%) !important;
  border: 1px solid rgba(37, 104, 154, .16) !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 26px rgba(24, 73, 111, .10) !important;
}
.app.member-app .member-v15-journey::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 5px !important;
  background: linear-gradient(180deg, #249be0, #b73b73) !important;
}
.app.member-app .member-v15-journey-toggle {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.app.member-app .member-v15-journey-title {
  max-width: calc(100% - 52px) !important;
  overflow: hidden !important;
}
.app.member-app .member-v15-journey-title small {
  color: #a73368 !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
}
.app.member-app .member-v15-journey-title strong {
  color: #123a59 !important;
  font-size: clamp(16px, 4.5vw, 19px) !important;
  line-height: 1.18 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
.app.member-app .member-v15-journey-title em {
  color: #58748a !important;
  font-size: 10.5px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.app.member-app .member-v15-journey-chevron {
  color: #0b6eaf !important;
  background: #e8f5ff !important;
  border: 1px solid rgba(11,110,175,.14) !important;
}

/* Identitas digital tertutup secara default, dapat dibuka dari header. */
.app.member-app .member-v15-kta-section {
  padding: 14px 16px !important;
}
.app.member-app .member-v15-kta-toggle {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 0 !important;
  color: inherit !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.app.member-app .member-v15-kta-title {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  max-width: calc(100% - 52px) !important;
}
.app.member-app .member-v15-kta-title small {
  color: #b33d68 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .13em !important;
}
.app.member-app .member-v15-kta-title strong {
  margin-top: 3px !important;
  color: #153852 !important;
  font-size: clamp(16px, 4.5vw, 19px) !important;
  line-height: 1.2 !important;
}
.app.member-app .member-v15-kta-title em {
  margin-top: 5px !important;
  color: #58748a !important;
  font-size: 10.5px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  overflow-wrap: anywhere !important;
}
.app.member-app .member-v15-kta-chevron {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  display: grid !important;
  place-items: center !important;
  color: #0b6eaf !important;
  background: #e8f5ff !important;
  border: 1px solid rgba(11,110,175,.14) !important;
  border-radius: 12px !important;
  transition: transform .22s ease, background .22s ease !important;
}
.app.member-app .member-v15-kta-chevron svg { width: 21px !important; height: 21px !important; }
.app.member-app .member-v15-kta-section:not(.is-collapsed) .member-v15-kta-chevron {
  transform: rotate(180deg) !important;
  background: #d9efff !important;
}
.app.member-app .member-v15-kta-section.is-collapsed .member-v15-kta-content { display: none !important; }
.app.member-app .member-v15-kta-section:not(.is-collapsed) .member-v15-kta-content { margin-top: 16px !important; }

/* Ikon dan label navigasi nonaktif dibuat jelas, bukan abu-abu pucat. */
.app.member-app .bottom-nav .nav-item:not(.active) {
  color: #d9f0ff !important;
}
.app.member-app .bottom-nav .nav-item:not(.active) .nav-icon {
  color: #8ed8ff !important;
  filter: drop-shadow(0 1px 3px rgba(0, 34, 68, .38)) !important;
}
.app.member-app .bottom-nav .nav-item:not(.active) .nav-label {
  color: #f2f9ff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 3px rgba(0, 29, 59, .45) !important;
}
.app.member-app .bottom-nav .nav-item.active .nav-icon {
  color: #ffe36f !important;
}

/* V16.58 STAGE74 — halaman scan QR untuk Admin PUK */
.admin-scan-page{overflow:hidden;padding:0!important;background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%)}
.admin-scan-shell{display:flex;flex-direction:column;gap:0}
.admin-scan-hero{display:flex;align-items:center;gap:18px;padding:26px;background:linear-gradient(135deg,#eff8ff 0%,#eefcf7 100%);border-bottom:1px solid var(--line)}
.admin-scan-hero-icon{flex:0 0 auto;display:grid;place-items:center}
.admin-scan-hero-copy{min-width:0}
.admin-scan-kicker{display:block;margin-bottom:5px;font-size:10px;font-weight:900;letter-spacing:.12em;color:#0872a8}
.admin-scan-hero h3{margin:0;color:#082f49;font-size:24px;line-height:1.15}
.admin-scan-hero p{margin:7px 0 0;max-width:720px;color:#526477;line-height:1.6}
.admin-scan-grid{display:grid;grid-template-columns:minmax(280px,1.05fr) minmax(280px,.95fr);gap:18px;padding:24px}
.admin-scan-panel{display:flex;flex-direction:column;gap:14px;padding:20px;border:1px solid #e2e8f0;border-radius:20px;background:#fff;box-shadow:0 14px 30px rgba(15,23,42,.05)}
.admin-scan-panel-primary{background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)}
.admin-scan-panel-manual{background:#fff}
.admin-scan-panel-head h4{margin:4px 0 6px;color:#0f172a;font-size:19px;line-height:1.25}
.admin-scan-panel-head p{margin:0;color:#64748b;font-size:13px;line-height:1.65}
.admin-scan-panel-label{display:inline-flex;align-self:flex-start;padding:6px 10px;border-radius:999px;background:#e0f2fe;color:#075985;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.admin-scan-primary{display:flex!important;align-items:flex-start!important;justify-content:flex-start!important;gap:14px!important;min-height:96px!important;width:100%!important;padding:18px!important;text-align:left!important;border:none!important;border-radius:18px!important;background:linear-gradient(135deg,#0369a1,#0284c7)!important;box-shadow:0 14px 28px rgba(2,132,199,.22)!important}
.admin-scan-primary-icon{flex:0 0 auto;display:grid;place-items:center}
.admin-scan-primary-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.admin-scan-primary strong{display:block;font-size:15px;line-height:1.35;color:#fff;word-break:break-word}
.admin-scan-primary small{display:block;font-size:11px;line-height:1.5;color:rgba(255,255,255,.9);font-weight:600;word-break:break-word}
.admin-scan-feature-list{display:flex;flex-wrap:wrap;gap:8px}
.admin-scan-feature-list span{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:11px;font-weight:700}
.admin-scan-field-label{font-size:12px;font-weight:800;color:#334155}
.admin-scan-manual-row{display:flex;gap:10px;align-items:stretch}
.admin-scan-manual-row input{flex:1;min-width:0;margin:0!important;text-transform:uppercase;background:#fff}
.admin-scan-manual-row button{flex:0 0 auto;white-space:nowrap;min-width:124px}
.admin-scan-helper{font-size:11px;line-height:1.6;color:#64748b;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:14px;padding:10px 12px}
.admin-scan-helper strong{color:#0f172a}
.admin-scan-security-note{display:flex;align-items:flex-start;gap:10px;margin:0 24px 24px;padding:14px 16px;border-radius:16px;background:#f8fafc;border:1px solid #dbeafe;color:#475569}
.admin-scan-security-note p{margin:0;font-size:11px;line-height:1.65}
.admin-scan-security-note strong{color:#1e3a8a}
@media(max-width:900px){
  .admin-scan-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  .admin-scan-hero{align-items:flex-start;padding:20px 18px}
  .admin-scan-hero h3{font-size:20px}
  .admin-scan-grid{padding:18px}
  .admin-scan-panel{padding:16px;border-radius:18px}
  .admin-scan-primary{padding:16px!important}
  .admin-scan-manual-row{flex-direction:column}
  .admin-scan-manual-row button{width:100%;min-width:0}
  .admin-scan-security-note{margin:0 18px 18px}
}



/* V16.59 STAGE75 — direct scanner admin + quick scan card */
.admin-scan-direct-page{padding:14px!important;background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%)}
.admin-scanner-inline-shell{max-width:100%!important;padding:16px!important;box-shadow:0 16px 34px rgba(15,23,42,.08);border:1px solid #e2e8f0;border-radius:24px;background:#fff}
.scanner-container-inline .scanner-inline-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:-4px}
.scanner-container-inline .scanner-inline-header h3{font-size:20px}
.scanner-inline-refresh-btn{width:34px;height:34px;display:grid;place-items:center;border:none;border-radius:12px;background:#eff6ff!important;color:#2563eb!important;box-shadow:0 6px 14px rgba(37,99,235,.15)!important;padding:0!important;flex:0 0 auto}
.scanner-inline-refresh-btn svg{width:18px;height:18px}
.scanner-inline-status{font-size:12px;color:#64748b;text-align:center;margin:2px 0 8px;line-height:1.5}
.scanner-inline-actions{display:flex;justify-content:flex-start;align-items:center;gap:10px;flex-wrap:wrap}
.scanner-inline-upload{margin:0!important;cursor:pointer}
@media(max-width:720px){
  .admin-scan-direct-page{padding:10px!important}
  .admin-scanner-inline-shell{padding:12px!important;border-radius:22px;gap:12px!important}
  .scanner-container-inline .scanner-inline-header h3{font-size:18px}
  .scanner-reader-wrapper-inline{padding:4px 0 0!important}
  #readerInline{height:clamp(275px,42vh,345px)!important;min-height:275px!important;max-height:345px!important}
  #readerInline video{width:100%!important;height:100%!important;object-fit:cover!important}
  .scanner-inline-status{margin:-2px 0 0!important}
  .scanner-container-inline .scanner-manual-input-group{flex-direction:row!important;margin-top:0!important;padding-top:10px!important;gap:8px!important}
  .scanner-container-inline .scanner-manual-input-group input{min-width:0!important;padding:10px 12px!important}
  .scanner-container-inline .scanner-manual-input-group button{width:auto!important;flex:0 0 auto!important;padding-left:14px!important;padding-right:14px!important}
  .scanner-inline-actions{flex-direction:column;align-items:stretch}
  .scanner-inline-actions .btn-secondary{width:100%;justify-content:center}
}

/* ===== Former index.html inline stylesheet ===== */
/* Email selalu huruf kecil; password dan input khusus tidak diubah otomatis. */
    input[type="email"],
    #loginEmail, #regEmail, #revEmail, #activationEmail,
    #magicLoginEmail, #forgotPasswordEmail, #checkRegEmail {
      text-transform: lowercase !important;
      font-variant-caps: normal !important;
    }
    input[type="password"],
    input.no-uppercase:not([type="email"]):not(#loginEmail),
    .no-uppercase:not(input),
    #loginPassword, #regPassword, #regPasswordConfirm,
    #memberNewPassword, #memberConfirmPassword,
    #firstNewPassword, #firstConfirmPassword {
      text-transform: none !important;
      font-variant-caps: normal !important;
    }

    /* Force UPPERCASE text transformation ONLY on general text inputs that are NOT password or email */
    input[type="text"]:not(#loginEmail):not(#loginPassword):not(#regEmail):not(#regPassword):not(#regPasswordConfirm):not(#revEmail):not(#memberNewPassword):not(#memberConfirmPassword):not(#firstNewPassword):not(#firstConfirmPassword):not([type="email"]):not([type="password"]),
    textarea,
    select {
      text-transform: uppercase;
    }

    /* ===== Absolute Lock to Hide Inactive Modals & Prevent Overlay Click Blocking ===== */
    .activation-modal.hidden,
    .system-dialog.hidden,
    .modal.hidden,
    .hidden {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
      z-index: -99999 !important;
      opacity: 0 !important;
    }
    .activation-modal:not(.hidden) {
      display: flex !important;
      visibility: visible !important;
      pointer-events: auto !important;
      z-index: 999950 !important;
      opacity: 1 !important;
    }

    /* ===== Multi-Theme High-Contrast Overrides ===== */
    html, body {
      height: 100% !important;
      overflow-x: hidden !important;
    }
    .login-page {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100dvh !important;
      height: 100vh !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 16px !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
      touch-action: none !important;
      z-index: 900000 !important;
    }
    .login-card {
      width: 100% !important;
      max-width: 420px !important;
      max-height: 94dvh !important;
      max-height: 94vh !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      padding: 22px 26px !important;
      margin: auto !important;
      box-sizing: border-box !important;
      border-radius: 20px !important;
      background: rgba(255, 255, 255, 0.95) !important;
      backdrop-filter: blur(14px) !important;
      -webkit-backdrop-filter: blur(14px) !important;
      border: 1px solid rgba(255, 255, 255, 0.6) !important;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
      scrollbar-width: thin !important;
    }
    .login-logo-container {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      width: 100% !important;
      max-width: 380px !important;
      margin: 0 auto 12px !important;
      padding: 0 8px !important;
    }
    .login-logo-container img {
      width: 144px !important;
      height: 144px !important;
      max-height: 144px !important;
      object-fit: contain !important;
      flex-shrink: 0 !important;
      filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.10)) !important;
    }
    .login-logo-container img:first-child {
      transform: translateX(-8px) !important;
    }
    .login-logo-container img:last-child {
      transform: translateX(8px) !important;
    }
    .login-card p {
      font-size: 11.5px !important;
      margin: 3px 0 8px 0 !important;
      line-height: 1.35 !important;
      color: #334155 !important;
    }
    .login-card input[type="text"],
    .login-card input[type="email"],
    .login-card input[type="password"] {
      padding: 10px 14px !important;
      font-size: 13px !important;
      border-radius: 10px !important;
      margin: 4px 0 !important;
      border: 1px solid #cbd5e1 !important;
      background: rgba(255, 255, 255, 0.95) !important;
    }
    .login-card button[type="submit"] {
      padding: 11px 16px !important;
      font-size: 13.5px !important;
      font-weight: 800 !important;
      border-radius: 10px !important;
      margin-top: 8px !important;
      background: #dc2626 !important;
      color: #ffffff !important;
    }
    .login-card .btn-activation {
      padding: 10px 14px !important;
      font-size: 12.5px !important;
      font-weight: 700 !important;
      border-radius: 10px !important;
      margin-top: 5px !important;
      background: #eab308 !important;
      color: #0f172a !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: 10.5px !important;
      margin: 8px 0 3px 0 !important;
      line-height: 1.35 !important;
      color: #475569 !important;
    }
    .login-card small {
      font-size: 10px !important;
      margin-top: 2px !important;
      display: block !important;
      color: #64748b !important;
    }

    /* Mobile Only Adjustments (Layar HP <= 480px) */
    @media (max-width: 480px) {
      .login-page {
        padding: 8px !important;
      }
      .login-card {
        padding: 16px 18px !important;
        width: 92vw !important;
        max-width: 380px !important;
        border-radius: 16px !important;
      }
      .login-logo-container {
        max-width: 260px !important;
        margin: 0 auto 8px !important;
      }
      .login-logo-container img {
        width: 108px !important;
        height: 108px !important;
        transform: none !important;
      }
      .login-brand-group {
        margin-top: 2px !important;
        margin-bottom: 6px !important;
      }
      .login-brand-group h2 {
        font-size: 12.5px !important;
      }
      .login-brand-group p {
        font-size: 10px !important;
      }
      .login-card input[type="text"],
      .login-card input[type="email"],
      .login-card input[type="password"] {
        padding: 8px 11px !important;
        font-size: 12px !important;
      }
      .login-card button[type="submit"],
      .login-card .btn-activation {
        padding: 9px 12px !important;
        font-size: 12px !important;
      }
    }

    /* Low Height Monitor / Mobile Landscape Adjustments */
    @media (max-height: 700px) {
      .login-card {
        padding: 14px 18px !important;
      }
      .login-logo-container img {
        width: 96px !important;
        height: 96px !important;
      }
    }

    /* Modal Close Button (X) High Priority Fix */
    .activation-close {
      position: absolute !important;
      top: 14px !important;
      right: 14px !important;
      z-index: 999999 !important;
      pointer-events: auto !important;
      cursor: pointer !important;
      width: 36px !important;
      height: 36px !important;
      border-radius: 50% !important;
      border: none !important;
      background: #e2e8f0 !important;
      color: #0f172a !important;
      font-size: 22px !important;
      font-weight: 800 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      transition: all 0.2s ease !important;
      line-height: 1 !important;
    }
    .activation-close:hover {
      background: #dc2626 !important;
      color: #ffffff !important;
    }

    
    /* Tombol Kembali ke Profil / Kembali ke Beranda (Selalu Transparan di Semua Tema) */
    .app.member-app button.member-profile-back,
    .app.member-app .member-profile-back,
    .app button.member-profile-back,
    button.member-profile-back,
    .member-profile-back,
    .member-profile-detail-page button.member-profile-back,
    .member-profile-detail-page .member-profile-back {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
      text-decoration: none !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      color: #0b4f9c !important; /* Default: Biru Navy Gelap untuk Mode Terang/Biru */
    }
    
    .app.member-app button.member-profile-back:hover,
    button.member-profile-back:hover,
    .member-profile-back:hover {
      color: #082b57 !important;
      text-decoration: underline !important;
      background: transparent !important;
    }
    
    /* Tombol Lengkapi/Ubah Data Keluarga & Lihat Sertifikat (Default: Mode Terang/Biru) */
    .app.member-app button.member-profile-edit-inline,
    .app.member-app .member-profile-edit-inline,
    .app.member-app button.member-profile-file-link,
    .app.member-app .member-profile-file-link,
    button.member-profile-edit-inline,
    .member-profile-edit-inline,
    button.member-profile-file-link,
    .member-profile-file-link {
      background: #0b4f9c !important; /* Solid Navy */
      color: #ffffff !important; /* Teks Putih Bersih */
      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.member-app button.member-profile-edit-inline:hover,
    button.member-profile-edit-inline:hover {
      background: #082b57 !important;
      border-color: #082b57 !important;
      color: #ffffff !important;
    }
    
    /* Mode Terang / Biru Lembut (classic & emerald) Latar Halaman */
    body.theme-classic .app.member-app .content,
    body.theme-emerald .app.member-app .content {
      background: #f8fafc !important;
      color: #0f172a !important;
    }
    
    /* === Khusus Mode Gelap (Dark Mode) === */
    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; /* Biru Langit untuk latar belakang gelap */
    }
    
    body.theme-dark button.member-profile-back:hover,
    body.theme-dark .member-profile-back:hover {
      color: #93c5fd !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; /* Biru Terang untuk Mode Gelap */
      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 {
      background: #1d4ed8 !important;
      border-color: #1d4ed8 !important;
    }
    
    /* Akses Cepat (Semua Tema) */
    .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;
    }
    
    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;
      font-weight: 800 !important;
      font-size: 11px !important;
      margin-top: 6px !important;
      min-height: unset !important;
    }
    
    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;
      font-weight: 800 !important;
      font-size: 11px !important;
      margin-top: 6px !important;
      min-height: unset !important;
    }

    /* ===== TEMA TERANG (Classic/Biru & Emerald/Hijau): Perbaikan Kontras Kartu Profil ===== */
    
    /* Tombol Menu Profil Terang */
    body.theme-classic .app.member-app button.member-profile-menu-card,
    body.theme-emerald .app.member-app button.member-profile-menu-card,
    body.theme-classic .app.member-app .member-profile-page button.member-profile-menu-card,
    body.theme-emerald .app.member-app .member-profile-page button.member-profile-menu-card {
      background: #ffffff !important;
      color: #0f172a !important;
      border: 1.5px solid #cbd5e1 !important;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    }
    body.theme-classic .app.member-app button.member-profile-menu-card:hover,
    body.theme-emerald .app.member-app button.member-profile-menu-card:hover,
    body.theme-classic .app.member-app .member-profile-page button.member-profile-menu-card:hover,
    body.theme-emerald .app.member-app .member-profile-page button.member-profile-menu-card:hover {
      background: #f8fafc !important;
      border-color: #94a3b8 !important;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08) !important;
    }
    
    /* Judul Menu & Catatan Terang */
    body.theme-classic .app.member-app .member-profile-menu-card .member-profile-menu-title,
    body.theme-emerald .app.member-app .member-profile-menu-card .member-profile-menu-title {
      color: #0f172a !important; /* Hitam pekat */
      font-weight: 850 !important;
    }
    body.theme-classic .app.member-app .member-profile-menu-card .member-profile-menu-note,
    body.theme-emerald .app.member-app .member-profile-menu-card .member-profile-menu-note {
      color: #334155 !important; /* Slate gelap - kontras tinggi untuk tulisan kecil "identitas dan kontak" */
      font-weight: 700 !important;
      font-size: 11px !important;
    }
    body.theme-classic .app.member-app .member-profile-menu-card .member-profile-menu-arrow,
    body.theme-emerald .app.member-app .member-profile-menu-card .member-profile-menu-arrow {
      color: #475569 !important;
      font-weight: bold !important;
    }

    /* Headings di Bagian Atas Terang */
    body.theme-classic .app.member-app .member-profile-menu-heading h3,
    body.theme-emerald .app.member-app .member-profile-page .member-profile-menu-heading h3,
    body.theme-classic .app.member-app .member-profile-overview-copy h3,
    body.theme-emerald .app.member-app .member-profile-overview-copy h3 {
      color: #0f172a !important;
      font-weight: 900 !important;
    }
    body.theme-classic .app.member-app .member-profile-menu-heading p,
    body.theme-emerald .app.member-app .member-profile-page .member-profile-menu-heading p,
    body.theme-classic .app.member-app .member-profile-overview-copy p,
    body.theme-emerald .app.member-app .member-profile-overview-copy p {
      color: #334155 !important; /* Abu-abu gelap */
      font-weight: 650 !important;
    }

    /* Kartu Atas Terang */
    body.theme-classic .app.member-app .member-profile-overview.card,
    body.theme-emerald .app.member-app .member-profile-overview.card {
      background: #ffffff !important;
      border: 1.5px solid #cbd5e1 !important;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    }

    /* Kartu Seleksi Tema Terang */
    body.theme-classic .app.member-app .member-profile-page .card,
    body.theme-emerald .app.member-app .member-profile-page .card {
      background: #ffffff !important;
      border: 1.5px solid #cbd5e1 !important;
    }
    body.theme-classic .app.member-app .member-profile-page .card h4,
    body.theme-emerald .app.member-app .member-profile-page .card h4 {
      color: #0f172a !important; /* Ganti dari var(--blue) yang tidak terlalu kontras */
      font-weight: 850 !important;
    }
    body.theme-classic .app.member-app .member-profile-page .card p.muted,
    body.theme-emerald .app.member-app .member-profile-page .card p.muted {
      color: #334155 !important;
      font-weight: 650 !important;
    }
    body.theme-classic .app.member-app .member-profile-page .theme-selector-el,
    body.theme-emerald .app.member-app .member-profile-page .theme-selector-el {
      background: #ffffff !important;
      color: #0f172a !important;
      border: 1.5px solid #cbd5e1 !important;
    }

    /* ===== TEMA GELAP (Dark Mode): Perbaikan Kontras & Warna Tulisan ===== */
    
    /* Tombol Menu Profil Gelap */
    body.theme-dark .app.member-app button.member-profile-menu-card,
    body.theme-dark .app.member-app .member-profile-page button.member-profile-menu-card {
      background: #1e293b !important; /* Lighter dark slate untuk memisahkan kartu dari latar */
      border: 1.5px solid #334155 !important;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important;
    }
    body.theme-dark .app.member-app button.member-profile-menu-card:hover,
    body.theme-dark .app.member-app .member-profile-page button.member-profile-menu-card:hover {
      background: #334155 !important;
      border-color: #475569 !important;
    }
    
    /* Judul Menu & Catatan Gelap */
    body.theme-dark .app.member-app .member-profile-menu-card .member-profile-menu-title {
      color: #ffffff !important;
      font-weight: 850 !important;
    }
    body.theme-dark .app.member-app .member-profile-menu-card .member-profile-menu-note {
      color: #cbd5e1 !important; /* Abu-abu terang - kontras tinggi di latar gelap */
      font-weight: 700 !important;
      font-size: 11px !important;
    }
    body.theme-dark .app.member-app .member-profile-menu-card .member-profile-menu-arrow {
      color: #94a3b8 !important;
      font-weight: bold !important;
    }

    /* Headings di Bagian Atas Gelap */
    body.theme-dark .app.member-app .member-profile-menu-heading h3,
    body.theme-dark .app.member-app .member-profile-overview-copy h3,
    body.theme-dark .app.member-app .member-profile-page h4 {
      color: #ffffff !important;
      font-weight: 900 !important;
    }
    body.theme-dark .app.member-app .member-profile-menu-heading p,
    body.theme-dark .app.member-app .member-profile-overview-copy p,
    body.theme-dark .app.member-app .member-profile-page p.muted,
    body.theme-dark .app.member-app .muted,
    body.theme-dark .app.member-app p.muted {
      color: #cbd5e1 !important; /* Sangat terbaca di latar gelap */
      font-weight: 650 !important;
    }

    /* Kartu Atas Gelap & Kartu Seleksi Tema Gelap */
    body.theme-dark .app.member-app .member-profile-overview.card,
    body.theme-dark .app.member-app .member-profile-page .card,
    body.theme-dark .app.member-app .member-profile-detail-card {
      background: #1e293b !important;
      border: 1.5px solid #334155 !important;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important;
    }

    body.theme-dark .app.member-app .theme-selector-el {
      background: #1e293b !important;
      color: #ffffff !important;
      border: 1.5px solid #334155 !important;
    }

    /* Halaman Detail Profil Gelap (Sub-menu detail rows) */
    body.theme-dark .app.member-app .member-profile-detail-heading h3 {
      color: #ffffff !important;
    }
    body.theme-dark .app.member-app .member-profile-detail-heading p {
      color: #cbd5e1 !important;
    }
    body.theme-dark .app.member-app .member-profile-info-row {
      border-bottom-color: #334155 !important;
    }
    body.theme-dark .app.member-app .member-profile-info-row span {
      color: #cbd5e1 !important;
      font-weight: 650 !important;
    }
    body.theme-dark .app.member-app .member-profile-info-row strong {
      color: #ffffff !important;
    }

    /* ===== Responsive visibility for the premium theme controls ===== */
    @media (min-width: 901px) {
      .app:not(.member-app) .sidebar-selectors { display: none !important; }
      .app:not(.member-app) .topbar-actions .topbar-theme-switch,
      .app:not(.member-app) .topbar-actions .topbar-refresh-button { display: inline-flex !important; }
      .app.member-app .sidebar-selectors { display: flex !important; }
      .app.member-app .topbar-actions .topbar-theme-switch,
      .app.member-app .topbar-actions .topbar-refresh-button { display: none !important; }
    }
    @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%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 0 18px 60px rgba(0,0,0,0.45) !important;
        overflow: auto !important;
        order: 0 !important;
      }
      .app.sidebar-open .sidebar, .app.member-app.sidebar-open .sidebar {
        transform: translateX(0) !important;
      }
      .app .sidebar-selectors { display: flex !important; }
      .app .topbar-actions .topbar-theme-switch,
      .app .topbar-actions .topbar-refresh-button { display: none !important; }
    }
    /* Dashboard anggota memakai lonceng pada hero. Halaman anggota lainnya
       tetap menampilkan lonceng topbar agar revisi tidak tersembunyi. */
    .app.member-app.member-dashboard-home .topbar-actions #notificationShell,
    .app.member-app.member-dashboard-home .topbar-actions .notification-shell { display: inline-flex !important; }
    .app.member-app:not(.member-dashboard-home) .topbar-actions #notificationShell,
    .app.member-app:not(.member-dashboard-home) .topbar-actions .notification-shell { display: inline-flex !important; }

    /* ===== TRANSPARENT BRAND LOGOS (NO WHITE BACKGROUND & NO MIDDLE DIVIDER BOX) ===== */
    .brand-logo-shell, .sidebar .brand-panel .brand-logos .brand-logo-shell {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      width: 52px !important;
      height: 52px !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;
    }

    /* ===== POSITION SIDEBAR CLOSE BUTTON (X) AT TOP-RIGHT CORNER ===== */
    .sidebar-close, .sidebar .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, 0.22) !important;
      border: 1px solid rgba(255, 255, 255, 0.35) !important;
      border-radius: 12px !important;
      color: #ffffff !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, 0.3) !important;
    }
    .sidebar-close:active {
      transform: scale(0.92) !important;
    }

    /* ===== PERBAIKAN WARNA KARTU DIGITAL & LOGOUT ANGGOTA (Bukan Merah) ===== */
    
    /* 1. Header 'Kartu Digital Anda' dan Tombol 'Sembunyikan/Tampilkan Kartu' */
    
    /* Paksa tombol untuk transparan sepenuhnya tanpa blok warna di semua tema */
    body.theme-classic .app.member-app #toggleKtaVisibilityBtn,
    body.theme-emerald .app.member-app #toggleKtaVisibilityBtn,
    body.theme-dark .app.member-app #toggleKtaVisibilityBtn,
    #toggleKtaVisibilityBtn {
      background: transparent !important;
      background-image: none !important;
      border: none !important;
      box-shadow: none !important;
      padding: 6px 12px !important;
    }

    /* Tema Classic (Biru) */
    body.theme-classic .kta-toggle-wrapper span {
      color: #1e293b !important; /* Hitam slate pekat */
    }
    body.theme-classic #toggleKtaVisibilityBtn,
    body.theme-classic #toggleKtaVisibilityBtn .eye-icon-kta svg {
      color: #0b4f9c !important; /* Biru Navy khas classic */
      stroke: #0b4f9c !important;
    }
    body.theme-classic #toggleKtaVisibilityBtn:hover {
      background: rgba(11, 79, 156, 0.08) !important;
      color: #082b57 !important;
    }

    /* Tema Emerald (Hijau) */
    body.theme-emerald .kta-toggle-wrapper span {
      color: #1e293b !important;
    }
    body.theme-emerald #toggleKtaVisibilityBtn,
    body.theme-emerald #toggleKtaVisibilityBtn .eye-icon-kta svg {
      color: #059669 !important; /* Hijau Emerald khas emerald */
      stroke: #059669 !important;
    }
    body.theme-emerald #toggleKtaVisibilityBtn:hover {
      background: rgba(5, 150, 105, 0.08) !important;
      color: #047857 !important;
    }

    /* Tema Dark (Gelap) */
    body.theme-dark .kta-toggle-wrapper span {
      color: #f8fafc !important; /* Putih */
    }
    body.theme-dark #toggleKtaVisibilityBtn,
    body.theme-dark #toggleKtaVisibilityBtn .eye-icon-kta svg {
      color: #38bdf8 !important; /* Biru Langit Terang */
      stroke: #38bdf8 !important;
    }
    body.theme-dark #toggleKtaVisibilityBtn:hover {
      background: rgba(56, 189, 248, 0.1) !important;
      color: #7dd3fc !important;
    }

    /* 2. Tombol & Ikon Logout di Header Card (Ganti Merah jadi Abu-abu/Slate Neutral yang Premium) */
    /* Tema Classic & Emerald */
    body.theme-classic .app.member-app .member-logout-header-btn,
    body.theme-emerald .app.member-app .member-logout-header-btn {
      border: 1.5px solid #cbd5e1 !important;
      color: #475569 !important; /* Slate Gray */
      background: #ffffff !important;
    }
    body.theme-classic .app.member-app .member-logout-header-btn svg,
    body.theme-emerald .app.member-app .member-logout-header-btn svg {
      stroke: #475569 !important;
    }
    body.theme-classic .app.member-app .member-logout-header-btn:hover,
    body.theme-emerald .app.member-app .member-logout-header-btn:hover {
      background: #f1f5f9 !important;
      border-color: #94a3b8 !important;
      color: #1e293b !important;
    }
    body.theme-classic .app.member-app .member-logout-header-btn:hover svg,
    body.theme-emerald .app.member-app .member-logout-header-btn:hover svg {
      stroke: #1e293b !important;
    }
    /* Tema Dark (Gelap) */
    body.theme-dark .app.member-app .member-logout-header-btn {
      border: 1.5px solid #334155 !important;
      color: #cbd5e1 !important;
      background: #1e293b !important;
    }
    body.theme-dark .app.member-app .member-logout-header-btn svg {
      stroke: #cbd5e1 !important;
    }
    body.theme-dark .app.member-app .member-logout-header-btn:hover {
      background: #334155 !important;
      border-color: #475569 !important;
      color: #ffffff !important;
    }
    body.theme-dark .app.member-app .member-logout-header-btn:hover svg {
      stroke: #ffffff !important;
    }

    /* Perbaikan presisi posisi ikon refresh agar pas di tengah block */
    .topbar-refresh-button {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
    }
    .topbar-refresh-button svg {
      display: block !important;
      margin: 0 !important;
      width: 20px !important;
      height: 20px !important;
    }


    /* ===== V13.5: PROFESSIONAL RESPONSIVE LOGIN UI — VISUAL ONLY ===== */
    body:has(#loginPage:not(.hidden)) {
      overflow: hidden !important;
      background: #071a37 !important;
    }

    #loginPage.login-page:not(.hidden) {
      position: fixed !important;
      inset: 0 !important;
      width: 100vw !important;
      height: 100dvh !important;
      min-height: 100dvh !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: clamp(12px, 2.5vw, 28px) !important;
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
      touch-action: pan-y !important;
      background:
        linear-gradient(135deg, rgba(4, 18, 40, .52), rgba(8, 44, 88, .22) 48%, rgba(250, 190, 35, .10)),
        url('assets/login-background-ui.webp') center center / cover no-repeat !important;
    }

    #loginPage.login-page:not(.hidden)::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(to bottom, rgba(3,12,27,.08), rgba(3,12,27,.20));
    }

    #loginPage .login-card-v135 {
      position: relative !important;
      z-index: 900005 !important;
      width: min(100%, 510px) !important;
      max-width: 510px !important;
      max-height: none !important;
      margin: auto !important;
      padding: clamp(22px, 3.6vw, 34px) !important;
      overflow: visible !important;
      border-radius: 28px !important;
      border: 1px solid rgba(255,255,255,.82) !important;
      background: rgba(255,255,255,.965) !important;
      box-shadow: 0 28px 80px rgba(2, 12, 27, .34), 0 4px 16px rgba(2, 12, 27, .12) !important;
      backdrop-filter: blur(18px) saturate(120%) !important;
      -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
      box-sizing: border-box !important;
    }

    #loginPage .login-card-v135::before {
      content: "";
      position: absolute;
      left: 28px;
      right: 28px;
      top: 0;
      height: 4px;
      border-radius: 0 0 999px 999px;
      background: linear-gradient(90deg, #dc2626 0 33%, #f5bd00 33% 66%, #0b4f9c 66% 100%);
    }

    #loginPage .login-form-v135 {
      width: 100% !important;
      display: block !important;
      position: relative !important;
      z-index: 2 !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    #loginPage .login-logo-container {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: clamp(18px, 5vw, 34px) !important;
      width: 100% !important;
      max-width: none !important;
      margin: 0 auto 14px !important;
      padding: 0 !important;
    }

    #loginPage .login-logo-container img,
    #loginPage .login-logo-container img:first-child,
    #loginPage .login-logo-container img:last-child {
      width: clamp(78px, 17vw, 104px) !important;
      height: clamp(78px, 17vw, 104px) !important;
      max-width: 104px !important;
      max-height: 104px !important;
      object-fit: contain !important;
      transform: none !important;
      filter: drop-shadow(0 7px 12px rgba(15,23,42,.10)) !important;
    }

    #loginPage .login-logo-separator {
      width: 1px;
      height: 56px;
      flex: 0 0 1px;
      background: linear-gradient(to bottom, transparent, #dbe3ee 20%, #dbe3ee 80%, transparent);
    }

    #loginPage .login-brand-group {
      margin: 0 0 22px !important;
      text-align: center !important;
    }

    #loginPage .login-kicker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 27px;
      margin: 0 0 8px;
      padding: 5px 12px;
      border: 1px solid #dbe4f0;
      border-radius: 999px;
      background: #f8fafc;
      color: #0f2748;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 1.8px;
      line-height: 1;
    }

    #loginPage .login-brand-group h1,
    #loginPage .login-brand-group h2 {
      margin: 0 !important;
      color: #0b4f9c !important;
      font-size: clamp(19px, 4.2vw, 24px) !important;
      font-weight: 900 !important;
      line-height: 1.18 !important;
      letter-spacing: .1px !important;
      text-align: center !important;
      text-transform: uppercase !important;
      text-wrap: balance;
    }

    #loginPage .login-brand-group p {
      margin: 7px 0 0 !important;
      color: #dc2626 !important;
      font-size: clamp(12.5px, 2.9vw, 14px) !important;
      font-weight: 800 !important;
      line-height: 1.35 !important;
      letter-spacing: .25px !important;
    }

    #loginPage .login-fields-v135 {
      display: grid;
      gap: 8px;
    }

    #loginPage .login-field-label {
      display: block;
      margin: 4px 0 0;
      color: #1e293b;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.3;
      text-align: left;
    }

    #loginPage .login-input-shell,
    #loginPage .password-wrapper.login-input-shell {
      position: relative !important;
      display: block !important;
      width: 100% !important;
      margin: 0 0 3px !important;
      z-index: 3 !important;
    }

    #loginPage .login-field-icon {
      position: absolute;
      left: 17px;
      top: 50%;
      z-index: 6;
      width: 21px;
      height: 21px;
      transform: translateY(-50%);
      display: grid;
      place-items: center;
      color: #64748b;
      pointer-events: none;
    }

    #loginPage .login-field-icon svg {
      display: block;
      width: 21px;
      height: 21px;
    }

    /* Menang terhadap selector lama .password-wrapper span agar ikon gembok tetap di kiri. */
    #loginPage .password-wrapper.login-input-shell > .login-field-icon {
      position: absolute !important;
      left: 17px !important;
      right: auto !important;
      top: 50% !important;
      width: 21px !important;
      height: 21px !important;
      margin: 0 !important;
      padding: 0 !important;
      transform: translateY(-50%) !important;
      display: grid !important;
      place-items: center !important;
      color: #64748b !important;
      cursor: default !important;
      pointer-events: none !important;
      z-index: 6 !important;
    }

    #loginPage .login-card-v135 input[type="text"],
    #loginPage .login-card-v135 input[type="email"],
    #loginPage .login-card-v135 input[type="password"],
    #loginPage .password-wrapper.login-input-shell input {
      display: block !important;
      width: 100% !important;
      min-height: 58px !important;
      height: 58px !important;
      margin: 0 !important;
      padding: 0 54px 0 50px !important;
      border: 1.5px solid #cbd5e1 !important;
      border-radius: 15px !important;
      outline: none !important;
      background: #ffffff !important;
      color: #0f172a !important;
      caret-color: #0b4f9c !important;
      font-size: 17px !important;
      font-weight: 650 !important;
      line-height: 1.2 !important;
      letter-spacing: 0 !important;
      box-shadow: 0 2px 8px rgba(15,23,42,.035) !important;
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
      -webkit-appearance: none !important;
      appearance: none !important;
      pointer-events: auto !important;
      cursor: text !important;
      box-sizing: border-box !important;
    }

    #loginPage .login-card-v135 input::placeholder {
      color: #7b8798 !important;
      font-size: 16px !important;
      font-weight: 500 !important;
      opacity: 1 !important;
    }

    #loginPage .login-card-v135 input:hover {
      border-color: #94a3b8 !important;
    }

    #loginPage .login-card-v135 input:focus {
      border-color: #0b66b2 !important;
      background: #ffffff !important;
      box-shadow: 0 0 0 4px rgba(11,102,178,.13), 0 4px 12px rgba(15,23,42,.05) !important;
    }

    #loginPage .password-toggle-v135,
    #loginPage .password-wrapper .password-toggle-v135 {
      position: absolute !important;
      right: 8px !important;
      top: 50% !important;
      z-index: 12 !important;
      width: 42px !important;
      height: 42px !important;
      min-width: 42px !important;
      min-height: 42px !important;
      margin: 0 !important;
      padding: 0 !important;
      transform: translateY(-50%) !important;
      display: grid !important;
      place-items: center !important;
      border: 0 !important;
      border-radius: 11px !important;
      background: transparent !important;
      color: #5b6b80 !important;
      box-shadow: none !important;
      cursor: pointer !important;
      pointer-events: auto !important;
    }

    #loginPage .password-toggle-v135:hover,
    #loginPage .password-toggle-v135:focus-visible {
      background: #eef4fb !important;
      color: #0b4f9c !important;
      outline: none !important;
    }

    #loginPage .password-toggle-v135 svg {
      width: 22px !important;
      height: 22px !important;
    }

    #loginPage .login-inline-alert-v135 {
      display: none;
      margin: 10px 0 0;
      padding: 11px 13px;
      border: 1px solid #fecdd3;
      border-radius: 11px;
      background: #fff1f2;
      color: #be123c;
      font-size: 13px;
      font-weight: 750;
      line-height: 1.4;
      text-align: center;
    }

    #loginPage .login-primary-v135,
    #loginPage .login-card-v135 button[type="submit"].login-primary-v135 {
      width: 100% !important;
      min-height: 54px !important;
      margin: 14px 0 0 !important;
      padding: 12px 18px !important;
      border: 1px solid #d51f29 !important;
      border-radius: 15px !important;
      background: linear-gradient(135deg, #ea242b, #d91823) !important;
      color: #ffffff !important;
      font-size: 17px !important;
      font-weight: 900 !important;
      line-height: 1.2 !important;
      letter-spacing: .1px !important;
      box-shadow: 0 9px 20px rgba(220,38,38,.22) !important;
      cursor: pointer !important;
      transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
    }

    #loginPage .login-primary-v135:hover {
      filter: brightness(1.03) !important;
      box-shadow: 0 11px 24px rgba(220,38,38,.27) !important;
    }

    #loginPage .login-primary-v135:active {
      transform: translateY(1px) !important;
    }

    #loginPage .login-divider-v135 {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 17px 0 12px;
      color: #718096;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .65px;
      line-height: 1;
      text-transform: uppercase;
      white-space: nowrap;
    }

    #loginPage .login-divider-v135::before,
    #loginPage .login-divider-v135::after {
      content: "";
      height: 1px;
      flex: 1;
      background: #e2e8f0;
    }

    #loginPage .login-card-v135 .btn-activation,
    #loginPage .login-card-v135 .btn-magic-login,
    #loginPage .login-card-v135 .btn-forgot-password {
      width: 100% !important;
      min-height: 49px !important;
      margin: 0 0 9px !important;
      padding: 11px 16px !important;
      border-radius: 14px !important;
      font-size: 14px !important;
      font-weight: 850 !important;
      line-height: 1.2 !important;
      cursor: pointer !important;
      box-shadow: none !important;
      transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
    }

    #loginPage .login-register-v135 {
      border: 1px solid #e4ad00 !important;
      background: linear-gradient(135deg, #f6c40d, #efb500) !important;
      color: #111827 !important;
    }

    #loginPage .login-activation-v135 {
      border: 1px solid #c7d8ec !important;
      background: #eef6ff !important;
      color: #0a3d73 !important;
    }

    #loginPage .login-action-row {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px !important;
      width: 100% !important;
      margin: 0 !important;
    }

    #loginPage .login-action-row .btn-magic-login,
    #loginPage .login-action-row .btn-forgot-password {
      min-height: 45px !important;
      margin: 0 !important;
      padding: 10px 12px !important;
      border: 1px solid #ccd9e8 !important;
      background: #f5f9fe !important;
      color: #123e70 !important;
      font-size: 13px !important;
    }

    #loginPage .login-card-v135 .btn-activation:hover,
    #loginPage .login-card-v135 .btn-magic-login:hover,
    #loginPage .login-card-v135 .btn-forgot-password:hover {
      filter: none !important;
      transform: translateY(-1px) !important;
      border-color: #9fb9d7 !important;
    }

    #loginPage .member-login-help {
      margin: 14px 0 6px !important;
      padding: 11px 13px !important;
      border-radius: 12px !important;
      background: #f6f8fb !important;
      color: #536176 !important;
      font-size: 12.5px !important;
      font-weight: 650 !important;
      line-height: 1.45 !important;
      text-align: center !important;
    }

    #loginPage .login-security-note {
      display: block !important;
      margin: 0 !important;
      color: #1e293b !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      line-height: 1.4 !important;
      text-align: center !important;
    }

    #loginPage .login-card-copyright {
      margin-top: 14px !important;
      padding-top: 12px !important;
      border-top: 1px solid #e5eaf1 !important;
      color: #526178 !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: .7px !important;
      text-align: center !important;
    }

    @media (max-width: 560px) {
      #loginPage.login-page:not(.hidden) {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: 10px !important;
      }

      #loginPage .login-card-v135 {
        width: 100% !important;
        max-width: none !important;
        margin: auto 0 !important;
        padding: 21px 18px 18px !important;
        border-radius: 23px !important;
      }

      #loginPage .login-card-v135::before {
        left: 22px;
        right: 22px;
      }

      #loginPage .login-logo-container {
        gap: 22px !important;
        margin-bottom: 10px !important;
      }

      #loginPage .login-logo-container img,
      #loginPage .login-logo-container img:first-child,
      #loginPage .login-logo-container img:last-child {
        width: clamp(68px, 21vw, 84px) !important;
        height: clamp(68px, 21vw, 84px) !important;
      }

      #loginPage .login-logo-separator {
        height: 46px;
      }

      #loginPage .login-brand-group {
        margin-bottom: 17px !important;
      }

      #loginPage .login-kicker {
        min-height: 25px;
        margin-bottom: 7px;
        padding: 5px 10px;
        font-size: 11px;
      }

      #loginPage .login-brand-group h1,
      #loginPage .login-brand-group h2 {
        font-size: clamp(17px, 5.1vw, 21px) !important;
      }

      #loginPage .login-brand-group p {
        margin-top: 5px !important;
        font-size: 12px !important;
      }

      #loginPage .login-field-label {
        font-size: 13px;
      }

      #loginPage .login-card-v135 input[type="text"],
      #loginPage .login-card-v135 input[type="email"],
      #loginPage .login-card-v135 input[type="password"],
      #loginPage .password-wrapper.login-input-shell input {
        min-height: 57px !important;
        height: 57px !important;
        padding-left: 49px !important;
        padding-right: 52px !important;
        border-radius: 14px !important;
        font-size: 17px !important;
      }

      #loginPage .login-card-v135 input::placeholder {
        font-size: 15.5px !important;
      }

      #loginPage .login-primary-v135,
      #loginPage .login-card-v135 button[type="submit"].login-primary-v135 {
        min-height: 53px !important;
        font-size: 16px !important;
      }

      #loginPage .login-card-v135 .btn-activation,
      #loginPage .login-card-v135 .btn-magic-login,
      #loginPage .login-card-v135 .btn-forgot-password {
        min-height: 48px !important;
        font-size: 13.5px !important;
      }
    }

    @media (max-width: 370px) {
      #loginPage.login-page:not(.hidden) {
        padding: 7px !important;
      }

      #loginPage .login-card-v135 {
        padding: 18px 14px 15px !important;
        border-radius: 20px !important;
      }

      #loginPage .login-logo-container {
        gap: 16px !important;
      }

      #loginPage .login-logo-container img,
      #loginPage .login-logo-container img:first-child,
      #loginPage .login-logo-container img:last-child {
        width: 66px !important;
        height: 66px !important;
      }

      #loginPage .login-brand-group h1,
      #loginPage .login-brand-group h2 {
        font-size: 16px !important;
      }

      #loginPage .login-card-v135 input[type="text"],
      #loginPage .login-card-v135 input[type="email"],
      #loginPage .login-card-v135 input[type="password"],
      #loginPage .password-wrapper.login-input-shell input {
        min-height: 55px !important;
        height: 55px !important;
        font-size: 16px !important;
      }

      #loginPage .login-action-row {
        gap: 7px !important;
      }

      #loginPage .login-action-row .btn-magic-login,
      #loginPage .login-action-row .btn-forgot-password {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 12.5px !important;
      }
    }

    @media (max-height: 760px) and (min-width: 561px) {
      #loginPage.login-page:not(.hidden) {
        align-items: flex-start !important;
      }

      #loginPage .login-card-v135 {
        margin: auto !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #loginPage .login-card-v135 *,
      #loginPage .login-card-v135 *::before,
      #loginPage .login-card-v135 *::after {
        scroll-behavior: auto !important;
        transition: none !important;
      }
    }


    /* ===== V13.6: DESKTOP FULL-VIEW LOGIN — VISUAL ONLY ===== */
    #loginPage .login-card-v136 {
      width: min(1040px, calc(100vw - 40px)) !important;
      max-width: 1040px !important;
      max-height: calc(100dvh - 40px) !important;
      min-height: min(620px, calc(100dvh - 40px)) !important;
      display: grid !important;
      grid-template-columns: minmax(320px, .88fr) minmax(430px, 1.12fr) !important;
      padding: 0 !important;
      overflow: hidden !important;
      border-radius: 30px !important;
    }

    #loginPage .login-card-v136::before {
      left: 0 !important;
      right: 0 !important;
      z-index: 10 !important;
    }

    #loginPage .login-brand-panel-v136,
    #loginPage .login-access-panel-v136 {
      min-width: 0 !important;
      box-sizing: border-box !important;
    }

    #loginPage .login-brand-panel-v136 {
      position: relative !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      padding: clamp(30px, 4vw, 50px) !important;
      overflow: hidden !important;
      background:
        radial-gradient(circle at 16% 12%, rgba(255,255,255,.95), rgba(255,255,255,.45) 30%, transparent 58%),
        linear-gradient(155deg, #f8fbff 0%, #eef5fd 58%, #e5effb 100%) !important;
      border-right: 1px solid #dbe5f0 !important;
    }

    #loginPage .login-brand-panel-v136::after {
      content: "";
      position: absolute;
      width: 240px;
      height: 240px;
      right: -100px;
      bottom: -105px;
      border-radius: 50%;
      border: 46px solid rgba(11,79,156,.055);
      pointer-events: none;
    }

    #loginPage .login-brand-panel-v136 .login-logo-container {
      position: relative !important;
      z-index: 2 !important;
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      margin: 0 auto 24px !important;
      gap: clamp(24px, 3vw, 36px) !important;
    }

    #loginPage .login-brand-panel-v136 .login-logo-container img,
    #loginPage .login-brand-panel-v136 .login-logo-container img:first-child,
    #loginPage .login-brand-panel-v136 .login-logo-container img:last-child {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      width: clamp(94px, 10vw, 122px) !important;
      height: clamp(94px, 10vw, 122px) !important;
      max-width: 122px !important;
      max-height: 122px !important;
      object-fit: contain !important;
    }

    #loginPage .login-brand-panel-v136 .login-logo-separator {
      height: 68px !important;
    }

    #loginPage .login-brand-panel-v136 .login-brand-group {
      position: relative !important;
      z-index: 2 !important;
      margin: 0 !important;
    }

    #loginPage .login-brand-panel-v136 .login-brand-group h1,
    #loginPage .login-brand-panel-v136 .login-brand-group h2 {
      max-width: 420px !important;
      font-size: clamp(21px, 2.15vw, 27px) !important;
      line-height: 1.2 !important;
    }

    #loginPage .login-brand-message-v136 {
      position: relative !important;
      z-index: 2 !important;
      display: grid !important;
      gap: 6px !important;
      width: 100% !important;
      max-width: 390px !important;
      margin-top: 28px !important;
      padding: 15px 17px !important;
      border: 1px solid rgba(148,163,184,.30) !important;
      border-radius: 15px !important;
      background: rgba(255,255,255,.68) !important;
      color: #334155 !important;
      text-align: center !important;
      box-shadow: 0 10px 25px rgba(15,23,42,.05) !important;
    }

    #loginPage .login-brand-message-v136 strong {
      color: #0f315c !important;
      font-size: 14px !important;
      font-weight: 900 !important;
    }

    #loginPage .login-brand-message-v136 span {
      font-size: 12.5px !important;
      line-height: 1.45 !important;
    }

    #loginPage .login-access-panel-v136 {
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      padding: clamp(25px, 3.4vw, 40px) clamp(30px, 4vw, 48px) !important;
      overflow-y: auto !important;
      background: rgba(255,255,255,.985) !important;
      scrollbar-width: thin !important;
    }

    #loginPage .login-access-heading-v136 {
      margin: 0 0 18px !important;
      text-align: left !important;
    }

    #loginPage .login-access-heading-v136 > span {
      display: block !important;
      margin-bottom: 4px !important;
      color: #0b4f9c !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: 1.1px !important;
      text-transform: uppercase !important;
    }

    #loginPage .login-access-heading-v136 h2 {
      margin: 0 !important;
      color: #10233f !important;
      font-size: clamp(23px, 2.2vw, 29px) !important;
      font-weight: 900 !important;
      line-height: 1.15 !important;
    }

    #loginPage .login-access-heading-v136 p {
      display: block !important;
      width: 100% !important;
      margin: 7px 0 0 !important;
      padding-left: 0 !important;
      color: #64748b !important;
      font-size: 13px !important;
      font-weight: 550 !important;
      line-height: 1.4 !important;
      text-align: left !important;
    }

    #loginPage .login-secondary-actions-v136 {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px !important;
    }

    #loginPage .login-secondary-actions-v136 .login-register-v135,
    #loginPage .login-secondary-actions-v136 .login-activation-v135 {
      margin: 0 !important;
    }

    #loginPage .login-secondary-actions-v136 .login-action-row {
      grid-column: 1 / -1 !important;
    }

    #loginPage .login-access-panel-v136 .member-login-help {
      margin: 12px 0 5px !important;
      padding: 9px 11px !important;
      font-size: 11.5px !important;
      line-height: 1.35 !important;
    }

    #loginPage .login-access-panel-v136 .login-card-copyright {
      margin-top: 10px !important;
      padding-top: 9px !important;
    }

    @media (min-width: 901px) and (max-height: 720px) {
      #loginPage.login-page:not(.hidden) {
        padding: 12px !important;
      }

      #loginPage .login-card-v136 {
        width: min(1020px, calc(100vw - 24px)) !important;
        max-height: calc(100dvh - 24px) !important;
        min-height: 0 !important;
      }

      #loginPage .login-brand-panel-v136 {
        padding: 22px 30px !important;
      }

      #loginPage .login-brand-panel-v136 .login-logo-container {
        margin-bottom: 13px !important;
      }

      #loginPage .login-brand-panel-v136 .login-logo-container img,
      #loginPage .login-brand-panel-v136 .login-logo-container img:first-child,
      #loginPage .login-brand-panel-v136 .login-logo-container img:last-child {
        width: 84px !important;
        height: 84px !important;
      }

      #loginPage .login-brand-panel-v136 .login-logo-separator {
        height: 52px !important;
      }

      #loginPage .login-brand-panel-v136 .login-brand-group h1,
      #loginPage .login-brand-panel-v136 .login-brand-group h2 {
        font-size: 21px !important;
      }

      #loginPage .login-brand-message-v136 {
        margin-top: 16px !important;
        padding: 11px 13px !important;
      }

      #loginPage .login-access-panel-v136 {
        justify-content: flex-start !important;
        padding: 20px 34px !important;
      }

      #loginPage .login-access-heading-v136 {
        margin-bottom: 11px !important;
      }

      #loginPage .login-access-heading-v136 h2 {
        font-size: 23px !important;
      }

      #loginPage .login-fields-v135 {
        gap: 5px !important;
      }

      #loginPage .login-card-v136 input[type="text"],
      #loginPage .login-card-v136 input[type="email"],
      #loginPage .login-card-v136 input[type="password"],
      #loginPage .login-card-v136 .password-wrapper.login-input-shell input {
        min-height: 52px !important;
        height: 52px !important;
      }

      #loginPage .login-primary-v135,
      #loginPage .login-card-v136 button[type="submit"].login-primary-v135 {
        min-height: 48px !important;
        margin-top: 10px !important;
      }

      #loginPage .login-divider-v135 {
        margin: 12px 0 9px !important;
      }

      #loginPage .login-card-v136 .btn-activation,
      #loginPage .login-card-v136 .btn-magic-login,
      #loginPage .login-card-v136 .btn-forgot-password {
        min-height: 42px !important;
        margin: 0 !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
      }

      #loginPage .login-access-panel-v136 .member-login-help {
        margin-top: 9px !important;
        padding: 7px 10px !important;
      }
    }

    @media (max-width: 900px) {
      body:has(#loginPage:not(.hidden)) {
        overflow: hidden !important;
      }

      #loginPage.login-page:not(.hidden) {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: 10px !important;
      }

      #loginPage .login-card-v136 {
        width: min(100%, 520px) !important;
        max-width: 520px !important;
        max-height: none !important;
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        margin: auto !important;
        overflow: visible !important;
        border-radius: 24px !important;
      }

      #loginPage .login-brand-panel-v136 {
        padding: 20px 18px 16px !important;
        border-right: 0 !important;
        border-bottom: 1px solid #dbe5f0 !important;
      }

      #loginPage .login-brand-panel-v136 .login-logo-container {
        margin-bottom: 9px !important;
      }

      #loginPage .login-brand-panel-v136 .login-logo-container img,
      #loginPage .login-brand-panel-v136 .login-logo-container img:first-child,
      #loginPage .login-brand-panel-v136 .login-logo-container img:last-child {
        width: clamp(66px, 19vw, 82px) !important;
        height: clamp(66px, 19vw, 82px) !important;
      }

      #loginPage .login-brand-panel-v136 .login-logo-separator {
        height: 44px !important;
      }

      #loginPage .login-brand-panel-v136 .login-brand-group h1,
      #loginPage .login-brand-panel-v136 .login-brand-group h2 {
        font-size: clamp(17px, 5vw, 21px) !important;
      }

      #loginPage .login-brand-panel-v136 .login-brand-group p {
        font-size: 12px !important;
      }

      #loginPage .login-brand-message-v136 {
        display: none !important;
      }

      #loginPage .login-access-panel-v136 {
        padding: 18px !important;
        overflow: visible !important;
      }

      #loginPage .login-access-heading-v136 {
        margin-bottom: 14px !important;
      }

      #loginPage .login-access-heading-v136 h2 {
        font-size: 22px !important;
      }

      #loginPage .login-access-heading-v136 p {
        font-size: 12.5px !important;
      }

      #loginPage .login-secondary-actions-v136 {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
      }

      #loginPage .login-secondary-actions-v136 .login-action-row {
        grid-column: auto !important;
      }
    }

    @media (max-width: 420px) {
      #loginPage.login-page:not(.hidden) {
        padding: 7px !important;
      }

      #loginPage .login-brand-panel-v136 {
        padding: 16px 14px 12px !important;
      }

      #loginPage .login-access-panel-v136 {
        padding: 15px 14px !important;
      }

      #loginPage .login-access-heading-v136 > span {
        font-size: 10.5px !important;
      }

      #loginPage .login-access-heading-v136 h2 {
        font-size: 20px !important;
      }

      #loginPage .login-access-heading-v136 p {
        margin-top: 4px !important;
      }
    }


    /* ===== V14.3: MOBILE LOGIN FULL VIEW — ZERO INITIAL SCROLL ===== */
    @media (max-width: 900px) {
      body:has(#loginPage:not(.hidden)),
      html:has(#loginPage:not(.hidden)) {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
      }

      #loginPage.login-page:not(.hidden) {
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100svh !important;
        max-height: 100dvh !important;
        align-items: center !important;
        justify-content: center !important;
        padding:
          max(6px, env(safe-area-inset-top))
          max(7px, env(safe-area-inset-right))
          max(6px, env(safe-area-inset-bottom))
          max(7px, env(safe-area-inset-left)) !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
        touch-action: manipulation !important;
      }

      #loginPage .login-card-v136 {
        width: min(100%, 500px) !important;
        max-width: 500px !important;
        max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))) !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        overflow: hidden !important;
        border-radius: 22px !important;
      }

      #loginPage .login-brand-panel-v136 {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 10px !important;
        padding: 10px 12px 9px !important;
        overflow: hidden !important;
        border-right: 0 !important;
        border-bottom: 1px solid #dbe5f0 !important;
      }

      #loginPage .login-brand-panel-v136::after {
        width: 120px !important;
        height: 120px !important;
        right: -70px !important;
        bottom: -78px !important;
        border-width: 24px !important;
      }

      #loginPage .login-brand-panel-v136 .login-logo-container {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        gap: 5px !important;
        justify-content: flex-start !important;
      }

      #loginPage .login-brand-panel-v136 .login-logo-container img,
      #loginPage .login-brand-panel-v136 .login-logo-container img:first-child,
      #loginPage .login-brand-panel-v136 .login-logo-container img:last-child {
        width: clamp(38px, 12vw, 48px) !important;
        height: clamp(38px, 12vw, 48px) !important;
        max-width: 48px !important;
        max-height: 48px !important;
      }

      #loginPage .login-brand-panel-v136 .login-logo-separator {
        height: 29px !important;
      }

      #loginPage .login-brand-panel-v136 .login-brand-group {
        min-width: 0 !important;
        margin: 0 !important;
        text-align: left !important;
      }

      #loginPage .login-brand-panel-v136 .login-kicker {
        min-height: 0 !important;
        margin: 0 0 2px !important;
        padding: 2px 7px !important;
        font-size: 8px !important;
        line-height: 1.25 !important;
        letter-spacing: .8px !important;
      }

      #loginPage .login-brand-panel-v136 .login-brand-group h1,
      #loginPage .login-brand-panel-v136 .login-brand-group h2 {
        max-width: none !important;
        margin: 0 !important;
        font-size: clamp(12px, 3.7vw, 15px) !important;
        line-height: 1.16 !important;
        text-align: left !important;
      }

      #loginPage .login-brand-panel-v136 .login-brand-group p {
        margin: 2px 0 0 !important;
        font-size: clamp(8.5px, 2.55vw, 10.5px) !important;
        line-height: 1.2 !important;
        text-align: left !important;
      }

      #loginPage .login-brand-message-v136 {
        display: none !important;
      }

      #loginPage .login-access-panel-v136 {
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding: 10px 12px 9px !important;
        overflow: hidden !important;
      }

      #loginPage .login-access-heading-v136 {
        margin: 0 0 7px !important;
      }

      #loginPage .login-access-heading-v136 > span {
        margin-bottom: 1px !important;
        font-size: 8.5px !important;
        line-height: 1.15 !important;
        letter-spacing: .85px !important;
      }

      #loginPage .login-access-heading-v136 h2 {
        font-size: clamp(17px, 5vw, 20px) !important;
        line-height: 1.08 !important;
      }

      #loginPage .login-access-heading-v136 p {
        margin: 2px 0 0 !important;
        font-size: 10px !important;
        line-height: 1.22 !important;
      }

      #loginPage .login-fields-v135 {
        gap: 3px !important;
      }

      #loginPage .login-field-label {
        margin: 1px 0 0 !important;
        font-size: 10.5px !important;
        line-height: 1.2 !important;
      }

      #loginPage .login-input-shell,
      #loginPage .password-wrapper.login-input-shell {
        margin: 0 0 1px !important;
      }

      #loginPage .login-field-icon,
      #loginPage .password-wrapper.login-input-shell > .login-field-icon {
        left: 13px !important;
        width: 17px !important;
        height: 17px !important;
      }

      #loginPage .login-field-icon svg {
        width: 17px !important;
        height: 17px !important;
      }

      #loginPage .login-card-v136 input[type="text"],
      #loginPage .login-card-v136 input[type="email"],
      #loginPage .login-card-v136 input[type="password"],
      #loginPage .login-card-v136 .password-wrapper.login-input-shell input {
        min-height: 43px !important;
        height: 43px !important;
        padding: 0 43px 0 39px !important;
        border-radius: 11px !important;
        font-size: 14px !important;
      }

      #loginPage .login-card-v136 input::placeholder {
        font-size: 12.5px !important;
      }

      #loginPage .password-toggle-v135,
      #loginPage .password-wrapper .password-toggle-v135 {
        right: 4px !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 9px !important;
      }

      #loginPage .password-toggle-v135 svg {
        width: 18px !important;
        height: 18px !important;
      }

      #loginPage .login-inline-alert-v135 {
        margin-top: 4px !important;
        padding: 6px 8px !important;
        font-size: 10.5px !important;
        line-height: 1.25 !important;
      }

      #loginPage .login-primary-v135,
      #loginPage .login-card-v136 button[type="submit"].login-primary-v135 {
        min-height: 42px !important;
        height: 42px !important;
        margin: 6px 0 0 !important;
        padding: 8px 12px !important;
        border-radius: 11px !important;
        font-size: 14px !important;
      }

      #loginPage .login-divider-v135 {
        gap: 8px !important;
        margin: 7px 0 6px !important;
        font-size: 8.5px !important;
        letter-spacing: .45px !important;
      }

      #loginPage .login-secondary-actions-v136 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
      }

      #loginPage .login-secondary-actions-v136 .login-action-row {
        grid-column: 1 / -1 !important;
        gap: 5px !important;
      }

      #loginPage .login-card-v136 .btn-activation,
      #loginPage .login-card-v136 .btn-magic-login,
      #loginPage .login-card-v136 .btn-forgot-password,
      #loginPage .login-action-row .btn-magic-login,
      #loginPage .login-action-row .btn-forgot-password {
        min-height: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 6px 7px !important;
        border-radius: 10px !important;
        font-size: 10.5px !important;
        line-height: 1.1 !important;
      }

      #loginPage .login-access-panel-v136 .member-login-help {
        margin: 6px 0 2px !important;
        padding: 5px 7px !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
      }

      #loginPage .login-security-note {
        font-size: 9px !important;
        line-height: 1.18 !important;
      }

      #loginPage .login-access-panel-v136 .login-card-copyright {
        margin-top: 5px !important;
        padding-top: 5px !important;
        font-size: 9.5px !important;
        line-height: 1.1 !important;
        letter-spacing: .45px !important;
      }
    }

    @media (max-width: 900px) and (max-height: 700px) {
      #loginPage .login-brand-panel-v136 {
        padding-top: 7px !important;
        padding-bottom: 6px !important;
      }

      #loginPage .login-brand-panel-v136 .login-logo-container img,
      #loginPage .login-brand-panel-v136 .login-logo-container img:first-child,
      #loginPage .login-brand-panel-v136 .login-logo-container img:last-child {
        width: 38px !important;
        height: 38px !important;
      }

      #loginPage .login-brand-panel-v136 .login-brand-group p,
      #loginPage .login-access-heading-v136 p,
      #loginPage .login-security-note {
        display: none !important;
      }

      #loginPage .login-access-panel-v136 {
        padding-top: 8px !important;
        padding-bottom: 7px !important;
      }

      #loginPage .login-access-heading-v136 {
        margin-bottom: 5px !important;
      }

      #loginPage .login-access-panel-v136 .member-login-help {
        margin-top: 4px !important;
        padding: 4px 6px !important;
        font-size: 8.5px !important;
      }

      #loginPage .login-access-panel-v136 .login-card-copyright {
        margin-top: 3px !important;
        padding-top: 4px !important;
      }
    }

    @media (max-width: 900px) and (max-height: 600px) {
      #loginPage .login-brand-panel-v136 {
        padding: 5px 8px !important;
      }

      #loginPage .login-brand-panel-v136 .login-kicker,
      #loginPage .login-access-heading-v136 > span,
      #loginPage .login-access-panel-v136 .member-login-help {
        display: none !important;
      }

      #loginPage .login-brand-panel-v136 .login-logo-container img,
      #loginPage .login-brand-panel-v136 .login-logo-container img:first-child,
      #loginPage .login-brand-panel-v136 .login-logo-container img:last-child {
        width: 32px !important;
        height: 32px !important;
      }

      #loginPage .login-brand-panel-v136 .login-logo-separator {
        height: 22px !important;
      }

      #loginPage .login-access-panel-v136 {
        padding: 6px 9px !important;
      }

      #loginPage .login-access-heading-v136 {
        margin-bottom: 3px !important;
      }

      #loginPage .login-access-heading-v136 h2 {
        font-size: 16px !important;
      }

      #loginPage .login-card-v136 input[type="text"],
      #loginPage .login-card-v136 input[type="email"],
      #loginPage .login-card-v136 input[type="password"],
      #loginPage .login-card-v136 .password-wrapper.login-input-shell input {
        min-height: 39px !important;
        height: 39px !important;
      }

      #loginPage .login-primary-v135,
      #loginPage .login-card-v136 button[type="submit"].login-primary-v135 {
        min-height: 38px !important;
        height: 38px !important;
        margin-top: 4px !important;
      }

      #loginPage .login-divider-v135 {
        margin: 4px 0 !important;
      }

      #loginPage .login-card-v136 .btn-activation,
      #loginPage .login-card-v136 .btn-magic-login,
      #loginPage .login-card-v136 .btn-forgot-password,
      #loginPage .login-action-row .btn-magic-login,
      #loginPage .login-action-row .btn-forgot-password {
        min-height: 32px !important;
        height: 32px !important;
        font-size: 9.5px !important;
      }

      #loginPage .login-access-panel-v136 .login-card-copyright {
        margin-top: 2px !important;
        padding-top: 3px !important;
        font-size: 8.5px !important;
      }
    }

/* ===== V15.1 refresh overrides ===== */

/* ============================================================================
   e-KTA SPGI IEI V15.1 - Modern Institutional Operations Center
   Visual refresh only. Existing functional selectors/IDs remain intact.
   ============================================================================ */

:root{
  --v151-ink:#0b172a;
  --v151-navy:#061a33;
  --v151-navy-2:#0a2a4f;
  --v151-blue:#1268c4;
  --v151-cyan:#19b9d5;
  --v151-gold:#f5bd22;
  --v151-red:#df2935;
  --v151-green:#139a69;
  --v151-bg:#edf3f9;
  --v151-card:#ffffff;
  --v151-line:#d9e4ef;
  --v151-muted:#65758b;
  --v151-shadow:0 18px 50px rgba(15,37,64,.10);
  --v151-shadow-soft:0 8px 26px rgba(15,37,64,.075);
}

html[data-kta-release="15.1"],body.v151-ui{background:var(--v151-bg)!important;color:var(--v151-ink)!important}
body.v151-ui{font-family:Inter,"Segoe UI",Arial,sans-serif!important;letter-spacing:-.005em}
body.v151-ui::selection{background:rgba(25,185,213,.24);color:#061a33}

/* LOGIN: large split-screen command portal */
body.v151-ui:has(#loginPage:not(.hidden)){background:#031224!important}
#loginPage.login-page:not(.hidden){
  padding:24px!important;
  background:
    radial-gradient(circle at 8% 12%,rgba(25,185,213,.26),transparent 28%),
    radial-gradient(circle at 92% 84%,rgba(245,189,34,.15),transparent 30%),
    linear-gradient(135deg,rgba(2,13,29,.90),rgba(5,35,70,.72)),
    url('assets/login-background-ui.webp') center/cover no-repeat!important;
}
#loginPage.login-page:not(.hidden)::before{
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px)!important;
  background-size:34px 34px!important;
  opacity:.68!important;
}
#loginPage .login-card-v136{
  width:min(1180px,calc(100vw - 48px))!important;
  max-width:1180px!important;
  min-height:min(700px,calc(100dvh - 48px))!important;
  max-height:calc(100dvh - 48px)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.12fr) minmax(430px,.88fr)!important;
  padding:0!important;
  margin:auto!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:34px!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:0 38px 110px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.10)!important;
  backdrop-filter:blur(22px)!important;
}
#loginPage .login-card-v136::before{display:none!important}
#loginPage .login-brand-panel-v136{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  padding:clamp(42px,6vw,78px)!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 16% 18%,rgba(25,185,213,.28),transparent 30%),
    linear-gradient(145deg,#06182e 0%,#0a3261 58%,#0a4977 100%)!important;
  color:#fff!important;
  text-align:left!important;
}
#loginPage .login-brand-panel-v136::before{
  content:"";position:absolute;right:-140px;bottom:-140px;width:440px;height:440px;border-radius:50%;
  border:80px solid rgba(255,255,255,.045);box-shadow:0 0 0 60px rgba(25,185,213,.035);pointer-events:none
}
#loginPage .login-brand-panel-v136::after{
  content:"MEMBERSHIP • IDENTITY • SERVICE";position:absolute;left:clamp(42px,6vw,78px);bottom:34px;
  color:rgba(255,255,255,.52);font-size:10px;font-weight:900;letter-spacing:2.4px
}
#loginPage .login-logo-container{justify-content:flex-start!important;gap:18px!important;margin:0 0 30px!important;position:relative;z-index:2}
#loginPage .login-logo-container img,#loginPage .login-logo-container img:first-child,#loginPage .login-logo-container img:last-child{
  width:94px!important;height:94px!important;max-width:94px!important;max-height:94px!important;
  padding:10px!important;border-radius:22px!important;background:rgba(255,255,255,.96)!important;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.20))!important
}
#loginPage .login-logo-separator{height:58px!important;background:rgba(255,255,255,.32)!important}
#loginPage .login-brand-group{text-align:left!important;margin:0!important;position:relative;z-index:2}
#loginPage .v151-release-row{display:flex;align-items:center;gap:10px;margin-bottom:18px}
#loginPage .login-kicker{background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.18)!important;color:#fff!important;letter-spacing:2.4px!important}
.v151-release-chip{display:inline-flex;align-items:center;height:27px;padding:0 10px;border-radius:999px;background:var(--v151-gold);color:#142033;font-size:10px;font-weight:950;letter-spacing:.9px}
#loginPage .login-brand-group h1,#loginPage .login-brand-group h2{
  max-width:600px!important;color:#fff!important;font-size:clamp(27px,3.2vw,47px)!important;line-height:1.08!important;
  text-align:left!important;letter-spacing:-1.1px!important;text-transform:none!important
}
#loginPage .login-brand-group p{margin-top:15px!important;color:#8fe5f3!important;font-size:15px!important;text-align:left!important;letter-spacing:.2px!important}
#loginPage .login-brand-message-v136{
  position:relative;z-index:2;max-width:560px;margin-top:34px!important;padding:19px 21px!important;border-radius:20px!important;
  border:1px solid rgba(255,255,255,.15)!important;background:rgba(255,255,255,.075)!important;box-shadow:none!important;
  backdrop-filter:blur(9px)!important
}
#loginPage .login-brand-message-v136 strong{color:#fff!important;font-size:15px!important}
#loginPage .login-brand-message-v136 span{color:#c9dced!important;font-size:13px!important;line-height:1.55!important}
#loginPage .login-access-panel-v136{
  display:flex!important;flex-direction:column!important;justify-content:center!important;padding:clamp(38px,5.4vw,70px)!important;
  background:linear-gradient(180deg,#fff,#f7fbff)!important;overflow:auto!important
}
#loginPage .login-access-heading-v136{text-align:left!important;margin-bottom:25px!important}
#loginPage .login-access-heading-v136>span{color:var(--v151-blue)!important;font-size:11px!important;font-weight:950!important;letter-spacing:1.8px!important;text-transform:uppercase}
#loginPage .login-access-heading-v136 h2{margin:7px 0 7px!important;color:#081b32!important;font-size:32px!important;letter-spacing:-.8px!important}
#loginPage .login-access-heading-v136 p{color:#68788d!important;font-size:13px!important;text-align:left!important}
#loginPage .login-field-label{color:#263950!important;font-size:12px!important;letter-spacing:.1px!important}
#loginPage .login-card-v136 input[type="text"],#loginPage .login-card-v136 input[type="email"],#loginPage .login-card-v136 input[type="password"],#loginPage .login-card-v136 .password-wrapper.login-input-shell input{
  min-height:54px!important;height:54px!important;border:1px solid #d5e0eb!important;border-radius:15px!important;background:#f8fbfe!important;
  font-size:15px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important
}
#loginPage .login-card-v136 input:focus{background:#fff!important;border-color:var(--v151-cyan)!important;box-shadow:0 0 0 4px rgba(25,185,213,.13)!important}
#loginPage .login-primary-v135,#loginPage .login-card-v136 button[type="submit"].login-primary-v135{
  min-height:54px!important;height:54px!important;border:0!important;border-radius:15px!important;
  background:linear-gradient(135deg,#0b4f9c,#126fc9 58%,#1590c1)!important;
  box-shadow:0 13px 26px rgba(18,104,196,.25)!important;font-size:15px!important
}
#loginPage .login-divider-v135{margin:20px 0 14px!important}
#loginPage .login-secondary-actions-v136{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
#loginPage .login-secondary-actions-v136>.login-register-v135{grid-column:1/-1!important}
#loginPage .login-card-v136 .btn-activation,#loginPage .login-card-v136 .btn-magic-login,#loginPage .login-card-v136 .btn-forgot-password{
  min-height:44px!important;height:44px!important;margin:0!important;border-radius:13px!important;font-size:12px!important
}
#loginPage .login-register-v135{background:linear-gradient(135deg,#f8c623,#f0b100)!important;border:0!important;box-shadow:0 9px 18px rgba(245,189,34,.20)!important}
#loginPage .login-activation-v135,#loginPage .login-action-row .btn-magic-login,#loginPage .login-action-row .btn-forgot-password{background:#edf5fc!important;border:1px solid #d3e2f1!important;color:#17456f!important}
#loginPage .member-login-help{margin:15px 0 6px!important;background:transparent!important;padding:0!important;text-align:left!important;font-size:11px!important}
#loginPage .login-security-note{text-align:left!important;color:#7b8797!important;font-size:10.5px!important}
#loginPage .login-card-copyright{text-align:left!important;border:0!important;padding:0!important;margin-top:14px!important;color:#9aa6b5!important;font-size:10px!important}

/* APP SHELL */
body.v151-ui .app{grid-template-columns:292px minmax(0,1fr)!important;background:var(--v151-bg)!important}
body.v151-ui .sidebar{
  padding:18px!important;background:
    radial-gradient(circle at 15% 6%,rgba(25,185,213,.20),transparent 24%),
    linear-gradient(180deg,#06182e 0%,#082748 58%,#061a33 100%)!important;
  border-right:1px solid rgba(255,255,255,.08)!important;box-shadow:18px 0 50px rgba(8,28,52,.10)!important
}
body.v151-ui .brand-panel{margin:-18px -18px 16px!important;padding:23px 18px 20px!important;background:rgba(255,255,255,.055)!important;border-bottom:1px solid rgba(255,255,255,.10)!important}
body.v151-ui .brand-logos{gap:12px!important;margin-bottom:15px!important}
body.v151-ui .brand-logo-shell{width:50px!important;height:50px!important;padding:5px!important;border-radius:15px!important;background:#fff!important;box-shadow:0 9px 18px rgba(0,0,0,.18)!important}
body.v151-ui .sidebar .brand-panel .brand-logos .brand-logo-shell img{width:40px!important;height:40px!important;filter:none!important}
.v151-sidebar-release{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.v151-sidebar-release>span:last-child{padding:4px 8px;border-radius:999px;background:rgba(25,185,213,.16);border:1px solid rgba(25,185,213,.28);color:#8fe5f3;font-size:9px;font-weight:950;letter-spacing:1px}
body.v151-ui .sidebar-brand-kicker{color:#8fe5f3!important;font-size:9px!important;letter-spacing:1.5px!important}
body.v151-ui .brand-panel strong{color:#fff!important;font-size:14px!important;line-height:1.3!important}
body.v151-ui .brand-panel small{color:#aebed0!important;font-size:9.5px!important}
body.v151-ui .role-badge{padding:10px 12px!important;border:1px solid rgba(255,255,255,.11)!important;background:rgba(255,255,255,.055)!important;border-radius:13px!important;color:#dbe9f6!important}
body.v151-ui .sidebar nav{gap:5px!important}
body.v151-ui .sidebar nav button{
  min-height:43px!important;padding:10px 12px!important;border:1px solid transparent!important;border-radius:12px!important;
  background:transparent!important;color:#c6d5e4!important;font-size:12px!important;font-weight:760!important;transition:.18s ease!important
}
body.v151-ui .sidebar nav button:hover{background:rgba(255,255,255,.075)!important;color:#fff!important;transform:translateX(2px)}
body.v151-ui .sidebar nav button.active,body.v151-ui .sidebar nav button[aria-current="page"]{
  background:linear-gradient(90deg,rgba(25,185,213,.20),rgba(25,185,213,.07))!important;
  border-color:rgba(25,185,213,.28)!important;color:#fff!important;box-shadow:inset 3px 0 0 var(--v151-cyan)!important
}
body.v151-ui .sidebar-mode-card{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:16px!important}
body.v151-ui .sidebar-refresh-button,body.v151-ui .logout{min-height:44px!important;border-radius:13px!important}
body.v151-ui .logout{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.11)!important;color:#d8e4f0!important}
body.v151-ui .logout:hover{background:rgba(223,41,53,.16)!important;border-color:rgba(223,41,53,.34)!important;color:#fff!important}

body.v151-ui .content{padding:0 28px 34px!important;background:
  radial-gradient(circle at 94% 0,rgba(25,185,213,.08),transparent 27%),var(--v151-bg)!important}
body.v151-ui .topbar{
  position:sticky!important;top:0!important;z-index:450!important;min-height:86px!important;margin:0 -28px 24px!important;padding:15px 28px!important;
  border-bottom:1px solid rgba(194,210,226,.72)!important;background:rgba(245,249,253,.88)!important;
  backdrop-filter:blur(18px) saturate(140%)!important;box-shadow:0 7px 25px rgba(25,54,86,.055)!important
}
.v151-topbar-kicker{display:flex;align-items:center;gap:8px;color:#718198;font-size:9px;font-weight:950;letter-spacing:1.45px;margin-bottom:4px}
.v151-topbar-kicker span{padding:3px 7px;border-radius:999px;background:#dff5fa;color:#08718a;letter-spacing:.7px}
body.v151-ui .topbar h2{color:#0a1c31!important;font-size:25px!important;letter-spacing:-.55px!important}
body.v151-ui .dashboard-greeting{color:#6e7e92!important;font-size:11px!important}
body.v151-ui .menu-toggle,body.v151-ui .topbar-refresh-button,body.v151-ui .notification-button{
  border:1px solid #d5e1ec!important;background:#fff!important;color:#173a61!important;border-radius:14px!important;box-shadow:0 6px 16px rgba(20,52,84,.07)!important
}
body.v151-ui .notification-button.has-alert{border-color:rgba(223,41,53,.35)!important;box-shadow:0 0 0 4px rgba(223,41,53,.07)!important}
body.v151-ui .notification-count{background:linear-gradient(135deg,#f1434d,#d81d2a)!important;border:2px solid #fff!important;box-shadow:0 4px 10px rgba(223,41,53,.26)!important}
body.v151-ui .topbar-theme-switch{border:1px solid #d5e1ec!important;background:#fff!important;border-radius:14px!important;box-shadow:0 6px 16px rgba(20,52,84,.06)!important}

/* CONTENT CARDS / HERO / METRICS */
body.v151-ui .card{
  border:1px solid rgba(211,225,237,.95)!important;border-radius:22px!important;background:rgba(255,255,255,.98)!important;
  box-shadow:var(--v151-shadow-soft)!important;padding:20px!important
}
body.v151-ui .card h3,body.v151-ui .card h4{color:#10243c!important;letter-spacing:-.25px!important}
body.v151-ui .dash-hero{
  position:relative!important;overflow:hidden!important;padding:29px 30px!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:26px!important;
  background:linear-gradient(125deg,#071b34 0%,#0b4f88 58%,#1386aa 100%)!important;
  box-shadow:0 24px 46px rgba(10,63,108,.20)!important
}
body.v151-ui .dash-hero::after{content:"";position:absolute;width:310px;height:310px;right:-100px;top:-150px;border-radius:50%;border:55px solid rgba(255,255,255,.07);pointer-events:none}
body.v151-ui .dash-hero h2{color:#fff!important;font-size:27px!important;letter-spacing:-.5px!important}
body.v151-ui .dash-hero p{color:#cce5f5!important}
body.v151-ui .stat{
  position:relative!important;overflow:hidden!important;border:1px solid #dce7f0!important;border-left:0!important;border-radius:20px!important;
  padding:18px!important;background:linear-gradient(145deg,#fff,#f8fbfe)!important;box-shadow:0 10px 28px rgba(20,52,84,.07)!important
}
body.v151-ui .stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--v151-cyan),var(--v151-blue))}
body.v151-ui .stat b{font-size:32px!important;color:#0a315b!important;letter-spacing:-1px!important}
body.v151-ui .stat small{color:#718096!important;letter-spacing:.35px!important;text-transform:uppercase!important;font-size:9.5px!important}
body.v151-ui .quick-card,body.v151-ui .member-action-card{transition:transform .18s ease,box-shadow .18s ease!important}
body.v151-ui .quick-card:hover,body.v151-ui .member-action-card:hover{transform:translateY(-3px)!important}

/* FORMS */
body.v151-ui .field{gap:7px!important}
body.v151-ui .field span{color:#34465c!important;font-size:10px!important;letter-spacing:.45px!important;text-transform:uppercase!important}
body.v151-ui .field input,body.v151-ui .field select,body.v151-ui .field textarea,
body.v151-ui .search-input,body.v151-ui .search-box input{
  min-height:45px!important;border:1px solid #d4e0eb!important;border-radius:13px!important;background:#f9fbfd!important;color:#11233a!important;
  box-shadow:inset 0 1px 2px rgba(18,45,75,.025)!important;transition:.16s ease!important
}
body.v151-ui .field textarea{min-height:96px!important}
body.v151-ui .field input:focus,body.v151-ui .field select:focus,body.v151-ui .field textarea:focus,
body.v151-ui .search-input:focus,body.v151-ui .search-box input:focus{outline:0!important;border-color:var(--v151-cyan)!important;background:#fff!important;box-shadow:0 0 0 4px rgba(25,185,213,.12)!important}
body.v151-ui button{border-radius:13px!important;background:linear-gradient(135deg,#0b4f9c,#1477ca)!important;box-shadow:0 7px 15px rgba(18,104,196,.15)!important;transition:.16s ease!important}
body.v151-ui button:hover{filter:none!important;transform:translateY(-1px)!important;box-shadow:0 10px 19px rgba(18,104,196,.20)!important}
body.v151-ui .btn-secondary{background:#edf3f8!important;border:1px solid #d6e1eb!important;color:#244665!important;box-shadow:none!important}
body.v151-ui .danger{background:linear-gradient(135deg,#eb3b46,#d91d2a)!important}

/* TABLES */
body.v151-ui .table-responsive{border:1px solid #dce6ef!important;border-radius:17px!important;box-shadow:0 7px 20px rgba(20,52,84,.045)!important;background:#fff!important}
body.v151-ui table{border-radius:17px!important;font-size:12px!important}
body.v151-ui th{padding:12px 11px!important;background:#edf4fa!important;color:#31516e!important;font-size:9.5px!important;letter-spacing:.75px!important;border-bottom:1px solid #d9e5ef!important}
body.v151-ui td{padding:11px!important;border-bottom:1px solid #edf2f7!important;color:#2c3e53!important}
body.v151-ui tr:hover td{background:#f4faff!important}
body.v151-ui .approval-status{border-radius:999px!important;padding:5px 9px!important;font-size:9.5px!important;letter-spacing:.3px!important}

/* MODALS */
body.v151-ui .activation-modal{padding:24px!important;background:rgba(2,14,29,.76)!important;backdrop-filter:blur(11px)!important}
body.v151-ui .activation-card{
  border:1px solid rgba(255,255,255,.78)!important;border-radius:27px!important;background:linear-gradient(180deg,#fff,#f8fbfe)!important;
  box-shadow:0 32px 95px rgba(0,0,0,.34)!important
}
body.v151-ui .kta-workflow-card{width:min(920px,94vw)!important;max-width:920px!important;padding:28px!important}
.v151-modal-heading{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.v151-modal-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,#0b4f9c,#1590ba);color:#fff;font-size:14px;font-weight:950;box-shadow:0 10px 20px rgba(18,104,196,.22)}
.v151-modal-eyebrow{display:block;color:#1590aa;font-size:9px;font-weight:950;letter-spacing:1.4px;margin-bottom:3px}
.v151-modal-heading h2{margin:0!important;color:#10243c!important;font-size:23px!important;letter-spacing:-.45px!important}
body.v151-ui .activation-close{top:17px!important;right:17px!important;width:38px!important;height:38px!important;border:1px solid #d9e3ed!important;background:#f2f6fa!important;color:#40556c!important;box-shadow:none!important}
body.v151-ui .kta-workflow-card .grid.two{gap:14px 15px!important;margin-top:18px!important}
body.v151-ui .activation-security-note{padding:12px 14px!important;border-radius:13px!important;background:#eef8fa!important;color:#2b6570!important;border:1px solid #d2eef2!important}

/* NOTIFICATION CENTER */
body.v151-ui .notification-panel{
  width:min(440px,calc(100vw - 22px))!important;max-height:min(720px,calc(100dvh - 96px))!important;padding:0!important;
  overflow:hidden!important;border:1px solid rgba(210,224,237,.95)!important;border-radius:23px!important;background:#f6f9fc!important;
  box-shadow:0 30px 85px rgba(3,20,39,.28)!important
}
.v151-notification-head{display:flex;align-items:center;justify-content:space-between;padding:18px 19px;background:linear-gradient(135deg,#071b34,#0c4e82);color:#fff}
.v151-notification-head>div{display:grid;gap:3px}.v151-notification-head span{color:#8fe5f3;font-size:8.5px;font-weight:950;letter-spacing:1.5px}.v151-notification-head strong{font-size:16px;letter-spacing:-.15px}
body.v151-ui .notification-close{width:34px!important;height:34px!important;padding:0!important;border:1px solid rgba(255,255,255,.18)!important;background:rgba(255,255,255,.09)!important;color:#fff!important;box-shadow:none!important}
.v151-notification-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 14px 4px}.v151-notification-metrics span{display:flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid #dce7f0;border-radius:12px;background:#fff;color:#64758a;font-size:10px;font-weight:800}.v151-notification-metrics b{font-size:16px;color:#173a61}
body.v151-ui .notification-panel-body{padding:10px 14px 14px!important;overflow:auto!important}
.v151-notification-card{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:start;margin-bottom:9px;padding:13px;border:1px solid #dde7f0;border-radius:15px;background:#fff;box-shadow:0 6px 16px rgba(20,52,84,.055);cursor:pointer;transition:.16s ease}
.v151-notification-card:hover{transform:translateY(-1px);border-color:#b9d2e6;box-shadow:0 10px 22px rgba(20,52,84,.09)}
.v151-notification-card.requires-action{border-color:#f1c7b8;background:#fffaf7}.v151-notification-card.is-unread{border-color:#c5dff0;background:#fafdff}
.v151-notification-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#e8f5fb;color:#0b7090;font-size:15px;font-weight:950}.requires-action .v151-notification-icon{background:#fff0e8;color:#d75520}
.v151-notification-copy{min-width:0}.v151-notification-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.v151-notification-title-row strong{color:#17314f;font-size:12.5px;line-height:1.35}.v151-notification-title-row span{flex:none;padding:3px 6px;border-radius:999px;background:#e9f4fa;color:#16768e;font-size:7.5px;font-weight:950;letter-spacing:.55px}.requires-action .v151-notification-title-row span{background:#ffeadf;color:#bd4a1c}
.v151-notification-copy p{margin:5px 0 7px;color:#52667d;font-size:10.5px;line-height:1.48}.v151-notification-copy time{color:#8290a1;font-size:9px}.v151-notification-copy time b{margin:0 3px}
.v151-notification-archive{width:28px!important;height:28px!important;padding:0!important;border:1px solid #cfe6dc!important;border-radius:9px!important;background:#effaf5!important;color:#16835d!important;box-shadow:none!important}
.v151-notification-empty{display:grid;place-items:center;gap:4px;padding:38px 15px;color:#728196}.v151-notification-empty b{color:#294660;font-size:14px}.v151-notification-empty span{font-size:10.5px}
.v151-notification-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px 14px;border-top:1px solid #e1e9f1;background:#fff}.v151-notification-footer>span{color:#8996a5;font-size:9px}.v151-archive-all,.v151-notification-footer .notification-link{min-height:35px!important;padding:8px 10px!important;border-radius:10px!important;font-size:9.5px!important;box-shadow:none!important}.v151-archive-all{background:#edf7f2!important;border:1px solid #cee7dc!important;color:#177354!important}.v151-notification-footer .notification-link{background:#eaf3fb!important;border:1px solid #d1e1ef!important;color:#174d79!important}

/* Public verification collapses the split login portal into one focused result card. */
#loginPage .login-card-v136:has(.verify-result){display:block!important;width:min(540px,calc(100vw - 28px))!important;max-width:540px!important;min-height:0!important;max-height:calc(100dvh - 32px)!important;padding:28px!important;overflow:auto!important;background:#fff!important}
#loginPage .login-card-v136:has(.verify-result) .verify-result{width:100%!important}

/* Verification results */
body.v151-ui .verify-result{padding:20px!important}.verify-result .verify-details{border-radius:18px!important;box-shadow:0 8px 22px rgba(20,52,84,.06)!important}

/* Dark theme remains operational, with the same new geometry. */
body.theme-dark.v151-ui{--v151-bg:#08111f;--v151-card:#111d2d;--v151-line:#27384d;color:#eaf2fa!important}
body.theme-dark.v151-ui .content{background:#08111f!important}.theme-dark.v151-ui .topbar{background:rgba(10,20,34,.88)!important;border-color:#243449!important}.theme-dark.v151-ui .topbar h2{color:#fff!important}.theme-dark.v151-ui .v151-topbar-kicker{color:#8fa2b8!important}
body.theme-dark.v151-ui .card,body.theme-dark.v151-ui .stat{background:#111d2d!important;border-color:#26384e!important;color:#eef5fb!important}.theme-dark.v151-ui .card h3,.theme-dark.v151-ui .card h4,.theme-dark.v151-ui .stat b{color:#fff!important}.theme-dark.v151-ui td{color:#d6e1eb!important;border-color:#223449!important}.theme-dark.v151-ui th{background:#142438!important;color:#a9bfd4!important}.theme-dark.v151-ui tr:hover td{background:#15273c!important}

@media(max-width:900px){
  #loginPage.login-page:not(.hidden){padding:10px!important;align-items:flex-start!important}
  #loginPage .login-card-v136{width:100%!important;max-height:none!important;min-height:calc(100dvh - 20px)!important;grid-template-columns:1fr!important;border-radius:25px!important}
  #loginPage .login-brand-panel-v136{padding:25px 24px 28px!important;min-height:285px!important}
  #loginPage .login-brand-panel-v136::after{left:24px;bottom:14px;font-size:7.5px}
  #loginPage .login-logo-container{margin-bottom:17px!important}
  #loginPage .login-logo-container img,#loginPage .login-logo-container img:first-child,#loginPage .login-logo-container img:last-child{width:65px!important;height:65px!important;padding:7px!important;border-radius:17px!important}
  #loginPage .login-logo-separator{height:37px!important}
  #loginPage .v151-release-row{margin-bottom:10px}
  #loginPage .login-brand-group h1,#loginPage .login-brand-group h2{font-size:clamp(21px,6vw,29px)!important}
  #loginPage .login-brand-group p{margin-top:8px!important;font-size:12px!important}
  #loginPage .login-brand-message-v136{display:none!important}
  #loginPage .login-access-panel-v136{padding:25px 20px 23px!important}
  #loginPage .login-access-heading-v136{margin-bottom:18px!important}
  #loginPage .login-access-heading-v136 h2{font-size:24px!important}
  body.v151-ui .content{padding:0 14px 24px!important}
  body.v151-ui .topbar{margin:0 -14px 17px!important;padding:12px 14px!important;min-height:74px!important}
  body.v151-ui .sidebar{width:min(86vw,315px)!important;padding:16px!important}
  body.v151-ui .brand-panel{margin:-16px -16px 14px!important}
  body.v151-ui .grid.two{grid-template-columns:1fr!important}
  body.v151-ui .kta-workflow-card{padding:22px 17px!important}
}

@media(max-width:460px){
  #loginPage .login-brand-panel-v136{min-height:245px!important;padding:19px 18px 25px!important}
  #loginPage .login-access-panel-v136{padding:21px 16px 18px!important}
  #loginPage .login-secondary-actions-v136{grid-template-columns:1fr!important}
  #loginPage .login-secondary-actions-v136>.login-register-v135{grid-column:auto!important}
  #loginPage .login-action-row{grid-template-columns:1fr 1fr!important}
  .v151-topbar-kicker{font-size:7.5px!important;letter-spacing:.9px!important}
  body.v151-ui .topbar h2{font-size:20px!important}
  .v151-notification-card{grid-template-columns:34px minmax(0,1fr) auto;padding:11px}.v151-notification-icon{width:34px;height:34px}
}

@media print{
  .v151-topbar-kicker,.v151-release-chip,.v151-sidebar-release>span:last-child{display:none!important}
  body.v151-ui .card{box-shadow:none!important}
}

/* ===== V15.1A LOGIN POLISH FIXES ===== */
#loginPage .login-brand-panel-v136::after{
  content:"" !important;
}
#loginPage .login-brand-panel-v136{
  justify-content:flex-start !important;
  padding-top:48px !important;
  gap:0 !important;
}
#loginPage .login-brand-group{
  display:grid !important;
  gap:10px !important;
  width:100% !important;
  max-width:560px !important;
}
#loginPage .login-brand-group h1,
#loginPage .login-brand-group h2{
  max-width:560px !important;
  margin:0 !important;
  font-size:clamp(24px,2.5vw,33px) !important;
  line-height:1.16 !important;
  letter-spacing:-.45px !important;
}
#loginPage .login-brand-group p{
  margin:0 !important;
  max-width:520px !important;
  font-size:15px !important;
  line-height:1.45 !important;
}
#loginPage .login-brand-message-v136{
  margin-top:30px !important;
  max-width:520px !important;
}
#loginPage .login-secondary-actions-v136{
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
}
#loginPage .login-secondary-actions-v136 > .login-register-v135,
#loginPage .login-secondary-actions-v136 > .login-activation-v135,
#loginPage .login-secondary-actions-v136 > .login-action-row{
  grid-column:1 / -1 !important;
}
#loginPage .login-card-v136 .btn-activation,
#loginPage .login-card-v136 .btn-magic-login,
#loginPage .login-card-v136 .btn-forgot-password{
  min-height:48px !important;
  height:48px !important;
}
#loginPage .login-action-row{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
}
#loginPage .member-login-help,
#loginPage .login-security-note{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  text-align:left !important;
}
#loginPage .member-login-help{
  margin:18px 0 6px !important;
  color:#617286 !important;
  font-size:12px !important;
  line-height:1.55 !important;
}
#loginPage .login-security-note{
  margin-top:0 !important;
  color:#7d8a99 !important;
  font-size:11px !important;
  line-height:1.45 !important;
}
@media (max-width: 900px){
  #loginPage .login-brand-panel-v136{
    justify-content:flex-start !important;
    padding-top:24px !important;
  }
  #loginPage .login-brand-group{
    gap:8px !important;
  }
  #loginPage .login-brand-group h1,
  #loginPage .login-brand-group h2{
    font-size:clamp(20px,5.8vw,26px) !important;
    line-height:1.18 !important;
  }
  #loginPage .login-brand-group p{
    font-size:13px !important;
  }
}


/* ===== V15.1 FIX2: LOGIN STRUCTURE + CACHE-BUST ===== */
#loginPage .login-brand-panel-v136::after{content:""!important;display:none!important}
#loginPage .login-brand-panel-v136{justify-content:flex-start!important;padding-top:48px!important}
#loginPage .login-brand-group{display:grid!important;gap:10px!important;width:100%!important;max-width:560px!important}
#loginPage .login-brand-group h1,#loginPage .login-brand-group h2{margin:0!important;max-width:560px!important;font-size:clamp(24px,2.45vw,34px)!important;line-height:1.16!important;letter-spacing:-.45px!important}
#loginPage .login-brand-group p{margin:0!important;max-width:520px!important;font-size:15px!important;line-height:1.45!important}
#loginPage .login-brand-message-v136{margin-top:30px!important;max-width:520px!important}
#loginPage .login-secondary-actions-v136{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
#loginPage .login-secondary-actions-v136>.login-register-v135{grid-column:auto!important;width:100%!important}
#loginPage .login-account-tools-v151{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;width:100%!important}
#loginPage .login-account-tools-v151 .btn-activation,#loginPage .login-account-tools-v151 .btn-magic-login,#loginPage .login-account-tools-v151 .btn-forgot-password{width:100%!important;min-height:48px!important;height:48px!important;margin:0!important}
#loginPage .login-help-block-v151{display:grid!important;gap:4px!important;width:100%!important;margin-top:17px!important;padding-top:14px!important;border-top:1px solid #e1e9f1!important}
#loginPage .login-help-block-v151 .member-login-help{margin:0!important;padding:0!important;width:100%!important;color:#617286!important;font-size:12px!important;line-height:1.55!important;text-align:left!important}
#loginPage .login-help-block-v151 .login-security-note{display:block!important;margin:0!important;padding:0!important;width:100%!important;color:#7d8a99!important;font-size:11px!important;line-height:1.45!important;text-align:left!important}
@media(max-width:900px){#loginPage .login-brand-panel-v136{padding-top:24px!important}#loginPage .login-account-tools-v151{grid-template-columns:1fr!important}#loginPage .login-brand-group h1,#loginPage .login-brand-group h2{font-size:clamp(20px,5.8vw,26px)!important}}


/* ===== V15.1B LOGIN HEADER + BRAND COLOR TUNE ===== */
#loginPage .login-access-panel-v136{justify-content:flex-start!important;padding:74px clamp(38px,5.4vw,70px) 42px!important;background:linear-gradient(180deg,#ffffff 0%,#fbfcff 62%,#f6f9fc 100%)!important}
#loginPage .login-access-heading-v136{margin-top:0!important;margin-bottom:30px!important;padding-top:2px!important}
#loginPage .login-access-heading-v136>span{display:block!important;margin-bottom:12px!important;font-size:12px!important;letter-spacing:2.2px!important}
#loginPage .login-access-heading-v136 h2{margin:0 0 12px!important;font-size:clamp(34px,3.5vw,38px)!important;line-height:1.08!important}
#loginPage .login-access-heading-v136 p{font-size:14px!important;line-height:1.55!important;max-width:560px!important}
#loginPage .login-brand-panel-v136{background:radial-gradient(circle at 16% 18%, rgba(238,104,132,.18), transparent 30%),radial-gradient(circle at 78% 18%, rgba(255,210,219,.12), transparent 24%),linear-gradient(145deg,#071a35 0%,#103d71 56%,#8a5870 100%)!important}
#loginPage .login-brand-panel-v136::before{border-color:rgba(255,255,255,.05)!important;box-shadow:0 0 0 60px rgba(238,104,132,.05)!important}
#loginPage .login-brand-group p{color:#ffd6df!important}
#loginPage .login-brand-message-v136{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.18)!important}
#loginPage .login-brand-message-v136 span{color:#f4dfe6!important}
@media (max-width: 900px){#loginPage .login-access-panel-v136{padding:34px 20px 24px!important}#loginPage .login-access-heading-v136{margin-bottom:22px!important}#loginPage .login-access-heading-v136>span{margin-bottom:8px!important}#loginPage .login-access-heading-v136 h2{font-size:clamp(26px,8.4vw,32px)!important}#loginPage .login-access-heading-v136 p{font-size:13px!important}}


/* ===== V15.1C COMPACT GOOGLE-LIKE LOGIN FIT ===== */
#loginPage .login-card-v136{min-height:min(640px,calc(100dvh - 28px))!important;max-height:calc(100dvh - 28px)!important}
#loginPage .login-access-panel-v136{justify-content:flex-start!important;overflow:hidden!important;padding:52px clamp(34px,4.4vw,58px) 24px!important}
#loginPage .login-access-heading-v136{margin-bottom:20px!important}
#loginPage .login-access-heading-v136>span{margin-bottom:8px!important}
#loginPage .login-access-heading-v136 h2{font-size:clamp(31px,3.1vw,36px)!important;margin:0 0 8px!important}
#loginPage .login-access-heading-v136 p{font-size:13px!important;line-height:1.45!important}
#loginPage .login-form-v135{margin:0!important}
#loginPage .login-fields-v135{display:grid!important;gap:8px!important}
#loginPage .login-field-label{font-size:11px!important;margin-bottom:2px!important}
#loginPage .login-input-shell{margin:0!important}
#loginPage .login-card-v136 input[type="text"],#loginPage .login-card-v136 input[type="email"],#loginPage .login-card-v136 input[type="password"],#loginPage .login-card-v136 .password-wrapper.login-input-shell input{min-height:50px!important;height:50px!important;font-size:14px!important;border-radius:14px!important}
#loginPage .login-primary-v135,#loginPage .login-card-v136 button[type="submit"].login-primary-v135{height:52px!important;min-height:52px!important;margin-top:12px!important;border-radius:16px!important}
#loginPage .login-divider-v135{margin:14px 0 10px!important}
#loginPage .login-secondary-actions-v136{gap:10px!important}
#loginPage .login-account-tools-v151{gap:10px!important}
#loginPage .login-account-tools-v151 .btn-activation,#loginPage .login-account-tools-v151 .btn-magic-login,#loginPage .login-account-tools-v151 .btn-forgot-password,#loginPage .login-secondary-actions-v136>.login-register-v135{min-height:44px!important;height:44px!important;border-radius:14px!important;font-size:12px!important}
#loginPage .login-help-block-v151{margin-top:12px!important;padding-top:10px!important;gap:2px!important}
#loginPage .login-help-block-v151 .member-login-help{font-size:11px!important;line-height:1.45!important}
#loginPage .login-help-block-v151 .login-security-note{font-size:10px!important;line-height:1.35!important}
#loginPage .login-card-copyright{margin-top:10px!important;font-size:9.5px!important}
@media (max-width: 1200px){#loginPage .login-access-panel-v136{padding:40px 28px 20px!important}#loginPage .login-access-heading-v136 h2{font-size:32px!important}}
@media (max-width: 900px){#loginPage .login-card-v136{min-height:calc(100dvh - 16px)!important;max-height:none!important}#loginPage .login-access-panel-v136{overflow:auto!important;padding:28px 18px 18px!important}#loginPage .login-card-v136 input[type="text"],#loginPage .login-card-v136 input[type="email"],#loginPage .login-card-v136 input[type="password"],#loginPage .login-card-v136 .password-wrapper.login-input-shell input{min-height:48px!important;height:48px!important}#loginPage .login-primary-v135,#loginPage .login-card-v136 button[type="submit"].login-primary-v135{height:50px!important;min-height:50px!important}#loginPage .login-account-tools-v151{grid-template-columns:1fr!important}}


/* ===== V15.1D MOBILE HEADER/FOOTER VISIBILITY FIX ===== */
@media (max-width: 900px){
  body.v151-ui, html[data-kta-release="15.1"]{overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;}
  #loginPage{padding:8px!important;}
  #loginPage .login-card-v136{width:100%!important;min-height:auto!important;max-height:none!important;height:auto!important;overflow:visible!important;border-radius:22px!important;}
  #loginPage .login-brand-panel-v136{min-height:168px!important;padding:14px 16px 16px!important;overflow:visible!important;justify-content:flex-start!important;}
  #loginPage .login-logo-row{margin-bottom:10px!important;gap:12px!important;}
  #loginPage .login-logo-row img{width:46px!important;height:46px!important;object-fit:contain!important;}
  #loginPage .login-logo-separator{height:30px!important;}
  #loginPage .login-brand-group{gap:6px!important;}
  #loginPage .login-brand-group h1,#loginPage .login-brand-group h2{font-size:clamp(16px,5.1vw,22px)!important;line-height:1.18!important;}
  #loginPage .login-brand-group p{font-size:11px!important;line-height:1.35!important;}
  #loginPage .login-brand-message-v136{display:none!important;}
  #loginPage .login-access-panel-v136{overflow:visible!important;padding:20px 16px 14px!important;}
  #loginPage .login-access-heading-v136{margin-bottom:14px!important;}
  #loginPage .login-access-heading-v136>span{font-size:11px!important;letter-spacing:2px!important;margin-bottom:6px!important;}
  #loginPage .login-access-heading-v136 h2{font-size:clamp(25px,8vw,31px)!important;line-height:1.08!important;margin:0 0 8px!important;}
  #loginPage .login-access-heading-v136 p{font-size:12px!important;line-height:1.4!important;}
  #loginPage .login-fields-v135{gap:6px!important;}
  #loginPage .login-field-label{font-size:11px!important;}
  #loginPage .login-card-v136 input[type="text"],#loginPage .login-card-v136 input[type="email"],#loginPage .login-card-v136 input[type="password"],#loginPage .login-card-v136 .password-wrapper.login-input-shell input{min-height:46px!important;height:46px!important;font-size:14px!important;}
  #loginPage .login-primary-v135,#loginPage .login-card-v136 button[type="submit"].login-primary-v135{height:48px!important;min-height:48px!important;margin-top:10px!important;}
  #loginPage .login-divider-v135{margin:10px 0 8px!important;}
  #loginPage .login-secondary-actions-v136{gap:8px!important;}
  #loginPage .login-secondary-actions-v136>.login-register-v135{min-height:44px!important;height:44px!important;}
  #loginPage .login-account-tools-v151{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;}
  #loginPage .login-account-tools-v151 .btn-activation,#loginPage .login-account-tools-v151 .btn-magic-login,#loginPage .login-account-tools-v151 .btn-forgot-password{min-height:42px!important;height:42px!important;font-size:11.5px!important;padding:0 10px!important;}
  #loginPage .login-help-block-v151{margin-top:10px!important;padding-top:8px!important;}
  #loginPage .login-help-block-v151 .member-login-help{font-size:10.5px!important;line-height:1.35!important;}
  #loginPage .login-help-block-v151 .login-security-note{font-size:9.5px!important;line-height:1.3!important;}
  #loginPage .login-card-copyright{margin-top:8px!important;font-size:9px!important;line-height:1.3!important;padding-bottom:4px!important;}
}


/* ===== V15.1E MOBILE CORNER CLEANUP ===== */
@media (max-width: 900px){
  #loginPage .login-card-v136{background:#fff!important;border:1px solid rgba(255,255,255,.72)!important;border-radius:24px!important;overflow:hidden!important;box-shadow:0 18px 38px rgba(7,24,48,.24)!important;}
  #loginPage .login-brand-panel-v136{border-top-left-radius:24px!important;border-top-right-radius:24px!important;border-bottom:1px solid rgba(255,255,255,.14)!important;}
  #loginPage .login-access-panel-v136{background:#fff!important;border-bottom-left-radius:24px!important;border-bottom-right-radius:24px!important;}
  #loginPage .login-account-tools-v151 > *:last-child{grid-column:1 / -1!important;}
  #loginPage .login-account-tools-v151 .btn-forgot-password{width:100%!important;}
  #loginPage .login-help-block-v151{border-top:1px solid #e8edf3!important;}
  #loginPage .login-card-copyright{padding-bottom:10px!important;}
}


/* ============================================================================
   V15.1 FIX7 — ADMIN + MEMBER WORKSPACE REDESIGN
   High-specificity responsive shell and visibly new operational dashboards.
   ============================================================================ */
body.v151-ui{
  --fix7-ink:#0b1c31;
  --fix7-muted:#6b7d92;
  --fix7-line:#d8e4ef;
  --fix7-surface:#ffffff;
  --fix7-soft:#f4f8fc;
  --fix7-cyan:#1ba8c8;
  --fix7-blue:#1268c4;
  --fix7-navy:#061a33;
  overflow-x:hidden!important;
}
body.v151-ui .app{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  grid-template-columns:284px minmax(0,1fr)!important;
}
body.v151-ui .content{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  overflow-x:hidden!important;
}
body.v151-ui #view{width:100%!important;max-width:none!important;min-width:0!important}

/* FIX7 shell and topbar */
body.v151-ui .topbar{
  min-height:92px!important;
  border-bottom:1px solid rgba(199,215,229,.85)!important;
  background:rgba(247,250,253,.93)!important;
}
body.v151-ui .topbar-heading{min-width:0!important;gap:14px!important}
body.v151-ui .topbar-title-stack{min-width:0!important}
body.v151-ui .v151-topbar-kicker{color:#708297!important;letter-spacing:1.55px!important}
body.v151-ui .v151-topbar-kicker span{background:#e4f7fb!important;color:#08778f!important}
body.v151-ui .topbar h2{font-size:27px!important;font-weight:930!important;color:#0a1d33!important}
body.v151-ui .dashboard-greeting{font-size:11.5px!important;color:#6f8094!important}

/* Admin dashboard 15 */
.dashboard-v15{
  --dash-ink:#0b1d33;
  --dash-muted:#6a7b8f;
  --dash-line:#d9e5ef;
  gap:20px!important;
  max-width:1480px!important;
  padding-bottom:32px;
}
.dashboard-v15 .dashboard-v10-hero{
  min-height:260px!important;
  align-items:center!important;
  padding:38px 40px!important;
  border-radius:30px!important;
  background:
    linear-gradient(90deg,rgba(6,26,51,.98) 0%,rgba(7,48,89,.95) 48%,rgba(12,105,147,.88) 100%),
    radial-gradient(circle at 85% 20%,rgba(94,217,230,.42),transparent 32%)!important;
  box-shadow:0 28px 60px rgba(7,38,70,.24)!important;
}
.dashboard-v15 .dashboard-v10-hero::after{
  content:"";position:absolute;right:-95px;bottom:-145px;width:390px;height:390px;border-radius:50%;
  border:72px solid rgba(255,255,255,.055);box-shadow:0 0 0 52px rgba(27,168,200,.045);z-index:-1;
}
.dashboard-v15 .dashboard-v10-hero-copy{max-width:760px}
.dashboard-v15 .dashboard-v10-eyebrow{margin-bottom:16px;padding:6px 12px;background:rgba(255,255,255,.09);color:#bdeaf4}
.dashboard-v15 .dashboard-v10-hero h2{font-size:clamp(34px,3.8vw,52px)!important;letter-spacing:-1.6px!important}
.dashboard-v15 .dashboard-v10-puk{margin-top:5px!important;margin-bottom:11px!important;color:#ffd067!important;font-size:clamp(15px,1.45vw,20px)!important}
.dashboard-v15 .dashboard-v10-federation{display:block;margin-bottom:16px;color:#f8b9c9;font-size:10px;font-weight:900;letter-spacing:.11em}
.dashboard-v15 .dashboard-v10-hero p{max-width:680px!important;color:#d6e8f5!important;font-size:14px!important}
.dashboard-v15 .dashboard-v10-hero-meta{align-self:flex-end!important;justify-items:end!important}
.dashboard-v15 .dashboard-v10-datetime{padding:10px 13px!important;border-radius:13px!important;background:rgba(3,18,35,.34)!important;backdrop-filter:blur(8px)}
.dashboard-v15-command-strip{
  position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin-top:-44px;padding:0 22px;
}
body.v151-ui .dashboard-v15-command{
  min-width:0;min-height:112px;display:grid!important;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:13px;
  padding:17px!important;border:1px solid rgba(211,225,237,.96)!important;border-radius:20px!important;
  background:rgba(255,255,255,.97)!important;color:#0c2138!important;text-align:left!important;
  box-shadow:0 15px 36px rgba(17,55,88,.12)!important;backdrop-filter:blur(16px)!important;
}
body.v151-ui .dashboard-v15-command:hover{transform:translateY(-3px)!important;border-color:#b8d8e8!important;box-shadow:0 20px 38px rgba(17,55,88,.16)!important}
.dashboard-v15-command-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:#e6f5fc;color:#1480b1}
.dashboard-v15-command.command-approval .dashboard-v15-command-icon{background:#fff1e2;color:#c46b15}
.dashboard-v15-command.command-card .dashboard-v15-command-icon{background:#eee9fb;color:#7250ae}
.dashboard-v15-command>span:nth-child(2){min-width:0;display:grid;gap:3px}
.dashboard-v15-command small{color:#78899a;font-size:9px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.dashboard-v15-command strong{color:#122a43;font-size:15px;font-weight:920;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-v15-command em{color:#718297;font-size:10px;font-style:normal;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-v15-command>i{font-size:25px;font-style:normal;color:#9bb0c2}
.dashboard-v15 .dashboard-v10-section{
  padding:24px!important;border-radius:26px!important;border:1px solid var(--fix7-line)!important;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important;box-shadow:0 14px 36px rgba(20,53,84,.075)!important;
}
.dashboard-v15 .dashboard-v10-section-head{margin-bottom:19px!important}
.dashboard-v15 .dashboard-v10-section-head>div>span{color:#1685ad!important;font-size:9px!important;letter-spacing:.15em!important}
.dashboard-v15 .dashboard-v10-section-head h3{font-size:20px!important;color:#0d2138!important}
.dashboard-v15-summary-section{background:linear-gradient(135deg,#f9fcff,#f3f8fc)!important}
.dashboard-v15 .dashboard-v10-summary-grid{gap:14px!important}
.dashboard-v15 .dashboard-v10-summary{
  min-height:122px!important;padding:18px!important;border:1px solid #dfe9f2!important;border-radius:21px!important;
  background:linear-gradient(150deg,#fff,#f9fbfd)!important;box-shadow:0 9px 24px rgba(20,52,83,.065)!important;
}
.dashboard-v15 .dashboard-v10-summary-icon{width:52px;height:52px;flex-basis:52px;border-radius:17px}
.dashboard-v15 .dashboard-v10-summary-copy span{font-size:10px!important;text-transform:uppercase;letter-spacing:.04em}
.dashboard-v15 .dashboard-v10-summary-copy strong{font-size:32px!important}
.dashboard-v15-primary-section .dashboard-v10-primary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.dashboard-v15 .dashboard-v10-action{
  min-height:138px!important;padding:20px!important;border-radius:21px!important;
  grid-template-columns:54px minmax(0,1fr) 22px!important;background:linear-gradient(145deg,#fff,#f8fbfd)!important;
}
.dashboard-v15 .dashboard-v10-action-icon{width:54px;height:54px;border-radius:18px}
.dashboard-v15 .dashboard-v10-action-copy strong{font-size:14px!important}
.dashboard-v15 .dashboard-v10-action-copy span{font-size:10.5px!important;max-width:320px}
.dashboard-v15-secondary-section .dashboard-v10-secondary-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}

/* Member dashboard 15 */
.member-dashboard-v15{max-width:1420px;margin:0 auto;padding-bottom:32px}
.member-dashboard-v15 .member-v12-hero{
  min-height:230px;padding:34px 36px;border-radius:30px;
  background:
    radial-gradient(circle at 82% 14%,rgba(255,178,197,.22),transparent 27%),
    linear-gradient(132deg,#061a33 0%,#0a4777 58%,#72546b 100%);
  box-shadow:0 24px 52px rgba(8,43,76,.22);
}
.member-dashboard-v15 .member-v12-avatar-shell{width:92px!important;height:92px!important;flex-basis:92px;border-radius:28px!important}
.member-dashboard-v15 .member-v12-avatar-shell img.dashboard-avatar{width:92px!important;height:92px!important;border-radius:28px!important}
.member-dashboard-v15 .member-v12-avatar-shell .dashboard-avatar-hover{border-radius:28px!important}
.member-dashboard-v15 .member-v12-hero-copy h2{font-size:clamp(27px,3vw,38px)!important;letter-spacing:-.7px!important}
.member-v15-member-number{display:inline-grid;gap:1px;margin-top:10px;padding:7px 10px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(3,20,39,.24)}
.member-v15-member-number small{color:#aac9dc;font-size:8px;font-weight:900;letter-spacing:.11em}
.member-v15-member-number strong{color:#fff;font-size:11px;font-weight:900;max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-dashboard-v15 .member-v12-summary-grid{gap:14px;margin:18px 0}
.member-dashboard-v15 .member-v12-summary{min-height:104px;padding:16px;border-radius:20px;background:linear-gradient(145deg,#fff,#f8fbfd);box-shadow:0 9px 24px rgba(22,54,84,.065)}
.member-dashboard-v15 .member-v12-summary-icon{width:48px;height:48px;flex-basis:48px;border-radius:16px}
.member-dashboard-v15 .member-v12-summary small{font-size:9px;text-transform:uppercase;letter-spacing:.05em}
.member-dashboard-v15 .member-v12-summary strong{font-size:13px}
.member-v15-journey{
  margin:0 0 17px;padding:21px;border:1px solid var(--fix7-line);border-radius:24px;background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:0 12px 30px rgba(23,55,85,.065);
}
.member-v15-journey-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.member-v15-journey-head span{display:block;margin-bottom:4px;color:#2380aa;font-size:8.5px;font-weight:900;letter-spacing:.15em}
.member-v15-journey-head h3{margin:0;color:#14334e;font-size:18px;font-weight:920}
.member-v15-journey-head p{margin:0;color:#748699;font-size:10px;font-weight:650}
.member-v15-journey-track{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.member-v15-journey-track::before{content:"";position:absolute;left:7%;right:7%;top:20px;height:2px;background:#dce7f0;z-index:0}
.member-v15-step{position:relative;z-index:1;display:grid;justify-items:center;gap:8px;text-align:center;min-width:0}
.member-v15-step-marker{width:42px;height:42px;display:grid;place-items:center;border:5px solid #fff;border-radius:50%;background:#e8eff6;color:#6f8295;font-size:12px;font-weight:950;box-shadow:0 0 0 1px #d6e2ec}
.member-v15-step.is-complete .member-v15-step-marker{background:#1f9a72;color:#fff;box-shadow:0 0 0 1px #1f9a72}
.member-v15-step.is-current .member-v15-step-marker{background:#1675c1;color:#fff;box-shadow:0 0 0 4px rgba(22,117,193,.12)}
.member-v15-step>div{display:grid;gap:3px;min-width:0}
.member-v15-step strong{color:#183850;font-size:10.5px;font-weight:900}
.member-v15-step small{color:#748697;font-size:8.8px;line-height:1.35}
.member-dashboard-v15 .member-v12-main-grid{grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);gap:18px}
.member-dashboard-v15 .member-v12-panel,.member-dashboard-v15 .member-v12-info-section{border-radius:25px;box-shadow:0 14px 34px rgba(22,54,84,.07)}
.member-dashboard-v15 .member-v12-panel{padding:22px}
.member-dashboard-v15 .member-v12-service{min-height:78px;border-radius:18px!important;padding:13px 14px!important}
.member-dashboard-v15 .member-v12-service-icon{width:46px;height:46px;border-radius:15px}
.member-dashboard-v15 .member-v12-info-section{padding:21px;margin-top:18px}
.member-dashboard-v15 .member-v12-info-card{padding:15px;border-radius:18px;background:linear-gradient(145deg,#f8fbfd,#f3f7fb)}

/* General member pages receive the same professional surface language. */
body.v151-ui .app.member-app #view>.card,
body.v151-ui .app.member-app #view>[class*="member-"]{
  max-width:1420px;margin-left:auto;margin-right:auto;
}
body.v151-ui .app.member-app .card:not(.rev50-card){border-radius:24px!important;border-color:#d9e5ef!important;box-shadow:0 13px 32px rgba(22,55,85,.07)!important}

/* Responsive shell repair: eliminate the phantom desktop column on Admin and Member. */
@media (max-width:1100px){
  .dashboard-v15-command-strip{grid-template-columns:1fr 1fr;margin-top:-34px}
  .dashboard-v15-command:last-child{grid-column:1/-1}
  .dashboard-v15-secondary-section .dashboard-v10-secondary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .member-dashboard-v15 .member-v12-main-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  html,body.v151-ui{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  body.v151-ui .app,body.v151-ui .app.member-app{
    display:block!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important;min-width:0!important;
    margin:0!important;padding:0!important;overflow-x:hidden!important;
  }
  body.v151-ui .sidebar,body.v151-ui .app.member-app .sidebar{
    position:fixed!important;top:0!important;left:0!important;bottom:0!important;width:min(88vw,326px)!important;max-width:326px!important;
    height:100dvh!important;transform:translateX(-105%)!important;z-index:2000!important;
  }
  body.v151-ui .app.sidebar-open .sidebar,body.v151-ui .app.member-app.sidebar-open .sidebar{transform:translateX(0)!important}
  body.v151-ui .content,body.v151-ui .app.member-app .content{
    display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:0 14px 28px!important;overflow-x:hidden!important;
  }
  body.v151-ui #view{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
  body.v151-ui .topbar,body.v151-ui .app.member-app .topbar{
    width:auto!important;max-width:none!important;min-width:0!important;margin:0 -14px 18px!important;padding:12px 14px!important;border-radius:0!important;
    min-height:82px!important;position:sticky!important;top:0!important;
  }
  body.v151-ui .topbar-actions{gap:8px!important;flex:0 0 auto!important}
  body.v151-ui .topbar-theme-switch,body.v151-ui .topbar-refresh-button{display:none!important}
  body.v151-ui .menu-toggle{display:grid!important;flex:0 0 48px!important;width:48px!important;height:48px!important}
  body.v151-ui .notification-button{width:48px!important;height:48px!important}
  body.v151-ui .topbar h2{font-size:23px!important}
  body.v151-ui .dashboard-greeting{font-size:10.5px!important}
  .dashboard-v15{width:100%!important;max-width:100%!important;gap:14px!important;padding-bottom:24px}
  .dashboard-v15 .dashboard-v10-hero{min-height:0!important;padding:24px 20px!important;border-radius:24px!important}
  .dashboard-v15 .dashboard-v10-hero h2{font-size:30px!important}
  .dashboard-v15 .dashboard-v10-hero-meta{width:100%;align-self:auto!important;justify-items:start!important}
  .dashboard-v15-command-strip{grid-template-columns:1fr!important;margin-top:-18px!important;padding:0 10px!important;gap:9px!important}
  .dashboard-v15-command:last-child{grid-column:auto}
  body.v151-ui .dashboard-v15-command{min-height:90px!important;padding:14px!important}
  .dashboard-v15 .dashboard-v10-section{padding:18px 15px!important;border-radius:22px!important}
  .dashboard-v15 .dashboard-v10-section-head{align-items:flex-start!important}
  .dashboard-v15 .dashboard-v10-section-head p{display:none!important}
  .dashboard-v15 .dashboard-v10-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .dashboard-v15 .dashboard-v10-summary{min-height:100px!important;padding:13px!important;gap:9px!important}
  .dashboard-v15 .dashboard-v10-summary-icon{width:42px;height:42px;flex-basis:42px;border-radius:14px}
  .dashboard-v15 .dashboard-v10-summary-copy strong{font-size:25px!important}
  .dashboard-v15-primary-section .dashboard-v10-primary-grid,
  .dashboard-v15-secondary-section .dashboard-v10-secondary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .dashboard-v15 .dashboard-v10-action{min-height:142px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;padding:14px!important;gap:10px!important}
  .dashboard-v15 .dashboard-v10-action-icon{width:46px;height:46px;border-radius:15px}
  .dashboard-v15 .dashboard-v10-action-arrow{position:absolute;right:12px;bottom:10px}
  .member-dashboard-v15{width:100%!important;max-width:100%!important;padding-bottom:88px}
  .member-dashboard-v15 .member-v12-hero{min-height:0;padding:22px 17px;border-radius:24px}
  .member-dashboard-v15 .member-v12-avatar-shell,.member-dashboard-v15 .member-v12-avatar-shell img.dashboard-avatar{width:66px!important;height:66px!important}
  .member-dashboard-v15 .member-v12-avatar-shell{flex-basis:66px;border-radius:20px!important}
  .member-dashboard-v15 .member-v12-avatar-shell img.dashboard-avatar,.member-dashboard-v15 .member-v12-avatar-shell .dashboard-avatar-hover{border-radius:20px!important}
  .member-dashboard-v15 .member-v12-hero-copy h2{font-size:21px!important;max-width:52vw}
  .member-v15-member-number{padding:5px 8px;margin-top:7px}
  .member-dashboard-v15 .member-v12-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0}
  .member-dashboard-v15 .member-v12-summary{min-height:88px;padding:11px 10px;border-radius:17px;gap:8px}
  .member-dashboard-v15 .member-v12-summary-icon{width:38px;height:38px;flex-basis:38px;border-radius:13px}
  .member-v15-journey{padding:16px 13px;border-radius:21px}
  .member-v15-journey-head{align-items:flex-start;margin-bottom:14px}.member-v15-journey-head p{display:none}
  .member-v15-journey-track{grid-template-columns:1fr 1fr;gap:10px}
  .member-v15-journey-track::before{display:none}
  .member-v15-step{grid-template-columns:35px minmax(0,1fr);justify-items:start;align-items:center;text-align:left;padding:10px;border:1px solid #e1eaf2;border-radius:15px;background:#f8fbfd}
  .member-v15-step-marker{width:35px;height:35px;border-width:4px}
  .member-v15-step strong{font-size:10px}.member-v15-step small{font-size:8.5px}
  .member-dashboard-v15 .member-v12-main-grid{grid-template-columns:1fr;gap:13px}
  .member-dashboard-v15 .member-v12-panel,.member-dashboard-v15 .member-v12-info-section{padding:15px;border-radius:21px}
  .member-dashboard-v15 .member-v12-service-list{grid-template-columns:1fr 1fr}
  .member-dashboard-v15 .member-v12-service{min-height:96px;display:flex!important;flex-direction:column!important;align-items:flex-start!important;padding:12px!important}
  .member-dashboard-v15 .member-v12-service-arrow{position:absolute;right:10px;bottom:8px}
  .member-dashboard-v15 .member-v12-info-grid{grid-template-columns:1fr}
}
@media (max-width:420px){
  body.v151-ui .content,body.v151-ui .app.member-app .content{padding-left:10px!important;padding-right:10px!important}
  body.v151-ui .topbar,body.v151-ui .app.member-app .topbar{margin-left:-10px!important;margin-right:-10px!important;padding-left:10px!important;padding-right:10px!important}
  body.v151-ui .menu-toggle,body.v151-ui .notification-button{width:44px!important;height:44px!important;flex-basis:44px!important}
  body.v151-ui .v151-topbar-kicker{font-size:8px!important;letter-spacing:1px!important}
  body.v151-ui .topbar h2{font-size:21px!important}
  .dashboard-v15 .dashboard-v10-hero{padding:21px 17px!important}.dashboard-v15 .dashboard-v10-hero h2{font-size:27px!important}
  .dashboard-v15 .dashboard-v10-summary-grid{grid-template-columns:1fr 1fr!important}
  .dashboard-v15-primary-section .dashboard-v10-primary-grid,.dashboard-v15-secondary-section .dashboard-v10-secondary-grid{grid-template-columns:1fr 1fr!important}
  .dashboard-v15 .dashboard-v10-action{min-height:136px!important;padding:12px!important}
  .dashboard-v15 .dashboard-v10-action-copy strong{font-size:12px!important}.dashboard-v15 .dashboard-v10-action-copy span{font-size:9px!important}
  .member-dashboard-v15 .member-v12-hero-main{gap:11px}.member-dashboard-v15 .member-v12-hero-copy h2{font-size:19px!important;max-width:45vw}
  .member-dashboard-v15 .member-v12-hero-actions{gap:4px}.member-dashboard-v15 .member-v12-icon-button{width:32px;height:32px}
  .member-dashboard-v15 .member-v12-summary strong{font-size:10.5px;white-space:normal;line-height:1.22}
  .member-v15-journey-track{grid-template-columns:1fr}
  .member-dashboard-v15 .member-v12-service-list{grid-template-columns:1fr 1fr}
}

/* FIX7 safety refinements */
.member-dashboard-v15 .member-v12-service{position:relative!important}
@media (max-width:900px){
  body.v151-ui .sidebar-backdrop{position:fixed!important;inset:0!important;z-index:1900!important}
  body.v151-ui .app:not(.sidebar-open) .sidebar-backdrop{display:none!important}
  body.v151-ui .app.sidebar-open .sidebar-backdrop{display:block!important}
}


/* ===== FIX8 DASHBOARD / NOTIFICATION / RESPONSIVE REWORK ===== */
:root{
  --fspgi-rose:#d85f7e;
  --fspgi-rose-soft:#f6d8e1;
  --fspgi-red:#cf3348;
  --fspgi-red-soft:#fdecef;
}
body.v151-ui .topbar{background:linear-gradient(180deg,rgba(249,251,255,.96),rgba(244,248,252,.94))!important}
body.v151-ui .v151-topbar-kicker span{background:linear-gradient(135deg,#ffe8ef,#e8f7fb)!important;color:#b03055!important;border:1px solid #f3c2d1}
.dashboard-v15 .dashboard-v10-hero{
  background:
    radial-gradient(circle at 82% 18%, rgba(240,126,154,.30), transparent 24%),
    radial-gradient(circle at 92% 10%, rgba(255,229,236,.16), transparent 16%),
    linear-gradient(128deg,#081a34 0%,#0a4474 54%,#1a82b0 82%,#ba5e79 100%)!important;
}
.dashboard-v15 .dashboard-v10-eyebrow{background:rgba(255,236,242,.11)!important;color:#ffd9e2!important;border:1px solid rgba(255,255,255,.12)!important}
.dashboard-v15 .dashboard-v10-puk{color:#ffd467!important}
.dashboard-v15 .dashboard-v10-federation{color:#ffd9e3!important}
.dashboard-v15 .dashboard-v10-section-head>div>span,
.member-v15-journey-head span,
.member-dashboard-v15 .member-v12-section-head span{color:#c43e63!important}
.dashboard-v15 .dashboard-v10-section{position:relative;overflow:hidden}
.dashboard-v15 .dashboard-v10-section::before,
.member-dashboard-v15 .member-v12-panel::before,
.member-dashboard-v15 .member-v12-info-section::before,
.member-v15-journey::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:5px;background:linear-gradient(180deg,#0f7bc1 0%,#cf4761 100%);opacity:.9
}
.dashboard-v15-command-strip{gap:14px!important}
body.v151-ui .dashboard-v15-command{
  min-height:126px!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
  box-shadow:0 16px 34px rgba(19,55,88,.11)!important;
}
body.v151-ui .dashboard-v15-command.command-members{border-top:4px solid #1c89d1!important}
body.v151-ui .dashboard-v15-command.command-approval{border-top:4px solid #cf6c2f!important}
body.v151-ui .dashboard-v15-command.command-card{border-top:4px solid #b44d72!important}
.dashboard-v15-command-icon{width:56px;height:56px;border-radius:18px}
.dashboard-v15-command.command-card .dashboard-v15-command-icon{background:#f6e9f0!important;color:#a44369!important}
.dashboard-v15-command strong{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.22!important;font-size:18px!important}
.dashboard-v15-command em{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.5!important;font-size:12px!important}
.dashboard-v15 .dashboard-v10-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.dashboard-v15 .dashboard-v10-summary{display:flex!important;align-items:center!important;gap:14px!important;min-height:130px!important}
.dashboard-v15 .dashboard-v10-summary-copy{display:grid!important;gap:4px!important}
.dashboard-v15 .dashboard-v10-summary-copy span{font-size:11px!important;color:#6f8195!important}
.dashboard-v15 .dashboard-v10-summary-copy strong{font-size:34px!important;line-height:1!important}
.dashboard-v15-primary-section .dashboard-v10-primary-grid,
.dashboard-v15-secondary-section .dashboard-v10-secondary-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))!important}
.dashboard-v15 .dashboard-v10-action{
  min-height:160px!important;
  align-items:start!important;
  padding:22px!important;
  gap:14px!important;
  grid-template-columns:58px minmax(0,1fr) 24px!important;
  position:relative!important;
}
.dashboard-v15 .dashboard-v10-action::after{
  content:"";position:absolute;inset:auto 18px 0 18px;height:3px;border-radius:999px;background:linear-gradient(90deg,#1b8bd2 0%,#d6506f 100%);opacity:.12
}
.dashboard-v15 .dashboard-v10-action-icon{width:58px!important;height:58px!important;border-radius:20px!important}
.dashboard-v15 .dashboard-v10-action-copy{display:grid!important;gap:8px!important;align-content:start!important}
.dashboard-v15 .dashboard-v10-action-copy strong{font-size:16px!important;line-height:1.28!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
.dashboard-v15 .dashboard-v10-action-copy span{font-size:12px!important;line-height:1.55!important;max-width:none!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;color:#62758a!important}
.dashboard-v15 .dashboard-v10-action-arrow{align-self:end!important;color:#9aafc0!important}
.member-dashboard-v15 .member-v12-hero{
  background:
    radial-gradient(circle at 84% 16%, rgba(255,182,197,.28), transparent 22%),
    radial-gradient(circle at 74% 80%, rgba(130,217,236,.12), transparent 22%),
    linear-gradient(132deg,#071a34 0%,#0a4675 54%,#1b83ae 80%,#a45670 100%)!important;
}
.member-dashboard-v15 .member-v12-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.member-dashboard-v15 .member-v12-summary{display:flex!important;align-items:center!important;gap:12px!important;min-height:118px!important}
.member-dashboard-v15 .member-v12-summary strong{font-size:15px!important;line-height:1.35!important;white-space:normal!important}
.member-v15-journey-track{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.member-dashboard-v15 .member-v12-service-list{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;gap:14px!important}
.member-dashboard-v15 .member-v12-service{min-height:96px!important;display:grid!important;grid-template-columns:50px minmax(0,1fr) 18px!important;align-items:center!important;gap:12px!important}
.member-dashboard-v15 .member-v12-service-copy strong{font-size:15px!important;line-height:1.3!important;white-space:normal!important}
.member-dashboard-v15 .member-v12-service-copy small{font-size:11px!important;line-height:1.45!important;white-space:normal!important}
.member-dashboard-v15 .member-v12-info-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;gap:14px!important}
.member-dashboard-v15 .member-v12-info-card{display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;gap:12px!important;align-items:flex-start!important}
body.v151-ui .notification-shell{position:relative!important}
body.v151-ui .notification-panel{right:0!important;top:calc(100% + 12px)!important;left:auto!important;bottom:auto!important}
@media (max-width:700px){
  body.v151-ui .notification-backdrop:not(.hidden){display:block!important;position:fixed!important;inset:0!important;z-index:3090!important;background:rgba(5,17,34,.62)!important}
  body.v151-ui .notification-panel:not(.hidden){
    position:fixed!important;left:50%!important;right:auto!important;top:max(74px,calc(env(safe-area-inset-top,0px) + 18px))!important;bottom:auto!important;
    transform:translateX(-50%)!important;width:min(430px,calc(100vw - 18px))!important;max-width:min(430px,calc(100vw - 18px))!important;
    max-height:calc(100dvh - max(92px,calc(env(safe-area-inset-top,0px) + 28px)))!important;z-index:3100!important;border-radius:24px!important;
  }
  body.v151-ui .notification-panel-body{max-height:calc(100dvh - 246px)!important}
  .v151-notification-footer{flex-wrap:wrap!important}.v151-notification-footer>span{flex:1 1 100%}
}
@media (max-width:1200px){
  .dashboard-v15-primary-section .dashboard-v10-primary-grid,
  .dashboard-v15-secondary-section .dashboard-v10-secondary-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}
  .member-dashboard-v15 .member-v12-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:900px){
  .dashboard-v15{gap:16px!important}
  .dashboard-v15 .dashboard-v10-hero{padding:24px 19px!important;border-radius:26px!important}
  .dashboard-v15 .dashboard-v10-hero h2{font-size:clamp(30px,8vw,36px)!important;line-height:1.08!important}
  .dashboard-v15 .dashboard-v10-hero p{font-size:13px!important;line-height:1.55!important}
  .dashboard-v15-command-strip{padding:0!important;margin-top:12px!important;grid-template-columns:1fr!important;gap:10px!important}
  body.v151-ui .dashboard-v15-command{min-height:94px!important;padding:14px 15px!important;grid-template-columns:52px minmax(0,1fr) 18px!important;border-radius:20px!important}
  .dashboard-v15-command-icon{width:52px!important;height:52px!important;border-radius:16px!important}
  .dashboard-v15-command strong{font-size:17px!important}
  .dashboard-v15-command em{font-size:11.5px!important}
  .dashboard-v15 .dashboard-v10-section{padding:18px 15px!important}
  .dashboard-v15 .dashboard-v10-summary-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .dashboard-v15 .dashboard-v10-summary{min-height:112px!important;padding:14px!important;gap:10px!important;align-items:flex-start!important;flex-direction:column!important}
  .dashboard-v15 .dashboard-v10-summary-copy strong{font-size:28px!important}
  .dashboard-v15-primary-section .dashboard-v10-primary-grid{grid-template-columns:1fr!important;gap:10px!important}
  .dashboard-v15-secondary-section .dashboard-v10-secondary-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .dashboard-v15 .dashboard-v10-action{min-height:102px!important;padding:14px!important;grid-template-columns:50px minmax(0,1fr) 18px!important;align-items:center!important}
  .dashboard-v15 .dashboard-v10-action-copy{gap:4px!important}
  .dashboard-v15 .dashboard-v10-action-copy strong{font-size:15px!important}
  .dashboard-v15 .dashboard-v10-action-copy span{font-size:11px!important;line-height:1.45!important}
  .member-dashboard-v15 .member-v12-summary-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .member-dashboard-v15 .member-v12-summary{min-height:102px!important;padding:13px!important;align-items:flex-start!important;flex-direction:column!important}
  .member-dashboard-v15 .member-v12-summary strong{font-size:14px!important}
  .member-v15-journey-track{grid-template-columns:1fr 1fr!important}
  .member-dashboard-v15 .member-v12-service-list{grid-template-columns:1fr!important;gap:10px!important}
  .member-dashboard-v15 .member-v12-service{min-height:90px!important;padding:13px!important;grid-template-columns:48px minmax(0,1fr) 18px!important}
  .member-dashboard-v15 .member-v12-info-grid{grid-template-columns:1fr!important}
}
@media (max-width:420px){
  .dashboard-v15 .dashboard-v10-summary-grid{grid-template-columns:1fr 1fr!important}
  .dashboard-v15-secondary-section .dashboard-v10-secondary-grid{grid-template-columns:1fr 1fr!important}
  .dashboard-v15 .dashboard-v10-action{min-height:96px!important}
  .dashboard-v15 .dashboard-v10-action-copy strong{font-size:14px!important}
  .dashboard-v15 .dashboard-v10-action-copy span{font-size:10.5px!important}
  .member-dashboard-v15 .member-v12-summary-grid{grid-template-columns:1fr 1fr!important}
  .member-v15-journey-track{grid-template-columns:1fr!important}
}


/* ==================================================================
   FIX9 — TRUE ADMIN CONSOLE REDESIGN + SIDEBAR PRECISION
   Unique classes avoid legacy dashboard grid collisions.
   ================================================================== */
body.v151-ui .brand-panel{position:relative!important;padding-bottom:34px!important}
body.v151-ui .v151-sidebar-release{display:block!important;margin:0 0 9px!important}
body.v151-ui .sidebar-brand-kicker{font-size:9px!important;line-height:1.4!important;letter-spacing:1.7px!important;color:#dcecf8!important}
body.v151-ui .sidebar-version-corner{
  position:absolute;right:17px;bottom:12px;display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:19px;padding:0 7px;border:1px solid rgba(255,208,220,.25);border-radius:999px;
  background:rgba(207,51,72,.13);color:#ffd6df;font-size:7.5px;font-weight:900;letter-spacing:.9px
}
body.v151-ui .sidebar-close{display:none!important}
body.v151-ui .v151-topbar-kicker span{font-size:7.5px!important;padding:2px 6px!important;letter-spacing:.65px!important}

.admin-console-v9{width:100%;max-width:1540px;margin:0 auto;padding:0 0 36px;display:grid;gap:18px;color:#0b2037}
.admin-console-hero{
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:30px;align-items:center;
  min-height:272px;padding:38px 40px;border:1px solid rgba(255,255,255,.16);border-radius:32px;
  background:
    radial-gradient(circle at 88% 16%,rgba(245,131,159,.34),transparent 23%),
    radial-gradient(circle at 74% 82%,rgba(65,187,220,.20),transparent 24%),
    linear-gradient(128deg,#071a33 0%,#0a3f6e 48%,#0f789f 77%,#a84e69 100%);
  box-shadow:0 28px 62px rgba(9,43,77,.24)
}
.admin-console-hero::after{content:"";position:absolute;right:-110px;bottom:-185px;width:430px;height:430px;border:76px solid rgba(255,255,255,.055);border-radius:50%;pointer-events:none}
.admin-console-hero-copy{position:relative;z-index:1;display:grid;align-content:center;justify-items:start;min-width:0}
.admin-console-eyebrow{display:inline-flex;margin-bottom:16px;padding:6px 11px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.08);color:#ffd7e1;font-size:9px;font-weight:900;letter-spacing:1.45px}
.admin-console-hero-copy h2{margin:0!important;color:#fff!important;font-size:clamp(36px,4vw,55px)!important;line-height:1.04!important;letter-spacing:-1.8px!important}
.admin-console-hero-copy>strong{margin-top:10px;color:#ffd166;font-size:clamp(17px,1.55vw,22px);line-height:1.3}
.admin-console-hero-copy>small{margin-top:5px;color:#ffd6e0;font-size:9.5px;font-weight:900;letter-spacing:1.3px}
.admin-console-hero-copy p{max-width:720px;margin:18px 0 0!important;color:#d9ebf6!important;font-size:14px!important;line-height:1.65!important}
.admin-console-hero-status{position:relative;z-index:1;display:grid;gap:17px;padding:20px;border:1px solid rgba(255,255,255,.16);border-radius:23px;background:rgba(3,19,38,.28);backdrop-filter:blur(12px)}
.admin-console-live{display:flex;align-items:center;gap:8px;color:#dff8ed;font-size:10px;font-weight:900;letter-spacing:.8px;text-transform:uppercase}
.admin-console-live i{width:9px;height:9px;border-radius:50%;background:#43d095;box-shadow:0 0 0 5px rgba(67,208,149,.14)}
.admin-console-clock{display:grid;gap:4px}.admin-console-clock small{color:#a9c4d9;font-size:9.5px}.admin-console-clock strong{color:#fff;font-size:16px;line-height:1.25}
.admin-console-rate{display:grid;gap:8px}.admin-console-rate>span{display:flex;align-items:end;justify-content:space-between;gap:12px}.admin-console-rate b{color:#fff;font-size:25px}.admin-console-rate small{color:#b9cede;font-size:9.5px}.admin-console-rate>div{height:8px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.11)}.admin-console-rate>div i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#35c99a,#f17494)}

.admin-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.admin-kpi-card{position:relative;overflow:hidden;min-width:0;min-height:118px;display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px;align-items:center;padding:18px;border:1px solid #dce7f1;border-radius:23px;background:linear-gradient(150deg,#fff,#f8fbfe);box-shadow:0 12px 28px rgba(23,56,88,.075)}
.admin-kpi-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:#2188c9}.admin-kpi-card.tone-green::after{background:#259a72}.admin-kpi-card.tone-orange::after{background:#d67b24}.admin-kpi-card.tone-purple::after{background:#ab4e74}
.admin-kpi-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;background:#e6f5ff;color:#1681c1}.admin-kpi-card.tone-green .admin-kpi-icon{background:#e5f8ef;color:#168761}.admin-kpi-card.tone-orange .admin-kpi-icon{background:#fff0df;color:#c66b16}.admin-kpi-card.tone-purple .admin-kpi-icon{background:#f6e8f0;color:#a8476b}
.admin-kpi-copy{min-width:0;display:grid;gap:3px}.admin-kpi-copy small{color:#697b8f;font-size:9.5px;font-weight:900;letter-spacing:.7px;text-transform:uppercase}.admin-kpi-copy strong{color:#0c2138;font-size:31px;line-height:1;font-weight:950}.admin-kpi-copy em{color:#8a98a8;font-size:9.5px;font-style:normal}

.admin-console-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.admin-console-main{display:grid;gap:18px;min-width:0}
.admin-console-section{position:relative;overflow:hidden;min-width:0;padding:25px;border:1px solid #d9e5ef;border-radius:28px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 15px 38px rgba(20,53,84,.075)}
.admin-console-section::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#1886c9,#cf4966)}
.admin-console-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}.admin-console-section-head span{display:block;margin-bottom:4px;color:#bf365a;font-size:9px;font-weight:950;letter-spacing:1.5px}.admin-console-section-head h3{margin:0!important;color:#0b2037!important;font-size:23px!important;line-height:1.2!important}.admin-console-section-head p{max-width:360px;margin:0!important;color:#718297!important;font-size:11px!important;line-height:1.5!important;text-align:right}
.admin-module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;min-width:0}
.admin-module-card{position:relative;min-width:0;width:100%;min-height:122px;display:grid;grid-template-columns:56px minmax(0,1fr) 22px;gap:14px;align-items:center;padding:17px 17px 17px 18px;border:1px solid #dfe9f2;border-radius:22px;background:linear-gradient(150deg,#fff,#f8fbfd);box-shadow:0 9px 23px rgba(24,56,87,.065);cursor:pointer;transition:.18s ease;color:#0c2138}
.admin-module-card:hover{transform:translateY(-3px);border-color:#bcd7e8;box-shadow:0 17px 32px rgba(20,58,92,.12)}
.admin-module-card::after{content:"";position:absolute;left:17px;right:17px;bottom:0;height:3px;border-radius:999px;background:linear-gradient(90deg,#1688cd,#d24e6c);opacity:.22}
.admin-module-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:18px;background:#e4f4ff;color:#157fbd}.admin-module-card.tone-green .admin-module-icon{background:#e2f7ed;color:#11845c}.admin-module-card.tone-orange .admin-module-icon{background:#fff0df;color:#c86b14}.admin-module-card.tone-purple .admin-module-icon{background:#f4e7f0;color:#a94469}
.admin-module-copy{min-width:0;display:grid;gap:4px}.admin-module-copy small{color:#a74a65;font-size:8px;font-weight:900;letter-spacing:1.05px}.admin-module-copy strong{color:#0d2239;font-size:15.5px;line-height:1.3;font-weight:930;white-space:normal;overflow-wrap:anywhere}.admin-module-copy em{color:#687b90;font-size:11px;line-height:1.5;font-style:normal;white-space:normal;overflow-wrap:anywhere}.admin-module-arrow{color:#96adbf;font-size:26px;line-height:1}.admin-module-badge{position:absolute;right:12px;top:10px;min-width:23px;height:23px;display:grid;place-items:center;padding:0 6px;border:2px solid #fff;border-radius:999px;background:#cf3348;color:#fff;font-size:9px;font-weight:900;box-shadow:0 5px 13px rgba(207,51,72,.25)}

.admin-console-side{display:grid;gap:16px;position:sticky;top:106px}
.admin-priority-panel,.admin-system-panel{border:1px solid #d9e5ef;border-radius:26px;background:#fff;box-shadow:0 14px 34px rgba(20,53,84,.075)}
.admin-priority-panel{padding:20px}.admin-side-heading{margin-bottom:13px}.admin-side-heading span{color:#bf365a;font-size:8.5px;font-weight:950;letter-spacing:1.4px}.admin-side-heading h3{margin:4px 0 0!important;color:#0c2138!important;font-size:20px!important}
.admin-priority-panel button{width:100%;min-height:74px;display:grid!important;grid-template-columns:42px minmax(0,1fr) 16px;gap:11px;align-items:center;margin-top:9px;padding:11px!important;border:1px solid #e2eaf2!important;border-radius:17px!important;background:#f9fbfd!important;color:#0d2238!important;text-align:left!important;box-shadow:none!important}.admin-priority-panel button:hover{background:#fff!important;border-color:#c7dce9!important}.admin-priority-panel button>span{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#e8f4fb;color:#157db8}.admin-priority-panel button>span.tone-orange{background:#fff0df;color:#c96b14}.admin-priority-panel button>span.tone-rose{background:#f9e8ee;color:#aa4668}.admin-priority-panel button div{display:grid;gap:3px;min-width:0}.admin-priority-panel button strong{font-size:12.5px;line-height:1.3}.admin-priority-panel button small{color:#718298;font-size:9.5px;line-height:1.4}.admin-priority-panel button i{color:#9ab0c1;font-size:21px;font-style:normal}
.admin-system-panel{position:relative;overflow:hidden;padding:22px;background:radial-gradient(circle at 95% 5%,rgba(238,113,144,.25),transparent 27%),linear-gradient(145deg,#071a33,#0b4775 67%,#8e5068);color:#fff}.admin-system-brand{display:flex;gap:8px;margin-bottom:18px}.admin-system-brand img{width:43px;height:43px;object-fit:contain;padding:5px;border-radius:13px;background:#fff}.admin-system-panel>span{color:#ffd4df;font-size:8.5px;font-weight:900;letter-spacing:1.25px}.admin-system-panel h3{margin:7px 0!important;color:#fff!important;font-size:20px!important;line-height:1.25!important}.admin-system-panel p{margin:0!important;color:#cfe2ef!important;font-size:10.5px!important;line-height:1.55!important}.admin-system-panel>small{position:absolute;right:15px;bottom:12px;color:rgba(255,255,255,.62);font-size:7px;font-weight:900;letter-spacing:.8px}

/* Member dashboard is also stabilized under the same visual system. */
.member-dashboard-v15 .member-v12-panel,.member-dashboard-v15 .member-v12-info-section,.member-v15-journey{position:relative;overflow:hidden!important}
.member-dashboard-v15 .member-v12-summary{border:1px solid #dfe8f1!important;background:linear-gradient(150deg,#fff,#f8fbfd)!important}
.member-dashboard-v15 .member-v12-service{width:100%!important;min-width:0!important}.member-dashboard-v15 .member-v12-service-copy{min-width:0!important}.member-dashboard-v15 .member-v12-service-copy strong,.member-dashboard-v15 .member-v12-service-copy small{white-space:normal!important;overflow-wrap:anywhere!important}

@media (max-width:1280px){
  .admin-console-hero{grid-template-columns:minmax(0,1fr) 250px;padding:32px}
  .admin-console-layout{grid-template-columns:1fr}
  .admin-console-side{position:static;grid-template-columns:1fr 1fr}
  .admin-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  body.v151-ui .sidebar-close{display:grid!important;place-items:center!important;top:13px!important;right:13px!important;width:32px!important;height:32px!important;padding:0!important;border:1px solid rgba(255,255,255,.20)!important;border-radius:10px!important;background:rgba(255,255,255,.10)!important;color:#fff!important;font-size:20px!important;line-height:1!important;box-shadow:none!important;z-index:5!important}
  body.v151-ui .brand-panel{padding-top:22px!important;padding-right:56px!important}
  .admin-console-v9{gap:13px;padding-bottom:26px}
  .admin-console-hero{grid-template-columns:1fr;gap:18px;min-height:0;padding:23px 18px;border-radius:25px}
  .admin-console-hero-copy h2{font-size:31px!important}.admin-console-hero-copy>strong{font-size:16px}.admin-console-hero-copy p{font-size:12px!important;line-height:1.55!important}
  .admin-console-hero-status{grid-template-columns:1fr 1fr;align-items:center;padding:14px;border-radius:18px}.admin-console-rate{grid-column:1/-1}.admin-console-clock strong{font-size:13px}
  .admin-kpi-grid{grid-template-columns:1fr 1fr;gap:9px}.admin-kpi-card{min-height:103px;grid-template-columns:42px minmax(0,1fr);gap:9px;padding:13px;border-radius:18px}.admin-kpi-icon{width:42px;height:42px;border-radius:14px}.admin-kpi-copy strong{font-size:25px}.admin-kpi-copy em{display:none}
  .admin-console-layout{gap:13px}.admin-console-main{gap:13px}.admin-console-section{padding:18px 14px;border-radius:22px}.admin-console-section-head{align-items:start;margin-bottom:15px}.admin-console-section-head p{display:none}.admin-console-section-head h3{font-size:19px!important}
  .admin-module-grid{grid-template-columns:1fr;gap:9px}.admin-module-card{min-height:94px;grid-template-columns:48px minmax(0,1fr) 18px;gap:11px;padding:13px;border-radius:18px}.admin-module-icon{width:48px;height:48px;border-radius:15px}.admin-module-copy strong{font-size:14.5px}.admin-module-copy em{font-size:10.5px}
  .admin-console-side{grid-template-columns:1fr;gap:13px}.admin-priority-panel,.admin-system-panel{border-radius:21px}.admin-priority-panel{padding:16px}.admin-system-panel{padding:18px}
}
@media (max-width:460px){
  .admin-console-hero-status{grid-template-columns:1fr}.admin-console-rate{grid-column:auto}.admin-console-live{font-size:9px}
  .admin-kpi-grid{grid-template-columns:1fr 1fr}.admin-kpi-card{grid-template-columns:1fr;align-items:start;gap:8px}.admin-kpi-copy strong{font-size:24px}
  .admin-module-card{grid-template-columns:44px minmax(0,1fr) 16px}.admin-module-icon{width:44px;height:44px}
}


/* =========================================================
   FIX10 — ADMIN COCKPIT + MEMBER PORTAL REDESIGN
   Visible version labels removed. Mobile cards are fixed to 2 columns.
   ========================================================= */
.sidebar-version-corner,.v151-release-chip,.v151-topbar-kicker span{display:none!important}
.v151-topbar-kicker{color:#a83e60!important}

/* ADMIN COCKPIT */
.admin-cockpit-v10{width:100%;max-width:1540px;margin:0 auto;padding:0 0 40px;display:grid;gap:20px;color:#0b2037}
.admin-cockpit-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.28fr) minmax(390px,.72fr);gap:34px;align-items:stretch;padding:40px;border-radius:34px;background:radial-gradient(circle at 90% 12%,rgba(248,164,184,.34),transparent 24%),radial-gradient(circle at 70% 88%,rgba(57,185,218,.20),transparent 25%),linear-gradient(128deg,#071a33 0%,#0a3d6a 49%,#137fa5 78%,#a84d69 100%);box-shadow:0 30px 66px rgba(7,40,74,.24);color:#fff}
.admin-cockpit-hero::after{content:"";position:absolute;right:-120px;bottom:-190px;width:440px;height:440px;border:74px solid rgba(255,255,255,.055);border-radius:50%;pointer-events:none}
.admin-cockpit-copy{position:relative;z-index:1;display:grid;align-content:center;justify-items:start;min-width:0}
.admin-cockpit-eyebrow{display:inline-flex;margin-bottom:15px;padding:7px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.08);color:#ffd6e0;font-size:9px;font-weight:900;letter-spacing:1.5px}
.admin-cockpit-copy h2{margin:0!important;max-width:760px;color:#fff!important;font-size:clamp(39px,4.4vw,62px)!important;line-height:1.02!important;letter-spacing:-2px!important}
.admin-cockpit-copy>strong{margin-top:12px;color:#ffd267;font-size:clamp(17px,1.5vw,22px);line-height:1.3}
.admin-cockpit-copy p{max-width:720px;margin:18px 0 0!important;color:#d9eaf5!important;font-size:14px!important;line-height:1.65!important}
.admin-cockpit-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.admin-cockpit-tags span{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(3,18,36,.22);color:#e9f4fa;font-size:9.5px;font-weight:800}.admin-cockpit-tags i{width:8px;height:8px;border-radius:50%;background:#47d19b;box-shadow:0 0 0 4px rgba(71,209,155,.14)}
.admin-cockpit-mosaic{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;min-width:0}
.admin-cockpit-mosaic article{display:grid;align-content:center;gap:5px;min-height:112px;padding:17px;border:1px solid rgba(255,255,255,.16);border-radius:21px;background:rgba(3,20,39,.25);backdrop-filter:blur(12px)}
.admin-cockpit-mosaic small{color:#b9d0e0;font-size:8.5px;font-weight:900;letter-spacing:.8px;text-transform:uppercase}.admin-cockpit-mosaic strong{color:#fff;font-size:29px;line-height:1}.admin-cockpit-mosaic span{color:#d4e4ef;font-size:9.5px}.admin-cockpit-mosaic .tone-green{border-top:3px solid #48d09c}.admin-cockpit-mosaic .tone-rose{border-top:3px solid #f0809b}.admin-cockpit-mosaic .tone-blue{border-top:3px solid #58bfe3}.admin-cockpit-clock{grid-column:1/-1;min-height:94px!important}.admin-cockpit-clock strong{font-size:17px!important}.admin-cockpit-clock small{text-transform:none!important;letter-spacing:0!important}
.admin-overview-v10,.admin-workspace-v10,.admin-focus-ribbon-v10{position:relative;overflow:hidden;padding:26px;border:1px solid #d9e5ef;border-radius:29px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 15px 38px rgba(20,53,84,.075)}
.admin-overview-v10::before,.admin-workspace-v10::before,.admin-focus-ribbon-v10::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#1987ca,#cf4967)}
.admin-section-heading-v10{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}.admin-section-heading-v10 span{display:block;margin-bottom:4px;color:#bf365a;font-size:9px;font-weight:950;letter-spacing:1.5px}.admin-section-heading-v10 h3{margin:0!important;color:#0b2037!important;font-size:24px!important;line-height:1.2!important}.admin-section-heading-v10 p{max-width:420px;margin:0!important;color:#718297!important;font-size:11px!important;line-height:1.5!important;text-align:right}
.admin-cockpit-v10 .admin-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
.admin-cockpit-v10 .admin-kpi-card{min-height:126px!important;padding:18px!important;border-radius:23px!important}
.admin-cockpit-v10 .admin-module-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
.admin-cockpit-v10 .admin-module-card{min-height:182px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:12px!important;padding:20px!important;border-radius:24px!important;background:linear-gradient(155deg,#fff,#f6faff)!important}
.admin-cockpit-v10 .admin-module-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:#1988ca}.admin-cockpit-v10 .admin-module-card.tone-orange::before{background:#d57924}.admin-cockpit-v10 .admin-module-card.tone-purple::before{background:#b14e73}.admin-cockpit-v10 .admin-module-card.tone-green::before{background:#26966f}
.admin-cockpit-v10 .admin-module-icon{width:58px!important;height:58px!important;border-radius:19px!important}
.admin-cockpit-v10 .admin-module-copy{gap:6px!important}.admin-cockpit-v10 .admin-module-copy strong{font-size:17px!important;line-height:1.25!important}.admin-cockpit-v10 .admin-module-copy em{font-size:11.5px!important;line-height:1.5!important}.admin-cockpit-v10 .admin-module-arrow{position:absolute;right:17px;bottom:13px!important}.admin-cockpit-v10 .admin-module-badge{top:13px;right:13px}
.admin-focus-grid-v10{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.admin-focus-grid-v10 button{min-height:86px;display:grid!important;grid-template-columns:46px minmax(0,1fr) 18px;gap:12px;align-items:center;padding:13px!important;border:1px solid #e0e9f1!important;border-radius:19px!important;background:#f8fbfd!important;color:#0d2238!important;text-align:left!important;box-shadow:none!important}.admin-focus-grid-v10 button:hover{background:#fff!important;border-color:#bad5e5!important}.admin-focus-grid-v10 button>span{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:#e7f4fb;color:#157db8}.admin-focus-grid-v10 button>span.tone-orange{background:#fff0df;color:#c96b14}.admin-focus-grid-v10 button>span.tone-rose{background:#f9e8ee;color:#aa4668}.admin-focus-grid-v10 button>span.tone-green{background:#e4f7ed;color:#18845f}.admin-focus-grid-v10 button div{display:grid;gap:3px;min-width:0}.admin-focus-grid-v10 button strong{font-size:13px;line-height:1.3}.admin-focus-grid-v10 button small{color:#718298;font-size:9.5px;line-height:1.4}.admin-focus-grid-v10 button i{color:#9ab0c1;font-size:21px;font-style:normal}

/* MEMBER PORTAL */
.member-portal-v10{width:100%;max-width:1500px;margin:0 auto;padding:0 0 42px;display:grid;gap:18px}
.member-hero-v10{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr);gap:24px;align-items:center;padding:34px;border-radius:32px;background:radial-gradient(circle at 86% 14%,rgba(255,181,199,.30),transparent 24%),radial-gradient(circle at 66% 84%,rgba(72,190,221,.16),transparent 24%),linear-gradient(132deg,#071a34 0%,#0a4675 55%,#1b82aa 80%,#a45670 100%);box-shadow:0 26px 56px rgba(8,43,76,.22);color:#fff}
.member-hero-v10::after{content:"";position:absolute;right:-110px;bottom:-170px;width:370px;height:370px;border:65px solid rgba(255,255,255,.055);border-radius:50%}
.member-hero-identity-v10{position:relative;z-index:1;display:flex;align-items:center;gap:20px;min-width:0}.member-avatar-v10{width:96px!important;height:96px!important;flex:0 0 96px!important;border-radius:29px!important}.member-avatar-v10 img.dashboard-avatar,.member-avatar-v10 .dashboard-avatar-hover{width:96px!important;height:96px!important;border-radius:29px!important}.member-hero-copy-v10{min-width:0}.member-hero-copy-v10>span{color:#ffd6e0;font-size:9px;font-weight:900;letter-spacing:1.35px}.member-hero-copy-v10 p{margin:9px 0 2px!important;color:#cfe4f2!important;font-size:11px!important}.member-hero-copy-v10 h2{margin:0!important;color:#fff!important;font-size:clamp(29px,3.3vw,44px)!important;line-height:1.05!important;letter-spacing:-1px!important}.member-hero-copy-v10 small{display:block;margin-top:9px;color:#ffd268;font-size:12px;font-weight:800}
.member-ticket-v10{position:relative;z-index:1;display:grid;gap:18px;padding:21px;border:1px solid rgba(255,255,255,.18);border-radius:23px;background:rgba(3,20,39,.26);backdrop-filter:blur(12px)}.member-ticket-head-v10{display:flex;align-items:center;justify-content:space-between;gap:12px}.member-ticket-head-v10>small,.member-ticket-number-v10 small{color:#bcd2e1;font-size:8.5px;font-weight:900;letter-spacing:1px}.member-ticket-number-v10{display:grid;gap:5px}.member-ticket-number-v10 strong{color:#fff;font-size:17px;line-height:1.25;overflow-wrap:anywhere}.member-ticket-foot-v10{display:flex;justify-content:space-between;gap:10px;color:#cfe1ec;font-size:9.5px}
.member-hero-actions-v10{position:absolute;right:18px;top:18px;z-index:2;display:flex;gap:7px}.member-hero-actions-v10 button{width:38px!important;height:38px!important;display:grid!important;place-items:center!important;padding:0!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:12px!important;background:rgba(255,255,255,.10)!important;color:#fff!important;box-shadow:none!important}.member-hero-actions-v10 .member-logout-v10{background:rgba(213,63,81,.20)!important}
.member-glance-grid-v10{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.member-glance-card-v10{position:relative;overflow:hidden;min-height:112px;display:grid;grid-template-columns:48px minmax(0,1fr);gap:13px;align-items:center;padding:17px;border:1px solid #dce7f1;border-radius:22px;background:linear-gradient(150deg,#fff,#f8fbfe);box-shadow:0 11px 26px rgba(23,56,88,.07)}.member-glance-card-v10::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:#2188c9}.member-glance-card-v10.tone-green::after,.member-glance-card-v10.tone-success::after{background:#259a72}.member-glance-card-v10.tone-warning::after{background:#d67b24}.member-glance-card-v10.tone-purple::after{background:#ab4e74}.member-glance-card-v10>span{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:#e6f5ff;color:#1681c1}.member-glance-card-v10.tone-green>span,.member-glance-card-v10.tone-success>span{background:#e5f8ef;color:#168761}.member-glance-card-v10.tone-warning>span{background:#fff0df;color:#c66b16}.member-glance-card-v10.tone-purple>span{background:#f6e8f0;color:#a8476b}.member-glance-card-v10 div{min-width:0;display:grid;gap:4px}.member-glance-card-v10 small{color:#697b8f;font-size:9px;font-weight:900;letter-spacing:.65px;text-transform:uppercase}.member-glance-card-v10 strong{color:#0c2138;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.member-portal-v10 .member-v15-journey,.member-portal-v10 .member-v12-panel,.member-portal-v10 .member-v12-info-section{border:1px solid #d9e5ef!important;border-radius:27px!important;background:linear-gradient(180deg,#fff,#fbfdff)!important;box-shadow:0 14px 34px rgba(22,54,84,.07)!important}.member-portal-v10 .member-v12-main-grid{grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr)!important;gap:18px!important}.member-portal-v10 .member-v12-service-list{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}.member-portal-v10 .member-v12-service{min-height:112px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:9px!important;padding:14px!important;border-radius:19px!important}.member-portal-v10 .member-v12-service-copy strong{font-size:14px!important}.member-portal-v10 .member-v12-service-copy small{font-size:10.5px!important;line-height:1.45!important}.member-portal-v10 .member-v12-info-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:13px!important}

@media(max-width:1200px){.admin-cockpit-hero{grid-template-columns:1fr;gap:22px}.admin-cockpit-mosaic{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto}.admin-cockpit-clock{grid-column:auto}.admin-cockpit-v10 .admin-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.admin-focus-grid-v10{grid-template-columns:repeat(2,minmax(0,1fr))}.member-hero-v10{grid-template-columns:1fr}.member-ticket-v10{max-width:560px}.member-portal-v10 .member-v12-main-grid{grid-template-columns:1fr!important}}
@media(max-width:900px){
  .admin-cockpit-v10,.member-portal-v10{gap:13px;padding-bottom:28px}
  .admin-cockpit-hero{padding:23px 17px;border-radius:25px}.admin-cockpit-copy h2{font-size:31px!important}.admin-cockpit-copy p{font-size:12px!important}.admin-cockpit-tags{gap:6px;margin-top:16px}.admin-cockpit-tags span{font-size:8.5px;padding:7px 9px}
  .admin-cockpit-mosaic{grid-template-columns:1fr 1fr;gap:8px}.admin-cockpit-mosaic article{min-height:88px;padding:13px;border-radius:17px}.admin-cockpit-mosaic article:last-child{grid-column:1/-1}.admin-cockpit-mosaic strong{font-size:24px}
  .admin-overview-v10,.admin-workspace-v10,.admin-focus-ribbon-v10{padding:17px 13px;border-radius:22px}.admin-section-heading-v10{align-items:flex-start;margin-bottom:15px}.admin-section-heading-v10 p{display:none}.admin-section-heading-v10 h3{font-size:20px!important}
  .admin-cockpit-v10 .admin-kpi-grid{grid-template-columns:1fr 1fr!important;gap:9px!important}.admin-cockpit-v10 .admin-kpi-card{min-height:105px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:8px!important;padding:13px!important;border-radius:18px!important}.admin-cockpit-v10 .admin-kpi-icon{width:42px!important;height:42px!important}.admin-cockpit-v10 .admin-kpi-copy strong{font-size:25px!important}.admin-cockpit-v10 .admin-kpi-copy em{display:none!important}
  .admin-cockpit-v10 .admin-module-grid{grid-template-columns:1fr 1fr!important;gap:9px!important}.admin-cockpit-v10 .admin-module-card{min-height:145px!important;padding:13px!important;gap:8px!important;border-radius:18px!important}.admin-cockpit-v10 .admin-module-icon{width:46px!important;height:46px!important;border-radius:15px!important}.admin-cockpit-v10 .admin-module-copy small{font-size:7px!important}.admin-cockpit-v10 .admin-module-copy strong{font-size:13px!important;line-height:1.28!important}.admin-cockpit-v10 .admin-module-copy em{display:none!important}.admin-cockpit-v10 .admin-module-arrow{right:10px;bottom:8px!important;font-size:20px!important}
  .admin-focus-grid-v10{grid-template-columns:1fr 1fr;gap:8px}.admin-focus-grid-v10 button{min-height:104px;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;padding:12px!important;gap:8px!important}.admin-focus-grid-v10 button>span{width:40px;height:40px}.admin-focus-grid-v10 button strong{font-size:12px}.admin-focus-grid-v10 button small{font-size:8.8px}.admin-focus-grid-v10 button i{position:absolute;right:9px;bottom:6px}
  .member-hero-v10{padding:21px 15px;border-radius:24px;gap:15px}.member-hero-identity-v10{gap:13px}.member-avatar-v10,.member-avatar-v10 img.dashboard-avatar,.member-avatar-v10 .dashboard-avatar-hover{width:68px!important;height:68px!important}.member-avatar-v10{flex-basis:68px!important;border-radius:20px!important}.member-avatar-v10 img.dashboard-avatar,.member-avatar-v10 .dashboard-avatar-hover{border-radius:20px!important}.member-hero-copy-v10 h2{font-size:22px!important;max-width:53vw}.member-ticket-v10{padding:14px;border-radius:18px;gap:12px}.member-hero-actions-v10{right:10px;top:10px}.member-hero-actions-v10 button{width:33px!important;height:33px!important}
  .member-glance-grid-v10{grid-template-columns:1fr 1fr;gap:9px}.member-glance-card-v10{min-height:101px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px;border-radius:17px}.member-glance-card-v10>span{width:39px;height:39px;border-radius:13px}.member-glance-card-v10 strong{font-size:12px}.member-portal-v10 .member-v12-service-list{grid-template-columns:1fr 1fr!important;gap:9px!important}.member-portal-v10 .member-v12-service{min-height:135px!important;padding:12px!important}.member-portal-v10 .member-v12-info-grid{grid-template-columns:1fr!important}
}
@media(max-width:420px){.admin-cockpit-v10 .admin-module-grid,.admin-cockpit-v10 .admin-kpi-grid,.admin-focus-grid-v10,.member-glance-grid-v10,.member-portal-v10 .member-v12-service-list{grid-template-columns:1fr 1fr!important}.admin-cockpit-v10 .admin-module-card{min-height:139px!important}.member-ticket-foot-v10{flex-direction:column}.member-hero-copy-v10 h2{font-size:20px!important}}

/* ============================================================================
   TAHAP 12 — MEMBER MOBILE FINAL OVERRIDES
   File ini dimuat paling akhir agar menjadi sumber style utama dashboard anggota.
   ============================================================================ */

/* Header collapse: cegah aturan global button V15.1 memberi latar biru/tinggi paksa. */
body.v151-ui #view .member-v15-journey,
body.v151-ui #view .member-v15-kta-section{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  padding:15px 16px!important;
  overflow:hidden!important;
  border:1px solid #d7e4ef!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,#ffffff 0%,#f6faff 100%)!important;
  box-shadow:0 10px 25px rgba(20,58,91,.09)!important;
}
body.v151-ui #view .member-v15-journey::before,
body.v151-ui #view .member-v15-kta-section::before{
  content:""!important;
  position:absolute!important;
  left:0!important;top:0!important;bottom:0!important;
  width:5px!important;
  background:linear-gradient(180deg,#1789cf,#c74770)!important;
}
body.v151-ui #view button.member-v15-journey-toggle,
body.v151-ui #view button.member-v15-kta-toggle{
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:58px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#102f49!important;
  box-shadow:none!important;
  transform:none!important;
  text-align:left!important;
  filter:none!important;
}
body.v151-ui #view button.member-v15-journey-toggle:hover,
body.v151-ui #view button.member-v15-kta-toggle:hover,
body.v151-ui #view button.member-v15-journey-toggle:active,
body.v151-ui #view button.member-v15-kta-toggle:active{
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  filter:none!important;
}
body.v151-ui #view .member-v15-journey-title,
body.v151-ui #view .member-v15-kta-title{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  min-width:0!important;
  max-width:calc(100% - 50px)!important;
  overflow:visible!important;
}
body.v151-ui #view .member-v15-journey-title small,
body.v151-ui #view .member-v15-kta-title small{
  display:block!important;
  margin:0 0 4px!important;
  color:#a73661!important;
  font-size:9px!important;
  line-height:1.2!important;
  font-weight:950!important;
  letter-spacing:1.15px!important;
}
body.v151-ui #view .member-v15-journey-title strong,
body.v151-ui #view .member-v15-kta-title strong{
  display:block!important;
  margin:0!important;
  color:#102f49!important;
  font-size:clamp(17px,4.7vw,20px)!important;
  line-height:1.22!important;
  font-weight:900!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
}
body.v151-ui #view .member-v15-journey-title em,
body.v151-ui #view .member-v15-kta-title em{
  display:block!important;
  margin:5px 0 0!important;
  color:#536f84!important;
  font-size:10.5px!important;
  line-height:1.35!important;
  font-style:normal!important;
  font-weight:700!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
body.v151-ui #view .member-v15-journey-chevron,
body.v151-ui #view .member-v15-kta-chevron{
  display:grid!important;
  flex:0 0 40px!important;
  place-items:center!important;
  width:40px!important;
  height:40px!important;
  color:#0a6fae!important;
  border:1px solid #c8e1f2!important;
  border-radius:13px!important;
  background:#eaf6ff!important;
  box-shadow:0 5px 13px rgba(17,99,153,.12)!important;
}
body.v151-ui #view .member-v15-journey-chevron svg,
body.v151-ui #view .member-v15-kta-chevron svg{
  width:22px!important;height:22px!important;
  stroke:currentColor!important;
}
body.v151-ui #view .member-v15-journey.is-collapsed .member-v15-journey-track,
body.v151-ui #view .member-v15-kta-section.is-collapsed .member-v15-kta-content{
  display:none!important;
}
body.v151-ui #view .member-v15-journey:not(.is-collapsed) .member-v15-journey-track,
body.v151-ui #view .member-v15-kta-section:not(.is-collapsed) .member-v15-kta-content{
  display:grid!important;
  margin-top:16px!important;
}
body.v151-ui #view .member-v15-journey:not(.is-collapsed) .member-v15-journey-chevron,
body.v151-ui #view .member-v15-kta-section:not(.is-collapsed) .member-v15-kta-chevron{
  transform:rotate(180deg)!important;
}

/* Bottom navigation: target elemen aktual #memberBottomNav, bukan .app.member-app. */
body.v151-ui #memberBottomNav{
  position:fixed!important;
  left:0!important;right:0!important;bottom:0!important;
  z-index:5000!important;
  pointer-events:none!important;
}
body.v151-ui #memberBottomNav .bottom-nav{
  position:fixed!important;
  left:10px!important;
  right:10px!important;
  bottom:max(9px,env(safe-area-inset-bottom))!important;
  width:auto!important;
  height:74px!important;
  padding:7px 8px!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  align-items:center!important;
  gap:4px!important;
  overflow:visible!important;
  pointer-events:auto!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:23px!important;
  background:linear-gradient(145deg,#062c55 0%,#075991 100%)!important;
  box-shadow:0 16px 34px rgba(1,31,60,.38),inset 0 1px 0 rgba(255,255,255,.15)!important;
  backdrop-filter:blur(18px) saturate(145%)!important;
}
body.v151-ui #memberBottomNav .nav-item{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  min-width:0!important;
  width:100%!important;
  height:58px!important;
  min-height:58px!important;
  margin:0!important;
  padding:5px 2px!important;
  border:0!important;
  border-radius:16px!important;
  background:transparent!important;
  color:#ffffff!important;
  box-shadow:none!important;
  filter:none!important;
}
body.v151-ui #memberBottomNav .nav-item:not(.active) .nav-icon{
  color:#7ee2ff!important;
  opacity:1!important;
  filter:drop-shadow(0 2px 4px rgba(0,31,60,.42))!important;
}
body.v151-ui #memberBottomNav .nav-item:not(.active) .nav-label{
  color:#ffffff!important;
  opacity:1!important;
  font-weight:800!important;
  text-shadow:0 1px 3px rgba(0,26,53,.55)!important;
}
body.v151-ui #memberBottomNav .nav-item.active{
  color:#fff!important;
  background:linear-gradient(145deg,#159ee4,#0872bd)!important;
  box-shadow:0 8px 17px rgba(0,75,134,.38),inset 0 1px 0 rgba(255,255,255,.26)!important;
  transform:translateY(-3px)!important;
}
body.v151-ui #memberBottomNav .nav-item.active .nav-icon{
  color:#ffe26e!important;
  opacity:1!important;
}
body.v151-ui #memberBottomNav .nav-item.active .nav-label{
  color:#fff!important;
  font-weight:900!important;
}
body.v151-ui #memberBottomNav .nav-icon{
  display:grid!important;
  place-items:center!important;
  width:27px!important;height:27px!important;
}
body.v151-ui #memberBottomNav .nav-icon svg{
  width:22px!important;height:22px!important;
  stroke:currentColor!important;
  opacity:1!important;
}
body.v151-ui #memberBottomNav .nav-label{
  display:block!important;
  font-size:10.5px!important;
  line-height:1!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
}
body.v151-ui #memberBottomNav .nav-scan-wrapper{
  position:relative!important;
  height:64px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;
  padding-bottom:3px!important;
}
body.v151-ui #memberBottomNav .nav-scan-btn{
  position:absolute!important;
  left:50%!important;top:-27px!important;
  display:grid!important;
  place-items:center!important;
  width:62px!important;height:62px!important;min-height:62px!important;
  margin:0!important;padding:0!important;
  color:#fff!important;
  border:4px solid #f4f9ff!important;
  border-radius:21px!important;
  background:linear-gradient(145deg,#2cb5f5,#087dc9 55%,#07518d)!important;
  box-shadow:0 12px 24px rgba(0,76,138,.46),inset 0 1px 0 rgba(255,255,255,.36)!important;
  transform:translateX(-50%)!important;
}
body.v151-ui #memberBottomNav .nav-scan-btn svg{
  width:27px!important;height:27px!important;
  stroke:#fff!important;
}
body.v151-ui #memberBottomNav .scan-label{
  color:#fff!important;
  font-weight:900!important;
  text-shadow:0 1px 3px rgba(0,27,55,.55)!important;
}
body.v151-ui .member-dashboard-v12,
body.v151-ui .member-dashboard-v15{
  padding-bottom:calc(112px + env(safe-area-inset-bottom))!important;
}

@media(max-width:380px){
  body.v151-ui #memberBottomNav .bottom-nav{left:6px!important;right:6px!important;padding-inline:5px!important}
  body.v151-ui #memberBottomNav .nav-label{font-size:9.5px!important}
  body.v151-ui #view .member-v15-journey,
  body.v151-ui #view .member-v15-kta-section{padding:13px 13px!important}
}


/* ============================================================================
   V15.1 STAGE 13 — FULL-COLOR MEMBER ICON SYSTEM
   Compact, vivid, duotone icons for quick access and bottom navigation.
   ============================================================================ */
body.v151-ui #view .member-v12-service-panel{
  padding:18px 14px 17px!important;
}
body.v151-ui #view .member-v12-service-panel .member-v12-section-head{
  margin-bottom:13px!important;
}
body.v151-ui #view .member-v12-service-list{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px 7px!important;
}
body.v151-ui #view .member-v12-service.member-color-service{
  position:relative!important;
  min-width:0!important;
  min-height:112px!important;
  height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  padding:8px 3px 6px!important;
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#102b45!important;
  text-align:center!important;
  overflow:visible!important;
  transition:transform .18s ease,background .18s ease!important;
}
body.v151-ui #view .member-v12-service.member-color-service:hover,
body.v151-ui #view .member-v12-service.member-color-service:focus-visible{
  transform:translateY(-3px)!important;
  background:rgba(232,244,253,.72)!important;
}
body.v151-ui #view .member-v12-service.member-color-service:active{
  transform:scale(.94)!important;
}
body.v151-ui #view .member-color-icon{
  position:relative!important;
  width:66px!important;
  height:66px!important;
  flex:0 0 66px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,#ffffff,#eef8ff)!important;
  border:1px solid rgba(196,222,239,.82)!important;
  box-shadow:0 10px 22px rgba(19,78,122,.13),inset 0 1px 0 #fff!important;
  overflow:visible!important;
}
body.v151-ui #view .member-color-icon::after{
  content:"";position:absolute;inset:auto 9px -5px;height:10px;border-radius:50%;
  background:rgba(22,94,145,.16);filter:blur(6px);z-index:-1;
}
body.v151-ui #view .member-color-icon-svg{
  width:54px!important;height:54px!important;display:block!important;
  filter:drop-shadow(0 4px 5px rgba(12,58,100,.16))!important;
  transition:transform .2s cubic-bezier(.2,.8,.2,1)!important;
}
body.v151-ui #view .member-color-service:hover .member-color-icon-svg{
  transform:translateY(-2px) rotate(-2deg) scale(1.06)!important;
}
body.v151-ui #view .member-v12-service.member-color-service .member-v12-service-copy{
  width:100%!important;min-width:0!important;display:grid!important;gap:2px!important;justify-items:center!important;
}
body.v151-ui #view .member-v12-service.member-color-service .member-v12-service-copy strong{
  color:#102b45!important;font-size:11.5px!important;line-height:1.25!important;font-weight:900!important;
  white-space:normal!important;overflow-wrap:anywhere!important;
}
body.v151-ui #view .member-v12-service.member-color-service .member-v12-service-copy small{
  color:#718397!important;font-size:8.8px!important;line-height:1.2!important;font-weight:700!important;
  white-space:normal!important;
}
body.v151-ui #view .member-v12-service.member-color-service .member-v12-service-arrow{display:none!important}

/* Full-color bottom navigation. SVGs keep their own fills instead of inheriting gray. */
body.v151-ui #memberBottomNav .bottom-nav.bottom-nav-colorful{
  background:linear-gradient(150deg,rgba(5,35,67,.98),rgba(7,82,139,.98))!important;
}
body.v151-ui #memberBottomNav .nav-item .nav-color-icon{
  width:35px!important;height:35px!important;display:grid!important;place-items:center!important;
  color:initial!important;opacity:1!important;filter:none!important;
  border-radius:12px!important;transition:transform .18s ease,filter .18s ease!important;
}
body.v151-ui #memberBottomNav .nav-item .nav-color-icon svg{
  width:34px!important;height:34px!important;display:block!important;stroke:none!important;opacity:1!important;
  filter:drop-shadow(0 3px 5px rgba(0,18,36,.28))!important;
}
body.v151-ui #memberBottomNav .nav-item:not(.active){opacity:.92!important}
body.v151-ui #memberBottomNav .nav-item:not(.active) .nav-label{
  color:#e9f6ff!important;font-weight:800!important;opacity:1!important;
}
body.v151-ui #memberBottomNav .nav-item.active{
  background:linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,.08))!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 8px 18px rgba(0,27,55,.25),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
body.v151-ui #memberBottomNav .nav-item.active .nav-color-icon{
  transform:translateY(-2px) scale(1.08)!important;
  filter:saturate(1.18) brightness(1.06)!important;
}
body.v151-ui #memberBottomNav .nav-item.active::after{
  content:"";position:absolute;left:50%;bottom:1px;width:19px;height:3px;border-radius:999px;
  background:#ffd45f;transform:translateX(-50%);box-shadow:0 0 10px rgba(255,212,95,.7);
}
body.v151-ui #memberBottomNav .nav-scan-btn{
  border-color:#f7fbff!important;
  background:linear-gradient(145deg,#ffffff,#e6f7ff)!important;
  box-shadow:0 13px 25px rgba(0,67,122,.47),inset 0 1px 0 #fff!important;
}
body.v151-ui #memberBottomNav .nav-scan-btn .member-color-icon-svg{
  width:43px!important;height:43px!important;display:block!important;stroke:none!important;
  filter:drop-shadow(0 4px 5px rgba(0,49,94,.22))!important;
}
body.v151-ui #memberBottomNav .nav-scan-btn:active .member-color-icon-svg{transform:scale(.9) rotate(-3deg)!important}

@media(max-width:430px){
  body.v151-ui #view .member-v12-service-list{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px 4px!important}
  body.v151-ui #view .member-v12-service.member-color-service{min-height:105px!important;padding-inline:1px!important}
  body.v151-ui #view .member-color-icon{width:60px!important;height:60px!important;flex-basis:60px!important;border-radius:20px!important}
  body.v151-ui #view .member-color-icon-svg{width:49px!important;height:49px!important}
  body.v151-ui #view .member-v12-service.member-color-service .member-v12-service-copy strong{font-size:10.5px!important}
  body.v151-ui #view .member-v12-service.member-color-service .member-v12-service-copy small{font-size:8px!important}
}
@media(max-width:355px){
  body.v151-ui #view .member-v12-service-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ============================================================================
   SPGI PORTAL DIGITAL V16 — FSPGI RESPONSIVE ENTERPRISE REFRESH
   Desktop member/admin layout + full-colour icon system + FSPGI branding.
   ============================================================================ */
:root{
  --fspgi-navy:#061a3a;
  --fspgi-blue:#0878d1;
  --fspgi-sky:#24b9ef;
  --fspgi-red:#df1f2d;
  --fspgi-yellow:#f6c83f;
  --fspgi-ink:#0a2741;
  --fspgi-soft:#f3f7fb;
}

/* Shared FSPGI accents */
body.v151-ui .admin-cockpit-hero,
body.v151-ui .member-hero-v10{
  isolation:isolate;
  background:
    linear-gradient(128deg,rgba(4,25,57,.98) 0%,rgba(5,72,132,.96) 58%,rgba(119,70,92,.92) 100%)!important;
}
body.v151-ui .admin-cockpit-hero::before,
body.v151-ui .member-hero-v10::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(168deg,transparent 0 67%,rgba(255,255,255,.12) 67.2% 72%,transparent 72.2%),
    linear-gradient(172deg,transparent 0 75%,rgba(223,31,45,.85) 75.2% 82%,transparent 82.2%);
  opacity:.82;
}
body.v151-ui .admin-cockpit-hero::after,
body.v151-ui .member-hero-v10::after{
  content:"";position:absolute;right:20px;top:50%;width:210px;height:210px;z-index:-1;
  transform:translateY(-50%);background:url('assets/logo-fspgi-transparent.png') center/contain no-repeat;
  opacity:.10;filter:saturate(1.15);pointer-events:none;
}

/* Admin full-colour icon treatment */
body.v151-ui .admin-color-icon-svg{display:block;width:52px!important;height:52px!important;filter:drop-shadow(0 7px 10px rgba(5,54,100,.18));transition:transform .18s ease,filter .18s ease}
body.v151-ui .admin-module-card:hover .admin-color-icon-svg,
body.v151-ui .admin-kpi-card:hover .admin-color-icon-svg{transform:translateY(-2px) scale(1.045);filter:drop-shadow(0 10px 14px rgba(5,54,100,.24))}
body.v151-ui .admin-module-icon,body.v151-ui .admin-kpi-icon{width:58px!important;height:58px!important;flex:0 0 58px!important;padding:0!important;background:transparent!important;color:inherit!important;box-shadow:none!important}
body.v151-ui .admin-module-card{min-height:122px!important;grid-template-columns:58px minmax(0,1fr) 22px!important}
body.v151-ui .admin-kpi-card{min-height:122px!important;grid-template-columns:58px minmax(0,1fr)!important}

/* Desktop and laptop: real web workspace, not stretched mobile UI */
@media (min-width: 901px){
  body.v151-ui #memberBottomNav{display:none!important}
  body.v151-ui .content{padding-bottom:34px!important}
  body.v151-ui .member-portal-v10{max-width:1440px!important;gap:15px!important;padding-bottom:30px!important}
  body.v151-ui .member-hero-v10{
    min-height:174px!important;height:auto!important;display:grid!important;
    grid-template-columns:minmax(0,1.05fr) minmax(410px,.95fr)!important;
    align-items:center!important;gap:28px!important;padding:24px 34px!important;border-radius:28px!important;
    overflow:hidden!important;box-shadow:0 20px 46px rgba(6,43,81,.22)!important;
  }
  body.v151-ui .member-hero-v10::after{width:240px;height:240px;right:28px;opacity:.09}
  body.v151-ui .member-hero-identity-v10{gap:17px!important;align-items:center!important}
  body.v151-ui .member-avatar-v10,
  body.v151-ui .member-avatar-v10 img.dashboard-avatar,
  body.v151-ui .member-avatar-v10 .dashboard-avatar-hover{width:78px!important;height:78px!important;flex-basis:78px!important;border-radius:23px!important}
  body.v151-ui .member-hero-copy-v10>span{font-size:9px!important;letter-spacing:1.55px!important}
  body.v151-ui .member-hero-copy-v10 p{margin:5px 0 1px!important;font-size:11px!important}
  body.v151-ui .member-hero-copy-v10 h2{font-size:clamp(29px,3vw,42px)!important;line-height:1!important}
  body.v151-ui .member-hero-copy-v10 small{margin-top:8px!important;font-size:12px!important;color:var(--fspgi-yellow)!important}
  body.v151-ui .member-ticket-v10{gap:12px!important;padding:17px 20px!important;border-radius:20px!important;background:rgba(2,25,52,.42)!important;max-width:none!important}
  body.v151-ui .member-ticket-number-v10 strong{font-size:18px!important}
  body.v151-ui .member-ticket-foot-v10{font-size:9.5px!important}
  body.v151-ui .member-hero-actions-v10{right:16px!important;top:15px!important;gap:7px!important}
  body.v151-ui .member-hero-actions-v10 button{width:40px!important;height:40px!important;border-radius:13px!important}

  body.v151-ui .member-glance-grid-v10{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:13px!important}
  body.v151-ui .member-glance-card-v10{min-height:98px!important;display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;align-items:center!important;padding:14px 16px!important;border-radius:20px!important}
  body.v151-ui .member-glance-card-v10>span{width:48px!important;height:48px!important;border-radius:16px!important}
  body.v151-ui .member-glance-card-v10 strong{font-size:13px!important}

  body.v151-ui .member-v15-journey,
  body.v151-ui .member-v15-kta-section{padding:0!important;min-height:74px!important;border-radius:22px!important;overflow:hidden!important}
  body.v151-ui #view button.member-v15-journey-toggle,
  body.v151-ui #view button.member-v15-kta-toggle{min-height:74px!important;padding:13px 18px!important;border-radius:21px!important;background:linear-gradient(90deg,#fff,#f7fbff)!important}
  body.v151-ui .member-v15-journey-title strong,
  body.v151-ui .member-v15-kta-title strong{font-size:18px!important;color:#102f4a!important}
  body.v151-ui .member-v15-journey-title small,
  body.v151-ui .member-v15-kta-title small{color:#c33559!important}
  body.v151-ui .member-v15-journey-title em,
  body.v151-ui .member-v15-kta-title em{color:#55718a!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

  body.v151-ui .member-v12-main-grid{grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr)!important;align-items:start!important;gap:15px!important}
  body.v151-ui .member-v12-service-panel{padding:18px!important}
  body.v151-ui .member-v12-service-list{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
  body.v151-ui .member-v12-service.member-color-service{min-height:132px!important;padding:12px 8px!important;align-items:center!important;text-align:center!important}
  body.v151-ui .member-v12-service .member-color-icon{width:70px!important;height:70px!important}
  body.v151-ui .member-v12-service .member-color-icon-svg{width:58px!important;height:58px!important}
  body.v151-ui .member-v12-service-copy{align-items:center!important;text-align:center!important}
  body.v151-ui .member-v12-service-copy strong{font-size:12px!important}

  /* Member sidebar: compact, ordered, and fully usable on desktop */
  body.v151-ui .sidebar{width:272px!important;padding:15px!important;overflow-y:auto!important;overflow-x:hidden!important}
  body.v151-ui .app{grid-template-columns:272px minmax(0,1fr)!important}
  body.v151-ui .sidebar nav{gap:4px!important}
  body.v151-ui .sidebar nav button{min-height:43px!important;height:auto!important;padding:9px 11px!important;border-radius:12px!important;font-size:11.5px!important}
  body.v151-ui .sidebar nav button svg{width:19px!important;height:19px!important;flex:0 0 19px!important;color:#8edcff!important}
  body.v151-ui .sidebar nav button.active svg,
  body.v151-ui .sidebar nav button[aria-current="page"] svg{color:#fff!important}
  body.v151-ui .sidebar .nav-group-title{margin:10px 0 4px!important;padding:0 8px!important;font-size:8.5px!important;letter-spacing:1.25px!important}
}

/* Large desktop refinement */
@media (min-width: 1200px){
  body.v151-ui .admin-cockpit-v10{max-width:1480px!important;margin:0 auto!important}
  body.v151-ui .admin-cockpit-hero{min-height:210px!important;padding:31px 36px!important;border-radius:28px!important}
  body.v151-ui .admin-cockpit-copy{max-width:820px!important}
  body.v151-ui .admin-cockpit-copy h2{font-size:clamp(31px,3vw,44px)!important}
  body.v151-ui .admin-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  body.v151-ui .admin-module-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

/* Mobile: large, vivid icons inspired by the proven app-grid proportion */
@media (max-width: 900px){
  body.v151-ui .member-v12-service-list{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px 6px!important;padding:10px 2px!important}
  body.v151-ui .member-v12-service.member-color-service{min-height:102px!important;padding:2px!important;border:0!important;background:transparent!important;box-shadow:none!important;align-items:center!important;text-align:center!important}
  body.v151-ui .member-v12-service .member-color-icon{width:70px!important;height:70px!important;border-radius:23px!important}
  body.v151-ui .member-v12-service .member-color-icon-svg{width:58px!important;height:58px!important}
  body.v151-ui .member-v12-service-copy{align-items:center!important;text-align:center!important}
  body.v151-ui .member-v12-service-copy strong{font-size:10.8px!important;color:#122f49!important;line-height:1.2!important}
  body.v151-ui .member-v12-service-copy small{display:none!important}
  body.v151-ui #memberBottomNav .nav-item:not(.active) .nav-label{color:#dff4ff!important;opacity:1!important}
  body.v151-ui #memberBottomNav .nav-item:not(.active) .nav-color-icon{filter:saturate(1.15) brightness(1.08)!important;opacity:1!important}
}

@media (max-width: 430px){
  body.v151-ui .member-v12-service-list{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:15px 3px!important}
  body.v151-ui .member-v12-service .member-color-icon{width:62px!important;height:62px!important}
  body.v151-ui .member-v12-service .member-color-icon-svg{width:53px!important;height:53px!important}
  body.v151-ui .member-v12-service-copy strong{font-size:9.8px!important}
}


/* ============================================================================
   V16.1 STAGE 17 — MEMBER HERO, PROFILE ICONS, LOGIN SPACING, REPORT GRID FIX
   ============================================================================ */

/* Desktop hero: reserve a clean action lane so status never sits under buttons. */
@media (min-width:901px){
  body.v151-ui .member-hero-v10{
    grid-template-columns:minmax(320px,.9fr) minmax(460px,1.1fr)!important;
    padding-right:28px!important;
  }
  body.v151-ui .member-ticket-v10{
    position:relative!important;
    padding:22px 118px 20px 24px!important;
    min-height:138px!important;
  }
  body.v151-ui .member-ticket-head-v10{
    align-items:flex-start!important;
  }
  body.v151-ui .member-ticket-head-v10 .member-v12-status{
    position:absolute!important;
    top:20px!important;
    right:20px!important;
    margin:0!important;
    max-width:92px!important;
  }
  body.v151-ui .member-hero-actions-v10{
    top:18px!important;
    right:18px!important;
    flex-direction:column!important;
    gap:8px!important;
    transform:translateX(0)!important;
  }
  body.v151-ui .member-hero-actions-v10 button{
    width:42px!important;height:42px!important;flex:0 0 42px!important;
  }
  body.v151-ui .member-ticket-foot-v10{
    padding-right:0!important;
    align-items:flex-end!important;
  }
}

/* Mobile login branding: create breathing room between logos and organisation name. */
@media (max-width:900px){
  #loginPage .login-brand-panel-v136 .login-logo-container,
  #loginPage .login-logo-container,
  #loginPage .login-logo-row{
    margin:0 0 18px!important;
    padding-bottom:2px!important;
    gap:14px!important;
  }
  #loginPage .login-brand-group{gap:9px!important}
  #loginPage .login-brand-group h1,
  #loginPage .login-brand-group h2{margin-top:2px!important}
}

/* Member profile menu — large, vivid full-colour icons and balanced cards. */
body.v151-ui .member-profile-menu-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
}
body.v151-ui #view button.member-profile-menu-card{
  min-width:0!important;
  min-height:156px!important;
  display:grid!important;
  grid-template-columns:1fr 22px!important;
  grid-template-rows:66px auto auto!important;
  align-items:center!important;
  justify-items:center!important;
  gap:4px 8px!important;
  padding:14px 12px!important;
  overflow:hidden!important;
  text-align:center!important;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%)!important;
  border:1px solid #d9e5ef!important;
  border-radius:20px!important;
  box-shadow:0 9px 22px rgba(20,52,84,.08)!important;
}
body.v151-ui .member-profile-menu-icon-color{
  grid-column:1/-1!important;
  width:66px!important;height:66px!important;
  display:grid!important;place-items:center!important;
  padding:0!important;border:0!important;background:transparent!important;
}
body.v151-ui .member-profile-menu-icon-color .member-color-icon-svg{
  width:62px!important;height:62px!important;
  filter:drop-shadow(0 7px 10px rgba(14,83,139,.18))!important;
}
body.v151-ui .member-profile-menu-title{
  grid-column:1/-1!important;
  color:#112d47!important;
  font-size:13.5px!important;font-weight:900!important;line-height:1.22!important;
  white-space:normal!important;overflow-wrap:anywhere!important;
}
body.v151-ui .member-profile-menu-note{
  grid-column:1/-1!important;
  color:#60758a!important;
  font-size:10.5px!important;line-height:1.35!important;
  white-space:normal!important;overflow-wrap:anywhere!important;
}
body.v151-ui .member-profile-menu-arrow{
  position:absolute!important;right:11px!important;top:10px!important;
  color:#1c567f!important;font-size:21px!important;
}
@media(max-width:900px){
  body.v151-ui .member-profile-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  body.v151-ui #view button.member-profile-menu-card{min-height:150px!important;padding:12px 9px!important;border-radius:18px!important}
  body.v151-ui .member-profile-menu-icon-color{width:62px!important;height:62px!important}
  body.v151-ui .member-profile-menu-icon-color .member-color-icon-svg{width:58px!important;height:58px!important}
  body.v151-ui .member-profile-menu-title{font-size:13px!important}
  body.v151-ui .member-profile-menu-note{font-size:10px!important}
}

/* Reports 1–8: stable responsive stat grid, no clipping or oversized words. */
body.v151-ui .report-mobile-surface{min-width:0!important;overflow-x:hidden!important}
body.v151-ui .report-summary-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  margin:16px 0!important;
}
body.v151-ui .report-stat-tile{
  position:relative!important;
  min-width:0!important;
  min-height:142px!important;
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  align-content:center!important;
  align-items:center!important;
  gap:4px 12px!important;
  padding:16px!important;
  overflow:hidden!important;
  border:1px solid #dce7f0!important;
  border-radius:21px!important;
  background:linear-gradient(150deg,#fff,#f7fbff)!important;
  box-shadow:0 10px 24px rgba(17,52,84,.08)!important;
}
body.v151-ui .report-stat-icon{
  grid-row:1/3!important;
  width:58px!important;height:58px!important;
  display:grid!important;place-items:center!important;
  border-radius:18px!important;
  background:#e8f5ff!important;
  color:#0878d1!important;
  overflow:hidden!important;
}
body.v151-ui .report-stat-icon svg{width:38px!important;height:38px!important}
body.v151-ui .report-stat-tile small{
  min-width:0!important;
  color:#66798d!important;
  font-size:9.5px!important;font-weight:900!important;line-height:1.28!important;
  letter-spacing:.05em!important;text-transform:uppercase!important;
  white-space:normal!important;overflow-wrap:anywhere!important;
}
body.v151-ui .report-stat-tile b{
  min-width:0!important;
  color:#0b2c49!important;
  font-size:clamp(19px,2vw,29px)!important;
  line-height:1.08!important;
  letter-spacing:-.45px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
body.v151-ui .report-stat-green .report-stat-icon{background:#e5f8ef!important;color:#168761!important}
body.v151-ui .report-stat-purple .report-stat-icon{background:#f2eaff!important;color:#7a42c4!important}
body.v151-ui .report-stat-orange .report-stat-icon{background:#fff0df!important;color:#c96b14!important}
body.v151-ui .report-stat-cyan .report-stat-icon{background:#e3f8fb!important;color:#087e96!important}
body.v151-ui .report-actions-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
body.v151-ui .report-actions-row button{width:100%!important;min-width:0!important}

@media(max-width:900px){
  body.v151-ui .report-control-v2{padding:15px!important;border-radius:20px!important}
  body.v151-ui .report-toolbar-top{display:grid!important;grid-template-columns:1fr!important;gap:13px!important}
  body.v151-ui .report-type-field,body.v151-ui .report-type-field select{width:100%!important;max-width:100%!important;min-width:0!important}
  body.v151-ui .report-actions-row{grid-template-columns:1fr!important;gap:9px!important}
  body.v151-ui .report-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body.v151-ui .report-stat-tile{
    min-height:132px!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    padding:13px 11px!important;gap:4px 9px!important;border-radius:18px!important;
  }
  body.v151-ui .report-stat-icon{width:52px!important;height:52px!important;border-radius:16px!important}
  body.v151-ui .report-stat-icon svg{width:34px!important;height:34px!important}
  body.v151-ui .report-stat-tile small{font-size:8.4px!important;letter-spacing:.025em!important}
  body.v151-ui .report-stat-tile b{font-size:clamp(17px,5.1vw,24px)!important}
  body.v151-ui .report-mobile-surface .grid.two{grid-template-columns:1fr!important}
  body.v151-ui .report-mobile-surface .card{min-width:0!important;overflow:hidden!important}
}
@media(max-width:370px){
  body.v151-ui .report-summary-grid{grid-template-columns:1fr!important}
  body.v151-ui .report-stat-tile{min-height:112px!important}
}


/* ============================================================================
   V16.1 STAGE 18 — DESKTOP MEMBER GREETING + COMPACT THEME DROPDOWN
   ============================================================================ */

/* Theme mode is now a single compact dropdown instead of three large buttons. */
body.v151-ui .theme-mode-select-wrap,
body.v151-ui .topbar-theme-select-wrap{display:block;min-width:0}
body.v151-ui .theme-mode-select,
body.v151-ui .topbar-theme-select{
  width:100%;min-height:42px;padding:0 38px 0 13px;border:1px solid rgba(255,255,255,.14);
  border-radius:12px;background:rgba(255,255,255,.075);color:#eef7ff;font-size:11px;font-weight:800;
  appearance:auto;box-shadow:none;cursor:pointer
}
body.v151-ui .theme-mode-select option{color:#10243c;background:#fff}
body.v151-ui .topbar-theme-select{
  width:108px;min-height:40px;border-color:#d4e1ed;background:#fff;color:#173a61;font-size:11px
}
body.v151-ui .sidebar-mode-card{padding:12px!important}
body.v151-ui .sidebar-mode-heading{margin-bottom:9px!important}
body.v151-ui .theme-mode-options{display:none!important}
body.v151-ui .topbar-theme-switch{display:none!important}

@media (min-width:901px){
  /* The large KTA status ticket is redundant on desktop; summary cards below retain the data. */
  body.v151-ui .member-hero-v10{
    min-height:154px!important;
    grid-template-columns:minmax(300px,.74fr) minmax(420px,1.26fr)!important;
    padding:23px 92px 23px 30px!important;
    gap:30px!important;
  }
  body.v151-ui .member-ticket-v10{display:none!important}
  body.v151-ui .member-desktop-welcome-v18{
    min-width:0;display:grid;align-content:center;gap:5px;padding:8px 0 8px 28px;
    border-left:1px solid rgba(255,255,255,.22);color:#fff
  }
  body.v151-ui .member-desktop-welcome-v18>span{
    color:#ffd46a;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase
  }
  body.v151-ui .member-desktop-welcome-v18>strong{
    color:#fff;font-size:clamp(20px,2vw,29px);font-weight:930;line-height:1.13;letter-spacing:-.45px
  }
  body.v151-ui .member-desktop-welcome-v18>p{
    max-width:720px;margin:0!important;color:#d3e5f2!important;font-size:11.5px!important;line-height:1.55!important
  }
  body.v151-ui .member-hero-actions-v10{
    top:50%!important;right:22px!important;transform:translateY(-50%)!important;gap:9px!important
  }
}

@media (max-width:900px){
  body.v151-ui .member-desktop-welcome-v18{display:none!important}
  body.v151-ui .topbar-theme-select{width:92px;min-height:38px;font-size:10px}
}

/* ============================================================================
   V16.2 STAGE19 — FULL-COLOR ICON AUDIT
   Semua ikon navigasi utama menggunakan SVG full-color yang sesuai fungsi.
   ============================================================================ */
body.v151-ui .sidebar .nav-ic-fullcolor{
  width:24px!important;height:24px!important;min-width:24px!important;display:grid!important;place-items:center!important;
  color:inherit!important;filter:none!important;opacity:1!important;
}
body.v151-ui .sidebar .nav-ic-fullcolor .admin-color-icon-svg{
  width:22px!important;height:22px!important;display:block!important;overflow:visible!important;
}
body.v151-ui .sidebar nav button,
body.v151-ui .sidebar .menu-group-head{
  grid-template-columns:26px minmax(0,1fr) 18px!important;align-items:center!important;
}
body.v151-ui .sidebar nav button .nav-ic,
body.v151-ui .sidebar .menu-group-head .nav-ic{margin:0!important}
body.v151-ui .sidebar nav button.active .admin-color-icon-svg,
body.v151-ui .sidebar nav button:hover .admin-color-icon-svg,
body.v151-ui .sidebar .menu-group-head:hover .admin-color-icon-svg{transform:scale(1.07);filter:saturate(1.12)}
body.v151-ui .sidebar .admin-color-icon-svg{transition:transform .18s ease,filter .18s ease}

.member-glance-card-v10>span.member-color-icon{
  width:52px!important;height:52px!important;display:grid!important;place-items:center!important;
  border-radius:17px!important;background:transparent!important;box-shadow:none!important;
}
.member-glance-card-v10>span.member-color-icon svg{width:46px!important;height:46px!important}
.member-profile-menu-icon-color{background:transparent!important;box-shadow:none!important}
.member-profile-menu-icon-color svg{width:54px!important;height:54px!important;filter:drop-shadow(0 7px 10px rgba(16,66,108,.16))}
.member-notification-btn .member-color-icon-svg,.member-logout-v10 .member-color-icon-svg{width:27px!important;height:27px!important}
.member-hero-actions-v10 button{overflow:visible!important}

@media(max-width:900px){
  .member-glance-card-v10>span.member-color-icon{width:46px!important;height:46px!important}
  .member-glance-card-v10>span.member-color-icon svg{width:42px!important;height:42px!important}
  .member-profile-menu-icon-color svg{width:56px!important;height:56px!important}
}

/* ============================================================================
   V16.3 STAGE20 — FSPGI LOGIN BRAND IDENTITY + FULL-COLOR LOGIN ICONS
   ============================================================================ */
#loginPage .login-brand-panel-v136{
  position:relative!important;
  background:
    radial-gradient(circle at 84% 14%,rgba(255,255,255,.14),transparent 23%),
    radial-gradient(circle at 19% 17%,rgba(255,208,45,.14),transparent 20%),
    linear-gradient(145deg,#061b3d 0%,#0b4f92 54%,#163b72 72%,#a51f36 100%)!important;
}
#loginPage .login-brand-panel-v136::before{
  content:""!important;display:block!important;position:absolute!important;inset:0!important;
  background:
    linear-gradient(168deg,transparent 0 64%,rgba(255,255,255,.12) 64.4% 67%,transparent 67.4%),
    linear-gradient(171deg,transparent 0 70%,rgba(229,28,50,.92) 70.2% 76%,transparent 76.2%),
    url('assets/logo-fspgi-transparent.png') 112% 52%/54% auto no-repeat!important;
  opacity:.22!important;pointer-events:none!important;border:0!important;box-shadow:none!important;
}
#loginPage .login-brand-panel-v136>*{position:relative;z-index:2}
#loginPage .login-logo-container-v20{
  width:max-content!important;max-width:100%!important;padding:11px 14px!important;gap:13px!important;
  border:1px solid rgba(255,255,255,.22)!important;border-radius:20px!important;
  background:rgba(3,22,47,.26)!important;box-shadow:0 13px 30px rgba(0,0,0,.16)!important;
  backdrop-filter:blur(11px)!important;
}
#loginPage .login-logo-container-v20 img{
  width:74px!important;height:74px!important;max-width:74px!important;max-height:74px!important;
  object-fit:contain!important;padding:7px!important;border-radius:17px!important;background:#fff!important;
}
#loginPage .login-logo-container-v20 img:first-child{object-fit:contain!important}
#loginPage .login-logo-container-v20 .login-logo-separator{height:43px!important;background:rgba(255,255,255,.34)!important}
#loginPage .login-brand-group-v20{margin-top:24px!important}
#loginPage .login-brand-group-v20 h1{max-width:600px!important;color:#fff!important;text-shadow:0 3px 14px rgba(0,0,0,.22)!important}
#loginPage .login-brand-group-v20 p{color:#ffe0e7!important;font-weight:750!important}
#loginPage .login-kicker{background:#e42339!important;color:#fff!important;border-color:rgba(255,255,255,.24)!important;box-shadow:0 7px 16px rgba(170,22,45,.22)!important}

#loginPage .login-color-icon{
  width:38px!important;height:38px!important;left:9px!important;border-radius:11px!important;
  display:grid!important;place-items:center!important;background:transparent!important;box-shadow:none!important;
}
#loginPage .login-color-icon svg{width:34px!important;height:34px!important;filter:drop-shadow(0 5px 8px rgba(21,72,117,.14))}
#loginPage .login-card-v135 input[type="text"],
#loginPage .login-card-v135 input[type="email"],
#loginPage .login-card-v135 input[type="password"],
#loginPage .password-wrapper.login-input-shell input{padding-left:56px!important}

#loginPage .login-primary-v135,
#loginPage .login-card-v135 .btn-activation,
#loginPage .login-card-v135 .btn-magic-login,
#loginPage .login-card-v135 .btn-forgot-password{
  display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;
}
#loginPage .login-action-icon{width:30px;height:30px;min-width:30px;display:grid;place-items:center}
#loginPage .login-action-icon svg{width:28px;height:28px;display:block;filter:drop-shadow(0 4px 7px rgba(15,69,112,.13))}
#loginPage .login-primary-v135 .login-action-icon{width:31px;height:31px}
#loginPage .login-register-v135 .login-action-icon{width:32px;height:32px}
#loginPage .login-primary-v135>span:last-child,
#loginPage .login-card-v135 .btn-activation>span:last-child,
#loginPage .login-card-v135 .btn-magic-login>span:last-child,
#loginPage .login-card-v135 .btn-forgot-password>span:last-child{min-width:0}

@media(max-width:900px){
  #loginPage .login-brand-panel-v136{min-height:244px!important;padding:17px 16px 23px!important}
  #loginPage .login-logo-container-v20{margin-bottom:14px!important;padding:8px 10px!important;gap:9px!important;border-radius:17px!important}
  #loginPage .login-logo-container-v20 img{width:58px!important;height:58px!important;max-width:58px!important;max-height:58px!important;padding:5px!important;border-radius:14px!important}
  #loginPage .login-logo-container-v20 .login-logo-separator{height:35px!important}
  #loginPage .login-brand-group-v20{margin-top:8px!important;gap:6px!important}
  #loginPage .login-brand-group-v20 h1{font-size:clamp(17px,5vw,22px)!important;line-height:1.17!important}
  #loginPage .login-brand-group-v20 p{font-size:11px!important;line-height:1.35!important}
  #loginPage .login-brand-panel-v136::before{background-size:auto,auto,68% auto!important;background-position:center,right bottom,right 25%!important;opacity:.19!important}
  #loginPage .login-color-icon{width:34px!important;height:34px!important;left:8px!important}
  #loginPage .login-color-icon svg{width:31px!important;height:31px!important}
  #loginPage .login-card-v135 input[type="text"],#loginPage .login-card-v135 input[type="email"],#loginPage .login-card-v135 input[type="password"],#loginPage .password-wrapper.login-input-shell input{padding-left:51px!important}
  #loginPage .login-action-icon{width:27px;height:27px;min-width:27px}
  #loginPage .login-action-icon svg{width:26px;height:26px}
}


/* ============================================================================
   V16.4 STAGE21 — HERO ACTION POSITION, FULL-COLOR PASSWORD/LOGOUT,
   AND MOBILE LOGIN HEADER CONTAINMENT
   ============================================================================ */

/* Desktop: action icons stay in a reserved top-right area and never cover copy. */
@media (min-width:901px){
  body.v151-ui .member-hero-v10{
    position:relative!important;
    padding:25px 142px 25px 30px!important;
    overflow:hidden!important;
  }
  body.v151-ui .member-hero-actions-v10{
    top:18px!important;
    right:18px!important;
    bottom:auto!important;
    transform:none!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:9px!important;
    padding:0!important;
  }
  body.v151-ui .member-hero-actions-v10 button{
    position:relative!important;
    width:44px!important;
    height:44px!important;
    flex:0 0 44px!important;
  }
  body.v151-ui .member-desktop-welcome-v18{
    max-width:min(760px,100%)!important;
    padding-right:8px!important;
  }
  body.v151-ui .member-desktop-welcome-v18>p{
    max-width:650px!important;
    padding-right:0!important;
  }
}

/* All password visibility controls use a clear full-color visual. */
.password-eye-color,
.password-eye-fullcolor{
  width:31px!important;
  height:31px!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 31px!important;
  filter:drop-shadow(0 5px 8px rgba(20,73,119,.16))!important;
}
.password-eye-color svg,
.password-eye-fullcolor{width:31px!important;height:31px!important}
.password-toggle-v135{
  width:40px!important;
  height:40px!important;
  padding:4px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.password-wrapper>span[onclick*="togglePasswordVisibility"]{
  width:38px!important;
  height:38px!important;
  right:8px!important;
  color:transparent!important;
}
.password-wrapper input{padding-right:52px!important}

/* Full-color logout for admin sidebar and logout buttons inside pages. */
body.v151-ui .sidebar .logout{
  display:grid!important;
  grid-template-columns:32px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
}
body.v151-ui .sidebar .logout .admin-logout-fullcolor{
  width:30px!important;
  height:30px!important;
  display:block!important;
  filter:drop-shadow(0 5px 8px rgba(177,25,59,.22))!important;
}
.app-logout-fullcolor{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  background:linear-gradient(135deg,#dc2626,#991b1b)!important;
  color:#ffffff!important;
}
.app-logout-fullcolor span{
  color:#ffffff!important;
  font-weight:800!important;
}
.app-logout-fullcolor .member-color-icon-svg{width:28px!important;height:28px!important}

/* Mobile login: logos sit lower and all FSPGI gradients/watermarks remain clipped to header. */
#loginPage .login-brand-panel-v136{
  overflow:hidden!important;
  isolation:isolate!important;
}
#loginPage .login-brand-panel-v136::before{
  inset:0!important;
  border-radius:inherit!important;
  overflow:hidden!important;
  clip-path:inset(0 round 0)!important;
}
#loginPage .login-access-panel-v136{
  position:relative!important;
  z-index:3!important;
  background:#fff!important;
}
@media(max-width:900px){
  #loginPage .login-brand-panel-v136{
    min-height:270px!important;
    padding:34px 16px 25px!important;
    justify-content:flex-start!important;
  }
  #loginPage .login-logo-container-v20{
    margin-top:0!important;
    margin-bottom:17px!important;
  }
  #loginPage .login-brand-panel-v136::before{
    background-size:auto,auto,62% auto!important;
    background-position:center,right bottom,108% 38%!important;
    opacity:.18!important;
  }
}
@media(max-width:420px){
  #loginPage .login-brand-panel-v136{
    min-height:258px!important;
    padding-top:30px!important;
  }
}

/* ============================================================================
   V16.5 STAGE22 — CONSISTENT MEMBER GREETING ON MOBILE
   Header anggota HP mengikuti pola desktop: tanggal/waktu, sapaan, dan ringkasan.
   ============================================================================ */
.member-mobile-welcome-v22{display:none}

@media(max-width:900px){
  body.v151-ui .member-hero-v10{
    min-height:190px!important;
    display:block!important;
    position:relative!important;
    padding:27px 78px 25px 20px!important;
    border-radius:25px!important;
    overflow:hidden!important;
  }
  body.v151-ui .member-hero-identity-v10,
  body.v151-ui .member-ticket-v10{
    display:none!important;
  }
  body.v151-ui .member-mobile-welcome-v22{
    position:relative!important;
    z-index:2!important;
    display:grid!important;
    align-content:center!important;
    gap:7px!important;
    min-height:136px!important;
    max-width:100%!important;
    color:#fff!important;
  }
  body.v151-ui .member-mobile-welcome-v22>span{
    display:block!important;
    max-width:100%!important;
    color:#ffd36a!important;
    font-size:9.5px!important;
    line-height:1.35!important;
    font-weight:950!important;
    letter-spacing:.065em!important;
    text-transform:uppercase!important;
    overflow-wrap:anywhere!important;
  }
  body.v151-ui .member-mobile-welcome-v22>strong{
    display:block!important;
    max-width:100%!important;
    color:#fff!important;
    font-size:clamp(24px,7vw,31px)!important;
    line-height:1.12!important;
    font-weight:950!important;
    letter-spacing:-.55px!important;
    overflow-wrap:anywhere!important;
  }
  body.v151-ui .member-mobile-welcome-v22>p{
    max-width:310px!important;
    margin:0!important;
    color:#d7e8f4!important;
    font-size:11px!important;
    line-height:1.48!important;
  }
  body.v151-ui .member-hero-actions-v10{
    top:17px!important;
    right:13px!important;
    bottom:auto!important;
    transform:none!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  body.v151-ui .member-hero-actions-v10 button{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    flex:0 0 42px!important;
    border-radius:14px!important;
  }
}

@media(max-width:420px){
  body.v151-ui .member-hero-v10{
    min-height:181px!important;
    padding:24px 67px 22px 17px!important;
  }
  body.v151-ui .member-mobile-welcome-v22{min-height:132px!important;gap:6px!important}
  body.v151-ui .member-mobile-welcome-v22>span{font-size:8.7px!important;letter-spacing:.045em!important}
  body.v151-ui .member-mobile-welcome-v22>strong{font-size:clamp(22px,7vw,28px)!important}
  body.v151-ui .member-mobile-welcome-v22>p{font-size:10.4px!important;line-height:1.43!important}
  body.v151-ui .member-hero-actions-v10{right:10px!important;top:14px!important}
  body.v151-ui .member-hero-actions-v10 button{width:39px!important;height:39px!important;min-width:39px!important}
}

/* ============================================================================
   V16.7 STAGE24 — DESKTOP LOGIN HEADER GRADIENT UNIFICATION
   Membuat panel branding desktop menyatu, tanpa potongan gambar/gradien kasar.
   ============================================================================ */
@media (min-width:901px){
  #loginPage .login-brand-panel-v136{
    isolation:isolate!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 18% 16%,rgba(24,181,221,.24) 0,rgba(24,181,221,0) 31%),
      radial-gradient(circle at 88% 14%,rgba(255,208,45,.13) 0,rgba(255,208,45,0) 24%),
      radial-gradient(circle at 82% 86%,rgba(218,30,55,.30) 0,rgba(218,30,55,0) 38%),
      linear-gradient(138deg,#04162f 0%,#073866 42%,#0c6595 69%,#7b304f 100%)!important;
  }

  #loginPage .login-brand-panel-v136::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    opacity:1!important;
    border:0!important;
    box-shadow:none!important;
    pointer-events:none!important;
    background:
      url('assets/logo-fspgi-transparent.png') calc(100% - 34px) 52%/min(46%,430px) auto no-repeat,
      radial-gradient(ellipse at 88% 52%,rgba(255,255,255,.11),rgba(255,255,255,0) 52%)!important;
    filter:none!important;
    transform:none!important;
  }

  #loginPage .login-brand-panel-v136::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:-8%!important;
    right:-8%!important;
    bottom:-2px!important;
    height:31%!important;
    z-index:1!important;
    pointer-events:none!important;
    opacity:.96!important;
    background:
      linear-gradient(174deg,transparent 0 24%,rgba(255,255,255,.15) 24.5% 38%,transparent 38.5%),
      linear-gradient(176deg,transparent 0 49%,rgba(229,28,50,.94) 49.5% 70%,rgba(164,20,46,.88) 70.5% 82%,transparent 82.5%)!important;
    transform:none!important;
  }

  #loginPage .login-brand-panel-v136>*{
    position:relative!important;
    z-index:2!important;
  }

  #loginPage .login-logo-container-v20{
    background:rgba(3,22,47,.34)!important;
    border-color:rgba(255,255,255,.24)!important;
    box-shadow:0 16px 34px rgba(0,0,0,.18)!important;
  }
}

/* ============================================================================
   V16.8 STAGE25 — DESKTOP COPY SAFETY + CLEAN LOGIN BRAND PANEL
   - Member desktop copy receives a dedicated safe column.
   - Login logos use their native transparent PNGs without white tiles.
   - Decorative red ribbon is simplified into one contained accent wave.
   ============================================================================ */

@media (min-width:901px){
  /* Keep all greeting text inside the hero and away from action buttons. */
  body.v151-ui .member-hero-v10{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1fr)!important;
    padding:28px 150px 28px 34px!important;
    overflow:hidden!important;
  }
  body.v151-ui .member-hero-identity-v10,
  body.v151-ui .member-ticket-v10{display:none!important}
  body.v151-ui .member-desktop-welcome-v18{
    width:100%!important;
    max-width:920px!important;
    min-width:0!important;
    padding:4px 0!important;
    border-left:0!important;
    overflow:visible!important;
  }
  body.v151-ui .member-desktop-welcome-v18>span,
  body.v151-ui .member-desktop-welcome-v18>strong,
  body.v151-ui .member-desktop-welcome-v18>p{
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
  }
  body.v151-ui .member-desktop-welcome-v18>p{
    width:min(760px,100%)!important;
    padding-right:0!important;
  }
  body.v151-ui .member-hero-actions-v10{
    top:22px!important;
    right:24px!important;
    transform:none!important;
    z-index:8!important;
  }
  body.v151-ui .member-glance-grid-v10{
    width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }
  body.v151-ui .member-glance-card-v10{
    min-width:0!important;
    overflow:hidden!important;
  }
  body.v151-ui .member-glance-card-v10 div,
  body.v151-ui .member-glance-card-v10 small,
  body.v151-ui .member-glance-card-v10 strong{
    min-width:0!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    white-space:normal!important;
  }

  /* One unified desktop login composition. */
  #loginPage .login-brand-panel-v136{
    isolation:isolate!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 18% 13%,rgba(36,188,226,.25),transparent 31%),
      radial-gradient(circle at 84% 17%,rgba(255,210,65,.10),transparent 24%),
      radial-gradient(circle at 91% 88%,rgba(205,35,58,.24),transparent 36%),
      linear-gradient(138deg,#04152f 0%,#07375f 42%,#0a6591 72%,#522843 100%)!important;
  }
  #loginPage .login-brand-panel-v136::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    opacity:.105!important;
    background:url('assets/logo-fspgi-transparent.png') 93% 52%/min(44%,410px) auto no-repeat!important;
    filter:none!important;
    transform:none!important;
    pointer-events:none!important;
  }
  #loginPage .login-brand-panel-v136::after{
    content:""!important;
    position:absolute!important;
    left:-4%!important;
    right:-4%!important;
    bottom:-1px!important;
    height:118px!important;
    z-index:1!important;
    opacity:.9!important;
    background:linear-gradient(174deg,
      transparent 0 43%,
      rgba(255,255,255,.12) 43.5% 53%,
      rgba(215,31,52,.90) 53.5% 69%,
      rgba(144,22,48,.72) 69.5% 76%,
      transparent 76.5%)!important;
    transform:none!important;
    pointer-events:none!important;
  }
  #loginPage .login-brand-panel-v136>*{
    position:relative!important;
    z-index:2!important;
  }
  #loginPage .login-logo-container-v20{
    padding:8px 10px!important;
    gap:14px!important;
    background:rgba(2,22,47,.24)!important;
    border:1px solid rgba(255,255,255,.20)!important;
    border-radius:20px!important;
    box-shadow:0 14px 34px rgba(0,0,0,.15)!important;
    backdrop-filter:blur(9px)!important;
  }
  #loginPage .login-logo-container-v20 img{
    width:82px!important;
    height:82px!important;
    max-width:82px!important;
    max-height:82px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    object-fit:contain!important;
    filter:drop-shadow(0 9px 16px rgba(0,0,0,.20))!important;
  }
  #loginPage .login-logo-container-v20 .login-logo-separator{
    width:1px!important;
    height:52px!important;
    background:rgba(255,255,255,.28)!important;
  }
  #loginPage .login-brand-group-v20{
    margin-top:20px!important;
    max-width:610px!important;
  }
  #loginPage .login-brand-group-v20 h1,
  #loginPage .login-brand-group-v20 p{
    max-width:610px!important;
    overflow-wrap:anywhere!important;
  }
}

/* ============================================================================
   V16.9 STAGE26 — HERO ACTION BOUNDS + REPORT/KTA PHOTO PRECISION
   ============================================================================ */
body.v151-ui .member-hero-v10{position:relative!important;overflow:hidden!important}
body.v151-ui .member-hero-actions-v10{box-sizing:border-box!important;max-width:calc(100% - 24px)!important}
@media (max-width:900px){
  body.v151-ui .member-hero-v10{padding-right:72px!important}
  body.v151-ui .member-hero-actions-v10{position:absolute!important;top:12px!important;right:12px!important;left:auto!important;bottom:auto!important;transform:none!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important;z-index:12!important}
  body.v151-ui .member-hero-actions-v10 button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;margin:0!important;transform:none!important}
}
@media (min-width:901px){
  body.v151-ui .member-hero-v10{padding-right:132px!important}
  body.v151-ui .member-hero-actions-v10{position:absolute!important;top:22px!important;right:24px!important;left:auto!important;bottom:auto!important;transform:none!important;display:flex!important;flex-direction:row!important;gap:10px!important;z-index:12!important}
}
.rev50-card.rev50-portrait .rev50-portrait-photo-v3 img{width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center top!important;background:#fff!important;display:block!important}

/* ============================================================================
   V16.10 STAGE 27 — DESKTOP MEMBER HERO REMOVAL + SUMMARY GRID STABILIZATION
   Desktop/laptop only. Mobile hero remains unchanged.
   ============================================================================ */
@media (min-width: 901px){
  /* User requested the desktop hero to be removed entirely. */
  body.v151-ui .member-portal-v10 > .member-hero-v10,
  body.v151-ui .member-dashboard-v15 > .member-hero-v10,
  body.v151-ui .member-hero-v10{
    display:none!important;
  }

  /* Keep the member workspace inside the visible content column. */
  body.v151-ui .member-portal-v10,
  body.v151-ui .member-dashboard-v15{
    width:100%!important;
    max-width:1420px!important;
    min-width:0!important;
    margin:0 auto!important;
    padding:0 0 42px!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  /* Stable desktop summary grid — no negative translation or clipping. */
  body.v151-ui .member-glance-grid-v10{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0 0 18px!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:14px!important;
    transform:none!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  body.v151-ui .member-glance-card-v10{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:112px!important;
    margin:0!important;
    padding:17px 18px!important;
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr)!important;
    align-items:center!important;
    gap:14px!important;
    overflow:hidden!important;
    transform:none!important;
    box-sizing:border-box!important;
  }

  body.v151-ui .member-glance-card-v10 > span.member-color-icon{
    position:static!important;
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    flex:0 0 54px!important;
    margin:0!important;
    transform:none!important;
    align-self:center!important;
  }

  body.v151-ui .member-glance-card-v10 > div{
    position:static!important;
    display:grid!important;
    gap:5px!important;
    min-width:0!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    transform:none!important;
  }

  body.v151-ui .member-glance-card-v10 small,
  body.v151-ui .member-glance-card-v10 strong{
    position:static!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    text-overflow:clip!important;
    transform:none!important;
  }

  body.v151-ui .member-glance-card-v10 small{
    font-size:10px!important;
    line-height:1.25!important;
    letter-spacing:.055em!important;
  }

  body.v151-ui .member-glance-card-v10 strong{
    font-size:15px!important;
    line-height:1.32!important;
  }
}

@media (min-width:901px) and (max-width:1199px){
  body.v151-ui .member-glance-grid-v10{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}


/* ============================================================================
   V16.11 STAGE 28 — MEMBER DESKTOP TOPBAR + MOBILE LOGOUT IN PROFILE
   ============================================================================ */

/* Desktop/laptop: dashboard anggota memakai topbar yang sama seperti admin.
   Hanya notifikasi dan pilihan mode yang ditampilkan sebagai aksi. */
@media (min-width: 901px){
  body.v151-ui .app.member-app .topbar{
    display:flex!important;
    position:sticky!important;
    top:0!important;
    z-index:1200!important;
    min-height:82px!important;
    margin:0 -28px 22px!important;
    padding:14px 28px!important;
    align-items:center!important;
    justify-content:space-between!important;
    background:rgba(247,250,253,.94)!important;
    border-bottom:1px solid rgba(199,215,229,.88)!important;
    box-shadow:0 7px 24px rgba(20,52,84,.06)!important;
    backdrop-filter:blur(18px) saturate(140%)!important;
  }
  body.v151-ui .app.member-app .topbar .topbar-heading{
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
  }
  body.v151-ui .app.member-app .topbar .menu-toggle{
    display:none!important;
  }
  body.v151-ui .app.member-app .topbar .topbar-title-stack{
    min-width:0!important;
  }
  body.v151-ui .app.member-app .topbar .v151-topbar-kicker{
    display:block!important;
    color:#718198!important;
  }
  body.v151-ui .app.member-app .topbar #pageTitle{
    margin:2px 0 0!important;
    color:#0a1d33!important;
    font-size:25px!important;
    line-height:1.15!important;
  }
  body.v151-ui .app.member-app .topbar #dashboardGreeting{
    margin:4px 0 0!important;
    color:#6f8094!important;
    font-size:11px!important;
    line-height:1.35!important;
  }
  body.v151-ui .app.member-app .topbar .topbar-actions{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    flex:0 0 auto!important;
  }
  body.v151-ui .app.member-app .topbar #notificationShell{
    display:block!important;
  }
  body.v151-ui .app.member-app .topbar #notificationShell.hidden{
    display:none!important;
  }
  body.v151-ui .app.member-app .topbar .notification-button,
  body.v151-ui .app.member-app .topbar .topbar-theme-select{
    min-height:42px!important;
    height:42px!important;
    border-radius:13px!important;
  }
  body.v151-ui .app.member-app .topbar .notification-button{
    width:44px!important;
    padding:0!important;
  }
  body.v151-ui .app.member-app .topbar .topbar-theme-select-wrap{
    display:block!important;
  }
  body.v151-ui .app.member-app .topbar .topbar-theme-select{
    min-width:112px!important;
    padding:0 34px 0 13px!important;
    color:#173a61!important;
    background:#fff!important;
    border:1px solid #d5e1ec!important;
    box-shadow:0 6px 16px rgba(20,52,84,.06)!important;
    font-size:11px!important;
    font-weight:850!important;
  }
  body.v151-ui .app.member-app .topbar .topbar-refresh-button{
    display:none!important;
  }
  /* Hero desktop tetap tidak ditampilkan; topbar menjadi header utama. */
  body.v151-ui .app.member-app .member-hero-v10{
    display:none!important;
  }
  body.v151-ui .member-profile-logout-card{
    display:none!important;
  }
}

/* HP/tablet kecil: logout tidak lagi berada di hero. */
@media (max-width: 900px){
  body.v151-ui .member-hero-v10 .member-logout-v10{
    display:none!important;
  }
  body.v151-ui .member-hero-v10 .member-hero-actions-v10{
    right:13px!important;
    top:13px!important;
    display:flex!important;
    justify-content:flex-end!important;
    width:auto!important;
  }
  body.v151-ui .member-hero-v10 .member-notification-btn{
    display:grid!important;
  }
  body.v151-ui .member-profile-logout-card{
    display:grid!important;
    border-color:#f2cfd4!important;
    background:linear-gradient(150deg,#fff,#fff7f8)!important;
  }
  body.v151-ui .member-profile-logout-card .member-profile-menu-title{
    color:#b82035!important;
  }
  body.v151-ui .member-profile-logout-card .member-profile-menu-note{
    color:#7d5960!important;
  }
}


/* ============================================================================
   V16.12 STAGE 29 — HARD OVERRIDE MEMBER DESKTOP TOPBAR
   Fixes conflicting inline rules from earlier stages.
   ============================================================================ */
@media (min-width:901px){
  html body.v151-ui #app.app.member-app .topbar{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
  }
  html body.v151-ui #app.app.member-app.member-dashboard-home .topbar-actions #notificationShell,
  html body.v151-ui #app.app.member-app.member-dashboard-home .topbar-actions .notification-shell{
    display:inline-flex!important;
    visibility:visible!important;
    opacity:1!important;
  }
  html body.v151-ui #app.app.member-app .topbar-actions .topbar-theme-select-wrap{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }
  html body.v151-ui #app.app.member-app .topbar-actions .topbar-refresh-button,
  html body.v151-ui #app.app.member-app .topbar-actions .topbar-theme-switch{
    display:none!important;
  }
  html body.v151-ui #app.app.member-app .topbar-actions{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
  }
}
@media (max-width:900px){
  html body.v151-ui .member-hero-v10 .member-logout-v10{display:none!important}
  html body.v151-ui .member-profile-logout-card{display:grid!important}
}

/* ============================================================================
   V16.13 STAGE 30 — RESPONSIVE HEADER / LOGIN POLISH
   Final hard overrides requested from desktop + mobile screenshots.
   ============================================================================ */

/* Shared: prevent major organization titles from wrapping unexpectedly. */
.admin-cockpit-copy h2,
.admin-dynamic-puk-name,
#sidebarBrandTitle,
body.v151-ui .app.member-app .topbar #pageTitle{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

@media (min-width:901px){
  /* Member desktop uses the same operational topbar geometry as admin. */
  html body.v151-ui #app.app.member-app .topbar{
    display:flex!important;
    min-height:110px!important;
    padding:18px 30px!important;
    margin:0 -28px 26px!important;
    align-items:center!important;
    justify-content:space-between!important;
    background:rgba(248,251,254,.96)!important;
    border-bottom:1px solid #d6e2ed!important;
    box-shadow:0 8px 24px rgba(18,48,78,.055)!important;
  }
  html body.v151-ui #app.app.member-app .topbar .topbar-heading,
  html body.v151-ui #app.app.member-app .topbar .topbar-title-stack{
    min-width:0!important;
  }
  html body.v151-ui #app.app.member-app .topbar #pageTitle{
    display:block!important;
    white-space:nowrap!important;
    font-size:30px!important;
    line-height:1.18!important;
    color:#10253f!important;
    overflow:visible!important;
    text-overflow:clip!important;
    padding-bottom:4px!important;
  }
  html body.v151-ui #app.app.member-app .topbar #dashboardGreeting{
    display:block!important;
    margin-top:5px!important;
    font-size:12px!important;
    color:#65788e!important;
  }
  html body.v151-ui #app.app.member-app .topbar-actions{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
  }
  html body.v151-ui #app.app.member-app .topbar .notification-button{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    border-radius:16px!important;
  }
  html body.v151-ui #app.app.member-app .topbar .topbar-theme-select{
    min-width:132px!important;
    height:54px!important;
    border-radius:16px!important;
    font-size:12px!important;
  }
  /* Desktop member hero is intentionally removed; summary begins immediately. */
  html body.v151-ui #app.app.member-app .member-hero-v10{
    display:none!important;
  }

  /* Admin hero title and organization name stay one line on desktop. */
  body.v151-ui .admin-cockpit-copy h2{
    white-space:nowrap!important;
    font-size:clamp(34px,3vw,52px)!important;
    letter-spacing:-1.1px!important;
  }
  body.v151-ui .admin-dynamic-puk-name{
    display:block!important;
    white-space:nowrap!important;
    font-size:clamp(17px,1.55vw,25px)!important;
  }
}

@media (max-width:900px){
  /* Mobile member hero: reserve a real in-card lane for notification. */
  html body.v151-ui .member-hero-v10{
    position:relative!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    min-height:246px!important;
    padding:54px 74px 25px 22px!important;
    border-radius:27px!important;
  }
  html body.v151-ui .member-hero-v10 .member-hero-actions-v10{
    position:absolute!important;
    top:16px!important;
    right:16px!important;
    left:auto!important;
    bottom:auto!important;
    width:48px!important;
    max-width:48px!important;
    display:block!important;
    margin:0!important;
    transform:none!important;
    z-index:20!important;
  }
  html body.v151-ui .member-hero-v10 .member-notification-btn{
    display:grid!important;
    place-items:center!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    padding:0!important;
    margin:0!important;
    border-radius:15px!important;
    box-sizing:border-box!important;
    transform:none!important;
  }
  html body.v151-ui .member-hero-v10 .member-logout-v10{
    display:none!important;
  }
  html body.v151-ui .member-mobile-welcome-v22{
    min-width:0!important;
    width:100%!important;
    padding-right:0!important;
  }
  html body.v151-ui .member-mobile-welcome-v22 span{
    display:block!important;
    max-width:100%!important;
    white-space:normal!important;
    font-size:9px!important;
    line-height:1.35!important;
  }
  html body.v151-ui .member-mobile-welcome-v22 strong{
    display:block!important;
    max-width:100%!important;
    margin-top:9px!important;
    font-size:clamp(25px,7vw,34px)!important;
    line-height:1.08!important;
    overflow-wrap:anywhere!important;
  }
  html body.v151-ui .member-mobile-welcome-v22 p{
    max-width:100%!important;
    margin-top:10px!important;
    font-size:11px!important;
    line-height:1.45!important;
  }

  /* Admin hero titles remain one paragraph on phone. */
  body.v151-ui .admin-cockpit-copy h2{
    white-space:nowrap!important;
    font-size:clamp(24px,6.4vw,31px)!important;
    line-height:1.12!important;
    letter-spacing:-.65px!important;
  }
  body.v151-ui .admin-dynamic-puk-name{
    white-space:nowrap!important;
    font-size:clamp(13px,3.65vw,18px)!important;
    line-height:1.25!important;
  }

  /* Login: smoother geometry, less dead space, decoration stays inside header. */
  #loginPage.login-page:not(.hidden){
    padding:10px!important;
  }
  #loginPage .login-card-v136{
    border-radius:30px!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.74)!important;
    box-shadow:0 22px 52px rgba(3,20,42,.30)!important;
  }
  #loginPage .login-brand-panel-v136{
    min-height:285px!important;
    padding:18px 20px 22px!important;
    border-radius:0!important;
    overflow:hidden!important;
  }
  #loginPage .login-brand-panel-v136::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:5px!important;
    display:block!important;
    background:linear-gradient(90deg,#0e6bc1 0 48%,#fff 48% 54%,#df2434 54% 100%)!important;
    opacity:.92!important;
    transform:none!important;
    border:0!important;
  }
  #loginPage .login-logo-container{
    margin:0 0 12px!important;
  }
  #loginPage .login-brand-group{
    gap:5px!important;
    margin:0!important;
  }
  #loginPage .login-brand-group h1,
  #loginPage .login-brand-group h2{
    margin:0!important;
    line-height:1.16!important;
  }
  #loginPage .login-brand-group p{
    margin:2px 0 0!important;
  }
  #loginPage .login-access-panel-v136{
    padding:24px 20px 22px!important;
    border-radius:0!important;
  }
  #loginPage .login-access-heading-v136{
    margin:0 0 18px!important;
    padding:0!important;
  }
  #loginPage .login-access-heading-v136>span{
    margin-bottom:7px!important;
  }
}

@media (max-width:420px){
  body.v151-ui .admin-cockpit-copy h2{
    font-size:clamp(22px,6vw,27px)!important;
  }
  body.v151-ui .admin-dynamic-puk-name{
    font-size:12.5px!important;
  }
  #loginPage .login-card-v136{border-radius:26px!important}
  #loginPage .login-brand-panel-v136{min-height:270px!important;padding:16px 17px 20px!important}
  #loginPage .login-access-panel-v136{padding:22px 17px 20px!important}
}

/* ============================================================================
   V16.14 STAGE 31 — MOBILE LOGIN COMPACT ROUNDED POLISH
   Removes fixed header height/dead space and restores soft rounded geometry.
   ============================================================================ */
@media (max-width:900px){
  html body.v151-ui:has(#loginPage:not(.hidden)){
    overflow-y:auto!important;
    background:#06172c!important;
  }
  html body.v151-ui #loginPage.login-page:not(.hidden){
    min-height:100dvh!important;
    height:auto!important;
    padding:12px!important;
    align-items:flex-start!important;
    justify-content:center!important;
    overflow:visible!important;
  }
  html body.v151-ui #loginPage .login-card-v136{
    width:min(100%,540px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.72)!important;
    border-radius:28px!important;
    background:#fff!important;
    box-shadow:0 22px 52px rgba(2,18,38,.34)!important;
    clip-path:inset(0 round 28px)!important;
  }
  html body.v151-ui #loginPage .login-card-v136::before{
    border-radius:28px 28px 0 0!important;
    overflow:hidden!important;
  }
  html body.v151-ui #loginPage .login-brand-panel-v136{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:16px 18px 14px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:0!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:28px 28px 0 0!important;
    box-sizing:border-box!important;
  }
  html body.v151-ui #loginPage .login-brand-panel-v136::before{
    inset:0!important;
    border-radius:28px 28px 0 0!important;
    overflow:hidden!important;
  }
  html body.v151-ui #loginPage .login-brand-panel-v136::after{
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:4px!important;
    border-radius:0!important;
  }
  html body.v151-ui #loginPage .login-brand-panel-v136 .login-logo-container{
    width:auto!important;
    margin:0 0 10px!important;
    padding:7px 10px!important;
    gap:10px!important;
    align-self:flex-start!important;
    border-radius:18px!important;
  }
  html body.v151-ui #loginPage .login-brand-panel-v136 .login-logo-container img,
  html body.v151-ui #loginPage .login-brand-panel-v136 .login-logo-container img:first-child,
  html body.v151-ui #loginPage .login-brand-panel-v136 .login-logo-container img:last-child{
    width:58px!important;
    height:58px!important;
    max-width:58px!important;
    max-height:58px!important;
    border-radius:14px!important;
  }
  html body.v151-ui #loginPage .login-brand-panel-v136 .login-logo-separator{
    height:38px!important;
  }
  html body.v151-ui #loginPage .login-brand-panel-v136 .login-brand-group{
    width:100%!important;
    margin:0!important;
    gap:3px!important;
    text-align:left!important;
  }
  html body.v151-ui #loginPage .login-brand-panel-v136 .login-brand-group h1,
  html body.v151-ui #loginPage .login-brand-panel-v136 .login-brand-group h2{
    margin:0!important;
    max-width:100%!important;
    font-size:clamp(18px,5vw,22px)!important;
    line-height:1.16!important;
    text-align:left!important;
  }
  html body.v151-ui #loginPage .login-brand-panel-v136 .login-brand-group p{
    margin:4px 0 0!important;
    font-size:11.5px!important;
    line-height:1.35!important;
    text-align:left!important;
  }
  html body.v151-ui #loginPage .login-access-panel-v136{
    height:auto!important;
    min-height:0!important;
    padding:18px 18px 20px!important;
    justify-content:flex-start!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0 0 28px 28px!important;
    background:#fff!important;
    box-sizing:border-box!important;
  }
  html body.v151-ui #loginPage .login-access-heading-v136{
    margin:0 0 14px!important;
    padding:0!important;
  }
  html body.v151-ui #loginPage .login-access-heading-v136>span{
    margin:0 0 5px!important;
  }
  html body.v151-ui #loginPage .login-access-heading-v136 h2{
    margin:0!important;
    font-size:clamp(28px,8vw,36px)!important;
    line-height:1.08!important;
  }
  html body.v151-ui #loginPage .login-access-heading-v136 p{
    margin:7px 0 0!important;
  }
}
@media (max-width:420px){
  html body.v151-ui #loginPage.login-page:not(.hidden){padding:8px!important}
  html body.v151-ui #loginPage .login-card-v136{
    border-radius:24px!important;
    clip-path:inset(0 round 24px)!important;
  }
  html body.v151-ui #loginPage .login-brand-panel-v136{
    padding:13px 15px 12px!important;
    border-radius:24px 24px 0 0!important;
  }
  html body.v151-ui #loginPage .login-brand-panel-v136::before{border-radius:24px 24px 0 0!important}
  html body.v151-ui #loginPage .login-brand-panel-v136 .login-logo-container{margin-bottom:8px!important;padding:6px 8px!important}
  html body.v151-ui #loginPage .login-brand-panel-v136 .login-logo-container img,
  html body.v151-ui #loginPage .login-brand-panel-v136 .login-logo-container img:first-child,
  html body.v151-ui #loginPage .login-brand-panel-v136 .login-logo-container img:last-child{
    width:52px!important;height:52px!important;max-width:52px!important;max-height:52px!important
  }
  html body.v151-ui #loginPage .login-access-panel-v136{
    padding:16px 15px 18px!important;
    border-radius:0 0 24px 24px!important;
  }
}

/* ============================================================================
   V16.15 STAGE32 — MEMBER DESKTOP HERO MATCHES ADMIN DASHBOARD
   Desktop only. Mobile member hero remains unchanged.
   ============================================================================ */
@media (min-width:901px){
  html body.v151-ui #app.app.member-app .member-portal-v10 > .member-hero-v10,
  html body.v151-ui #app.app.member-app .member-dashboard-v15 > .member-hero-v10,
  html body.v151-ui #app.app.member-app .member-hero-v10{
    display:block!important;
    position:relative!important;
    width:100%!important;
    min-height:300px!important;
    margin:0 0 24px!important;
    padding:40px 46px!important;
    border-radius:34px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    background:
      radial-gradient(circle at 84% 20%,rgba(255,255,255,.09),transparent 25%),
      linear-gradient(128deg,#071f43 0%,#0a4f86 55%,#665b7d 100%)!important;
    box-shadow:0 26px 58px rgba(7,40,74,.20)!important;
  }
  html body.v151-ui #app.app.member-app .member-hero-v10::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    pointer-events:none!important;
    background:
      linear-gradient(166deg,transparent 0 66%,rgba(91,167,221,.28) 66.3% 72%,transparent 72.3%),
      linear-gradient(166deg,transparent 0 75%,rgba(222,35,66,.78) 75.3% 82%,transparent 82.3%)!important;
    opacity:1!important;
  }
  html body.v151-ui #app.app.member-app .member-hero-v10::after{
    content:""!important;
    position:absolute!important;
    right:56px!important;
    top:38px!important;
    width:250px!important;
    height:250px!important;
    z-index:0!important;
    border:0!important;
    border-radius:0!important;
    background:var(--fspgi-logo-url,none) center/contain no-repeat!important;
    opacity:.10!important;
    pointer-events:none!important;
  }
  html body.v151-ui #app.app.member-app .member-hero-identity-v10,
  html body.v151-ui #app.app.member-app .member-ticket-v10,
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22,
  html body.v151-ui #app.app.member-app .member-hero-actions-v10{
    display:none!important;
  }
  html body.v151-ui #app.app.member-app .member-desktop-welcome-v18{
    position:relative!important;
    z-index:2!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    width:min(850px,78%)!important;
    max-width:850px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    color:#fff!important;
  }
  html body.v151-ui #app.app.member-app .member-desktop-eyebrow-v32{
    display:inline-flex!important;
    width:auto!important;
    margin:0 0 22px!important;
    padding:8px 16px!important;
    border:1px solid rgba(255,255,255,.22)!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.08)!important;
    color:#ffd5df!important;
    font-size:10px!important;
    font-weight:900!important;
    letter-spacing:1.35px!important;
    line-height:1!important;
  }
  html body.v151-ui #app.app.member-app .member-desktop-title-v32{
    display:block!important;
    margin:0!important;
    color:#fff!important;
    font-size:clamp(38px,3.4vw,54px)!important;
    font-style:normal!important;
    font-weight:900!important;
    line-height:1.05!important;
    letter-spacing:-1.3px!important;
    white-space:nowrap!important;
  }
  html body.v151-ui #app.app.member-app .member-desktop-puk-v32{
    display:block!important;
    margin:16px 0 4px!important;
    color:#ffd15b!important;
    font-size:clamp(18px,1.55vw,25px)!important;
    font-weight:900!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
  html body.v151-ui #app.app.member-app .member-desktop-federation-v32{
    display:block!important;
    margin:0!important;
    color:#fff!important;
    font-size:17px!important;
    font-style:normal!important;
    font-weight:650!important;
    line-height:1.3!important;
  }
  html body.v151-ui #app.app.member-app .member-desktop-welcome-v18>p{
    width:min(760px,100%)!important;
    margin:26px 0 6px!important;
    color:#edf6ff!important;
    font-size:16px!important;
    line-height:1.55!important;
    white-space:normal!important;
  }
  html body.v151-ui #app.app.member-app .member-desktop-welcome-v18>time{
    display:block!important;
    color:#fff!important;
    font-size:16px!important;
    font-style:normal!important;
    font-weight:700!important;
    line-height:1.3!important;
  }
  html body.v151-ui #app.app.member-app .member-glance-grid-v10{
    margin-top:0!important;
  }
}
@media (min-width:901px) and (max-width:1180px){
  html body.v151-ui #app.app.member-app .member-hero-v10{min-height:270px!important;padding:32px 34px!important}
  html body.v151-ui #app.app.member-app .member-desktop-title-v32{font-size:38px!important}
  html body.v151-ui #app.app.member-app .member-desktop-puk-v32{font-size:18px!important}
  html body.v151-ui #app.app.member-app .member-desktop-federation-v32{font-size:15px!important}
  html body.v151-ui #app.app.member-app .member-desktop-welcome-v18>p{font-size:14px!important;margin-top:20px!important}
}

/* ============================================================================
   V16.16 STAGE33 — COMPACT MEMBER DESKTOP HERO + ONE-LINE DESKTOP BRANDING
   Combined revision: proportional member hero and single-line desktop titles.
   ============================================================================ */
@media (min-width:901px){
  /* Member dashboard hero: same visual language as admin, but intentionally compact. */
  html body.v151-ui #app.app.member-app .member-portal-v10 > .member-hero-v10,
  html body.v151-ui #app.app.member-app .member-dashboard-v15 > .member-hero-v10,
  html body.v151-ui #app.app.member-app .member-hero-v10{
    min-height:190px!important;
    height:auto!important;
    margin:0 0 18px!important;
    padding:24px 34px!important;
    border-radius:28px!important;
  }
  html body.v151-ui #app.app.member-app .member-hero-v10::after{
    right:38px!important;
    top:12px!important;
    width:176px!important;
    height:176px!important;
    opacity:.075!important;
  }
  html body.v151-ui #app.app.member-app .member-desktop-welcome-v18{
    width:min(940px,82%)!important;
    max-width:940px!important;
  }
  html body.v151-ui #app.app.member-app .member-desktop-eyebrow-v32{
    margin:0 0 10px!important;
    padding:6px 13px!important;
    font-size:8.5px!important;
  }
  html body.v151-ui #app.app.member-app .member-desktop-title-v32{
    font-size:clamp(31px,2.7vw,43px)!important;
    line-height:1!important;
    letter-spacing:-.9px!important;
    white-space:nowrap!important;
  }
  html body.v151-ui #app.app.member-app .member-desktop-puk-v32{
    margin:9px 0 2px!important;
    font-size:clamp(15px,1.35vw,20px)!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    max-width:100%!important;
  }
  html body.v151-ui #app.app.member-app .member-desktop-federation-v32{
    font-size:13px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
  html body.v151-ui #app.app.member-app .member-desktop-welcome-v18>p{
    width:min(900px,100%)!important;
    margin:10px 0 2px!important;
    font-size:12.5px!important;
    line-height:1.35!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html body.v151-ui #app.app.member-app .member-desktop-welcome-v18>time{
    font-size:12.5px!important;
    line-height:1.2!important;
  }

  /* Keep administration and member hero titles as one visual paragraph. */
  body.v151-ui .admin-cockpit-copy h2,
  html body.v151-ui #app.app.member-app .member-desktop-title-v32{
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.v151-ui .admin-cockpit-copy h2{
    font-size:clamp(34px,3.1vw,52px)!important;
  }

  /* Desktop left sidebar organization name: one line, compact, and centered. */
  body.v151-ui .sidebar .brand-panel{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  body.v151-ui .sidebar .brand-panel #sidebarBrandTitle{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:10px 0 4px!important;
    color:#fff!important;
    font-size:clamp(10px,.78vw,12px)!important;
    line-height:1.25!important;
    letter-spacing:.02em!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.v151-ui .sidebar .brand-panel #sidebarBrandSubtitle{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    font-size:9px!important;
    line-height:1.25!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

@media (min-width:901px) and (max-width:1180px){
  html body.v151-ui #app.app.member-app .member-hero-v10{
    min-height:178px!important;
    padding:21px 27px!important;
  }
  html body.v151-ui #app.app.member-app .member-desktop-title-v32{font-size:31px!important}
  html body.v151-ui #app.app.member-app .member-desktop-puk-v32{font-size:15px!important}
  html body.v151-ui #app.app.member-app .member-desktop-federation-v32{font-size:12px!important}
  html body.v151-ui #app.app.member-app .member-desktop-welcome-v18>p{font-size:11.5px!important}
}


/* ============================================================================
   V16.17 STAGE34 — COMPACT MEMBER MOBILE HERO + HONEST NOTIFICATION BADGE
   ============================================================================ */
@media (max-width:900px){
  html body.v151-ui #app.app.member-app .member-hero-v10{
    box-sizing:border-box!important;
    min-height:205px!important;
    height:auto!important;
    padding:24px 68px 20px 18px!important;
    margin:0 0 12px!important;
    border-radius:24px!important;
    overflow:hidden!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    min-height:160px!important;
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
    margin:0!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>span{
    margin:0 0 12px!important;
    color:#f4d16b!important;
    font-size:10px!important;
    line-height:1.25!important;
    letter-spacing:.02em!important;
    white-space:nowrap!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>strong{
    display:block!important;
    max-width:100%!important;
    margin:0!important;
    color:#fff!important;
    font-size:clamp(28px,8vw,36px)!important;
    font-weight:750!important;
    line-height:1.08!important;
    letter-spacing:-.6px!important;
    overflow-wrap:anywhere!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>p{
    max-width:100%!important;
    margin:14px 0 0!important;
    color:rgba(255,255,255,.86)!important;
    font-size:11px!important;
    line-height:1.45!important;
  }
  html body.v151-ui #app.app.member-app .member-hero-actions-v10{
    top:16px!important;
    right:14px!important;
    left:auto!important;
    display:block!important;
    width:42px!important;
    max-width:42px!important;
  }
  html body.v151-ui #app.app.member-app .member-hero-actions-v10 .member-notification-btn{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    border-radius:14px!important;
  }
  html body.v151-ui #app.app.member-app .member-hero-actions-v10 .member-logout-v10{
    display:none!important;
  }
  html body.v151-ui #app.app.member-app .member-notification-count.hidden{
    display:none!important;
  }
}
@media (max-width:380px){
  html body.v151-ui #app.app.member-app .member-hero-v10{
    min-height:190px!important;
    padding:20px 62px 17px 15px!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22{min-height:150px!important}
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>span{font-size:9px!important;margin-bottom:10px!important}
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>strong{font-size:27px!important}
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>p{font-size:10px!important;margin-top:11px!important}
}


/* ==================================================================
   V16.18 STAGE35 — PRINT PHOTO + MOBILE BELL CENTER HOTFIX
   ================================================================== */
@media (max-width: 900px){
  html body.v151-ui #app.app.member-app .member-hero-v10 .member-hero-actions-v10{
    display:grid!important;
    place-items:center!important;
    width:44px!important;
    height:44px!important;
    top:15px!important;
    right:14px!important;
  }
  html body.v151-ui #app.app.member-app .member-hero-v10 .member-notification-btn{
    display:grid!important;
    place-items:center!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    padding:0!important;
    line-height:0!important;
  }
  html body.v151-ui #app.app.member-app .member-hero-v10 .member-notification-btn > svg,
  html body.v151-ui #app.app.member-app .member-hero-v10 .member-notification-btn .member-color-icon-svg{
    display:block!important;
    width:27px!important;
    height:27px!important;
    margin:0!important;
    transform:translate(0,1px)!important;
  }
  html body.v151-ui #app.app.member-app .member-hero-v10 .member-notification-count{
    top:-3px!important;
    right:-3px!important;
  }
}

/* ============================================================================
   V16.19 STAGE 36 — DESKTOP LOGIN BRAND LINE + RED BRUSH ACCENT
   Keeps the organization name on one line and replaces ribbon fragments.
   ============================================================================ */
@media (min-width:901px){
  html body.v151-ui #loginPage .login-brand-panel-v136{
    position:relative!important;
    overflow:hidden!important;
  }

  html body.v151-ui #loginPage #loginPukName,
  html body.v151-ui #loginPage .login-brand-group-v20 h1{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    text-wrap:nowrap!important;
    font-size:clamp(23px,2.15vw,37px)!important;
    line-height:1.12!important;
    letter-spacing:-.45px!important;
  }

  /* Replace all legacy ribbon fragments with one restrained brush stroke. */
  html body.v151-ui #loginPage .login-brand-panel-v136::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:7%!important;
    right:auto!important;
    bottom:13%!important;
    width:min(390px,44%)!important;
    height:18px!important;
    border:0!important;
    border-radius:56% 18% 50% 24% / 55% 35% 65% 42%!important;
    background:
      linear-gradient(90deg,
        rgba(220,28,45,0) 0%,
        rgba(231,30,48,.95) 8%,
        #ef263b 34%,
        #d8172e 76%,
        rgba(216,23,46,0) 100%)!important;
    clip-path:polygon(0 54%,7% 35%,18% 43%,30% 22%,47% 31%,62% 12%,77% 30%,91% 20%,100% 44%,92% 66%,78% 58%,63% 82%,47% 65%,31% 88%,17% 67%,5% 79%)!important;
    transform:rotate(-2.2deg)!important;
    opacity:.88!important;
    filter:drop-shadow(0 5px 9px rgba(128,8,22,.18))!important;
    pointer-events:none!important;
    z-index:1!important;
  }

  html body.v151-ui #loginPage .login-logo-container,
  html body.v151-ui #loginPage .login-brand-group-v20,
  html body.v151-ui #loginPage .login-brand-message-v136{
    position:relative!important;
    z-index:3!important;
  }

  html body.v151-ui #loginPage .login-brand-message-v136{
    margin-top:28px!important;
  }
}

/* ============================================================================
   V16.20 STAGE 37 — DESKTOP LOGIN FIT + FSPGI GRADIENT ACCENT
   Keeps the PUK name visible in one line and removes the unclear brush/ribbon.
   ============================================================================ */
@media (min-width:901px){
  html body.v151-ui #loginPage .login-brand-panel-v136{
    overflow:hidden!important;
    background:
      radial-gradient(circle at 72% 18%,rgba(255,255,255,.12),transparent 27%),
      radial-gradient(circle at 88% 82%,rgba(218,28,46,.20),transparent 34%),
      linear-gradient(135deg,#062e59 0%,#075f86 47%,#144f78 70%,#553b61 100%)!important;
  }

  html body.v151-ui #loginPage #loginPukName,
  html body.v151-ui #loginPage .login-brand-group-v20 h1{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    padding-right:8px!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    font-size:clamp(18px,1.72vw,30px)!important;
    line-height:1.15!important;
    letter-spacing:-.35px!important;
  }

  /* Remove every ribbon/brush fragment. Use a soft FSPGI color sweep instead. */
  html body.v151-ui #loginPage .login-brand-panel-v136::after{
    content:""!important;
    position:absolute!important;
    inset:auto 0 0 0!important;
    display:block!important;
    width:100%!important;
    height:38%!important;
    border:0!important;
    border-radius:0!important;
    clip-path:none!important;
    transform:none!important;
    opacity:1!important;
    filter:none!important;
    background:
      linear-gradient(160deg,
        transparent 0 35%,
        rgba(42,151,211,.18) 36% 48%,
        rgba(255,255,255,.08) 49% 56%,
        rgba(218,28,46,.20) 57% 70%,
        transparent 71% 100%)!important;
    pointer-events:none!important;
    z-index:1!important;
  }

  html body.v151-ui #loginPage .login-brand-message-v136{
    margin-top:24px!important;
  }
}

/* =========================================================
   STAGE39 — MEMBER MOBILE GREETING 16PX
   Mengecilkan judul "Selamat ..." dan nama anggota pada HP.
   ========================================================= */
@media (max-width: 700px){
  body.v151-ui .member-dashboard-v15 .member-v12-hero-copy h2{
    font-size:16px!important;
    line-height:1.18!important;
    letter-spacing:-.2px!important;
    max-width:58vw!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
}


/* =========================================================
   STAGE40 — MEMBER MOBILE GREETING LEVELS + PRINT KTA PHOTO
   Sapaan 13px, nama 12px pada layar HP.
   ========================================================= */
@media (max-width:700px){
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>strong{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:2px!important;
    font-size:inherit!important;
    line-height:1.15!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22 .member-mobile-greeting-text{
    display:block!important;
    font-size:13px!important;
    line-height:1.2!important;
    letter-spacing:-.1px!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22 .member-mobile-name-text{
    display:block!important;
    font-size:12px!important;
    line-height:1.2!important;
    letter-spacing:-.1px!important;
    overflow-wrap:anywhere!important;
  }
}


/* =========================================================
   STAGE41 — COMPACT MEMBER HERO WITH DUAL LOGOS
   Menambah dua logo kecil tanpa menambah tinggi banner HP.
   ========================================================= */
.member-mobile-hero-logos-v41{display:none}
@media (max-width:900px){
  html body.v151-ui #app.app.member-app .member-hero-v10{
    min-height:205px!important;
    height:205px!important;
    padding:14px 68px 14px 18px!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22{
    justify-content:flex-start!important;
    min-height:0!important;
    height:100%!important;
    gap:0!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-hero-logos-v41{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    height:28px!important;
    margin:0 0 5px!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-hero-logos-v41 img{
    display:block!important;
    width:auto!important;
    height:26px!important;
    max-width:34px!important;
    object-fit:contain!important;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>span{
    margin:0 0 8px!important;
    font-size:8.7px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>strong{
    gap:1px!important;
    line-height:1.12!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22 .member-mobile-greeting-text{
    font-size:13px!important;
    line-height:1.15!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22 .member-mobile-name-text{
    font-size:12px!important;
    line-height:1.15!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>p{
    max-width:240px!important;
    margin:8px 0 0!important;
    font-size:10px!important;
    line-height:1.32!important;
  }
}
@media (max-width:380px){
  html body.v151-ui #app.app.member-app .member-hero-v10{
    padding-left:15px!important;
    padding-right:62px!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-hero-logos-v41 img{
    height:24px!important;
    max-width:31px!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>p{
    max-width:215px!important;
    font-size:9.6px!important;
  }
}

/* =========================================================
   STAGE42 — PREMIUM DUAL-LOGO CAPSULE FOR MEMBER HERO
   Container logo mengikuti gaya halaman login tanpa menambah
   tinggi hero mobile.
   ========================================================= */
@media (max-width:900px){
  html body.v151-ui #app.app.member-app .member-hero-v10{
    min-height:205px!important;
    height:205px!important;
    padding:13px 68px 13px 18px!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    gap:0!important;
    height:100%!important;
    min-height:0!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-hero-logos-v41{
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
    align-self:flex-start!important;
    justify-content:center!important;
    gap:0!important;
    width:auto!important;
    height:40px!important;
    margin:0 0 5px!important;
    padding:4px 7px!important;
    border:1px solid rgba(255,255,255,.46)!important;
    border-radius:14px!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,.16),0 5px 14px rgba(3,25,61,.15)!important;
    backdrop-filter:blur(6px)!important;
    box-sizing:border-box!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-hero-logos-v41::after{
    content:""!important;
    display:block!important;
    width:1px!important;
    height:24px!important;
    margin:0 7px!important;
    background:rgba(255,255,255,.42)!important;
    border-radius:999px!important;
    order:1!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-hero-logos-v41 img{
    flex:0 0 auto!important;
    display:block!important;
    width:31px!important;
    height:31px!important;
    max-width:31px!important;
    max-height:31px!important;
    padding:3px!important;
    border-radius:9px!important;
    background:rgba(255,255,255,.96)!important;
    object-fit:contain!important;
    box-sizing:border-box!important;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.16))!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-hero-logos-v41 img:first-child{order:0!important}
  html body.v151-ui #app.app.member-app .member-mobile-hero-logos-v41 img:last-child{order:2!important}
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>span{
    margin:0 0 6px!important;
    font-size:8.5px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>strong{
    gap:0!important;
    line-height:1.08!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22 .member-mobile-greeting-text{
    font-size:12px!important;
    line-height:1.12!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22 .member-mobile-name-text{
    font-size:12px!important;
    line-height:1.12!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>p{
    max-width:245px!important;
    margin:6px 0 0!important;
    font-size:9.8px!important;
    line-height:1.28!important;
  }
}
@media (max-width:380px){
  html body.v151-ui #app.app.member-app .member-mobile-hero-logos-v41{
    height:38px!important;
    padding:4px 6px!important;
    border-radius:13px!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-hero-logos-v41::after{
    height:22px!important;
    margin:0 6px!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-hero-logos-v41 img{
    width:29px!important;
    height:29px!important;
    max-width:29px!important;
    max-height:29px!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>p{
    max-width:215px!important;
    font-size:9.4px!important;
  }
}

/* =========================================================
   STAGE43 — KTA FRONT FOOTER TYPOGRAPHY
   Mengecilkan tulisan "NO. KTA" dua tingkat pada kartu KTA
   halaman Admin dan Anggota, tanpa mengubah tinggi footer.
   ========================================================= */
.rev50-card.rev50-portrait.rev50-front .rev50-portrait-red-footer-v3{
  font-size:2.35mm!important;
  line-height:1.05!important;
  letter-spacing:.10mm!important;
  padding-left:1.6mm!important;
  padding-right:1.6mm!important;
  white-space:nowrap!important;
}

/* ============================================================================
   V16 STAGE46 — ADMIN KTA PHOTO RECOVERY + ACTIVATION PASSWORD EYE
   ============================================================================ */
#memberActivationModal .activation-password-wrapper{
  position:relative!important;
  width:100%!important;
  display:block!important;
}
#memberActivationModal .activation-password-wrapper input{
  width:100%!important;
  padding-right:54px!important;
  box-sizing:border-box!important;
}
#memberActivationModal .activation-password-toggle{
  position:absolute!important;
  right:7px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:6!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
}
#memberActivationModal .activation-password-toggle:hover{
  transform:translateY(-50%) scale(1.04)!important;
}
.rev50-portrait-photo-v3 .kta-card-member-photo{
  opacity:1!important;
  visibility:visible!important;
}
.kta-photo-loading-notice{color:#31516e!important;background:#f5f9fd!important;border:1px dashed #bed3e6!important}


/* V16 Stage 49 — stable KTA photo fallback */
.rev50-portrait-photo-v3 img.kta-photo-load-failed{
  visibility:hidden!important;
}
.rev50-portrait-photo-v3:has(img.kta-photo-load-failed)::after{
  content:'FOTO';
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:800;
  color:#64748b;
  background:#e2e8f0;
}

/* ============================================================================
   V16 STAGE51 — MOBILE UI READABILITY & CONTAINMENT FIX
   Frontend-only: member hero spacing, notification contrast, logout arrow,
   and activation password eye placement. No database/schema changes.
   ============================================================================ */
@media (max-width:900px){
  /* 1. Isi banner anggota diturunkan dan ruang bawah dimanfaatkan proporsional. */
  html body.v151-ui #app.app.member-app .member-hero-v10{
    min-height:220px!important;
    height:220px!important;
    padding:13px 68px 15px 18px!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22{
    justify-content:flex-start!important;
    padding-top:0!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-hero-logos-v41{
    margin-bottom:8px!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>span{
    margin-bottom:9px!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>strong{
    margin-top:1px!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>p{
    margin-top:10px!important;
    max-width:245px!important;
    color:#f5fbff!important;
    font-weight:650!important;
    text-shadow:0 1px 3px rgba(2,20,45,.58)!important;
  }

  /* 2. Panel pemberitahuan: teks, ikon, status, dan tombol lebih kontras. */
  html body.v151-ui .notification-panel{
    color:#102f4d!important;
  }
  html body.v151-ui .v151-notification-card{
    border-color:#b9d8e9!important;
    background:#ffffff!important;
    box-shadow:0 8px 22px rgba(10,58,94,.12)!important;
  }
  html body.v151-ui .v151-notification-icon{
    background:#087cab!important;
    color:#fff!important;
    box-shadow:0 5px 12px rgba(8,124,171,.24)!important;
  }
  html body.v151-ui .v151-notification-title-row strong{
    color:#102f4d!important;
    font-size:13px!important;
    font-weight:900!important;
  }
  html body.v151-ui .v151-notification-title-row span{
    color:#075f78!important;
    background:#dff4fa!important;
    border:1px solid #acdce9!important;
  }
  html body.v151-ui .v151-notification-copy p{
    color:#385670!important;
    font-size:11px!important;
    font-weight:600!important;
  }
  html body.v151-ui .v151-notification-copy time{
    color:#60758a!important;
    font-weight:700!important;
  }
  html body.v151-ui .v151-notification-archive{
    background:#0879bf!important;
    color:#fff!important;
    border-color:#0879bf!important;
  }
  html body.v151-ui .v151-notification-footer .notification-link,
  html body.v151-ui .v151-archive-all{
    min-height:40px!important;
    color:#fff!important;
    background:linear-gradient(135deg,#075cab,#1088cf)!important;
    border:1px solid #075cab!important;
    font-size:10.5px!important;
    font-weight:900!important;
    text-shadow:0 1px 1px rgba(0,0,0,.15)!important;
  }

  /* 3. Panah logout selalu di dalam kartu dan terlihat jelas. */
  html body.v151-ui #view button.member-profile-logout-card{
    position:relative!important;
    overflow:hidden!important;
    padding-right:36px!important;
  }
  html body.v151-ui .member-profile-logout-card .member-profile-menu-arrow{
    right:10px!important;
    top:10px!important;
    width:28px!important;
    height:28px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:9px!important;
    color:#ffffff!important;
    background:#116fc1!important;
    border:1px solid #0b5fa9!important;
    box-shadow:0 5px 12px rgba(17,111,193,.25)!important;
    font-size:22px!important;
    font-weight:900!important;
    line-height:1!important;
    transform:none!important;
  }
}

/* 4. Ikon mata aktivasi selalu terkunci di dalam field. */
#memberActivationModal .activation-password-field,
#memberActivationModal .activation-password-wrapper{
  min-width:0!important;
  overflow:visible!important;
}
#memberActivationModal .activation-password-wrapper{
  position:relative!important;
  display:block!important;
  width:100%!important;
}
#memberActivationModal .activation-password-wrapper input{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  padding-right:58px!important;
  box-sizing:border-box!important;
}
#memberActivationModal button.activation-password-toggle{
  position:absolute!important;
  top:50%!important;
  right:9px!important;
  left:auto!important;
  bottom:auto!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  padding:3px!important;
  margin:0!important;
  transform:translateY(-50%)!important;
  border:0!important;
  border-radius:11px!important;
  background:transparent!important;
  overflow:hidden!important;
  box-shadow:none!important;
  z-index:8!important;
}
#memberActivationModal button.activation-password-toggle .password-eye-fullcolor{
  display:block!important;
  width:32px!important;
  height:32px!important;
  max-width:32px!important;
  max-height:32px!important;
  margin:0!important;
}
#memberActivationModal button.activation-password-toggle:hover,
#memberActivationModal button.activation-password-toggle:focus-visible{
  transform:translateY(-50%)!important;
  outline:2px solid rgba(16,116,196,.28)!important;
  outline-offset:1px!important;
}
@media (max-width:380px){
  html body.v151-ui #app.app.member-app .member-hero-v10{
    min-height:210px!important;
    height:210px!important;
  }
  #memberActivationModal button.activation-password-toggle{
    right:7px!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
  }
  #memberActivationModal button.activation-password-toggle .password-eye-fullcolor{
    width:30px!important;
    height:30px!important;
  }
}


/* ============================================================================
   V16 STAGE52 — COMPACT HERO + CLEAR LOGOUT/EYE ICONS
   Frontend-only. No database/schema changes.
   ============================================================================ */
@media (max-width:900px){
  /* Banner anggota dibuat lebih pendek agar ruang kosong bawah hilang. */
  html body.v151-ui #app.app.member-app .member-hero-v10{
    min-height:172px!important;
    height:172px!important;
    padding:10px 64px 10px 16px!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-hero-logos-v41{
    margin-bottom:5px!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>span{
    margin-bottom:4px!important;
  }
  html body.v151-ui #app.app.member-app .member-mobile-welcome-v22>p{
    margin-top:6px!important;
    margin-bottom:0!important;
    max-width:255px!important;
    line-height:1.32!important;
  }

  /* Kartu logout: satu ikon jelas, tanpa chevron biru kedua. */
  html body.v151-ui #view button.member-profile-logout-card{
    padding-right:14px!important;
  }
  html body.v151-ui .member-profile-logout-card .member-profile-menu-arrow{
    display:none!important;
  }
  html body.v151-ui .member-profile-logout-card .member-profile-menu-icon{
    filter:none!important;
  }
}

/* Ikon mata aktivasi: outline tunggal, kontras, tanpa kotak biru. */
#memberActivationModal button.activation-password-toggle{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  right:6px!important;
  padding:10px!important;
  border-radius:10px!important;
  color:#334155!important;
  background:transparent!important;
  overflow:visible!important;
}
#memberActivationModal button.activation-password-toggle:hover,
#memberActivationModal button.activation-password-toggle:focus-visible{
  color:#0b67b2!important;
  background:#eff6ff!important;
}
#memberActivationModal button.activation-password-toggle .activation-eye-icon{
  width:24px!important;
  height:24px!important;
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
#memberActivationModal button.activation-password-toggle .activation-eye-icon.hidden{
  display:none!important;
}
#memberActivationModal .activation-password-wrapper input{
  padding-right:56px!important;
}
@media (max-width:380px){
  html body.v151-ui #app.app.member-app .member-hero-v10{
    min-height:164px!important;
    height:164px!important;
    padding:9px 60px 9px 14px!important;
  }
}

/* ============================================================================
   V16.36 STAGE 53 — CONSISTENT LOGOUT CHEVRON + STRONG LOGIN ICON
   Frontend-only. No database/schema changes.
   ============================================================================ */
@media (max-width:900px){
  html body.v151-ui #view button.member-profile-logout-card{
    padding-right:12px!important;
  }
  html body.v151-ui .member-profile-logout-card .member-profile-menu-arrow{
    display:block!important;
    position:absolute!important;
    right:11px!important;
    top:10px!important;
    width:auto!important;
    height:auto!important;
    color:#94a3b8!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    border-radius:0!important;
    font-size:22px!important;
    font-weight:900!important;
    line-height:1!important;
    transform:none!important;
  }
}
#loginPage .login-primary-v135 .login-action-icon-strong{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  color:#ffffff!important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))!important;
}
#loginPage .login-primary-v135 .login-action-icon-strong svg{
  width:28px!important;
  height:28px!important;
  display:block!important;
  overflow:visible!important;
  filter:none!important;
}


/* ============================================================================
   V16 STAGE57 — STANDARD PASSWORD EYE + PERMANENT PRIVATE PHOTO PREVIEW
   ============================================================================ */
.password-wrapper{
  position:relative!important;
  width:100%!important;
}
.password-wrapper input{
  width:100%!important;
  padding-right:48px!important;
}
.password-wrapper>span[onclick*="togglePasswordVisibility"],
.password-wrapper>button.password-toggle-v135{
  position:absolute!important;
  right:7px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  padding:0!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:#526273!important;
  box-shadow:none!important;
  filter:none!important;
  z-index:6!important;
  overflow:hidden!important;
}
.password-wrapper>span[onclick*="togglePasswordVisibility"]:hover,
.password-wrapper>button.password-toggle-v135:hover{
  background:#eef4f8!important;
  color:#0b5d8f!important;
}
.password-wrapper>span[onclick*="togglePasswordVisibility"]:focus-visible,
.password-wrapper>button.password-toggle-v135:focus-visible{
  outline:2px solid #3b82f6!important;
  outline-offset:1px!important;
}
.password-eye-standard,
.password-wrapper .password-eye-standard{
  width:22px!important;
  height:22px!important;
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  filter:none!important;
  flex:0 0 22px!important;
}
.password-eye-standard.hidden{display:none!important}

.managed-asset-preview-shell{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  min-width:130px;
  min-height:70px;
}
.managed-asset-preview-shell .managed-asset-preview{
  background:#f8fafc;
}
.managed-asset-preview-caption{
  display:block;
  color:#64748b;
  font-size:10.5px;
  font-weight:700;
  line-height:1.25;
}
.managed-asset-preview-shell.asset-preview-error::after{
  content:'Pratinjau belum dapat dimuat. File tersimpan tetap dipertahankan.';
  display:block;
  max-width:220px;
  padding:7px 9px;
  border:1px dashed #e0a4a4;
  border-radius:8px;
  background:#fff7f7;
  color:#9f3030;
  font-size:10.5px;
  font-weight:700;
  line-height:1.35;
}
.managed-asset-preview-shell.asset-preview-error .managed-asset-preview-caption{display:none}


/* Stage 60: cegah descender huruf seperti g/y/p/q terpotong pada judul topbar anggota */
body.v151-ui .app.member-app .topbar #pageTitle,
html body.v151-ui #app.app.member-app .topbar #pageTitle{
  overflow:visible!important;
  text-overflow:clip!important;
  padding-bottom:4px!important;
}


/* ============================================================================
   V16.45 STAGE61 — MEMBER HERO TITLE DESCENDER FIX
   The actual "Dashboard Anggota" hero heading previously inherited
   overflow:hidden together with line-height:1, clipping descenders such as g.
   ============================================================================ */
@media (min-width:901px){
  html body.v151-ui #app.app.member-app .member-desktop-title-v32{
    display:inline-block!important;
    max-width:100%!important;
    line-height:1.16!important;
    overflow:visible!important;
    text-overflow:clip!important;
    padding:0 0 .12em!important;
    white-space:nowrap!important;
  }
}


/* ============================================================================
   V16.46 STAGE62 — STATIC ABOUT & SUPPORT PAGE
   Frontend-only contact information for admin and member workspaces.
   ============================================================================ */
.about-support-page{display:grid;gap:18px;max-width:1180px;margin:0 auto 34px}
.about-support-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:245px;padding:34px 38px;border-radius:28px;overflow:hidden;background:linear-gradient(135deg,#082d58 0%,#0d5688 55%,#167a9e 100%);box-shadow:0 22px 48px rgba(8,45,88,.2);color:#fff}
.about-support-hero::before{content:'';position:absolute;width:330px;height:330px;right:-110px;top:-150px;border-radius:50%;background:rgba(255,255,255,.1)}
.about-support-hero::after{content:'';position:absolute;width:220px;height:220px;right:90px;bottom:-165px;border-radius:50%;border:34px solid rgba(255,255,255,.07)}
.about-support-hero-copy{position:relative;z-index:1;max-width:760px}
.about-support-eyebrow{display:inline-flex;align-items:center;padding:7px 12px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(255,255,255,.1);font-size:10px;font-weight:950;letter-spacing:1.6px;color:#bff3ff}
.about-support-hero h2{margin:15px 0 10px!important;color:#fff!important;font-size:clamp(30px,4vw,48px)!important;line-height:1.12!important;letter-spacing:-1.2px}
.about-support-hero p{max-width:720px;margin:0;color:#e5f4ff;font-size:15px;font-weight:620;line-height:1.7}
.about-support-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.about-support-badges span{padding:7px 11px;border-radius:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.17);color:#fff;font-size:11px;font-weight:850}
.about-support-mark{position:relative;z-index:1;flex:0 0 160px;height:160px;display:grid;place-content:center;text-align:center;border-radius:38px;background:linear-gradient(145deg,rgba(255,255,255,.23),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 20px 45px rgba(1,20,45,.25);backdrop-filter:blur(8px)}
.about-support-mark span{display:block;font-size:68px;font-weight:950;line-height:.92;color:#fff;text-shadow:0 8px 22px rgba(0,0,0,.2)}
.about-support-mark small{display:block;margin-top:11px;color:#bff3ff;font-size:13px;font-weight:950;letter-spacing:2px}
.about-support-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:18px}
.about-support-card{padding:25px;border:1px solid #d9e5ef;border-radius:24px;background:#fff;box-shadow:0 13px 34px rgba(24,57,88,.08)}
.about-support-card-heading{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.about-support-card-icon{width:48px;height:48px;display:grid;place-items:center;flex:0 0 48px;border-radius:15px;background:linear-gradient(145deg,#e8f6ff,#dff3f0);color:#0f6690;border:1px solid #cce6ef}
.about-support-card-icon svg{width:25px;height:25px}
.about-support-card-heading small{display:block;margin-bottom:3px;color:#71869a;font-size:9px;font-weight:950;letter-spacing:1.35px}
.about-support-card-heading h3{margin:0!important;color:#163553!important;font-size:21px!important}
.about-support-identity{display:grid;gap:4px;padding:17px 18px;margin-bottom:14px;border-radius:17px;background:#f5f9fc;border:1px solid #e0eaf1}
.about-support-identity strong{color:#143551;font-size:19px;letter-spacing:.1px}
.about-support-identity span{color:#6b8094;font-size:12px;font-weight:750}
.about-support-contact-list{display:grid;gap:10px}
.about-support-contact-row{display:grid;grid-template-columns:43px minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;border:1px solid #dae6ef;background:#fff;color:inherit;text-decoration:none!important;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.about-support-contact-row:hover{transform:translateY(-1px);border-color:#9bc9df;box-shadow:0 8px 20px rgba(19,83,123,.1)}
.about-support-contact-glyph{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;color:#fff;font-size:12px;font-weight:950;letter-spacing:.2px}
.about-support-contact-glyph.whatsapp{background:linear-gradient(145deg,#2cc66d,#138f4c)}
.about-support-contact-glyph.email{background:linear-gradient(145deg,#2a9de4,#1562af);font-size:20px}
.about-support-contact-row small{display:block;color:#768a9c;font-size:10px;font-weight:850}
.about-support-contact-row strong{display:block;margin-top:2px;color:#173a58;font-size:13px;overflow-wrap:anywhere}
.about-support-contact-row i{color:#4a7da0;font-size:26px;font-style:normal;font-weight:500}
.about-support-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.about-support-list li{position:relative;padding:0 0 0 27px;color:#405b72;font-size:13px;font-weight:680;line-height:1.5}
.about-support-list li::before{content:'✓';position:absolute;left:0;top:0;width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:#e6f7f0;color:#158557;font-size:11px;font-weight:950}
.about-support-note{margin:20px 0 0;padding:14px 15px;border-radius:15px;background:#fff8e6;border:1px solid #f4dfaa;color:#76551f;font-size:11.5px;font-weight:720;line-height:1.55}
.about-support-footer-note{display:flex;align-items:flex-start;gap:12px;padding:15px 17px;border-radius:17px;background:#edf6fb;border:1px solid #d4e8f2}
.about-support-footer-note>span{width:25px;height:25px;display:grid;place-items:center;flex:0 0 25px;border-radius:50%;background:#176d9b;color:#fff;font-family:Georgia,serif;font-weight:900}
.about-support-footer-note p{margin:1px 0 0;color:#4d687e;font-size:11.5px;font-weight:680;line-height:1.55}
body.theme-dark .about-support-card{background:#142235;border-color:#2c435a;box-shadow:0 13px 34px rgba(0,0,0,.22)}
body.theme-dark .about-support-card-heading h3,body.theme-dark .about-support-identity strong,body.theme-dark .about-support-contact-row strong{color:#f2f7fb!important}
body.theme-dark .about-support-card-heading small,body.theme-dark .about-support-identity span,body.theme-dark .about-support-contact-row small{color:#a9bdcf!important}
body.theme-dark .about-support-card-icon{background:#1d3448;border-color:#315069;color:#6fd1ed}
body.theme-dark .about-support-identity,body.theme-dark .about-support-contact-row{background:#182a3d;border-color:#2d465c}
body.theme-dark .about-support-list li{color:#c6d5e1}
body.theme-dark .about-support-note{background:#302a1d;border-color:#5b4c28;color:#f3d98d}
body.theme-dark .about-support-footer-note{background:#14283a;border-color:#2d485e}
body.theme-dark .about-support-footer-note p{color:#b9cad7}
@media (max-width:760px){
  .about-support-page{gap:14px;margin-bottom:96px}
  .about-support-hero{min-height:auto;padding:26px 21px;border-radius:22px;align-items:flex-start}
  .about-support-hero h2{font-size:32px!important}
  .about-support-hero p{font-size:13px;line-height:1.6}
  .about-support-mark{display:none}
  .about-support-grid{grid-template-columns:1fr;gap:14px}
  .about-support-card{padding:19px;border-radius:20px}
  .about-support-contact-row{grid-template-columns:40px minmax(0,1fr) auto;padding:12px}
  .about-support-contact-glyph{width:40px;height:40px}
}


/* Stage 63: halaman Tentang & Kontak dibuat ringkas — hanya kontak pengembang dan versi aplikasi. */
.about-support-hero-compact{min-height:180px!important}
.about-support-grid-single{grid-template-columns:minmax(0,720px)!important;justify-content:center!important}
.about-support-grid-single .about-support-contact-card{width:100%}
.about-support-identity-simple{display:block!important}
.about-support-identity-simple strong{display:block}
@media (max-width:900px){
  .about-support-hero-compact{min-height:auto!important}
  .about-support-grid-single{grid-template-columns:1fr!important}
}


/* V16.49 STAGE65 — hapus hero biru pada halaman Tentang & Kontak dan tampilkan logo MCODE di tengah */
.about-support-page-simple{max-width:980px!important;gap:16px!important;padding-top:2px!important}
.about-support-logo-wrap{display:flex;justify-content:center;align-items:center;padding:4px 0 2px}
.about-support-logo-wrap.is-hidden{display:none!important}
.about-support-logo{width:min(100%,92px);max-width:92px;height:auto;display:block;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(5,30,55,.10))}
.about-support-contact-card-centered{max-width:760px;margin:0 auto}
.about-support-card-heading-centered{justify-content:center;text-align:center}
.about-support-card-heading-centered > div{text-align:center}
.about-support-identity-centered{text-align:center;justify-items:center}
.about-support-identity-centered span{font-size:13px;letter-spacing:1.2px;text-transform:uppercase}
.about-support-identity-centered strong{font-size:24px}
@media (max-width:900px){
  .about-support-page-simple{gap:14px!important}
  .about-support-logo{max-width:78px}
  .about-support-contact-card-centered{max-width:none}
}


/* V16.50 STAGE66 — kecilkan logo MCODE sesuai contoh pengguna */
.about-support-logo-wrap{padding:2px 0 0!important;margin-bottom:-2px!important}
.about-support-logo{margin-inline:auto!important}
.about-support-contact-card-centered{margin-top:0!important}


/* V16.51 STAGE67 — halaman Tentang & Kontak memakai logo PNG kecil 80x80, tanpa ikon & tanpa versi aplikasi */
.about-support-page-simple{max-width:980px!important;gap:14px!important;padding-top:2px!important}
.about-support-logo-wrap{display:flex;justify-content:center;align-items:center;padding:2px 0 0!important;margin-bottom:-2px!important}
.about-support-logo-wrap.is-hidden{display:none!important}
.about-support-logo{width:80px!important;height:80px!important;max-width:80px!important;display:block;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(5,30,55,.10));margin-inline:auto!important}
.about-support-contact-card-centered{max-width:760px;margin:0 auto!important}
.about-support-identity-centered{text-align:center;justify-items:center;margin-bottom:14px!important}
.about-support-identity-centered span{font-size:13px;letter-spacing:1.2px;text-transform:uppercase}
.about-support-identity-centered strong{font-size:24px}
.about-support-card-heading-centered,.about-support-card-icon{display:none!important}
@media (max-width:900px){
  .about-support-logo{width:80px!important;height:80px!important;max-width:80px!important}
  .about-support-contact-card-centered{max-width:none}
}


/* V16.52 STAGE68 — popup banner tanpa blur/gelap agar halaman tetap terlihat jelas */
html body.v151-ui #memberPromoModal.activation-modal,
#memberPromoModal.activation-modal{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}


/* V16.53 STAGE69 — logo MCODE memakai latar putih kotak sudut halus */
.about-support-logo-wrap{
  width: 126px!important;
  height: 126px!important;
  margin: 0 auto 10px!important;
  padding: 16px!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  background:#ffffff!important;
  border:1px solid #dbe6ee!important;
  border-radius:28px!important;
  box-shadow:0 12px 28px rgba(15,23,42,.08)!important;
}
.about-support-logo-wrap.is-hidden{display:none!important}
.about-support-logo{
  width:80px!important;
  height:80px!important;
  max-width:80px!important;
  max-height:80px!important;
  object-fit:contain!important;
  filter:none!important;
  margin-inline:auto!important;
}
@media (max-width:900px){
  .about-support-logo-wrap{
    width:118px!important;
    height:118px!important;
    border-radius:24px!important;
    padding:14px!important;
    margin-bottom:8px!important;
  }
}


/* V16.54 STAGE70 — hilangkan kesan kotak di dalam logo dengan PNG yang dipotong rapi */
.about-support-logo-wrap{
  width:124px!important;
  height:124px!important;
  margin:0 auto 10px!important;
  padding:12px!important;
  background:#fff!important;
  border:1px solid #dbe6ee!important;
  border-radius:28px!important;
  box-shadow:0 12px 28px rgba(15,23,42,.08)!important;
}
.about-support-logo{
  width:92px!important;
  max-width:92px!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  filter:none!important;
}
@media (max-width:900px){
  .about-support-logo-wrap{width:116px!important;height:116px!important;padding:11px!important;border-radius:24px!important}
  .about-support-logo{width:86px!important;max-width:86px!important}
}


/* V16.55 STAGE71 — tambah tulisan E-KTA V16.0 di bawah nama pengembang */
.about-support-identity-centered em{
  display:block;
  margin-top:2px;
  color:#111827;
  font-size:13px;
  font-style:normal;
  font-weight:900;
  letter-spacing:.3px;
}
@media (max-width:900px){
  .about-support-identity-centered em{font-size:12.5px}
}

/* V16.66 STAGE82 — scanner admin: refresh biru, tanpa upload QR */
.scanner-inline-refresh-btn{
  width:38px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  padding:0!important;
  border:0!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#2f75b8 0%,#1f5f9d 100%)!important;
  color:#fff!important;
  box-shadow:0 7px 16px rgba(31,95,157,.28)!important;
}
.scanner-inline-refresh-btn svg{width:21px!important;height:21px!important;display:block!important}


/* ===== V16 Stage86R4: Dialog Aktivasi selalu paling depan ===== */
#systemConfirmDialog:not(.hidden),
#systemReasonDialog:not(.hidden),
#systemActionResultDialog:not(.hidden){
  z-index:2147483000!important;
  position:fixed!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:16px!important;
  background:rgba(2,12,27,.74)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

.system-action-result-card{
  width:min(470px,calc(100vw - 32px))!important;
  text-align:center!important;
  padding:24px!important;
  border-radius:22px!important;
  border:1px solid rgba(148,163,184,.35)!important;
  background:#fff!important;
  box-shadow:0 30px 90px rgba(2,6,23,.42)!important;
}
.system-action-result-icon{
  width:58px;
  height:58px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  border-radius:999px;
  font-size:31px;
  line-height:1;
  font-weight:950;
  color:#fff;
  background:#16a34a;
  box-shadow:0 12px 28px rgba(22,163,74,.24);
}
.system-action-result-card.is-error .system-action-result-icon{
  background:#dc2626;
  box-shadow:0 12px 28px rgba(220,38,38,.24);
}
.system-action-result-card.is-warning .system-action-result-icon{
  background:#d97706;
  box-shadow:0 12px 28px rgba(217,119,6,.24);
}
.system-action-result-card h2{
  margin:0 0 9px!important;
  color:#0f172a!important;
  font-size:21px!important;
  line-height:1.25!important;
}
.system-action-result-message{
  margin:0!important;
  color:#334155!important;
  font-size:14px!important;
  line-height:1.6!important;
  white-space:pre-line!important;
  overflow-wrap:anywhere!important;
}
.system-action-result-actions{
  justify-content:center!important;
  margin-top:20px!important;
}
.system-action-result-actions button{
  min-width:150px!important;
}

@media screen and (max-width:700px){
  #systemConfirmDialog:not(.hidden),
  #systemReasonDialog:not(.hidden),
  #systemActionResultDialog:not(.hidden){
    padding:14px!important;
    align-items:center!important;
  }
  .system-action-result-card{
    width:calc(100vw - 28px)!important;
    max-height:calc(100dvh - 28px)!important;
    overflow:auto!important;
    padding:22px 18px!important;
    border-radius:20px!important;
  }
  .system-action-result-icon{
    width:54px;
    height:54px;
    font-size:29px;
  }
  .system-action-result-actions{
    display:block!important;
  }
  .system-action-result-actions button{
    width:100%!important;
    min-height:46px!important;
  }
}


/* =====================================================================
   SPE HPI KTA DESIGN FORK — 2026-08-16
   IMPORTANT: these rules only target .hpi-kta-* so Epson login/dashboard
   styling remains untouched.
   ===================================================================== */
.hpi-kta-card{width:54mm!important;height:85.6mm!important;border-radius:3.7mm!important;overflow:hidden!important;position:relative!important;box-sizing:border-box!important;font-family:Arial,Helvetica,sans-serif!important;color:#07294d!important;background:#f7fbff!important;background-image:none!important;box-shadow:0 5px 20px rgba(10,45,84,.20)!important;border:.22mm solid rgba(17,86,142,.24)!important}
.hpi-kta-card:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.98) 0%,rgba(223,243,255,.96) 56%,rgba(255,246,194,.74) 100%);z-index:0}
.hpi-kta-card:after{content:"";position:absolute;right:-12mm;bottom:7mm;width:45mm;height:34mm;opacity:.13;background:repeating-linear-gradient(90deg,#0b5ca7 0 .22mm,transparent .22mm 2.2mm),repeating-linear-gradient(0deg,#0b5ca7 0 .22mm,transparent .22mm 3.5mm);transform:skewX(-16deg);z-index:0}
.hpi-kta-card>*{position:relative;z-index:2;box-sizing:border-box}
.hpi-kta-topline{position:absolute!important;left:0;right:0;top:0;height:2.3mm;background:linear-gradient(90deg,#b51f2e 0 24%,#0a4277 24% 100%);z-index:5!important}
.hpi-kta-logo-row{position:absolute!important;left:3.4mm;right:3.4mm;top:4.6mm;height:12.1mm;display:grid!important;grid-template-columns:10.5mm 1fr 10.5mm;gap:2mm;align-items:center!important}
.hpi-kta-logo-row>img{width:10.2mm!important;height:10.2mm!important;object-fit:contain!important;display:block!important;max-width:none!important;max-height:none!important}
.hpi-kta-brand{text-align:center!important;line-height:1.05!important;min-width:0}.hpi-kta-brand strong{display:block;font-size:3.05mm!important;color:#073765!important;font-weight:950!important;letter-spacing:.15mm}.hpi-kta-brand span{display:block;font-size:1.48mm!important;color:#315a7d!important;font-weight:800!important;margin-top:.5mm}.hpi-kta-brand em{display:inline-block;font-style:normal!important;font-size:1.65mm!important;font-weight:950!important;color:#b51f2e!important;margin-top:.65mm}
.hpi-kta-title{position:absolute!important;top:17.2mm;left:4mm;right:4mm;height:5mm;display:flex!important;align-items:center!important;justify-content:center!important;border-top:.28mm solid #d7ab22;border-bottom:.28mm solid #d7ab22;font-size:2.35mm!important;font-weight:950!important;letter-spacing:.28mm;color:#0a4277!important}
.hpi-kta-photo{position:absolute!important;top:24.6mm;left:16mm;width:22mm;height:27.8mm;border-radius:2.2mm;overflow:hidden!important;background:#dbe8f1!important;border:.45mm solid #0b5ca7!important;box-shadow:0 1.3mm 3.2mm rgba(8,55,101,.15);display:flex!important;align-items:center!important;justify-content:center!important}
.hpi-kta-photo img.kta-card-member-photo{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center top!important;border-radius:0!important;display:block!important}
.hpi-photo-placeholder{font-size:2.1mm!important;font-weight:900!important;color:#52718e!important}
.hpi-kta-data{position:absolute!important;left:5mm;right:5mm;top:55mm;display:grid!important;gap:1.3mm!important}.hpi-kta-data>div{display:grid!important;grid-template-columns:13.4mm 1fr;gap:1.7mm;align-items:end!important;min-height:4.25mm;border-bottom:.18mm solid rgba(8,57,101,.24)}.hpi-kta-data span{font-size:1.8mm!important;font-weight:850!important;color:#42637f!important}.hpi-kta-data b{font-size:2.05mm!important;font-weight:950!important;color:#082f59!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.hpi-kta-signatures{position:absolute!important;left:4.5mm;right:4.5mm;bottom:7.6mm;height:13.4mm;display:grid!important;grid-template-columns:1fr 1fr;gap:9mm}.hpi-kta-sign-col{text-align:center!important;display:grid!important;grid-template-rows:2.8mm 6.5mm 3mm;align-items:center!important}.hpi-kta-sign-title{font-size:1.55mm!important;font-weight:850!important;color:#385c78!important}.hpi-kta-sign-image{height:6.5mm!important;display:flex!important;align-items:center!important;justify-content:center!important}.hpi-kta-sign-image img{max-height:6.3mm!important;max-width:17mm!important;object-fit:contain!important;display:block!important}.hpi-kta-sign-name{font-size:1.55mm!important;font-weight:950!important;color:#082f59!important;border-top:.2mm solid #375872;padding-top:.55mm;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.hpi-kta-stamp{position:absolute!important;width:9.4mm!important;height:9.4mm!important;object-fit:contain!important;left:22.3mm;bottom:10.7mm;opacity:.76;mix-blend-mode:multiply;z-index:4!important}
.hpi-kta-front-footer{position:absolute!important;left:0;right:0;bottom:0;height:5.6mm;background:linear-gradient(90deg,#0a4277,#08325d);border-top:1.2mm solid #b51f2e;color:white!important;padding:0 3.6mm;display:flex!important;align-items:center!important;justify-content:space-between!important}.hpi-kta-front-footer span{font-size:1.55mm!important;font-weight:850!important}.hpi-kta-front-footer strong{font-size:1.48mm!important;letter-spacing:.12mm;color:#ffe69b!important}
.hpi-kta-logo-row.back{top:4.8mm}.hpi-kta-back:before{background:linear-gradient(160deg,#f9fdff 0%,#dff3ff 45%,#0b477c 45.3%,#07355f 100%)}.hpi-kta-back:after{opacity:.16;right:-5mm;bottom:12mm;filter:brightness(2)}
.hpi-kta-back .hpi-kta-brand strong{color:#073765!important}.hpi-kta-back .hpi-kta-brand span{color:#315a7d!important}
.hpi-kta-qr-wrap{position:absolute!important;top:18.7mm;left:14mm;width:26mm;text-align:center!important}.hpi-kta-qr-box{width:26mm;height:26mm;padding:1.6mm;background:#fff;border:.6mm solid #0a4277;border-radius:2.2mm;box-shadow:0 1.2mm 3mm rgba(5,42,79,.22);display:flex!important;align-items:center!important;justify-content:center!important}.hpi-kta-qr-box img,.hpi-kta-qr-box canvas,.hpi-kta-qr-box svg{width:22mm!important;height:22mm!important;object-fit:contain!important;display:block!important}.hpi-kta-qr-wrap>b{display:block;margin-top:1.3mm;font-size:1.62mm!important;letter-spacing:.13mm;color:#fff!important;text-shadow:0 .3mm .6mm rgba(0,0,0,.18)}
.hpi-kta-proof{position:absolute!important;left:4.8mm;right:4.8mm;top:49.4mm;text-align:center!important;color:#fff!important;font-size:1.72mm!important;font-weight:700!important;line-height:1.35!important}.hpi-kta-proof strong{color:#ffe27a!important;font-weight:950!important}
.hpi-kta-secretariat{position:absolute!important;left:4.3mm;right:4.3mm;top:58.9mm;min-height:9.4mm;color:#eaf5ff!important;display:grid!important;grid-template-columns:1fr;gap:.45mm;text-align:left!important}.hpi-kta-secretariat strong{font-size:1.65mm!important;color:#ffe27a!important;letter-spacing:.12mm}.hpi-kta-secretariat span{font-size:1.34mm!important;font-weight:700!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.hpi-kta-security{position:absolute!important;left:4.3mm;right:4.3mm;bottom:8.9mm;height:4.6mm;border-radius:.8mm;overflow:hidden!important;background:rgba(255,255,255,.82);border:.18mm solid rgba(255,255,255,.7)}.hpi-kta-security img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;filter:saturate(1.2) contrast(1.08)}
.hpi-kta-validity{position:absolute!important;left:0;right:0;bottom:0;height:7.2mm;background:#b51f2e;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:2.2mm;text-align:center!important}.hpi-kta-validity span{font-size:1.42mm!important;font-weight:850!important;letter-spacing:.12mm}.hpi-kta-validity strong{font-size:1.75mm!important;font-weight:950!important;color:#fff5c2!important}
.hpi-kta-watermark{position:absolute!important;inset:0!important;z-index:20!important;display:flex!important;align-items:center!important;justify-content:center!important;pointer-events:none!important;background:rgba(239,246,255,.08)}.hpi-kta-watermark span{transform:rotate(-25deg);font-size:4.4mm!important;font-weight:950!important;color:rgba(29,78,216,.46)!important;border:.8mm solid rgba(29,78,216,.46);padding:1.1mm 3mm;border-radius:1.4mm;letter-spacing:.7mm}.hpi-kta-watermark.invalid span{color:rgba(190,24,93,.38)!important;border-color:rgba(190,24,93,.38)!important}
.hpi-kta-sheet.rev50-sheet{gap:10mm!important}
@media print{.hpi-kta-card{box-shadow:none!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}}

/* ======================================================================
   SPE HPI REV3 — DYNAMIC KTA TEMPLATE
   Scope is intentionally limited to .hpi-kta-*.
   No login/dashboard/navigation Epson styling is changed.
   ====================================================================== */
.hpi-kta-card{width:54mm!important;height:85.6mm!important;border-radius:3.8mm!important;overflow:hidden!important;position:relative!important;box-sizing:border-box!important;font-family:Arial,Helvetica,sans-serif!important;color:#082f59!important;background:#fff!important;border:.24mm solid rgba(5,47,89,.36)!important;box-shadow:0 5px 18px rgba(0,38,77,.22)!important}
.hpi-kta-card:before{content:""!important;position:absolute!important;inset:0!important;z-index:0!important;background:linear-gradient(180deg,#e9f8ff 0%,#bfe9ff 27%,#78c5f1 54%,#0b4f91 75%,#063a72 100%)!important}
.hpi-kta-front:after{content:""!important;position:absolute!important;left:0!important;right:0!important;top:23mm!important;height:47mm!important;z-index:0!important;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(1,74,139,.12)),radial-gradient(circle at 20% 45%,rgba(255,221,138,.88),transparent 30%),linear-gradient(90deg,rgba(255,255,255,.16),rgba(1,55,116,.13))!important}
.hpi-kta-back:before{background:linear-gradient(180deg,#edfaff 0 19.6mm,#0c6dc1 19.7mm,#07529b 58mm,#063c79 100%)!important}
.hpi-kta-back:after{content:""!important;position:absolute!important;inset:19.5mm 0 0!important;background:linear-gradient(145deg,rgba(255,255,255,.08),transparent 40%),linear-gradient(0deg,rgba(0,24,70,.28),transparent 55%)!important;z-index:0!important}
.hpi-kta-card>*{position:relative;z-index:2;box-sizing:border-box}
.hpi-kta-circuit{position:absolute!important;z-index:1!important;width:17mm!important;height:26mm!important;opacity:.34!important;background:repeating-linear-gradient(0deg,transparent 0 2.2mm,rgba(255,255,255,.75) 2.2mm 2.45mm),repeating-linear-gradient(90deg,transparent 0 3.1mm,rgba(255,255,255,.65) 3.1mm 3.35mm)!important;clip-path:polygon(0 0,100% 0,100% 72%,72% 72%,72% 100%,0 100%)!important}
.hpi-kta-circuit-left{left:-2mm!important;top:2mm!important}.hpi-kta-circuit-right{right:-2mm!important;top:2mm!important;transform:scaleX(-1)!important}
.hpi-kta-logo-row{position:absolute!important;top:4.3mm!important;left:8mm!important;right:8mm!important;height:11.5mm!important;display:grid!important;grid-template-columns:1fr .25mm 1fr!important;align-items:center!important;gap:3mm!important}
.hpi-kta-logo-row>img{width:14mm!important;height:10mm!important;object-fit:contain!important;justify-self:center!important;display:block!important;max-width:none!important;max-height:none!important}.hpi-kta-logo-divider{height:10.5mm!important;background:#0c4686!important;width:.25mm!important;justify-self:center!important}
.hpi-kta-title{position:absolute!important;top:18.7mm!important;left:0!important;right:0!important;height:5.7mm!important;background:#073b79!important;color:#fff!important;border:0!important;border-bottom:.55mm solid #f2cb21!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:2.85mm!important;font-weight:950!important;letter-spacing:.06mm!important;text-shadow:0 .25mm .5mm rgba(0,0,0,.18)!important}
.hpi-kta-photo{position:absolute!important;top:26.6mm!important;left:17.25mm!important;width:19.5mm!important;height:23.7mm!important;border-radius:1.5mm!important;overflow:hidden!important;background:#e8eef4!important;border:.55mm solid #fff!important;box-shadow:0 0 0 .25mm rgba(6,60,119,.16),0 1mm 2.8mm rgba(0,31,70,.2)!important;display:flex!important;align-items:center!important;justify-content:center!important}.hpi-kta-photo img.kta-card-member-photo{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center top!important;display:block!important;border-radius:0!important}.hpi-photo-placeholder{font-size:2mm!important;font-weight:900!important;color:#315a7d!important}
.hpi-kta-member-name{position:absolute!important;top:51.3mm!important;left:5mm!important;right:5mm!important;text-align:center!important;font-weight:950!important;font-size:2.8mm!important;color:#063a79!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-shadow:0 .2mm .25mm rgba(255,255,255,.85)!important}
.hpi-kta-data{position:absolute!important;left:5.4mm!important;right:5.4mm!important;top:55.9mm!important;background:rgba(255,255,255,.9)!important;border-radius:1.5mm!important;padding:1.1mm 1.4mm!important;display:grid!important;gap:.4mm!important;box-shadow:0 .5mm 1.5mm rgba(3,44,87,.1)!important}.hpi-kta-data>div{display:grid!important;grid-template-columns:17mm 1fr!important;gap:1.3mm!important;align-items:center!important;min-height:3.4mm!important;border-bottom:.16mm solid rgba(6,58,116,.58)!important}.hpi-kta-data>div:last-child{border-bottom:0!important}.hpi-kta-data span{font-size:1.45mm!important;font-weight:850!important;color:#0a3c78!important;white-space:nowrap!important}.hpi-kta-data b{font-size:1.55mm!important;font-weight:950!important;color:#082f59!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.hpi-kta-signatures{position:absolute!important;left:5.2mm!important;right:5.2mm!important;bottom:2.8mm!important;height:12.4mm!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:11mm!important}.hpi-kta-sign-col{text-align:center!important;display:grid!important;grid-template-rows:2.4mm 6.2mm 2.8mm!important;align-items:center!important}.hpi-kta-sign-title{font-size:1.4mm!important;font-weight:800!important;color:#1d2939!important}.hpi-kta-sign-image{height:6.2mm!important;display:flex!important;align-items:center!important;justify-content:center!important}.hpi-kta-sign-image img{max-height:6mm!important;max-width:16mm!important;object-fit:contain!important;display:block!important}.hpi-kta-sign-name{font-size:1.45mm!important;font-weight:950!important;color:#073c80!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;border:0!important;padding:0!important}.hpi-kta-stamp{position:absolute!important;width:10.5mm!important;height:10.5mm!important;object-fit:contain!important;left:21.75mm!important;bottom:3.3mm!important;opacity:.75!important;mix-blend-mode:multiply!important;z-index:3!important}
.hpi-kta-back .hpi-kta-logo-row{top:4.3mm!important}.hpi-kta-qr-wrap{position:absolute!important;top:22.3mm!important;left:13mm!important;width:28mm!important;text-align:center!important}.hpi-kta-qr-box{width:28mm!important;height:28mm!important;padding:1.25mm!important;background:#fff!important;border:.55mm solid #0b4b90!important;border-radius:2mm!important;box-shadow:0 0 0 .45mm rgba(255,255,255,.9),0 1mm 2.5mm rgba(0,26,72,.25)!important;display:flex!important;align-items:center!important;justify-content:center!important}.hpi-kta-qr-box img,.hpi-kta-qr-box canvas,.hpi-kta-qr-box svg{width:25mm!important;height:25mm!important;object-fit:contain!important;display:block!important}.hpi-qr-missing{font-size:1.6mm!important;font-weight:900!important;color:#8b1e2d!important;text-align:center!important}
.hpi-kta-proof{position:absolute!important;left:5mm!important;right:5mm!important;top:52.7mm!important;text-align:center!important;color:#fff!important;font-size:1.65mm!important;font-weight:750!important;line-height:1.35!important}.hpi-kta-proof strong{color:#fff!important;font-weight:950!important}
.hpi-kta-secretariat{position:absolute!important;left:6.8mm!important;right:4mm!important;top:62.1mm!important;color:#fff!important;display:grid!important;gap:.3mm!important;text-align:left!important}.hpi-kta-secretariat>strong{font-size:1.75mm!important;color:#ffd72a!important;letter-spacing:.08mm!important;margin-bottom:.35mm!important}.hpi-contact-row{display:grid!important;grid-template-columns:3mm 1fr!important;align-items:start!important;gap:.4mm!important;font-size:1.24mm!important;line-height:1.18!important;color:#fff!important}.hpi-contact-row i{font-style:normal!important;color:#fff!important;font-weight:900!important;text-align:center!important}.hpi-contact-row b{font-size:1.24mm!important;font-weight:700!important;color:#fff!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}.hpi-contact-empty{font-size:1.2mm!important;color:#eaf4ff!important}
.hpi-kta-security{position:absolute!important;left:0!important;right:0!important;bottom:8.1mm!important;height:3.7mm!important;border-radius:0!important;overflow:hidden!important;background:rgba(255,255,255,.9)!important;border:0!important}.hpi-kta-security img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;filter:saturate(1.1) contrast(1.04)!important}
.hpi-kta-validity{position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:8.2mm!important;background:#c30d0d!important;color:#fff!important;display:grid!important;grid-template-columns:auto auto!important;grid-template-rows:3.3mm 2.6mm!important;align-content:center!important;justify-content:center!important;column-gap:1.2mm!important;text-align:center!important;padding:.7mm 2mm!important}.hpi-kta-validity span{font-size:1.65mm!important;font-weight:850!important;align-self:end!important}.hpi-kta-validity strong{font-size:1.8mm!important;font-weight:950!important;color:#fff!important;align-self:end!important}.hpi-kta-validity small{grid-column:1/3!important;font-size:1.05mm!important;font-weight:600!important;color:#fff!important;line-height:1.1!important}
.hpi-kta-watermark{position:absolute!important;inset:0!important;z-index:20!important;display:flex!important;align-items:center!important;justify-content:center!important;pointer-events:none!important;background:rgba(239,246,255,.08)!important}.hpi-kta-watermark span{transform:rotate(-25deg)!important;font-size:4.4mm!important;font-weight:950!important;color:rgba(29,78,216,.46)!important;border:.8mm solid rgba(29,78,216,.46)!important;padding:1.1mm 3mm!important;border-radius:1.4mm!important;letter-spacing:.7mm!important}.hpi-kta-watermark.invalid span{color:rgba(190,24,93,.38)!important;border-color:rgba(190,24,93,.38)!important}
.hpi-kta-sheet.rev50-sheet{gap:10mm!important}
@media print{.hpi-kta-card{box-shadow:none!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}}

/* ============================================================
   SPE HPI REV5 — CLEAN FRONT/BACK TEMPLATE + DYNAMIC DB OVERLAY
   Template artwork is national static visual only.
   Member/national operational data is rendered dynamically.
   ============================================================ */
.hpi-kta-card.hpi-kta-front{
  background-image:url('assets/nasional/kta-template-front.png')!important;
  background-size:100% 100%!important;background-position:center!important;background-repeat:no-repeat!important;
}
.hpi-kta-card.hpi-kta-back{
  background-image:url('assets/nasional/kta-template-back.png')!important;
  background-size:100% 100%!important;background-position:center!important;background-repeat:no-repeat!important;
}
.hpi-kta-card:before,.hpi-kta-card:after,.hpi-kta-card .hpi-kta-circuit,.hpi-kta-card .hpi-kta-logo-row,.hpi-kta-card .hpi-kta-title{display:none!important}

/* FRONT — dynamic photo */
.hpi-kta-front .hpi-kta-photo{
  top:25.2mm!important;left:17.25mm!important;width:19.5mm!important;height:24.55mm!important;
  border:0!important;border-radius:1.5mm!important;background:transparent!important;box-shadow:none!important;
}
.hpi-kta-front .hpi-kta-photo img.kta-card-member-photo{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center top!important}
.hpi-kta-front .hpi-photo-placeholder{display:none!important}

/* Member name is the first dynamic information block. */
.hpi-kta-front .hpi-kta-member-name{
  position:absolute!important;top:51.35mm!important;left:5.7mm!important;right:5.2mm!important;height:5.25mm!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  color:#082f59!important;font-size:2.35mm!important;font-weight:950!important;line-height:1!important;text-align:center!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;background:transparent!important;z-index:6!important;
}

/* Remaining four rows sit in the clean information area. */
.hpi-kta-front .hpi-kta-data{
  position:absolute!important;top:57.85mm!important;left:5.7mm!important;right:5.1mm!important;height:10.55mm!important;
  padding:.35mm 1.15mm!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;
  display:grid!important;grid-template-rows:repeat(4,1fr)!important;gap:0!important;z-index:6!important;
}
.hpi-kta-front .hpi-kta-data>div{
  min-height:0!important;display:grid!important;grid-template-columns:16.4mm minmax(0,1fr)!important;gap:1mm!important;
  align-items:center!important;border-bottom:.14mm solid rgba(7,47,94,.62)!important;
}
.hpi-kta-front .hpi-kta-data>div:last-child{border-bottom:0!important}
.hpi-kta-front .hpi-kta-data span{font-size:1.32mm!important;color:#0a3c78!important;font-weight:900!important;white-space:nowrap!important}
.hpi-kta-front .hpi-kta-data b{font-size:1.48mm!important;color:#082f59!important;font-weight:950!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

/* FRONT — dynamic national signatures + stamp */
.hpi-kta-front .hpi-kta-signatures{
  position:absolute!important;left:5.1mm!important;right:5.1mm!important;top:73.85mm!important;height:9.2mm!important;
  display:flex!important;justify-content:space-between!important;align-items:flex-start!important;z-index:7!important;
}
.hpi-kta-front .hpi-kta-sign-col{width:13.2mm!important;text-align:center!important;display:flex!important;flex-direction:column!important;align-items:center!important}
.hpi-kta-front .hpi-kta-sign-title{font-size:1.15mm!important;font-weight:850!important;color:#111!important;line-height:1!important;margin:0 0 .3mm!important}
.hpi-kta-front .hpi-kta-sign-image{height:5.1mm!important;width:12.8mm!important;display:flex!important;align-items:center!important;justify-content:center!important}
.hpi-kta-front .hpi-kta-sign-image img{max-width:12.8mm!important;max-height:5.1mm!important;object-fit:contain!important;mix-blend-mode:multiply!important}
.hpi-kta-front .hpi-kta-sign-name{font-size:1.05mm!important;font-weight:900!important;color:#082f59!important;line-height:1!important;max-width:13.2mm!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.hpi-kta-front .hpi-kta-stamp{
  position:absolute!important;top:74.0mm!important;left:22.35mm!important;width:9.3mm!important;height:9.3mm!important;
  object-fit:contain!important;z-index:6!important;opacity:.82!important;mix-blend-mode:multiply!important;
}

/* BACK — dynamic QR */
.hpi-kta-back .hpi-kta-qr-wrap{top:22.2mm!important;left:13.25mm!important;width:27.5mm!important;z-index:6!important}
.hpi-kta-back .hpi-kta-qr-box{width:27.5mm!important;height:27.5mm!important;padding:1.35mm!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:1.8mm!important}
.hpi-kta-back .hpi-kta-qr-box img,.hpi-kta-back .hpi-kta-qr-box canvas,.hpi-kta-back .hpi-kta-qr-box svg{width:24.8mm!important;height:24.8mm!important}

/* BACK — proof text is system wording; organization/federation still DB-driven. */
.hpi-kta-back .hpi-kta-proof{
  position:absolute!important;top:50.4mm!important;left:4.3mm!important;right:4.3mm!important;
  color:#fff!important;font-size:1.45mm!important;font-weight:750!important;text-align:center!important;line-height:1.32!important;z-index:6!important;
}

/* BACK — dynamic secretariat data */
.hpi-kta-back .hpi-kta-secretariat{
  position:absolute!important;top:58.0mm!important;left:6.0mm!important;right:6.0mm!important;height:9.0mm!important;
  padding:0!important;background:transparent!important;color:#fff!important;z-index:6!important;overflow:hidden!important;
}
.hpi-kta-back .hpi-kta-secretariat>strong{display:block!important;color:#ffd21c!important;font-size:1.55mm!important;margin:0 0 .35mm!important;line-height:1!important}
.hpi-kta-back .hpi-contact-row{display:flex!important;align-items:center!important;gap:.65mm!important;font-size:1.15mm!important;line-height:1.15!important;margin:.18mm 0!important;color:#fff!important}
.hpi-kta-back .hpi-contact-row i{font-style:normal!important;width:1.8mm!important;text-align:center!important}.hpi-kta-back .hpi-contact-row b{font-weight:750!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.hpi-kta-back .hpi-contact-empty{font-size:1.05mm!important;color:#fff!important}

/* BACK — security panel URL from profil_nasional */
.hpi-kta-back .hpi-kta-security{
  position:absolute!important;left:2.7mm!important;right:2.7mm!important;top:72.5mm!important;height:3.65mm!important;
  z-index:7!important;overflow:hidden!important;background:transparent!important;border-radius:.6mm!important;
}
.hpi-kta-back .hpi-kta-security img{width:100%!important;height:100%!important;object-fit:fill!important;display:block!important}

/* BACK — validity date from profil_nasional */
.hpi-kta-back .hpi-kta-validity{
  position:absolute!important;left:5.4mm!important;right:5.4mm!important;top:78.6mm!important;height:5.2mm!important;
  padding:0!important;background:transparent!important;color:#fff!important;display:flex!important;flex-direction:column!important;
  justify-content:center!important;align-items:center!important;text-align:center!important;z-index:7!important;
}
.hpi-kta-back .hpi-kta-validity span{font-size:1.25mm!important;font-weight:850!important;line-height:1!important}.hpi-kta-back .hpi-kta-validity strong{font-size:1.55mm!important;font-weight:950!important;line-height:1.15!important;margin:.18mm 0 0!important}.hpi-kta-back .hpi-kta-validity small{display:none!important}

/* REV6 hardening */
.hpi-kta-card.hpi-kta-front{background:#fff url('./assets/nasional/kta-template-front.png?v=rev6') center/100% 100% no-repeat!important}
.hpi-kta-card.hpi-kta-back{background:#fff url('./assets/nasional/kta-template-back.png?v=rev6') center/100% 100% no-repeat!important}

/* REV7 - Login dual logo hardening */
.login-brand-logos img,
.login-logo-pair img,
.brand-logo-shell img {
  object-fit: contain !important;
}

/* REV9 - Dashboard/sidebar official logo blocks */
.sidebar .brand-panel .brand-logos{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:22px!important;
}
.sidebar .brand-panel .brand-logos .brand-logo-shell{
  width:82px!important;
  height:82px!important;
  min-width:82px!important;
  min-height:82px!important;
  border-radius:22px!important;
  background:#ffffff!important;
  padding:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(255,255,255,.75)!important;
  box-shadow:0 10px 26px rgba(2,8,23,.22)!important;
}
.sidebar .brand-panel .brand-logos .brand-logo-shell img{
  width:100%!important;
  height:100%!important;
  max-width:62px!important;
  max-height:62px!important;
  object-fit:contain!important;
  filter:none!important;
}

/* REV11 dashboard logos: compact white tiles proportional to logo. */
.sidebar .brand-panel .brand-logos{gap:18px!important}
.sidebar .brand-panel .brand-logos .brand-logo-shell{
  width:70px!important;height:70px!important;min-width:70px!important;min-height:70px!important;
  padding:7px!important;border-radius:18px!important;
}
.sidebar .brand-panel .brand-logos .brand-logo-shell img{
  max-width:54px!important;max-height:54px!important;width:100%!important;height:100%!important;object-fit:contain!important;
}

/* REV11: template is a real image layer; renderer no longer depends on CSS background loading. */
.hpi-kta-card{position:relative!important;overflow:hidden!important;background:#fff!important}
.hpi-kta-template-layer{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:fill!important;display:block!important;z-index:0!important;pointer-events:none!important;
}
.hpi-kta-card>*:not(.hpi-kta-template-layer){position:absolute;z-index:5}
.hpi-kta-front .hpi-kta-data,.hpi-kta-front .hpi-kta-signatures{position:absolute!important}

.hpi-national-assets-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}
.hpi-national-asset-card{border:1px solid #dbe4ee;border-radius:16px;padding:14px;background:#f8fafc;display:flex;flex-direction:column;gap:9px}
.hpi-national-asset-preview{height:120px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hpi-national-asset-preview img{max-width:100%;max-height:100%;object-fit:contain}
.hpi-national-asset-card small{word-break:break-all;color:#64748b;font-size:11px}

/* =========================================================
   REV12 — AUTHORITATIVE KTA TEMPLATE OVERLAY
   Static template = artwork only.
   Dynamic database data is aligned to the blank areas.
   ========================================================= */
.hpi-kta-card{
  position:relative!important;
  width:54mm!important;height:85.6mm!important;
  overflow:hidden!important;background:#fff!important;
  border-radius:3.5mm!important;
}
.hpi-kta-template-layer{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  object-fit:fill!important;z-index:0!important;
}
.hpi-kta-card:before,.hpi-kta-card:after,
.hpi-kta-card .hpi-kta-circuit,.hpi-kta-card .hpi-kta-title{display:none!important}

/* hide baked logos/company text on template header, then show dynamic DB logos */
.hpi-kta-header-mask{
  display:block!important;position:absolute!important;
  left:1.0%!important;right:1.0%!important;top:1.0%!important;height:18.2%!important;
  z-index:2!important;background:#fff!important;border-radius:2.8mm 2.8mm 0 0!important;
}
.hpi-kta-logo-row,.hpi-kta-logo-row.back{
  display:grid!important;position:absolute!important;
  left:13.5%!important;right:13.5%!important;top:4.3%!important;height:12.8%!important;
  grid-template-columns:1fr 1px 1fr!important;gap:7%!important;
  align-items:center!important;z-index:4!important;
}
.hpi-kta-logo-row>img{
  width:100%!important;height:100%!important;max-width:23mm!important;max-height:10mm!important;
  object-fit:contain!important;justify-self:center!important;
}
.hpi-kta-logo-divider{display:block!important;width:1px!important;height:76%!important;background:#123f7a!important;justify-self:center!important}

/* FRONT */
.hpi-kta-front .hpi-kta-photo{
  position:absolute!important;left:32.45%!important;top:29.55%!important;
  width:35.2%!important;height:28.45%!important;
  border:0!important;border-radius:1.4mm!important;background:transparent!important;
  box-shadow:none!important;overflow:hidden!important;z-index:5!important;
}
.hpi-kta-front .hpi-kta-photo img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center top!important}
.hpi-kta-front .hpi-photo-placeholder{display:none!important}

/* dedicated NAME box in first white panel */
.hpi-kta-front .hpi-kta-member-name{
  position:absolute!important;left:10.5%!important;right:10.5%!important;top:60.15%!important;height:5.55%!important;
  display:grid!important;grid-template-columns:25% 1fr!important;align-items:center!important;gap:2%!important;
  padding:0 2.3%!important;background:transparent!important;z-index:6!important;
  color:#0b376a!important;text-align:left!important;
}
.hpi-kta-front .hpi-kta-member-name span{
  display:block!important;font-size:1.36mm!important;font-weight:900!important;white-space:nowrap!important;
}
.hpi-kta-front .hpi-kta-member-name b{
  display:block!important;font-size:1.65mm!important;font-weight:950!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}

/* lower white panel contains only 3 rows */
.hpi-kta-front .hpi-kta-data{
  position:absolute!important;left:10.4%!important;right:10.4%!important;top:67.25%!important;height:11.25%!important;
  padding:0 2.3%!important;background:transparent!important;box-shadow:none!important;border:0!important;
  display:grid!important;grid-template-rows:repeat(3,1fr)!important;gap:0!important;z-index:6!important;
}
.hpi-kta-front .hpi-kta-data>div{
  display:grid!important;grid-template-columns:25% 1fr!important;gap:2%!important;align-items:center!important;
  min-height:0!important;border:0!important;background:transparent!important;
}
.hpi-kta-front .hpi-kta-data span{
  font-size:1.31mm!important;font-weight:900!important;color:#0b376a!important;white-space:nowrap!important;
}
.hpi-kta-front .hpi-kta-data b{
  font-size:1.52mm!important;font-weight:950!important;color:#0b376a!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}

/* signatures live inside the two dashed boxes; stamp inside center circle */
.hpi-kta-front .hpi-kta-signatures{
  position:absolute!important;left:10.2%!important;right:10.2%!important;top:84.2%!important;height:11.0%!important;
  display:grid!important;grid-template-columns:28% 28%!important;justify-content:space-between!important;
  align-items:center!important;z-index:7!important;
}
.hpi-kta-front .hpi-kta-sign-col{
  width:100%!important;height:100%!important;display:grid!important;
  grid-template-rows:18% 56% 26%!important;text-align:center!important;align-items:center!important;
}
.hpi-kta-front .hpi-kta-sign-title{font-size:1.05mm!important;font-weight:850!important;color:#111!important}
.hpi-kta-front .hpi-kta-sign-image{width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.hpi-kta-front .hpi-kta-sign-image img{max-width:92%!important;max-height:100%!important;object-fit:contain!important}
.hpi-kta-front .hpi-kta-sign-name{
  font-size:.95mm!important;font-weight:950!important;color:#082f59!important;
  border:0!important;padding:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
.hpi-kta-front .hpi-kta-stamp{
  display:block!important;position:absolute!important;
  left:41.7%!important;top:85.1%!important;width:16.6%!important;height:9.3%!important;
  object-fit:contain!important;opacity:.9!important;mix-blend-mode:multiply!important;z-index:7!important;
}

/* BACK */
.hpi-kta-back .hpi-kta-qr-wrap{
  position:absolute!important;left:25.5%!important;top:26.15%!important;width:49%!important;height:30.6%!important;
  display:flex!important;align-items:center!important;justify-content:center!important;z-index:6!important;
}
.hpi-kta-back .hpi-kta-qr-box{
  width:78%!important;height:auto!important;aspect-ratio:1!important;
  padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
.hpi-kta-back .hpi-kta-qr-box img,
.hpi-kta-back .hpi-kta-qr-box canvas,
.hpi-kta-back .hpi-kta-qr-box svg{
  width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;
}

/* white information box */
.hpi-kta-back .hpi-kta-proof{
  position:absolute!important;left:13.5%!important;right:13.5%!important;top:60.2%!important;height:5.3%!important;
  color:#0b376a!important;font-size:1.17mm!important;font-weight:750!important;line-height:1.25!important;
  text-align:center!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:6!important;
}
.hpi-kta-back .hpi-kta-proof strong{color:#0b376a!important}
.hpi-kta-back .hpi-kta-secretariat{
  position:absolute!important;left:14.5%!important;right:14.5%!important;top:65.65%!important;height:10.0%!important;
  color:#0b376a!important;text-align:left!important;display:flex!important;flex-direction:column!important;gap:.35mm!important;
  justify-content:center!important;z-index:6!important;overflow:hidden!important;
}
.hpi-kta-back .hpi-kta-secretariat strong{
  color:#d6a400!important;font-size:1.26mm!important;font-weight:950!important;line-height:1.05!important;
}
.hpi-kta-back .hpi-contact-row{
  display:grid!important;grid-template-columns:2mm 1fr!important;align-items:center!important;gap:.6mm!important;
  min-height:1.45mm!important;color:#0b376a!important;
}
.hpi-kta-back .hpi-contact-row i{font-style:normal!important;font-size:1.1mm!important}
.hpi-kta-back .hpi-contact-row b{
  font-size:1.05mm!important;font-weight:750!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
.hpi-kta-back .hpi-contact-empty{font-size:1.05mm!important;color:#64748b!important}

/* holographic strip */
.hpi-kta-back .hpi-kta-security{
  position:absolute!important;left:5.0%!important;right:5.0%!important;top:84.0%!important;height:4.65%!important;
  border:0!important;border-radius:1mm!important;background:transparent!important;overflow:hidden!important;z-index:6!important;
}
.hpi-kta-back .hpi-kta-security img{width:100%!important;height:100%!important;object-fit:cover!important}

/* validity sits in white box on the red footer */
.hpi-kta-back .hpi-kta-validity{
  position:absolute!important;left:11.0%!important;right:11.0%!important;top:92.05%!important;height:4.4%!important;
  display:grid!important;grid-template-columns:auto 1fr!important;align-items:center!important;justify-content:center!important;
  gap:3%!important;background:transparent!important;color:#9f1111!important;padding:0 3%!important;z-index:6!important;
}
.hpi-kta-back .hpi-kta-validity span{font-size:1.22mm!important;font-weight:900!important;color:#9f1111!important}
.hpi-kta-back .hpi-kta-validity strong{
  font-size:1.42mm!important;font-weight:950!important;color:#0b376a!important;
  white-space:nowrap!important;text-align:right!important;
}
.hpi-kta-back .hpi-kta-validity small{display:none!important}

/* =========================================================
   REV12 — PROFIL NASIONAL ASSET PREVIEW
   ========================================================= */
.hpi-national-asset-preview.asset-load-failed img{display:none!important}
.asset-failed-message{display:none;color:#b42318;font-size:12px;font-weight:800;text-align:center;padding:10px}
.hpi-national-asset-preview.asset-load-failed .asset-failed-message{display:block}
.hpi-asset-url{font-size:11px;color:#64748b;word-break:break-all;min-height:34px}

/* =========================================================
   REV12 — REPORT SEARCHABLE DROPDOWN MUST FLOAT ABOVE CONTENT
   ========================================================= */
.report-mobile-surface,
.report-mobile-surface .report-control,
.report-mobile-surface .report-toolbar-top,
.report-mobile-surface .inline-field,
.report-mobile-surface .searchable-select-wrapper{
  overflow:visible!important;
}
.report-mobile-surface .report-control{
  position:relative!important;z-index:500!important;
}
.report-mobile-surface .report-toolbar-top{
  position:relative!important;z-index:600!important;
}
.report-mobile-surface .searchable-select-wrapper{
  position:relative!important;z-index:800!important;
}
.report-mobile-surface .searchable-select-dropdown{
  position:absolute!important;z-index:99999!important;
  top:calc(100% + 6px)!important;left:0!important;right:0!important;
  max-height:360px!important;overflow:auto!important;
  background:#fff!important;box-shadow:0 18px 44px rgba(15,23,42,.22)!important;
}
.report-mobile-surface>.notice,
.report-mobile-surface>.report-summary-grid,
.report-mobile-surface>.card:not(.report-control){
  position:relative!important;z-index:1!important;
}


/* =========================================================
   SPE HPI REV13 — KTA HEADER + PRIVATE NATIONAL ASSETS
   2026-08-16
   ========================================================= */
/* REV5 sempat menyembunyikan .hpi-kta-logo-row dengan selector yang lebih
   spesifik. Override ini memastikan logo dinamis tampil di atas header mask. */
.hpi-kta-card .hpi-kta-logo-row,
.hpi-kta-card .hpi-kta-logo-row.back{
  display:grid!important;
  position:absolute!important;
  left:7.5%!important;
  right:7.5%!important;
  top:3.2%!important;
  height:14.2%!important;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr)!important;
  gap:4.5%!important;
  align-items:center!important;
  z-index:8!important;
}
.hpi-kta-card .hpi-kta-logo-row>img{
  width:100%!important;
  height:100%!important;
  max-width:21.5mm!important;
  max-height:11.8mm!important;
  object-fit:contain!important;
  justify-self:center!important;
  display:block!important;
}
.hpi-kta-card .hpi-kta-logo-divider{
  display:block!important;
  width:1px!important;
  height:80%!important;
  background:#123f7a!important;
  justify-self:center!important;
}

/* Pastikan mask hanya menutup logo baked-in template, tanpa menutup title/bar. */
.hpi-kta-card .hpi-kta-header-mask{
  left:1%!important;
  right:1%!important;
  top:1%!important;
  height:18.15%!important;
  background:#fff!important;
  z-index:2!important;
  display:block!important;
}

/* Preview aset private tidak boleh memperlihatkan ikon gambar rusak. */
.hpi-national-asset-preview img{
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.hpi-national-asset-preview.asset-load-failed img{display:none!important}
.hpi-national-asset-preview.asset-load-failed .asset-failed-message{display:block!important}

/* Hindari broken-image icon pada TTD/stempel/security saat signed URL sedang direfresh. */
.hpi-kta-sign-image img[src=""],
.hpi-kta-security img[src=""],
.hpi-kta-stamp[src=""]{display:none!important}

/* =========================================================
   SPE HPI REV14 — KTA LAYOUT REFERENCE + ASSET UPLOAD FIX
   2026-08-16
   Reference layout: photo/name/data centered on front,
   signatures on white footer; QR/proof/contact/security/red
   validity footer on back. Template artwork remains sourced
   from assets/nasional.
   ========================================================= */

/* National asset upload controls must remain above any card decoration. */
.hpi-national-assets-grid,
.hpi-national-asset-card,
.hpi-national-asset-card input,
.hpi-national-upload-btn{
  position:relative!important;
  z-index:2!important;
  pointer-events:auto!important;
}
.hpi-national-upload-btn{
  width:100%!important;
  min-height:44px!important;
  margin:0!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
}
.hpi-national-upload-btn.is-uploading{
  opacity:.72!important;
  cursor:wait!important;
}

/* KTA base and template layer */
.hpi-kta-card{
  position:relative!important;
  width:54mm!important;
  height:85.6mm!important;
  overflow:hidden!important;
  border-radius:3.5mm!important;
  background:#fff!important;
  isolation:isolate!important;
}
.hpi-kta-card .hpi-kta-template-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  display:block!important;
  z-index:0!important;
  pointer-events:none!important;
}

/* Dynamic national logos. The white masks cover only the baked logo area,
   while leaving the template title/body untouched. */
.hpi-kta-front .hpi-kta-header-mask{
  display:block!important;
  position:absolute!important;
  left:.7%!important;
  right:.7%!important;
  top:.7%!important;
  height:20.5%!important;
  border-radius:2.9mm 2.9mm 0 0!important;
  background:rgba(255,255,255,.985)!important;
  z-index:2!important;
}
.hpi-kta-back .hpi-kta-header-mask{
  display:block!important;
  position:absolute!important;
  left:.7%!important;
  right:.7%!important;
  top:.7%!important;
  height:20.5%!important;
  border-radius:2.9mm 2.9mm 0 0!important;
  background:rgba(255,255,255,.985)!important;
  z-index:2!important;
}
.hpi-kta-card .hpi-kta-logo-row{
  display:grid!important;
  position:absolute!important;
  left:11.2%!important;
  right:11.2%!important;
  top:3.8%!important;
  height:14.4%!important;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr)!important;
  gap:6%!important;
  align-items:center!important;
  z-index:8!important;
}
.hpi-kta-back .hpi-kta-logo-row{
  top:4.3%!important;
  height:14.8%!important;
}
.hpi-kta-card .hpi-kta-logo-row>img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:20.5mm!important;
  max-height:12mm!important;
  object-fit:contain!important;
  justify-self:center!important;
}
.hpi-kta-card .hpi-kta-logo-divider{
  display:block!important;
  width:1px!important;
  height:78%!important;
  background:#123f7a!important;
  justify-self:center!important;
}

/* ---------------- FRONT ---------------- */
.hpi-kta-front .hpi-kta-photo{
  position:absolute!important;
  left:33.0%!important;
  top:31.0%!important;
  width:34.0%!important;
  height:23.3%!important;
  padding:0!important;
  overflow:hidden!important;
  border:1.05mm solid rgba(255,255,255,.97)!important;
  border-radius:2.2mm!important;
  background:#eef5ff!important;
  box-shadow:0 1.2mm 2.4mm rgba(4,36,86,.22)!important;
  z-index:6!important;
}
.hpi-kta-front .hpi-kta-photo img.kta-card-member-photo{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center top!important;
  border:0!important;
  border-radius:1.25mm!important;
}
.hpi-kta-front .hpi-kta-photo img.kta-card-member-placeholder{
  object-fit:contain!important;
  object-position:center!important;
  padding:2.2mm!important;
  background:#eef5ff!important;
}
.hpi-kta-front .hpi-photo-placeholder{display:none!important}

/* Member name becomes the visual headline below the photo, like the reference. */
.hpi-kta-front .hpi-kta-member-name{
  position:absolute!important;
  left:8.8%!important;
  right:8.8%!important;
  top:56.0%!important;
  height:6.0%!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:transparent!important;
  color:#fff!important;
  text-align:center!important;
  z-index:7!important;
}
.hpi-kta-front .hpi-kta-member-name span{display:none!important}
.hpi-kta-front .hpi-kta-member-name b{
  display:block!important;
  width:100%!important;
  color:#fff!important;
  font-size:2.35mm!important;
  line-height:1.05!important;
  font-weight:950!important;
  letter-spacing:.05mm!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:0 .35mm .75mm rgba(5,35,88,.38)!important;
}

/* Three simple identity rows on blue body; no white cards. */
.hpi-kta-front .hpi-kta-data{
  position:absolute!important;
  left:10.7%!important;
  right:10.7%!important;
  top:63.0%!important;
  height:14.2%!important;
  padding:0!important;
  display:grid!important;
  grid-template-rows:repeat(3,1fr)!important;
  gap:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  z-index:7!important;
}
.hpi-kta-front .hpi-kta-data>div{
  position:relative!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:35% 65%!important;
  align-items:center!important;
  gap:0!important;
  padding:0 1.3%!important;
  border:0!important;
  border-bottom:.30mm solid #ffd31a!important;
  background:transparent!important;
}
.hpi-kta-front .hpi-kta-data>div:first-child{
  border-top:.30mm solid #ffd31a!important;
}
.hpi-kta-front .hpi-kta-data>div::after{
  content:""!important;
  position:absolute!important;
  left:34.5%!important;
  top:25%!important;
  bottom:25%!important;
  width:.22mm!important;
  background:rgba(255,255,255,.9)!important;
}
.hpi-kta-front .hpi-kta-data span,
.hpi-kta-front .hpi-kta-data b{
  min-width:0!important;
  color:#fff!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.hpi-kta-front .hpi-kta-data span{
  padding-left:.7mm!important;
  font-size:1.20mm!important;
  font-weight:800!important;
  letter-spacing:.01mm!important;
}
.hpi-kta-front .hpi-kta-data b{
  padding-left:1.6mm!important;
  font-size:1.36mm!important;
  font-weight:950!important;
}

/* White signature footer inspired by the reference layout. */
.hpi-kta-front .hpi-kta-front-sign-panel{
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:79.0%!important;
  bottom:0!important;
  background:linear-gradient(to bottom,#fff 0,#fff 89%,#d20a0a 89%,#b90000 100%)!important;
  border-top:.7mm solid #d20a0a!important;
  z-index:5!important;
  pointer-events:none!important;
}
.hpi-kta-front .hpi-kta-signatures{
  position:absolute!important;
  left:8.2%!important;
  right:8.2%!important;
  top:80.4%!important;
  height:14.8%!important;
  display:grid!important;
  grid-template-columns:36% 36%!important;
  justify-content:space-between!important;
  align-items:center!important;
  z-index:8!important;
}
.hpi-kta-front .hpi-kta-sign-col{
  width:100%!important;
  height:100%!important;
  display:grid!important;
  grid-template-rows:20% 52% 28%!important;
  align-items:center!important;
  justify-items:center!important;
  text-align:center!important;
}
.hpi-kta-front .hpi-kta-sign-title{
  color:#111827!important;
  font-size:1.05mm!important;
  line-height:1!important;
  font-weight:800!important;
}
.hpi-kta-front .hpi-kta-sign-image{
  width:100%!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.hpi-kta-front .hpi-kta-sign-image img{
  display:block!important;
  max-width:95%!important;
  max-height:100%!important;
  object-fit:contain!important;
  mix-blend-mode:multiply!important;
}
.hpi-kta-front .hpi-kta-sign-name{
  width:100%!important;
  padding:.5mm 0 0!important;
  border-bottom:.25mm solid #173f91!important;
  color:#123f8f!important;
  font-size:1.02mm!important;
  line-height:1.05!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.hpi-kta-front .hpi-kta-stamp{
  display:block!important;
  position:absolute!important;
  left:43.2%!important;
  top:83.7%!important;
  width:13.6%!important;
  height:8.7%!important;
  object-fit:contain!important;
  opacity:.68!important;
  mix-blend-mode:multiply!important;
  z-index:7!important;
}

/* ---------------- BACK ---------------- */
.hpi-kta-back .hpi-kta-qr-wrap{
  position:absolute!important;
  left:25.5%!important;
  top:28.2%!important;
  width:49%!important;
  height:27.2%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:7!important;
}
.hpi-kta-back .hpi-kta-qr-box{
  width:100%!important;
  max-width:27.8mm!important;
  height:auto!important;
  aspect-ratio:1/1!important;
  padding:1.3mm!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#fff!important;
  border:.55mm solid #fff!important;
  outline:.35mm solid #1b63b8!important;
  border-radius:2.4mm!important;
  box-shadow:0 1mm 2.2mm rgba(0,38,96,.18)!important;
}
.hpi-kta-back .hpi-kta-qr-box img,
.hpi-kta-back .hpi-kta-qr-box canvas,
.hpi-kta-back .hpi-kta-qr-box svg{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
}
.hpi-kta-back .hpi-qr-missing{
  color:#24476e!important;
  font-size:1.15mm!important;
  font-weight:900!important;
  text-align:center!important;
}
.hpi-kta-back .hpi-kta-proof{
  position:absolute!important;
  left:10.5%!important;
  right:10.5%!important;
  top:57.1%!important;
  height:7.3%!important;
  display:block!important;
  padding:.65mm 0 0!important;
  color:#fff!important;
  font-size:1.28mm!important;
  line-height:1.35!important;
  font-weight:650!important;
  text-align:center!important;
  text-shadow:0 .25mm .55mm rgba(5,37,90,.35)!important;
  z-index:7!important;
}
.hpi-kta-back .hpi-kta-proof strong{color:#fff!important;font-weight:900!important}
.hpi-kta-back .hpi-kta-secretariat{
  position:absolute!important;
  left:11.0%!important;
  right:10.0%!important;
  top:65.0%!important;
  height:15.8%!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:.30mm!important;
  overflow:hidden!important;
  color:#fff!important;
  text-align:left!important;
  z-index:7!important;
}
.hpi-kta-back .hpi-kta-secretariat>strong{
  display:block!important;
  margin:0 0 .45mm!important;
  color:#ffd21a!important;
  font-size:1.42mm!important;
  line-height:1.05!important;
  font-weight:950!important;
}
.hpi-kta-back .hpi-contact-row{
  display:grid!important;
  grid-template-columns:2.2mm minmax(0,1fr)!important;
  align-items:center!important;
  gap:.55mm!important;
  min-height:1.55mm!important;
  margin:0!important;
  color:#fff!important;
}
.hpi-kta-back .hpi-contact-row i{
  color:#fff!important;
  font-style:normal!important;
  font-size:1.15mm!important;
  text-align:center!important;
}
.hpi-kta-back .hpi-contact-row b{
  min-width:0!important;
  color:#fff!important;
  font-size:1.08mm!important;
  line-height:1.15!important;
  font-weight:700!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.hpi-kta-back .hpi-contact-empty{color:#fff!important;font-size:1.05mm!important}

.hpi-kta-back .hpi-kta-security{
  position:absolute!important;
  left:4.8%!important;
  right:4.8%!important;
  top:82.3%!important;
  height:4.8%!important;
  overflow:hidden!important;
  border:.20mm solid rgba(255,255,255,.85)!important;
  border-radius:.8mm!important;
  background:rgba(255,255,255,.7)!important;
  z-index:8!important;
}
.hpi-kta-back .hpi-kta-security img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

.hpi-kta-back .hpi-kta-back-footer{
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:88.0%!important;
  bottom:0!important;
  background:linear-gradient(180deg,#d20b0b,#b60000)!important;
  z-index:5!important;
  pointer-events:none!important;
}
.hpi-kta-back .hpi-kta-validity{
  position:absolute!important;
  left:7.5%!important;
  right:7.5%!important;
  top:89.0%!important;
  height:9.6%!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:auto 1fr!important;
  grid-template-rows:3.3mm 3.4mm!important;
  column-gap:1.2mm!important;
  align-content:center!important;
  align-items:center!important;
  background:transparent!important;
  color:#fff!important;
  text-align:center!important;
  z-index:8!important;
}
.hpi-kta-back .hpi-kta-validity span{
  color:#fff!important;
  font-size:1.18mm!important;
  line-height:1!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
.hpi-kta-back .hpi-kta-validity strong{
  color:#fff!important;
  font-size:1.48mm!important;
  line-height:1!important;
  font-weight:950!important;
  text-align:left!important;
  white-space:nowrap!important;
}
.hpi-kta-back .hpi-kta-validity small{
  display:block!important;
  grid-column:1/3!important;
  align-self:start!important;
  color:#fff!important;
  font-size:.88mm!important;
  line-height:1.18!important;
  font-weight:600!important;
  text-align:center!important;
}

/* Watermark remains non-interactive and above dynamic content. */
.hpi-kta-card .hpi-kta-watermark{z-index:30!important;pointer-events:none!important}

@media print{
  .hpi-kta-card,
  .hpi-kta-card *{
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
}
/* REV14 final separator consistency */
.hpi-kta-front .hpi-kta-data>div:last-child{border-bottom:.30mm solid #ffd31a!important}


/* REV15 - member update fallback + KTA readability/layout refinement */
.hpi-kta-front .hpi-kta-photo{
  top:23.8mm!important;
  left:17.2mm!important;
  width:19.8mm!important;
  height:24.2mm!important;
  z-index:8!important;
}
.hpi-kta-front .hpi-kta-member-name{
  top:50.1mm!important;
  left:5.2mm!important;
  right:5.2mm!important;
  z-index:9!important;
  text-align:center!important;
}
.hpi-kta-front .hpi-kta-member-name b{
  display:inline-block!important;
  max-width:100%!important;
  padding:.55mm 1.35mm!important;
  border-radius:1.1mm!important;
  background:linear-gradient(180deg, rgba(8,51,95,.88), rgba(8,51,95,.68))!important;
  color:#ffffff!important;
  font-size:2.35mm!important;
  line-height:1.15!important;
  letter-spacing:.02mm!important;
  text-transform:uppercase!important;
  box-shadow:0 .45mm 1.2mm rgba(0,0,0,.18)!important;
}
.hpi-kta-front .hpi-kta-data{
  left:5.1mm!important;
  right:5.1mm!important;
  top:55.8mm!important;
  padding:1.05mm 1.25mm!important;
  border-radius:1.2mm!important;
  background:linear-gradient(180deg, rgba(6,43,84,.82), rgba(7,57,113,.52))!important;
  box-shadow:0 .5mm 1.4mm rgba(1,26,56,.18)!important;
  z-index:8!important;
}
.hpi-kta-front .hpi-kta-data>div{
  grid-template-columns:17.8mm 1fr!important;
  min-height:3.75mm!important;
  border-bottom:.18mm solid rgba(255,211,26,.82)!important;
}
.hpi-kta-front .hpi-kta-data span{
  font-size:1.48mm!important;
  color:#ffffff!important;
  font-weight:900!important;
}
.hpi-kta-front .hpi-kta-data b{
  font-size:1.62mm!important;
  color:#ffffff!important;
  font-weight:950!important;
}
.hpi-kta-front .hpi-kta-front-sign-panel{
  top:72.6mm!important;
  bottom:4.8mm!important;
  left:1.6mm!important;
  right:1.6mm!important;
  background:rgba(255,255,255,.96)!important;
}
.hpi-kta-front .hpi-kta-signatures{
  left:5.2mm!important;
  right:5.2mm!important;
  bottom:4.9mm!important;
  height:11.9mm!important;
  gap:11.8mm!important;
  z-index:8!important;
}
.hpi-kta-front .hpi-kta-sign-title{
  color:#1f2937!important;
}
.hpi-kta-front .hpi-kta-sign-name{
  color:#083f82!important;
}
.hpi-kta-front .hpi-kta-stamp{
  left:21.7mm!important;
  bottom:4.8mm!important;
  width:10.2mm!important;
  height:10.2mm!important;
}
.hpi-kta-back .hpi-kta-proof{
  left:5.4mm!important;
  right:5.4mm!important;
  top:51.9mm!important;
  font-size:1.72mm!important;
  line-height:1.38!important;
  text-shadow:0 .35mm .7mm rgba(0,0,0,.22)!important;
}
.hpi-kta-back .hpi-kta-secretariat{
  left:6.2mm!important;
  right:4.6mm!important;
  top:61.7mm!important;
  gap:.55mm!important;
  z-index:8!important;
}
.hpi-kta-back .hpi-kta-secretariat>strong{
  font-size:1.75mm!important;
}
.hpi-kta-back .hpi-contact-row{
  gap:.55mm!important;
}
.hpi-kta-back .hpi-contact-row b{
  font-size:1.28mm!important;
  line-height:1.18!important;
}
.hpi-kta-back .hpi-kta-security{
  left:4.0mm!important;
  right:4.0mm!important;
  bottom:10.2mm!important;
  height:3.9mm!important;
  border:.18mm solid rgba(255,255,255,.86)!important;
  border-radius:.85mm!important;
  background:rgba(255,255,255,.84)!important;
  overflow:hidden!important;
}
.hpi-kta-back .hpi-kta-back-footer{
  left:0!important;
  right:0!important;
  top:auto!important;
  bottom:0!important;
  height:10.3mm!important;
  background:linear-gradient(180deg,#d20b0b 0%, #b70000 100%)!important;
}
.hpi-kta-back .hpi-kta-validity{
  left:4.8mm!important;
  right:4.8mm!important;
  top:auto!important;
  bottom:1.45mm!important;
  height:6.2mm!important;
  padding:0 1.8mm!important;
  display:grid!important;
  grid-template-columns:4.3mm 1fr!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  column-gap:1.1mm!important;
  row-gap:0!important;
  background:#ffffff!important;
  border:.28mm solid rgba(255,255,255,.96)!important;
  border-radius:1.4mm!important;
  color:#0b376a!important;
  box-shadow:0 .5mm 1.2mm rgba(0,0,0,.14)!important;
  z-index:9!important;
}
.hpi-kta-back .hpi-kta-validity-icon{
  grid-row:1 / span 2!important;
  grid-column:1!important;
  font-style:normal!important;
  font-size:2.35mm!important;
  line-height:1!important;
  justify-self:center!important;
  align-self:center!important;
}
.hpi-kta-back .hpi-kta-validity-copy{
  grid-column:2!important;
  grid-row:1 / span 2!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  width:100%!important;
}
.hpi-kta-back .hpi-kta-validity span{
  display:block!important;
  color:#b10c0c!important;
  font-size:1.18mm!important;
  font-weight:900!important;
  line-height:1.05!important;
  letter-spacing:.08mm!important;
}
.hpi-kta-back .hpi-kta-validity strong{
  display:block!important;
  color:#0b376a!important;
  font-size:1.58mm!important;
  line-height:1.1!important;
  font-weight:950!important;
  text-align:center!important;
  margin-top:.22mm!important;
}
.hpi-kta-back .hpi-kta-validity small{
  display:none!important;
}


/* REV16 - KTA readability / spacing / footer refinement */
.hpi-kta-front .hpi-kta-photo{
  top:22.7mm!important;
  left:16.9mm!important;
  width:19.2mm!important;
  height:22.9mm!important;
  border-radius:1.7mm!important;
}
.hpi-kta-front .hpi-kta-member-name{
  top:49.0mm!important;
  left:4.8mm!important;
  right:4.8mm!important;
}
.hpi-kta-front .hpi-kta-member-name b{
  padding:.48mm 1.1mm!important;
  border-radius:1.8mm!important;
  background:linear-gradient(180deg, rgba(9,44,86,.94), rgba(8,56,110,.78))!important;
  font-size:2.05mm!important;
  letter-spacing:.01mm!important;
}
.hpi-kta-front .hpi-kta-data{
  top:55.6mm!important;
  left:4.9mm!important;
  right:4.9mm!important;
  padding:.95mm 1.15mm!important;
  border-radius:1.35mm!important;
  background:linear-gradient(180deg, rgba(5,34,69,.74), rgba(6,51,101,.48))!important;
}
.hpi-kta-front .hpi-kta-data>div{
  min-height:3.55mm!important;
  grid-template-columns:16.8mm 1fr!important;
}
.hpi-kta-front .hpi-kta-data span{font-size:1.38mm!important}
.hpi-kta-front .hpi-kta-data b{font-size:1.56mm!important}
.hpi-kta-front .hpi-kta-front-sign-panel{
  top:73.2mm!important;
  left:1.5mm!important;
  right:1.5mm!important;
  bottom:4.2mm!important;
  border-radius:2.2mm 2.2mm 1.3mm 1.3mm!important;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96))!important;
  box-shadow:0 -.35mm .9mm rgba(0,0,0,.06) inset!important;
}
.hpi-kta-front .hpi-kta-signatures{
  left:4.9mm!important;
  right:4.9mm!important;
  bottom:4.45mm!important;
  height:12.7mm!important;
  gap:10.2mm!important;
}
.hpi-kta-front .hpi-kta-sign-col{
  grid-template-rows:2.9mm 6.3mm 3.2mm!important;
}
.hpi-kta-front .hpi-kta-sign-title{
  font-size:1.62mm!important;
  color:#243447!important;
}
.hpi-kta-front .hpi-kta-sign-image{height:6.3mm!important}
.hpi-kta-front .hpi-kta-sign-image img{max-height:6.1mm!important;max-width:16mm!important}
.hpi-kta-front .hpi-kta-sign-name{
  font-size:1.58mm!important;
  color:#0a3e7b!important;
}
.hpi-kta-front .hpi-kta-stamp{
  width:9.8mm!important;
  height:9.8mm!important;
  left:21.9mm!important;
  bottom:4.9mm!important;
  opacity:.78!important;
}
.hpi-kta-back .hpi-kta-proof{
  top:51.4mm!important;
  left:5.4mm!important;
  right:5.4mm!important;
  padding:1.05mm 1.3mm!important;
  border-radius:1.55mm!important;
  background:linear-gradient(180deg, rgba(7,50,100,.82), rgba(7,50,100,.56))!important;
  color:#ffffff!important;
  font-size:1.72mm!important;
  line-height:1.38!important;
  text-shadow:none!important;
}
.hpi-kta-back .hpi-kta-proof strong{color:#ffd940!important}
.hpi-kta-back .hpi-kta-secretariat{
  left:5.8mm!important;
  right:5.0mm!important;
  top:61.6mm!important;
  padding:1.0mm 1.2mm!important;
  border-radius:1.45mm!important;
  background:linear-gradient(180deg, rgba(6,46,93,.78), rgba(6,46,93,.46))!important;
}
.hpi-kta-back .hpi-kta-secretariat>strong{
  font-size:1.78mm!important;
  line-height:1.05!important;
}
.hpi-kta-back .hpi-contact-row{
  grid-template-columns:2.8mm 1fr!important;
  gap:.45mm!important;
}
.hpi-kta-back .hpi-contact-row i{color:#ffe07d!important}
.hpi-kta-back .hpi-contact-row b{
  font-size:1.23mm!important;
  line-height:1.16!important;
  color:#ffffff!important;
}
.hpi-kta-back .hpi-kta-security{
  left:4.2mm!important;
  right:4.2mm!important;
  bottom:10.4mm!important;
  height:3.65mm!important;
}
.hpi-kta-back .hpi-kta-back-footer{
  height:10.9mm!important;
  background:linear-gradient(180deg,#db0e0e 0%, #be0000 100%)!important;
}
.hpi-kta-back .hpi-kta-validity{
  left:4.7mm!important;
  right:4.7mm!important;
  bottom:1.2mm!important;
  height:6.95mm!important;
  padding:0 1.9mm!important;
  grid-template-columns:4.2mm 1fr!important;
  border-radius:1.65mm!important;
}
.hpi-kta-back .hpi-kta-validity-icon{
  font-size:2.15mm!important;
  color:#2f6fb2!important;
}
.hpi-kta-back .hpi-kta-validity-copy{
  align-items:center!important;
  justify-content:center!important;
}
.hpi-kta-back .hpi-kta-validity span{
  font-size:1.12mm!important;
  line-height:1.02!important;
  text-align:center!important;
}
.hpi-kta-back .hpi-kta-validity strong{
  font-size:1.52mm!important;
  line-height:1.1!important;
  text-align:center!important;
  margin-top:.15mm!important;
}


/* REV18 - status/photo persistence and final KTA polish */
.hpi-kta-front .hpi-kta-member-name{
  top:50.0mm!important;
  left:4.9mm!important;
  right:4.9mm!important;
  z-index:10!important;
}
.hpi-kta-front .hpi-kta-member-name b{
  font-size:2.02mm!important;
  padding:.44mm 1.0mm!important;
}
.hpi-kta-front .hpi-kta-front-sign-panel{
  top:74.0mm!important;
  left:1.6mm!important;
  right:1.6mm!important;
  bottom:4.2mm!important;
  border-radius:2.5mm 2.5mm 1.4mm 1.4mm!important;
}
.hpi-kta-front .hpi-kta-signatures{
  left:4.7mm!important;
  right:4.7mm!important;
  bottom:4.2mm!important;
  height:12.3mm!important;
  gap:10.0mm!important;
  align-items:end!important;
}
.hpi-kta-front .hpi-kta-sign-col{
  grid-template-rows:2.5mm 6.1mm 2.8mm!important;
  align-content:end!important;
}
.hpi-kta-front .hpi-kta-sign-title{
  font-size:1.38mm!important;
  line-height:1.05!important;
  color:#1f2937!important;
  margin-bottom:.15mm!important;
}
.hpi-kta-front .hpi-kta-sign-image{height:6.1mm!important}
.hpi-kta-front .hpi-kta-sign-name{
  font-size:1.42mm!important;
  line-height:1.02!important;
}
.hpi-kta-front .hpi-kta-stamp{
  bottom:4.55mm!important;
  opacity:.72!important;
}
.hpi-kta-back .hpi-kta-proof{
  top:52.0mm!important;
  left:5.6mm!important;
  right:5.6mm!important;
  padding:.95mm 1.15mm!important;
  font-size:1.56mm!important;
  line-height:1.32!important;
  text-align:center!important;
}
.hpi-kta-back .hpi-kta-proof span,
.hpi-kta-back .hpi-kta-proof strong{display:inline!important}
.hpi-kta-back .hpi-kta-secretariat{
  top:61.8mm!important;
  left:5.9mm!important;
  right:5.2mm!important;
  padding:.95mm 1.1mm!important;
}
.hpi-kta-back .hpi-kta-secretariat>strong{
  margin-bottom:.38mm!important;
}
.hpi-kta-back .hpi-contact-row b{
  font-size:1.18mm!important;
  line-height:1.14!important;
}
.hpi-kta-back .hpi-kta-security{
  bottom:10.8mm!important;
  height:3.45mm!important;
}
.hpi-kta-back .hpi-kta-back-footer{
  height:11.7mm!important;
  background:linear-gradient(180deg,#d60f0f 0%, #b90000 100%)!important;
}
.hpi-kta-back .hpi-kta-validity{
  left:5.2mm!important;
  right:5.2mm!important;
  bottom:1.0mm!important;
  height:8.2mm!important;
  padding:0!important;
  background:transparent!important;
  border:none!important;
  border-radius:0!important;
  box-shadow:none!important;
  color:#ffffff!important;
  display:grid!important;
  grid-template-columns:4.4mm 1fr!important;
  grid-template-rows:2.7mm 2.7mm 2.1mm!important;
  column-gap:1.0mm!important;
  align-items:center!important;
}
.hpi-kta-back .hpi-kta-validity-icon{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  font-size:2.5mm!important;
  color:#ffffff!important;
  justify-self:center!important;
}
.hpi-kta-back .hpi-kta-validity-copy{
  grid-column:2!important;
  grid-row:1 / span 2!important;
  align-items:flex-start!important;
  justify-content:center!important;
  text-align:left!important;
}
.hpi-kta-back .hpi-kta-validity span{
  color:#ffffff!important;
  font-size:1.12mm!important;
  font-weight:900!important;
  letter-spacing:.02mm!important;
  text-align:left!important;
}
.hpi-kta-back .hpi-kta-validity strong{
  color:#ffffff!important;
  font-size:1.66mm!important;
  font-weight:950!important;
  margin-top:.15mm!important;
  text-align:left!important;
}
.hpi-kta-back .hpi-kta-validity small{
  display:block!important;
  grid-column:1 / 3!important;
  grid-row:3!important;
  color:#ffffff!important;
  font-size:.95mm!important;
  line-height:1.1!important;
  text-align:center!important;
}


/* REV19 - precision pass for KTA front/back based on approved reference */
.hpi-kta-front .hpi-kta-member-name{
  top:51.0mm!important;
  left:4.8mm!important;
  right:4.8mm!important;
}
.hpi-kta-front .hpi-kta-member-name b{
  font-size:1.98mm!important;
  line-height:1.08!important;
  padding:.42mm 1mm!important;
}
.hpi-kta-front .hpi-kta-front-sign-panel{
  top:72.1mm!important;
  left:1.7mm!important;
  right:1.7mm!important;
  bottom:4.15mm!important;
  border-radius:2.8mm!important;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,251,255,.97))!important;
}
.hpi-kta-front .hpi-kta-signatures{
  left:4.6mm!important;
  right:4.6mm!important;
  bottom:4.18mm!important;
  height:11.8mm!important;
  gap:9.8mm!important;
}
.hpi-kta-front .hpi-kta-sign-col{
  grid-template-rows:2.2mm 6mm 2.6mm!important;
}
.hpi-kta-front .hpi-kta-sign-title{
  font-size:1.32mm!important;
  line-height:1!important;
  margin:0!important;
  align-self:end!important;
}
.hpi-kta-front .hpi-kta-sign-image{
  height:6mm!important;
  align-self:end!important;
}
.hpi-kta-front .hpi-kta-sign-name{
  font-size:1.35mm!important;
  line-height:1.02!important;
}
.hpi-kta-front .hpi-kta-stamp{
  bottom:4.15mm!important;
  width:9.5mm!important;
  height:9.5mm!important;
  opacity:.7!important;
}
.hpi-kta-back .hpi-kta-proof{
  top:51.0mm!important;
  left:5.4mm!important;
  right:5.4mm!important;
  padding:.75mm 1mm!important;
  font-size:1.43mm!important;
  line-height:1.24!important;
  border-radius:1.35mm!important;
}
.hpi-kta-back .hpi-kta-proof strong{color:#ffd63a!important}
.hpi-kta-back .hpi-kta-secretariat{
  top:60.0mm!important;
  left:5.9mm!important;
  right:5.1mm!important;
  padding:.82mm 1mm!important;
  border-radius:1.35mm!important;
}
.hpi-kta-back .hpi-kta-secretariat>strong{
  font-size:1.72mm!important;
  margin-bottom:.32mm!important;
}
.hpi-kta-back .hpi-contact-row b{
  font-size:1.12mm!important;
  line-height:1.1!important;
}
.hpi-kta-back .hpi-kta-security{
  left:4.1mm!important;
  right:4.1mm!important;
  bottom:12.05mm!important;
  height:3.1mm!important;
  border-radius:.72mm!important;
}
.hpi-kta-back .hpi-kta-back-footer{
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:11.85mm!important;
  background:linear-gradient(180deg,#c90909 0%, #af0000 100%)!important;
}
.hpi-kta-back .hpi-kta-validity{
  left:4.2mm!important;
  right:4.2mm!important;
  bottom:.85mm!important;
  height:9.6mm!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:3.9mm auto!important;
  grid-template-rows:2.25mm 2.7mm 2.4mm!important;
  align-content:start!important;
  justify-content:center!important;
  column-gap:1.0mm!important;
  row-gap:.15mm!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
}
.hpi-kta-back .hpi-kta-validity-icon{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  width:3.3mm!important;
  height:3.3mm!important;
  color:#ffffff!important;
  align-self:start!important;
  justify-self:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.hpi-kta-back .hpi-kta-validity-icon svg{
  width:100%!important;
  height:100%!important;
  display:block!important;
}
.hpi-kta-back .hpi-kta-validity-copy{
  grid-column:2!important;
  grid-row:1 / span 2!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  text-align:left!important;
  min-width:0!important;
}
.hpi-kta-back .hpi-kta-validity span{
  color:#ffffff!important;
  font-size:1.06mm!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.02mm!important;
  text-align:left!important;
  margin-top:.05mm!important;
}
.hpi-kta-back .hpi-kta-validity strong{
  color:#ffffff!important;
  font-size:1.78mm!important;
  line-height:1.05!important;
  font-weight:950!important;
  text-align:left!important;
  margin-top:.28mm!important;
}
.hpi-kta-back .hpi-kta-validity small{
  display:block!important;
  grid-column:1 / 3!important;
  grid-row:3!important;
  color:#ffffff!important;
  font-size:.92mm!important;
  line-height:1.02!important;
  text-align:center!important;
  padding-top:.18mm!important;
}


/* REV20 - footer dibuat sama seperti referensi: icon + heading rapat, semua center */
.hpi-kta-back .hpi-kta-validity{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  bottom:1.15mm!important;
  width:34.5mm!important;
  height:auto!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:3.3mm auto!important;
  grid-template-rows:auto auto!important;
  column-gap:.55mm!important;
  row-gap:.22mm!important;
  align-items:start!important;
  justify-content:center!important;
  align-content:start!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
}
.hpi-kta-back .hpi-kta-validity-icon{
  grid-column:1!important;
  grid-row:1!important;
  width:3.05mm!important;
  height:3.05mm!important;
  color:#ffffff!important;
  align-self:start!important;
  justify-self:end!important;
  margin-top:.1mm!important;
}
.hpi-kta-back .hpi-kta-validity-icon svg{
  width:100%!important;
  height:100%!important;
  display:block!important;
}
.hpi-kta-back .hpi-kta-validity-copy{
  grid-column:2!important;
  grid-row:1!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  text-align:left!important;
  min-width:0!important;
}
.hpi-kta-back .hpi-kta-validity span{
  display:block!important;
  color:#ffffff!important;
  font-size:1.02mm!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.02mm!important;
  text-align:left!important;
  margin:0!important;
}
.hpi-kta-back .hpi-kta-validity strong{
  display:block!important;
  color:#ffffff!important;
  font-size:1.72mm!important;
  line-height:1.05!important;
  font-weight:950!important;
  text-align:left!important;
  margin:.22mm 0 0!important;
}
.hpi-kta-back .hpi-kta-validity small{
  display:block!important;
  grid-column:1 / 3!important;
  grid-row:2!important;
  color:#ffffff!important;
  font-size:.93mm!important;
  line-height:1.05!important;
  font-weight:600!important;
  text-align:center!important;
  padding-top:.08mm!important;
  margin:0 auto!important;
  width:100%!important;
}


/* REV21 - perapihan foto, blok tanda tangan, nama pengurus, dan security panel */
.hpi-kta-front .hpi-kta-photo{
  top:21.8mm!important;
  left:16.9mm!important;
  width:19.2mm!important;
  height:22.9mm!important;
}
.hpi-kta-front .hpi-kta-member-name{
  top:51.4mm!important;
  left:4.8mm!important;
  right:4.8mm!important;
}
.hpi-kta-front .hpi-kta-front-sign-panel{
  top:69.9mm!important;
  left:1.7mm!important;
  right:1.7mm!important;
  bottom:4.1mm!important;
  border-radius:2.9mm!important;
}
.hpi-kta-front .hpi-kta-signatures{
  left:4.45mm!important;
  right:4.45mm!important;
  bottom:4.05mm!important;
  height:13.4mm!important;
  gap:9.4mm!important;
}
.hpi-kta-front .hpi-kta-sign-col{
  grid-template-rows:2.7mm 5.7mm 4.2mm!important;
  align-content:end!important;
}
.hpi-kta-front .hpi-kta-sign-title{
  font-size:1.34mm!important;
  line-height:1.02!important;
  margin:0!important;
  align-self:end!important;
}
.hpi-kta-front .hpi-kta-sign-image{
  height:5.7mm!important;
  align-self:end!important;
}
.hpi-kta-front .hpi-kta-sign-name{
  font-size:1.18mm!important;
  line-height:1.02!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  word-break:break-word!important;
  padding:.28mm .2mm 0!important;
  min-height:3.8mm!important;
}
.hpi-kta-front .hpi-kta-stamp{
  bottom:4.0mm!important;
  width:9.4mm!important;
  height:9.4mm!important;
}
.hpi-kta-back .hpi-kta-security{
  left:0!important;
  right:0!important;
  bottom:11.85mm!important;
  height:3.55mm!important;
  border-radius:0!important;
  border-left:none!important;
  border-right:none!important;
  border-bottom:none!important;
}
.hpi-kta-back .hpi-kta-security img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}


/* REV22 - alamat sekretariat dan website tidak boleh terpotong */
.hpi-kta-back .hpi-kta-secretariat{
  top:59.3mm!important;
  left:5.2mm!important;
  right:3.9mm!important;
  padding:.68mm .72mm!important;
  border-radius:1.25mm!important;
}
.hpi-kta-back .hpi-kta-secretariat>strong{
  font-size:1.66mm!important;
  margin-bottom:.26mm!important;
  line-height:1.02!important;
}
.hpi-kta-back .hpi-contact-row{
  grid-template-columns:2.45mm minmax(0,1fr)!important;
  align-items:start!important;
  gap:.38mm!important;
  min-height:auto!important;
  margin:0!important;
}
.hpi-kta-back .hpi-contact-row i{
  font-size:1.03mm!important;
  line-height:1.08!important;
  margin-top:.12mm!important;
}
.hpi-kta-back .hpi-contact-row b{
  font-size:1.02mm!important;
  line-height:1.06!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  word-break:break-word!important;
  overflow-wrap:anywhere!important;
}


/* REV23 - foto, pengurus, sekretariat, footer tanpa ikon, dan QR validation fallback */
.hpi-kta-front .hpi-kta-photo{
  top:20.9mm!important;
  left:16.9mm!important;
  width:19.2mm!important;
  height:22.9mm!important;
}
.hpi-kta-front .hpi-kta-member-name{
  top:52.0mm!important;
}
.hpi-kta-front .hpi-kta-front-sign-panel{
  top:68.9mm!important;
  left:1.55mm!important;
  right:1.55mm!important;
  bottom:4.0mm!important;
  border-radius:3.2mm!important;
}
.hpi-kta-front .hpi-kta-signatures{
  left:4.1mm!important;
  right:4.1mm!important;
  bottom:4.0mm!important;
  height:14.0mm!important;
  gap:8.7mm!important;
}
.hpi-kta-front .hpi-kta-sign-col{
  grid-template-rows:2.85mm 5.55mm 4.6mm!important;
}
.hpi-kta-front .hpi-kta-sign-title{
  font-size:1.28mm!important;
  line-height:1.02!important;
}
.hpi-kta-front .hpi-kta-sign-name{
  font-size:1.07mm!important;
  line-height:1.05!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
  text-align:center!important;
}
.hpi-kta-back .hpi-kta-secretariat{
  top:56.9mm!important;
  left:4.7mm!important;
  right:3.3mm!important;
  min-height:11.8mm!important;
  padding:.92mm 1.1mm!important;
  border-radius:1.55mm!important;
}
.hpi-kta-back .hpi-kta-secretariat>strong{
  font-size:1.8mm!important;
  margin-bottom:.36mm!important;
}
.hpi-kta-back .hpi-contact-row{
  grid-template-columns:2.55mm minmax(0,1fr)!important;
  gap:.42mm!important;
}
.hpi-kta-back .hpi-contact-row i{
  font-size:1.04mm!important;
  margin-top:.12mm!important;
}
.hpi-kta-back .hpi-contact-row b{
  font-size:.98mm!important;
  line-height:1.08!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  word-break:break-word!important;
  overflow-wrap:anywhere!important;
}
.hpi-kta-back .hpi-kta-security{
  left:0!important;
  right:0!important;
  bottom:11.55mm!important;
  height:3.55mm!important;
}
.hpi-kta-back .hpi-kta-validity{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:35.5mm!important;
  bottom:1.1mm!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.25mm!important;
  padding:0!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
}
.hpi-kta-back .hpi-kta-validity-icon{display:none!important}
.hpi-kta-back .hpi-kta-validity-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
.hpi-kta-back .hpi-kta-validity span{
  font-size:1.28mm!important;
  line-height:1.02!important;
  letter-spacing:.02mm!important;
  text-align:center!important;
}
.hpi-kta-back .hpi-kta-validity strong{
  font-size:2.18mm!important;
  line-height:1.06!important;
  margin-top:.18mm!important;
  text-align:center!important;
}
.hpi-kta-back .hpi-kta-validity small{
  display:block!important;
  color:#ffffff!important;
  font-size:1.04mm!important;
  line-height:1.08!important;
  font-weight:700!important;
  text-align:center!important;
  margin:0!important;
  width:100%!important;
}


/* REV24 - satukan panel info belakang, perbesar sekretariat, center footer */
.hpi-kta-back .hpi-kta-info-panel{
  position:absolute!important;
  top:52.1mm!important;
  left:4.1mm!important;
  right:3.2mm!important;
  min-height:15.4mm!important;
  padding:.85mm 1.05mm!important;
  border-radius:1.55mm!important;
  background:linear-gradient(180deg, rgba(5,38,84,.78), rgba(7,52,111,.56))!important;
  backdrop-filter:blur(.25mm)!important;
  z-index:3!important;
}
.hpi-kta-back .hpi-kta-proof{
  position:static!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  padding:0!important;
  margin:0 0 .65mm!important;
  background:transparent!important;
  border-radius:0!important;
  color:#ffffff!important;
  font-size:1.4mm!important;
  line-height:1.24!important;
  text-align:center!important;
}
.hpi-kta-back .hpi-kta-proof strong{color:#ffd63a!important}
.hpi-kta-back .hpi-kta-proof span{display:inline!important}
.hpi-kta-back .hpi-kta-secretariat{
  position:static!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  min-height:0!important;
  padding:0!important;
  background:transparent!important;
  border-radius:0!important;
}
.hpi-kta-back .hpi-kta-secretariat>strong{
  display:block!important;
  font-size:1.95mm!important;
  line-height:1.05!important;
  margin:0 0 .34mm!important;
}
.hpi-kta-back .hpi-contact-row{
  grid-template-columns:2.7mm minmax(0,1fr)!important;
  gap:.46mm!important;
  align-items:start!important;
}
.hpi-kta-back .hpi-contact-row i{
  font-size:1.12mm!important;
  line-height:1.08!important;
  margin-top:.15mm!important;
}
.hpi-kta-back .hpi-contact-row b{
  font-size:1.08mm!important;
  line-height:1.12!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  word-break:break-word!important;
  overflow-wrap:anywhere!important;
}
.hpi-kta-back .hpi-kta-security{
  bottom:11.6mm!important;
}
.hpi-kta-back .hpi-kta-validity{
  width:37.8mm!important;
  bottom:1.1mm!important;
}
.hpi-kta-back .hpi-kta-validity-copy{
  width:100%!important;
  align-items:center!important;
  text-align:center!important;
}
.hpi-kta-back .hpi-kta-validity span{
  font-size:1.48mm!important;
  line-height:1.03!important;
  text-align:center!important;
}
.hpi-kta-back .hpi-kta-validity strong{
  font-size:2.42mm!important;
  line-height:1.06!important;
  text-align:center!important;
}
.hpi-kta-back .hpi-kta-validity small{
  font-size:1.24mm!important;
  line-height:1.1!important;
  text-align:center!important;
}


/* REV26 - judul sekretariat literal + footer benar-benar center terhadap lebar kartu */
.hpi-kta-back .hpi-kta-secretariat>strong{
  text-align:left!important;
  letter-spacing:.04mm!important;
}
.hpi-kta-back .hpi-kta-validity{
  left:0!important;
  right:0!important;
  width:100%!important;
  max-width:none!important;
  transform:none!important;
  bottom:1.15mm!important;
  margin:0!important;
  padding:0 3.2mm!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:.24mm!important;
}
.hpi-kta-back .hpi-kta-validity-copy{
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  margin:0 auto!important;
}
.hpi-kta-back .hpi-kta-validity span,
.hpi-kta-back .hpi-kta-validity strong,
.hpi-kta-back .hpi-kta-validity small{
  width:100%!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  justify-self:center!important;
  align-self:center!important;
}
.hpi-kta-back .hpi-kta-validity span{
  display:block!important;
  margin-top:0!important;
}
.hpi-kta-back .hpi-kta-validity strong{
  display:block!important;
}
.hpi-kta-back .hpi-kta-validity small{
  display:block!important;
}


/* REV28 - lonceng notifikasi tersedia untuk Admin Nasional, Admin Daerah, dan Anggota */
.app:not(.member-app) .topbar-actions #notificationShell:not(.hidden),
.app:not(.member-app) .topbar-actions .notification-shell:not(.hidden){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
}
.app:not(.member-app) .topbar-actions #notificationButton{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}


/* REV30 - final notification bell safeguard for Admin Nasional/Daerah */
body.v151-ui #app.app:not(.member-app) .topbar-actions #notificationShell:not(.hidden),
body.v151-ui #app.app:not(.member-app) .topbar-actions .notification-shell:not(.hidden){
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
}
body.v151-ui #app.app:not(.member-app) .topbar-actions #notificationButton{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
}


/* REV32 - notification overlay stabilizer across Dashboard/Laporan/all admin pages */
#notificationOverlayPortal{
  position:fixed!important;
  inset:0!important;
  z-index:3990!important;
  pointer-events:none;
}
#notificationOverlayPortal[aria-hidden="false"]{
  pointer-events:auto;
}
body.admin-notification-portal-active #notificationOverlayPortal .notification-panel:not(.hidden){
  position:fixed!important;
  top:78px!important;
  right:18px!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:min(440px,calc(100vw - 36px))!important;
  max-width:440px!important;
  max-height:calc(100dvh - 96px)!important;
  margin:0!important;
  z-index:4010!important;
  border-radius:22px!important;
  overflow:hidden!important;
}
body.admin-notification-portal-active #notificationOverlayPortal .notification-backdrop:not(.hidden){
  display:block!important;
  position:fixed!important;
  inset:0!important;
  z-index:4000!important;
  background:transparent!important;
}
body.admin-notification-portal-active .v151-notification-empty{
  min-height:118px!important;
  padding:26px 16px!important;
}
body.admin-notification-portal-active .v151-notification-footer.is-empty{
  justify-content:center!important;
  padding:10px 14px 13px!important;
}
body.admin-notification-portal-active .v151-notification-footer.is-empty>span{
  flex:0 1 auto!important;
  text-align:center!important;
}
body.admin-notification-portal-active .notification-panel-body{
  max-height:calc(100dvh - 260px)!important;
}

/* Smartphone remains centered/modal and uses a dark backdrop. */
@media (max-width:700px){
  body.admin-notification-portal-active #notificationOverlayPortal .notification-backdrop:not(.hidden),
  body.member-notification-portal-active #notificationOverlayPortal .notification-backdrop:not(.hidden){
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:4000!important;
    background:rgba(5,17,34,.62)!important;
  }
  body.admin-notification-portal-active #notificationOverlayPortal .notification-panel:not(.hidden),
  body.member-notification-portal-active #notificationOverlayPortal .notification-panel:not(.hidden){
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    top:max(74px,calc(env(safe-area-inset-top,0px) + 18px))!important;
    bottom:auto!important;
    transform:translateX(-50%)!important;
    width:min(430px,calc(100vw - 18px))!important;
    max-width:min(430px,calc(100vw - 18px))!important;
    max-height:calc(100dvh - 92px)!important;
    z-index:4010!important;
    border-radius:24px!important;
  }
}


/* REV34 - rapikan alignment sidebar + font putih tombol Email Link / Lupa Password */

/* Semua item menu Admin memakai kolom icon-teks-panah yang sama.
   Ini membuat teks submenu seperti "Laporan Nasional" lurus dengan menu di atasnya. */
#app:not(.member-app) .sidebar nav button:not(.menu-group-head){
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) 18px!important;
  align-items:center!important;
  column-gap:10px!important;
  text-align:left!important;
  padding-left:11px!important;
  padding-right:10px!important;
}
#app:not(.member-app) .sidebar nav button:not(.menu-group-head)>.nav-ic{
  grid-column:1!important;
  justify-self:center!important;
  margin:0!important;
}
#app:not(.member-app) .sidebar nav button:not(.menu-group-head)>span:not(.nav-ic){
  grid-column:2!important;
  justify-self:stretch!important;
  text-align:left!important;
  margin:0!important;
  padding:0!important;
  min-width:0!important;
}
#app:not(.member-app) .sidebar nav button:not(.menu-group-head)>.sidebar-nav-arrow{
  grid-column:3!important;
  justify-self:end!important;
  margin:0!important;
}
#app:not(.member-app) .sidebar nav .menu-group-body{
  padding-left:0!important;
  margin-left:0!important;
}

/* Tulisan Email Link dan Lupa Password harus putih pada tombol biru. */
#loginPage .login-card-v135 .btn-magic-login,
#loginPage .login-card-v136 .btn-magic-login,
#loginPage .login-action-row .btn-magic-login,
#loginPage .login-card-v135 .btn-forgot-password,
#loginPage .login-card-v136 .btn-forgot-password,
#loginPage .login-action-row .btn-forgot-password{
  color:#ffffff!important;
}
#loginPage .btn-magic-login>span:last-child,
#loginPage .btn-forgot-password>span:last-child{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
}


/* REV35 - "Keluar Akun" sejajar kiri dengan teks menu Admin */
html body.v151-ui #app:not(.member-app) .sidebar > .logout,
html body.v151-ui #app:not(.member-app) .sidebar .logout{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) 18px!important;
  align-items:center!important;
  column-gap:10px!important;
  width:100%!important;
  padding-left:11px!important;
  padding-right:10px!important;
  text-align:left!important;
  justify-content:stretch!important;
}
html body.v151-ui #app:not(.member-app) .sidebar .logout .admin-logout-fullcolor{
  grid-column:1!important;
  justify-self:center!important;
  margin:0!important;
  width:30px!important;
  height:30px!important;
}
html body.v151-ui #app:not(.member-app) .sidebar .logout > span{
  grid-column:2!important;
  justify-self:stretch!important;
  align-self:center!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
  color:#ffffff!important;
}


/* REV36 - Aktivasi Akun memakai teks hitam; Email Link & Lupa Password tetap putih */
html body #loginPage .login-card-v135 .login-activation-v135,
html body #loginPage .login-card-v136 .login-activation-v135,
html body #loginPage .login-account-tools-v151 .login-activation-v135,
html body #loginPage .login-secondary-actions-v136 .login-activation-v135{
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
}
html body #loginPage .login-card-v135 .login-activation-v135>span:last-child,
html body #loginPage .login-card-v136 .login-activation-v135>span:last-child,
html body #loginPage .login-account-tools-v151 .login-activation-v135>span:last-child,
html body #loginPage .login-secondary-actions-v136 .login-activation-v135>span:last-child{
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
}


/* REV37 - Organization Governance Management */
.governance-hero{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;background:linear-gradient(135deg,#082f57,#0f5d9d)!important;color:#fff!important;border:0!important;overflow:hidden!important}
.governance-hero small{display:block;font-size:11px;font-weight:900;letter-spacing:1.2px;color:#90e7ff;margin-bottom:5px}
.governance-hero h3{margin:0 0 5px!important;color:#fff!important;font-size:24px!important}
.governance-hero p{margin:0!important;color:#d9edff!important;max-width:780px;line-height:1.5}
.governance-badge{display:inline-flex;align-items:center;justify-content:center;min-width:92px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);font-size:12px;font-weight:900;letter-spacing:.7px;white-space:nowrap}
.governance-form-grid textarea{width:100%;resize:vertical;min-height:82px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;color:var(--text);font:inherit}
.governance-wide{grid-column:1/-1!important}
.governance-table th{white-space:nowrap}
.governance-table td{vertical-align:middle!important}
.compact-actions{display:flex!important;gap:6px!important;flex-wrap:wrap!important;align-items:center!important;margin:0!important}
.governance-editor{margin-top:16px;padding:16px;border:1px solid #d9e6f2;border-radius:16px;background:#f8fbff}
.governance-editor h4{margin:0 0 12px;color:#17324d}
.governance-empty{padding:18px;border:1px dashed #b9cce0;border-radius:14px;background:#f8fbff;color:#64748b;text-align:center;font-weight:700}
.governance-detail-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;margin-bottom:14px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.governance-detail-header small{display:block;color:#64748b;font-size:10px;font-weight:900;letter-spacing:1px;margin-bottom:3px}
.governance-detail-header h3{margin:0;font-size:20px;color:#17324d}
.governance-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.governance-summary{margin:0!important;padding:15px 16px!important;min-height:92px}
.governance-summary span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:#64748b;font-weight:900;margin-bottom:6px}
.governance-summary b{display:block;font-size:15px;color:#17324d;line-height:1.3;overflow-wrap:anywhere}
@media(max-width:1000px){.governance-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.governance-hero{align-items:flex-start!important;flex-direction:column!important}.governance-detail-header{grid-template-columns:1fr}.governance-detail-header>span{justify-self:start}.governance-summary-grid{grid-template-columns:1fr}.governance-wide{grid-column:auto!important}}


/* REV38 - wilayah cakupan kepengurusan + selector pengurus ber-KTA */
.governance-scope-card .governance-scope-chips,
.governance-scope-chips{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin:10px 0 14px!important;
}
.governance-scope-chip{
  display:inline-flex!important;
  align-items:center!important;
  min-height:30px!important;
  padding:6px 10px!important;
  border:1px solid #bfdbfe!important;
  border-radius:999px!important;
  background:#eff6ff!important;
  color:#1e3a8a!important;
  font-size:12px!important;
  font-weight:800!important;
}
.governance-scope-chip.primary{
  border-color:#86efac!important;
  background:#f0fdf4!important;
  color:#166534!important;
}
.governance-scope-card .governance-table td,
.governance-scope-card .governance-table th{
  vertical-align:top!important;
}
.governance-editor select[id$="board_member"],
.governance-editor #sd_member_admin{
  min-height:42px!important;
}


/* REV39 - public QR route: jangan flash halaman login sebelum hasil verifikasi siap */
html.kta-verify-route #loginPage .login-card{
  visibility:hidden!important;
}
html.kta-verify-route body{
  min-height:100vh!important;
  background:#eaf2fb!important;
}
html.kta-verify-route body::before{
  content:"Memverifikasi KTA...";
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:99999;
  padding:16px 22px;
  border-radius:16px;
  background:#ffffff;
  color:#17324d;
  font-size:14px;
  font-weight:850;
  box-shadow:0 18px 50px rgba(18,52,86,.18);
}

/* REV39 - deskripsi halaman administrasi organisasi harus kontras dan mudah dibaca */
html body.v151-ui #app:not(.member-app) .admin-governance-v10 .governance-hero{
  background:#ffffff!important;
  color:#203a59!important;
  border:1px solid #d8e3ee!important;
}
html body.v151-ui #app:not(.member-app) .admin-governance-v10 .governance-hero small{
  color:#0b7da9!important;
}
html body.v151-ui #app:not(.member-app) .admin-governance-v10 .governance-hero h3{
  color:#203a59!important;
}
html body.v151-ui #app:not(.member-app) .admin-governance-v10 .governance-hero p,
html body.v151-ui #app:not(.member-app) .admin-governance-v10 .muted{
  color:#52677e!important;
}
html body.v151-ui #app:not(.member-app) .admin-governance-v10 .governance-badge{
  background:#eaf6ff!important;
  color:#0b5f91!important;
  border-color:#bcdcf2!important;
}

/* REV39 - footer belakang KTA benar-benar center vertikal di area merah */
.hpi-kta-back .hpi-kta-validity{
  top:auto!important;
  bottom:0!important;
  height:11.6mm!important;
  min-height:11.6mm!important;
  padding:1.05mm 3.2mm!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  align-content:center!important;
  gap:.38mm!important;
  box-sizing:border-box!important;
}
.hpi-kta-back .hpi-kta-validity-copy{
  flex:0 0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
}
.hpi-kta-back .hpi-kta-validity span,
.hpi-kta-back .hpi-kta-validity strong,
.hpi-kta-back .hpi-kta-validity small{
  margin:0!important;
  padding:0!important;
  text-align:center!important;
}
.hpi-kta-back .hpi-kta-validity span{font-size:1.42mm!important;line-height:1.05!important}
.hpi-kta-back .hpi-kta-validity strong{font-size:2.30mm!important;line-height:1.04!important}
.hpi-kta-back .hpi-kta-validity small{font-size:1.12mm!important;line-height:1.08!important}

/* REV39 - tiga filter KTA tetap rapi pada desktop */
.kta-filter-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
@media(max-width:900px){
  .kta-filter-grid{grid-template-columns:1fr!important}
}


/* REV40 - final contrast override Kepengurusan Nasional / Daerah.
   Selector dibuat global karena hero ini tidak selalu berada di .admin-governance-v10. */
html body.v151-ui #app:not(.member-app) #view > .governance-hero.card,
html body.v151-ui #app:not(.member-app) #view .governance-hero.card{
  background:#ffffff!important;
  background-image:none!important;
  border:1px solid #d6e0eb!important;
  color:#203a59!important;
}
html body.v151-ui #app:not(.member-app) #view .governance-hero.card small{
  color:#087aa5!important;
  -webkit-text-fill-color:#087aa5!important;
  opacity:1!important;
}
html body.v151-ui #app:not(.member-app) #view .governance-hero.card h3{
  color:#203a59!important;
  -webkit-text-fill-color:#203a59!important;
  opacity:1!important;
}
html body.v151-ui #app:not(.member-app) #view .governance-hero.card p{
  color:#475d73!important;
  -webkit-text-fill-color:#475d73!important;
  opacity:1!important;
  font-weight:600!important;
}
html body.v151-ui #app:not(.member-app) #view .governance-hero.card .governance-badge{
  background:#e8f4fb!important;
  color:#0b5e87!important;
  -webkit-text-fill-color:#0b5e87!important;
  border:1px solid #b9d9ea!important;
  opacity:1!important;
}

/* REV40 - percepat visual login:
   warna dasar langsung tampil, gambar cached/preloaded menggantikan tanpa flash putih. */
html body.v151-ui #loginPage.login-page{
  background-color:#0b315d!important;
  background-image:
    linear-gradient(120deg,rgba(7,23,48,.52),rgba(9,42,90,.30)),
    url('assets/login-background-ui.webp?v=rev50')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}

/* REV50 FINAL - sunset lebih terang, identitas login tiga baris */
#loginPage #loginPukName{display:grid!important;gap:2px!important}
#loginPage #loginPukName>span{display:block!important;color:inherit!important;font:inherit!important;line-height:1.18!important}
#loginPage .login-brand-group-v20>p{max-width:620px!important;color:#fff!important;font-weight:850!important;letter-spacing:.02em!important}
@media(min-width:901px){
  html body.v151-ui .admin-cockpit-hero{
    background-image:
      linear-gradient(90deg,rgba(4,20,42,.78) 0%,rgba(5,35,68,.66) 43%,rgba(8,42,69,.34) 70%,rgba(39,20,30,.18) 100%),
      url('assets/electric-tower-sunset-rev49.png?v=rev50')!important;
  }
  html body.v151-ui .admin-cockpit-hero::before{background:linear-gradient(180deg,rgba(2,14,31,.04),rgba(2,14,31,.20))!important}
  html body.v151-ui #loginPage .login-brand-panel-v136{
    background-image:
      linear-gradient(180deg,rgba(3,20,43,.48),rgba(5,34,64,.42) 55%,rgba(20,18,35,.46)),
      url('assets/electric-tower-sunset-rev49.png?v=rev50')!important;
  }
  html body.v151-ui #loginPage .login-brand-panel-v136::before{background:linear-gradient(90deg,rgba(3,20,43,.26),rgba(3,20,43,.04))!important}
  html body.v151-ui #loginPage #loginPukName{font-size:clamp(23px,2.1vw,31px)!important;line-height:1.16!important}
  html body.v151-ui #loginPage .login-brand-group-v20>p{font-size:clamp(12px,1.1vw,15px)!important;line-height:1.4!important}
}
@media(max-width:900px){
  html body.v151-ui #loginPage #loginPukName{font-size:clamp(16px,5vw,22px)!important}
  html body.v151-ui #loginPage .login-brand-group-v20>p{font-size:10.5px!important;line-height:1.35!important}
}

/* REV51 - aksen tower senja lembut pada kartu identitas sidebar */
html body.v151-ui #app .sidebar .brand-panel{
  position:relative!important;
  isolation:isolate!important;
  background-image:
    linear-gradient(180deg,rgba(8,48,88,.78),rgba(8,42,78,.88)),
    url('assets/electric-tower-sunset-rev49.png?v=rev53')!important;
  background-position:center,right center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  border-color:rgba(151,207,240,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 28px rgba(1,18,39,.14)!important;
}
html body.v151-ui #app .sidebar .brand-panel::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  border-radius:inherit!important;
  background:linear-gradient(90deg,rgba(5,40,76,.28),rgba(8,52,91,.08) 58%,rgba(20,31,48,.20))!important;
  pointer-events:none!important;
}
html body.v151-ui #app .sidebar .brand-panel .brand-logos,
html body.v151-ui #app .sidebar .brand-panel .v151-sidebar-release,
html body.v151-ui #app .sidebar .brand-panel #sidebarBrandTitle,
html body.v151-ui #app .sidebar .brand-panel #sidebarBrandSubtitle{
  position:relative!important;
  z-index:1!important;
  text-shadow:0 1px 3px rgba(1,14,31,.75)!important;
}
html body.v151-ui #app .sidebar .brand-panel .brand-logo-shell{
  box-shadow:0 8px 18px rgba(1,16,34,.20)!important;
}
@media(max-width:900px){
  html body.v151-ui #app .sidebar .brand-panel{
    background-position:62% center,right center!important;
  }
}

/* REV53 - website konsisten huruf kecil pada form dan kop laporan */
html body.v151-ui input[id$="website"],
html body.v151-ui input[id*="website"]{
  text-transform:lowercase!important;
  font-variant:normal!important;
  letter-spacing:normal!important;
}
html body.v151-ui #loginPage.login-page::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(7,26,55,.18),rgba(7,26,55,.04));
  z-index:0;
}
html body.v151-ui #loginPage.login-page > *{
  position:relative;
  z-index:1;
}

/* REV41 - Keamanan Akun + Supabase Reauthentication */
.account-security-card{max-width:780px;margin:0 auto;padding:26px!important;border-top:5px solid #0b609f!important}
.account-security-heading{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px}
.account-security-heading small{display:block;color:#0b7da9;font-weight:800;letter-spacing:.08em;margin-bottom:4px}
.account-security-heading h3{margin:0;color:#173a5e;font-size:1.45rem}
.account-security-heading p{margin:6px 0 0;color:#5c7187}
.account-security-icon{display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;border-radius:16px;background:#e9f5ff;color:#0b609f}
.account-security-email{display:grid;gap:4px;padding:16px 18px;margin-bottom:18px;border:1px solid #d7e4ef;border-radius:12px;background:#f6f9fc}
.account-security-email span{font-size:.76rem;font-weight:800;color:#718399;text-transform:uppercase;letter-spacing:.06em}
.account-security-email strong{color:#173a5e;font-size:1.04rem}
.account-security-email small{color:#718399}
.account-security-start{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:6px}
.account-security-start p{margin:0;color:#52677e}
.account-security-status{padding:12px 15px;margin:0 0 18px;border-radius:10px;font-weight:700;line-height:1.45}
.account-security-status.tone-success{color:#12633f;background:#e9f8f0;border:1px solid #afe0c5}
.account-security-status.tone-error{color:#8b2635;background:#fff0f2;border:1px solid #efbbc3}
.account-security-status.tone-info{color:#15517a;background:#eaf6ff;border:1px solid #b9dced}
.account-security-code{max-width:320px;margin-bottom:18px}
.account-security-code input{font-size:1.35rem!important;font-weight:800;letter-spacing:.32em;text-align:center;font-variant-numeric:tabular-nums}
.account-security-code small{display:block;margin-top:5px;color:#718399}
.account-security-form button:disabled,.account-security-start button:disabled{cursor:wait;opacity:.65}
@media(max-width:640px){.account-security-card{padding:19px!important}.account-security-start{align-items:stretch;flex-direction:column}.account-security-start button{width:100%}.account-security-code{max-width:none}}

/* REV42 - seluruh judul organisasi tampil utuh di Admin Nasional, Admin Daerah, dan Anggota */
html body.v151-ui .sidebar .brand-panel #sidebarBrandTitle,
html body.v151-ui .sidebar .brand-panel #sidebarBrandSubtitle{
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  text-align:center!important;
}

/* REV45 FINAL - safe area logo sidebar; jangan potong panel putih di sisi atas */
html body.v151-ui .sidebar{padding-top:18px!important}
html body.v151-ui .sidebar .brand-panel{
  margin-top:0!important;
  padding-top:18px!important;
  overflow:visible!important;
}
html body.v151-ui .sidebar .brand-panel .brand-logos{
  position:relative!important;
  z-index:2!important;
  margin-top:0!important;
  padding-top:0!important;
  overflow:visible!important;
}
html body.v151-ui .sidebar .brand-panel .brand-logos .brand-logo-shell,
html body.v151-ui .sidebar .brand-panel .brand-logos .brand-logo-shell img{
  overflow:visible!important;
  clip-path:none!important;
}
@media(max-width:900px){
  html body.v151-ui .sidebar{padding-top:12px!important}
  html body.v151-ui .sidebar .brand-panel{margin-top:0!important;padding-top:18px!important}
}
html body.v151-ui .sidebar .brand-panel #sidebarBrandTitle{font-size:11px!important;line-height:1.35!important}
html body.v151-ui .sidebar .brand-panel #sidebarBrandSubtitle{font-size:8.5px!important;line-height:1.45!important}

html body.v151-ui .admin-cockpit-copy,
html body.v151-ui .admin-cockpit-copy h2,
html body.v151-ui .admin-cockpit-copy .admin-dynamic-puk-name,
html body.v151-ui .admin-cockpit-copy .admin-federation-name{
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
html body.v151-ui .admin-cockpit-copy h2{font-size:clamp(34px,4.1vw,58px)!important;line-height:1.08!important;letter-spacing:-1.2px!important}
html body.v151-ui .admin-cockpit-copy .admin-dynamic-puk-name{display:block!important;line-height:1.3!important}
html body.v151-ui .admin-cockpit-copy .admin-federation-name{display:block!important;margin-top:3px!important;line-height:1.4!important}

html body.v151-ui #app.app.member-app .member-hero-copy-v10,
html body.v151-ui #app.app.member-app .member-hero-copy-v10 h2,
html body.v151-ui #app.app.member-app .member-hero-copy-v10 p,
html body.v151-ui #app.app.member-app .member-hero-copy-v10 small,
html body.v151-ui #app.app.member-app .member-desktop-title-v32,
html body.v151-ui #app.app.member-app .member-desktop-puk-v32,
html body.v151-ui #app.app.member-app .member-desktop-federation-v32{
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

@media(max-width:900px){
  html body.v151-ui .admin-cockpit-copy h2{font-size:clamp(28px,9vw,38px)!important;line-height:1.12!important}
  html body.v151-ui .admin-cockpit-copy .admin-dynamic-puk-name{font-size:clamp(15px,4.8vw,21px)!important}
  html body.v151-ui .admin-cockpit-copy .admin-federation-name{font-size:12px!important}
  html body.v151-ui #app.app.member-app .member-hero-v10{height:auto!important;max-height:none!important}
  html body.v151-ui #app.app.member-app .member-hero-copy-v10 h2{font-size:clamp(20px,6.5vw,28px)!important}
}

/* REV44 - fit penuh satu baris pada lebar efektif sidebar */
html body.v151-ui .sidebar .brand-panel{
  box-sizing:border-box!important;
  padding-left:6px!important;
  padding-right:6px!important;
  overflow:hidden!important;
}
html body.v151-ui .sidebar .brand-panel #sidebarBrandTitle{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  padding:0!important;
  margin:10px 0 4px!important;
  font-family:"Arial Narrow","Roboto Condensed",Arial,Helvetica,sans-serif!important;
  font-size:clamp(7px,.56vw,8.5px)!important;
  font-stretch:condensed!important;
  font-weight:900!important;
  letter-spacing:-.035em!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  text-align:center!important;
}

/* REV47 - dokumen SK Kepengurusan Daerah */
.governance-sk-card{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:18px 0;padding:17px 18px;border:1px solid #cfe0ed;border-radius:15px;background:linear-gradient(145deg,#f8fbfe,#eef6fb)}
.governance-sk-card>div:first-child{display:grid;gap:4px;min-width:0}.governance-sk-label{color:#0b7da9;font-size:9px;font-weight:950;letter-spacing:1.1px}.governance-sk-card strong{color:#173a5e;font-size:14px;overflow-wrap:anywhere}.governance-sk-card small{color:#718399;font-size:11px}.governance-sk-upload{position:relative;display:inline-flex}.governance-sk-upload input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.governance-sk-upload span{display:inline-flex;align-items:center;min-height:40px;padding:9px 13px;border:1px solid #b9cfe0;border-radius:11px;background:#fff;color:#173a5e;font-size:12px;font-weight:850;cursor:pointer}.governance-sk-upload:focus-within span{outline:3px solid rgba(18,104,179,.2)}
@media(max-width:720px){.governance-sk-card{align-items:stretch;flex-direction:column}.governance-sk-card>.actions{width:100%}.governance-sk-card>.actions>*{flex:1 1 auto}.governance-sk-download-card .governance-sk-card>button{width:100%}}

/* REV49 - identitas visual SPE HPI: infrastruktur listrik saat senja, khusus PC */
@media(min-width:901px){
  html body.v151-ui .admin-cockpit-hero{
    isolation:isolate!important;
    background-color:#071a33!important;
    background-image:
      linear-gradient(90deg,rgba(4,20,42,.96) 0%,rgba(5,35,68,.90) 44%,rgba(8,42,69,.64) 70%,rgba(39,20,30,.44) 100%),
      url('assets/electric-tower-sunset-rev49.png?v=rev49')!important;
    background-size:cover!important;
    background-position:center 58%!important;
    background-repeat:no-repeat!important;
    box-shadow:0 30px 66px rgba(7,40,74,.26)!important;
  }
  html body.v151-ui .admin-cockpit-hero::before{
    content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:0!important;
    background:linear-gradient(180deg,rgba(2,14,31,.10),rgba(2,14,31,.38))!important;opacity:1!important;pointer-events:none!important;
  }
  html body.v151-ui .admin-cockpit-hero::after{display:none!important;content:none!important}
  html body.v151-ui .admin-cockpit-copy{position:relative!important;z-index:2!important;text-shadow:0 2px 7px rgba(0,0,0,.52)!important}
  html body.v151-ui .admin-cockpit-copy p,
  html body.v151-ui .admin-cockpit-copy .admin-federation-name{color:#f0f6fb!important;text-shadow:0 2px 6px rgba(0,0,0,.72)!important}
  html body.v151-ui #loginPage .login-brand-panel-v136{
    isolation:isolate!important;
    background-color:#071a33!important;
    background-image:
      linear-gradient(180deg,rgba(3,20,43,.76),rgba(5,34,64,.72) 55%,rgba(20,18,35,.74)),
      url('assets/electric-tower-sunset-rev49.png?v=rev49')!important;
    background-size:cover!important;
    background-position:68% center!important;
    background-repeat:no-repeat!important;
  }
  html body.v151-ui #loginPage .login-brand-panel-v136::before{
    content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:0!important;
    background:linear-gradient(90deg,rgba(3,20,43,.44),rgba(3,20,43,.12))!important;opacity:1!important;pointer-events:none!important;
  }
  html body.v151-ui #loginPage .login-brand-panel-v136::after{display:none!important;content:none!important}
  html body.v151-ui #loginPage .login-brand-panel-v136>*{position:relative!important;z-index:2!important}
  html body.v151-ui #loginPage .login-brand-panel-v136 h1,
  html body.v151-ui #loginPage .login-brand-panel-v136 h2,
  html body.v151-ui #loginPage .login-brand-panel-v136 p{text-shadow:0 2px 7px rgba(0,0,0,.72)!important}
}
html body.v151-ui .sidebar .brand-panel #sidebarBrandSubtitle{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  padding:0!important;
  font-family:"Arial Narrow","Roboto Condensed",Arial,Helvetica,sans-serif!important;
  font-size:clamp(7px,.52vw,8px)!important;
  letter-spacing:-.025em!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  text-align:center!important;
}

/* REV43 - identitas nasional dan judul dashboard satu baris tanpa label NASIONAL pada nama organisasi */
html body.v151-ui .sidebar .brand-panel #sidebarBrandTitle{
  display:block!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  font-size:clamp(8.2px,.72vw,10.5px)!important;
  line-height:1.25!important;
  letter-spacing:-.018em!important;
}
html body.v151-ui .sidebar .brand-panel #sidebarBrandSubtitle{
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:normal!important;
  font-size:clamp(7.5px,.62vw,9px)!important;
  letter-spacing:-.018em!important;
}
html body.v151-ui .admin-cockpit-copy h2{
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  font-size:clamp(27px,4vw,48px)!important;
  line-height:1.08!important;
  letter-spacing:-1.15px!important;
}
html body.v151-ui .admin-cockpit-copy .admin-dynamic-puk-name{
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  font-size:clamp(15px,1.9vw,25px)!important;
  letter-spacing:-.35px!important;
}
@media(max-width:900px){
  html body.v151-ui .admin-cockpit-copy h2{font-size:clamp(15px,4.7vw,28px)!important;letter-spacing:-.55px!important}
  html body.v151-ui .admin-cockpit-copy .admin-dynamic-puk-name{font-size:clamp(10px,3vw,17px)!important;letter-spacing:-.2px!important}
}

/* REV44 FINAL - harus sesudah REV43 agar aturan fit sidebar menang */
html body.v151-ui .sidebar .brand-panel{box-sizing:border-box!important;padding-left:6px!important;padding-right:6px!important;overflow:hidden!important}
html body.v151-ui .sidebar .brand-panel #sidebarBrandTitle{
  box-sizing:border-box!important;width:100%!important;max-width:100%!important;padding:0!important;margin:10px 0 4px!important;
  font-family:"Arial Narrow","Roboto Condensed",Arial,Helvetica,sans-serif!important;font-size:clamp(7px,.56vw,8.5px)!important;
  font-stretch:condensed!important;font-weight:900!important;letter-spacing:-.035em!important;line-height:1.25!important;
  white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;text-align:center!important
}
html body.v151-ui .sidebar .brand-panel #sidebarBrandSubtitle{
  box-sizing:border-box!important;width:100%!important;max-width:100%!important;padding:0!important;
  font-family:"Arial Narrow","Roboto Condensed",Arial,Helvetica,sans-serif!important;font-size:clamp(7px,.52vw,8px)!important;
  letter-spacing:-.025em!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;text-align:center!important
}

/* REV45 FINAL CASCADE - safe area logo harus menjadi aturan terakhir */
html body.v151-ui .sidebar{padding-top:18px!important}
html body.v151-ui .sidebar .brand-panel{margin-top:0!important;padding-top:18px!important;overflow:visible!important}
html body.v151-ui .sidebar .brand-panel .brand-logos{position:relative!important;z-index:2!important;margin-top:0!important;padding-top:0!important;overflow:visible!important}
html body.v151-ui .sidebar .brand-panel .brand-logos .brand-logo-shell,
html body.v151-ui .sidebar .brand-panel .brand-logos .brand-logo-shell img{overflow:visible!important;clip-path:none!important}
@media(max-width:900px){
  html body.v151-ui .sidebar{padding-top:12px!important}
  html body.v151-ui .sidebar .brand-panel{margin-top:0!important;padding-top:18px!important;overflow:visible!important}
}

/* REV46 FINAL - ukuran ekstra aman agar nama organisasi tidak menyentuh batas panel */
html body.v151-ui .sidebar .brand-panel #sidebarBrandTitle{
  font-family:"Arial Narrow","Roboto Condensed",Arial,Helvetica,sans-serif!important;
  font-size:clamp(6.2px,.47vw,7.2px)!important;
  letter-spacing:-.05em!important;
  padding-left:3px!important;
  padding-right:3px!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

/* REV50 FINAL CASCADE - harus sesudah seluruh override lama */
#loginPage #loginPukName{display:grid!important;gap:2px!important}
#loginPage #loginPukName>span{display:block!important;color:inherit!important;font:inherit!important;line-height:1.18!important}
#loginPage .login-brand-group-v20>p{max-width:620px!important;color:#fff!important;font-weight:850!important;letter-spacing:.02em!important}
@media(min-width:901px){
  html body.v151-ui .admin-cockpit-hero{background-image:linear-gradient(90deg,rgba(4,20,42,.78) 0%,rgba(5,35,68,.66) 43%,rgba(8,42,69,.34) 70%,rgba(39,20,30,.18) 100%),url('assets/electric-tower-sunset-rev49.png?v=rev53')!important}
  html body.v151-ui .admin-cockpit-hero::before{background:linear-gradient(180deg,rgba(2,14,31,.04),rgba(2,14,31,.20))!important}
  html body.v151-ui #loginPage .login-brand-panel-v136{background-image:linear-gradient(180deg,rgba(3,20,43,.48),rgba(5,34,64,.42) 55%,rgba(20,18,35,.46)),url('assets/electric-tower-sunset-rev49.png?v=rev53')!important}
  html body.v151-ui #loginPage .login-brand-panel-v136::before{background:linear-gradient(90deg,rgba(3,20,43,.26),rgba(3,20,43,.04))!important}
  html body.v151-ui #loginPage #loginPukName{font-size:clamp(23px,2.1vw,31px)!important;line-height:1.16!important}
  html body.v151-ui #loginPage .login-brand-group-v20>p{font-size:clamp(12px,1.1vw,15px)!important;line-height:1.4!important}
}
@media(max-width:900px){
  html body.v151-ui #loginPage #loginPukName{font-size:clamp(16px,5vw,22px)!important}
  html body.v151-ui #loginPage .login-brand-group-v20>p{font-size:10.5px!important;line-height:1.35!important}
}


/* REV54 — laporan visual cards & proporsional cakupan */
.report-type-gallery{padding:18px 18px 16px}
.report-type-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:6px}
.report-type-card{display:flex;align-items:flex-start;gap:14px;width:100%;padding:16px 15px;border-radius:18px;border:1px solid #d9e4f2;background:linear-gradient(180deg,#ffffff,#f8fbff);box-shadow:0 8px 22px rgba(15,23,42,.06);text-align:left;color:#0f2444;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.report-type-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(15,23,42,.10)}
.report-type-card.active{border-color:#1d5fae;box-shadow:0 0 0 3px rgba(29,95,174,.12),0 14px 28px rgba(15,23,42,.10)}
.report-type-card-icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.report-type-card-copy{display:grid;gap:4px;min-width:0}
.report-type-card-copy small{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#6b7b91}
.report-type-card-copy strong{font-size:17px;line-height:1.25;color:#12385f}
.report-type-card-copy em{font-size:12px;line-height:1.5;color:#607287;font-style:normal}
.report-type-card.tone-blue{background:linear-gradient(180deg,#f4f9ff,#e9f3ff)}
.report-type-card.tone-green{background:linear-gradient(180deg,#f3fcf7,#e6f8ee)}
.report-type-card.tone-purple{background:linear-gradient(180deg,#f8f4ff,#efe7ff)}
.report-type-card.tone-orange{background:linear-gradient(180deg,#fff8ef,#fff0db)}
.report-type-card.tone-cyan{background:linear-gradient(180deg,#f1fcff,#e3f8fb)}
.report-type-card.tone-pink{background:linear-gradient(180deg,#fff4f7,#ffe8ef)}
.report-type-card.tone-teal{background:linear-gradient(180deg,#eefcff,#dbf5f7)}
.report-type-card.tone-slate{background:linear-gradient(180deg,#f7f9fc,#edf2f7)}
.report-summary-launcher .report-stat-tile.report-stat-compact{align-items:flex-start}
.report-summary-launcher .report-stat-tile.report-stat-compact b{font-size:clamp(16px,2vw,27px)!important;line-height:1.18!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important}
.report-summary-launcher .report-stat-tile.report-stat-compact small{font-size:11px!important}
body.v151-ui .report-summary-launcher .report-stat-tile.report-stat-compact b{font-size:clamp(16px,2vw,24px)!important;line-height:1.2!important;white-space:normal!important;overflow-wrap:anywhere!important}
@media (max-width: 720px){
  .report-type-card-grid{grid-template-columns:1fr!important;gap:10px!important}
  .report-type-card{padding:14px 13px!important;border-radius:16px!important}
  .report-type-card-copy strong{font-size:15px!important}
  .report-type-card-copy em{font-size:11.5px!important}
}



/* REV55 — kembalikan area laporan seperti sebelum galeri REV54.
   Hanya nilai kartu Cakupan yang dikecilkan sesuai permintaan. */
.report-summary-launcher .report-stat-tile.report-stat-scope b,
body.v151-ui .report-summary-launcher .report-stat-tile.report-stat-scope b{
  font-size:11px!important;
  line-height:1.35!important;
  letter-spacing:0!important;
  font-weight:850!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}


/* REV57 — member Auth/profile link recovery */
.member-link-recovery-card{
  max-width:620px;
  margin:18px auto!important;
  padding:34px 24px!important;
  text-align:center;
  border:1px solid #d6e3ef!important;
  background:linear-gradient(180deg,#ffffff,#f7fbff)!important;
}
.member-link-recovery-icon{
  width:72px;
  height:72px;
  margin:0 auto 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:22px;
  background:#e8f4ff;
  font-size:34px;
  box-shadow:0 10px 24px rgba(20,91,156,.12);
}
.member-link-recovery-card h3{
  margin:0 0 10px!important;
  color:#173b61!important;
  font-size:21px!important;
}
.member-link-recovery-card p{
  max-width:520px;
  margin:0 auto 20px;
  color:#5b6f84;
  font-size:14px;
  line-height:1.65;
}
.member-link-recovery-card button{
  min-height:44px;
  padding:11px 20px;
}
.member-link-recovery-card small{
  display:block;
  max-width:520px;
  margin:16px auto 0;
  color:#738398;
  font-size:11.5px;
  line-height:1.55;
}
.member-link-pending .member-link-recovery-icon{background:#fff5d9}


/* REV58 — KTA back footer spacing, verification brand label, mobile hero/login background */
.hpi-kta-back .hpi-kta-info-panel{
  top:51.0mm!important;
  min-height:14.8mm!important;
  padding:.72mm 1.02mm .66mm!important;
}
.hpi-kta-back .hpi-kta-proof{
  font-size:1.34mm!important;
  line-height:1.18!important;
  margin:0 0 .48mm!important;
}
.hpi-kta-back .hpi-kta-secretariat>strong{
  font-size:1.88mm!important;
  line-height:1.03!important;
  margin:0 0 .24mm!important;
}
.hpi-kta-back .hpi-contact-row{
  grid-template-columns:2.5mm minmax(0,1fr)!important;
  gap:.36mm!important;
}
.hpi-kta-back .hpi-contact-row i{
  font-size:1.02mm!important;
  line-height:1.02!important;
  margin-top:.08mm!important;
}
.hpi-kta-back .hpi-contact-row b{
  font-size:1.00mm!important;
  line-height:1.02!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  word-break:break-word!important;
  overflow-wrap:anywhere!important;
}
.hpi-kta-back .hpi-kta-security{
  bottom:8.28mm!important;
  height:3.36mm!important;
}
.hpi-kta-back .hpi-kta-validity{
  height:8.1mm!important;
}

html body.v151-ui #loginPage .login-brand-panel-v136{
  background-image:
    linear-gradient(180deg,rgba(5,23,49,.70),rgba(7,37,72,.55) 58%,rgba(71,31,45,.42)),
    url('assets/electric-tower-sunset-rev49.png?v=rev58')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
html body.v151-ui #app.app.member-app .member-hero-v10{
  background-image:
    linear-gradient(90deg,rgba(4,20,42,.82) 0%,rgba(6,35,67,.70) 43%,rgba(8,45,75,.40) 72%,rgba(82,43,56,.20) 100%),
    url('assets/electric-tower-sunset-rev49.png?v=rev58')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
@media (max-width:900px){
  html body.v151-ui #loginPage .login-brand-panel-v136{
    background-image:
      linear-gradient(180deg,rgba(5,23,49,.62),rgba(7,37,72,.50) 58%,rgba(71,31,45,.40)),
      url('assets/electric-tower-sunset-rev49.png?v=rev58')!important;
    background-position:center 26%!important;
  }
  html body.v151-ui #app.app.member-app .member-hero-v10{
    background-image:
      linear-gradient(90deg,rgba(4,20,42,.84) 0%,rgba(6,35,67,.72) 46%,rgba(8,45,75,.42) 74%,rgba(82,43,56,.22) 100%),
      url('assets/electric-tower-sunset-rev49.png?v=rev58')!important;
    background-position:center 28%!important;
  }
}


/* REV59 — formal premium QR verification modal */
.hpi-verify-modal{
  position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  padding:20px;box-sizing:border-box;overflow:auto;
  background:linear-gradient(180deg,rgba(3,18,38,.88),rgba(6,28,54,.93));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.hpi-verify-card{
  width:min(410px,100%);max-height:min(92dvh,820px);overflow:auto;
  background:#fff;border:1px solid rgba(203,213,225,.86);border-radius:26px;
  box-shadow:0 30px 80px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.12);
  font-family:Inter,Arial,Helvetica,sans-serif;color:#132c47;
  animation:promoPop .28s cubic-bezier(.2,.8,.2,1) both;
}
.hpi-verify-header{
  position:relative;padding:19px 24px 24px;text-align:center;color:#fff;
  background:
    radial-gradient(circle at 82% 8%,rgba(255,210,65,.13),transparent 28%),
    linear-gradient(145deg,#071a35 0%,#0b477b 62%,#116a87 100%);
  border-bottom:4px solid #d7ae2b;
}
.hpi-verify-card-invalid .hpi-verify-header{
  background:linear-gradient(145deg,#46131b 0%,#8f1f2b 60%,#b72a35 100%);
  border-bottom-color:#e0b14c;
}
.hpi-verify-close{
  position:absolute;top:13px;right:13px;width:34px;height:34px;padding:0;border-radius:11px;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.13)!important;
  border:1px solid rgba(255,255,255,.22)!important;color:#fff!important;box-shadow:none!important;
}
.hpi-verify-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.hpi-verify-brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-right:35px;margin-bottom:18px}
.hpi-verify-brand-row>small{font-size:8.5px;font-weight:900;letter-spacing:1.45px;color:#dcecff;text-align:right}
.hpi-verify-brand-logos{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:12px;background:rgba(255,255,255,.94);box-shadow:0 6px 18px rgba(0,0,0,.15)}
.hpi-verify-brand-logos img{width:31px;height:31px;object-fit:contain;display:block}
.hpi-verify-brand-logos span{width:1px;height:24px;background:#cad7e5}
.hpi-verify-seal{width:66px;height:66px;margin:0 auto 9px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(35,207,143,.14);border:1px solid rgba(129,255,210,.28);box-shadow:inset 0 0 0 7px rgba(255,255,255,.06)}
.hpi-verify-seal svg{width:45px;height:45px;fill:none;stroke:#7cf0c2;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hpi-verify-seal-invalid{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22)}
.hpi-verify-seal-invalid svg{stroke:#ffd3d6}
.hpi-verify-eyebrow{display:block;margin:2px 0 5px;font-size:8px;font-weight:900;letter-spacing:1.7px;color:#f6d76d}
.hpi-verify-header h2{margin:0;font-size:23px;line-height:1.1;font-weight:950;letter-spacing:-.35px;color:#fff!important;text-transform:uppercase}
.hpi-verify-header p{max-width:330px;margin:7px auto 0;font-size:11px;line-height:1.5;font-weight:600;color:#d9eaf7}
.hpi-verify-body{padding:20px 22px 21px;background:linear-gradient(180deg,#fff,#fbfdff)}
.hpi-verify-identity{display:grid;grid-template-columns:94px minmax(0,1fr);gap:16px;align-items:center;padding:15px;border-radius:18px;background:#f6f9fc;border:1px solid #dce5ee;box-shadow:0 7px 20px rgba(18,49,80,.055)}
.hpi-verify-photo-wrap{width:94px;height:112px;display:flex;align-items:center;justify-content:center}
.hpi-verify-photo{width:90px;height:108px;object-fit:cover;display:block;border-radius:14px;border:2px solid #fff;outline:1px solid #cbd5e1;box-shadow:0 8px 18px rgba(15,45,75,.14)}
.hpi-verify-photo-placeholder{width:90px;height:108px;border-radius:14px;border:1.5px dashed #b8c8d8;background:#eef3f7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:8px;color:#63798f;text-align:center;box-sizing:border-box}
.hpi-verify-photo-placeholder.is-protected{border-color:#8fb9dc;background:#edf6fd;color:#18558c}
.hpi-verify-photo-placeholder svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hpi-verify-photo-placeholder span{font-size:8px;line-height:1.25;font-weight:850;text-transform:uppercase;letter-spacing:.3px}
.hpi-verify-identity-copy{min-width:0;text-align:left}
.hpi-verify-identity-copy small{display:block;font-size:8px;font-weight:900;letter-spacing:1.05px;color:#8394a6}
.hpi-verify-identity-copy strong{display:block;margin-top:3px;font-size:15px;line-height:1.2;font-weight:950;color:#123c67;overflow-wrap:anywhere}
.hpi-verify-identity-copy>span{display:block;margin-top:4px;font-size:11.5px;line-height:1.28;font-weight:800;color:#385d7d;overflow-wrap:anywhere}
.hpi-verify-identity-copy em{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:5px 10px;border-radius:999px;background:#e4f8ee;border:1px solid #b9e8d2;color:#087753;font-size:9.5px;font-weight:950;font-style:normal;letter-spacing:.4px}
.hpi-verify-identity-copy em i{width:7px;height:7px;border-radius:50%;background:#1fb978;box-shadow:0 0 0 3px rgba(31,185,120,.12)}
.hpi-verify-data-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.hpi-verify-data{min-width:0;padding:11px 12px;border-radius:14px;background:#fff;border:1px solid #e1e8f0;text-align:left}
.hpi-verify-data-wide{grid-column:1/-1}
.hpi-verify-data small{display:block;margin-bottom:4px;font-size:8.5px;font-weight:850;letter-spacing:.45px;text-transform:uppercase;color:#8191a2}
.hpi-verify-data strong{display:block;font-size:12.5px;line-height:1.3;font-weight:850;color:#1c344d;overflow-wrap:anywhere}
.hpi-verify-data strong.is-kta{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#a84b24;letter-spacing:.15px}
.hpi-verify-authenticity,.hpi-verify-privacy,.hpi-verify-alert{display:grid;grid-template-columns:31px minmax(0,1fr);gap:10px;align-items:start;margin-top:12px;padding:11px 12px;border-radius:14px;text-align:left}
.hpi-verify-authenticity{background:#edf9f4;border:1px solid #c8ebdb;color:#185f49}
.hpi-verify-privacy{background:#eff6fc;border:1px solid #cbdff1;color:#264e71}
.hpi-verify-authenticity svg,.hpi-verify-privacy svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hpi-verify-authenticity strong,.hpi-verify-privacy strong,.hpi-verify-alert strong{display:block;font-size:10.5px;font-weight:900;margin-bottom:2px}
.hpi-verify-authenticity span,.hpi-verify-privacy span,.hpi-verify-alert span{display:block;font-size:9.5px;line-height:1.45;font-weight:600}
.hpi-verify-alert{grid-template-columns:1fr;padding:14px 15px;margin-top:0}
.hpi-verify-alert-danger{background:#fff3f3;border:1px solid #f0c8cb;color:#7c2731}
.hpi-verify-primary{width:100%;min-height:45px;margin-top:15px;border-radius:13px!important;background:linear-gradient(135deg,#0b4e87,#0b74aa)!important;color:#fff!important;font-size:12.5px!important;font-weight:900!important;letter-spacing:.1px;box-shadow:0 8px 18px rgba(11,84,135,.18)!important}
.hpi-verify-primary-dark{background:linear-gradient(135deg,#172a3f,#263d55)!important}
.hpi-verify-footnote{margin:10px 0 0!important;text-align:center;font-size:8.5px!important;line-height:1.4;color:#8a99a8!important;font-weight:700!important;letter-spacing:.25px}
@media(max-width:480px){
  .hpi-verify-modal{padding:13px}
  .hpi-verify-card{border-radius:22px;max-height:94dvh}
  .hpi-verify-header{padding:15px 17px 20px}
  .hpi-verify-brand-row{margin-bottom:13px;padding-right:31px}
  .hpi-verify-brand-logos img{width:27px;height:27px}
  .hpi-verify-brand-logos span{height:21px}
  .hpi-verify-brand-row>small{font-size:7.4px;letter-spacing:1.15px}
  .hpi-verify-seal{width:58px;height:58px;margin-bottom:7px}
  .hpi-verify-seal svg{width:39px;height:39px}
  .hpi-verify-header h2{font-size:20px}
  .hpi-verify-header p{font-size:10.3px}
  .hpi-verify-body{padding:16px}
  .hpi-verify-identity{grid-template-columns:82px minmax(0,1fr);gap:12px;padding:12px}
  .hpi-verify-photo-wrap{width:82px;height:99px}
  .hpi-verify-photo,.hpi-verify-photo-placeholder{width:78px;height:95px;border-radius:12px}
  .hpi-verify-identity-copy strong{font-size:13.5px}
  .hpi-verify-identity-copy>span{font-size:10.5px}
  .hpi-verify-data{padding:10px}
  .hpi-verify-data strong{font-size:11.5px}
}


/* REV60 — rapikan teks belakang KTA, footer, dan security panel */
.hpi-kta-back .hpi-kta-info-panel{
  top:50.9mm!important;
  left:4.05mm!important;
  right:4.05mm!important;
  min-height:17.2mm!important;
  padding:.72mm .95mm .84mm!important;
  border-radius:1.45mm!important;
  background:linear-gradient(180deg, rgba(5,38,84,.80), rgba(7,52,111,.58))!important;
}
.hpi-kta-back .hpi-kta-proof{
  margin:0 0 .38mm!important;
  font-size:1.18mm!important;
  line-height:1.14!important;
  text-align:center!important;
}
.hpi-kta-back .hpi-kta-proof .hpi-kta-proof-lead,
.hpi-kta-back .hpi-kta-proof .hpi-kta-proof-note{
  display:block!important;
  width:100%!important;
  margin:0 auto!important;
  text-align:center!important;
}
.hpi-kta-back .hpi-kta-proof .hpi-kta-proof-note{
  margin-top:.16mm!important;
}
.hpi-kta-back .hpi-kta-proof strong{
  display:block!important;
  color:#ffd63a!important;
  font-size:1.56mm!important;
  line-height:1.02!important;
  letter-spacing:.01mm!important;
  margin:0!important;
}
.hpi-kta-back .hpi-kta-secretariat>strong{
  font-size:1.76mm!important;
  line-height:1.02!important;
  margin:0 0 .18mm!important;
}
.hpi-kta-back .hpi-contact-row{
  grid-template-columns:2.35mm minmax(0,1fr)!important;
  gap:.34mm!important;
}
.hpi-kta-back .hpi-contact-row i{
  font-size:.98mm!important;
  line-height:1.02!important;
  margin-top:.12mm!important;
}
.hpi-kta-back .hpi-contact-row b{
  font-size:.94mm!important;
  line-height:1.03!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  word-break:break-word!important;
  overflow-wrap:anywhere!important;
}
.hpi-kta-back .hpi-kta-security{
  left:4.05mm!important;
  right:4.05mm!important;
  bottom:11.1mm!important;
  height:3.25mm!important;
  padding:.14mm .34mm!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(255,255,255,.90)!important;
  border:.14mm solid rgba(223,236,248,.98)!important;
  border-radius:.7mm!important;
  box-shadow:inset 0 0 0 .08mm rgba(255,255,255,.65)!important;
}
.hpi-kta-back .hpi-kta-security img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  display:block!important;
  filter:none!important;
  image-rendering:auto!important;
}
.hpi-kta-back .hpi-kta-validity{
  left:0!important;
  right:0!important;
  bottom:.72mm!important;
  height:8.5mm!important;
  padding:0 2.7mm!important;
  gap:.18mm!important;
}
.hpi-kta-back .hpi-kta-validity-copy{
  gap:.02mm!important;
}
.hpi-kta-back .hpi-kta-validity span{
  font-size:1.42mm!important;
  line-height:1.0!important;
}
.hpi-kta-back .hpi-kta-validity strong{
  font-size:2.36mm!important;
  line-height:1.02!important;
}
.hpi-kta-back .hpi-kta-validity small{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.03mm!important;
  font-size:1.04mm!important;
  line-height:1.06!important;
  text-align:center!important;
  width:100%!important;
  margin:0!important;
}
.hpi-kta-back .hpi-kta-validity small span{
  display:block!important;
  width:100%!important;
  font-size:inherit!important;
  line-height:inherit!important;
  text-align:center!important;
}


/* REV61 — samakan ukuran font kuning, website lowercase, footer FSPGI lebih ringkas */
.hpi-kta-back .hpi-kta-proof{
  font-size:1.18mm!important;
  line-height:1.14!important;
}
.hpi-kta-back .hpi-kta-proof strong{
  font-size:1.24mm!important;
  line-height:1.04!important;
  font-weight:900!important;
}
.hpi-kta-back .hpi-contact-row:last-child b{
  text-transform:none!important;
  font-variant:normal!important;
  letter-spacing:0!important;
}
.hpi-kta-back .hpi-kta-validity{
  padding:0 2.2mm!important;
}
.hpi-kta-back .hpi-kta-validity small{
  font-size:.94mm!important;
  line-height:1.04!important;
}
.hpi-kta-back .hpi-kta-validity small span:last-child{
  letter-spacing:0!important;
}


/* REV62 — security panel true full-width vector, exact-ratio, no tiny center image */
.hpi-kta-back .hpi-kta-security{
  left:3.9mm!important;
  right:3.9mm!important;
  bottom:10.95mm!important;
  height:3.35mm!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:.65mm!important;
  background:transparent!important;
  overflow:hidden!important;
  display:block!important;
  box-shadow:none!important;
}
.hpi-kta-back .hpi-kta-security img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  display:block!important;
  object-fit:fill!important;
  object-position:center center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  filter:none!important;
  image-rendering:auto!important;
}


/* REV63 — hint upload SVG khusus Security Panel */
.hpi-security-upload-hint{
  display:block;
  margin-top:6px;
  color:#5e7187;
  font-size:10.5px;
  line-height:1.4;
}


/* REV64 — security panel true full-width block on KTA back */
.hpi-kta-back .hpi-kta-security{
  left:3.9mm!important;
  right:3.9mm!important;
  bottom:10.95mm!important;
  height:3.35mm!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:.65mm!important;
  overflow:hidden!important;
  display:block!important;
  box-shadow:none!important;
  background-color:#f7fbff!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
}
.hpi-kta-back .hpi-kta-security.has-asset{
  border:1px solid rgba(141,182,212,.75)!important;
  box-shadow:inset 0 0 0 .35mm rgba(255,255,255,.55)!important;
}
.hpi-kta-back .hpi-kta-security img{display:none!important}

/* REV64 — mobile dashboard/login tower background */
@media(max-width:900px){
  html body.v151-ui .admin-cockpit-hero{
    isolation:isolate!important;
    background-color:#071a33!important;
    background-image:
      linear-gradient(90deg,rgba(4,20,42,.90) 0%,rgba(5,35,68,.84) 44%,rgba(8,42,69,.60) 72%,rgba(39,20,30,.38) 100%),
      url('assets/electric-tower-sunset-rev49.png?v=rev64')!important;
    background-size:cover!important;
    background-position:center 58%!important;
    background-repeat:no-repeat!important;
  }
  html body.v151-ui .admin-cockpit-hero::before{
    content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:0!important;
    background:linear-gradient(180deg,rgba(2,14,31,.10),rgba(2,14,31,.34))!important;opacity:1!important;pointer-events:none!important;
  }
  html body.v151-ui .admin-cockpit-hero::after{display:none!important;content:none!important}
  html body.v151-ui .admin-cockpit-copy,
  html body.v151-ui .admin-cockpit-hero > *{position:relative!important;z-index:2!important}
  html body.v151-ui .admin-cockpit-copy p,
  html body.v151-ui .admin-cockpit-copy .admin-federation-name,
  html body.v151-ui .admin-cockpit-copy h2,
  html body.v151-ui .admin-cockpit-copy > strong{text-shadow:0 2px 7px rgba(0,0,0,.68)!important}

  html body.v151-ui #loginPage .login-brand-panel-v136{
    isolation:isolate!important;
    background-color:#071a33!important;
    background-image:
      linear-gradient(180deg,rgba(3,20,43,.72),rgba(5,34,64,.66) 55%,rgba(20,18,35,.68)),
      url('assets/electric-tower-sunset-rev49.png?v=rev64')!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }
  html body.v151-ui #loginPage .login-brand-panel-v136::before{
    content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:0!important;
    background:linear-gradient(90deg,rgba(3,20,43,.34),rgba(3,20,43,.10))!important;opacity:1!important;pointer-events:none!important;
  }
  html body.v151-ui #loginPage .login-brand-panel-v136::after{display:none!important;content:none!important}
  html body.v151-ui #loginPage .login-brand-panel-v136 > *{position:relative!important;z-index:2!important}
  html body.v151-ui #loginPage #loginPukName,
  html body.v151-ui #loginPage .login-brand-group-v20 > p{color:#fff!important;text-shadow:0 2px 7px rgba(0,0,0,.72)!important}
}


/* REV65 — security panel uploaded from private Storage renders reliably as full-width IMG */
.hpi-kta-back .hpi-kta-security{
  left:3.9mm!important;
  right:3.9mm!important;
  bottom:10.95mm!important;
  height:3.35mm!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:.65mm!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  background:#f7fbff!important;
  background-image:none!important;
  box-shadow:none!important;
}
.hpi-kta-back .hpi-kta-security.has-asset{
  border:.12mm solid rgba(141,182,212,.80)!important;
  box-shadow:inset 0 0 0 .16mm rgba(255,255,255,.58)!important;
}
.hpi-kta-back .hpi-kta-security img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  max-width:none!important;
  min-height:100%!important;
  max-height:none!important;
  flex:1 1 auto!important;
  object-fit:fill!important;
  object-position:center center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  filter:none!important;
  opacity:1!important;
  visibility:visible!important;
  image-rendering:auto!important;
}

/* REV65 — hilangkan garis/vector merah dekoratif pada header Dashboard Anggota */
html body.v151-ui #app.app.member-app .member-hero-v10::before{
  display:none!important;
  content:none!important;
  background:none!important;
  opacity:0!important;
}

/* REV65 — tower tetap menjadi background utama header anggota di HP */
@media(max-width:900px){
  html body.v151-ui #app.app.member-app .member-hero-v10{
    background-color:#071a33!important;
    background-image:
      linear-gradient(90deg,rgba(4,20,42,.86) 0%,rgba(6,35,67,.70) 46%,rgba(8,45,75,.36) 74%,rgba(42,25,37,.18) 100%),
      url('assets/electric-tower-sunset-rev49.png?v=rev65')!important;
    background-size:cover!important;
    background-position:center 32%!important;
    background-repeat:no-repeat!important;
  }
}


/* REV66 — gabungkan blok nama + detail anggota agar tampil lebih rapi pada KTA depan */
.hpi-kta-front .hpi-kta-member-name{
  display:none!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged{
  left:4.6mm!important;
  right:4.6mm!important;
  top:51.8mm!important;
  padding:1.08mm 1.22mm!important;
  gap:.16mm!important;
  border-radius:1.55mm!important;
  background:linear-gradient(180deg,rgba(6,40,82,.82),rgba(8,55,106,.58))!important;
  box-shadow:0 .4mm 1mm rgba(0,0,0,.10)!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged>div{
  min-height:3.7mm!important;
  grid-template-columns:16.4mm 1fr!important;
  gap:1.45mm!important;
  align-items:center!important;
  border-bottom:.16mm solid rgba(255,214,82,.72)!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged>div:last-child{
  border-bottom:0!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged>div:first-child{
  min-height:4.15mm!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged span{
  font-size:1.34mm!important;
  font-weight:900!important;
  color:#ffffff!important;
  letter-spacing:.03mm!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged b{
  font-size:1.54mm!important;
  font-weight:950!important;
  color:#ffffff!important;
  padding-left:0!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged .hpi-kta-data-name-row b{
  font-size:1.7mm!important;
  letter-spacing:.05mm!important;
  text-transform:uppercase!important;
}
.hpi-kta-front .hpi-kta-front-sign-panel{
  top:69.2mm!important;
}
.hpi-kta-front .hpi-kta-signatures{
  bottom:4.0mm!important;
}

/* REV66 — pastikan security panel full width mengikuti lebar efektif belakang KTA */
.hpi-kta-back .hpi-kta-security{
  left:2.35mm!important;
  right:2.35mm!important;
  bottom:10.7mm!important;
  height:4.2mm!important;
  width:auto!important;
  padding:0!important;
  margin:0!important;
  border-radius:.72mm!important;
  overflow:hidden!important;
  background:#f8fbff!important;
  background-image:none!important;
  box-shadow:inset 0 0 0 .18mm rgba(255,255,255,.56)!important;
}
.hpi-kta-back .hpi-kta-security.has-asset{
  border:.12mm solid rgba(133,173,214,.92)!important;
}
.hpi-kta-back .hpi-kta-security img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:scale(1.015)!important;
  transform-origin:center center!important;
  image-rendering:auto!important;
}


/* REV67 — security panel dibikin hampir edge-to-edge mengikuti lebar efektif KTA */
.hpi-kta-back .hpi-kta-security{
  left:.55mm!important;
  right:.55mm!important;
  bottom:10.7mm!important;
  height:4.55mm!important;
  width:auto!important;
  padding:0!important;
  margin:0!important;
  border-radius:.65mm!important;
  overflow:hidden!important;
  background:#f8fbff!important;
  background-image:none!important;
  box-shadow:inset 0 0 0 .14mm rgba(255,255,255,.48)!important;
}
.hpi-kta-back .hpi-kta-security.has-asset{
  border:.10mm solid rgba(130,168,208,.9)!important;
}
.hpi-kta-back .hpi-kta-security img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
  image-rendering:auto!important;
}

/* =========================================================
   REV68 — SECURITY PANEL EXACT 12:1 + TRUE EDGE-TO-EDGE
   2026-08-17
   - 0 mm sisi kiri/kanan
   - tinggi 4.5 mm untuk rasio desain +/- 12:1 pada KTA 54 mm
   - tanpa frame/border/radius yang dapat membuat panel tampak menyempit
   - object-fit fill aman karena aset bawaan REV68 dibuat tepat 12:1
   ========================================================= */
.hpi-kta-back .hpi-kta-security,
.kta-export-host .hpi-kta-back .hpi-kta-security{
  left:0!important;
  right:0!important;
  width:auto!important;
  bottom:10.7mm!important;
  height:4.5mm!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  display:block!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}
.hpi-kta-back .hpi-kta-security.has-asset,
.kta-export-host .hpi-kta-back .hpi-kta-security.has-asset{
  border:0!important;
  box-shadow:none!important;
}
.hpi-kta-back .hpi-kta-security img,
.kta-export-host .hpi-kta-back .hpi-kta-security img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  object-fit:fill!important;
  object-position:center center!important;
  transform:none!important;
  filter:none!important;
  image-rendering:auto!important;
}


/* =========================================================
   REV69 — KTA FRONT LAYOUT TUNE + SIGNATURE EXPORT SAFETY
   2026-08-17
   - beri jarak antara foto dan blok data
   - pastikan baris NAMA tidak terpotong di atas
   - pastikan baris DEVISI/DEPT tetap masuk area blok
   - turunkan sedikit area tanda tangan agar tidak mepet blok data
   - hilangkan latar kotak pada aset tanda tangan/stempel saat export
   ========================================================= */
.hpi-kta-front .hpi-kta-photo{
  top:24.05mm!important;
  left:16.9mm!important;
  width:21.6mm!important;
  height:25.4mm!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged{
  left:4.6mm!important;
  right:4.6mm!important;
  top:52.85mm!important;
  padding:1.22mm 1.28mm 1.18mm!important;
  gap:.22mm!important;
  border-radius:1.6mm!important;
  box-sizing:border-box!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged>div{
  min-height:3.95mm!important;
  grid-template-columns:16.7mm 1fr!important;
  gap:1.5mm!important;
  align-items:center!important;
  box-sizing:border-box!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged>div:first-child{
  min-height:4.55mm!important;
  padding-top:.18mm!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged>div:last-child{
  min-height:4.05mm!important;
  padding-bottom:.10mm!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged span{
  font-size:1.35mm!important;
  line-height:1.16!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged b{
  font-size:1.56mm!important;
  line-height:1.18!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged .hpi-kta-data-name-row b{
  font-size:1.86mm!important;
  line-height:1.18!important;
  padding-top:.08mm!important;
}
.hpi-kta-front .hpi-kta-front-sign-panel{
  top:70.55mm!important;
}
.hpi-kta-front .hpi-kta-signatures{
  bottom:3.2mm!important;
  height:11.9mm!important;
}
.hpi-kta-front .hpi-kta-sign-image,
.hpi-kta-front .hpi-kta-sign-image img,
.hpi-kta-front .hpi-kta-stamp,
.kta-export-host .hpi-kta-front .hpi-kta-sign-image,
.kta-export-host .hpi-kta-front .hpi-kta-sign-image img,
.kta-export-host .hpi-kta-front .hpi-kta-stamp{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
}
.kta-export-host .hpi-kta-front .hpi-kta-sign-image img,
.kta-export-host .hpi-kta-front .hpi-kta-stamp{
  mix-blend-mode:normal!important;
  filter:none!important;
}


/* =========================================================
   REV70 — FINAL FRONT/BACK KTA MICRO LAYOUT TUNE
   2026-08-17
   - NIP dan DEVISI/DEPT kembali masuk penuh ke area blok biru
   - judul tanda tangan + area paraf diturunkan ke panel putih
   - nama pejabat diturunkan agar lebih dekat ke garis bawah
   - paragraf belakang diberi jarak lebih lega agar tidak rapat
   ========================================================= */
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged{
  top:51.35mm!important;
  left:4.6mm!important;
  right:4.6mm!important;
  padding:1.00mm 1.24mm .96mm!important;
  gap:.14mm!important;
  border-radius:1.55mm!important;
  box-sizing:border-box!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged>div{
  min-height:3.56mm!important;
  grid-template-columns:16.6mm 1fr!important;
  gap:1.42mm!important;
  align-items:center!important;
  box-sizing:border-box!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged>div:first-child{
  min-height:4.10mm!important;
  padding-top:.16mm!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged>div:last-child{
  min-height:3.72mm!important;
  padding-bottom:.08mm!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged span{
  font-size:1.31mm!important;
  line-height:1.12!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged b{
  font-size:1.52mm!important;
  line-height:1.12!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged .hpi-kta-data-name-row b{
  font-size:1.80mm!important;
  line-height:1.12!important;
  padding-top:.05mm!important;
}
.hpi-kta-front .hpi-kta-front-sign-panel{
  top:70.15mm!important;
}
.hpi-kta-front .hpi-kta-signatures{
  top:71.55mm!important;
  bottom:auto!important;
  height:10.25mm!important;
  left:8.25%!important;
  right:8.25%!important;
}
.hpi-kta-front .hpi-kta-sign-col{
  grid-template-rows:2.10mm 4.80mm 2.20mm!important;
  align-items:center!important;
}
.hpi-kta-front .hpi-kta-sign-title{
  font-size:1.05mm!important;
  line-height:1!important;
  margin:.28mm 0 0!important;
  align-self:end!important;
}
.hpi-kta-front .hpi-kta-sign-image{
  height:4.80mm!important;
  align-self:center!important;
}
.hpi-kta-front .hpi-kta-sign-image img{
  max-width:94%!important;
  max-height:4.65mm!important;
  object-fit:contain!important;
}
.hpi-kta-front .hpi-kta-sign-name{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  width:100%!important;
  min-height:2.20mm!important;
  padding:.05mm 0 .10mm!important;
  margin:0!important;
  border-bottom:.24mm solid #173f91!important;
  color:#123f8f!important;
  font-size:1.00mm!important;
  line-height:1!important;
}
.hpi-kta-front .hpi-kta-stamp{
  top:84.05%!important;
}
.hpi-kta-back .hpi-kta-info-panel{
  top:50.55mm!important;
  min-height:18.0mm!important;
  padding:.88mm 1.05mm 1.05mm!important;
}
.hpi-kta-back .hpi-kta-proof{
  margin:0 0 .72mm!important;
  font-size:1.18mm!important;
  line-height:1.28!important;
}
.hpi-kta-back .hpi-kta-proof .hpi-kta-proof-lead{
  margin:0 auto .36mm!important;
  line-height:1.26!important;
}
.hpi-kta-back .hpi-kta-proof strong{
  font-size:1.34mm!important;
  line-height:1.14!important;
  margin:0 0 .18mm!important;
}
.hpi-kta-back .hpi-kta-proof .hpi-kta-proof-note{
  margin-top:.42mm!important;
  line-height:1.22!important;
}
.hpi-kta-back .hpi-kta-secretariat{
  top:62.85mm!important;
  gap:.44mm!important;
}
.hpi-kta-back .hpi-kta-secretariat>strong{
  margin:0 0 .42mm!important;
}


/* =========================================================
   REV71 — DATA BLOCK EXPAND + PHOTO LIFT + SIGN PDF BG FIX
   2026-08-17
   - blok data diperpanjang ke bawah agar mencakup DEVISI/DEPT.
   - foto dinaikkan agar tidak mepet ke area nama/blok data
   - area tanda tangan diturunkan menyesuaikan blok data
   - pembersihan background tanda tangan PDF diperkuat via jalur export
   ========================================================= */
.hpi-kta-front .hpi-kta-photo{
  top:21.85mm!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged{
  top:51.35mm!important;
  min-height:17.95mm!important;
  padding:1.02mm 1.24mm 1.46mm!important;
  gap:.16mm!important;
  align-content:start!important;
  box-sizing:border-box!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged>div{
  min-height:3.58mm!important;
  grid-template-columns:16.6mm 1fr!important;
  gap:1.42mm!important;
  align-items:center!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged>div:first-child{
  min-height:4.12mm!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged>div:last-child{
  min-height:3.88mm!important;
  padding-bottom:.16mm!important;
}
.hpi-kta-front .hpi-kta-front-sign-panel{
  top:71.35mm!important;
}
.hpi-kta-front .hpi-kta-signatures{
  top:72.55mm!important;
  height:9.85mm!important;
}
.hpi-kta-front .hpi-kta-sign-col{
  grid-template-rows:2.0mm 4.55mm 2.05mm!important;
}
.hpi-kta-front .hpi-kta-sign-title,
.hpi-kta-front .hpi-kta-sign-image,
.hpi-kta-front .hpi-kta-sign-image img,
.kta-export-host .hpi-kta-front .hpi-kta-sign-title,
.kta-export-host .hpi-kta-front .hpi-kta-sign-image,
.kta-export-host .hpi-kta-front .hpi-kta-sign-image img{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
}


/* =========================================================
   REV72 — PHOTO LIFT + SIGNATURE BLOCK RAISE
   2026-08-17
   - foto dinaikkan lagi agar tidak menyentuh area data
   - seluruh blok tanda tangan dinaikkan agar tidak terpotong ke bawah
   ========================================================= */
.hpi-kta-front .hpi-kta-photo{
  top:20.25mm!important;
}
.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged{
  top:51.55mm!important;
}
.hpi-kta-front .hpi-kta-front-sign-panel{
  top:70.45mm!important;
}
.hpi-kta-front .hpi-kta-signatures{
  top:71.15mm!important;
  height:10.55mm!important;
  bottom:auto!important;
}
.hpi-kta-front .hpi-kta-sign-col{
  grid-template-rows:1.95mm 4.65mm 2.35mm!important;
}
.hpi-kta-front .hpi-kta-sign-title{
  margin:0 0 .08mm!important;
  align-self:end!important;
}
.hpi-kta-front .hpi-kta-sign-image{
  height:4.65mm!important;
}
.hpi-kta-front .hpi-kta-sign-image img{
  max-height:4.5mm!important;
}
.hpi-kta-front .hpi-kta-sign-name{
  min-height:2.35mm!important;
  padding:.08mm 0 .18mm!important;
  align-items:flex-end!important;
}
.hpi-kta-front .hpi-kta-stamp{
  top:83.35%!important;
}


/* =========================================================
   REV73 — PHOTO +2 LEVELS / PURE-WHITE SIGN PANEL / PDF BOX FIX
   2026-08-17
   ========================================================= */
.hpi-kta-front .hpi-kta-photo{
  top:18.65mm!important;
}

/* Area putih tanda tangan BUKAN image PNG. Dibuat murni oleh CSS.
   Gunakan putih solid agar html2canvas tidak mengomposit gradient/transparansi
   menjadi blok abu-abu pada PDF. */
.hpi-kta-front .hpi-kta-front-sign-panel,
.kta-export-host .hpi-kta-front .hpi-kta-front-sign-panel{
  background:#ffffff!important;
  background-image:none!important;
  opacity:1!important;
  filter:none!important;
  box-shadow:none!important;
  isolation:isolate!important;
}
.hpi-kta-front .hpi-kta-signatures,
.hpi-kta-front .hpi-kta-sign-col,
.hpi-kta-front .hpi-kta-sign-title,
.hpi-kta-front .hpi-kta-sign-image,
.hpi-kta-front .hpi-kta-sign-name,
.kta-export-host .hpi-kta-front .hpi-kta-signatures,
.kta-export-host .hpi-kta-front .hpi-kta-sign-col,
.kta-export-host .hpi-kta-front .hpi-kta-sign-title,
.kta-export-host .hpi-kta-front .hpi-kta-sign-image,
.kta-export-host .hpi-kta-front .hpi-kta-sign-name{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
}
.kta-export-host .hpi-kta-front .hpi-kta-sign-image img,
.kta-export-host .hpi-kta-front .hpi-kta-stamp{
  background:transparent!important;
  background-image:none!important;
  mix-blend-mode:normal!important;
  filter:none!important;
}


/* =========================================================
   REV74 — SIGNATURE BLOCK RAISE + CLEARER BOTTOM LINE
   2026-08-17
   - judul Ketua Umum / Sekretaris Umum dinaikkan 2 tingkat
   - tanda tangan dinaikkan 2 tingkat
   - nama pejabat dan garis bawah dinaikkan 2 tingkat
   - garis bawah dibuat lebih tegas agar terlihat jelas
   ========================================================= */
.hpi-kta-front .hpi-kta-front-sign-panel{
  top:68.95mm!important;
}
.hpi-kta-front .hpi-kta-signatures{
  top:69.55mm!important;
  height:10.20mm!important;
  bottom:auto!important;
}
.hpi-kta-front .hpi-kta-sign-col{
  grid-template-rows:1.85mm 4.45mm 2.20mm!important;
  align-items:center!important;
}
.hpi-kta-front .hpi-kta-sign-title{
  font-size:1.04mm!important;
  margin:0!important;
  align-self:end!important;
}
.hpi-kta-front .hpi-kta-sign-image{
  height:4.45mm!important;
  align-self:center!important;
}
.hpi-kta-front .hpi-kta-sign-image img{
  max-height:4.30mm!important;
}
.hpi-kta-front .hpi-kta-sign-name{
  min-height:2.20mm!important;
  padding:.04mm 0 .20mm!important;
  margin:0!important;
  align-items:flex-end!important;
  border-bottom:.30mm solid #123f8f!important;
  color:#123f8f!important;
  font-size:1.00mm!important;
  line-height:1!important;
}
.hpi-kta-front .hpi-kta-stamp{
  top:81.95%!important;
}


/* =========================================================
   REV75 — BACK SECRETARIAT FONT + FOOTER TEXT LIFT
   2026-08-17
   - teks detail di bawah SEKRETARIAT diperbesar 2 tingkat
   - dua baris footer "Jika menemukan kartu ini..." dinaikkan 4 tingkat
   ========================================================= */
.hpi-kta-back .hpi-contact-row b{
  font-size:1.14mm!important;
  line-height:1.10!important;
}
.hpi-kta-back .hpi-contact-row i{
  font-size:1.10mm!important;
  line-height:1.08!important;
}
.hpi-kta-back .hpi-kta-secretariat{
  gap:.36mm!important;
}
.hpi-kta-back .hpi-kta-validity small{
  position:relative!important;
  top:-1.60mm!important;
  transform:none!important;
}
.hpi-kta-back .hpi-kta-validity small span{
  position:relative!important;
  top:0!important;
}


/* =========================================================
   REV76 — CORRECTION: FOOTER FONT SIZE +4 LEVELS, NO POSITION SHIFT
   2026-08-17
   - membatalkan pergeseran footer REV75
   - yang dinaikkan 4 tingkat adalah ukuran font footer
   - posisi paragraf footer dikembalikan ke layout normal
   ========================================================= */
.hpi-kta-back .hpi-kta-validity small{
  position:static!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  font-size:1.34mm!important;
  line-height:1.10!important;
}
.hpi-kta-back .hpi-kta-validity small span{
  position:static!important;
  top:auto!important;
  transform:none!important;
  font-size:inherit!important;
  line-height:inherit!important;
}


/* =========================================================
   REV77 — FRONT PHOTO LIFT +3 LEVELS
   2026-08-17
   - foto KTA depan dinaikkan 3 tingkat agar tidak menempel ke blok data
   ========================================================= */
.hpi-kta-front .hpi-kta-photo{
  top:16.25mm!important;
}


/* =========================================================
   REV78 — FRONT PHOTO LIFT +3 LEVELS AGAIN
   2026-08-17
   - foto KTA depan dinaikkan lagi 3 tingkat agar benar-benar tidak mepet ke blok data
   ========================================================= */
.hpi-kta-front .hpi-kta-photo{
  top:13.85mm!important;
}


/* =========================================================
   REV82 — BACK TEXT TUNE + FOOTER LOWER + FRONT PHOTO LIFT
   2026-08-18
   - judul SEKRETARIAT dikecilkan agar selaras dengan teks kuning di atas
   - teks footer bawah digeser turun 2 tingkat
   - foto KTA depan dinaikkan lagi 3 tingkat agar tidak mepet ke blok data
   ========================================================= */
.hpi-kta-back .hpi-kta-secretariat>strong{
  font-size:1.34mm!important;
  line-height:1.04!important;
  letter-spacing:.04mm!important;
  margin:0 0 .34mm!important;
}
.hpi-kta-back .hpi-kta-validity small{
  position:relative!important;
  top:.82mm!important;
  font-size:1.34mm!important;
  line-height:1.10!important;
}
.hpi-kta-back .hpi-kta-validity small span{
  position:relative!important;
  top:0!important;
  font-size:inherit!important;
  line-height:inherit!important;
}
.hpi-kta-front .hpi-kta-photo{
  top:11.45mm!important;
}


/* =========================================================
   REV83 — ACTUAL APP KTA OVERRIDE (HIGH SPECIFICITY)
   2026-08-18
   Root cause:
   legacy selector .rev50-card.rev50-portrait .rev50-portrait-photo-v3
   memiliki specificity lebih tinggi daripada override REV77/78/82.
   Rule ini sengaja memakai selector aktual kartu agar berlaku di aplikasi,
   export PDF, dan print — bukan hanya halaman preview lama.
   ========================================================= */
html body .rev50-card.rev50-portrait.hpi-kta-front .hpi-kta-photo.rev50-portrait-photo-v3,
html body #app .rev50-card.rev50-portrait.hpi-kta-front .hpi-kta-photo.rev50-portrait-photo-v3,
.kta-export-host .rev50-card.rev50-portrait.hpi-kta-front .hpi-kta-photo.rev50-portrait-photo-v3,
#ktaPrintRoot .rev50-card.rev50-portrait.hpi-kta-front .hpi-kta-photo.rev50-portrait-photo-v3{
  top:23.20mm!important;
}

html body .rev50-card.rev50-portrait.hpi-kta-back .hpi-kta-secretariat>strong,
html body #app .rev50-card.rev50-portrait.hpi-kta-back .hpi-kta-secretariat>strong,
.kta-export-host .rev50-card.rev50-portrait.hpi-kta-back .hpi-kta-secretariat>strong,
#ktaPrintRoot .rev50-card.rev50-portrait.hpi-kta-back .hpi-kta-secretariat>strong{
  font-size:1.34mm!important;
  line-height:1.04!important;
  letter-spacing:.04mm!important;
  margin:0 0 .34mm!important;
}

html body .rev50-card.rev50-portrait.hpi-kta-back .hpi-kta-validity small,
html body #app .rev50-card.rev50-portrait.hpi-kta-back .hpi-kta-validity small,
.kta-export-host .rev50-card.rev50-portrait.hpi-kta-back .hpi-kta-validity small,
#ktaPrintRoot .rev50-card.rev50-portrait.hpi-kta-back .hpi-kta-validity small{
  position:relative!important;
  top:.82mm!important;
  transform:none!important;
  font-size:1.34mm!important;
  line-height:1.10!important;
}
html body .rev50-card.rev50-portrait.hpi-kta-back .hpi-kta-validity small span,
html body #app .rev50-card.rev50-portrait.hpi-kta-back .hpi-kta-validity small span,
.kta-export-host .rev50-card.rev50-portrait.hpi-kta-back .hpi-kta-validity small span,
#ktaPrintRoot .rev50-card.rev50-portrait.hpi-kta-back .hpi-kta-validity small span{
  position:static!important;
  top:auto!important;
  transform:none!important;
  font-size:inherit!important;
  line-height:inherit!important;
}


/* =========================================================
   REV84 — FRONT PHOTO/DATA BALANCE (ACTUAL APP)
   2026-08-18
   - foto diturunkan dari posisi REV83 agar tidak menutup judul KARTU TANDA ANGGOTA
   - blok data dinaikkan sedikit agar tidak mepet panel putih tanda tangan
   - selector dibuat spesifik untuk aplikasi, PDF export, dan print
   ========================================================= */
html body .rev50-card.rev50-portrait.hpi-kta-front .hpi-kta-photo.rev50-portrait-photo-v3,
html body #app .rev50-card.rev50-portrait.hpi-kta-front .hpi-kta-photo.rev50-portrait-photo-v3,
.kta-export-host .rev50-card.rev50-portrait.hpi-kta-front .hpi-kta-photo.rev50-portrait-photo-v3,
#ktaPrintRoot .rev50-card.rev50-portrait.hpi-kta-front .hpi-kta-photo.rev50-portrait-photo-v3{
  top:24.80mm!important;
}
html body .rev50-card.rev50-portrait.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged,
html body #app .rev50-card.rev50-portrait.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged,
.kta-export-host .rev50-card.rev50-portrait.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged,
#ktaPrintRoot .rev50-card.rev50-portrait.hpi-kta-front .hpi-kta-data.hpi-kta-data-merged{
  top:50.60mm!important;
}


/* =========================================================
   REV85 — LOGIN BACKGROUND REPLACE WITH USER TOWER SCENE
   2026-08-18
   - ganti background halaman login dengan gambar tower yang diberikan user
   - turunkan intensitas overlay agar tower depan terlihat jelas
   ========================================================= */
.login-page,
body .login-page{
  background-image:
    linear-gradient(115deg,rgba(7,23,48,.18),rgba(9,42,90,.10),rgba(230,176,52,.08)),
    url('assets/login-background-tower-rev85.png')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
.login-overlay,
body .login-overlay{
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.10),transparent 34%),
    linear-gradient(90deg,rgba(7,26,55,.18),rgba(7,26,55,.06))!important;
}


/* =========================================================
   REV86 — HARD OVERRIDE LOGIN BACKGROUND ACTUAL APP SELECTOR
   2026-08-18
   Penyebab REV85 tidak tampil: rule lama dengan selector lebih spesifik
   html body.v151-ui #loginPage.login-page masih menang walau rule baru ada di bawah.
   REV86 memakai selector aktual yang sama/lebih kuat dan diletakkan paling akhir.
   ========================================================= */
html body.v151-ui #loginPage.login-page,
html body.v151-ui #loginPage.login-page:not(.hidden){
  background-color:#8fc6e7!important;
  background-image:
    linear-gradient(115deg,rgba(7,23,48,.08),rgba(9,42,90,.03),rgba(230,176,52,.03)),
    url('assets/login-background-tower-rev85.png?v=20260818-rev86')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
html body.v151-ui #loginPage.login-page::before,
html body.v151-ui #loginPage.login-page:not(.hidden)::before{
  background:linear-gradient(90deg,rgba(7,26,55,.07),rgba(7,26,55,.01))!important;
  background-image:linear-gradient(90deg,rgba(7,26,55,.07),rgba(7,26,55,.01))!important;
  opacity:1!important;
}
html body.v151-ui #loginPage.login-page .login-overlay{
  display:none!important;
  background:none!important;
  opacity:0!important;
}


/* =========================================================
   REV87 — ACTUAL LOGIN HERO BACKGROUND REPLACE (V13.5)
   2026-08-18
   - area login hero yang aktif di aplikasi diganti ke background tower baru
   - overlay dikurangi agar tower depan lebih jelas
   ========================================================= */
html body.v151-ui #loginPage.login-page:not(.hidden),
#loginPage.login-page:not(.hidden){
  background:
    linear-gradient(135deg, rgba(4,18,40,.22), rgba(8,44,88,.10) 48%, rgba(250,190,35,.06)),
    url('assets/login-background-tower-rev85.png') center center / cover no-repeat !important;
}
html body.v151-ui #loginPage.login-page:not(.hidden)::before,
#loginPage.login-page:not(.hidden)::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 48% 18%, rgba(255,255,255,.10), transparent 33%),
    linear-gradient(to bottom, rgba(3,12,27,.04), rgba(3,12,27,.12)) !important;
}
html body.v151-ui .login-page,
.login-page{
  background-image:
    linear-gradient(115deg,rgba(7,23,48,.18),rgba(9,42,90,.08),rgba(230,176,52,.06)),
    url('assets/login-background-tower-rev85.png') !important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}


/* =========================================================
   REV88 — LOGIN BRAND PANEL BACKGROUND REPLACE (USER IMAGE)
   2026-08-18
   - area panel login (logo, E-KTA DIGITAL, judul, dan portal) diganti
     memakai background landscape tower dari user
   - tambahkan overlay tipis agar teks tetap terbaca
   ========================================================= */
html body.v151-ui #loginPage .login-brand-panel-v136,
#loginPage .login-brand-panel-v136{
  position:relative!important;
  background:
    linear-gradient(135deg, rgba(6,29,58,.20), rgba(8,54,110,.10) 55%, rgba(255,255,255,.03)),
    url('assets/login-brand-panel-bg-rev88.png') center center / cover no-repeat!important;
  border-right:1px solid rgba(219,229,240,.22)!important;
}
html body.v151-ui #loginPage .login-brand-panel-v136::before,
#loginPage .login-brand-panel-v136::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.10), transparent 30%),
    linear-gradient(to bottom, rgba(4,17,35,.05), rgba(4,17,35,.12))!important;
}
html body.v151-ui #loginPage .login-brand-panel-v136 .login-brand-group,
html body.v151-ui #loginPage .login-brand-panel-v136 .login-logo-container,
html body.v151-ui #loginPage .login-brand-message-v136,
#loginPage .login-brand-panel-v136 .login-brand-group,
#loginPage .login-brand-panel-v136 .login-logo-container,
#loginPage .login-brand-message-v136{
  position:relative!important;
  z-index:2!important;
}
html body.v151-ui #loginPage .login-brand-panel-v136 .login-brand-group h1,
html body.v151-ui #loginPage .login-brand-panel-v136 .login-brand-group h2,
#loginPage .login-brand-panel-v136 .login-brand-group h1,
#loginPage .login-brand-panel-v136 .login-brand-group h2{
  color:#ffffff!important;
  text-shadow:0 2px 10px rgba(0,0,0,.28)!important;
}
html body.v151-ui #loginPage .login-brand-panel-v136 .login-brand-group p,
#loginPage .login-brand-panel-v136 .login-brand-group p{
  color:#f4f8ff!important;
  text-shadow:0 1px 8px rgba(0,0,0,.22)!important;
}
html body.v151-ui #loginPage .login-brand-message-v136,
#loginPage .login-brand-message-v136{
  background:rgba(255,255,255,.18)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:0 12px 28px rgba(8,20,40,.10)!important;
  backdrop-filter:blur(2px)!important;
  -webkit-backdrop-filter:blur(2px)!important;
  color:#ffffff!important;
}
html body.v151-ui #loginPage .login-brand-message-v136 strong,
#loginPage .login-brand-message-v136 strong,
html body.v151-ui #loginPage .login-brand-message-v136 span,
#loginPage .login-brand-message-v136 span{
  color:#ffffff!important;
}


/* =========================================================
   REV89 — LOGIN FULL BACKGROUND + BRAND PANEL USE USER IMAGE
   2026-08-18
   - background halaman login utama memakai gambar sunset tower dari user
   - background panel brand/login kiri juga memakai gambar yang sama
   - overlay dibuat tipis agar gambar tetap dominan namun teks tetap terbaca
   ========================================================= */
html body.v151-ui #loginPage.login-page:not(.hidden),
#loginPage.login-page:not(.hidden),
html body.v151-ui .login-page,
.login-page,
body .login-page{
  background:
    linear-gradient(120deg, rgba(6,24,46,.16), rgba(8,40,82,.10) 46%, rgba(255,173,58,.05)),
    url('assets/login-sunset-tower-rev89.png') center center / cover no-repeat !important;
}
html body.v151-ui #loginPage.login-page:not(.hidden)::before,
#loginPage.login-page:not(.hidden)::before,
.login-overlay,
body .login-overlay{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(to bottom, rgba(3,12,27,.04), rgba(3,12,27,.10)) !important;
}
html body.v151-ui #loginPage .login-brand-panel-v136,
#loginPage .login-brand-panel-v136{
  position:relative!important;
  background:
    linear-gradient(135deg, rgba(6,25,50,.14), rgba(8,45,92,.08) 56%, rgba(255,255,255,.03)),
    url('assets/login-sunset-tower-rev89.png') center center / cover no-repeat !important;
  border-right:1px solid rgba(255,255,255,.16)!important;
}
html body.v151-ui #loginPage .login-brand-panel-v136::before,
#loginPage .login-brand-panel-v136::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(circle at 78% 16%, rgba(255,255,255,.10), transparent 29%),
    linear-gradient(to bottom, rgba(4,17,35,.05), rgba(4,17,35,.12)) !important;
}
html body.v151-ui #loginPage .login-brand-panel-v136 .login-brand-group,
html body.v151-ui #loginPage .login-brand-panel-v136 .login-logo-container,
html body.v151-ui #loginPage .login-brand-message-v136,
#loginPage .login-brand-panel-v136 .login-brand-group,
#loginPage .login-brand-panel-v136 .login-logo-container,
#loginPage .login-brand-message-v136{
  position:relative!important;
  z-index:2!important;
}
html body.v151-ui #loginPage .login-brand-panel-v136 .login-brand-group h1,
html body.v151-ui #loginPage .login-brand-panel-v136 .login-brand-group h2,
#loginPage .login-brand-panel-v136 .login-brand-group h1,
#loginPage .login-brand-panel-v136 .login-brand-group h2,
html body.v151-ui #loginPage .login-brand-panel-v136 .login-brand-group p,
#loginPage .login-brand-panel-v136 .login-brand-group p{
  color:#ffffff!important;
  text-shadow:0 2px 10px rgba(0,0,0,.26)!important;
}
html body.v151-ui #loginPage .login-brand-message-v136,
#loginPage .login-brand-message-v136{
  background:rgba(255,255,255,.16)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 12px 28px rgba(8,20,40,.10)!important;
  backdrop-filter:blur(2px)!important;
  -webkit-backdrop-filter:blur(2px)!important;
  color:#ffffff!important;
}
html body.v151-ui #loginPage .login-brand-message-v136 strong,
#loginPage .login-brand-message-v136 strong,
html body.v151-ui #loginPage .login-brand-message-v136 span,
#loginPage .login-brand-message-v136 span{
  color:#ffffff!important;
}


/* =========================================================
   REV90 — DARKER LOGIN OVERLAY TUNE
   2026-08-18
   - tambahkan nuansa overlay lebih gelap pada area login yang ditandai user
   - latar tetap terlihat, namun atmosfer dibuat lebih gelap dan kontras
   ========================================================= */
html body.v151-ui #loginPage.login-page:not(.hidden),
#loginPage.login-page:not(.hidden),
html body.v151-ui .login-page,
.login-page,
body .login-page{
  background:
    linear-gradient(120deg, rgba(4,16,34,.28), rgba(6,30,60,.22) 48%, rgba(184,97,18,.10)),
    url('assets/login-sunset-tower-rev89.png') center center / cover no-repeat !important;
}

html body.v151-ui #loginPage.login-page:not(.hidden)::before,
#loginPage.login-page:not(.hidden)::before,
.login-overlay,
body .login-overlay{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 74% 20%, rgba(255,255,255,.06), transparent 26%),
    linear-gradient(to bottom, rgba(2,10,22,.20), rgba(2,10,22,.28)) !important;
}

html body.v151-ui #loginPage .login-brand-panel-v136,
#loginPage .login-brand-panel-v136{
  background:
    linear-gradient(135deg, rgba(3,17,35,.44), rgba(6,28,58,.34) 54%, rgba(124,58,11,.18)),
    url('assets/login-sunset-tower-rev89.png') center center / cover no-repeat !important;
  border-right:1px solid rgba(255,255,255,.14)!important;
}

html body.v151-ui #loginPage .login-brand-panel-v136::before,
#loginPage .login-brand-panel-v136::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(circle at 70% 18%, rgba(255,255,255,.08), transparent 24%),
    linear-gradient(to bottom, rgba(3,12,27,.18), rgba(3,12,27,.34)) !important;
}

html body.v151-ui #loginPage .login-brand-message-v136,
#loginPage .login-brand-message-v136{
  background:rgba(14,23,38,.26)!important;
  border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:0 14px 32px rgba(0,0,0,.16)!important;
}

/* =========================================================
   REV91 — LOGIN OVERLAY FULL PANEL FIX
   2026-08-18
   - reset ukuran pseudo-element lama (440x440) yang membuat overlay berhenti
     di tengah panel dan meninggalkan garis batas vertikal
   - overlay sekarang benar-benar menutup seluruh area brand/form panel
   - level gelap REV90 dipertahankan
   ========================================================= */
html body.v151-ui #loginPage .login-brand-panel-v136::before,
#loginPage .login-brand-panel-v136::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
  clip-path:none!important;
  opacity:1!important;
  pointer-events:none!important;
  z-index:1!important;
  background:
    radial-gradient(circle at 70% 18%, rgba(255,255,255,.08), transparent 24%),
    linear-gradient(to bottom, rgba(3,12,27,.18), rgba(3,12,27,.34)) !important;
}

html body.v151-ui #loginPage .login-brand-panel-v136,
#loginPage .login-brand-panel-v136{
  overflow:hidden!important;
  isolation:isolate!important;
}

html body.v151-ui #loginPage .login-brand-panel-v136 .login-brand-group,
html body.v151-ui #loginPage .login-brand-panel-v136 .login-logo-container,
html body.v151-ui #loginPage .login-brand-message-v136,
#loginPage .login-brand-panel-v136 .login-brand-group,
#loginPage .login-brand-panel-v136 .login-logo-container,
#loginPage .login-brand-message-v136{
  position:relative!important;
  z-index:2!important;
}

/* =========================================================
   REV92 — MEMBER DESKTOP DASHBOARD HERO USES ADMIN BACKGROUND
   2026-08-18
   - khusus desktop/PC (>= 901px)
   - gunakan gambar tower yang sama dengan header Dashboard Admin
   - gunakan overlay admin agar teks tetap terbaca
   - hapus dekorasi watermark/vector lama pada hero anggota desktop
   ========================================================= */
@media (min-width:901px){
  html body.v151-ui #app.app.member-app .member-portal-v10 > .member-hero-v10,
  html body.v151-ui #app.app.member-app .member-dashboard-v15 > .member-hero-v10,
  html body.v151-ui #app.app.member-app .member-hero-v10{
    isolation:isolate!important;
    background-color:#071a33!important;
    background-image:
      linear-gradient(90deg,rgba(4,20,42,.78) 0%,rgba(5,35,68,.66) 43%,rgba(8,42,69,.34) 70%,rgba(39,20,30,.18) 100%),
      url('assets/electric-tower-sunset-rev49.png?v=rev92')!important;
    background-size:cover!important;
    background-position:center 58%!important;
    background-repeat:no-repeat!important;
    box-shadow:0 30px 66px rgba(7,40,74,.26)!important;
  }

  html body.v151-ui #app.app.member-app .member-portal-v10 > .member-hero-v10::before,
  html body.v151-ui #app.app.member-app .member-dashboard-v15 > .member-hero-v10::before,
  html body.v151-ui #app.app.member-app .member-hero-v10::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    width:auto!important;
    height:auto!important;
    border:0!important;
    border-radius:inherit!important;
    background:linear-gradient(180deg,rgba(2,14,31,.04),rgba(2,14,31,.20))!important;
    opacity:1!important;
    pointer-events:none!important;
  }

  html body.v151-ui #app.app.member-app .member-portal-v10 > .member-hero-v10::after,
  html body.v151-ui #app.app.member-app .member-dashboard-v15 > .member-hero-v10::after,
  html body.v151-ui #app.app.member-app .member-hero-v10::after{
    display:none!important;
    content:none!important;
  }

  html body.v151-ui #app.app.member-app .member-desktop-welcome-v18{
    position:relative!important;
    z-index:2!important;
    text-shadow:0 2px 7px rgba(0,0,0,.52)!important;
  }
  html body.v151-ui #app.app.member-app .member-desktop-welcome-v18>p,
  html body.v151-ui #app.app.member-app .member-desktop-federation-v32{
    text-shadow:0 2px 6px rgba(0,0,0,.72)!important;
  }
}

/* =========================================================
   REV94 — COMPACT ADMIN NAVIGATION + ADMIN HUB PAGES
   2026-08-18
   - Sidebar Admin Nasional: 6 menu utama
   - Sidebar Admin Daerah: 5 menu utama
   - Master / Kepengurusan / Keanggotaan / Sistem memakai card hub
   ========================================================= */
body.v151-ui .admin-hub-shell{
  padding:24px!important;
  border-radius:24px!important;
  overflow:hidden;
}
body.v151-ui .admin-hub-heading{
  margin-bottom:18px!important;
  align-items:flex-start!important;
}
body.v151-ui .admin-hub-eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 10px;
  margin-bottom:7px;
  border:1px solid #d8e6f1;
  border-radius:999px;
  background:#f5f9fc;
  color:#5d7389;
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
}
body.v151-ui .admin-hub-heading h3{
  margin:0 0 5px!important;
  color:#0d2742!important;
  font-size:25px!important;
  line-height:1.2!important;
}
body.v151-ui .admin-hub-heading p{
  margin:0!important;
  max-width:760px;
}
body.v151-ui .admin-hub-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
}
body.v151-ui .admin-hub-grid .admin-module-card{
  min-height:136px!important;
  grid-template-columns:58px minmax(0,1fr) 22px!important;
  padding:18px!important;
}
body.v151-ui .sidebar nav .menu-flat > button{
  min-height:46px;
}
body.v151-ui .sidebar nav .menu-flat > button span:not(.nav-ic){
  line-height:1.2;
}
@media(max-width:1180px){
  body.v151-ui .admin-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
  body.v151-ui .admin-hub-shell{padding:16px!important;border-radius:20px!important}
  body.v151-ui .admin-hub-grid{grid-template-columns:1fr!important;gap:10px!important}
  body.v151-ui .admin-hub-grid .admin-module-card{min-height:104px!important;padding:14px!important;grid-template-columns:50px minmax(0,1fr) 18px!important}
  body.v151-ui .admin-hub-heading h3{font-size:21px!important}
}

/* =========================================================
   REV95 — MOBILE REPORT TYPE DROPDOWN 1–8 FULL VISIBILITY
   2026-08-18
   - khusus dropdown Jenis Laporan pada halaman Laporan
   - 8 jenis laporan tampil penuh pada HP normal
   - tidak terpotong card/notice di bawahnya
   - pada layar sangat pendek tetap dapat di-scroll
   - search box dihilangkan karena hanya ada 8 pilihan tetap
   ========================================================= */
@media (max-width:900px){
  html body.v151-ui #view .report-mobile-surface,
  html body.v151-ui #view .report-mobile-surface .report-control,
  html body.v151-ui #view .report-mobile-surface .report-toolbar-top,
  html body.v151-ui #view .report-mobile-surface .inline-field,
  html body.v151-ui #view .report-mobile-surface .report-type-select-field,
  html body.v151-ui #view #wrapper_reportTypeSelectHpi{
    overflow:visible!important;
  }

  html body.v151-ui #view .report-mobile-surface .report-control{
    position:relative!important;
    z-index:2000!important;
  }

  html body.v151-ui #view .report-mobile-surface .report-toolbar-top{
    position:relative!important;
    z-index:2100!important;
  }

  html body.v151-ui #view #wrapper_reportTypeSelectHpi{
    position:relative!important;
    z-index:2200!important;
  }

  html body.v151-ui #view #wrapper_reportTypeSelectHpi .searchable-select-dropdown{
    position:absolute!important;
    top:calc(100% + 4px)!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-height:min(390px,calc(100dvh - 170px))!important;
    overflow:hidden!important;
    z-index:999999!important;
    border:1px solid #b9cce0!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:0 18px 42px rgba(15,23,42,.24)!important;
  }

  /* Delapan jenis laporan tidak membutuhkan kolom pencarian. */
  html body.v151-ui #view #wrapper_reportTypeSelectHpi .searchable-select-search-box{
    display:none!important;
  }

  html body.v151-ui #view #wrapper_reportTypeSelectHpi .searchable-select-options{
    display:block!important;
    max-height:min(384px,calc(100dvh - 176px))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }

  html body.v151-ui #view #wrapper_reportTypeSelectHpi .searchable-select-option{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:41px!important;
    padding:10px 14px!important;
    line-height:1.3!important;
    white-space:normal!important;
    box-sizing:border-box!important;
    border-bottom:1px solid #edf2f7!important;
  }

  html body.v151-ui #view #wrapper_reportTypeSelectHpi .searchable-select-option:last-child{
    border-bottom:0!important;
  }

  html body.v151-ui #view .report-mobile-surface > .notice,
  html body.v151-ui #view .report-mobile-surface > .report-summary-grid,
  html body.v151-ui #view .report-mobile-surface > .card:not(.report-control){
    position:relative!important;
    z-index:1!important;
  }
}

/* ============================================================================
   REV96 — MOBILE REPORT SCOPE DROPDOWN + SIDEBAR BRAND + BANNER POLICY
   2026-08-18
   ============================================================================ */

/* 1) Cakupan Laporan: search box tidak boleh tertutup dropdown Jenis Laporan. */
@media (max-width:900px){
  html body.v151-ui #view .report-mobile-surface .report-scope-select-field,
  html body.v151-ui #view #wrapper_reportScopeSelectHpi{
    position:relative!important;
    z-index:2600!important;
    overflow:visible!important;
  }
  html body.v151-ui #view #wrapper_reportScopeSelectHpi .searchable-select-dropdown{
    position:absolute!important;
    top:calc(100% + 4px)!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-height:min(430px,calc(100dvh - 155px))!important;
    overflow:hidden!important;
    z-index:1000000!important;
    border:1px solid #b9cce0!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:0 18px 42px rgba(15,23,42,.24)!important;
  }
  html body.v151-ui #view #wrapper_reportScopeSelectHpi .searchable-select-search-box{
    display:block!important;
    position:sticky!important;
    top:0!important;
    z-index:3!important;
    padding:9px!important;
    background:#fff!important;
    border-bottom:1px solid #e4edf5!important;
  }
  html body.v151-ui #view #wrapper_reportScopeSelectHpi .searchable-select-search-input{
    display:block!important;
    width:100%!important;
    min-height:44px!important;
    box-sizing:border-box!important;
    margin:0!important;
  }
  html body.v151-ui #view #wrapper_reportScopeSelectHpi .searchable-select-options{
    display:block!important;
    max-height:min(350px,calc(100dvh - 225px))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  html body.v151-ui #view #wrapper_reportScopeSelectHpi .searchable-select-option{
    min-height:44px!important;
    padding:11px 14px!important;
    line-height:1.3!important;
    white-space:normal!important;
    box-sizing:border-box!important;
  }

  /* Jenis Laporan tetap di bawah dropdown Cakupan saat Cakupan terbuka. */
  html body.v151-ui #view #wrapper_reportTypeSelectHpi{
    z-index:2300!important;
  }
}

/* 2) Identitas organisasi sidebar dinaikkan ±3 tingkat agar terbaca. */
html body.v151-ui .sidebar .brand-panel #sidebarBrandTitle{
  font-size:10.5px!important;
  line-height:1.32!important;
  letter-spacing:-.018em!important;
}
html body.v151-ui .sidebar .brand-panel #sidebarBrandSubtitle{
  font-size:9.5px!important;
  line-height:1.4!important;
  letter-spacing:-.012em!important;
}
@media(max-width:900px){
  html body.v151-ui .sidebar .brand-panel #sidebarBrandTitle{
    font-size:11.5px!important;
    line-height:1.34!important;
    white-space:normal!important;
    overflow:visible!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
  html body.v151-ui .sidebar .brand-panel #sidebarBrandSubtitle{
    font-size:10px!important;
    line-height:1.42!important;
    white-space:normal!important;
    overflow:visible!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
}

/* 3) Informasi kebijakan banner di halaman admin. */
html body.v151-ui .banner-policy-v96{
  margin:12px 0 14px!important;
  padding:11px 14px!important;
  border:1px solid #c7ddeb!important;
  border-radius:12px!important;
  background:#f3f9fd!important;
  color:#294966!important;
  font-size:12px!important;
  line-height:1.45!important;
}
html body.v151-ui .banner-readonly-v96{
  display:inline-flex!important;
  align-items:center!important;
  min-height:30px!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  background:#eef3f8!important;
  color:#62768a!important;
  font-size:10.5px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
html body.v151-ui img.banner-preview-missing-v96{
  background:repeating-linear-gradient(135deg,#eef3f7,#eef3f7 9px,#e3eaf0 9px,#e3eaf0 18px)!important;
}


/* ============================================================================
   REV97 — SIDEBAR OVERLAY STACK + SELF REGISTRATION HANDLER REPAIR
   2026-08-18
   ============================================================================ */

/* Saat drawer sidebar terbuka di tablet/HP, seluruh konten termasuk toolbar
   laporan harus berada DI BAWAH backdrop. Hanya sidebar + tombol close yang aktif. */
@media (max-width:900px){
  html body.v151-ui .app.sidebar-open #view .report-mobile-surface .report-control,
  html body.v151-ui .app.sidebar-open #view .report-mobile-surface .report-toolbar-top,
  html body.v151-ui .app.sidebar-open #view .report-mobile-surface .inline-field,
  html body.v151-ui .app.sidebar-open #view #wrapper_reportScopeSelectHpi,
  html body.v151-ui .app.sidebar-open #view #wrapper_reportTypeSelectHpi{
    z-index:1!important;
  }
  html body.v151-ui .app.sidebar-open #view .report-mobile-surface .searchable-select-dropdown{
    visibility:hidden!important;
    pointer-events:none!important;
  }
  html body.v151-ui .app.sidebar-open .sidebar-backdrop{
    z-index:1900!important;
  }
  html body.v151-ui .app.sidebar-open .sidebar{
    z-index:2000!important;
  }
  html body.v151-ui .app.sidebar-open .sidebar-close{
    z-index:2100!important;
  }
}


/* ============================================================================
   REV98 — MEMBER INPUT CONSISTENCY + REPORT/SIDEBAR STACK REPAIR
   2026-08-19
   ============================================================================ */

/* Saat drawer sidebar dibuka, halaman laporan harus berada di belakang backdrop.
   Sebelumnya report-control/report-toolbar memiliki z-index 2000–2600 sehingga
   menimpa sidebar seperti pada screenshot pengguna. */
@media (max-width:900px){
  html body.v151-ui .app.sidebar-open #view .report-mobile-surface .report-control,
  html body.v151-ui .app.sidebar-open #view .report-mobile-surface .report-toolbar-top,
  html body.v151-ui .app.sidebar-open #view .report-mobile-surface .inline-field,
  html body.v151-ui .app.sidebar-open #view #wrapper_reportScopeSelectHpi,
  html body.v151-ui .app.sidebar-open #view #wrapper_reportTypeSelectHpi,
  html body.v151-ui .app.sidebar-open #view .report-mobile-surface .searchable-select-wrapper{
    z-index:1!important;
  }
  html body.v151-ui .app.sidebar-open #view .report-mobile-surface .searchable-select-dropdown{
    visibility:hidden!important;
    pointer-events:none!important;
  }
  html body.v151-ui .app.sidebar-open .sidebar-backdrop{
    display:block!important;
    opacity:1!important;
    pointer-events:auto!important;
    z-index:9900!important;
  }
  html body.v151-ui .app.sidebar-open .sidebar,
  html body.v151-ui .app.member-app.sidebar-open .sidebar{
    z-index:10000!important;
  }
  html body.v151-ui .app.sidebar-open .sidebar-close{
    z-index:10010!important;
  }
}

/* ============================================================================
   REV118 — SIDEBAR BRAND TITLE & SUBTITLE PERFECT FIT (ADMIN & ANGGOTA)
   ============================================================================ */
html body.v151-ui .sidebar .brand-panel #sidebarBrandTitle,
html body.v151-ui #app .sidebar .brand-panel #sidebarBrandTitle,
html body.v151-ui aside.sidebar .brand-panel #sidebarBrandTitle,
#sidebarBrandTitle {
  font-size: 8.5px !important;
  line-height: 1.32 !important;
  font-weight: 900 !important;
  letter-spacing: -0.015em !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  text-overflow: clip !important;
  overflow: visible !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 4px 0 2px !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}

html body.v151-ui .sidebar .brand-panel #sidebarBrandSubtitle,
html body.v151-ui #app .sidebar .brand-panel #sidebarBrandSubtitle,
html body.v151-ui aside.sidebar .brand-panel #sidebarBrandSubtitle,
#sidebarBrandSubtitle {
  font-size: 7.8px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  text-overflow: clip !important;
  overflow: visible !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  opacity: 0.92 !important;
}