/* ============================================================
   PrimePay — shared Ink & Mint page theme
   Every page wraps its markup in .pp-page.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,400..800&family=Geist:wght@400..700&family=Geist+Mono:wght@400..600&display=swap');

html,body{overflow-x:hidden;height:auto;min-height:100%;}
body{margin:0;padding:0;background:#FFFFFF;}

.pp-page{
  --bg:#FFFFFF; --panel:#F4F5F7; --panel-2:#EDEFF2; --surface:#FFFFFF;
  --ink:#0B0D10; --muted:#8A9099; --line:#EAECEF;
  --mint:#17A67F; --mint-soft:#E3F5EF;
  --lav:#EDEBFB; --lav-ink:#4B44A8;
  --amber:#C77E12; --amber-soft:#FDF2DF;
  --red:#E0335A; --red-soft:#FFF1F4;

  width:100%;max-width:440px;margin:0 auto;position:relative;
  background:var(--bg);color:var(--ink);
  font-family:'Geist','Manrope',system-ui,sans-serif;line-height:1.5;
  padding:0 0 calc(110px + env(safe-area-inset-bottom,0px));
  overflow-x:hidden;min-height:100vh;
}
.pp-page,.pp-page *{box-sizing:border-box;}
.pp-page .pp-mono{font-family:'Geist Mono',monospace;}

/* header */
.pp-page .pp-top{display:flex;align-items:center;gap:12px;
  padding:calc(16px + env(safe-area-inset-top,0px)) 20px 0;}
.pp-page .pp-back{width:38px;height:38px;flex:none;border:none;border-radius:13px;cursor:pointer;
  background:var(--panel);color:var(--ink);font-size:16px;
  display:flex;align-items:center;justify-content:center;text-decoration:none;}
.pp-page .pp-top h1{flex:1;margin:0;font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;font-size:24px;letter-spacing:-.04em;}
.pp-page .pp-top .pp-side{flex:none;font-size:12.5px;font-weight:700;color:var(--mint);text-decoration:none;}

/* intro */
.pp-page .pp-intro{padding:18px 20px 0;}
.pp-page .pp-intro h2{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:21px;letter-spacing:-.04em;}
.pp-page .pp-intro p{margin:10px 0 0;font-size:13.5px;color:var(--muted);line-height:1.7;}

/* labels + cards */
.pp-page .pp-sec{margin:24px 20px 0;font-family:'Geist Mono',monospace;font-size:9.5px;
  font-weight:500;letter-spacing:.2em;color:var(--muted);}
.pp-page .pp-card{margin:14px 20px 0;padding:18px;border-radius:22px;
  background:var(--surface);border:1px solid var(--line);}
