/* Billing Desk Online: login, MPIN, shop details, plan and admin pages (matches the Figma design) */
:root{--blue:#1d4ed8;--blue-dk:#1e40af;--ink:#0f172a;--text:#334155;--muted:#64748b;--line:#e5e7eb;--field:#cbd5e1;--bg:#f5f7fb}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);font-size:16px;line-height:1.5;background:#fff}
body.appbg{background:var(--bg)}
a{color:var(--blue)}
h1{font-size:30px;line-height:1.25;margin:0 0 8px;letter-spacing:-.5px}
h2{font-size:18px;margin:0 0 6px}
p{margin:0 0 12px}
.muted{color:var(--muted)}

/* logo */
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:var(--ink)}
.mark{width:36px;height:36px;border-radius:10px;background:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}

/* fields */
label{display:block;font-weight:600;font-size:13px;color:var(--text);margin:20px 0 8px}
input[type=text],input[type=email],input[type=number],input[type=tel],input[type=password],select{width:100%;height:48px;padding:0 14px;border:1px solid var(--field);border-radius:10px;font-size:16px;background:#fff;color:var(--ink);font-family:inherit}
input::placeholder{color:#94a3b8}
input:focus,select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.15)}
input[aria-invalid=true],select[aria-invalid=true]{border-color:#dc2626;background:#fffafa}
.code-input{letter-spacing:.5em;font-size:24px !important;text-align:center;font-weight:600}
.pin-input{width:220px !important;letter-spacing:.9em;font-size:28px !important;text-align:center;padding-left:.9em !important;height:60px !important}
.check{display:flex;align-items:center;gap:10px;font-weight:400;font-size:14px;margin-top:18px}
.check input{width:18px;height:18px;accent-color:var(--blue)}
.field-err{color:#b91c1c;font-size:13px;margin-top:6px}
.field-hint{color:var(--muted);font-size:13px;margin-top:6px;min-height:18px}
.field-hint.bad{color:#b91c1c}.field-hint.good{color:#15803d}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;margin-top:22px;padding:0 24px;min-height:50px;border:0;border-radius:10px;background:var(--blue);color:#fff;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--blue-dk)}
.btn.wide{width:100%}
.btn.ghost,.btn.light{background:#fff;color:var(--blue);border:1px solid #c7d2fe}
.btn.ghost:hover,.btn.light:hover{background:#eef2ff}
.btn.ghost.wide{margin-top:12px}
.btn.red{background:#fff;color:#b91c1c;border:1px solid #fecaca}
.btn.red:hover{background:#fef2f2}
.btn.green{background:#16a34a}.btn.green:hover{background:#15803d}
.btn.small{margin:0;padding:0 14px;font-size:13px;min-height:36px;border-radius:8px}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--blue);font-weight:600;cursor:pointer}
.linkbtn:hover{text-decoration:underline}

/* messages */
.msg{padding:12px 14px;border-radius:10px;margin:16px 0;font-size:14px;line-height:1.5}
.msg.err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.msg.ok{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.msg.info{background:#eff6ff;color:#1e3a8a;border:1px solid #bfdbfe}

/* ---------- split-screen login ---------- */
body.auth{display:flex;min-height:100vh}
.auth-form{width:560px;flex:none;padding:48px 80px;display:flex;flex-direction:column;min-height:100vh}
.auth-box{margin:auto 0;padding:40px 0;width:100%;max-width:400px}
.auth-box h1{font-size:32px}
.sub{color:var(--muted);font-size:15px;line-height:1.55;margin:0 0 6px}
.note{color:var(--muted);font-size:13px;margin-top:16px}
.tabs{display:flex;background:#f1f5f9;border-radius:10px;padding:4px;margin-top:26px}
.tabs a,.tabs button{flex:1;text-align:center;padding:10px 0;font-size:14px;font-weight:600;color:var(--muted);border-radius:8px;text-decoration:none;border:0;background:none;cursor:pointer;font-family:inherit}
.tabs .on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(15,23,42,.12)}
.chip-form{margin:0 0 18px}
.chip{display:inline-flex;align-items:center;gap:8px;background:#f1f5f9;border-radius:99px;padding:5px 12px 5px 5px;font-size:13px;font-weight:500;color:var(--text);margin-bottom:18px}
.chip-form .chip{margin:0}
.chip.ok{background:#f0fdf4;color:#166534}
.av{width:28px;height:28px;border-radius:99px;background:#dbeafe;color:var(--blue);font-weight:700;font-size:12px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.chip.ok .av{background:#bbf7d0;color:#166534}
.auth-foot{font-size:12px;color:#94a3b8}
.auth-banner{flex:1;position:relative;overflow:hidden;color:#fff;padding:72px 80px;background:linear-gradient(140deg,#0b1f4d 0%,#1d4ed8 60%,#3b82f6 100%)}
.glow{position:absolute;border-radius:999px;background:rgba(255,255,255,.07)}
.g1{width:520px;height:520px;right:-160px;top:-180px}.g2{width:300px;height:300px;left:-100px;bottom:-120px}
.eyebrow{position:relative;font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#bfdbfe}
.bh{position:relative;font-size:44px;line-height:1.22;font-weight:700;letter-spacing:-1px;margin-top:14px;max-width:640px}
.bp{position:relative;font-size:17px;line-height:1.6;color:#dbeafe;margin-top:16px;max-width:560px}
.feats{position:relative;display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.feats span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:11px 16px;font-size:14px;font-weight:500}
.mini{position:absolute;left:80px;bottom:80px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:16px 18px;width:250px;font-size:13px;color:#dbeafe}
.mini span{display:block}.mini b{display:block;font-size:26px;color:#fff;margin:2px 0}
.inv{position:absolute;right:70px;bottom:70px;width:440px;background:#fff;border-radius:16px;color:var(--ink);padding:24px;box-shadow:0 30px 60px rgba(2,6,23,.35)}
.inv-h{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.inv-s{font-size:12px;color:var(--muted);margin:4px 0 10px}
.inv .r{display:flex;justify-content:space-between;font-size:13px;padding:8px 0;border-bottom:1px solid #f1f5f9}
.inv .t{display:flex;justify-content:space-between;font-size:16px;font-weight:700;padding-top:12px}
.tag{background:#dcfce7;color:#166534;font-size:12px;font-weight:600;border-radius:99px;padding:3px 10px}
@media (max-width:1180px){.inv{display:none}.mini{left:auto;right:60px}}
@media (max-width:900px){
  body.auth{flex-direction:column-reverse;justify-content:flex-end}
  .auth-form{width:100%;min-height:0;padding:24px 20px 32px}
  .auth-head{display:none}
  .auth-box{padding:0;max-width:none}
  .auth-banner{flex:none;padding:36px 20px 26px}
  .auth-banner .bp,.auth-banner .feats,.mini,.inv{display:none}
  .eyebrow{display:none}
  .bh{font-size:24px;margin:0}
  .auth-banner::before{content:"Billing Desk Online";display:block;font-weight:700;font-size:18px;margin-bottom:14px;position:relative}
  .auth-box h1{font-size:26px}
}

/* ---------- app pages ---------- */
.top{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;padding:12px 32px;min-height:64px;background:#fff;border-bottom:1px solid var(--line)}
.brand{text-decoration:none}
.top nav{display:flex;flex-wrap:wrap;gap:4px}
.top nav a{color:#475569;text-decoration:none;font-size:14px;font-weight:500;padding:8px 14px;border-radius:8px}
.top nav a:hover{background:#f1f5f9}
.top nav a.on{background:#eff6ff;color:var(--blue);font-weight:600}
.acct{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:14px}
.acct > a:last-child{color:#475569;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:32px 24px 60px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;margin-bottom:24px}
.narrow{max-width:440px;margin:40px auto}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.cols{display:grid;grid-template-columns:400px minmax(0,1fr);gap:24px;align-items:start}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-bottom:24px}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.stat span{font-size:13px;color:var(--muted)}.stat b{display:block;font-size:26px;margin-top:4px}
@media (max-width:900px){.cols{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.top{padding:12px 16px}.acct{margin-left:0}}
@media (max-width:600px){.row{grid-template-columns:1fr}.card{padding:20px}.wrap{padding:20px 16px 48px}}

/* plan + pay */
.planbox{border:2px solid var(--blue);border-radius:14px;padding:22px;background:#f8faff}
.planbox .kicker{font-size:13px;font-weight:700;color:var(--blue);letter-spacing:.5px}
.price{font-size:40px;font-weight:800;letter-spacing:-1px;line-height:1.1;margin-top:6px}
.price small{font-size:15px;font-weight:400;color:var(--muted);letter-spacing:0}
.ticks{list-style:none;padding:0;margin:14px 0 0}
.ticks li{font-size:14px;color:var(--text);margin-top:8px;padding-left:24px;position:relative}
.ticks li::before{content:"✓";position:absolute;left:0;color:#16a34a;font-weight:700}
.pay{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;margin-top:18px}
.qr{background:#fff;padding:14px;border:1px solid var(--line);border-radius:14px;width:220px;height:220px;flex:none}
.qr img,.qr svg{width:100%;height:100%}
.big{font-size:28px;font-weight:700}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}

/* tables */
.tablewrap{overflow-x:auto;margin:0 -28px -28px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:13px 14px;border-top:1px solid #f1f5f9;text-align:left;white-space:nowrap;vertical-align:middle}
th:first-child,td:first-child{padding-left:28px}
th{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);background:#f8fafc;font-weight:600}
td small{display:block;color:var(--muted);font-size:13px}
.pill{display:inline-block;padding:4px 12px;border-radius:99px;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}
.pill.trial{background:#eff6ff;color:#1e40af}.pill.active{background:#f0fdf4;color:#166534}.pill.expired{background:#fef2f2;color:#991b1b}.pill.pending{background:#fff7ed;color:#9a3412}
.inline{display:inline-flex;gap:6px;align-items:center;margin:0}
.inline input{width:90px;height:36px;padding:0 10px;font-size:14px}

/* separate digit boxes (email code, MPIN) */
.digits{display:flex;gap:10px}
.digits input{width:52px !important;height:58px !important;padding:0 !important;text-align:center;font-size:24px !important;font-weight:600;border-radius:10px;caret-color:#2563eb}
.digits.secret input{width:58px !important;height:62px !important;font-size:30px !important}
.digits.bad input{border-color:#dc2626;background:#fffafa}
.digits.bad input:focus{box-shadow:0 0 0 4px rgba(220,38,38,.12)}
.digits + .field-err{margin-top:8px}
.linkbtn:disabled{color:var(--muted);font-weight:500;cursor:default;text-decoration:none}
@media (max-width:400px){.digits{gap:7px}.digits input{width:44px !important;height:52px !important}}

/* setup steps (first shop details) */
.steps{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:0;margin:0 0 20px;font-size:13px;color:var(--muted)}
.steps li{display:flex;align-items:center;gap:8px}
.steps li + li::before{content:"";width:36px;height:2px;background:#cbd5e1;margin-right:6px}
.steps span{width:24px;height:24px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:#e2e8f0;color:#475569}
.steps .done span,.steps .now span{background:var(--blue);color:#fff}
.steps .now{color:var(--ink);font-weight:700}
/* admin title + tabs */
.title-row{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-bottom:20px}
.title-row h1{margin:0}
.admin-tabs{margin:0;width:420px;max-width:100%}
.acct a{color:#475569;text-decoration:none}
.acct a.pill{color:inherit}
.acct a.pill.trial{color:#1e40af}.acct a.pill.active{color:#166534}.acct a.pill.expired{color:#991b1b}
select{appearance:none;-webkit-appearance:none;font-size:15px;padding-right:38px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center}
input[type=text],input[type=email],input[type=tel]{font-size:15px}