/* --- ringtones.ai base (no Tailwind build required) --- */
:root { --ringtone: #f0abfc; }
* { box-sizing: border-box; }
html,body { height: 100%; }
body {
  background: #0b0b0f;
  color: #e5e5e5;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* Buttons */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem 1rem; border-radius:12px; border:1px solid rgba(240,171,252,.35);
  background: rgba(240,171,252,.18); color:#f5d0fe; text-decoration:none;
  transition:.2s ease-in-out; box-shadow: 0 0 0 0 rgba(0,0,0,.0);
}
.btn-primary:hover{ background: rgba(240,171,252,.28); }

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06); color:#e5e5e5; text-decoration:none; transition:.2s;
}
.btn-ghost:hover{ background: rgba(255,255,255,.10); }

/* Inputs / selects */
.input{
  width:100%; border-radius:10px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color:#e5e5e5; padding:.5rem .75rem;
  outline: none;
}
.input:focus{ box-shadow: 0 0 0 2px rgba(240,171,252,.35); border-color: rgba(240,171,252,.4); }

/* Make native <select> look dark */
select.input{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23e5e5e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right .55rem center; background-size: 18px 18px;
  padding-right:2rem;
}
select.input option{ background:#0b0b0f; color:#e5e5e5; }

/* Form field labels */
.form-field{ display:flex; flex-direction:column; }
.form-field > span{ font-size:.75rem; color:#a3a3a3; margin-bottom:.25rem; }

/* Cards */
.glass{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); }
.cat-card{
  display:block; text-align:center; border:1px solid rgba(255,255,255,.1);
  padding:1rem; border-radius:12px; color:#e5e5e5; transition:.2s;
}
.cat-card:hover{ border-color: rgba(240,171,252,.5); color:#f5d0fe; }

audio{ width:100%; }
pre{ white-space: pre-wrap; word-break: break-word; }