/* Slip QR Reader - Playful Claymorphism theme (style only, logic untouched) */
:root{
  --ink:#3a2e39;
  --bg:#fff6e9;
  --pink:#ffe3ee; --yellow:#fff3c4; --mint:#d8f5e1; --sky:#dcefff; --lav:#e8e2ff; --peach:#ffe8d6;
  --primary:#ff6b9d; --primary-dark:#d94f7f;
  --secondary:#7c6cf0; --success:#22b573; --warning:#f5a623; --error:#ef4444;
  --card:#ffffff;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:'Kanit',sans-serif; color:var(--ink); min-height:100vh;
  background:
    radial-gradient(circle at 8% 12%, #ffd6e8 0 90px, transparent 91px),
    radial-gradient(circle at 92% 8%, #fff3c4 0 110px, transparent 111px),
    radial-gradient(circle at 88% 88%, #d8f5e1 0 120px, transparent 121px),
    radial-gradient(circle at 6% 90%, #dcefff 0 100px, transparent 101px),
    var(--bg);
}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.topbar{background:#fff;border-bottom:3px solid var(--ink);position:sticky;top:0;z-index:10}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:48px;height:48px;filter:drop-shadow(3px 3px 0 var(--ink))}
.brand h1{margin:0;font-size:19px;font-weight:700}
.brand h1 .ver{font-size:11px;background:var(--yellow);color:var(--ink);padding:3px 10px;border:2px solid var(--ink);border-radius:999px;margin-left:6px;box-shadow:2px 2px 0 var(--ink)}
.brand p{margin:2px 0 0;color:#8a7a88;font-size:12px}
.badge{font-size:11px;background:var(--mint);color:var(--ink);border:2px solid var(--ink);padding:6px 12px;border-radius:999px;font-weight:700;box-shadow:3px 3px 0 var(--ink)}
.main{padding:28px 20px 48px}

/* Hero (decorative only) */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-bottom:18px}
@media(max-width:860px){.hero{grid-template-columns:1fr}}
.hero-main{background:var(--pink);border:3px solid var(--ink);border-radius:24px;padding:22px;box-shadow:6px 6px 0 var(--ink)}
.hero-main h2{margin:0 0 6px;font-size:24px}
.hero-main p{margin:0;color:#6b5a69;font-size:13px}
.hero-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pill{font-size:11px;font-weight:700;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:5px 12px;box-shadow:2px 2px 0 var(--ink)}
.hero-side{background:var(--yellow);border:3px solid var(--ink);border-radius:24px;padding:18px;box-shadow:6px 6px 0 var(--ink);font-size:13px}
.hero-side b{display:block;margin-bottom:8px}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 18px}
@media(max-width:700px){.steps3{grid-template-columns:1fr}}
.step-card{border:3px solid var(--ink);border-radius:20px;padding:14px;box-shadow:5px 5px 0 var(--ink);font-size:13px}
.step-card:nth-child(1){background:var(--sky)} .step-card:nth-child(2){background:var(--lav)} .step-card:nth-child(3){background:var(--mint)}
.step-num{display:inline-flex;width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid var(--ink);align-items:center;justify-content:center;font-weight:800;margin-bottom:8px;box-shadow:2px 2px 0 var(--ink)}

/* Cards */
.card{background:var(--card);border:3px solid var(--ink);border-radius:22px;box-shadow:6px 6px 0 var(--ink)}
.upload-card{text-align:center;padding:34px 24px;background:var(--sky);transition:.2s;cursor:pointer}
.upload-card.drag{transform:scale(1.01) rotate(-.3deg);background:var(--mint)}
.upload-icon{width:62px;height:62px;margin:0 auto 12px;background:#fff;color:var(--primary);border:3px solid var(--ink);border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:4px 4px 0 var(--ink)}
.upload-card h2{margin:0;font-size:20px}
.upload-card p{color:#6b5a69;font-size:13px;margin:8px auto;max-width:520px}

/* Buttons - chunky clay */
.btn{appearance:none;border:3px solid var(--ink);border-radius:14px;padding:11px 18px;font-family:'Kanit';font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.12s;background:#fff;color:var(--ink);box-shadow:0 5px 0 var(--ink)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:#fff}
.btn-ghost:hover{background:var(--yellow)}
.btn-cta{font-size:17px;padding:14px 30px;background:var(--secondary);color:#fff}
.hint{font-size:11px;color:#8a7a88;margin-top:10px}

.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-top:18px}
@media(max-width:860px){.grid{grid-template-columns:1fr}}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:3px solid var(--ink);gap:8px;flex-wrap:wrap}
.card-head h3{margin:0;font-size:14px;font-weight:700}
.preview-card{background:var(--peach)} .result-card{background:#fff}
.status{font-size:11px;font-weight:700;padding:5px 12px;border-radius:999px;background:#fff;border:2px solid var(--ink);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.status.ok{background:var(--mint)} .status.err{background:#ffd9d9}
.status.PENDING{background:var(--yellow)} .status.COMPLETED{background:var(--mint)}
.status.CANCELLED{background:#eee} .status.FAILED_REVIEW{background:#ffd9d9}
.status.VERIFYING{background:var(--sky)}
.preview-wrap{background:#fff;border:3px solid var(--ink);border-radius:16px;margin:14px;overflow:hidden;min-height:240px;display:flex;align-items:center;justify-content:center;box-shadow:inset 3px 3px 0 #f3e9d8}
.preview-wrap img{max-width:100%;max-height:380px;display:block}
.file-name{padding:0 14px 14px;color:#8a7a88;font-size:12px;word-break:break-all}
.state{padding:20px;text-align:center;color:var(--secondary);font-weight:700}
.inspector{margin:14px;background:var(--yellow);border:3px solid var(--ink);border-radius:16px;padding:6px 10px;box-shadow:4px 4px 0 var(--ink)}
.kv{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:2px dashed rgba(58,46,57,.2);font-size:12px;gap:8px}
.kv:last-child{border:none}
.kv span{color:#6b5a69;font-weight:600}
.kv b{font-weight:700;max-width:62%;text-align:right;word-break:break-all}
.kv b.mono{font-family:'JetBrains Mono',monospace;font-size:11px}
.btn-mini{background:#fff;border:2px solid var(--ink);color:var(--secondary);border-radius:8px;padding:2px 8px;cursor:pointer;font-size:11px;font-weight:700;box-shadow:2px 2px 0 var(--ink)}
.parse-error{margin-top:8px;background:#ffd9d9;border:2px solid var(--ink);border-radius:12px;padding:8px 10px;color:#991b1b;font-size:12px;display:flex;gap:8px}
#ctaSection{text-align:center;margin:20px 0}
.verify-hint{font-size:11px;color:#6b5a69;margin-top:8px}
.provider-card{margin-top:4px;overflow:hidden;background:#fff}
.provider-card .card-head{background:var(--mint)}
.verify-hero{display:flex;justify-content:space-between;align-items:center;padding:18px;background:var(--mint);border-bottom:3px solid var(--ink);gap:10px;flex-wrap:wrap}
.hero-amount{font-size:30px;font-weight:800}
.hero-badge{background:var(--success);color:#fff;padding:8px 16px;border:3px solid var(--ink);border-radius:999px;font-weight:800;font-size:12px;box-shadow:3px 3px 0 var(--ink)}
.verify-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}
@media(max-width:640px){.verify-grid{grid-template-columns:1fr}}
.sender-receiver{display:grid;grid-template-columns:1fr 40px 1fr;gap:12px;padding:0 14px 14px;align-items:center}
@media(max-width:640px){.sender-receiver{grid-template-columns:1fr;gap:8px}.sr-arrow{transform:rotate(90deg)}}
.sr-card{background:var(--lav);border:3px solid var(--ink);border-radius:14px;padding:12px;box-shadow:4px 4px 0 var(--ink)}
.sr-card h4{margin:0 0 8px;font-size:11px;letter-spacing:.5px}
.sr-name{font-weight:700;margin:4px 0}
.sr-acc{font-family:'JetBrains Mono',monospace;font-size:11px;word-break:break-all}
.sr-arrow{text-align:center}
.verify-meta{display:flex;justify-content:space-between;padding:12px 14px;background:var(--yellow);border-top:3px solid var(--ink);font-size:11px;gap:12px;flex-wrap:wrap}
.verify-meta b{font-family:'JetBrains Mono',monospace}
.tech-details{margin-top:16px;padding:16px;background:#fff}
.tech-details summary{cursor:pointer;font-weight:700;font-size:12px}
.payload-box{background:#fbf7ef;border:3px solid var(--ink);border-radius:12px;margin-top:10px;padding:12px;max-height:220px;overflow:auto}
.payload-box pre{margin:0;font-family:'JetBrains Mono',monospace;font-size:11px;white-space:pre-wrap;word-break:break-all}
.dev-toggle{text-align:center;margin-top:16px}
.lab-card,.history-card{margin-top:16px}
.lab-card{background:var(--lav)} .history-card{background:#fff}
.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:14px}
@media(max-width:860px){.lab-grid{grid-template-columns:1fr}}
.lab-title{font-size:11px;letter-spacing:.5px;margin:0 0 8px;padding-bottom:6px;border-bottom:2px dashed var(--ink)}
.lab-kv{display:flex;justify-content:space-between;font-size:12px;padding:6px 0;border-bottom:1px dashed rgba(58,46,57,.2)}
.lab-kv b.mono{font-family:'JetBrains Mono',monospace}
.field{display:block;margin-bottom:10px}
.field span{font-size:11px;display:block;margin-bottom:4px;font-weight:700}
.field input,.field textarea{width:100%;background:#fff;border:3px solid var(--ink);border-radius:12px;padding:9px 12px;font-size:13px;font-family:'Kanit'}
input[type="datetime-local"],input[type="number"]{border:3px solid var(--ink)!important;border-radius:12px!important}
.seg{display:flex;gap:8px}
.seg-btn{flex:1;padding:8px;border-radius:12px;border:3px solid var(--ink);background:#fff;font-weight:700;cursor:pointer;box-shadow:0 4px 0 var(--ink)}
.seg-btn:active{transform:translateY(3px);box-shadow:none}
.seg-btn.active.yes{background:var(--mint)} .seg-btn.active.no{background:#ffd9d9}
.w-full{width:100%;justify-content:center}
.table-wrap{overflow:auto;padding:14px}
.history-table{width:100%;border-collapse:collapse;font-size:12px}
.history-table th{background:var(--yellow);padding:8px 10px;text-align:left;border:2px solid var(--ink)}
.history-table td{padding:8px 10px;border-bottom:2px dashed rgba(58,46,57,.2)}
.error-box{margin:14px;background:#ffd9d9;border:3px solid var(--ink);border-radius:14px;padding:14px;display:flex;gap:10px;color:#991b1b;box-shadow:4px 4px 0 var(--ink)}
.hidden{display:none!important}
.foot{text-align:center;padding:18px;color:#8a7a88;font-size:11px}

/* Shared with Flask templates (dashboard / deposit pages) */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.grid2{grid-template-columns:1fr}}
.bank-card{border:3px solid var(--ink);border-radius:16px;padding:12px;cursor:pointer;transition:.15s;background:#fff;box-shadow:4px 4px 0 var(--ink)}
.bank-card.selected{border-color:var(--ink);background:var(--mint);transform:rotate(-.3deg)}
.wallet{font-size:24px;font-weight:800}