:root{
    --blue-900:#1e3a8a; --blue-800:#1e40af; --blue-700:#1d4ed8; --blue-600:#2563eb; --blue-500:#3b82f6;
    --blue-100:#dbeafe; --blue-50:#eff6ff;
    --violet-900:#3b0764; --violet-800:#4c1d95; --violet-700:#5b21b6; --violet-600:#7c3aed; --violet-500:#8b5cf6;
    --violet-100:#ede9fe; --violet-50:#f5f3ff;
    --amber-900:#78350f; --amber-800:#92400e; --amber-700:#b45309; --amber-600:#d97706; --amber-500:#f59e0b;
    --amber-100:#fef3c7; --amber-50:#fffbeb;
    --teal-900:#134e4a; --teal-800:#115e59; --teal-700:#0f766e; --teal-600:#0d9488; --teal-500:#14b8a6;
    --teal-100:#ccfbf1; --teal-50:#f0fdfa;
    --bg-main:#f2f6fb;
    --card-bg:#ffffff;
    --ink:#0f1b33;
    --ink-soft:#5b6b85;

    --success-500:#22c55e; --success-600:#16a34a; --success-bg:#e7f9ee; --success-text:#0f7a3d;
    --warning-500:#f59e0b; --warning-600:#d97706; --warning-bg:#fef3d6; --warning-text:#92600a;
    --danger-500:#ef4444; --danger-600:#dc2626; --danger-bg:#fde9e9; --danger-text:#a11d1d;

    --shadow-sm:0 2px 8px rgba(30,58,138,.06);
    --shadow-md:0 12px 28px -8px rgba(30,58,138,.18);
    --shadow-lg:0 24px 48px -12px rgba(30,58,138,.24);
    --font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  }

  /* Semua style di bawah di-scope ke .pg-app supaya tidak bocor mengubah
     tampilan elemen lain saat ditempel di halaman/tema Blogger. */
  .pg-app{
    font-family:var(--font);color:var(--ink);background:var(--bg-main);
    -webkit-font-smoothing:antialiased;line-height:1.5;min-height:100vh;
    width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
    padding-bottom:60px;
    font-size:16px; /* jangkar ukuran dasar, biar tidak ikut mengecil ke ukuran font root tema Blogger */
  }
  .pg-app h1,.pg-app h2,.pg-app h3,.pg-app p,.pg-app span,.pg-app b{margin:0;}
  .pg-app input,.pg-app select,.pg-app button{font-family:inherit;}
  .pg-app button{cursor:pointer;}

  /* ---------- TOPBAR (navbar + tab switcher, sticky bareng) ---------- */
  .pg-topbar{position:sticky;top:0;z-index:20;}

  .pg-nav{
    background:linear-gradient(120deg,var(--blue-800) 0%,var(--violet-700) 100%);
    padding:16px clamp(16px,4vw,40px);
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    box-shadow:0 4px 18px rgba(15,10,40,.18);
  }
  .pg-nav-left{display:flex;align-items:center;gap:14px;min-width:0;}
  .pg-nav-brand{display:flex;align-items:center;gap:10px;min-width:0;}
  .pg-nav-logo{
    width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.16);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;overflow:hidden;
  }
  .pg-nav-logo img{width:100%;height:100%;object-fit:cover;}
  .pg-nav-logo svg{width:20px;height:20px;color:#fff;}
  .pg-nav-brand-text{min-width:0;overflow:hidden;}
  .pg-nav-brand-text b{display:block;color:#fff;font-size:16px;font-weight:800;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pg-nav-brand-text span{display:block;color:rgba(255,255,255,.75);font-size:10.56px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  .pg-live{
    display:flex;align-items:center;gap:7px;flex-shrink:0;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
    border-radius:999px;padding:7px 13px 7px 11px;
  }
  .pg-live-dot{
    width:8px;height:8px;border-radius:50%;background:#4ade80;flex-shrink:0;
    box-shadow:0 0 0 rgba(74,222,128,.6);animation:pg-live-pulse 1.8s infinite;
  }
  @keyframes pg-live-pulse{
    0%{box-shadow:0 0 0 0 rgba(74,222,128,.6);}
    70%{box-shadow:0 0 0 7px rgba(74,222,128,0);}
    100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}
  }
  .pg-live span{color:#fff;font-size:11.52px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
  @media (max-width:480px){
    .pg-nav{padding:14px clamp(12px,4vw,40px);gap:10px;}
    .pg-nav-brand-text span{display:none;}
    .pg-live{padding:6px 11px 6px 9px;gap:6px;}
    .pg-live span{font-size:10.5px;}
  }
  @media (max-width:340px){
    .pg-nav-brand-text b{font-size:14px;}
  }

  .pg-tabbar{background:#fff;border-bottom:1px solid #e7ecf5;}
  .pg-tabbar-inner{
    max-width:1180px;margin:0 auto;padding:10px clamp(16px,4vw,40px);
    display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .pg-tabbar-inner::-webkit-scrollbar{display:none;}
  @media (max-width:680px){
    .pg-tabbar-inner{justify-content:center;}
  }
  .pg-tab{
    display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1.5px solid #e7ecf5;
    background:#f7f9fc;color:var(--ink-soft);font-weight:700;font-size:13.6px;white-space:nowrap;flex-shrink:0;
    transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;
  }
  .pg-tab svg{width:16px;height:16px;flex-shrink:0;}
  .pg-tab.active{background:linear-gradient(120deg,var(--blue-700),var(--violet-600));color:#fff;border-color:transparent;box-shadow:0 6px 14px -4px rgba(30,20,80,.35);}

  /* --- HP: 3 tab dibagi rata lebarnya, ikon pindah ke atas teks (teks
     TETAP lengkap, boleh turun jadi 2 baris) — supaya semua tab muat
     satu layar tanpa perlu geser ke samping --- */
  @media (max-width:560px){
    .pg-tabbar-inner{overflow-x:visible;gap:6px;padding-left:12px;padding-right:12px;}
    .pg-tab{
      flex:1 1 0;min-width:0;flex-direction:column;gap:4px;
      padding:9px 4px;border-radius:14px;font-size:10.24px;white-space:normal;text-align:center;line-height:1.22;
    }
    .pg-tab svg{width:18px;height:18px;}
  }

  /* ---------- MAIN ---------- */
  .pg-main{max-width:1180px;margin:0 auto;padding:24px clamp(16px,4vw,40px) 0;}
  .pg-tab-panel{display:none;}
  .pg-tab-panel.active{display:block;}

  /* ==================== TAB: STATUS IURAN (biru) ==================== */
  .pb-hero{
    position:relative;overflow:hidden;border-radius:24px;padding:30px 26px;margin-bottom:22px;
    background:linear-gradient(120deg,#eaf2ff 0%,#cfe1fb 55%,#9fc3f5 100%);
    box-shadow:var(--shadow-md);
    display:flex;align-items:center;justify-content:space-between;gap:18px;
  }
  .pb-hero::before{
    content:'';position:absolute;top:-40px;left:-40px;width:180px;height:180px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 70%);
  }
  .pb-hero-text{position:relative;z-index:1;max-width:360px;}
  .pb-hero-eyebrow{display:block;font-size:11.52px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-700);margin-bottom:6px;}
  .pb-hero-text h1{font-size:clamp(22.4px,3vw,28.8px);font-weight:800;color:var(--blue-900);letter-spacing:-.01em;line-height:1.15;}
  .pb-hero-text p{display:block;font-size:13.6px;color:#33456e;margin-top:10px;line-height:1.5;}
  .pb-hero-art{flex-shrink:0;position:relative;z-index:1;width:120px;height:120px;}
  @media (max-width:560px){ .pb-hero-art{width:96px;height:96px;} }
  @media (max-width:420px){ .pb-hero-art{display:none;} }

  .pb-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px;}
  @media (min-width:680px){ .pb-stats{grid-template-columns:repeat(4,1fr);} }
  .pb-stat{
    background:var(--card-bg);border-radius:18px;padding:18px;display:flex;flex-direction:row;align-items:center;gap:14px;
    box-shadow:var(--shadow-sm);border:1px solid #eef2f9;
  }
  .pb-stat-ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 16px -6px rgba(0,0,0,.25);flex-shrink:0;}
  .pb-stat-ic svg{width:21px;height:21px;}
  .pb-stat.s-total .pb-stat-ic{background:linear-gradient(135deg,var(--blue-500),var(--blue-700));}
  .pb-stat.s-lunas .pb-stat-ic{background:linear-gradient(135deg,#34d399,var(--success-600));}
  .pb-stat.s-menunggu .pb-stat-ic{background:linear-gradient(135deg,#fbbf24,var(--warning-600));}
  .pb-stat.s-terlambat .pb-stat-ic{background:linear-gradient(135deg,#f87171,var(--danger-600));}
  .pb-stat-label{display:block;font-size:10.88px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);}
  .pb-stat-num{display:block;font-size:27.2px;font-weight:800;color:var(--ink);line-height:1;margin-top:6px;}
  .pb-stat-sub{display:block;font-size:12px;color:var(--ink-soft);margin-top:4px;}

  .pb-search-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px;}
  .pb-search{
    display:flex;align-items:center;gap:10px;background:var(--card-bg);border:1px solid #e7ecf5;
    border-radius:16px;padding:14px 16px;box-shadow:var(--shadow-sm);min-height:52px;
    flex:1 1 260px;
  }
  .pb-search svg{width:18px;height:18px;color:#8a96ab;flex-shrink:0;}
  .pb-search input{border:none;outline:none;background:none;font-size:14.4px;width:100%;color:var(--ink);}
  .pb-search input::placeholder{color:#9aa5ba;}

  .pb-filter{position:relative;flex:0 0 auto;width:100%;}
  @media (min-width:600px){ .pb-filter{width:230px;} }
  .pb-filter-ic{
    position:absolute;left:14px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:8px;
    background:var(--blue-50);color:var(--blue-600);display:flex;align-items:center;justify-content:center;pointer-events:none;
  }
  .pb-filter-ic svg{width:14px;height:14px;}
  .pb-filter-chevron{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#8a96ab;pointer-events:none;}
  .pb-filter-chevron svg{width:16px;height:16px;}
  .pb-filter select{
    appearance:none;-webkit-appearance:none;width:100%;background:var(--card-bg);border:1px solid #e7ecf5;
    border-radius:16px;padding:14px 42px 14px 52px;font-size:14.08px;font-weight:700;color:var(--ink);
    box-shadow:var(--shadow-sm);min-height:52px;
  }
  .pb-filter select:focus{outline:2px solid var(--blue-500);outline-offset:1px;}

  .pb-list{display:flex;flex-direction:column;gap:12px;}
  .pb-app-card{
    background:var(--card-bg);border:1px solid #eef2f9;border-radius:18px;padding:16px;
    display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-sm);
  }
  .pb-app-logo{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;}
  .pb-app-logo-fallback{
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17.6px;
    background:linear-gradient(135deg,var(--blue-500),var(--blue-800));color:#fff;
  }
  .pb-app-body{flex:1;min-width:0;}
  .pb-app-body b{display:block;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
  .pb-app-fee-label{display:block;font-size:11.52px;color:var(--ink-soft);margin-top:6px;}
  .pb-app-fee{display:block;font-size:16.32px;font-weight:800;color:var(--blue-700);margin-top:1px;}
  .pb-app-fee span{font-size:11.52px;font-weight:600;color:var(--ink-soft);}
  .pb-app-fee-original{text-decoration:line-through;color:var(--ink-soft);font-size:12.16px;font-weight:600;margin-right:6px;}
  .pb-app-fee-badge{
    background:var(--danger-bg);color:var(--danger-text);font-weight:800;font-size:10.88px;
    padding:1px 7px;border-radius:999px;line-height:1.6;vertical-align:middle;
  }
  .pb-app-due{display:block;font-size:11.84px;color:var(--ink-soft);margin-top:5px;}

  .pb-status-pill{
    flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-size:12.16px;font-weight:800;
    padding:8px 13px;border-radius:999px;white-space:nowrap;
  }
  .pb-status-pill svg{width:14px;height:14px;}
  .pb-status-pill.st-lunas{background:var(--success-bg);color:var(--success-text);}
  .pb-status-pill.st-menunggu{background:var(--warning-bg);color:var(--warning-text);}
  .pb-status-pill.st-terlambat{background:var(--danger-bg);color:var(--danger-text);}

  @media (max-width:420px){
    .pb-app-card{flex-wrap:wrap;}
    .pb-status-pill{margin-left:66px;}
  }

  .pb-empty{
    text-align:center;padding:48px 22px;background:var(--blue-50);border:1.5px dashed var(--blue-100);
    border-radius:18px;color:var(--blue-900);font-weight:600;
  }
  .pb-empty small{display:block;font-size:13.12px;font-weight:500;opacity:.75;margin-top:8px;}

  .pb-footnote{
    display:flex;align-items:flex-start;gap:10px;background:var(--blue-50);border-radius:16px;
    padding:14px 16px;margin-top:20px;
  }
  .pb-footnote-ic{width:22px;height:22px;border-radius:50%;background:var(--blue-600);color:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
  .pb-footnote-ic svg{width:12px;height:12px;}
  .pb-footnote p{font-size:12.48px;color:#33456e;line-height:1.45;}

  /* ================= TAB: KEBIJAKAN PLAY STORE (ungu) ================= */
  .pk-hero{
    position:relative;overflow:hidden;border-radius:24px;padding:30px 26px;margin-bottom:22px;
    background:linear-gradient(120deg,#f3ecff 0%,#e2d3fb 55%,#c9adf5 100%);
    box-shadow:var(--shadow-md);
    display:flex;align-items:center;justify-content:space-between;gap:18px;
  }
  .pk-hero::before{
    content:'';position:absolute;top:-40px;left:-40px;width:180px;height:180px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 70%);
  }
  .pk-hero-text{position:relative;z-index:1;max-width:380px;}
  .pk-hero-eyebrow{display:block;font-size:11.52px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--violet-700);margin-bottom:6px;}
  .pk-hero-text h1{font-size:clamp(22.4px,3vw,28.8px);font-weight:800;color:var(--violet-900);letter-spacing:-.01em;line-height:1.15;}
  .pk-hero-text p{display:block;font-size:13.6px;color:#4a3d68;margin-top:10px;line-height:1.5;}
  .pk-hero-art{flex-shrink:0;position:relative;z-index:1;width:120px;height:120px;}
  @media (max-width:560px){ .pk-hero-art{width:96px;height:96px;} }
  @media (max-width:420px){ .pk-hero-art{display:none;} }

  .pk-stats{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:22px;}
  @media (min-width:680px){ .pk-stats{grid-template-columns:repeat(3,1fr);} }
  .pk-stat{
    background:var(--card-bg);border-radius:18px;padding:18px;display:flex;flex-direction:row;align-items:center;gap:14px;
    box-shadow:var(--shadow-sm);border:1px solid #ece5f9;
    width:100%;
  }
  .pk-stat-ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 16px -6px rgba(0,0,0,.25);flex-shrink:0;}
  .pk-stat-ic svg{width:21px;height:21px;}
  .pk-stat.s-total .pk-stat-ic{background:linear-gradient(135deg,var(--violet-500),var(--violet-700));}
  .pk-stat.s-updated .pk-stat-ic{background:linear-gradient(135deg,#34d399,var(--success-600));}
  .pk-stat.s-pending .pk-stat-ic{background:linear-gradient(135deg,#fbbf24,var(--warning-600));}
  .pk-stat-label{display:block;font-size:10.88px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);}
  .pk-stat-num{display:block;font-size:27.2px;font-weight:800;color:var(--ink);line-height:1;margin-top:6px;}
  .pk-stat-sub{display:block;font-size:12px;color:var(--ink-soft);margin-top:4px;}

  .pk-search-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px;}
  .pk-search{
    display:flex;align-items:center;gap:10px;background:var(--card-bg);border:1px solid #e9e2f7;
    border-radius:16px;padding:14px 16px;box-shadow:var(--shadow-sm);min-height:52px;
    flex:1 1 260px;
  }
  .pk-search svg{width:18px;height:18px;color:#948aad;flex-shrink:0;}
  .pk-search input{border:none;outline:none;background:none;font-size:14.4px;width:100%;color:var(--ink);}
  .pk-search input::placeholder{color:#a89fbf;}

  .pk-filter{position:relative;flex:0 0 auto;width:100%;}
  @media (min-width:600px){ .pk-filter{width:230px;} }
  .pk-filter-ic{
    position:absolute;left:14px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:8px;
    background:var(--violet-50);color:var(--violet-600);display:flex;align-items:center;justify-content:center;pointer-events:none;
  }
  .pk-filter-ic svg{width:14px;height:14px;}
  .pk-filter-chevron{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#948aad;pointer-events:none;}
  .pk-filter-chevron svg{width:16px;height:16px;}
  .pk-filter select{
    appearance:none;-webkit-appearance:none;width:100%;background:var(--card-bg);border:1px solid #e9e2f7;
    border-radius:16px;padding:14px 42px 14px 52px;font-size:14.08px;font-weight:700;color:var(--ink);
    box-shadow:var(--shadow-sm);min-height:52px;
  }
  .pk-filter select:focus{outline:2px solid var(--violet-500);outline-offset:1px;}

  .pk-list{display:flex;flex-direction:column;gap:12px;}
  .pk-app-card{
    background:var(--card-bg);border:1px solid #ece5f9;border-radius:18px;padding:16px;
    box-shadow:var(--shadow-sm);
  }
  .pk-app-card-top{display:flex;align-items:center;gap:14px;}
  .pk-app-logo{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;}
  .pk-app-logo-fallback{
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17.6px;
    background:linear-gradient(135deg,var(--violet-500),var(--violet-800));color:#fff;
  }
  .pk-app-body{flex:1;min-width:0;}
  .pk-app-body b{display:block;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
  .pk-app-last{display:block;font-size:12.16px;color:var(--ink-soft);margin-top:5px;}

  .pk-status-pill{
    flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-size:12.16px;font-weight:800;
    padding:8px 13px;border-radius:999px;white-space:nowrap;
  }
  .pk-status-pill svg{width:14px;height:14px;}
  .pk-status-pill.st-updated{background:var(--success-bg);color:var(--success-text);}
  .pk-status-pill.st-pending{background:var(--warning-bg);color:var(--warning-text);}

  .pk-history-toggle{
    display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--violet-600);
    font-size:12.48px;font-weight:700;padding:8px 0 0;
  }
  .pk-history-toggle svg{width:14px;height:14px;transition:transform .15s ease;}
  .pk-history-toggle.open svg{transform:rotate(180deg);}
  .pk-history-panel{display:none;margin-top:12px;padding-top:12px;border-top:1px dashed #e2d9f4;}
  .pk-history-panel.show{display:block;}
  .pk-history-chips{display:flex;flex-wrap:wrap;gap:8px;}
  .pk-history-chip{
    display:inline-flex;align-items:center;gap:6px;background:var(--violet-50);color:var(--violet-800);
    font-size:12px;font-weight:700;padding:6px 11px;border-radius:999px;
  }
  .pk-history-chip svg{width:12px;height:12px;}
  .pk-history-empty{font-size:12.48px;color:var(--ink-soft);}

  @media (max-width:420px){
    .pk-app-card-top{flex-wrap:wrap;}
    .pk-status-pill{margin-left:66px;}
  }

  .pk-empty{
    text-align:center;padding:48px 22px;background:var(--violet-50);border:1.5px dashed var(--violet-100);
    border-radius:18px;color:var(--violet-900);font-weight:600;
  }
  .pk-empty small{display:block;font-size:13.12px;font-weight:500;opacity:.75;margin-top:8px;}

  .pk-footnote{
    display:flex;align-items:flex-start;gap:10px;background:var(--violet-50);border-radius:16px;
    padding:14px 16px;margin-top:20px;
  }
  .pk-footnote-ic{width:22px;height:22px;border-radius:50%;background:var(--violet-600);color:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
  .pk-footnote-ic svg{width:12px;height:12px;}
  .pk-footnote p{font-size:12.48px;color:#4a3d68;line-height:1.45;}

  /* ================= TAB: NOTIFIKASI (amber) ================= */
  .pn-hero{
    position:relative;overflow:hidden;border-radius:24px;padding:30px 26px;margin-bottom:22px;
    background:linear-gradient(120deg,#fff7e6 0%,#fde8c2 55%,#fbcd82 100%);
    box-shadow:var(--shadow-md);
    display:flex;align-items:center;justify-content:space-between;gap:18px;
  }
  .pn-hero::before{
    content:'';position:absolute;top:-40px;left:-40px;width:180px;height:180px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 70%);
  }
  .pn-hero-text{position:relative;z-index:1;max-width:380px;}
  .pn-hero-eyebrow{display:block;font-size:11.52px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-700);margin-bottom:6px;}
  .pn-hero-text h1{font-size:clamp(22.4px,3vw,28.8px);font-weight:800;color:var(--amber-900);letter-spacing:-.01em;line-height:1.15;}
  .pn-hero-text p{display:block;font-size:13.6px;color:#6b4a1a;margin-top:10px;line-height:1.5;}
  .pn-hero-art{flex-shrink:0;position:relative;z-index:1;width:120px;height:120px;}
  @media (max-width:560px){ .pn-hero-art{width:96px;height:96px;} }
  @media (max-width:420px){ .pn-hero-art{display:none;} }

  .pn-list{display:flex;flex-direction:column;gap:16px;}
  .pn-card{
    background:var(--card-bg);border:1px solid #f5e3bf;border-radius:20px;overflow:hidden;
    box-shadow:var(--shadow-sm);
  }
  .pn-card-media{width:100%;max-height:320px;overflow:hidden;background:#f6f2ea;}
  .pn-card-media img{width:100%;height:100%;object-fit:cover;display:block;max-height:320px;}
  .pn-card-body{padding:18px 20px 20px;}
  .pn-card-title{font-size:17.6px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
  .pn-card-text{font-size:14.08px;color:#4a3d24;line-height:1.6;margin-top:8px;white-space:pre-line;}
  .pn-video-wrap{position:relative;width:100%;padding-top:56.25%;margin-top:14px;border-radius:14px;overflow:hidden;background:#000;}
  .pn-video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  .pn-video-native{width:100%;border-radius:14px;margin-top:14px;display:block;background:#000;max-height:360px;}
  .pn-video-link,.pn-link-btn{
    display:inline-flex;align-items:center;gap:8px;margin-top:14px;margin-right:10px;
    background:var(--amber-500);color:#3d2a06;font-weight:800;font-size:13.28px;
    padding:10px 16px;border-radius:999px;text-decoration:none;
  }
  .pn-video-link svg,.pn-link-btn svg{width:16px;height:16px;}
  .pn-video-link:hover,.pn-link-btn:hover{background:var(--amber-600);color:#fff;}
  .pn-card-date{display:block;font-size:11.84px;color:var(--ink-soft);margin-top:14px;}

  .pn-empty{
    text-align:center;padding:48px 22px;background:var(--amber-50);border:1.5px dashed var(--amber-100);
    border-radius:18px;color:var(--amber-900);font-weight:600;
  }
  .pn-empty small{display:block;font-size:13.12px;font-weight:500;opacity:.75;margin-top:8px;}

  .pn-footnote{
    display:flex;align-items:flex-start;gap:10px;background:var(--amber-50);border-radius:16px;
    padding:14px 16px;margin-top:20px;
  }
  .pn-footnote-ic{width:22px;height:22px;border-radius:50%;background:var(--amber-600);color:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
  .pn-footnote-ic svg{width:12px;height:12px;}
  .pn-footnote p{font-size:12.48px;color:#6b4a1a;line-height:1.45;}

  /* ================= TAB: KUOTA UPDATE PLAYSTORE (teal) ================= */
  .pq-hero{
    position:relative;overflow:hidden;border-radius:24px;padding:30px 26px;margin-bottom:22px;
    background:linear-gradient(120deg,#e6fbf7 0%,#c3f3ea 55%,#8fe3d3 100%);
    box-shadow:var(--shadow-md);
    display:flex;align-items:center;justify-content:space-between;gap:18px;
  }
  .pq-hero::before{
    content:'';position:absolute;top:-40px;left:-40px;width:180px;height:180px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 70%);
  }
  .pq-hero-text{position:relative;z-index:1;max-width:380px;}
  .pq-hero-eyebrow{display:block;font-size:11.52px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-700);margin-bottom:6px;}
  .pq-hero-text h1{font-size:clamp(22.4px,3vw,28.8px);font-weight:800;color:var(--teal-900);letter-spacing:-.01em;line-height:1.15;}
  .pq-hero-text p{display:block;font-size:13.6px;color:#1c4440;margin-top:10px;line-height:1.5;}
  .pq-hero-reset{
    position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;margin-top:14px;
    background:rgba(255,255,255,.55);border:1px solid rgba(15,118,110,.18);border-radius:999px;
    padding:7px 13px 7px 11px;font-size:11.84px;font-weight:800;color:var(--teal-800);
  }
  .pq-hero-reset svg{width:14px;height:14px;flex-shrink:0;}
  .pq-hero-art{flex-shrink:0;position:relative;z-index:1;width:120px;height:120px;}
  @media (max-width:560px){ .pq-hero-art{width:96px;height:96px;} }
  @media (max-width:420px){ .pq-hero-art{display:none;} }

  .pq-stats{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:22px;}
  @media (min-width:680px){ .pq-stats{grid-template-columns:repeat(3,1fr);} }
  .pq-stat{
    background:var(--card-bg);border-radius:18px;padding:18px;display:flex;flex-direction:row;align-items:center;gap:14px;
    box-shadow:var(--shadow-sm);border:1px solid #dcf3ee;
    width:100%;
  }
  .pq-stat-ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 16px -6px rgba(0,0,0,.25);flex-shrink:0;}
  .pq-stat-ic svg{width:21px;height:21px;}
  .pq-stat.s-total .pq-stat-ic{background:linear-gradient(135deg,var(--teal-500),var(--teal-700));}
  .pq-stat.s-tersedia .pq-stat-ic{background:linear-gradient(135deg,#34d399,var(--success-600));}
  .pq-stat.s-habis .pq-stat-ic{background:linear-gradient(135deg,#f87171,var(--danger-600));}
  .pq-stat-label{display:block;font-size:10.88px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);}
  .pq-stat-num{display:block;font-size:27.2px;font-weight:800;color:var(--ink);line-height:1;margin-top:6px;}
  .pq-stat-sub{display:block;font-size:12px;color:var(--ink-soft);margin-top:4px;}

  .pq-search-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px;}
  .pq-search{
    display:flex;align-items:center;gap:10px;background:var(--card-bg);border:1px solid #d9f2ec;
    border-radius:16px;padding:14px 16px;box-shadow:var(--shadow-sm);min-height:52px;
    flex:1 1 260px;
  }
  .pq-search svg{width:18px;height:18px;color:#7fada5;flex-shrink:0;}
  .pq-search input{border:none;outline:none;background:none;font-size:14.4px;width:100%;color:var(--ink);}
  .pq-search input::placeholder{color:#94b8b1;}

  .pq-filter{position:relative;flex:0 0 auto;width:100%;}
  @media (min-width:600px){ .pq-filter{width:230px;} }
  .pq-filter-ic{
    position:absolute;left:14px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:8px;
    background:var(--teal-50);color:var(--teal-600);display:flex;align-items:center;justify-content:center;pointer-events:none;
  }
  .pq-filter-ic svg{width:14px;height:14px;}
  .pq-filter-chevron{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#7fada5;pointer-events:none;}
  .pq-filter-chevron svg{width:16px;height:16px;}
  .pq-filter select{
    appearance:none;-webkit-appearance:none;width:100%;background:var(--card-bg);border:1px solid #d9f2ec;
    border-radius:16px;padding:14px 42px 14px 52px;font-size:14.08px;font-weight:700;color:var(--ink);
    box-shadow:var(--shadow-sm);min-height:52px;
  }
  .pq-filter select:focus{outline:2px solid var(--teal-500);outline-offset:1px;}

  .pq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
  .pq-card{
    background:var(--card-bg);border:1px solid #dcf3ee;border-radius:18px;padding:16px;
    box-shadow:var(--shadow-sm);
  }
  .pq-card-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
  .pq-app-logo{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;}
  .pq-app-logo-fallback{
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15.4px;
    background:linear-gradient(135deg,var(--teal-500),var(--teal-800));color:#fff;
  }
  .pq-card-name{min-width:0;}
  .pq-card-name b{display:block;font-size:14.72px;font-weight:800;color:var(--ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  .pq-dots{display:flex;align-items:center;gap:6px;margin-bottom:10px;}
  .pq-dot{width:11px;height:11px;border-radius:50%;background:#dbeee9;flex-shrink:0;}
  .pq-dot.on{background:var(--teal-600);}
  .pq-dot.on.full{background:var(--danger-500);}
  .pq-count{margin-left:auto;font-size:13.44px;font-weight:800;color:var(--ink);}
  .pq-count small{font-size:10.88px;font-weight:600;color:var(--ink-soft);margin-left:2px;}

  .pq-status{
    display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
    padding:6px 11px;border-radius:999px;
  }
  .pq-status.st-tersedia{background:var(--success-bg);color:var(--success-text);}
  .pq-status.st-habis{background:var(--danger-bg);color:var(--danger-text);}
  .pq-status svg{width:13px;height:13px;}

  .pq-empty{
    text-align:center;padding:48px 22px;background:var(--teal-50);border:1.5px dashed var(--teal-100);
    border-radius:18px;color:var(--teal-900);font-weight:600;
  }
  .pq-empty small{display:block;font-size:13.12px;font-weight:500;opacity:.75;margin-top:8px;}

  .pq-footnote{
    display:flex;align-items:flex-start;gap:10px;background:var(--teal-50);border-radius:16px;
    padding:14px 16px;margin-top:20px;
  }
  .pq-footnote-ic{width:22px;height:22px;border-radius:50%;background:var(--teal-600);color:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
  .pq-footnote-ic svg{width:12px;height:12px;}
  .pq-footnote p{font-size:12.48px;color:#1c4440;line-height:1.45;}