/* Scoped / namespaced CSS for Funny Job Title Generator (BEM) */
/* Note: you may keep the :root block below or merge into a global theme. */
:root {
  --neon-cyan: #00f3ff;
  --cyber-purple: #7028e4;
  --matrix-green: #00ff9d;
  --cyber-black: #0a0a12;
  --hologram-gradient: linear-gradient(45deg, var(--cyber-purple), var(--neon-cyan));
}

/* Fallback scoped vars to avoid global collisions if desired */
.cybertool-funnyjob--root {
  --ct-bg: var(--cyber-black);
  --ct-cyan: var(--neon-cyan);
  --ct-purple: var(--cyber-purple);
  --ct-green: var(--matrix-green);
  --ct-holo: var(--hologram-gradient);
  --ct-radius: 14px;
  --ct-gap: 16px;
  --ct-font: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  --ct-ease: cubic-bezier(.2,.9,.32,1);
  isolation: isolate; /* prevent bleeding backdrop-filters from page */
}

/* Container */
.cybertool-funnyjob {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  border-radius: var(--ct-radius);
  overflow: hidden;
  position: relative;
  font-family: var(--ct-font);
  color: white;
  box-sizing: border-box;
  --panel-padding: 18px;
}

/* Background (particles canvas + holographic glare) */
.cybertool-funnyjob__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.cybertool-funnyjob__particles {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.15;
  mix-blend-mode: screen;
}

.cybertool-funnyjob__glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 400px at 10% 10%, rgba(112,40,228,0.12), transparent 10%),
              radial-gradient(800px 300px at 90% 90%, rgba(0,243,255,0.08), transparent 10%);
  filter: blur(40px);
  transform: translateZ(0);
  pointer-events: none;
}

/* Inner content layering */
.cybertool-funnyjob__inner {
  position: relative;
  z-index: 2;
  backdrop-filter: blur(6px) saturate(1.1);
  background: linear-gradient(180deg, rgba(10,10,18,0.55), rgba(10,10,18,0.65));
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 30px rgba(2,4,10,0.7), inset 0 1px 0 rgba(255,255,255,0.02);
}

/* Header with centered tool name */
.cybertool-funnyjob__header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px var(--ct-gap);
  border-bottom: 1px solid rgba(255,255,255,0.02);
}

.cybertool-funnyjob__title {
  font-size: 18px;
  text-transform: lowercase;
  letter-spacing: 0.18em;
  margin: 0;
  padding: 6px 14px;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.03);
  color: var(--ct-cyan);
  text-shadow: 0 0 8px rgba(0,243,255,0.18);
}

/* Main layout - mobile-first (vertical stack) */
.cybertool-funnyjob__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ct-gap);
  padding: 14px;
}

/* Panels */
.cybertool-funnyjob__panel {
  padding: var(--panel-padding);
  min-height: 150px;
  border-radius: 12px;
  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);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

/* Input styles */
.cybertool-funnyjob__label {
  display: block;
  font-size: 12px;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.7);
}

.cybertool-funnyjob__input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.03);
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(255,255,255,0.01));
  color: white;
  outline: none;
  -webkit-appearance: none;
  transition: box-shadow 220ms var(--ct-ease), transform 220ms var(--ct-ease);
}

/* Focus ring (glowy) */
.cybertool-funnyjob__input:focus {
  box-shadow: 0 0 28px rgba(0,243,255,0.12), 0 0 6px rgba(112,40,228,0.06);
  transform: translateY(-2px);
  border-color: rgba(0,243,255,0.22);
}

