/* ===== Pembuat Pas Foto — gaya app ===== */
.pasfoto-app{max-width:760px}
.privacy-note{background:#f0fdf4;border:2px solid #16a34a;border-radius:10px;padding:10px 14px;font-size:.9rem;margin:14px 0}
.pf-card{background:#fff;border:2px solid #292524;border-radius:12px;box-shadow:4px 4px 0 #292524;padding:18px;margin:16px 0}
.pf-card h3{margin:0 0 12px;font-size:1.05rem;display:flex;align-items:center;gap:10px}
.step{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#292524;color:#fff;font-size:.85rem;font-weight:800;flex:none}
.hint{font-size:.82rem;color:#78716c;margin:8px 0 0}
.row{display:flex;gap:8px;align-items:center}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{margin-bottom:10px}
.field label{display:block;font-size:.8rem;font-weight:700;margin-bottom:6px}
.field select{width:100%;padding:10px;border:2px solid #e7e5e4;border-radius:8px;font-size:.95rem;font-family:inherit;background:#fff}
.field input[type=range]{width:100%;accent-color:#292524}
.sep{border:none;border-top:2px solid #e7e5e4;margin:14px 0}
.link-btn{background:none;border:none;color:#1d4ed8;text-decoration:underline;cursor:pointer;font-size:inherit;padding:0}

/* ===== Stage editor ===== */
.pf-stage{position:relative;width:100%;max-width:340px;margin:0 auto;border:2px solid #292524;border-radius:10px;overflow:hidden;background:#f5f5f4;touch-action:none;user-select:none;-webkit-user-select:none}
.pf-stage canvas{display:block;width:100%;height:auto}
#guideCanvas{position:absolute;inset:0;pointer-events:none}
.stage-hint{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:.72rem;color:#fff;background:rgba(0,0,0,.45);padding:3px 6px;pointer-events:none}

/* ===== Progress ===== */
.progress-wrap{margin-top:12px}
.progress-label{font-size:.85rem;font-weight:600;margin-bottom:6px}
.progress-bar{height:14px;border:2px solid #292524;border-radius:8px;overflow:hidden;background:#f5f5f4}
#progressFill{height:100%;width:0%;background:#16a34a;transition:width .2s}

/* ===== Swatches & ukuran ===== */
.swatches{display:flex;gap:10px;align-items:center}
.sw{width:44px;height:44px;border-radius:10px;border:2px solid #292524;cursor:pointer;padding:0}
.sw.active{outline:3px solid #1d4ed8;outline-offset:2px}
.sw.custom{display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:#f5f5f4}
.size-picker{display:flex;gap:8px;flex-wrap:wrap}
.size-btn{border:2px solid #e7e5e4;background:#fff;border-radius:8px;padding:10px 16px;font-weight:700;cursor:pointer}
.size-btn.active{border-color:#292524;background:#292524;color:#fff}

/* ===== Peringatan ===== */
.warn{background:#fefce8;border:2px solid #eab308;border-radius:8px;padding:8px 12px;font-size:.82rem;margin-top:8px}
.err{background:#fef2f2;border:2px solid #fca5a5;border-radius:8px;padding:8px 12px;font-size:.85rem;margin-top:8px;color:#991b1b}

/* ===== Modal (dipakai AI_CORE) ===== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal[hidden]{display:none}
.modal-box{background:#fff;border:2px solid #292524;border-radius:12px;box-shadow:5px 5px 0 #292524;padding:20px;max-width:440px;width:100%;max-height:90vh;overflow:auto}
.modal-box h3{margin:0 0 10px}
.modal-note{font-size:.82rem;color:#78716c}
.ad-placeholder{border:2px dashed #a8a29e;border-radius:8px;background:#fafaf9;text-align:center;padding:36px 12px;color:#78716c;font-weight:700;letter-spacing:.1em;margin:12px 0}
.ad-count{font-size:2rem;color:#292524;margin-top:8px}

@media(max-width:600px){
  .row2{grid-template-columns:1fr 1fr}
  .pf-card{padding:14px}
}