/* /MockNFLDraft/styles/style.css */
:root{
  --bg:#0b1020; --card:#121a2b; --panel:#0e1526;
  --text:#e9f0ff; --muted:#a5b4d6; --line:rgba(255,255,255,.08);
  --accent:#22d3ee; --accent-2:#14b8a6; --shadow:0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Ubuntu,Helvetica,Arial;
  background:linear-gradient(180deg,#0a0f1e 0%, #0a1124 60%, #09122b 100%);
  color:var(--text);
}

/* Header */
.header{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:20px 16px; border-bottom:1px solid var(--line);
  backdrop-filter:saturate(120%) blur(6px); position:sticky; top:0; z-index:30; background:rgba(9,17,43,.6);
}
.brand{display:flex; gap:14px; align-items:center}
.logo{width:40px;height:40px;border-radius:12px;background:radial-gradient(60% 60% at 50% 30%,#2dd4bf,transparent),linear-gradient(135deg,#1f2937,#0b1220); display:grid; place-items:center; font-size:20px}
h1{font-size:clamp(18px,3.2vw,26px);margin:0}
.sub{margin:2px 0 0;color:var(--muted);font-size:12px}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{border:1px solid var(--line); color:#9fe3ff; background:rgba(34,211,238,.12);
  padding:6px 10px; border-radius:999px; font-size:12px}

/* Filters */
/*.filters{background:linear-gradient(180deg,rgba(18,26,43,.8),rgba(18,26,43,.6)); border-bottom:1px solid var(--line)}*/
/*.filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap; 
}
*/
.sticky{position:sticky; top:68px; z-index:20}
.controls{max-width:1100px;margin:0 auto;display:flex;gap:10px;flex-wrap:wrap;padding:12px 16px}
.control{
  flex:1 1 220px; min-height:42px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel); color:var(--text); padding:10px 12px; outline:none;
}
.btn{
  background:linear-gradient(135deg,#22d3ee,#14b8a6); color:#05121e; font-weight:700;
  border:none; border-radius:12px; padding:10px 14px; cursor:pointer; box-shadow:var(--shadow);
}
.btn:hover{filter:brightness(1.05)}

/* Layout */
.container{max-width:1100px;margin:16px auto;padding:0 16px 60px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{
  grid-column:span 12; background:linear-gradient(180deg,rgba(18,26,43,.85),rgba(13,20,36,.9));
  border:1px solid var(--line); border-radius:18px; padding:16px; box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-2px); border-color:rgba(34,211,238,.35)}
@media(min-width:700px){ .card{grid-column:span 6} }
@media(min-width:1024px){ .card{grid-column:span 4} }

.title{margin:0 0 6px;font-size:18px}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
.pill{font-size:12px;color:var(--muted);padding:4px 8px;background:rgba(255,255,255,.04);border-radius:999px;border:1px solid var(--line)}
.pick{color:#9fe3ff;border-color:rgba(34,211,238,.35);background:rgba(34,211,238,.08);font-weight:700}
.desc{color:#dfe7ff;font-size:14px;line-height:1.45}

/* Empty + status */
.empty{color:var(--muted);text-align:center;margin:24px 0}
.hidden{display:none}
.status{max-width:1100px;margin:18px auto;padding:0 16px}
.skeleton-list{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.sk-card{grid-column:span 12;height:140px;border-radius:18px;background:linear-gradient(90deg,#11182a 25%,#142038 37%,#11182a 63%);animation:shimmer 1.4s infinite linear;background-size:400% 100%;border:1px solid var(--line)}
@media(min-width:700px){ .sk-card{grid-column:span 6} }
@media(min-width:1024px){ .sk-card{grid-column:span 4} }
@keyframes shimmer{0%{background-position:0 0}100%{background-position:100% 0}}

/* Footer */
.footer{border-top:1px solid var(--line);padding:18px 16px;text-align:center;color:var(--muted)}