/* styles/slip-polish.css
   Styles the existing slip.js output to look more professional.
   Uses !important to override inline styles from slip.js safely.
*/

.slip-list {
  display: grid !important;
  gap: 12px !important;
}

.slip-row {
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: linear-gradient(180deg, rgba(10, 16, 34, 0.70), rgba(5, 10, 22, 0.55)) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.28) !important;
  padding: 12px !important;
  position: relative;
  overflow: hidden;
}

.slip-row::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(80% 60% at 20% 0%, rgba(0,255,180,0.10), transparent 55%);
  pointer-events:none;
}

.slip-row > div:first-child {
  /* header */
  gap: 12px !important;
}

.slip-row > div:first-child > div:first-child > div:first-child {
  /* title line */
  font-size: 0.95rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.02em !important;
}

.slip-row > div:first-child > div:first-child > div:last-child {
  /* sub line */
  font-size: 0.72rem !important;
  opacity: 0.70 !important;
  letter-spacing: 0.10em !important;
}

.slip-row > div:first-child span {
  /* LINE badge + grade badge container */
  filter: saturate(1.05);
}

.slip-row > div:last-child {
  /* controls row */
  grid-template-columns: 1fr 94px 80px !important;
  gap: 10px !important;
}

.slip-row input[type="number"] {
  height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(0,0,0,0.22) !important;
  font-weight: 750 !important;
}

.slip-row input[type="number"]:focus {
  border-color: rgba(0,255,180,0.28) !important;
  box-shadow: 0 0 0 3px rgba(0,255,180,0.10) !important;
}

/* “Remove” button polish */
.slip-row button.player-pill:last-child {
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(0,0,0,0.22) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.slip-row button.player-pill:last-child:hover {
  border-color: rgba(0,255,180,0.22) !important;
  background: rgba(0,255,180,0.08) !important;
  transform: translateY(-1px);
}

/* Consistent ADD pill */
.pp-add-pill {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,180,0.22);
  background: rgba(0,0,0,0.18);
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.pp-add-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,180,0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 850;
  font-size: 0.85rem;
  line-height: 1;
  background: rgba(0,255,180,0.08);
}

.pp-add-text {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}