/* Controls area with 44px touch target rule */
.cybertool-funnyjob__controls {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Buttons: consistent 44px min touch size */
.cybertool-funnyjob__btn {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
  font-size: 13px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 180ms var(--ct-ease), box-shadow 180ms var(--ct-ease);
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color: white;
  box-shadow: 0 6px 18px rgba(2,4,10,0.6);
  border: 1px solid rgba(255,255,255,0.03);
  position: relative;
  font-weight: 600;
}

/* Primary generate button with holographic gradient + hover gradient effect */
.cybertool-funnyjob__btn--generate {
  background-image: var(--ct-holo);
  background-size: 200% 100%;
  color: rgba(8,8,12,1);
  text-shadow: none;
  border: 1px solid rgba(255,255,255,0.06);
}

/* Hover activated gradient (animated) */
.cybertool-funnyjob__btn--generate:hover,
.cybertool-funnyjob__btn--generate:focus {
  transform: translateY(-3px);
  background-position: 100% 0;
  box-shadow: 0 12px 30px rgba(112,40,228,0.16), 0 2px 8px rgba(0,243,255,0.06);
}

/* Secondary buttons style */
.cybertool-funnyjob__btn--regen { background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); }
.cybertool-funnyjob__btn--copy { background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); }

/* Button loader micro-animation */
.cybertool-funnyjob__btn__loader {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.02);
  transform-origin: center;
  opacity: 0;
  transition: opacity 160ms linear;
}

/* When busy add an animated pulse */
.cybertool-funnyjob__btn[aria-busy="true"] .cybertool-funnyjob__btn__loader {
  opacity: 1;
  animation: ct-spin 900ms linear infinite;
  border: 2px solid rgba(255,255,255,0.06);
  border-top-color: rgba(0,243,255,0.8);
}

/* small loader spin keyframes */
@keyframes ct-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Toggles (checkbox labels) */
.cybertool-funnyjob__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
}

.cybertool-funnyjob__checkbox-input {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}

/* Output area */
.cybertool-funnyjob__output {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
}

/* Placeholder */
.cybertool-funnyjob__placeholder {
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  padding: 10px;
}

/* Generated name card */
.cybertool-funnyjob__name {
  padding: 14px;
  border-radius: 10px;
  font-size: 16px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, rgba(0,0,0,0.45), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.03);
  transition: transform 240ms var(--ct-ease), box-shadow 240ms var(--ct-ease);
  box-shadow: 0 8px 18px rgba(2,4,10,0.5);
  cursor: default;
}

/* Neon glow effect tied to each name (dynamic accent via data-accent) */
.cybertool-funnyjob__name::before {
  content: "";
  display: block;
  width: 6px;
  height: 100%;
  margin-right: 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--ct-cyan), var(--ct-purple));
  box-shadow: 0 0 18px rgba(0,243,255,0.12), 0 0 30px rgba(112,40,228,0.06);
}

/* Micro-interactions on hover */
.cybertool-funnyjob__name:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 40px rgba(0,0,0,0.6), 0 4px 14px rgba(112,40,228,0.08);
}

/* Actions under output */
.cybertool-funnyjob__actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

/* Footer meta */
.cybertool-funnyjob__footer {
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,0.02);
  text-align: center;
}

.cybertool-funnyjob__meta {
  color: rgba(255,255,255,0.45);
  font-size: 12px;
}

/* Desktop layout: horizontal split (input-left/output-right) */
@media (min-width: 600px) {
  .cybertool-funnyjob__main {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 18px;
    padding: 18px;
  }

  .cybertool-funnyjob__panel--input { order: 1; }
  .cybertool-funnyjob__panel--output { order: 2; }
}

/* Smooth transitions and animations for reveal */
.cybertool-funnyjob__name {
  opacity: 0;
  transform-origin: left center;
  animation: ct-fadeInUp 560ms var(--ct-ease) forwards;
}

@keyframes ct-fadeInUp {
  from { opacity: 0; transform: translateY(12px) scale(0.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Ensure all interactive items meet minimum 44px touch area */
.cybertool-funnyjob__btn, .cybertool-funnyjob__checkbox-input, .cybertool-funnyjob__input {
  touch-action: manipulation;
}

/* Accessibility: high-contrast focus ring */
.cybertool-funnyjob__btn:focus, .cybertool-funnyjob__input:focus {
  outline: 2px solid rgba(0,255,157,0.12);
  outline-offset: 3px;
}

/* Performance hint: reduce particle opacity on small devices */
@media (max-width: 420px) {
  .cybertool-funnyjob__particles { opacity: 0.08; }
}