/* Team Finder minimal alpha styles matching site theme */
:root{
  --bg:#041218; --panel:#0b1630; --border:rgba(0,198,255,0.25); --glow:#00c6ff; --text:#cfe7ff; --muted:#9ec7ff;
}
*{box-sizing:border-box}
body{font-family:'Poppins',system-ui,sans-serif;background:var(--bg);color:var(--text)}
.card{background:linear-gradient(180deg,#091f29,#07202a);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 18px rgba(0,0,0,.35);padding:16px}
.tf-container{max-width:980px;margin:20px auto;padding:0 8px}
.tf-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.tf-title{font-family:'Orbitron',sans-serif;margin:0;color:#9ec7ff;text-shadow:0 0 10px rgba(158,199,255,.6)}
.tf-sub{opacity:.8;color:var(--muted)}
.tf-gate{text-align:center}
.tf-coming{font-size:18px;margin-bottom:6px}
.tf-note{opacity:.85}
.tf-btn{padding:10px 14px;border-radius:12px;border:1px solid rgba(0,198,255,.35);background:rgba(0,198,255,.12);color:#9fe8ff;cursor:pointer}
.tf-btn:disabled{opacity:.6;cursor:not-allowed}
.tf-row{display:flex;gap:10px;flex-wrap:wrap}
.tf-col{flex:1 1 300px}
.tf-badges{display:flex;gap:6px;align-items:center}
.badge{padding:4px 8px;border-radius:10px;border:1px solid rgba(0,198,255,.35);background:rgba(0,198,255,.12);font-family:'Orbitron',sans-serif;font-weight:800;letter-spacing:.4px;color:#9fe8ff}
.badge.vip{border-color:rgba(255,220,0,.45);background:rgba(255,220,0,.14);color:#ffe27a}
.badge.boost{border-color:rgba(255,105,180,.55);background:rgba(255,105,180,.14);color:#ffb3d0}
.tf-profile{display:flex;flex-direction:column;align-items:center;gap:8px}
.tf-avatar{width:96px;height:96px;border-radius:16px;border:1px solid var(--border);box-shadow:0 0 12px rgba(0,198,255,.3);object-fit:cover}
.tf-ign{font-family:'Orbitron',sans-serif;color:#9ec7ff;text-shadow:0 0 10px rgba(158,199,255,.6);}
.tf-stars{display:flex;gap:6px;align-items:center}
.star{font-size:22px;cursor:pointer;color:#00c6ff;text-shadow:0 0 10px rgba(0,198,255,.45)}
.star.off{opacity:.32;text-shadow:none}
.no-rating{font-size:16px;font-weight:800;color:#00c6ff;text-shadow:0 0 10px rgba(0,198,255,.45);letter-spacing:.5px}
.tf-hub-tabs{display:flex;gap:8px;margin-bottom:10px}
.tf-tab{flex:1;padding:10px 12px;border-radius:10px;border:1px solid #0d2a36;background:#081b2b;color:#cfe7ff;cursor:pointer;text-align:center;font-weight:600}
.tf-tab.active{background:rgba(0,198,255,.16);border-color:rgba(0,198,255,.5);color:#9fe8ff;box-shadow:0 0 12px rgba(0,198,255,.25)}
.tf-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.tf-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;border:1px solid var(--border);background:linear-gradient(180deg,#0b1c28,#0a1720);border-radius:12px;padding:10px}
.tf-item-info{display:flex;align-items:center;gap:10px}
.tf-avatar-sm{width:42px;height:42px;border-radius:10px;border:1px solid var(--border);box-shadow:0 0 10px rgba(0,198,255,.3);object-fit:cover}
.tf-item-text{display:flex;flex-direction:column;gap:4px}
.tf-item-text{align-items:center}
.tf-actions{display:flex;gap:6px}
.tf-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;border:1px solid var(--border);border-radius:14px;transition:transform .18s ease, box-shadow .18s ease;background:linear-gradient(180deg,#091f29,#07202a)}
.tf-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.45)}
.tf-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
.tf-metric{border:1px solid rgba(0,198,255,.25);border-radius:12px;background:linear-gradient(180deg,rgba(0,198,255,.08),rgba(0,198,255,.04));box-shadow:0 0 12px rgba(0,198,255,.18);padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px}
.tf-metric.roles{grid-column:1/-1}
.m-label{opacity:.9;color:#bfe9ff;font-family:'Orbitron',sans-serif;font-weight:800;letter-spacing:.5px;text-align:center;text-shadow:0 0 10px rgba(158,199,255,.5)}
.m-label::after{content:"";position:relative;display:block;height:2px;margin:6px auto 0 auto;width:80%;max-width:180px;border-radius:2px;background:linear-gradient(90deg, rgba(0,198,255,0.12), rgba(0,198,255,0.55), rgba(0,198,255,0.12));animation:underlinePulse 2.6s ease-in-out infinite}
.m-value{color:#e7f9ff;font-weight:800;font-size:18px;text-shadow:0 0 10px rgba(0,198,255,.35)}
.m-value{letter-spacing:.3px}
.tf-storage{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.storage-chip{padding:4px 10px;border-radius:10px;border:1px solid rgba(0,198,255,.35);background:rgba(0,198,255,.12);color:#aef0ff;font-weight:700;box-shadow:0 0 10px rgba(0,198,255,.25)}
.m-actions{display:flex;gap:8px}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);z-index:9999}
.modal .panel{max-width:520px;width:96%;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.6);padding:16px}
.modal .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.modal .body{display:flex;flex-direction:column;gap:10px}

/* Avatar glow pulse + IGN underline pulse */
.tf-avatar-wrap{position:relative;width:96px;height:96px}
.tf-avatar-wrap::before{content:"";position:absolute;inset:-4px;border-radius:18px;background:radial-gradient(60% 60% at 50% 50%, rgba(0,198,255,.35), rgba(0,198,255,0));filter:blur(6px);animation:avatarPulse 2.2s ease-in-out infinite}
@keyframes avatarPulse{0%{opacity:.65}50%{opacity:1}100%{opacity:.7}}
.tf-ign{position:relative}
.tf-ign-sm{font-size:14px}
.tf-ign, .tf-ign-sm{display:inline-block}
.tf-ign::after{content:"";position:relative;display:block;height:2px;margin:6px auto 6px auto;width:100%;max-width:240px;border-radius:2px;background:linear-gradient(90deg, rgba(0,198,255,0.12), rgba(0,198,255,0.55), rgba(0,198,255,0.12));animation:underlinePulse 2.6s ease-in-out infinite}
.tf-ign-sm::after{width:100%;max-width:160px}
@keyframes underlinePulse{0%{filter:brightness(.9);opacity:.65}20%{filter:brightness(1.1);opacity:.85}25%{filter:brightness(1.3);opacity:1}75%{filter:brightness(1.34);opacity:1}85%{filter:brightness(1.1);opacity:.88}100%{filter:brightness(.95);opacity:.78}}

/* Checkbox styling for roles */
.tf-role{display:inline-flex;align-items:center;gap:6px;margin-right:8px}
.tf-role input{accent-color:#00c6ff}

/* Tick/Cross role chips */
.tf-roles{display:flex;flex-wrap:wrap;gap:6px}
.tf-rolechip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:10px;border:1px solid rgba(0,198,255,.25);background:rgba(0,198,255,.08);font-weight:700}
.tf-rolechip.yes{color:#7efcc6;border-color:rgba(46,204,113,.45);background:rgba(46,204,113,.12)}
.tf-rolechip.no{color:#ff9bb0;border-color:rgba(231,76,60,.45);background:rgba(231,76,60,.12)}

.tf-item:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(0,0,0,.4)}

/* Kit chips */
.tf-kitchips{display:flex;flex-wrap:wrap;gap:8px}
.tf-kitchip{padding:4px 10px;border-radius:10px;border:1px solid rgba(0,198,255,.35);background:rgba(0,198,255,.12);color:#aef0ff;font-weight:700;box-shadow:0 0 10px rgba(0,198,255,.25)}

/* Wallet styles */
.tf-wallet{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.wallet-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;border:1px solid rgba(0,198,255,.25);background:rgba(0,198,255,.06);box-shadow:0 0 10px rgba(0,198,255,.15)}
.tf-icon{width:20px;height:20px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(0,198,255,.35))}
.wallet-label{color:#bfe9ff;font-weight:700}
.wallet-value{color:#e7f9ff;font-weight:800}

/* Button polish + variants */
.tf-btn{padding:10px 14px;border-radius:12px;border:1px solid rgba(0,198,255,.35);background:linear-gradient(180deg, rgba(0,198,255,.12), rgba(0,198,255,.06));color:#9fe8ff;cursor:pointer;transition:transform .14s ease, box-shadow .14s ease;background-clip:padding-box;font-family:'Orbitron',sans-serif;letter-spacing:.4px}
.tf-btn:hover{transform:translateY(-1px);box-shadow:0 8px 16px rgba(0,0,0,.35)}
.tf-btn:active{transform:translateY(0);filter:brightness(1.05)}
.tf-btn.primary{border-color:rgba(0,198,255,.6);background:rgba(0,198,255,.18);color:#bff2ff}
.tf-btn.success{border-color:rgba(46,204,113,.55);background:rgba(46,204,113,.16);color:#caffdf}
.tf-btn.danger{border-color:rgba(231,76,60,.55);background:rgba(231,76,60,.14);color:#ffd3d9}
.tf-btn.ghost{border-color:rgba(158,199,255,.35);background:rgba(158,199,255,.08);color:#cfe7ff}

/* Inputs + textarea */
.modal .body textarea{border:1px solid rgba(0,198,255,.3) !important;background:rgba(0,198,255,.06) !important;color:#cfe7ff !important;box-shadow:inset 0 0 12px rgba(0,198,255,.15);font-family:'Poppins',system-ui,sans-serif}

/* Mobile-first responsive adjustments */
@media (max-width: 640px){
  .tf-container{max-width: 100%; padding: 0 6px}
  .tf-list{grid-template-columns: 1fr}
  .tf-item{grid-template-columns: auto 1fr;}
  .tf-actions{flex-wrap: wrap}
  .tf-avatar{width:72px;height:72px}
  .tf-avatar-sm{width:36px;height:36px}
  .tf-card{width:100%; padding:12px; gap:8px}
  .tf-metrics{grid-template-columns: 1fr}
  .m-value{font-size:16px}
  .modal .panel{width: 96vw; max-width: 540px; max-height: 90vh; overflow: auto}
  .tf-wallet{gap:10px}
  .wallet-item{padding:5px 8px}
}

@media (max-width: 380px){
  .tf-item{padding:8px; gap:8px}
  .tf-tab{padding:8px 10px}
  .tf-stars .star{font-size:18px}
  .storage-chip{padding:3px 8px}
}