.AIR{
      --bg1:#f6f8ff;
      --bg2:#f2fbff;
      --text:#0f172a;
      --muted:#64748b;
      --line:rgba(15,23,42,.10);
      --shadow:0 18px 55px rgba(2,6,23,.14);
      --shadow2:0 10px 26px rgba(2,6,23,.10);
      --r18:18px;
      --r22:22px;

      --pri:#2563eb;
      --ok:#16a34a;
      --warn:#f59e0b;
      --danger:#ef4444;

      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color:var(--text);
      min-height:90vh;
      padding:50px 5px;
      
      background:
        radial-gradient(1000px 600px at 10% -10%, rgba(37,99,235,.16), transparent 55%),
        radial-gradient(900px 600px at 100% 0%, rgba(14,165,233,.16), transparent 55%),
        radial-gradient(900px 700px at 60% 110%, rgba(34,197,94,.12), transparent 60%),
        linear-gradient(180deg, var(--bg1), var(--bg2));
      box-sizing:border-box;
    }
    .AIR *{ box-sizing:border-box; }
    .AIR .wrap{ max-width:1150px; margin:0 auto; padding-bottom:120px; }

    /* ===== Header ===== */

    .AIR .brand{ display:flex; gap:12px; align-items:center; min-width:0; }
    .AIR .logo{
      width:44px;height:44px;border-radius:14px; display:grid;place-items:center;
      background: linear-gradient(135deg, var(--pri), #06b6d4);
      color:#fff; font-weight:1000;
      box-shadow:0 14px 30px rgba(37,99,235,.25);
      flex:0 0 auto;
    }

    .AIR .monthSelectWrap{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border:1px solid rgba(2,6,23,.10);
  border-radius:16px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
}

.AIR .monthLbl{
  font-weight:900;
  font-size:12px;
  color: rgba(30,41,59,.85);
}

.AIR .monthSelect{
  min-width: 180px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(2,6,23,.12);
  font-weight:900;
  outline:none;
  background:#fff;
}
.AIR .monthSelect:focus{
  box-shadow: 0 0 0 4px rgba(59,130,246,.15);
  border-color: rgba(59,130,246,.35);
}

    .AIR .brand h1{
      margin:0; font-size:16px; font-weight:950; letter-spacing:.2px; line-height:1.1;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:58vw;
    }
    .AIR .brand small{
      display:block; margin-top:2px; color:var(--muted); font-weight:750; font-size:12px;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:62vw;
    }

    .AIR .actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
    .AIR .btn{
      border:1px solid var(--line);
      background:rgba(255,255,255,.85);
      color:var(--text);
      padding:10px 12px;
      border-radius:14px;
      font-weight:850;
      font-size:13px;
      cursor:pointer;
      box-shadow:0 10px 20px rgba(2,6,23,.06);
      transition:.15s ease;
      user-select:none;
    }
    .AIR .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 28px rgba(2,6,23,.10); }
    .AIR .btn.primary{
      background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(29,78,216,.95));
      border-color: rgba(37,99,235,.35);
      color:#fff;
    }
    .AIR .btn.danger{
      background: linear-gradient(135deg, rgba(239,68,68,.95), rgba(220,38,38,.95));
      border-color: rgba(239,68,68,.35);
      color:#fff;
    }

    /* ===== Tabs / Views ===== */
    #bar{
      margin-top:2px;
      position : relative ;    
          display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
    }
    .AIR .tabs{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
    .AIR .tab{
      padding:10px 12px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.75);
      font-weight:900;
      font-size:13px;
      color:var(--text);
      cursor:pointer;
      transition:.15s ease;
      user-select:none;
    }
    .AIR .tab:hover{ transform: translateY(-1px); }
    .AIR .tab.active{
      color:#fff;
      border-color: rgba(37,99,235,.35);
      background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(14,165,233,.95));
      box-shadow:0 16px 30px rgba(37,99,235,.18);
    }

    /* ===== Summary ===== */
    .AIR .summary{
      margin-top:12px;
      display:grid;
      grid-template-columns: 1.2fr .8fr .8fr;
      gap:10px;
    }
    @media (max-width: 860px){ .AIR .summary{ grid-template-columns: 1fr; } }
    .AIR .pill{
      border:1px solid var(--line);
      border-radius: var(--r18);
      background: rgba(255,255,255,.82);
      box-shadow:0 12px 22px rgba(2,6,23,.06);
      padding:12px 12px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
    }
    .AIR .pill .k{ color:var(--muted); font-weight:900; font-size:12px; }
    .AIR .pill .v{ font-weight:1000; font-size:14px; }
    .AIR .pill .sub{ margin-top:4px; color:var(--muted); font-weight:800; font-size:12px; }

    /* ===== Panels ===== */
     .panel{
      margin-top:12px;
      border:1px solid var(--line);
      border-radius: var(--r22);
      background: rgba(255,255,255,.82);
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .panel-h{
      padding:12px 14px;
      display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
      border-bottom:1px solid rgba(2,6,23,.06);
      background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(255,255,255,.90));
      overflow: hidden;
    }
     .panel-h .t{ font-weight:1000; font-size:14px; }
     .panel-b{ padding:12px 14px 14px; }
    .muted{ color:var(--muted); font-weight:800; }

    /* ===== Cards ===== */
    .AIR .grid{
      margin-top:2px;
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:3px;
    }
    @media (max-width: 900px){ .AIR .grid{ grid-template-columns:1fr; } }

    .AIR .card{
      border:1px solid var(--line);
      border-radius: var(--r22);
      background: rgba(255,255,255,.86);
      box-shadow: var(--shadow2);
      overflow:hidden;
      cursor:pointer;
      transition:.15s ease;
      position:relative;
    }
    .AIR .card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
    .AIR .card.lunas{
      border-color: rgba(22,163,74,.25);
      background: linear-gradient(135deg, rgba(22,163,74,.06), rgba(255,255,255,.90));
    }
    .AIR .card.nunggak{
      border-color: rgba(239,68,68,.22);
      background: linear-gradient(135deg, rgba(239,68,68,.06), rgba(255,255,255,.90));
    }

    .AIR .card .head{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      padding:4px 5px;
      border-bottom:1px solid rgba(2,6,23,.06);
      background: linear-gradient(135deg, rgba(34, 89, 207, 0.1), rgba(255,255,255,.85));
    }
    .AIR .card .ttl{ min-width:0; }
    .AIR .card .ttl .name{
      font-weight:1000; font-size:14px; line-height:1.15;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70vw;
    }
    .AIR .card .ttl .meta{
      margin-top:2px; font-weight:800; font-size:12px; color:var(--muted);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70vw;
    }
    .AIR .badge{
      font-weight:950; font-size:12px; padding:8px 10px; border-radius:999px;
      /* border:1px solid rgba(2,6,23,.08); */
      background: rgba(255,255,255,.75);
      display:flex; align-items:center; gap:8px; flex:0 0 auto;
    }
    .AIR .dot{ width:9px;height:9px;border-radius:999px; background: var(--warn); box-shadow:0 10px 16px rgba(245,158,11,.25); }
    .AIR .badge.ok .dot{ background: var(--ok); box-shadow:0 10px 16px rgba(22,163,74,.22); }
    .AIR .badge.bad .dot{ background: var(--danger); box-shadow:0 10px 16px rgba(239,68,68,.22); }

    .AIR .cols{
      padding:12px 14px 14px;
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap:10px;
    }
    @media (max-width: 1020px){ .AIR .cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .AIR .col{
      border:1px solid rgba(2,6,23,.06);
      border-radius: 16px;
      padding:10px 10px;
      background: rgba(255,255,255,.78);
      min-height:74px;
    }
    .AIR .lab{ color:var(--muted); font-weight:900; font-size:11px; letter-spacing:.2px; }
    .AIR .val{ margin-top:4px; font-weight:1000; font-size:13px; line-height:1.2; word-break:break-word; }
    .AIR .val.small{ font-size:12px; font-weight:900; color:rgba(15,23,42,.88); }
    .AIR .val.money{ font-size:14px; }

    .AIR .foot{
      padding:10px 14px 12px;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      border-top:1px dashed rgba(2,6,23,.10);
      background: rgba(255,255,255,.70);
    }
    .AIR .foot .hint{
      color:var(--muted);
      font-weight:800;
      font-size:12px;
      display:flex;
      gap:8px;
      align-items:center;
      min-width:0;
    }
    .AIR .mini{
      border:1px solid rgba(2,6,23,.10);
      background:#fff;
      border-radius:999px;
      padding:8px 10px;
      font-weight:950;
      font-size:12px;
      cursor:pointer;
      user-select:none;
      transition:.15s ease;
      white-space:nowrap;
    }
    .AIR .mini:hover{ transform: translateY(-1px); }
    .AIR .mini.ok{
      border-color: rgba(22,163,74,.25);
      background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(255,255,255,.95));
    }
    .AIR .mini.pay{
      border-color: rgba(37,99,235,.25);
      background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(255,255,255,.95));
    }
    .AIR .mini.del{
      border-color: rgba(239,68,68,.22);
      background: linear-gradient(135deg, rgba(239,68,68,.10), rgba(255,255,255,.95));
    }

    .AIR .empty{
      margin-top:12px;
      padding:16px;
      border:1px dashed rgba(2,6,23,.18);
      border-radius: var(--r22);
      background: rgba(255,255,255,.70);
      color: var(--muted);
      font-weight:850;
      text-align:center;
    }

     .AIR .btnRingkas{
      border-color: rgba(239,68,68,.22);
      background: goldenrod;
      color: white;
      font-weight: bold;
    }


    /* ===== Floating + Button ===== */
    .AIR .fab{
      position:fixed;
      right:18px;
      bottom:70px;
      width:58px;
      height:58px;
      border-radius:18px;
      border:0;
      cursor:pointer;
      color:#fff;
      font-weight:1000;
      font-size:28px;
      line-height:1;
      display:grid;
      place-items:center;
      background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(14,165,233,.95));
      box-shadow:0 18px 40px rgba(37,99,235,.30);
      transition:.15s ease;
      z-index:1000;
    }
    .AIR .fab:hover{ transform: translateY(-2px); box-shadow:0 26px 56px rgba(37,99,235,.34); }
    .AIR .fab:active{ transform: translateY(0px) scale(.98); }

    /* ===== Modal ===== */
    .AIR .backdrop{
      position:fixed; inset:0;
      background: rgba(2,6,23,.35);
      display:none;
      align-items:flex-end;
      justify-content:center;
      padding:14px;
      z-index:80;
      margin-bottom: 50px;
      overflow: hidden;
    }
    .AIR .modal{
      width:min(820px, 100%);
      border-radius: 22px;
      border:1px solid rgba(255,255,255,.25);
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(14px);
      box-shadow: 0 28px 80px rgba(2,6,23,.35);
      overflow:hidden;
      transform: translateY(8px);
      animation: airPop .18s ease-out forwards;
    }
    @keyframes airPop{ to{ transform: translateY(0px); } }
    .AIR .modal-h{
      display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
      padding:14px 14px;
      border-bottom:1px solid rgba(2,6,23,.06);
      background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(255,255,255,.95));
    }
    .AIR .modal-h .ttl strong{ display:block; font-size:15px; font-weight:1000; margin:0; }
    .AIR .modal-h .ttl small{ display:block; margin-top:2px; color:var(--muted); font-weight:850; font-size:12px; }
    .AIR .xbtn{
      width:40px;height:40px;border-radius:14px;
      border:1px solid rgba(2,6,23,.10);
      background:rgba(255,255,255,.85);
      cursor:pointer;
      font-size:18px;
      font-weight:900;
      transition:.15s ease;
    }
    .AIR .xbtn:hover{ transform: translateY(-1px); }
    .AIR .modal-b{ padding:14px 14px 12px; }

    .AIR .seg{
      display:flex; gap:8px; flex-wrap:wrap;
      padding:12px 14px 0;
    }
    .AIR .seg button{
      border:1px solid var(--line);
      background: rgba(255,255,255,.82);
      padding:10px 12px;
      border-radius:999px;
      font-weight:950;
      font-size:13px;
      cursor:pointer;
      transition:.15s ease;
    }
    .AIR .seg button.active{
      color:#fff;
      border-color: rgba(37,99,235,.35);
      background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(14,165,233,.95));
      box-shadow:0 16px 30px rgba(37,99,235,.18);
    }


    /* HAPUS aturan lama yang bikin 1 kolom di HP */
