*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f3f6fb;color:#172033}.app{display:flex;min-height:100vh}.sidebar{width:280px;background:linear-gradient(180deg,#0f3764,#071d35);color:white;padding:22px;position:fixed;top:0;bottom:0;left:0;overflow-y:auto}.brand{display:flex;gap:12px;align-items:center;margin-bottom:25px}.logo,.login-logo{width:48px;height:48px;background:#f6c343;color:#0f3764;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:26px}.brand h2{margin:0;font-size:25px}.brand p{margin:3px 0 0;color:#c6d5e6;font-size:12px}nav a{display:block;color:#d9e7f7;text-decoration:none;padding:12px 14px;border-radius:12px;margin:6px 0;font-weight:700}nav a.active,nav a:hover{background:rgba(255,255,255,.14);color:#fff}.main{margin-left:280px;width:calc(100% - 280px);padding:26px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.topbar h1{margin:0;font-size:28px}.topbar small{color:#68758a}.badge{background:#e8f2ff;border:1px solid #c9ddf5;border-radius:999px;padding:9px 14px;font-weight:700;color:#0f3764}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.card{background:white;border-radius:18px;padding:22px;box-shadow:0 10px 25px rgba(16,35,66,.08)}.card span{display:block;color:#68758a;font-weight:700;margin-bottom:8px}.card strong{font-size:31px;color:#0f3764}.card.wide{grid-column:span 2}.panel{background:white;border-radius:18px;padding:22px;box-shadow:0 10px 25px rgba(16,35,66,.08);margin-bottom:18px}h2{margin-top:0}.grid-form{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}input,select,textarea{width:100%;padding:12px;border:1px solid #d8e0ec;border-radius:11px;font-size:14px}textarea{grid-column:span 3;min-height:90px}.btn{border:0;background:#e8f2ff;color:#0f3764;padding:11px 15px;border-radius:11px;text-decoration:none;font-weight:800;cursor:pointer;display:inline-block}.btn.primary{background:#0f67b1;color:white}.btn.small{padding:8px 10px}.btn.full{width:100%;margin-top:10px}table{width:100%;border-collapse:collapse}th,td{padding:12px;border-bottom:1px solid #edf1f7;text-align:left;vertical-align:top}th{background:#f8fbff;color:#3a4a60}.status{background:#eef3fa;border-radius:999px;padding:6px 10px;font-weight:700;font-size:12px;display:inline-block}.status.ok{background:#e5f8ed;color:#13713a}.status.warn{background:#fff3d8;color:#8a5a00}.link-danger{border:0;background:none;color:#c02727;font-weight:800;cursor:pointer;padding:5px}.inline{display:flex;gap:6px;align-items:center}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.upload-label{display:block;background:#f8fbff;border:1px dashed #b8c7d9;border-radius:11px;padding:10px;font-weight:700;color:#0f3764}.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f3764,#0f67b1)}.login-card{background:white;border-radius:22px;box-shadow:0 20px 50px rgba(0,0,0,.2);width:380px;max-width:92%;padding:30px}.login-card h1{margin:15px 0 0}.login-card p{color:#68758a}.error{background:#ffe8e8;color:#b00020;padding:10px;border-radius:10px;margin:10px 0}@media(max-width:900px){.sidebar{position:relative;width:100%;bottom:auto}.app{display:block}.main{margin-left:0;width:100%}.cards,.grid-form{grid-template-columns:1fr}textarea,.card.wide{grid-column:span 1}}

