/* ===========================================================
   MineKonnect — Composants UI
   =========================================================== */

/* --- Boutons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:14.5px;
  padding:13px 22px; border-radius:var(--r-pill); border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-gold{
  background:var(--gold-grad); color:#1A1200;
  box-shadow:0 8px 22px rgba(201,162,39,0.28);
}
.btn-gold:hover:not(:disabled){ box-shadow:0 10px 28px rgba(201,162,39,0.42); }
.btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--border-soft);
}
.btn-ghost:hover{ border-color:var(--gold-500); color:var(--gold-300); }
.btn-outline-gold{ background:transparent; border-color:var(--gold-600); color:var(--gold-400); }
.btn-outline-gold:hover{ background:rgba(230,196,104,0.08); }
.btn-danger{ background:rgba(225,85,92,0.14); border-color:rgba(225,85,92,0.4); color:#f2a1a5; }
.btn-danger:hover{ background:rgba(225,85,92,0.24); }
.btn-sm{ padding:9px 16px; font-size:13px; }
.btn-block{ width:100%; }
.btn-icon{ padding:11px; border-radius:var(--r-pill); }

/* --- Champs de formulaire --- */
.field{ margin-bottom:18px; }
.field label{
  display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  color:var(--ink-dim); margin-bottom:8px; text-transform:uppercase; letter-spacing:.04em;
}
.input, select.input, textarea.input{
  width:100%; background:var(--surface-2); border:1px solid var(--border-soft);
  color:var(--ink); font-family:var(--font-body); font-size:15px;
  padding:13px 16px; border-radius:var(--r-sm); transition:border-color .15s, background .15s;
}
.input::placeholder{ color:var(--ink-mute); }
.input:focus{ border-color:var(--gold-500); background:var(--surface-3); outline:none; }
textarea.input{ resize:vertical; min-height:110px; }
.input-wrap{ position:relative; }
.input-wrap .input{ padding-right:44px; }
.input-wrap .input-suffix{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--ink-mute); cursor:pointer;
}
.input-wrap .input-suffix:hover{ color:var(--gold-400); }
.checkbox-row{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-dim); }
.checkbox-row input{ accent-color:var(--gold-500); width:16px; height:16px; }

.error-banner, .success-banner{
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:var(--r-sm);
  font-size:13.5px; margin-bottom:16px; line-height:1.5;
}
.error-banner{ background:rgba(225,85,92,0.1); border:1px solid rgba(225,85,92,0.35); color:#f3a9ad; }
.success-banner{ background:rgba(63,184,127,0.1); border:1px solid rgba(63,184,127,0.35); color:#8fe0b8; }

/* --- Cartes --- */
.card{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
}
.card-pad{ padding:28px; }

/* --- Badge / sceau (motif signature : cachet de lingot) --- */
.seal{
  --seal-size:56px; width:var(--seal-size); height:var(--seal-size); border-radius:50%;
  display:flex; align-items:center; justify-content:center; position:relative;
  background:radial-gradient(circle at 32% 28%, var(--gold-100), var(--gold-600) 60%, var(--gold-900) 100%);
  color:#241905; font-family:var(--font-display); font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.25);
}
.seal::before{
  content:''; position:absolute; inset:5px; border-radius:50%;
  border:1px dashed rgba(36,25,5,.35);
}
.badge{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; padding:5px 11px; border-radius:var(--r-pill);
  font-family:var(--font-mono);
}
.badge-gold{ background:rgba(230,196,104,0.14); color:var(--gold-300); border:1px solid rgba(230,196,104,.3); }
.badge-success{ background:rgba(63,184,127,0.14); color:#7fe0ac; border:1px solid rgba(63,184,127,.3); }
.badge-danger{ background:rgba(225,85,92,0.14); color:#f2a1a5; border:1px solid rgba(225,85,92,.3); }
.badge-neutral{ background:var(--surface-3); color:var(--ink-dim); border:1px solid var(--border-soft); }

/* --- Divider "veine d'or" --- */
.vein-divider{ height:2px; border:none; border-radius:2px; background:var(--gold-grad); opacity:.5; margin:0; }

/* --- Toasts --- */
#toast-stack{ position:fixed; top:20px; right:20px; z-index:2000; display:flex; flex-direction:column; gap:10px; }
.toast{
  min-width:260px; max-width:340px; background:var(--surface-2); border:1px solid var(--border);
  border-left:3px solid var(--gold-500); border-radius:var(--r-sm); padding:14px 16px;
  box-shadow:var(--shadow-pop); font-size:13.5px; color:var(--ink);
  animation:toast-in .25s ease;
}
.toast.toast-success{ border-left-color:var(--success); }
.toast.toast-error{ border-left-color:var(--danger); }
@keyframes toast-in{ from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:translateX(0);} }

/* --- Modal --- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(6,6,9,.72); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:1500;
}
.modal-box{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg);
  width:100%; max-width:440px; box-shadow:var(--shadow-pop); overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; padding:18px 22px;
  border-bottom:1px solid var(--border-soft); background:rgba(230,196,104,.05);
}
.modal-head h3{ font-size:17px; }
.modal-close{ background:none; border:none; color:var(--ink-mute); cursor:pointer; font-size:20px; line-height:1; }
.modal-close:hover{ color:var(--ink); }
.modal-body{ padding:22px; }

/* --- Empty state --- */
.empty-state{ text-align:center; padding:60px 20px; color:var(--ink-dim); }
.empty-state .seal{ margin:0 auto 18px; }
.empty-state h3{ font-size:19px; color:var(--ink); margin-bottom:8px; }
.empty-state p{ font-size:14px; max-width:360px; margin:0 auto; }

/* --- Spinner --- */
.spinner{ width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.25); border-top-color:var(--gold-400); animation:spin 0.8s linear infinite; display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loading-row{ display:flex; align-items:center; justify-content:center; gap:10px; padding:40px; color:var(--ink-dim); font-size:14px; }