@media (max-width: 720px){
  .AIR .frow{ grid-template-columns: minmax(92px, 120px) minmax(0,1fr); }
}


/* ====== FORM: selalu 2 kolom (HP juga) ====== */
.AIR .formGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:5px;
  max-height: 75vh;
  overflow-y: auto;
}

.AIR .frow{
  display:grid;
  /* label min 92px max 140px, sisanya input */
  grid-template-columns: minmax(92px, 140px) minmax(0, 1fr);
  gap:5px;
  align-items:center;

  padding:7px 7px;
  border:1px solid rgba(2,6,23,.06);
  border-radius:16px;
  background: rgba(255,255,255,.80);
}

/* Label rapi & tidak makan tempat */
.AIR .frow label{
  font-weight:700;
  font-size:12px;
  color:rgba(15,23,42,.75);
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Input selalu full lebar kolom kanan */
.AIR .frow input,
.AIR .frow select{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(132, 143, 191, 0.12);
  background: rgba(255,255,255,.95);
  font-weight:900;
  font-size:13px;
}

.AIR #fMeterPrev{
  background: rgba(15,23,42,.03);
  color: rgba(15,23,42,.72);
}



 
    .AIR input:focus, .AIR select:focus{
      border-color: rgba(37,99,235,.45);
      box-shadow: 0 0 0 4px rgba(37,99,235,.14);
    }
    .AIR input::placeholder{ color: rgba(100,116,139,.85); font-weight:800; }

    .AIR .note{
      margin-top:10px;
      font-size:12px;
      color:var(--muted);
      font-weight:800;
      line-height:1.35;
      padding:10px 12px;
      border-radius:16px;
      background: rgba(15,23,42,.04);
      border:1px dashed rgba(2,6,23,.12);
    }
    .AIR .modal-actions{
      display:flex;
      gap:10px;
      margin-top:12px;
      justify-content:center;
      flex-wrap:wrap;
    }

    /* Toast */
    .AIR .toast{
      position:fixed;
      left:50%;
      bottom:88px;
      transform:translateX(-50%);
      background: rgba(2,6,23,.88);
      color:#fff;
      padding:10px 12px;
      border-radius: 999px;
      font-weight:900;
      font-size:12px;
      box-shadow:0 18px 50px rgba(2,6,23,.35);
      display:none;
      z-index:120;
      max-width:92vw;
      text-align:center;
    }

    /* Table mini (master list) */
    .AIR .table{
      width:100%;
      border-collapse:separate;
      border-spacing:0 10px;
    }
    .AIR .tr{
      background: rgba(255,255,255,.85);
      border:1px solid rgba(2,6,23,.06);
      border-radius: 16px;
      box-shadow: 0 10px 20px rgba(2,6,23,.05);
    }
    .AIR .tr td{
      padding:10px 10px;
      font-weight:900;
      font-size:13px;
      border-top:1px solid rgba(2,6,23,.06);
      border-bottom:1px solid rgba(2,6,23,.06);
    }
    .AIR .tr td:first-child{
      border-left:1px solid rgba(2,6,23,.06);
      border-top-left-radius:16px;
      border-bottom-left-radius:16px;
    }
    .AIR .tr td:last-child{
      border-right:1px solid rgba(2,6,23,.06);
      border-top-right-radius:16px;
      border-bottom-right-radius:16px;
      text-align:right;
      white-space:nowrap;
    }

    .payMessage{
      margin-top:12px;
      padding:10px 12px;
      border-radius:12px;
      font-weight:900;
      text-align:center;
      background: rgba(34,197,94,.12);
      border: 1px solid rgba(34,197,94,.25);
      color: rgba(22,101,52,.95);
    }
    .payMessage.bad{
      background: rgba(239,68,68,.10);
      border-color: rgba(239,68,68,.25);
      color: rgba(153,27,27,.95);
    }

