/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500;
  cursor:pointer; border:none; transition:all .2s; text-decoration:none;
  white-space:nowrap;
}
.btn-primary { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; }
.btn-primary:hover { opacity:.88; transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--muted); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--surface2); color:var(--text); }
.btn-danger { background:rgba(242,92,92,.12); color:var(--danger); border:1px solid rgba(242,92,92,.25); }
.btn-full { width:100%; justify-content:center; padding:12px; }
.btn-sm { padding:6px 12px; font-size:12px; }

@media (max-width:640px) {
  .btn { font-size:13px; padding:8px 14px; }
  .btn-full { padding:13px; font-size:15px; }
}

/* ── CARDS ── */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px;
}
.card-title {
  font-family:'Syne',sans-serif; font-weight:700; font-size:15px; margin-bottom:16px;
}
@media (max-width:640px) {
  .card { padding:16px; border-radius:12px; }
}

/* ── BADGES ── */
.badge {
  display:inline-flex; align-items:center;
  padding:3px 9px; border-radius:99px; font-size:11px; font-weight:600;
}
.badge-blue   { background:rgba(79,142,247,.15);  color:var(--accent);  }
.badge-green  { background:rgba(34,211,165,.15);  color:var(--accent3); }
.badge-purple { background:rgba(124,92,252,.15);  color:var(--accent2); }
.badge-orange { background:rgba(245,166,35,.15);  color:var(--warn);    }
.badge-red    { background:rgba(242,92,92,.15);   color:var(--danger);  }

/* ── FORMS ── */
.form-group { margin-bottom:16px; }
.form-label { font-size:13px; font-weight:500; margin-bottom:6px; display:block; }
.form-input {
  width:100%; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:11px 14px;
  color:var(--text); font-family:'DM Sans',sans-serif; font-size:14px;
  outline:none; transition:border-color .2s;
}
.form-input:focus { border-color:var(--accent); }
.form-input::placeholder { color:var(--muted); }
.form-select {
  width:100%; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:11px 14px;
  color:var(--text); font-family:'DM Sans',sans-serif; font-size:14px;
  outline:none; appearance:none; cursor:pointer;
}
@media (max-width:640px) {
  .form-input, .form-select { font-size:16px; /* prevent iOS zoom */ padding:12px 14px; }
}

/* ── DIVIDER ── */
.divider { height:1px; background:var(--border); margin:20px 0; }

/* ── MODAL ── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.75);
  display:flex; align-items:center; justify-content:center;
  z-index:200; opacity:0; pointer-events:none; transition:opacity .25s;
  padding:16px;
}
.modal-overlay.show { opacity:1; pointer-events:all; }
.modal {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:28px; width:100%; max-width:440px;
  transform:translateY(20px); transition:transform .25s;
  max-height:90vh; overflow-y:auto;
}
.modal-overlay.show .modal { transform:translateY(0); }
.modal-title { font-family:'Syne',sans-serif; font-weight:700; font-size:18px; margin-bottom:20px; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:24px; flex-wrap:wrap; }

@media (max-width:640px) {
  .modal-overlay { align-items:flex-end; padding:0; }
  .modal {
    border-radius:var(--radius) var(--radius) 0 0;
    padding:24px 20px;
    animation:slideUp .3s ease;
    max-height:85vh;
  }
  .modal-actions { flex-direction:column-reverse; }
  .modal-actions .btn { width:100%; justify-content:center; }
}

/* ── PROGRESS BAR ── */
.progress-bar { height:6px; background:var(--border); border-radius:99px; overflow:hidden; }
.progress-fill { height:100%; border-radius:99px; transition:width .6s ease; }

/* ── UPLOAD ZONE ── */
.upload-zone {
  border:2px dashed var(--border); border-radius:var(--radius);
  padding:40px 24px; text-align:center; cursor:pointer; transition:all .2s;
}
.upload-zone:hover { border-color:var(--accent); background:rgba(79,142,247,.04); }
.upload-icon { font-size:36px; margin-bottom:12px; }
.upload-text { font-size:14px; color:var(--muted); line-height:1.5; }
.upload-text strong { color:var(--accent); }
@media (max-width:640px) {
  .upload-zone { padding:28px 16px; }
  .upload-icon { font-size:28px; }
}

/* ── LOGO ── */
.logo { display:flex; align-items:center; gap:10px; }
.logo-icon {
  width:36px; height:36px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.logo-text { font-family:'Syne',sans-serif; font-weight:800; font-size:20px; }
.logo-text span { color:var(--accent); }