/* modern.css v4.22 - lapisan poles tampilan untuk SEMUA halaman.
   Memakai :where() (spesifisitas nol) sehingga kelas utilitas Tailwind pada tiap halaman tetap menang; hanya mengubah
   warna, bayangan, sudut, dan transisi. Sengaja tanpa backdrop-filter/blur agar ringan di HP murah.
   Dimuat otomatis oleh includes/head.php. Hapus berkas ini untuk kembali ke tampilan sebelumnya. */
@media screen {
  :root { --ring: 0 0 0 4px rgba(21,101,230,.14); --sh1: 0 1px 2px rgba(16,24,40,.05), 0 4px 16px rgba(21,60,160,.05); --sh2: 0 2px 4px rgba(16,24,40,.06), 0 12px 28px rgba(21,60,160,.10); }
  :where(body) { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; text-rendering: optimizeLegibility; }
  :where(h1, h2, h3) { letter-spacing: -.012em; }
  :where(::selection) { background: #cfe0ff; }
  :where(td, th, .td, .th, .tabular) { font-variant-numeric: tabular-nums; }

  /* kartu */
  :where(.card) { border-color: #e6ecf8; box-shadow: var(--sh1); }
  :where(a.card, button.card) { transition: box-shadow .18s, transform .18s, border-color .18s; }
  :where(a.card:hover, button.card:hover) { box-shadow: var(--sh2); border-color: #d3def5; transform: translateY(-1px); }

  /* tombol */
  :where(.btn-primary) { background: linear-gradient(180deg, #2a78f0 0%, #1565e6 100%); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 14px rgba(21,101,230,.26); }
  :where(.btn-primary:hover) { background: linear-gradient(180deg, #1f6de6 0%, #0f55c9 100%); }
  :where(.btn-light) { border-color: #d9e2f3; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
  :where(.btn-light:hover) { border-color: #bfd0ef; background: #f6f9ff; }
  :where(.btn-danger:hover) { border-color: #fca5a5; }

  /* kolom isian */
  :where(.inp) { border-color: #d9e2f3; box-shadow: 0 1px 2px rgba(16,24,40,.03) inset; }
  :where(.inp:hover:not(:disabled)) { border-color: #b9c9e8; }
  :where(select:not([multiple]):not([size])) {
    -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='%2364748b'><path d='M5.3 7.3a1 1 0 011.4 0L10 10.6l3.3-3.3a1 1 0 111.4 1.4l-4 4a1 1 0 01-1.4 0l-4-4a1 1 0 010-1.4z'/></svg>");
    background-repeat: no-repeat; background-position: right .7rem center; background-size: 1rem;
  }
  :where(select:not([multiple]):not([size]):not(.inp)) { padding-right: 2rem; }
  :where(input[type=checkbox], input[type=radio]) { accent-color: #1565e6; }

  /* tabel di dalam kartu */
  .card table { border-collapse: separate; border-spacing: 0; }
  .card table thead tr { background: #f5f8fe; }
  .card table thead th, .card table thead .th { border-bottom: 1px solid #e3eaf8; color: #5b6b86; white-space: nowrap; }
  .card table tbody tr { transition: background-color .12s; }
  .card table tbody tr:hover { background: #f7faff; }
  .card table tbody td, .card table tbody .td { border-bottom: 1px solid #eef2fa; }
  .card table tbody tr:last-child td { border-bottom: 0; }

  /* kartu angka ringkas (dipakai Laporan dan halaman lain) */
  .kpi-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; }
  .kpi-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff; box-shadow: 0 6px 12px rgba(15,23,42,.12); }
  .kpi-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .kpi-card .k { margin: 0; font-size: .72rem; font-weight: 600; color: #64748b; }
  .kpi-card .n { margin: 1px 0 0; font-size: clamp(.95rem, 4.3vw, 1.1rem); line-height: 1.25; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
  .kpi-card .n.g { color: #15803d; }
  .page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
  .page-head h1 { margin: 0; font-size: 1.3rem; font-weight: 800; color: #0f172a; }
  .page-head p { margin: 2px 0 0; font-size: .85rem; color: #64748b; }
  .page-head > :first-child { flex: 1 1 12rem; min-width: 0; }
  .page-head > :not(:first-child) { flex: none; }
  @media (min-width: 640px) { .kpi-card { gap: 12px; padding: 14px; } .kpi-ic { width: 42px; height: 42px; border-radius: 13px; } }

  /* kasir: kartu produk */
  .product-card { box-shadow: 0 1px 2px rgba(16,24,40,.04); transition: box-shadow .16s, transform .12s, border-color .16s, background-color .16s; }
  .product-card:hover { box-shadow: var(--sh2); }
  .product-card.in-cart { box-shadow: 0 0 0 2px #1565e6 inset, 0 6px 16px rgba(21,101,230,.14); }
  .product-card .add-icon { background: linear-gradient(145deg,#3b8bff,#1565e6); color: #fff; box-shadow: 0 3px 8px rgba(21,101,230,.3); }
  .cat-btn { transition: background-color .15s, color .15s, box-shadow .15s; }

  /* navigasi */
  .topbar { box-shadow: 0 1px 0 rgba(15,60,160,.04), 0 8px 24px rgba(15,60,160,.04); }
  .bn { transition: color .15s; }
  .bn.on svg { transform: translateY(-1px) scale(1.06); }
  .sheet-tile span:first-child { transition: transform .12s; }

  /* kemunculan modal/lembar menu: hanya transform+opacity (ringan) */
  @keyframes mdUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes mdFade { from { opacity: 0; } to { opacity: 1; } }
  #lainnyaSheet:not(.hidden), #payModal:not(.hidden), #reviewModal:not(.hidden) { animation: mdFade .18s ease-out; }
  #lainnyaSheet:not(.hidden) > div, #payModal:not(.hidden) > div, #reviewModal:not(.hidden) > div { animation: mdUp .24s cubic-bezier(.2,.8,.2,1); }
  :where(.flash-wrap > div) { animation: mdUp .25s ease-out; }
}

@media screen {
  .kpi-card .n.r { color: #dc2626; }
  /* banner masa percobaan/langganan: satu baris ringkas dengan tombol */
  .sub-banner { background: linear-gradient(90deg,#fff9e8,#fff3d6); border-bottom: 1px solid #f3dca0; color: #8a5a00; font-size: .75rem; line-height: 1.3; padding: .4rem .75rem;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .2rem .6rem; }
  .sub-banner a { background: #f59e0b; color: #fff; border-radius: 99px; padding: .12rem .65rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
  .sub-banner a:hover { background: #d98a07; }
}
@media screen {
  /* grafik tren (Laporan) */
  .tr-chip { display: inline-flex; gap: 4px; align-items: center; border-radius: 99px; padding: 2px 9px; font-size: 11px; font-weight: 600; white-space: nowrap; }
  .tr-up { background: #e6f7ee; color: #0f7a43; } .tr-down { background: #fdecec; color: #c2272d; } .tr-flat { background: #eef2fa; color: #5b6b86; }
  .tr-info { font-size: 12px; color: #334155; background: #f5f8fe; border-radius: 10px; padding: 7px 10px; margin-bottom: 6px; min-height: 32px; }
  .tr-bar { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .tr-bar.on rect:nth-of-type(2) { filter: brightness(.82); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* v5.1 - komponen halaman dalam (Akun Saya, Shift, Langganan). Hanya CSS biasa: app.css hasil build Tailwind tidak memuat kelas baru. */
@media screen {
  .pg-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
  .pg-ic { flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#3b8bff,#1565e6 55%,#0b3fb8); box-shadow:0 6px 14px rgba(21,101,230,.28); }
  .pg-ic svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .pg-head > div:nth-child(2) { flex:1; min-width:0; }
  .pg-head h1 { margin:0; font-size:1.25rem; line-height:1.3; font-weight:800; letter-spacing:-.015em; color:#0a2a6e; }
  .pg-head p { margin:2px 0 0; font-size:.82rem; color:#64748b; }
  .pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:.72rem; font-weight:700; white-space:nowrap; }
  .pill i { width:7px; height:7px; border-radius:50%; background:currentColor; }
  .pill.ok { background:#e6f7ee; color:#0f7a43; } .pill.idle { background:#eef2fa; color:#5b6b86; }
  .pill.warn { background:#fff4e0; color:#b45309; } .pill.bad { background:#fdecec; color:#c2272d; }
  .sec-t { display:flex; align-items:center; gap:10px; margin:0 0 12px; }
  .sec-t .n { flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:.76rem; font-weight:700; color:#fff; background:linear-gradient(145deg,#3b8bff,#1565e6); box-shadow:0 4px 10px rgba(21,101,230,.3); }
  .sec-t h2 { margin:0; font-size:.95rem; font-weight:700; color:#0a2a6e; }
  .sec-t p { margin:0; font-size:.74rem; color:#64748b; }

  /* kolom password: tombol mata + indikator kekuatan (assets/js/pw-tools.js) */
  .fld-pw { position:relative; }
  .fld-pw .inp { padding-right:46px; }
  .fld-pw .tg { position:absolute; right:5px; top:50%; transform:translateY(-50%); width:38px; height:38px; border:0; border-radius:10px; background:transparent; color:#94a3b8; display:grid; place-items:center; cursor:pointer; }
  .fld-pw .tg:hover { background:#f1f5f9; color:#475569; }
  .fld-pw .tg svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .pw-meter { margin:8px 0 0; }
  .pw-meter .bars { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
  .pw-meter .bars i { height:5px; border-radius:99px; background:#e5eaf5; transition:background .2s; }
  .pw-meter .txt { display:flex; justify-content:space-between; gap:8px; margin-top:5px; font-size:.72rem; color:#94a3b8; }
  .pw-meter .txt b { font-weight:600; }
  .pw-meter .s1 i:nth-child(1) { background:#ef4444; }
  .pw-meter .s2 i:nth-child(-n+2) { background:#f59e0b; }
  .pw-meter .s3 i:nth-child(-n+3) { background:#22a06b; }
  .pw-meter .s4 i { background:#0f9d58; }
  .pw-hint { margin:6px 0 0; font-size:.74rem; }
  .pw-hint.ok { color:#0f7a43; } .pw-hint.err { color:#dc2626; }

  /* pilihan cepat nominal */
  .qchips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px; }
  .qchip { padding:6px 12px; border:1px solid #d5deef; border-radius:99px; background:#fff; font:inherit; font-size:.78rem; font-weight:600; color:#334155; cursor:pointer; }
  .qchip:hover { background:#eef4ff; border-color:#9ec0ff; color:#0b3fb8; }

  /* radio kartu: tampilkan fokus keyboard (input disembunyikan lewat sr-only) */
  .peer:focus-visible + div { outline:3px solid #93c5fd; outline-offset:2px; }

  /* notifikasi singkat (pengganti alert) */
  .toast { position:fixed; left:50%; bottom:calc(88px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,12px); opacity:0; pointer-events:none; z-index:80; max-width:calc(100% - 32px); padding:10px 16px; border-radius:99px; background:#0f172a; color:#fff; font-size:.82rem; font-weight:600; box-shadow:0 10px 24px rgba(15,23,42,.3); transition:opacity .2s, transform .2s; }
  .toast.on { opacity:1; transform:translate(-50%,0); }

  /* Shift: kartu riwayat di HP, tabel di layar lebar */
  .sh-cards { display:grid; gap:10px; }
  @media (min-width:640px) { .sh-cards { display:none; } }
  @media (max-width:639px) { .sh-table { display:none; } }

  /* Langganan */
  .plan-hero { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; padding:18px; border-radius:20px; color:#fff; background:linear-gradient(135deg,#1f6be3 0%,#0a32a0 100%); box-shadow:0 14px 30px rgba(21,101,230,.25); }
  .plan-hero.warn { background:linear-gradient(135deg,#f59e0b 0%,#c2410c 100%); box-shadow:0 14px 30px rgba(217,119,6,.25); }
  .plan-hero.bad { background:linear-gradient(135deg,#ef4444 0%,#991b1b 100%); box-shadow:0 14px 30px rgba(220,38,38,.25); }
  .plan-hero .k { margin:0; font-size:.74rem; opacity:.85; }
  .plan-hero .v { margin:2px 0 0; font-size:1.25rem; font-weight:800; letter-spacing:-.01em; }
  .plan-hero .d { margin:4px 0 0; font-size:.82rem; opacity:.92; }
  .plan-hero .r { text-align:right; }
  .plan-hero .big { display:block; font-size:2.2rem; line-height:1; font-weight:800; font-variant-numeric:tabular-nums; }
  .plan-hero .u { font-size:.74rem; opacity:.85; }
  .plan-hero .st { flex-basis:100%; align-self:flex-start; width:fit-content; padding:4px 12px; border-radius:99px; background:rgba(255,255,255,.2); font-size:.74rem; font-weight:700; }
  .steps { display:flex; gap:6px; list-style:none; margin:0 0 16px; padding:0; counter-reset:st; }
  .steps li { flex:1; position:relative; padding-top:22px; text-align:center; font-size:.68rem; line-height:1.3; font-weight:600; color:#94a3b8; counter-increment:st; }
  .steps li::before { content:counter(st); position:absolute; top:0; left:50%; transform:translateX(-50%); width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:.66rem; background:#e5eaf5; color:#64748b; }
  .steps li::after { content:""; position:absolute; top:8px; left:calc(50% + 14px); right:calc(-50% + 14px); height:2px; background:#e5eaf5; }
  .steps li:last-child::after { display:none; }
  .steps li.done, .steps li.cur { color:#0b3fb8; }
  .steps li.done::before { content:"\2713"; background:#0f9d58; color:#fff; }
  .steps li.cur::before { background:#1565e6; color:#fff; box-shadow:0 0 0 4px rgba(21,101,230,.15); }
  .steps li.done::after { background:#0f9d58; }
}

/* v5.2 - kartu Pengembang (Pengaturan > Lainnya) */
@media screen {
  .dev-card { overflow:hidden; }
  .dev-hero { position:relative; overflow:hidden; padding:20px 20px 64px; color:#fff; background:linear-gradient(135deg,#0a2a6e 0%,#1565e6 65%,#3b8bff 100%); }
  .dev-hero::before { content:""; position:absolute; right:-34px; top:-40px; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.1); }
  .dev-hero::after { content:""; position:absolute; right:48px; bottom:-60px; width:112px; height:112px; border-radius:50%; background:rgba(255,255,255,.1); }
  .dev-eyebrow { position:relative; margin:0; font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.7); }
  .dev-lead { position:relative; margin:4px 0 0; font-size:.9rem; color:rgba(255,255,255,.92); }
  .dev-body { position:relative; padding:0 20px 20px; }
  .dev-photo { display:block; width:104px; height:104px; margin-top:-52px; padding:4px; border-radius:30px; background:#fff; box-shadow:0 14px 30px rgba(10,42,110,.28); }
  .dev-photo .in { position:relative; display:grid; place-items:center; width:100%; height:100%; overflow:hidden; border-radius:26px; color:#fff; font-size:1.6rem; font-weight:800; background:linear-gradient(145deg,#3b8bff,#1565e6 55%,#0b3fb8); }
  .dev-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
  .dev-name { margin:14px 0 0; font-size:1.2rem; line-height:1.25; font-weight:800; letter-spacing:-.01em; color:#0a2a6e; }
  .dev-role { display:inline-block; margin-top:6px; padding:4px 12px; border-radius:99px; background:#eef4ff; color:#0b3fb8; font-size:.72rem; font-weight:700; }
  .dev-bio { margin:12px 0 0; font-size:.84rem; line-height:1.65; color:#475569; }
  .dev-actions { display:grid; gap:10px; margin-top:16px; }
  .dev-btn { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:16px; text-decoration:none; transition:transform .05s, box-shadow .15s, background .15s; }
  .dev-btn:active { transform:scale(.99); }
  .dev-btn .ic { flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:#fff; }
  .dev-btn .tx { flex:1; min-width:0; }
  .dev-btn strong { display:block; font-size:.9rem; font-weight:700; line-height:1.25; }
  .dev-btn small { display:block; margin-top:1px; font-size:.74rem; }
  .dev-btn .arr { flex:none; opacity:.7; }
  .dev-btn.wa { color:#fff; background:linear-gradient(135deg,#25d366,#128c4a); box-shadow:0 10px 22px rgba(18,140,74,.28); }
  .dev-btn.wa .ic { background:rgba(255,255,255,.22); }
  .dev-btn.wa small { color:rgba(255,255,255,.85); }
  .dev-btn.wa:hover { box-shadow:0 12px 26px rgba(18,140,74,.36); }
  .dev-btn.ig { color:#1e293b; background:#fff; border:1px solid #e3eaf8; }
  .dev-btn.ig .ic { background:linear-gradient(45deg,#f58529,#dd2a7b 55%,#8134af); }
  .dev-btn.ig small { color:#64748b; }
  .dev-btn.ig:hover { background:#f8faff; border-color:#bfd0ef; }
  .dev-btn:focus-visible { outline:3px solid #93c5fd; outline-offset:2px; }
  .dev-foot { margin:16px 0 0; text-align:center; font-size:.7rem; color:#94a3b8; }
}