:root{
  --bg:#0f1113;
  --panel:#0f1416;
  --muted:#9aa3aa;
  --accent:#0d6efd;
  --card-border: rgba(255,255,255,0.04);
  --btn-hover-bg: #fff;
  --btn-hover-color: #000;
  --c-infix: #7b5cff88;
  --c-offensive: #d9534f88;
  --c-defensive: #4da3ff88;
  --c-skill: #5ac18e88;
  --c-gem: #ffd16688;
  --c-perk: #f6a62388;
  --dot-size: 10px;
}

html,body{height:100%;}
body{
  background: linear-gradient(180deg,#0b0c0d,#0f1113);
  color:#e6eef2;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0;
  -webkit-font-smoothing:antialiased;
}

/* left nav */
.leftbar{
  background: linear-gradient(180deg,#0d1013,#0e1216);
  border-right:1px solid rgba(255,255,255,0.03);
  min-height:100vh;padding:1rem;
}
.logo-box{
  width:72px;height:72px;border-radius:10px;
  background:linear-gradient(180deg,#241315,#3b1717);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}
.logo-box img{width:44px;height:44px;object-fit:contain;filter:grayscale(10%) contrast(1.1);}

/* build list */
.build-list .list-group-item{
  background:transparent;border:1px solid rgba(255,255,255,0.03);color:#dfe9ef;
  transition: background .15s, color .15s;padding:.6rem .75rem;
}
.build-item-actions{display:flex;gap:6px;opacity:0;transition:opacity .12s;}
.build-item:hover .build-item-actions{opacity:1;}
.build-item-actions .btn{padding:.18rem .35rem;border-radius:6px;font-size:.9rem}

/* token classes */
.token-infix{box-shadow:inset 0 0 16px var(--c-infix); background: linear-gradient(180deg, rgba(123,92,255,0.18), rgba(123,92,255,0.06));}
.token-offensive{box-shadow:inset 0 0 16px var(--c-offensive); background: linear-gradient(180deg, rgba(217,83,79,0.14), rgba(217,83,79,0.06));}
.token-defensive{box-shadow:inset 0 0 16px var(--c-defensive); background: linear-gradient(180deg, rgba(77,163,255,0.14), rgba(77,163,255,0.06));}
.token-skill{box-shadow:inset 0 0 16px var(--c-skill); background: linear-gradient(180deg, rgba(90,193,142,0.14), rgba(90,193,142,0.06));}
.token-gem{box-shadow:inset 0 0 16px var(--c-gem); background: linear-gradient(180deg, rgba(255,209,102,0.14), rgba(255,209,102,0.06));}
.token-perk{box-shadow:inset 0 0 16px var(--c-perk); background: linear-gradient(180deg, rgba(246,166,35,0.14), rgba(246,166,35,0.06));}

/* selects & buttons */
/* ===== Select global ===== */
.form-select {
  background: linear-gradient(180deg, #121518, #0d1013);
  color: #e6eef2;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  transition: all 0.15s ease;
  appearance: none; /* remove OS arrow */
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23e6eef2' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 10px 6px;
}

.form-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(13,110,253,0.2);
}

/* ===== Option dropdown ===== */
.form-select option {
  background: #0f1113;
  color: #e6eef2;
}

/* === Group label === */
.form-select optgroup {
  color: #7a8b95;
  background: #0d1013;
  font-weight: 600;
}

/* === When hovering dropdown options (WebKit only) === */
select option:hover,
select option:focus {
  background: #1b1f22;
  color: #fff;
}

/* === Custom scrollbar for dropdowns === */
select::-webkit-scrollbar {
  width: 8px;
}
select::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.1);
  border-radius: 4px;
}
select::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255,255,255,0.25);
}

.btn-invert{ background:transparent;border:1px solid rgba(255,255,255,0.06);color:#e6eef2;padding:.45rem .7rem;border-radius:8px;transition:.12s; }
.btn-invert:hover{ background:#e6eef2;color:#0b0d10;border-color:transparent; }
.weight-group .btn{ border-radius:999px;margin-right:.5rem;padding:.5rem .85rem;border:1px solid rgba(255,255,255,0.04); background:transparent;color:var(--muted); transition: all .12s; }
.weight-group .btn.active{ background:var(--accent);color:#fff;border-color:var(--accent); box-shadow:0 6px 20px rgba(13,110,253,0.12); }

.passive-btns .btn{ font-size:.78rem;padding:.35rem .5rem;border-radius:6px;border:1px solid rgba(255,255,255,0.04); background:transparent;color:var(--muted);margin-right:.35rem;margin-bottom:.35rem; transition:all .12s; }
.passive-btns .btn.active{ color:#0b0d10;background:var(--btn-hover-bg);border-color:transparent; }
.passive-type-btn.active {
  background-color: currentColor;
  color: #0b0d10 !important;
  border-color: transparent !important;
}

/* small responsive tweaks */
@media (max-width: 991px){
  nav.leftbar{display:none;}
  main{padding:1rem;}
}

/* Gear content*/
.panel{background: linear-gradient(180deg,#0e1113,#0b0d0f);border-radius:10px;padding:1.1rem;border:1px solid rgba(255,255,255,0.03);}
.gear-grid { gap: 1rem; }
.gear-slot {
  aspect-ratio: 1/1;
  width:100%;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  position:relative;transition: transform .18s, box-shadow .18s, border-color .18s;padding:.6rem;
}
.gear-slot i { font-size:1.6rem; color: #e9eef2; }
.gear-label{
  font-size:.85rem;
  margin-top:.45rem;
  color:var(--muted);
  visibility: hidden;
}
.gear-slot:hover .gear-label{
  visibility: visible;
}
.gear-slot:hover{transform:translateY(-4px);cursor:pointer;border-color:var(--accent);box-shadow:0 10px 30px rgba(13,110,253,0.06)}
.gear-slot.active{border-color:var(--accent);box-shadow:0 16px 40px rgba(13,110,253,0.08);background:linear-gradient(180deg, rgba(13,110,253,0.06), rgba(255,255,255,0.01))}
.gear-slot img{
  width: auto!important;
  height: 2rem!important;
}
/* dots */
.gear-dots { position:absolute;top:8px;right:8px;display:flex;gap:6px; }
.gear-dot{ width:var(--dot-size);height:var(--dot-size);border-radius:50%; background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.03); }