/* Icon button (hapus) */
.iconBtn{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(2,6,23,.12);
  background: rgba(255,255,255,.85);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.15s ease;
}
.iconBtn i{
  font-size:14px;
  color:#334155;
}
.iconBtn:hover{
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  transform:translateY(-1px);
}
.iconBtn:active{ transform:none; }

.iconBtn.danger{
  border-color:rgba(239,68,68,.35);
}
.iconBtn.danger i{
  color:#ef4444;
}
.iconBtn.danger:hover{
  background:rgba(239,68,68,.08);
}



/* ===== Master Table (Estetik) ===== */
#masterTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid rgba(2,6,23,.10);
  border-radius:16px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

/* Header */
#masterTable .thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  text-align:left;
  padding:12px 12px;
  font-size:12px;
  letter-spacing:.2px;
  font-weight:900;
  color: rgba(15,23,42,.85);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  border-bottom: 1px solid rgba(2,6,23,.10);
}

#masterTable .thead .th-right{ text-align:right; }

/* Rows */
#masterTable tr.tr td{
  padding:12px 12px;
  border-bottom: 1px solid rgba(2,6,23,.08);
  font-weight:700;
  color: rgba(15,23,42,.86);
}

#masterTable tr.tr:nth-child(even) td{
  background: rgba(2,6,23,.02);
}