.pp-page .pp-dark{margin:20px 20px 0;padding:20px;border-radius:22px;background:var(--ink);color:#fff;}
.pp-page .pp-dark em{font-style:normal;font-family:'Geist Mono',monospace;font-size:9px;
  letter-spacing:.18em;opacity:.65;}
.pp-page .pp-dark b{display:block;margin-top:8px;font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;font-size:28px;letter-spacing:-.05em;word-break:break-all;}

/* fields */
.pp-page .pp-f{margin:14px 20px 0;}
.pp-page .pp-f label{display:block;margin-bottom:8px;font-family:'Geist Mono',monospace;
  font-size:9px;letter-spacing:.18em;color:var(--muted);}
.pp-page .pp-in{display:flex;align-items:center;gap:11px;height:58px;padding:0 16px;border-radius:16px;
  background:var(--surface);border:1.5px solid var(--line);transition:.18s;}
.pp-page .pp-in:focus-within{border-color:var(--ink);}
.pp-page .pp-in.bad{border-color:var(--red);}
.pp-page .pp-in .pp-pre{flex:none;font-family:'Geist Mono',monospace;font-size:14px;font-weight:600;color:var(--muted);}
.pp-page .pp-in input{flex:1;min-width:0;width:auto;height:auto;margin:0;padding:0;border:none;outline:none;
  background:none;color:var(--ink) !important;-webkit-text-fill-color:var(--ink);
  font-family:'Geist',sans-serif;font-size:15.5px;font-weight:600;}
.pp-page .pp-in input::placeholder{color:#C3C8CF;-webkit-text-fill-color:#C3C8CF;font-weight:500;}
.pp-page .pp-in input:disabled{color:var(--muted) !important;-webkit-text-fill-color:var(--muted);}
.pp-page .pp-peek{flex:none;border:none;background:none;cursor:pointer;padding:4px;color:var(--muted);font-size:15px;}
.pp-page .pp-hint{margin:7px 2px 0;font-size:11.5px;color:var(--muted);}
.pp-page .pp-hint.err{color:var(--red);}
.pp-page .pp-hint.good{color:var(--mint);}

/* rows */
.pp-page .pp-list{margin:12px 20px 0;}
.pp-page .pp-rl{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;}
.pp-page .pp-rl:last-child{border-bottom:none;}
.pp-page .pp-rl > i{width:42px;height:42px;flex:none;border-radius:14px;background:var(--panel);color:var(--ink);
  font-style:normal;font-size:17px;display:flex;align-items:center;justify-content:center;}
.pp-page .pp-rl .pp-tx{flex:1;min-width:0;}
.pp-page .pp-rl b{display:block;font-size:14.5px;font-weight:700;}
.pp-page .pp-rl span{display:block;margin-top:3px;font-size:12px;color:var(--muted);}
.pp-page .pp-rl .pp-ar{flex:none;color:var(--muted);font-size:15px;}
.pp-page .pp-rl .pp-tag{flex:none;font-family:'Geist Mono',monospace;font-size:9px;letter-spacing:.12em;
  padding:5px 9px;border-radius:99px;background:var(--panel);color:var(--muted);}
.pp-page .pp-rl .pp-tag.on{background:var(--mint-soft);color:var(--mint);}

/* notes */
.pp-page .pp-note{display:flex;align-items:flex-start;gap:13px;margin:20px 20px 0;padding:16px;
  border-radius:20px;background:var(--lav);color:var(--lav-ink);}
.pp-page .pp-note.warn{background:var(--amber-soft);color:var(--amber);}
.pp-page .pp-note.danger{background:var(--red-soft);color:var(--red);}
.pp-page .pp-note i{font-style:normal;font-size:17px;}
.pp-page .pp-note div{flex:1;min-width:0;}
.pp-page .pp-note b{display:block;font-size:13.5px;font-weight:700;}
.pp-page .pp-note span{display:block;margin-top:5px;font-size:12px;line-height:1.6;opacity:.85;}

/* buttons */
.pp-page .pp-go{display:flex;align-items:center;justify-content:center;gap:9px;
  width:calc(100% - 40px);margin:22px 20px 0;height:56px;border:none;border-radius:18px;cursor:pointer;
  background:var(--ink);color:#fff;text-decoration:none;
  font-family:'Geist',sans-serif;font-size:15px;font-weight:700;transition:transform .14s;}
.pp-page .pp-go:active{transform:scale(.985);}
.pp-page .pp-go:disabled{opacity:.4;cursor:not-allowed;}
.pp-page .pp-go.ghost{background:var(--panel);color:var(--ink);}
.pp-page .pp-go.danger{background:var(--red-soft);color:var(--red);}

/* doc text */
.pp-page .pp-doc{padding:0 20px;}
.pp-page .pp-doc .pp-eyebrow{font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:.22em;color:var(--mint);}
.pp-page .pp-doc h1{margin:13px 0 0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:29px;line-height:1.15;letter-spacing:-.045em;}
.pp-page .pp-doc h1 em{font-style:normal;color:var(--mint);}
.pp-page .pp-doc .pp-lead{margin:16px 0 0;font-size:15px;font-weight:500;line-height:1.75;}
.pp-page .pp-doc h2{margin:30px 0 0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:18px;letter-spacing:-.035em;}
.pp-page .pp-doc p{margin:11px 0 0;font-size:14px;font-weight:500;line-height:1.8;color:#4E5A6B;}
.pp-page .pp-doc p b{color:var(--ink);font-weight:700;}
.pp-page .pp-doc a{color:var(--mint);font-weight:700;text-decoration:none;}
.pp-page .pp-rule{height:1px;margin:28px 0 0;background:var(--line);}
.pp-page .pp-foot{margin:30px 0 0;padding-top:18px;border-top:1px solid var(--line);text-align:center;
  font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:.14em;color:var(--muted);}

/* otp / pin boxes */
.pp-page .pp-pinlbl{margin:22px 20px 10px;font-family:'Geist Mono',monospace;font-size:9px;
  letter-spacing:.18em;color:var(--muted);}
.pp-page .otp-input{flex:1;min-width:0;width:auto;height:58px;padding:0;text-align:center;outline:none;
  font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;
  color:var(--ink) !important;-webkit-text-fill-color:var(--ink);
  background:#EEF2F7 !important;border:1.5px solid #D7DEE8 !important;border-radius:15px;
  -webkit-text-security:disc;text-security:disc;transition:.16s;}
.pp-page .otp-input::placeholder{color:#B9C2CF !important;-webkit-text-fill-color:#B9C2CF;font-weight:700;opacity:1;}
.pp-page .otp-input:focus{background:#fff !important;border-color:var(--ink) !important;}
.pp-page .otp-input:not(:placeholder-shown){background:var(--mint-soft) !important;
  border-color:rgba(23,166,127,.45) !important;}
/* hide the otp-view component's own heading */
.pp-page .pp-pinbox h1,.pp-page .pp-pinbox h2,.pp-page .pp-pinbox h3,
.pp-page .pp-pinbox h4,.pp-page .pp-pinbox h5,
.pp-page .pp-pinbox .otp-title,.pp-page .pp-pinbox .otp-sub,.pp-page .pp-pinbox p{display:none !important;}
.pp-page .pp-pinbox{margin:0 20px;}
.pp-page .pp-pinbox div:has(> .otp-input){display:flex !important;gap:9px;justify-content:space-between;
  align-items:center;padding:0 !important;margin:0 !important;background:none !important;border:none !important;}
.pp-page .pp-pinbox .otp-box,.pp-page .pp-pinbox .otp-inputs{display:flex;gap:9px;justify-content:space-between;}

/* qr */
.pp-page .pp-qrwrap{padding:22px 20px 0;text-align:center;}
.pp-page .pp-qr{width:216px;height:216px;margin:0 auto;padding:10px;border-radius:18px;
  background:#fff;border:1px solid var(--line);}
.pp-page .pp-qr img{width:100%;height:100%;object-fit:contain;display:block;}
.pp-page .pp-cap{margin:14px 20px 0;text-align:center;font-size:12.5px;color:var(--muted);}

/* copy box */
.pp-page .pp-copy{display:flex;align-items:center;gap:12px;margin:16px 20px 0;padding:14px 16px;
  border-radius:18px;background:var(--surface);border:1px solid var(--line);}
.pp-page .pp-copy .pp-tx{flex:1;min-width:0;}
.pp-page .pp-copy span{display:block;font-family:'Geist Mono',monospace;font-size:9px;
  letter-spacing:.16em;color:var(--muted);}
.pp-page .pp-copy b{display:block;margin-top:6px;font-family:'Geist Mono',monospace;font-size:13px;
  font-weight:600;word-break:break-all;}
.pp-page .pp-copy button{width:46px;height:46px;flex:none;border:none;border-radius:15px;cursor:pointer;
  background:var(--panel);color:var(--ink);font-size:16px;display:flex;align-items:center;justify-content:center;}

/* timer */
.pp-page .pp-timer{display:flex;align-items:center;gap:12px;margin:18px 20px 0;padding:15px 16px;
  border-radius:18px;background:var(--panel);}
.pp-page .pp-timer .pp-tx{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--muted);}
.pp-page .pp-timer b{font-family:'Geist Mono',monospace;font-size:17px;font-weight:600;color:var(--ink);}
.pp-page .pp-bar{height:5px;margin:12px 20px 0;border-radius:99px;background:var(--panel-2);overflow:hidden;}
.pp-page .pp-bar i{display:block;height:100%;width:100%;border-radius:99px;background:var(--ink);transition:width 1s linear;}

/* empty */
.pp-page .pp-none{margin:26px 20px 0;padding:34px 20px;border-radius:24px;background:var(--panel);text-align:center;}
.pp-page .pp-none i{display:block;font-style:normal;font-size:32px;}
.pp-page .pp-none b{display:block;margin-top:13px;font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;font-size:18px;letter-spacing:-.035em;}
.pp-page .pp-none span{display:block;margin-top:8px;font-size:12.5px;color:var(--muted);line-height:1.65;}