/* WLPKP UI — scoped utilities (apply only inside .wlpkp-ui) */

.wlpkp-ui{
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-sm: 10px;
  --border: 1px solid rgba(255,255,255,.22);
  --surface: rgba(255,255,255,.06);
  --surface-strong: rgba(255,255,255,.12);
  --focus: #FEE440;
  --ink: #ffffff;
}

/* Layout helpers */
.wlpkp-ui .form-card{ max-width: min(760px, 92vw); margin: 5rem auto 3rem; padding: 1.25rem; }
.wlpkp-ui .field{ display:flex; flex-direction:column; gap:.45rem; margin:.8rem 0; }
.wlpkp-ui .label{ opacity:.9; font-weight:600; letter-spacing:.2px; }

/* Controls */
.wlpkp-ui .input,
.wlpkp-ui .select,
.wlpkp-ui textarea{
  padding: .85rem 1rem;
  border-radius: var(--radius-lg);
  border: var(--border);
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.wlpkp-ui .input::placeholder,
.wlpkp-ui textarea::placeholder{ color: rgba(255,255,255,.6); }
.wlpkp-ui .input:focus,
.wlpkp-ui .select:focus,
.wlpkp-ui textarea:focus{
  box-shadow: 0 0 0 3px rgba(254,228,64,.35);
  border-color: rgba(254,228,64,.75);
  background: rgba(255,255,255,.08);
}
.wlpkp-ui textarea{ min-height: 140px; resize: vertical; }

/* Grid */
.wlpkp-ui .group{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
@media (max-width: 900px){ .wlpkp-ui .group{ grid-template-columns: 1fr; } }

/* Chips */
.wlpkp-ui .chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.wlpkp-ui .chip{
  border-radius: 999px; padding: .38rem .7rem; border: var(--border);
  background: var(--surface-strong); color:#fff; cursor: pointer;
  transition: transform .1s ease, background .15s ease;
}
.wlpkp-ui .chip:hover{ transform: translateY(-1px); }
.wlpkp-ui .chip.selected{
  background: linear-gradient(90deg, var(--purple), var(--pink), var(--blue), var(--teal));
  color:#1d1630; border-color: transparent;
}

/* Tables */
.wlpkp-ui .table{ width:100%; border-collapse:collapse; }
.wlpkp-ui .table th, .wlpkp-ui .table td{ padding:.65rem; border-bottom:1px solid rgba(255,255,255,.18); text-align:left; }
.wlpkp-ui .table th{ opacity:.85; font-weight:600; }

/* Messages */
.wlpkp-ui .muted{ opacity:.8; }
.wlpkp-ui .success{ color:#00F5D4; }
.wlpkp-ui .error{ color:#FEE440; }

/* Focus ring (scoped) */
.wlpkp-ui :focus-visible{ outline: 3px solid var(--focus); outline-offset: 3px; }