#masterTable tr.tr{
  cursor:pointer;
  transition: .15s ease;
}

#masterTable tr.tr:hover td{
  background: rgba(59,130,246,.08);
}

#masterTable tr.tr:active{
  transform: translateY(1px);
}

/* Kavling terlihat tegas */
#masterTable .td-kav{
  font-weight:950;
  letter-spacing:.2px;
}

/* Nama sedikit muted */
#masterTable .td-name{
  font-weight:850;
  color: rgba(15,23,42,.78);
}

/* Badge kode unik */
.uniqPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:52px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(2,6,23,.12);
  background: rgba(255,255,255,.85);
  font-weight:950;
  letter-spacing: .8px;
}

/* Aksi kanan */
#masterTable .td-actions{
  text-align:right;
  white-space:nowrap;
}
#masterTable .td-actions .mini{
  cursor:pointer;
}

.AIR .card.compact .cols{ display:none; }
.AIR .card.compact .compactRow{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:5px;
  padding:6px;
  border-top: 1px solid rgba(2,6,23,.06);
}
.AIR .card.compact .compactRow .lab{
  font-weight:900;
  font-size:11px;
  color: rgba(100,116,139,.9);
}
.AIR .card.compact .compactRow .val{
  font-weight:1000;
  font-size:13px;
  margin-top:4px;
}

