:root{--p:#FF6B4A;--bg:#F9FAFB;--card:#FFF;--text:#111827;--muted:#6B7280;--border:#E5E7EB;--ok:#10B981;--warn:#F59E0B;--err:#EF4444}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh}
.container{max-width:480px;margin:0 auto;padding:16px;min-height:100vh;display:flex;flex-direction:column}
.header{display:flex;justify-content:space-between;align-items:center;padding:12px 0 20px;border-bottom:1px solid var(--border)}
.logo{font-weight:700;color:var(--p);font-size:18px}
.back-link{color:var(--muted);text-decoration:none;font-size:14px}
.title{font-size:26px;font-weight:700;text-align:center;margin:16px 0 4px}
.subtitle{color:var(--muted);text-align:center;font-size:15px;margin-bottom:24px}
.toggle{display:flex;background:var(--card);border-radius:12px;padding:4px;border:1px solid var(--border);margin-bottom:20px}
.toggle-btn{flex:1;padding:10px 8px;border:none;background:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;transition:.2s}
.toggle-btn.active{background:var(--p);color:#FFF}
.badge{background:rgba(16,185,129,.15);color:var(--ok);padding:1px 6px;border-radius:6px;font-size:11px}
.card{background:var(--card);border-radius:16px;padding:20px;border:1px solid var(--border);box-shadow:0 4px 6px -1px rgba(0,0,0,.05)}
.price{text-align:center;font-size:40px;font-weight:700;color:var(--p);margin:8px 0}
.price span{font-size:28px}
#period{font-size:16px;color:var(--muted);font-weight:500}
.savings{background:linear-gradient(135deg,#FEF3C7,#FDE68A);color:#92400E;padding:8px;border-radius:8px;text-align:center;font-size:14px;margin-bottom:16px;font-weight:500}
.hidden{display:none!important}
.features{list-style:none;margin-bottom:20px}
.features li{padding:6px 0;font-size:15px}
.methods{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.btn{width:100%;padding:14px;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:.2s}
.btn-primary{background:var(--p);color:#FFF}
.btn-dark{background:#1F2937;color:#FFF}
.note{font-size:13px;color:var(--muted);text-align:center;margin-bottom:16px}
.link-btn{background:none;border:none;color:var(--p);cursor:pointer;font-size:14px;text-decoration:underline}
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:100}
.modal-box{background:var(--card);padding:20px;border-radius:16px;width:90%;max-width:400px;text-align:center}
.modal-lg{max-width:480px}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.modal-head button{background:none;border:none;font-size:22px;cursor:pointer}
.scroll{max-height:300px;overflow-y:auto}
.h-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.h-info{flex:1}
.h-type{font-weight:500;font-size:14px}
.h-date{font-size:12px;color:var(--muted)}
.h-amount{font-weight:600}
.h-status{font-size:11px;padding:2px 6px;border-radius:6px;margin-left:4px}
.h-status.succeeded{background:rgba(16,185,129,.15);color:var(--ok)}
.h-status.pending{background:rgba(245,158,11,.15);color:var(--warn)}
.spin{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--p);border-radius:50%;animation:s 1s linear infinite;margin:0 auto 10px}
@keyframes s{to{transform:rotate(360deg)}}
@media(min-width:600px){.container{padding:32px}.card{max-width:420px;margin:0 auto}}

.btn-auth {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: .2s;
}
.btn-auth:hover {
  background: var(--p);
  color: #fff;
  border-color: var(--p);
}