/* ============================================================
   components.css — Buttons, panels, form fields, feedback, theme toggle
   ============================================================ */

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 9px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent;
  transition: all .18s cubic-bezier(.4,0,.2,1);
  font-family: "DM Sans", sans-serif;
}
.btn svg { width: 13px; height: 13px }

/* Primary */
.bp {
  background: var(--gold); color: #fff;
  box-shadow: 0 2px 18px rgba(235,83,158,.3), 0 1px 3px rgba(0,0,0,.4);
}
.bp:hover {
  background: #f06aaa;
  transform: translateY(-1px);
  box-shadow: 0 4px 28px rgba(235,83,158,.48), 0 0 50px rgba(235,83,158,.12);
}
.bp:active { transform: translateY(0); box-shadow: 0 1px 8px rgba(235,83,158,.25) }

/* Ghost */
.bg {
  background: rgba(255,255,255,.04); color: var(--t2);
  border-color: rgba(255,255,255,.08);
}
.bg:hover { color: var(--tx); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14) }

/* Small */
.bs {
  background: var(--gold); color: #fff; padding: 5px 12px; font-size: 12px;
  box-shadow: 0 1px 12px rgba(235,83,158,.25);
}
.bs:hover { background: #f06aaa; transform: translateY(-1px) }

/* Danger */
.bd { background: transparent; color: var(--rd); border-color: rgba(177,54,47,.22) }
.bd:hover { background: rgba(177,54,47,.07); border-color: rgba(177,54,47,.5) }

/* Success */
.bn { background: transparent; color: var(--gn); border-color: rgba(76,175,130,.22) }
.bn:hover { background: rgba(76,175,130,.07); border-color: rgba(76,175,130,.5) }

/* ---- Panels ---- */
.pn {
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 1px 3px rgba(0,0,0,.5),
    0 8px 40px rgba(0,0,0,.5);
}
.ph {
  padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.02);
}
.pht { font-family: "Syne", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--t2) }
.pa  { font-size: 12px; color: var(--gold); cursor: pointer; opacity: .7; transition: opacity .15s }
.pa:hover { opacity: 1 }
.pb  { padding: 16px 18px }

/* ---- Form fields ---- */
.ef { display: flex; flex-direction: column; gap: 5px }
.ef label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--t3) }
.ef input, .ef select, .ef textarea {
  background: var(--bg3); border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px; color: var(--tx);
  font-family: "DM Sans", sans-serif; font-size: 13px; padding: 9px 12px; width: 100%;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ef input:focus, .ef select:focus, .ef textarea:focus {
  outline: none;
  border-color: rgba(235,83,158,.45);
  background: var(--bg4);
  box-shadow: 0 0 0 3px rgba(235,83,158,.1), 0 0 18px rgba(235,83,158,.07);
}
.ef input::placeholder, .ef textarea::placeholder { color: var(--t3) }

/* ---- Feedback messages ---- */
.err { background: rgba(177,54,47,.07); border: 1px solid rgba(177,54,47,.2); border-radius: 9px; padding: 10px 14px; font-size: 12px; color: var(--rd); display: none }
.err.on { display: block }
.ok-msg { background: rgba(76,175,130,.07); border: 1px solid rgba(76,175,130,.18); border-radius: 9px; padding: 10px 14px; font-size: 12px; color: var(--gn); display: none }
.ok-msg.on { display: block }

/* ---- Theme toggle ---- */
.theme-toggle { display: inline-flex; background: var(--bg3); border-radius: 10px; padding: 4px; gap: 4px; border: 1px solid var(--bo) }
.theme-opt { display: flex; align-items: center; gap: 7px; padding: 8px 20px; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid transparent; background: none; color: var(--t2); font-family: "DM Sans", sans-serif; transition: all .15s }
.theme-opt:hover { color: var(--tx) }
.theme-opt.on { background: var(--bg2); color: var(--tx); border-color: var(--bo); box-shadow: 0 1px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04) }
.theme-opt svg { width: 14px; height: 14px; flex-shrink: 0 }