.auth-wrap{min-height:calc(100vh - 76px);display:flex;align-items:center;justify-content:center;padding:30px 20px 70px}
.auth-card{width:100%;max-width:400px;text-align:center}
.auth-card h2{font-size:23px;font-weight:700}
.auth-sub{margin-top:12px;font-size:13.5px;line-height:1.65;color:var(--muted)}
.auth-btns{display:flex;flex-direction:column;gap:11px;margin-top:28px}
.auth-b{width:100%;height:50px}
.g-wrap{position:relative}
.g-wrap .btn{position:relative;z-index:1;pointer-events:none}
.g-hidden{position:absolute;inset:0;z-index:2;opacity:0;overflow:hidden}
.g-hidden>div,.g-hidden iframe{width:100%!important;height:100%!important}
.auth-err{display:none;margin-top:16px;font-size:12.5px;color:#C32B2B}
.auth-note{margin-top:20px;font-size:11px;line-height:1.6;color:var(--muted)}

.cab{max-width:860px;margin:0 auto;padding:28px 20px 80px}
.cab-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.cab-top h1{font-size:25px;font-weight:700}
.card{border:1px solid var(--line);border-radius:var(--r);padding:24px;margin-top:16px;background:#fff}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.card-h h3{font-family:'Unbounded',sans-serif;font-size:16px;font-weight:600}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:999px}
.pill-ok{background:var(--sf-accent-soft);color:#2F6B08}
.pill-no{background:rgba(16,24,16,.06);color:var(--muted)}
.pill-warn{background:rgba(255,176,32,.14);color:#8A5A00}

.sub-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.sub-until{font-family:'Unbounded',sans-serif;font-size:24px;font-weight:700}
.sub-left{font-size:12.5px;color:var(--muted);margin-top:6px}
.key-row{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.key-in{flex:1;min-width:220px;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:#F7F8F7;color:var(--muted);overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center}
.qr-box{display:flex;align-items:center;gap:20px;margin-top:20px;flex-wrap:wrap}
.qr{width:150px;height:150px;flex:none;border:1px solid var(--line);border-radius:14px;padding:9px;background:#fff}
.qr canvas,.qr img{width:100%;height:100%;display:block}
.qr-txt{flex:1;min-width:200px;font-size:13px;line-height:1.7;color:var(--muted)}

.dev-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dev-n{font-family:'Unbounded',sans-serif;font-size:22px;font-weight:700}
.bar{height:7px;border-radius:5px;background:var(--line);overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;background:var(--sf-primary);border-radius:5px;transition:.3s}

.tar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.tar-i{border:1px solid var(--line);border-radius:15px;padding:16px 14px;text-align:center;cursor:pointer;transition:.15s;background:#fff}
.tar-i:hover{border-color:var(--sf-primary)}
.tar-i.on{border-color:var(--sf-primary);border-width:2px;background:var(--sf-primary-soft)}
.tar-n{font-size:12.5px;color:var(--muted);font-weight:600}
.tar-p{font-family:'Unbounded',sans-serif;font-size:19px;font-weight:700;margin-top:7px}
.pay-m{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.pay-b{flex:1;min-width:190px;height:52px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:600;transition:.15s}
.pay-b:hover{border-color:var(--sf-primary)}
.pay-b.on{border-color:var(--sf-primary);border-width:2px;background:var(--sf-primary-soft)}

.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.tab{padding:9px 16px;border:1px solid var(--line);border-radius:11px;background:#fff;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.tab.on{background:var(--sf-primary);color:var(--sf-on-primary);border-color:var(--sf-primary)}
.app-steps{counter-reset:a}
.app-step{position:relative;padding-left:38px;margin-top:16px}
.app-step::before{counter-increment:a;content:counter(a);position:absolute;left:0;top:-1px;width:25px;height:25px;border-radius:8px;background:var(--sf-primary);color:var(--sf-on-primary);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700}
.app-steps,.app-steps *{font-family:'Montserrat',sans-serif}
.app-step b{display:block;font-size:13.5px;font-weight:600}
.app-step p{margin-top:4px;font-size:13px;line-height:1.65;color:var(--muted)}
.app-step a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.app-step a:hover{opacity:.65}
.tab{font-family:'Montserrat',sans-serif}

.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:11px;color:var(--muted);text-align:left;padding:0 10px 10px;font-weight:600}
.tbl td{font-size:12.5px;padding:12px 10px;border-top:1px solid var(--line)}
.tbl-w{overflow-x:auto}
.empty{padding:24px 0;text-align:center;font-size:13px;color:var(--muted)}
.load{padding:50px 0;text-align:center;font-size:13px;color:var(--muted)}
.msg{margin-top:14px;padding:13px 16px;border-radius:12px;font-size:12.5px;line-height:1.6}
.msg-ok{background:var(--sf-accent-soft);color:#2F6B08}
.msg-no{background:rgba(195,43,43,.07);color:#C32B2B}

@media(max-width:620px){
  .cab{padding:20px 16px 60px}
  .cab-top h1{font-size:21px}
  .card{padding:20px 17px}
  .qr{width:132px;height:132px}
  .pay-b{min-width:100%}
}

.off-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px 20px;text-align:center}
.off-card{max-width:400px}
.off-ic{width:52px;height:52px;color:#C6CEC6;margin:0 auto 22px}
.off-card h1{font-size:21px;font-weight:700}
.off-card p{margin-top:13px;font-size:13.5px;line-height:1.7;color:var(--muted)}
.off-card .btn{margin-top:26px}

.tg-slot{display:flex;justify-content:center;min-height:50px}
.tg-slot iframe{margin:0!important}

.pay-card{max-width:440px;margin:40px auto 0;text-align:center;padding:34px 28px 30px}
.pay-title{font-family:'Unbounded',sans-serif;font-size:27px;font-weight:700}
.pay-sub{margin-top:8px;font-size:13.5px;color:var(--muted)}
.pay-go{width:100%;margin-top:24px;height:52px}
.pay-note{margin-top:14px;font-size:12px;line-height:1.6;color:var(--muted)}
.pay-acts{display:flex;gap:10px;margin-top:22px}
.pay-acts .btn{flex:1}
.pay-wait{margin-top:20px;font-size:12px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:8px}
.spin-s{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sps .6s linear infinite}
@keyframes sps{to{transform:rotate(360deg)}}

.pend{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:15px 18px;border-radius:16px;background:rgba(255,176,32,.09);border:1px solid rgba(255,176,32,.3);margin-bottom:4px}
.pend-t{font-size:13px;line-height:1.5;color:#8A5A00}
.pend-t b{color:#704800}
.pend-a{display:flex;gap:9px}
@media(max-width:520px){.pend-a{width:100%}.pend-a .btn{flex:1}}

.auth-note a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.auth-note a:hover{opacity:.65}