@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

#crazy_coder-desc-wrapper {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #000; color: #fff; padding: 24px 12px; display: flex; justify-content: center;
}

#crazy_coder-desc-wrapper .crazy_coder-container {
  background: rgba(20,20,20,0.92);
  border: 1px solid rgba(74,58,253,0.35);
  box-shadow: 0 0 26px rgba(74,58,253,0.35);
  border-radius: 20px; padding: 28px 22px; width: 100%; max-width: 980px; box-sizing: border-box;
}

#crazy_coder-desc-wrapper .crazy_coder-title { margin:0 0 6px; font-size:1.9rem; font-weight:700; text-align:center; }
#crazy_coder-desc-wrapper .crazy_coder-subtitle { margin:0 0 18px; text-align:center; color:#bdbdbd; }

#crazy_coder-desc-wrapper .crazy_coder-inputs { display:grid; gap:14px; }
#crazy_coder-desc-wrapper .crazy_coder-grid { display:grid; grid-template-columns: repeat(3, minmax(180px,1fr)); gap:12px; }
#crazy_coder-desc-wrapper .crazy_coder-field { display:flex; flex-direction:column; gap:6px; }
#crazy_coder-desc-wrapper .crazy_coder-row { flex-direction:row; align-items:center; gap:8px; }

#crazy_coder-desc-wrapper .crazy_coder-label { font-size:0.9rem; color:#cfcafc; }

#crazy_coder-desc-wrapper .crazy_coder-input,
#crazy_coder-desc-wrapper .crazy_coder-select {
  border-radius:10px; border:1px solid rgba(124,104,255,0.45); background:#0f0f10; color:#fff;
  padding:10px 12px; font-size:0.98rem; transition:box-shadow .25s ease, border-color .25s ease;
}

#crazy_coder-desc-wrapper .crazy_coder-select { background:#fff; color:#4A3AFD; font-weight:600; cursor:pointer; }
#crazy_coder-desc-wrapper .crazy_coder-input:focus,
#crazy_coder-desc-wrapper .crazy_coder-select:focus { outline:none; border-color:#7C68FF; box-shadow:0 0 10px rgba(124,104,255,.7); }

#crazy_coder-desc-wrapper .crazy_coder-hint { color:#a7a4c9; font-size:12px; }

#crazy_coder-desc-wrapper .crazy_coder-actions-top { display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
#crazy_coder-desc-wrapper .crazy_coder-btn {
  padding:12px 22px; border-radius:12px; border:none; background:linear-gradient(90deg,#4A3AFD,#7C68FF);
  color:#fff; font-weight:700; cursor:pointer; box-shadow:0 0 18px rgba(124,104,255,.6);
  transition:transform .2s ease, box-shadow .2s ease;
}
#crazy_coder-desc-wrapper .crazy_coder-btn:hover { transform:translateY(-1px) scale(1.02); box-shadow:0 0 24px rgba(124,104,255,.9); }

#crazy_coder-desc-wrapper .crazy_coder-btn-outline {
  padding:10px 16px; border-radius:10px; background:transparent; border:1px solid rgba(124,104,255,.6); color:#e9e6ff; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
#crazy_coder-desc-wrapper .crazy_coder-btn-outline:hover { background:rgba(124,104,255,.12); transform:translateY(-1px); }

#crazy_coder-desc-wrapper .crazy_coder-output { margin-top:16px; }
#crazy_coder-desc-wrapper .crazy_coder-results { display:grid; gap:12px; }
#crazy_coder-desc-wrapper .crazy_coder-card {
  background:#fff; color:#1b1b1b; border-radius:12px; padding:14px 16px; box-shadow:0 0 18px rgba(0,0,0,.25);
  border-left:4px solid #7C68FF; position:relative;
}
#crazy_coder-desc-wrapper .crazy_coder-meta {
  position:absolute; top:10px; right:12px; color:#6f6f83; font-size:12px;
}

/* Responsive */
@media (max-width: 780px) {
  #crazy_coder-desc-wrapper .crazy_coder-grid { grid-template-columns: 1fr; }
}