/* CoPaste P2P — gaya khusus halaman Direct P2P (aset lokal, tanpa CDN) */
:root { --p2p-pri:#1e88e5; --p2p-dark:#0d47a1; --p2p-bg:#f5f9ff; }
body { background: linear-gradient(180deg, var(--p2p-bg) 0%, #eaf2ff 100%); min-height: 100vh; color:#1f2d3d;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.p2p-top { background: linear-gradient(135deg, var(--p2p-pri), var(--p2p-dark)); color:#fff; padding: .6rem 0;
  padding-top: calc(.6rem + env(safe-area-inset-top, 0px)); position: sticky; top: 0; z-index: 20; }
.p2p-brand { color:#fff; display:flex; align-items:center; gap:.5rem; font-weight:700; }
.p2p-brand small { font-weight:400; opacity:.85; margin-left:.25rem; }
.p2p-main { max-width: 640px; padding-top: 1.25rem; }
.p2p-card { background:#fff; border:1px solid #dbe6f5; border-radius:12px; padding:.85rem 1rem; margin-bottom:.9rem;
  box-shadow: 0 2px 8px rgba(13,71,161,.06); }
.p2p-hints { color:#546e7a; font-size:.9rem; padding-left:1.1rem; margin:1rem 0; }
.p2p-netnote { font-size:.8rem; color:#546e7a; background:#fff; border:1px dashed #b8cbe6; border-radius:8px; padding:.35rem .6rem; margin-bottom:.75rem; }
.min-w-0 { min-width:0; }

.p2p-qrwrap { background:#fff; border:1px solid #dbe6f5; border-radius:14px; padding:12px; width:max-content; max-width:100%; margin:0 auto .75rem; }
.p2p-qrwrap img { display:block; max-width:100%; height:auto; image-rendering: pixelated; }
.p2p-codes { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.p2p-codes > div { background:#fff; border:1px solid #dbe6f5; border-radius:10px; padding:.4rem .8rem; text-align:center; min-width:96px; }
.p2p-codes .lbl { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:#78909c; }
.p2p-codes .val { font-size:1.35rem; font-weight:700; letter-spacing:.08em; font-variant-numeric: tabular-nums; }

.p2p-dot { width:12px; height:12px; border-radius:50%; background:#9e9e9e; flex:none; }
.p2p-dot.ok { background:#2e7d32; box-shadow:0 0 0 4px rgba(46,125,50,.18); }
.p2p-dot.bad { background:#c62828; box-shadow:0 0 0 4px rgba(198,40,40,.15); }

.p2p-drop { border:2px dashed #90b4e8; background:#fff; border-radius:14px; padding:1.1rem; text-align:center; margin-bottom:1rem; transition:.15s; }
.p2p-drop.over { background:#e3f0ff; border-color:var(--p2p-pri); }
.p2p-drop.off { opacity:.55; pointer-events:none; }

.p2p-list { display:flex; flex-direction:column; gap:.6rem; }
.p2p-item { background:#fff; border:1px solid #dbe6f5; border-radius:12px; padding:.65rem .8rem; }
.p2p-item .dir { font-size:1.1rem; width:1.4rem; text-align:center; flex:none; }
.p2p-item .name { font-weight:600; }
.p2p-item .meta { color:#607d8b; font-size:.8rem; }
.p2p-item .progress { height:7px; margin:.45rem 0 .25rem; }
.p2p-item .stat { font-size:.78rem; color:#546e7a; display:flex; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.p2p-item.done .stat .msg { color:#2e7d32; }
.p2p-item.failed .stat .msg { color:#c62828; }
.p2p-item.cancelled .stat .msg { color:#ef6c00; }
.p2p-item .btns { display:flex; gap:.25rem; flex:none; }
.p2p-item .btns .btn { --bs-btn-padding-y:.1rem; --bs-btn-padding-x:.5rem; --bs-btn-font-size:.78rem; }

.p2p-cam { width:100%; max-height:280px; border-radius:12px; background:#000; }
@media (max-width: 420px) { .p2p-codes > div { min-width: 84px; } .p2p-codes .val { font-size:1.15rem; } }