.check-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0}.check-item{display:grid;grid-template-columns:auto 1fr 80px;gap:10px;align-items:center;background:#f8fbff;border:1px solid #dce8f5;border-radius:14px;padding:12px}.qty{padding:8px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px}@media(max-width:900px){.check-list{grid-template-columns:1fr}}

:root{--navy:#0a2b4f;--blue:#146cc2;--gold:#ffc83d}
body{background:radial-gradient(circle at top right,#eaf3ff 0,#f6f8fc 45%,#edf2f8 100%)}
.card,.panel{border:1px solid rgba(198,213,230,.55);box-shadow:0 18px 45px rgba(16,35,66,.08)}
.btn.primary{background:linear-gradient(135deg,#0f67b1,#1684e6)}
.hero-panel{background:linear-gradient(135deg,#fff,#f4f9ff)}
.progress-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.progress-card{background:#f8fbff;border:1px solid #dce8f5;border-radius:16px;padding:14px}
.progressbar{height:10px;background:#e4edf8;border-radius:999px;overflow:hidden}.progressbar i{display:block;height:100%;background:linear-gradient(90deg,#0f67b1,#19a1ff)}
@media print{.sidebar,.topbar,.actions,form,.btn{display:none!important}.main{margin:0!important;width:100%!important}.panel{box-shadow:none;border:1px solid #ddd}}

.complaint{background:#f8fbff;border:1px solid #dce8f5;border-radius:18px;padding:16px;margin:14px 0}.mini-steps{display:flex;gap:5px;margin:10px 0}.mini-steps span{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#e9eef6;color:#68758a;font-size:12px;font-weight:800}.mini-steps span.done{background:#0f67b1;color:white}.org-chart{padding:20px;background:linear-gradient(135deg,#f7fbff,#eef6ff);border-radius:18px;border:1px solid #dce8f5}.org-level{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.org-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.org-card{min-width:190px;background:white;border:1px solid #dce8f5;border-radius:16px;padding:16px;text-align:center;box-shadow:0 8px 20px rgba(16,35,66,.06)}.org-card.top{background:linear-gradient(135deg,#0f67b1,#1684e6);color:white}.org-card b{display:block;margin-bottom:7px}.org-line{height:26px;width:2px;background:#bdd6f5;margin:8px auto}.market-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.market-card{background:#f8fbff;border:1px solid #dce8f5;border-radius:18px;padding:16px}.market-card h3{margin:10px 0}.market-card small{display:block;color:#68758a;margin-top:10px}@media(max-width:1000px){.market-grid,.org-grid{grid-template-columns:1fr 1fr}}@media(max-width:650px){.market-grid,.org-grid{grid-template-columns:1fr}}

.notice{background:#fff8e5;border:1px solid #ffe1a6;color:#6b4a00;border-radius:16px;padding:14px;margin:12px 0}.notice.danger{background:#ffecec;border-color:#ffb8b8;color:#8a1010}.market-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.market-card{background:#f8fbff;border:1px solid #dce8f5;border-radius:18px;padding:16px}.thumb{width:100%;max-height:180px;object-fit:cover;border-radius:14px;margin:8px 0}@media(max-width:1000px){.market-grid{grid-template-columns:1fr 1fr}}@media(max-width:650px){.market-grid{grid-template-columns:1fr}}

@media print{.sidebar,.topbar,.actions,form,.btn,.link-danger{display:none!important}.main{margin:0!important;width:100%!important}.panel{box-shadow:none;border:1px solid #ddd}}
.schedule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.schedule-card{display:grid;grid-template-columns:70px 1fr;gap:14px;align-items:center;background:#f8fbff;border:1px solid #dce8f5;border-radius:18px;padding:14px}.schedule-date{background:linear-gradient(135deg,#0f67b1,#1684e6);color:white;border-radius:16px;text-align:center;padding:10px}.schedule-date b{display:block;font-size:28px;line-height:1}.schedule-date span{text-transform:uppercase;font-size:12px}.schedule-card h3{margin:0 0 6px 0}.schedule-card p{margin:0;color:#536273}.schedule-card small{color:#68758a}@media(max-width:1000px){.schedule-grid{grid-template-columns:1fr 1fr}}@media(max-width:650px){.schedule-grid{grid-template-columns:1fr}}@media print{.sidebar,.topbar,.actions,form,.btn,.link-danger{display:none!important}.main{margin:0!important;width:100%!important}.panel{box-shadow:none;border:1px solid #ddd}}
/* SIPAGA V5.2 Sprint 3 - Penghuni thumbnail & tiket keluhan */
.penghuni-thumb{width:64px!important;height:64px!important;object-fit:cover;border-radius:14px;border:1px solid #dce8f5;background:#f3f6fb;display:flex;align-items:center;justify-content:center;font-size:26px;color:#68758a}.penghuni-thumb.placeholder{font-size:28px}.muted{color:#68758a}.ticket-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.ticket-card{background:#f8fbff;border:1px solid #dce8f5;border-radius:18px;padding:16px}.ticket-card h3{margin:6px 0 4px}.ticket-thread{display:flex;flex-direction:column;gap:12px}.thread-item{border:1px solid #dce8f5;border-radius:18px;padding:14px;max-width:860px}.thread-item.from-warga{background:#fff}.thread-item.from-pengurus{background:#f0f7ff;margin-left:30px}.thread-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.thread-head small{color:#68758a}.thread-item p{white-space:pre-wrap;margin-bottom:8px}@media(max-width:900px){.ticket-grid{grid-template-columns:1fr}.thread-item.from-pengurus{margin-left:0}.penghuni-thumb{width:52px!important;height:52px!important}}

/* SIPAGA V6.1 Smart Community - Mobile Portal & Notification Center */
.notif-cards{grid-template-columns:repeat(3,1fr);margin-bottom:12px}.notif{text-decoration:none;color:inherit}.notif:hover{transform:translateY(-2px);transition:.2s}.btn.success{background:#16a34a;color:white}.ticket-panel{border-left:5px solid #0f67b1}.chat-mode{background:#f6f9fd;border-radius:18px;padding:14px}.chat-mode .thread-item{max-width:78%;box-shadow:0 8px 20px rgba(16,35,66,.06)}.chat-mode .from-warga{align-self:flex-end;background:#e9f7ef;border-color:#bbefd0}.chat-mode .from-pengurus{align-self:flex-start;background:#fff;margin-left:0}.mobile-bottom-nav{display:none}.smart-portal .card strong{font-size:26px}@media(max-width:900px){.notif-cards{grid-template-columns:1fr}.sidebar{display:none}.main{padding:14px 14px 76px 14px}.topbar{position:sticky;top:0;z-index:10;background:rgba(246,248,252,.94);backdrop-filter:blur(8px);padding:10px 0}.topbar h1{font-size:20px}.badge{font-size:11px}.panel{padding:16px;border-radius:16px}.cards{grid-template-columns:1fr}.card strong{font-size:25px}table{display:block;overflow-x:auto;white-space:nowrap}.chat-mode .thread-item{max-width:94%}.mobile-bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #dce8f5;box-shadow:0 -8px 22px rgba(16,35,66,.08);z-index:99}.mobile-bottom-nav a{flex:1;text-align:center;text-decoration:none;color:#0f3764;font-weight:800;padding:13px 6px;font-size:12px}.grid-form{grid-template-columns:1fr!important}textarea{grid-column:span 1!important}}
@media print{.mobile-bottom-nav{display:none!important}}

/* SIPAGA V6.1 Sprint 1 COMPLETE - Portal Warga V2 */
.portal-cards{grid-template-columns:repeat(3,1fr)}
.portal-section{scroll-margin-top:90px}
.portal-ticket-grid{grid-template-columns:repeat(2,1fr);margin-top:14px}
.penghuni-thumb{width:64px!important;height:64px!important;object-fit:cover;border-radius:14px;border:1px solid #dce8f5;background:#f3f6fb;display:flex;align-items:center;justify-content:center;font-size:26px;color:#68758a}
.status.ok{background:#e5f8ed;color:#13713a}.status.warn{background:#fff3d8;color:#8a5a00}
@media(max-width:900px){.portal-cards,.portal-ticket-grid{grid-template-columns:1fr}.portal-section{scroll-margin-top:72px}}

/* SIPAGA V6.1 Sprint 3 - Smart Identity & Activity */
.smart-cards .card strong{font-size:26px}.qr-card{max-width:420px;margin:0 auto;text-align:center;border:2px dashed #b8c7d9;border-radius:24px;padding:28px;background:#fff}.qr-card h1{font-size:44px;margin:8px 0;color:#0f3764}.qr-img{width:260px;height:260px;object-fit:contain;background:white;border:1px solid #e7edf6;border-radius:18px;padding:8px}.kartu-warga{width:720px;max-width:100%;margin:0 auto;background:linear-gradient(135deg,#0f3764,#1684e6);color:#fff;border-radius:24px;padding:22px;box-shadow:0 18px 45px rgba(16,35,66,.18)}.kartu-head{display:flex;gap:12px;align-items:center;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:14px}.kartu-head small{display:block;color:#dceeff}.kartu-body{display:grid;grid-template-columns:140px 1fr 160px;gap:18px;align-items:center;padding-top:18px}.kartu-foto{width:130px;height:160px;object-fit:cover;border-radius:18px;border:3px solid rgba(255,255,255,.6);background:#eef3fa;color:#0f3764;display:flex;align-items:center;justify-content:center;font-size:46px}.kartu-qr{width:150px;height:150px;background:white;border-radius:18px;padding:8px}.kartu-body h2{font-size:30px;margin:0 0 12px}.kartu-body p{margin:7px 0}.qr-print-card{text-align:center}@media(max-width:900px){.kartu-body{grid-template-columns:1fr;text-align:center}.kartu-foto,.kartu-qr{margin:0 auto}.qr-card h1{font-size:34px}}
@media print{.qr-card,.kartu-warga{box-shadow:none}.qr-card{border:2px solid #222}.kartu-warga{color:white!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}}


/* SIPAGA V6.2 - Kartu KTP/CR80 dan Polling */
.kartu-warga{width:85.6mm;height:53.98mm;box-sizing:border-box;border-radius:3.18mm;border:1px solid #d6dbe6;background:linear-gradient(135deg,#fff,#eef4ff);padding:4mm;box-shadow:0 8px 24px rgba(15,23,42,.16);overflow:hidden;position:relative;color:#0f172a}
.kartu-head{display:flex;gap:2.5mm;align-items:center;margin-bottom:2.4mm}.kartu-head .logo{width:9mm;height:9mm;border-radius:50%;display:grid;place-items:center;background:#1d4ed8;color:white;font-weight:800}.kartu-head small{display:block;font-size:2.5mm;color:#475569}.kartu-body{display:grid;grid-template-columns:18mm 1fr 18mm;gap:3mm;align-items:center}.kartu-foto{width:18mm!important;height:22mm!important;object-fit:cover;border-radius:2mm;border:1px solid #cbd5e1;background:#f8fafc;display:grid;place-items:center}.kartu-body h2{font-size:4.2mm;line-height:1.05;margin:0 0 1mm}.kartu-body p{font-size:2.55mm;margin:.7mm 0}.kartu-qr{width:18mm!important;height:18mm!important;object-fit:contain;background:white;padding:1mm;border-radius:1mm}.muted{color:#64748b;font-size:12px}.poll-row{margin:12px 0}.poll-row>div:first-child{display:flex;justify-content:space-between;gap:16px}.pollbar{height:12px;background:#e5e7eb;border-radius:999px;overflow:hidden}.pollbar i{display:block;height:100%;background:#2563eb}
@media print{body{background:white}.sidebar,.topbar,.panel-head .btn,.actions .btn,button,.grid-form{display:none!important}.main{margin:0;padding:0}.panel{box-shadow:none;border:0;padding:0}.kartu-warga{box-shadow:none;page-break-inside:avoid}}


/* SIPAGA V6.4 Sprint 2 - Mobile Portal Final */
.portal-mobile-home{display:none}
.portal-greeting{display:flex;justify-content:space-between;gap:14px;align-items:center}
.portal-greeting h2{margin:2px 0 4px;font-size:28px}
.portal-greeting small{font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.06em}
.portal-bell{position:relative;width:54px;height:54px;border-radius:18px;background:#eef6ff;text-decoration:none;display:grid;place-items:center;font-size:24px;color:#0f3764;border:1px solid #dce8f5}.portal-bell b{position:absolute;top:-6px;right:-6px;background:#dc2626;color:white;border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;font-size:11px;border:2px solid white}.portal-quick-menu{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:16px}.portal-quick-menu a{background:#f8fbff;border:1px solid #dce8f5;border-radius:18px;padding:12px 8px;text-align:center;text-decoration:none;color:#0f3764;font-weight:900}.portal-quick-menu span{display:block;font-size:24px;margin-bottom:4px}.portal-alert-list{display:grid;gap:10px;margin-top:16px}.portal-alert{display:block;text-decoration:none;background:#fff7e6;border:1px solid #ffe1a6;border-radius:16px;padding:12px;color:#5f4200}.portal-alert b,.portal-alert small{display:block}.portal-alert small{margin-top:4px;color:#745421}.notification-list{display:grid;gap:12px}.notification-item{display:grid;grid-template-columns:120px 1fr auto;gap:12px;align-items:center;background:#f8fbff;border:1px solid #dce8f5;border-radius:18px;padding:14px}.notification-item.unread{background:#fff8e8;border-color:#ffd98b}.notification-item small{color:#64748b}.dashboard-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.dashboard-kpi{background:#f8fbff;border:1px solid #dce8f5;border-radius:18px;padding:16px}.dashboard-kpi strong{display:block;font-size:28px;color:#0f3764;margin-top:6px}
@media(max-width:900px){.portal-mobile-home{display:block}.smart-portal .portal-cards{grid-template-columns:repeat(2,1fr)}.portal-cards .wide{grid-column:span 2}.portal-quick-menu{grid-template-columns:repeat(5,1fr);gap:7px}.portal-quick-menu a{font-size:11px;padding:10px 4px;border-radius:14px}.portal-quick-menu span{font-size:20px}.mobile-bottom-nav a{display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;padding:9px 4px}.mobile-bottom-nav a span{font-size:18px;line-height:1}.notification-item{grid-template-columns:1fr}.dashboard-kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.smart-portal .portal-cards{grid-template-columns:1fr}.portal-cards .wide{grid-column:span 1}.portal-greeting h2{font-size:22px}}