.AIR .imgViewer{
  position:fixed; inset:0;
  z-index:9999;
  display:flex; align-items:center; justify-content:center;
}
.AIR .imgViewer-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.72);
}
.AIR #imgViewerImg{
  position:relative;
  max-width:92vw; max-height:50px;
  border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.AIR .imgViewerClose{
  position:absolute; top:14px; right:14px;
  border:none; cursor:pointer;
  width:44px; height:44px; border-radius:999px;
  background:rgba(255,255,255,.9);
  font-weight:1000;
}

.photoWrap{
  margin: 10px 0 6px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.03),
    rgba(0,0,0,.00)
  );
}

.billPhoto{
  max-width: 175px;
  /* max-height: 120px; */
  object-fit: cover;
  transition: transform .25s ease;
}

.billPhoto:hover{
  transform: scale(1.03);
}

/* =========================
   QRIS SETTINGS PANEL
========================= */
.qrisPanel{
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:60px 1px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  margin:12px 0 14px 0;
}
.qrisHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.qrisTitle{font-weight:900;font-size:14px;color:#111827}
.qrisSub{font-size:12px;color:#6b7280;margin-top:2px}
.qrisStatus{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  color:#111827;
}
.qrisGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media(max-width:900px){ .qrisGrid{grid-template-columns:1fr} }
.qrisBox{
  border:1px solid #eef2f7;
  border-radius:14px;
  padding:12px;
  background:#fbfdff;
}
.qLabel{display:block;font-size:12px;color:#374151;margin:0 0 6px 0}
.qInput{
  width:100%;
  padding:10px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  outline:none;
  background:#fff;
}
.qActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.qBtn{
  border:0;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  background:#f3f4f6;
}
.qBtn.primary{background:#111827;color:#fff}
.qHint{font-size:12px;color:#6b7280;margin-top:8px}

/* =========================
   PAY MODAL
========================= */
.payModalBack{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:14px;
}
.payModal{
  width:min(860px, 96vw);
  background:#fff;
  border-radius:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.25);
  overflow:hidden;
}
.payModalHead{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:10px; padding:14px; border-bottom:1px solid #eef2f7;
}
.payModalTitle{font-size:14px;font-weight:900;color:#111827}
.payModalSub{font-size:12px;color:#6b7280;margin-top:2px}
.payModalBody{
  display:grid; grid-template-columns: 320px 1fr;
  gap:14px; padding:14px;
}
@media(max-width:860px){ .payModalBody{grid-template-columns:1fr} }
.payQR{
  min-height:320px;
  max-width: 90%;
  border:1px dashed #e5e7eb;
  border-radius:16px;
  padding: auto;
  display:flex; align-items:center; justify-content:center;
}
.payInfo{border:1px solid #eef2f7;border-radius:16px;padding:12px;background:#fbfdff}
.payRow{display:flex;justify-content:space-between;gap:10px;padding:10px;border-bottom:1px solid #eef2f7}
.payRow:last-child{border-bottom:0}
.payLab{font-size:12px;color:#6b7280}
.payVal{font-size:13px;color:#111827;font-weight:800}
.payVal.mono{font-family:ui-monospace, SFMono-Regular, Menlo, monospace;font-weight:700}

.payVal.statusRow{
  display:flex;
  align-items:center;
  gap:10px;
}

.spin{
  width:16px;
  height:16px;
  border:2px solid rgba(0,0,0,.18);
  border-top-color: rgba(0,0,0,.65);
  border-radius:999px;
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

.receiptBack{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background: rgba(2,6,23,.55);
  z-index: 9999;
      overflow: hidden;
  padding: 18px;
}
.receiptModal{
  width:min(520px, 100%);
  background:rgb(236, 240, 236);
  border-radius:18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  overflow:hidden;
}
.receiptHead{
  padding:14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid rgba(2,6,23,.10);
}
.receiptTitle{ font-weight:900; font-size:16px; }
.receiptSub{ font-weight:700; font-size:12px; color: rgba(100,116,139,.95); margin-top:2px; }
.receiptBody{ padding:14px; }
.receiptCard{
  border:1px solid rgba(2,6,23,.10);
  border-radius:16px;
  padding:14px;
}
.receiptRow{
  display:flex; justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px dashed rgba(2,6,23,.10);
}
.receiptRow:last-child{ border-bottom:none; }
.receiptLab{ color: rgba(100,116,139,.95); font-weight:800; font-size:12px; }
.receiptVal{ font-weight:900; }
.receiptFoot{
  padding:12px 14px;
  border-top:1px solid rgba(2,6,23,.10);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.mini.receipt{
  background: rgba(2,132,199,.10);
  border: 1px solid rgba(2,132,199,.20);
  color: rgba(2,132,199,.95);
  font-weight:900;
}

.bottom-nav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:68px;
  background:#ffffff;
  display:flex;
  justify-content:space-around;
  align-items:center;
  box-shadow:0 -6px 20px rgba(0,0,0,.08);
  border-top-left-radius:18px;
  border-top-right-radius:18px;
  z-index:1000;
}

.nav-item{
  flex:1;
  background:none;
  border:none;
  outline:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:#9ca3af;
  font-size:11px;
  cursor:pointer;
  transition:.25s ease;
  position:relative;
}

.nav-item i{
  font-size:20px;
}

.nav-item.active{
  color:#2563eb;
}

.nav-item.active i{
  transform:translateY(-2px);
}

.nav-item.active::after{
  content:"";
  position:absolute;
  bottom:0;
  width:22px;
  height:4px;
  background:#2563eb;
  border-radius:8px;
}

.nav-item:hover{
  color:#2563eb;
}

/* ===== Gallery ===== */
.galleryPanel{
  margin-top: 80px;
  padding: 14px;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
}

.galleryHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.galleryTitle{
  font-weight: 900;
  color:#0f172a;
}
.gallerySub{
  font-weight: 800;
  color:#64748b;
  font-size: 12px;
}

/* grid default (desktop) */
.galleryGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.galleryItem{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.85);
  cursor: pointer;
}

.galleryItem img{
  width:100%;
  height: 160px;
  object-fit: cover;
  display:block;
}

/* overlay info */
.galleryOverlay{
  position:absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:flex-end;
}

.galleryPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(15,23,42,.72);
  color: #fff;
  /* font-weight: 900; */
  font-size: 11px;
  line-height: 1.1;
  box-shadow: 0 10px 26px rgba(2,6,23,.18);
}

.galleryPill small{
  display:block;
  font-weight: 800;
  opacity: .78;
  font-size: 12px;
}

/* 2 kolom di HP */
@media (max-width: 720px){
  .galleryGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .galleryItem img{
    height: 150px;
  }
}
@media (max-width: 720px){
  .galleryHead{ align-items: stretch; }
  .gallerySearchWrap{ min-width: 0; width: 100%; }
}


.gallerySearchWrap{ min-width: 220px; }
.gallerySearch{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(255,255,255,.85);
  outline: none;
  font-weight: 800;
  color:#0f172a;
}
.gallerySearch:focus{
  border-color: rgba(59,130,246,.65);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}


.modePanel{
  margin-top: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
}
.modeTitle{
  font-weight: 900;
  color:#0f172a;
  margin-bottom: 10px;
}
.modeRow{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  align-items:center;
  margin-bottom: 10px;
}
.modeLabel{
  font-weight: 900;
  color:#334155;
}
.modeInput{
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(255,255,255,.9);
  outline:none;
  font-weight: 800;
  color:#0f172a;
}
.modeInput:focus{
  border-color: rgba(59,130,246,.65);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.modeHint{
  font-size: 12px;
  font-weight: 800;
  color:#64748b;
  line-height: 1.4;
}
@media (max-width: 720px){
  .modeRow{ grid-template-columns: 1fr; }
}

.pricesGrid{
  display:grid;
  gap:10px;
  grid-template-columns: 1fr; /* ✅ HP default 1 kolom, urut menurun */
}

/* ✅ layar agak besar baru jadi 2 kolom */
@media (min-width: 640px){
  .pricesGrid{
    grid-template-columns: 1fr 1fr;
  }
}

/* Card item bulan */
.priceItem{
  border:1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.70);
  border-radius: 16px;
  padding: 10px 10px;
}

/* label kiri input kanan */
.priceRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.priceLabel{
  font-weight: 900;
  color: rgba(15,23,42,.92);
  font-size: 14px;
  line-height: 1.1;
}

.priceInputWrap{
  display:flex;
  align-items:center;
  gap:8px;
  min-width: 140px;
  justify-content:flex-end;
}

.rpPill{
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(2,6,23,.06);
  border: 1px solid rgba(2,6,23,.08);
}

.priceInput{
  width: 140px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,.12);
  font-weight: 900;
  text-align: right;
}



 .billingTopBar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin: 10px 0 12px;
}

.searchWrap{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border:1px solid var(--line);
  background: var(--cardSolid);
  border-radius: 14px;
}

.searchWrap input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  font-size:14px;
}

.iconBtn{
  border:none;
  background:transparent;
  cursor:pointer;
  padding:6px 8px;
  border-radius:10px;
}

.filterBtn{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border:1px solid var(--line);
  background: var(--cardSolid);
  border-radius: 14px;
  cursor:pointer;
  white-space:nowrap;
}

.billingFilterPanel{
  margin: 8px 0 12px;
  padding: 10px 12px;
  border:1px solid var(--line);
  background: var(--cardSolid);
  border-radius: 14px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.billingFilterPanel .chk{
  display:flex;
  gap:8px;
  align-items:center;
}


.chartToolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}
.chartToolbar .monthSelect{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(2,6,23,.12);
  font-weight:800;
  background:#fff;
}

.chart-wrapper{
  width: 100vw;   /* full layar */
  height: 60vh;   /* tinggi 60% layar */
  padding: 10px;
}

canvas{
  width: 70% !important;
  height: 100% !important;
}

/* =========================
   Firestore Summary Cards
========================= */
.fsSum{
  margin: 12px 0 14px;
  display: grid;
  gap: 12px;
}

.fsCard{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 25px rgba(2,6,23,.12);
  backdrop-filter: blur(8px);
}

.fsCard h3{
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: .2px;
  opacity: .95;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.fsPill{
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(2,6,23,.25);
  white-space: nowrap;
}

.fsGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.fsItem{
  background: rgba(2,6,23,.22);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  padding: 10px;
}

.fsLab{
  font-size: 11px;
  opacity: .75;
  margin-bottom: 4px;
}

.fsVal{
  font-size: 14px;
  font-weight: 700;
}

.fsVal.small{
  font-size: 12px;
  font-weight: 600;
  opacity: .9;
}

.fsList{
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.fsRow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  padding: 8px 10px;
  background: rgba(2,6,23,.18);
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 12px;
}

.fsRowLeft{
  min-width: 0;
}
.fsRowTitle{
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fsRowSub{
  font-size: 11px;
  opacity: .75;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fsRowRight{
  text-align:right;
  white-space: nowrap;
}
.fsBadge{
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.22);
}
.fsBadge.ok{ border-color: rgba(34,197,94,.35); }
.fsBadge.bad{ border-color: rgba(239,68,68,.35); }

@media (max-width: 520px){
  .fsGrid{ grid-template-columns: 1fr; }
}