* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #000; color: #fff; min-height: 100vh; }

/* ── LOGIN ── */
.login-container { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.login-card { background: #111; border: 1px solid #222; border-radius: 16px; padding: 48px 40px; width: 100%; max-width: 400px; }
.logo { text-align: center; margin-bottom: 32px; }
.logo-icon { width: 56px; height: 56px; background: #fff; color: #000; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; margin-bottom: 12px; }
.logo h1 { font-size: 28px; font-weight: 700; }
.tagline { color: #555; font-size: 14px; margin-top: 4px; }
.msg { font-size: 13px; margin-top: 14px; text-align: center; min-height: 18px; }
.msg.error { color: #ff4444; }
.msg.success { color: #00cc66; }
.signup-text { text-align: center; color: #555; font-size: 13px; margin-top: 14px; }
.signup-text a { color: #fff; text-decoration: none; font-weight: 600; }

/* ── FORMS ── */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: #777; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.form-group input, .form-group select { width: 100%; padding: 11px 14px; background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 9px; color: #fff; font-size: 15px; outline: none; transition: border-color 0.2s; }
.form-group input:focus, .form-group select:focus { border-color: #555; }
.form-group input::placeholder { color: #444; }
.form-group select option { background: #111; color: #fff; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.15s; width: 100%; }
.btn-primary { background: #fff; color: #000; }
.btn-primary:hover { background: #e8e8e8; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: #1a1a1a; color: #fff; border: 1px solid #2a2a2a; }
.btn-secondary:hover { background: #242424; }
.btn-sm { padding: 7px 14px; font-size: 13px; width: auto; border-radius: 8px; }
.btn-ghost { background: none; color: #666; border: none; font-size: 13px; cursor: pointer; padding: 6px 10px; border-radius: 7px; }
.btn-ghost:hover { color: #fff; background: #1a1a1a; }

/* ── NAVBAR ── */
.navbar { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 54px; border-bottom: 1px solid #1a1a1a; background: #000; position: sticky; top: 0; z-index: 100; }
.nav-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; text-decoration: none; color: #fff; cursor: pointer; }
.logo-icon-sm { width: 30px; height: 30px; background: #fff; color: #000; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; flex-shrink: 0; }
.nav-tabs { display: flex; gap: 2px; }
.nav-tab { padding: 6px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #555; cursor: pointer; border: none; background: none; transition: all 0.15s; }
.nav-tab:hover { color: #fff; background: #1a1a1a; }
.nav-tab.active { color: #fff; background: #1a1a1a; }
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-user { font-size: 13px; color: #444; }
.logout-btn { font-size: 13px; color: #444; cursor: pointer; padding: 5px 10px; border-radius: 7px; border: none; background: none; }
.logout-btn:hover { color: #fff; background: #1a1a1a; }

/* ── MAIN ── */
.main { max-width: 780px; margin: 0 auto; padding: 40px 24px 80px; }
.page-header { margin-bottom: 32px; }
.page-title { font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.page-subtitle { color: #444; font-size: 14px; }

/* ── TYPE CARDS ── */
.link-types { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 28px; }
.type-card { background: #111; border: 2px solid #1e1e1e; border-radius: 14px; padding: 22px 16px; cursor: pointer; text-align: center; transition: all 0.2s; }
.type-card:hover { border-color: #444; }
.type-card.active { border-color: #fff; background: #161616; }
.type-icon { font-size: 30px; margin-bottom: 10px; }
.type-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.type-card p { font-size: 12px; color: #555; line-height: 1.45; }

/* ── FORM CARD ── */
.form-card { background: #111; border: 1px solid #1e1e1e; border-radius: 14px; padding: 28px; margin-bottom: 16px; }
.form-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 5px; }
.form-card .desc { color: #555; font-size: 13px; margin-bottom: 22px; line-height: 1.5; }
.section-label { font-size: 11px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.8px; margin: 20px 0 12px; border-top: 1px solid #1a1a1a; padding-top: 18px; }

/* ── FEE BOX ── */
.fee-box { background: #0a0a0a; border: 1px solid #1e1e1e; border-radius: 10px; padding: 14px 16px; margin: 14px 0; }
.fee-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 14px; color: #666; }
.fee-row.total { border-top: 1px solid #222; margin-top: 8px; padding-top: 10px; color: #fff; font-weight: 700; font-size: 15px; }

/* ── RESULT ── */
.result-card { background: #111; border: 1px solid #1e1e1e; border-radius: 14px; padding: 28px; text-align: center; margin-bottom: 16px; }
.result-card h3 { color: #00cc66; font-size: 20px; margin-bottom: 18px; }
.link-row { display: flex; gap: 8px; margin-bottom: 14px; align-items: center; }
.link-row input { flex: 1; padding: 10px 14px; background: #0a0a0a; border: 1px solid #2a2a2a; border-radius: 8px; color: #fff; font-size: 12px; font-family: monospace; min-width: 0; }
.result-note { font-size: 12px; color: #555; line-height: 1.5; }

/* ── HISTORY ── */
.history-empty { color: #444; text-align: center; padding: 60px 0; font-size: 14px; }
.history-item { background: #111; border: 1px solid #1e1e1e; border-radius: 14px; padding: 20px; margin-bottom: 12px; }
.history-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.history-amount { font-size: 22px; font-weight: 700; margin-bottom: 2px; }
.history-meta { font-size: 12px; color: #555; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.badge-standard { background: #1e1e1e; color: #aaa; border: 1px solid #333; }
.badge-gifting { background: #1a1500; color: #ffcc00; border: 1px solid #332d00; }
.badge-sending { background: #001515; color: #00cccc; border: 1px solid #003333; }
.badge-failed { background: #1a0000; color: #ff4444; border: 1px solid #330000; }
.history-link-row { display: flex; gap: 8px; margin: 12px 0; align-items: center; }
.history-link-row input { flex: 1; padding: 8px 12px; background: #0a0a0a; border: 1px solid #222; border-radius: 7px; color: #666; font-size: 11px; font-family: monospace; min-width: 0; }
.toggle-attempts { font-size: 12px; color: #444; cursor: pointer; border: none; background: none; padding: 4px 0; margin-top: 6px; display: block; }
.toggle-attempts:hover { color: #fff; }

/* ── ATTEMPTS TABLE ── */
.attempts-section { margin-top: 14px; border-top: 1px solid #1a1a1a; padding-top: 14px; }
.attempts-title { font-size: 11px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px; }
.attempt-card { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 10px; padding: 14px 16px; margin-bottom: 8px; }
.attempt-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.attempt-status { font-size: 11px; font-weight: 700; color: #ff4444; background: #1a0000; border: 1px solid #330000; padding: 2px 8px; border-radius: 10px; }
.attempt-time { font-size: 11px; color: #444; }
.attempt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.attempt-field { }
.attempt-field-label { font-size: 10px; color: #555; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.attempt-field-value { font-size: 13px; color: #ddd; font-family: monospace; }
.attempt-field.full { grid-column: 1 / -1; }
.card-display { display: inline-flex; align-items: center; gap: 8px; background: #111; border: 1px solid #2a2a2a; border-radius: 8px; padding: 8px 12px; font-family: monospace; font-size: 14px; letter-spacing: 1px; margin-top: 4px; }
.card-chip { width: 18px; height: 14px; background: linear-gradient(135deg, #d4af37, #f5d78e); border-radius: 3px; flex-shrink: 0; }

/* ── PAY PAGE ── */
.pay-page { min-height: 100vh; background: #000; padding: 32px 20px 60px; }
.pay-header { text-align: center; margin-bottom: 28px; }
.pay-logo { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; text-decoration: none; color: #fff; }
.pay-card { background: #111; border: 1px solid #1e1e1e; border-radius: 16px; padding: 30px; width: 100%; max-width: 500px; margin: 0 auto; }
.pay-badge { margin-bottom: 14px; }
.pay-amount-big { font-size: 38px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.pay-desc { color: #555; font-size: 14px; margin-bottom: 20px; }
.pay-section { font-size: 11px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.8px; margin: 22px 0 12px; }

/* ── GIFT ANIMATION ── */
.gift-anim { display: flex; justify-content: center; gap: 12px; padding: 14px 0 22px; }
.dancer { font-size: 28px; display: inline-block; animation: dance 1.2s ease-in-out infinite; }
.d1{animation-delay:0s} .d2{animation-delay:.15s} .d3{animation-delay:.3s} .d4{animation-delay:.45s} .d5{animation-delay:.6s}
@keyframes dance { 0%,100%{transform:translateY(0) rotate(0) scale(1)} 30%{transform:translateY(-16px) rotate(-12deg) scale(1.1)} 60%{transform:translateY(-8px) rotate(10deg) scale(1.05)} }

/* ── PAYMENT RESULT ── */
.pay-result-wrap { text-align: center; padding: 40px 16px; }
.result-icon-circle { width: 68px; height: 68px; border-radius: 50%; background: #1a0000; border: 2px solid #330000; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 20px; }
.result-title-fail { font-size: 22px; font-weight: 700; color: #ff4444; margin-bottom: 8px; }
.result-body { color: #555; font-size: 14px; line-height: 1.65; margin-bottom: 24px; }

/* ── SPINNER ── */
.spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(0,0,0,0.25); border-top-color: #000; border-radius: 50%; animation: spin .65s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none !important; }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .link-types { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .login-card { padding: 32px 22px; }
  .pay-card { padding: 22px 16px; }
  .form-card { padding: 22px 16px; }
  .main { padding: 24px 14px 60px; }
  .attempt-grid { grid-template-columns: 1fr; }
}