/* Scoped cybertool-bol styles (BEM + custom properties) */
/* Mobile-first, namespaced to .cybertool-bol to avoid global pollution */

.cybertool-bol {
  --neon-cyan: #00f3ff;
  --cyber-purple: #7028e4;
  --matrix-green: #00ff9d;
  --cyber-black: #0a0a12;
  --hologram-gradient: linear-gradient(45deg, var(--cyber-purple), var(--neon-cyan));
  --glass-color: rgba(255,255,255,0.03);
  --panel-radius: 12px;
  --pad: 1rem;
  --font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  --btn-height: 44px;
  box-sizing: border-box;
  font-family: var(--font-family);
  color: #e6f7ff;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0.5rem;
  position: relative;
}

/* Main canvas / particle backdrop */
.cybertool-bol__panel--canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--panel-radius);
  overflow: hidden;
}
.cybertool-bol__canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* inner content sits above canvas */
.cybertool-bol__inner {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(10,10,18,0.88), rgba(4,4,8,0.88));
  border-radius: var(--panel-radius);
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(2,2,6,0.6), 0 2px 8px rgba(0,0,0,0.6);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  overflow: hidden;
}

/* Header */
.cybertool-bol__header {
  display:flex;
  gap:0.5rem;
  align-items:center;
  margin-bottom:0.75rem;
}
.cybertool-bol__title {
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:0.06em;
  background: linear-gradient(90deg, var(--neon-cyan), var(--cyber-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: lowercase;
}
.cybertool-bol__sub {
  font-size:0.78rem;
  color: rgba(230,247,255,0.55);
  margin-left:auto;
}

/* Grid layout (mobile-first vertical stack) */
.cybertool-bol__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

/* Columns */
.cybertool-bol__col {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding: var(--pad);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.04);
  min-height: 220px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}

/* Ensure input/output boxes have same visual size */
.cybertool-bol__input,
.cybertool-bol__output {
  width: 100%;
  min-height: 220px;
  max-height: 480px;
  padding: 0.75rem;
  border-radius: 8px;
  font-family: var(--font-family);
  font-size: 0.95rem;
  resize: vertical;
  line-height:1.3;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(4,4,6,0.36), rgba(4,4,6,0.18));
  color: #dffeff;
  border: 1px solid rgba(255,255,255,0.03);
  outline: none;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5), 0 0 18px rgba(112,40,228,0.03) inset;
}

/* Output is a div but mimic textarea behaviour */
.cybertool-bol__output {
  overflow:auto;
  white-space: pre-wrap;
  word-break: break-word;
  display:block;
}

/* Labels and small text */
.cybertool-bol__label { font-size:0.9rem; color: rgba(230,247,255,0.88); }
.cybertool-bol__smalllabel { font-size:0.75rem; color: rgba(230,247,255,0.62); margin-bottom:0.25rem; display:block; }

/* Controls row */
.cybertool-bol__controls {
  display:flex;
  gap:0.5rem;
  align-items:center;
  justify-content: flex-start;
  flex-wrap:wrap;
}
.cybertool-bol__controls--bottom { justify-content:flex-start; gap:0.5rem; }

/* Control groups */
.cybertool-bol__control-group {
  display:flex;
  gap:0.5rem;
  align-items:center;
}
.cybertool-bol__control-group--stretch { margin-left:auto; }

/* Numeric input */
.cybertool-bol__number {
  width:72px;
  min-height: var(--btn-height);
  padding:0 0.5rem;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.04);
  background: rgba(0,0,0,0.25);
  color: #e6f7ff;
  font-family: var(--font-family);
  font-size:0.95rem;
  box-sizing:border-box;
}

/* Buttons — consistent touch target >=44px */
.cybertool-bol__btn {
  min-height: var(--btn-height);
  line-height: var(--btn-height);
  padding: 0 1rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight:600;
  font-size:0.95rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 6px 20px rgba(2,2,10,0.45);
  background: transparent;
  color: #001018;
}

/* Primary (neon) */
.cybertool-bol__btn--primary {
  background: var(--hologram-gradient);
  color: #010409;
  box-shadow: 0 8px 30px rgba(112,40,228,0.18), 0 2px 8px rgba(0,243,255,0.06) inset;
}
.cybertool-bol__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(112,40,228,0.22), 0 4px 18px rgba(0,243,255,0.06) inset;
}

/* Ghost */
.cybertool-bol__btn--ghost {
  background: transparent;
  color: rgba(230,247,255,0.88);
  border: 1px solid rgba(255,255,255,0.04);
}

/* Accent buttons */
.cybertool-bol__btn--accent {
  background: linear-gradient(90deg, var(--matrix-green), var(--neon-cyan));
  color:#02120b;
}
.cybertool-bol__btn--accent-outline {
  background: transparent;
  color: var(--matrix-green);
  border: 1px solid rgba(0,255,157,0.12);
}

/* Meta area */
.cybertool-bol__meta {
  margin-left:auto;
  display:flex;
  gap:0.6rem;
  align-items:center;
  font-size:0.85rem;
  color: rgba(230,247,255,0.7);
}
.cybertool-bol__meta-item { background: rgba(255,255,255,0.02); padding:0.35rem 0.5rem; border-radius:8px; }

/* Hint and status */
.cybertool-bol__hint { font-size:0.72rem; color: rgba(230,247,255,0.45); }
.cybertool-bol__status { font-size:0.82rem; color: rgba(230,247,255,0.6); }

/* Footer */
.cybertool-bol__footer { margin-top:0.6rem; display:flex; align-items:center; justify-content:space-between; }

/* Hover-activated gradients (for the entire inner card) */
.cybertool-bol__inner:hover {
  box-shadow: 0 18px 50px rgba(2,2,10,0.65), 0 6px 28px rgba(0,0,0,0.6);
}

/* Loading state */
.cybertool-bol--loading .cybertool-bol__status::after {
  content: ' • generating…';
  color: var(--neon-cyan);
  animation: cybertool-bol--pulse 1.2s infinite;
}
@keyframes cybertool-bol--pulse {
  0% { opacity: 0.3; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0.3; transform: scale(0.98); }
}

/* Accessibility focus */
.cybertool-bol__btn:focus, .cybertool-bol__number:focus, .cybertool-bol__input:focus {
  outline: 2px solid rgba(0,243,255,0.22);
  outline-offset: 2px;
  box-shadow: 0 6px 24px rgba(0,243,255,0.06);
}

/* Larger screens: horizontal two-column layout */
@media (min-width: 600px) {
  .cybertool-bol__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

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

/* Finger-friendly spacing at very small widths (320px) */
@media (max-width: 420px) {
  .cybertool-bol__number { width: 100%; }
  .cybertool-bol__control-group--stretch { width:100%; display:flex; gap:0.5rem; }
  .cybertool-bol__controls { gap:0.5rem; }
}

/* Subtle glowing border around output when text present */
.cybertool-bol__output:empty { border-color: rgba(255,255,255,0.03); }
.cybertool-bol__output:not(:empty) {
  box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 0 30px rgba(0,255,157,0.04) inset;
  border: 1px solid rgba(0,255,157,0.06);
}

/* tiny utility */
.cybertool-bol__control-group .cybertool-bol__btn { min-width:88px; }