/* PitchKing — eFootball themed frontend
   Dark blue + electric cyan + gold accents, angular geometry,
   inspired by the eFootball 2024 UI language. */

:root{
  --bg-0:#050914;
  --bg-1:#0a1428;
  --bg-2:#111f3f;
  --line:#1e3163;
  --ink:#e6f0ff;
  --ink-soft:#a9b8d6;
  --muted:#6d7c9c;
  --cyan:#00e5ff;
  --cyan-dark:#0091a8;
  --gold:#ffd400;
  --red:#ff3b5c;
  --green:#00ff88;
  --radius:6px;
  --radius-lg:10px;
  --shadow-glow:0 0 24px rgba(0,229,255,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Rajdhani","Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(0,229,255,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(255,212,0,.06), transparent 60%),
    linear-gradient(180deg,#050914 0%, #0a1428 50%, #050914 100%);
  color:var(--ink);
  min-height:100vh;
  line-height:1.5;
  letter-spacing:.3px;
}
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Orbitron:wght@700;900&display=swap');
h1,h2,h3,.brand,.badge,.card-title,.hero h1,.section-title{font-family:"Orbitron","Rajdhani",sans-serif;letter-spacing:1px}

a{color:inherit;text-decoration:none}

/* ============ HEADER ============ */
.header{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(90deg, rgba(5,9,20,.95), rgba(10,20,40,.9));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-size:22px; font-weight:900; color:#fff;
  text-transform:uppercase;
}
.brand::before{
  content:"⚽"; font-size:22px;
  filter:drop-shadow(0 0 6px var(--cyan));
}
.brand .accent{color:var(--cyan); text-shadow:0 0 8px rgba(0,229,255,.6)}

.nav{display:flex; gap:6px; flex-wrap:wrap}
.nav a{
  color:var(--ink-soft);
  padding:8px 16px;
  border:1px solid transparent;
  font-weight:700; font-size:13px;
  text-transform:uppercase;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  transition:all .2s ease;
}
.nav a.active{
  color:#001018;
  background:linear-gradient(90deg,var(--cyan), #7cf9ff);
  box-shadow:var(--shadow-glow);
}
.nav a:hover:not(.active){color:var(--cyan); background:rgba(0,229,255,.08)}

/* ============ HERO ============ */
.hero{
  position:relative;
  padding:60px 24px 50px;
  text-align:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(120deg, transparent 40%, rgba(0,229,255,.06) 50%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(0,229,255,.03) 0 2px, transparent 2px 80px);
  pointer-events:none;
}
.hero h1{
  margin:0 0 12px;
  font-size:clamp(26px,4vw,42px);
  color:#fff;
  text-shadow:0 0 20px rgba(0,229,255,.35);
}
.hero p{max-width:720px; margin:0 auto; color:var(--ink-soft); font-size:16px}
.hero .hero-tag{
  display:inline-block; margin-bottom:14px;
  padding:6px 18px;
  border:1px solid var(--cyan);
  color:var(--cyan);
  font-size:12px; font-weight:700; text-transform:uppercase;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
}

/* ============ CONTAINER ============ */
.container{max-width:1200px; margin:0 auto; padding:36px 20px 80px}

.section-title{
  font-size:20px; font-weight:900; text-transform:uppercase;
  color:#fff; margin:8px 0 24px;
  padding-left:14px;
  border-left:4px solid var(--cyan);
  text-shadow:0 0 10px rgba(0,229,255,.3);
}

/* ============ CARD GRID ============ */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
}
.card{
  position:relative;
  background:linear-gradient(160deg, rgba(17,31,63,.9), rgba(10,20,40,.85));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--cyan);
  box-shadow:var(--shadow-glow);
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity:.6;
}
.card-image{
  width:100%; aspect-ratio:16/10; object-fit:cover; display:block;
  background:
    linear-gradient(135deg, #0a1428 25%, #111f3f 50%, #0a1428 75%),
    #0a1428;
  border-bottom:1px solid var(--line);
}
.card-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1}
.card-title{font-size:15px; margin:2px 0; color:#fff; text-transform:uppercase}
.card-worth{
  color:var(--gold); font-weight:700; font-size:18px;
  font-family:"Orbitron",sans-serif;
  text-shadow:0 0 8px rgba(255,212,0,.35);
}
.card-price{color:var(--ink-soft); font-size:13px}
.features{margin:6px 0 0; padding-left:18px; font-size:13px; color:var(--ink-soft)}
.features li{margin-bottom:3px}

.badge{
  display:inline-block;
  font-size:10px; font-weight:900; letter-spacing:1.2px;
  padding:4px 10px;
  text-transform:uppercase;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
  align-self:flex-start;
}
.badge.open{background:rgba(0,255,136,.15); color:var(--green); border:1px solid rgba(0,255,136,.4)}
.badge.closed{background:rgba(255,59,92,.15); color:var(--red); border:1px solid rgba(255,59,92,.4)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; cursor:pointer;
  background:linear-gradient(90deg, var(--cyan), #7cf9ff);
  color:#001018;
  font-weight:900; font-size:13px; letter-spacing:1px;
  padding:11px 20px;
  text-transform:uppercase;
  font-family:"Rajdhani",sans-serif;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  transition:filter .15s ease, transform .1s ease;
  box-shadow:0 0 12px rgba(0,229,255,.25);
}
.btn:hover{filter:brightness(1.1); box-shadow:0 0 22px rgba(0,229,255,.5)}
.btn:active{transform:scale(.98)}
.btn.secondary{background:transparent; color:var(--cyan); border:1.5px solid var(--cyan); box-shadow:none}
.btn.secondary:hover{background:rgba(0,229,255,.08)}
.btn.gold{background:linear-gradient(90deg,var(--gold),#ffe875); color:#221800; box-shadow:0 0 12px rgba(255,212,0,.3)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.block{width:100%}
.mt{margin-top:auto}

/* ============ FORMS ============ */
.form-row{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.form-row label{
  font-size:11px; font-weight:700;
  color:var(--cyan); text-transform:uppercase; letter-spacing:1.2px;
}
.form-row input, .form-row select, .form-row textarea{
  padding:11px 14px;
  background:rgba(5,9,20,.6);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink);
  font-size:14px; font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  outline:none;
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,229,255,.15);
}
.help{font-size:12px; color:var(--muted)}

/* ============ POPUP MODAL (efootball style) ============ */
.ef-modal-backdrop, .modal-backdrop{
  position:fixed; inset:0;
  background:radial-gradient(circle at center, rgba(0,20,40,.75), rgba(0,0,0,.9));
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  z-index:100; padding:16px;
  opacity:0; transition:opacity .2s ease;
}
.ef-modal-backdrop.open, .modal-backdrop{opacity:1}

.ef-modal, .modal{
  position:relative;
  background:linear-gradient(160deg, #0a1428, #111f3f);
  border:1px solid var(--cyan);
  border-radius:var(--radius-lg);
  padding:0; width:100%; max-width:440px;
  max-height:92vh; overflow:hidden;
  box-shadow:0 0 40px rgba(0,229,255,.35), inset 0 0 40px rgba(0,229,255,.05);
  transform:scale(.9);
  transition:transform .25s cubic-bezier(.2,.9,.4,1.2);
}
.ef-modal-backdrop.open .ef-modal{transform:scale(1)}
.ef-modal::before, .modal::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--gold), var(--cyan), transparent);
}

.ef-modal-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, rgba(0,229,255,.08), transparent);
}
.ef-modal-title{
  font-family:"Orbitron",sans-serif;
  font-size:14px; font-weight:900;
  letter-spacing:1.5px; color:var(--cyan);
  display:flex; align-items:center; gap:10px;
}
.ef-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);
  animation:ef-pulse 1.5s ease-in-out infinite;
}
@keyframes ef-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.ef-modal-close, .modal-close{
  background:none; border:none; cursor:pointer;
  font-size:26px; line-height:1; color:var(--ink-soft);
  padding:0 4px;
}
.ef-modal-close:hover{color:var(--red)}
.ef-modal-body, .modal{padding:20px 22px 22px}
.modal h3{margin:0 0 14px; color:#fff; font-size:16px; text-transform:uppercase; letter-spacing:1px}

.ef-help{color:var(--ink-soft); font-size:13px; margin:0 0 16px}
.ef-form-row{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.ef-form-row label{font-size:11px; font-weight:700; color:var(--cyan); text-transform:uppercase; letter-spacing:1.2px}
.ef-form-row input{
  padding:12px 14px;
  background:rgba(5,9,20,.7);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  color:#fff; font-size:16px; text-align:center; letter-spacing:6px;
}
.ef-form-row input:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,229,255,.15)}
.ef-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; cursor:pointer;
  font-weight:900; font-size:13px; letter-spacing:1.5px;
  padding:12px 20px; text-transform:uppercase;
  font-family:"Rajdhani",sans-serif;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.ef-btn-primary{background:linear-gradient(90deg,var(--cyan),#7cf9ff); color:#001018; box-shadow:0 0 12px rgba(0,229,255,.4)}
.ef-btn-block{width:100%}

/* ============ ALERTS ============ */
.alert{
  padding:12px 14px;
  border-radius:var(--radius);
  font-size:13px; margin-bottom:14px;
  border-left:3px solid;
}
.alert.error{background:rgba(255,59,92,.1); color:#ff8fa4; border-color:var(--red)}
.alert.success{background:rgba(0,255,136,.08); color:#7fffb4; border-color:var(--green)}
.alert.info{background:rgba(0,229,255,.08); color:#a3f0ff; border-color:var(--cyan)}

.ticket-list{
  display:block;
  font-weight:900; font-size:20px; letter-spacing:2px;
  background:rgba(0,229,255,.08);
  border:1.5px dashed var(--cyan);
  border-radius:var(--radius);
  padding:14px;
  margin:12px 0;
  text-align:center;
  color:var(--cyan);
  text-shadow:0 0 8px rgba(0,229,255,.4);
  font-family:"Orbitron",sans-serif;
  word-break:break-all;
}

/* ============ CHALLENGE PANELS ============ */
.panels{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media (max-width:760px){.panels{grid-template-columns:1fr}}

.panel{
  background:linear-gradient(160deg, rgba(17,31,63,.85), rgba(10,20,40,.85));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px;
  position:relative;
}
.panel::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity:.5;
}
.panel h3{
  margin:0 0 14px; color:#fff; font-size:15px;
  text-transform:uppercase; letter-spacing:1.2px;
  padding-bottom:10px; border-bottom:1px solid var(--line);
}

.checkbox-row{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; margin:10px 0 14px;
  color:var(--ink-soft);
}
.checkbox-row input{margin-top:3px; accent-color:var(--cyan)}

/* ============ FOOTER ============ */
footer{
  text-align:center; padding:24px;
  color:var(--muted); font-size:12px;
  border-top:1px solid var(--line);
  background:rgba(5,9,20,.6);
}
footer .brand-mini{color:var(--cyan); font-weight:900}

/* ============ WELCOME POPUP ============ */
.welcome-modal{
  max-width:520px;
  text-align:center;
}
.welcome-modal .welcome-hero{
  padding:30px 24px 22px;
  background:
    radial-gradient(400px 200px at 50% 0%, rgba(0,229,255,.2), transparent 70%),
    linear-gradient(160deg, #0a1428, #111f3f);
  border-bottom:1px solid var(--line);
}
.welcome-modal .welcome-logo{
  font-family:"Orbitron",sans-serif;
  font-size:36px; font-weight:900;
  color:#fff;
  text-shadow:0 0 20px rgba(0,229,255,.6);
  margin-bottom:6px;
  letter-spacing:2px;
}
.welcome-modal .welcome-logo .accent{color:var(--cyan)}
.welcome-modal .welcome-sub{
  color:var(--gold);
  font-size:12px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase;
}
.welcome-modal .welcome-body{padding:22px 26px 24px}
.welcome-modal .welcome-body p{margin:0 0 14px; color:var(--ink-soft); font-size:14px}
.welcome-modal .welcome-body .highlight{color:var(--cyan); font-weight:700}

/* ============ HEAD-TO-HEAD: NEW COMPONENTS ============ */
/* All styles below are ADDITIVE — no existing styles are modified. */

/* Two-button CTA row */
.h2h-cta-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
@media (max-width:600px){.h2h-cta-row{grid-template-columns:1fr}}
.h2h-cta{
  padding:20px 24px;
  font-size:16px;
  gap:12px;
  justify-content:center;
}

/* How-it-works guide */
.h2h-guide .guide-steps{
  margin:0;
  padding-left:22px;
  counter-reset:step;
}
.h2h-guide .guide-steps li{
  margin-bottom:12px;
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.6;
  position:relative;
  padding-left:6px;
}
.h2h-guide .guide-steps li::marker{
  color:var(--cyan);
  font-weight:900;
  font-family:"Orbitron",sans-serif;
}
.h2h-guide .guide-steps li strong{color:var(--cyan);font-weight:700}
.h2h-guide .guide-steps li em{color:var(--gold);font-style:normal;font-weight:600}

/* Notification items */
.notif-item{
  background:linear-gradient(160deg,rgba(0,229,255,.04),rgba(10,20,40,.5));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  margin-bottom:10px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.notif-item:hover{border-color:var(--cyan);box-shadow:0 0 14px rgba(0,229,255,.15)}
.notif-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.notif-name{
  color:#fff;
  font-weight:700;
  font-size:15px;
}
.notif-status{
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
}
.notif-meta{
  margin-top:6px;
  font-size:12px;
  color:var(--ink-soft);
}
.notif-id{
  color:var(--cyan);
  letter-spacing:1px;
  font-family:"Orbitron",sans-serif;
  font-size:13px;
}

/* Modal scrollable body for long forms */
.ef-modal-scroll{
  max-height:calc(92vh - 60px);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--cyan-dark) transparent;
}
.ef-modal-scroll::-webkit-scrollbar{width:6px}
.ef-modal-scroll::-webkit-scrollbar-thumb{background:var(--cyan-dark);border-radius:3px}

/* Left-aligned form rows inside modals */
.ef-form-left input{text-align:left;letter-spacing:0;font-size:14px}

/* Participants list inside challenge detail */
.participants-list{
  margin:6px 0 0;
  padding-left:20px;
  font-size:13px;
  color:var(--ink-soft);
}
.participants-list li{margin-bottom:4px}

/* Vote options */
.vote-options{display:flex;flex-direction:column;gap:8px}
.vote-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:rgba(5,9,20,.5);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  font-size:14px;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.vote-option:hover{border-color:var(--cyan);background:rgba(0,229,255,.06)}
.vote-option input{accent-color:var(--cyan);width:18px;height:18px}
.vote-option.disabled{opacity:.5;cursor:not-allowed}

/* Wallet display */
.wallet-display{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.wallet-balance-box{
  flex:1;
  min-width:200px;
  background:linear-gradient(160deg,rgba(0,255,136,.06),rgba(10,20,40,.6));
  border:1px solid rgba(0,255,136,.3);
  border-radius:var(--radius-lg);
  padding:20px 24px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.wallet-label{
  font-size:11px;
  font-weight:700;
  color:var(--green);
  text-transform:uppercase;
  letter-spacing:1.5px;
}
.wallet-amount{
  font-family:"Orbitron",sans-serif;
  font-size:32px;
  font-weight:900;
  color:#fff;
  text-shadow:0 0 12px rgba(0,255,136,.3);
}
.wallet-stats{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:160px;
}
.wallet-stats > div{
  background:rgba(5,9,20,.5);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 16px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.wallet-stat-label{
  font-size:10px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1px;
}
.wallet-stat-value{
  font-size:18px;
  font-weight:700;
  color:#fff;
  font-family:"Orbitron",sans-serif;
}

/* Wallet transaction list */
.wallet-txn-list{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.wallet-txn{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px 12px;
  align-items:center;
  padding:10px 14px;
  background:rgba(5,9,20,.4);
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:12px;
}
@media (max-width:500px){
  .wallet-txn{grid-template-columns:1fr;gap:4px}
}
.wallet-txn-type{font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:10px}
.wallet-txn.credit .wallet-txn-type{color:var(--green)}
.wallet-txn.withdrawal .wallet-txn-type{color:var(--gold)}
.wallet-txn-amount{font-weight:900;font-family:"Orbitron",sans-serif;font-size:14px}
.green-text{color:var(--green)}
.gold-text{color:var(--gold)}
.wallet-txn-desc{color:var(--ink-soft);font-size:11px;grid-column:1/-1}
.wallet-txn-date{color:var(--muted);font-size:11px;text-align:right}
@media (max-width:500px){.wallet-txn-date{text-align:left}}

/* ============================================================
   RESPONSIVE ENHANCEMENTS — fits any screen (phone/tablet/laptop/desktop/4K)
   ============================================================ */

/* Prevent horizontal overflow anywhere */
html, body { max-width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }
* { -webkit-tap-highlight-color: transparent; }

/* Extra-large screens (4K / ultra-wide) */
@media (min-width: 1600px){
  .container{ max-width: 1400px; padding: 48px 32px 100px; }
  .hero h1{ font-size: 52px; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px; }
}

/* Large laptops / desktops */
@media (min-width: 1200px) and (max-width: 1599px){
  .container{ max-width: 1200px; }
}

/* Standard laptops */
@media (min-width: 992px) and (max-width: 1199px){
  .container{ padding: 32px 24px 80px; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 991px){
  .header{ padding: 12px 20px; }
  .hero{ padding: 48px 20px 40px; }
  .hero h1{ font-size: 32px; }
  .container{ padding: 28px 18px 70px; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
  .ef-modal{ max-width: 480px; }
}

/* Small tablets / large phones (landscape) */
@media (min-width: 600px) and (max-width: 767px){
  .header{ padding: 12px 16px; }
  .brand{ font-size: 19px; }
  .hero{ padding: 40px 16px 32px; }
  .hero h1{ font-size: 28px; }
  .hero p{ font-size: 15px; }
  .container{ padding: 24px 16px 60px; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
  .panel{ padding: 18px; }
  .ef-modal{ max-width: calc(100vw - 32px); }
}

/* Phones */
@media (max-width: 599px){
  .header{
    padding: 10px 12px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .brand{ font-size: 17px; gap: 6px; }
  .brand::before{ font-size: 18px; }
  .nav{ gap: 4px; }
  .nav a{ padding: 6px 10px; font-size: 11px; letter-spacing: .5px; }
  .hero{ padding: 30px 14px 24px; }
  .hero .hero-tag{ font-size: 10px; padding: 5px 12px; margin-bottom: 10px; }
  .hero h1{ font-size: 22px; line-height: 1.15; margin-bottom: 8px; }
  .hero p{ font-size: 13.5px; line-height: 1.45; }
  .container{ padding: 20px 12px 50px; }
  .section-title{ font-size: 16px; margin: 6px 0 18px; padding-left: 10px; border-left-width: 3px; }
  .grid{ grid-template-columns: 1fr; gap: 14px; }
  .card{ border-radius: 8px; }
  .card-image{ aspect-ratio: 16/9; }
  .card-body{ padding: 14px 14px 16px; }
  .card-title{ font-size: 14px; }
  .card-worth{ font-size: 16px; }
  .card-price{ font-size: 12px; }
  .features{ font-size: 12px; }
  .panel{ padding: 16px 14px; border-radius: 8px; }
  .panel h3{ font-size: 13px; margin-bottom: 10px; padding-bottom: 8px; }
  .btn{ padding: 10px 16px; font-size: 12px; }
  .h2h-cta{ padding: 16px 18px; font-size: 14px; }
  .h2h-guide .guide-steps{ padding-left: 18px; }
  .h2h-guide .guide-steps li{ font-size: 12.5px; margin-bottom: 10px; }
  .notif-item{ padding: 12px 14px; }
  .notif-name{ font-size: 14px; }
  .notif-meta{ font-size: 11.5px; }
  .notif-id{ font-size: 12px; }
  footer{ padding: 20px 14px; font-size: 11px; }

  /* Wallet on phones — stack cleanly */
  .wallet-display{ flex-direction: column; gap: 12px; }
  .wallet-balance-box{ padding: 16px 18px; }
  .wallet-amount{ font-size: 26px; }
  .wallet-stats{ flex-direction: row; }
  .wallet-stats > div{ flex: 1; padding: 10px 12px; }
  .wallet-stat-value{ font-size: 15px; }

  /* Modal on phones — full-width, taller scroll area */
  .ef-modal-backdrop, .modal-backdrop{ padding: 8px; }
  .ef-modal, .modal{
    max-width: 100%;
    width: 100%;
    max-height: 96vh;
    border-radius: 10px;
  }
  .ef-modal-header{ padding: 14px 16px; }
  .ef-modal-title{ font-size: 12px; letter-spacing: 1px; }
  .ef-modal-body{ padding: 16px 16px 18px; }
  .ef-modal-scroll{ max-height: calc(96vh - 54px); }
  .ef-form-row input{ font-size: 15px; padding: 10px 12px; letter-spacing: 3px; }
  .ef-form-left input{ letter-spacing: 0; font-size: 14px; }
  .ef-btn{ padding: 12px 16px; font-size: 12px; }
  .ticket-list{ font-size: 16px; letter-spacing: 1px; padding: 12px; }
  .welcome-modal .welcome-logo{ font-size: 28px; }
  .welcome-modal .welcome-hero{ padding: 22px 18px 18px; }
  .welcome-modal .welcome-body{ padding: 18px 18px 20px; }
  .welcome-modal .welcome-body p{ font-size: 13.5px; }
  .checkbox-row{ font-size: 12.5px; }
  .vote-option{ padding: 10px 12px; font-size: 13px; }
  .alert{ font-size: 12.5px; padding: 10px 12px; }
}

/* Very small phones (≤360px) */
@media (max-width: 360px){
  .brand{ font-size: 15px; }
  .nav a{ padding: 5px 8px; font-size: 10px; }
  .hero h1{ font-size: 20px; }
  .hero p{ font-size: 12.5px; }
  .btn{ padding: 9px 14px; font-size: 11px; }
  .h2h-cta{ font-size: 13px; padding: 14px 16px; }
  .wallet-amount{ font-size: 22px; }
  .ef-modal-title{ font-size: 11px; }
}

/* Landscape phones — keep modal usable */
@media (max-height: 500px) and (orientation: landscape){
  .ef-modal{ max-height: 96vh; }
  .ef-modal-scroll{ max-height: calc(96vh - 50px); }
  .hero{ padding: 20px 16px 16px; }
  .hero h1{ font-size: 20px; margin-bottom: 6px; }
  .hero p{ font-size: 12px; }
}

/* Improve tap targets for touch */
@media (hover: none) and (pointer: coarse){
  .btn, .ef-btn, .nav a, .card, .vote-option, .notif-item{
    min-height: 40px;
  }
  input, select, textarea{
    font-size: 16px !important; /* Prevent iOS zoom-on-focus */
  }
}

/* Print-safe fallback */
@media print{
  .ef-modal-backdrop, .modal-backdrop, .header nav{ display: none; }
  body{ background: white; color: black; }
}

/* ============================================================
   ADDITIVE STYLES — Raffle countdown, Contributions, End Challenge,
   Winner Withdraw, Receipt actions. Nothing above this line is modified.
   ============================================================ */

/* Raffle countdown pill on each card */
.raffle-countdown{
  margin-top:8px;
  display:flex; flex-direction:column; gap:2px;
  background:linear-gradient(90deg, rgba(255,212,0,.08), rgba(0,229,255,.06));
  border:1px solid rgba(255,212,0,.35);
  border-radius:8px;
  padding:8px 12px;
  font-family:"Orbitron","Rajdhani",sans-serif;
}
.raffle-countdown .rc-label{
  font-size:10px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--gold); font-weight:700;
}
.raffle-countdown .rc-time{
  font-size:15px; font-weight:900; color:#fff;
  letter-spacing:1.5px; text-shadow:0 0 6px rgba(255,212,0,.35);
}
.raffle-countdown.ended{ border-color: var(--red); }
.raffle-countdown.ended .rc-label{ color: var(--red); }
.raffle-countdown.ended .rc-time{ color: var(--red); text-shadow:none; }

/* Receipt download row shown after a successful ticket purchase */
.receipt-actions{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:14px;
}
.receipt-dl-btn, .receipt-view-btn{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
}

/* Chip strip of participant names in the live notifications */
.pk-chip-row{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:10px;
}
.pk-chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px;
  background:rgba(0,229,255,.08);
  border:1px solid rgba(0,229,255,.3);
  border-radius:999px;
  font-size:12px; font-weight:700;
  color:#cff2ff; letter-spacing:.5px;
}
.pk-chip.creator{
  background:rgba(255,212,0,.1);
  border-color:rgba(255,212,0,.4);
  color:#ffe27a;
}

/* Public contributions strip (expandable) */
.pk-contrib{
  margin-top:12px;
  border-top:1px dashed rgba(30,49,99,.6);
  padding-top:10px;
}
.pk-contrib summary{
  cursor:pointer;
  font-size:11px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase;
  color:var(--cyan);
  padding:4px 0;
  list-style:none;
}
.pk-contrib summary::-webkit-details-marker{ display:none; }
.pk-contrib summary:hover{ color:#7cf9ff; }
.pk-contrib-list{
  display:flex; flex-direction:column; gap:4px;
  margin-top:8px;
  padding:10px 12px;
  background:rgba(5,9,20,.5);
  border:1px solid var(--line);
  border-radius:6px;
}
.pk-contrib-row{
  display:flex; justify-content:space-between;
  gap:12px;
  font-size:13px;
}
.pk-contrib-name{ color:#fff; font-weight:600; }
.pk-contrib-amt{
  color:var(--green); font-weight:900;
  font-family:"Orbitron",sans-serif;
  letter-spacing:.5px;
}
.pk-contrib-total{
  margin-top:8px; padding-top:8px;
  border-top:1px solid var(--line);
  text-align:right;
  font-family:"Orbitron",sans-serif;
  font-weight:900;
  font-size:13px;
  color:var(--gold);
  letter-spacing:1.2px;
  text-shadow:0 0 6px rgba(255,212,0,.3);
}

/* Section heading inside cards */
.pk-section-heading{
  color:var(--cyan); font-size:11px;
  text-transform:uppercase; letter-spacing:1.4px;
  font-weight:800;
}
.pk-section{ margin-top:12px; }
.pk-voted{ color: var(--green); font-weight:800; letter-spacing:.5px; }

/* My challenges card */
.pk-mych-card{
  background:linear-gradient(160deg,rgba(0,229,255,.04),rgba(10,20,40,.55));
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 20px;
  margin-bottom:16px;
  position:relative;
}
.pk-mych-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--gold), transparent);
  opacity:.5;
}
.pk-mych-top{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px;
}
.pk-mych-name{
  color:#fff; font-weight:800; font-size:16px;
  font-family:"Orbitron","Rajdhani",sans-serif;
  letter-spacing:1px;
}
.pk-mych-sub{ color:var(--ink-soft); font-size:12px; margin-top:3px; }
.pk-mych-sub strong{ color:var(--cyan); letter-spacing:1px; }
.pk-role{
  color:var(--gold); font-weight:800;
  letter-spacing:1px; font-size:11px;
}
.pk-mych-stats{
  display:flex; gap:14px; flex-wrap:wrap;
  margin-top:10px;
  padding:10px 12px;
  background:rgba(5,9,20,.35);
  border-radius:6px;
  font-size:12.5px;
  color:var(--ink-soft);
}
.pk-mych-stats strong{ color:#fff; font-weight:800; }

/* Professional End Challenge section */
.pk-end-section{
  margin-top:14px;
  padding:16px 18px;
  background:
    radial-gradient(400px 100px at 0% 0%, rgba(255,59,92,.08), transparent 70%),
    linear-gradient(160deg, rgba(255,59,92,.06), rgba(10,20,40,.6));
  border:1px solid rgba(255,59,92,.3);
  border-radius:10px;
  position:relative; overflow:hidden;
}
.pk-end-section::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--red), transparent);
}
.pk-end-head{
  display:flex; gap:14px; align-items:flex-start;
  margin-bottom:12px;
}
.pk-end-icon{
  font-size:28px; line-height:1;
  color:var(--red);
  filter:drop-shadow(0 0 6px rgba(255,59,92,.5));
}
.pk-end-title{
  color:#fff; font-weight:800;
  font-family:"Orbitron",sans-serif;
  font-size:14px; letter-spacing:1.5px;
  text-transform:uppercase;
}
.pk-end-sub{
  color:var(--ink-soft); font-size:12.5px;
  margin-top:4px; line-height:1.5;
}
.pk-end-section .end-btn{
  background:linear-gradient(90deg, var(--red), #ff6b85);
  color:#fff;
  box-shadow:0 0 14px rgba(255,59,92,.4);
  width:100%;
  padding:14px 18px;
  font-size:13px; letter-spacing:1.5px;
}
.pk-end-section .end-btn:hover{ filter:brightness(1.1); box-shadow:0 0 22px rgba(255,59,92,.6); }

/* Winner block */
.pk-winner-block{
  margin-top:14px;
  padding:16px 18px;
  background:linear-gradient(160deg, rgba(0,255,136,.05), rgba(10,20,40,.55));
  border:1px solid rgba(0,255,136,.25);
  border-radius:10px;
  position:relative; overflow:hidden;
}
.pk-winner-block.you-won{
  background:
    radial-gradient(400px 140px at 50% 0%, rgba(255,212,0,.15), transparent 70%),
    linear-gradient(160deg, rgba(0,255,136,.08), rgba(10,20,40,.6));
  border-color: rgba(255,212,0,.55);
  box-shadow: 0 0 26px rgba(255,212,0,.15);
}
.pk-winner-block::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), var(--green), var(--gold), transparent);
}
.pk-winner-title{
  color:#fff; font-family:"Orbitron",sans-serif;
  font-weight:900; letter-spacing:1.4px;
  font-size:14px; text-transform:uppercase;
  margin-bottom:8px;
}
.pk-winner-body{
  color:var(--ink-soft); font-size:13px; line-height:1.7;
}
.pk-winner-body strong{ color:#fff; }
.pk-winner-actions{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed rgba(255,212,0,.4);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
}
.pk-winner-msg{
  color:var(--gold); font-weight:800;
  font-size:13px; letter-spacing:.8px;
  text-shadow:0 0 8px rgba(255,212,0,.35);
}
.winner-withdraw-btn{
  padding:14px 22px;
  font-size:13px; letter-spacing:1.5px;
  background:linear-gradient(90deg, var(--gold), #ffe875);
  color:#221800;
  box-shadow:0 0 18px rgba(255,212,0,.5);
  animation: pk-glow 2.2s ease-in-out infinite;
}
@keyframes pk-glow{
  0%,100%{ box-shadow:0 0 18px rgba(255,212,0,.4); }
  50%    { box-shadow:0 0 28px rgba(255,212,0,.75); }
}

/* Withdraw panel refresh */
.pk-withdraw-panel{
  background:
    radial-gradient(400px 160px at 100% 0%, rgba(255,212,0,.08), transparent 70%),
    linear-gradient(160deg, rgba(17,31,63,.85), rgba(10,20,40,.85));
  border-color:rgba(255,212,0,.35);
  margin-top:16px;
}

/* Phones */
@media (max-width: 599px){
  .pk-mych-name{ font-size: 14px; }
  .pk-end-title{ font-size: 12px; }
  .pk-winner-actions{ flex-direction: column; align-items: stretch; }
  .winner-withdraw-btn{ width: 100%; }
  .raffle-countdown .rc-time{ font-size: 14px; }
}

/* ============================================================
   RAINDROP / AVIATOR NOTIFICATION LAYER
   Drops fall from top of the viewport across the full width.
   Types:
     .pk-drop-challenge  → new challenge created (cyan)
     .pk-drop-join       → participant joined a challenge (green)
     .pk-drop-chat       → user chat message drop (gold)
   ============================================================ */
.pk-drop-layer{
  position:fixed;
  top:0; left:0; right:0;
  height:100vh;
  pointer-events:none;
  z-index:9999;
  overflow:hidden;
}
.pk-drop{
  position:absolute;
  top:-80px;
  transform:translateX(-50%);
  min-width:180px;
  max-width:320px;
  padding:10px 14px 12px;
  border-radius:10px;
  background:linear-gradient(160deg, rgba(10,20,40,.92), rgba(5,9,20,.94));
  border:1px solid var(--cyan);
  box-shadow:
    0 0 18px rgba(0,229,255,.35),
    0 6px 22px rgba(0,0,0,.55);
  color:#fff;
  font-size:12.5px;
  line-height:1.45;
  pointer-events:auto;
  animation:pk-drop-fall 18s cubic-bezier(.35,.05,.55,1) forwards;
  will-change:transform, opacity, top;
}
.pk-drop::before{
  /* raindrop tail */
  content:"";
  position:absolute;
  left:50%;
  top:-14px;
  transform:translateX(-50%);
  width:2px; height:14px;
  background:linear-gradient(to bottom, transparent, currentColor);
  color:var(--cyan);
  opacity:.7;
}
.pk-drop .pk-drop-head{
  display:flex; align-items:center; gap:8px;
  font-size:10.5px; font-weight:900;
  letter-spacing:1.4px; text-transform:uppercase;
  color:var(--cyan);
  font-family:"Orbitron",sans-serif;
}
.pk-drop .pk-drop-title{
  color:#fff; font-weight:800;
  font-size:13px;
  margin-top:4px;
  font-family:"Orbitron","Rajdhani",sans-serif;
  letter-spacing:.4px;
}
.pk-drop .pk-drop-body{
  margin-top:3px;
  color:#cfe9ff;
  font-size:12px;
}
.pk-drop .pk-drop-id{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:6px;
  padding:3px 8px;
  background:rgba(0,229,255,.1);
  border:1px dashed rgba(0,229,255,.5);
  border-radius:6px;
  font-family:"Orbitron",sans-serif;
  font-size:11px; font-weight:800;
  color:var(--cyan);
  cursor:pointer;
  letter-spacing:1px;
  user-select:all;
}
.pk-drop .pk-drop-id:hover{
  background:rgba(0,229,255,.18);
  color:#7cf9ff;
}
.pk-drop.pk-drop-join{
  border-color:var(--green);
  box-shadow:0 0 18px rgba(0,255,136,.32), 0 6px 22px rgba(0,0,0,.55);
}
.pk-drop.pk-drop-join::before{ color:var(--green); }
.pk-drop.pk-drop-join .pk-drop-head{ color:var(--green); }
.pk-drop.pk-drop-chat{
  border-color:var(--gold);
  box-shadow:0 0 18px rgba(255,212,0,.35), 0 6px 22px rgba(0,0,0,.55);
}
.pk-drop.pk-drop-chat::before{ color:var(--gold); }
.pk-drop.pk-drop-chat .pk-drop-head{ color:var(--gold); }

@keyframes pk-drop-fall{
  0%   { top:-90px;  opacity:0;   }
  4%   { opacity:1; }
  92%  { opacity:1; }
  100% { top:100vh; opacity:0; }
}
@media (max-width:600px){
  .pk-drop{ min-width:140px; max-width:78vw; font-size:11.5px; padding:8px 12px 10px; }
  .pk-drop .pk-drop-title{ font-size:12px; }
}

/* Copy pulse */
.pk-copy-pulse{
  animation:pk-copy-pulse 0.6s ease;
}
@keyframes pk-copy-pulse{
  0%   { background:rgba(0,229,255,.1); }
  50%  { background:rgba(0,255,136,.35); color:#fff; }
  100% { background:rgba(0,229,255,.1); }
}

/* ============================================================
   PUBLIC CHAT DROP  (users type + drop a message)
   ============================================================ */
.pk-chat-drop{
  margin:14px 0 18px;
  padding:14px 16px;
  background:
    radial-gradient(360px 120px at 100% 0%, rgba(255,212,0,.08), transparent 70%),
    linear-gradient(160deg, rgba(0,229,255,.05), rgba(10,20,40,.55));
  border:1px solid var(--line);
  border-radius:10px;
  position:relative;
  overflow:hidden;
}
.pk-chat-drop::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), var(--cyan), transparent);
  opacity:.55;
}
.pk-chat-drop-head{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:8px;
  margin-bottom:10px;
}
.pk-chat-drop-title{
  color:var(--gold); font-weight:800;
  font-family:"Orbitron",sans-serif;
  font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
}
.pk-chat-drop-hint{ color:var(--ink-soft); font-size:11.5px; }
.pk-chat-drop-row{
  display:grid;
  grid-template-columns: 140px 1fr auto;
  gap:8px;
}
.pk-chat-drop-row input{
  background:rgba(5,9,20,.55);
  border:1px solid var(--line);
  color:#fff;
  padding:10px 12px;
  border-radius:6px;
  font-size:13px;
  outline:none;
  transition:border-color .15s ease;
}
.pk-chat-drop-row input:focus{ border-color:var(--cyan); }
.pk-chat-drop-btn{
  padding:10px 16px;
  background:linear-gradient(90deg, var(--gold), #ffe875);
  color:#221800;
  font-weight:900; letter-spacing:1.3px;
  border:none; border-radius:6px; cursor:pointer;
  font-size:12px;
  box-shadow:0 0 12px rgba(255,212,0,.35);
  white-space:nowrap;
}
.pk-chat-drop-btn:hover{ filter:brightness(1.08); }
@media (max-width:640px){
  .pk-chat-drop-row{ grid-template-columns:1fr; }
}

/* ============================================================
   COPYABLE CHALLENGE ID (in the notif card and my-challenges)
   ============================================================ */
.pk-copy-id{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 10px;
  background:rgba(0,229,255,.09);
  border:1px dashed rgba(0,229,255,.45);
  border-radius:6px;
  font-family:"Orbitron",sans-serif;
  font-size:12px; font-weight:800;
  color:var(--cyan);
  letter-spacing:1px;
  cursor:pointer;
  user-select:all;
  transition:background .15s ease, color .15s ease;
}
.pk-copy-id::after{
  content:"⧉";
  font-size:11px;
  opacity:.75;
}
.pk-copy-id:hover{
  background:rgba(0,229,255,.18);
  color:#7cf9ff;
}
.pk-copy-id.copied{
  background:rgba(0,255,136,.2);
  border-color:rgba(0,255,136,.6);
  color:var(--green);
}
.pk-copy-id.copied::after{ content:"✓"; }

/* ============================================================
   PROFESSIONAL "MY ACTIVE CHALLENGES" (compact mode when <10 participants)
   ============================================================ */
.pk-mych-card.pk-mych-pro{
  background:
    radial-gradient(500px 200px at 0% 0%, rgba(0,229,255,.06), transparent 70%),
    linear-gradient(180deg, rgba(12,22,44,.85), rgba(6,10,22,.9));
  border:1px solid rgba(0,229,255,.28);
  border-radius:12px;
  padding:0;
  overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}
.pk-mych-card.pk-mych-pro::before{
  height:3px;
  background:linear-gradient(90deg, var(--cyan), var(--gold), var(--cyan));
  opacity:.9;
}
.pk-mych-pro .pk-mych-pro-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px 10px;
  border-bottom:1px solid rgba(30,49,99,.5);
  gap:10px; flex-wrap:wrap;
}
.pk-mych-pro .pk-mych-pro-name{
  color:#fff; font-weight:800;
  font-family:"Orbitron","Rajdhani",sans-serif;
  font-size:16px; letter-spacing:1px;
  display:flex; align-items:center; gap:10px;
}
.pk-mych-pro .pk-mych-pro-sub{
  color:var(--ink-soft); font-size:11.5px;
  margin-top:3px; letter-spacing:.5px;
}
.pk-mych-pro .pk-mych-pro-body{ padding:14px 18px 16px; }
.pk-mych-pro .pk-pro-stat-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px;
  margin-bottom:12px;
}
.pk-mych-pro .pk-pro-stat{
  background:rgba(5,9,20,.5);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 12px;
  display:flex; flex-direction:column; gap:2px;
}
.pk-mych-pro .pk-pro-stat-label{
  font-size:9.5px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:1.2px;
}
.pk-mych-pro .pk-pro-stat-value{
  font-family:"Orbitron",sans-serif;
  font-weight:800; color:#fff; font-size:14px;
}
.pk-mych-pro .pk-pro-stat.gold .pk-pro-stat-value{ color:var(--gold); }
.pk-mych-pro .pk-pro-stat.cyan .pk-pro-stat-value{ color:var(--cyan); }
.pk-mych-pro .pk-pro-participants{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:8px 10px;
  background:rgba(5,9,20,.4);
  border:1px solid var(--line);
  border-radius:8px;
  margin-top:4px;
}
.pk-mych-pro .pk-pro-participants .pk-chip{ font-size:11.5px; }
@media (max-width:540px){
  .pk-mych-pro .pk-pro-stat-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .pk-mych-pro .pk-pro-stat-value{ font-size:12.5px; }
}

/* ============================================================
   PROFESSIONAL WALLET (upgraded look)
   ============================================================ */
.pk-wallet-pro{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(0,255,136,.3);
  background:
    radial-gradient(600px 200px at 100% 0%, rgba(255,212,0,.08), transparent 70%),
    radial-gradient(400px 200px at 0% 100%, rgba(0,255,136,.05), transparent 70%),
    linear-gradient(180deg, rgba(12,22,44,.9), rgba(6,10,22,.95));
  box-shadow:0 8px 26px rgba(0,0,0,.4);
}
.pk-wallet-pro .pk-wallet-pro-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px;
  border-bottom:1px solid rgba(30,49,99,.5);
  background:linear-gradient(90deg, rgba(0,255,136,.06), transparent);
}
.pk-wallet-pro .pk-wallet-pro-title{
  color:#fff; font-family:"Orbitron",sans-serif;
  font-weight:900; letter-spacing:1.5px;
  font-size:12px; text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
.pk-wallet-pro .pk-wallet-pro-title::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--green); box-shadow:0 0 8px var(--green);
}
.pk-wallet-pro .pk-wallet-pro-mail{
  color:var(--ink-soft); font-size:11.5px; letter-spacing:.5px;
}
.pk-wallet-pro .pk-wallet-pro-body{ padding:18px; }
.pk-wallet-pro .pk-wallet-hero{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:14px;
  margin-bottom:14px;
}
@media (max-width:640px){
  .pk-wallet-pro .pk-wallet-hero{ grid-template-columns:1fr; }
}
.pk-wallet-pro .pk-wallet-balance{
  background:linear-gradient(160deg, rgba(0,255,136,.1), rgba(10,20,40,.6));
  border:1px solid rgba(0,255,136,.35);
  border-radius:12px;
  padding:18px 20px;
  position:relative; overflow:hidden;
}
.pk-wallet-pro .pk-wallet-balance::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(200px 60px at 100% 0%, rgba(0,255,136,.15), transparent 70%);
  pointer-events:none;
}
.pk-wallet-pro .pk-wallet-balance-label{
  color:var(--green); font-size:11px; font-weight:800;
  letter-spacing:1.5px; text-transform:uppercase;
}
.pk-wallet-pro .pk-wallet-balance-amt{
  color:#fff; font-family:"Orbitron",sans-serif;
  font-weight:900; font-size:34px;
  text-shadow:0 0 14px rgba(0,255,136,.35);
  margin-top:4px;
}
.pk-wallet-pro .pk-wallet-balance-sub{
  color:var(--ink-soft); font-size:11.5px; margin-top:6px;
}
.pk-wallet-pro .pk-wallet-side{
  display:flex; flex-direction:column; gap:10px;
}
.pk-wallet-pro .pk-wallet-mini{
  background:rgba(5,9,20,.5);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  display:flex; justify-content:space-between; align-items:center;
}
.pk-wallet-pro .pk-wallet-mini-label{
  font-size:10.5px; font-weight:800; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--muted);
}
.pk-wallet-pro .pk-wallet-mini-value{
  font-family:"Orbitron",sans-serif;
  font-size:15px; font-weight:800; color:#fff;
}
.pk-wallet-pro .pk-wallet-mini.gold .pk-wallet-mini-value{ color:var(--gold); }
.pk-wallet-pro .pk-withdraw-pro{
  margin-top:6px;
  padding:14px 16px;
  border-radius:10px;
  background:
    radial-gradient(300px 100px at 0% 0%, rgba(255,212,0,.08), transparent 70%),
    linear-gradient(160deg, rgba(17,31,63,.85), rgba(10,20,40,.85));
  border:1px solid rgba(255,212,0,.35);
}
.pk-wallet-pro .pk-withdraw-pro-title{
  color:var(--gold); font-family:"Orbitron",sans-serif;
  font-weight:900; letter-spacing:1.4px; font-size:12px;
  text-transform:uppercase; margin-bottom:8px;
}
.pk-wallet-pro .pk-withdraw-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
@media (max-width:540px){ .pk-wallet-pro .pk-withdraw-grid{ grid-template-columns:1fr; } }
.pk-wallet-pro .pk-withdraw-grid input{
  background:rgba(5,9,20,.55);
  border:1px solid var(--line);
  color:#fff;
  padding:10px 12px;
  border-radius:6px;
  font-size:13.5px;
  outline:none;
  width:100%;
}
.pk-wallet-pro .pk-withdraw-grid input:focus{ border-color:var(--gold); }
.pk-wallet-pro .pk-withdraw-pro-btn{
  margin-top:10px;
  width:100%;
  padding:12px 14px;
  background:linear-gradient(90deg, var(--gold), #ffe875);
  color:#221800;
  border:none; border-radius:8px;
  font-family:"Orbitron",sans-serif;
  font-weight:900; letter-spacing:1.5px; font-size:12.5px;
  cursor:pointer;
  box-shadow:0 0 14px rgba(255,212,0,.4);
}
.pk-wallet-pro .pk-withdraw-pro-btn:hover{ filter:brightness(1.08); box-shadow:0 0 22px rgba(255,212,0,.6); }
.pk-wallet-pro .pk-txn-section{ margin-top:16px; }
.pk-wallet-pro .pk-txn-title{
  color:var(--cyan); font-family:"Orbitron",sans-serif;
  font-weight:800; font-size:11px; letter-spacing:1.4px;
  text-transform:uppercase; margin-bottom:8px;
}

/* ============================================================
   PROFESSIONAL END-CHALLENGE (upgraded)
   ============================================================ */
.pk-end-pro{
  margin-top:16px;
  padding:0;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,59,92,.4);
  background:
    radial-gradient(500px 160px at 0% 0%, rgba(255,59,92,.12), transparent 70%),
    linear-gradient(180deg, rgba(12,22,44,.9), rgba(6,10,22,.95));
  box-shadow:0 6px 22px rgba(0,0,0,.35);
  position:relative;
}
.pk-end-pro::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--red), #ff9ba9, var(--red));
}
.pk-end-pro-head{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,59,92,.2);
}
.pk-end-pro-icon{
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(160deg, rgba(255,59,92,.25), rgba(255,59,92,.08));
  border:1px solid rgba(255,59,92,.5);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:20px;
  flex-shrink:0;
  box-shadow:0 0 12px rgba(255,59,92,.35);
}
.pk-end-pro-titles .t1{
  color:#fff; font-family:"Orbitron",sans-serif;
  font-weight:900; letter-spacing:1.3px; font-size:13px;
  text-transform:uppercase;
}
.pk-end-pro-titles .t2{
  color:var(--ink-soft); font-size:12px; margin-top:2px; line-height:1.5;
}
.pk-end-pro-body{ padding:14px 18px 16px; }
.pk-end-pro-checklist{
  display:flex; flex-direction:column; gap:8px;
  margin-bottom:12px;
}
.pk-end-pro-checklist li{
  list-style:none;
  padding:8px 12px;
  background:rgba(5,9,20,.4);
  border:1px solid var(--line);
  border-radius:6px;
  font-size:12.5px;
  color:var(--ink-soft);
  display:flex; align-items:center; gap:8px;
}
.pk-end-pro-checklist li::before{
  content:"✓"; color:var(--green); font-weight:900;
}
.pk-end-pro-btn{
  width:100%;
  padding:14px 18px;
  border:none; border-radius:10px;
  cursor:pointer;
  background:linear-gradient(90deg, var(--red), #ff6b85);
  color:#fff;
  font-family:"Orbitron",sans-serif;
  font-weight:900; letter-spacing:1.6px; font-size:13px;
  text-transform:uppercase;
  box-shadow:0 0 16px rgba(255,59,92,.45);
  transition:filter .15s ease, box-shadow .15s ease;
}
.pk-end-pro-btn:hover{ filter:brightness(1.1); box-shadow:0 0 26px rgba(255,59,92,.7); }
.pk-end-pro-btn:disabled{
  filter:grayscale(.5) brightness(.7);
  cursor:not-allowed;
  box-shadow:none;
}
.pk-end-pro-note{
  color:var(--ink-soft); font-size:11.5px;
  margin-top:8px; text-align:center;
}