/* === MAJ Modern UI v2.1 === */
.maj-root{--bg: #0b1220; --card:#0f172a; --muted:#94a3b8; --text:#e5ecff; --primary:#7c3aed; --primary-2:#a78bfa; --ring:rgba(124,58,237,0.45); --border:rgba(148,163,184,0.2); --shadow:0 10px 30px rgba(2,6,23,.25);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text); background: radial-gradient(600px 300px at 10% -20%, rgba(124,58,237,.25), transparent), radial-gradient(600px 300px at 110% -20%, rgba(99,102,241,.25), transparent);
  border-radius: 16px; padding: 0; margin: 12px 0; overflow: hidden; border:1px solid var(--border);
}
@media (prefers-color-scheme: light){
  .maj-root{ --bg:#f6f8ff; --card:#ffffff; --text:#0b1020; --muted:#475569; --border:rgba(15,23,42,0.08); --shadow:0 10px 30px rgba(2,6,23,.08); }
}
.maj-card{ background:var(--card); box-shadow:var(--shadow); }
.maj-header{ display:flex; align-items:center; justify-content:space-between; padding:20px 20px 0; }
.maj-title{ display:flex; gap:12px; align-items:flex-start;}
.maj-title h3{ margin:0; font-size:20px; line-height:1.2; letter-spacing:.2px;}
.maj-sub{ margin:.25rem 0 0; color:var(--muted); font-size:13px}
.maj-ico{ opacity:.9 }
.maj-steps{ display:flex; align-items:center; gap:8px;}
.maj-step{ width:28px; height:28px; border-radius:999px; display:grid; place-items:center; font-weight:600; font-size:13px; color:var(--text); background:rgba(124,58,237,.25); border:1px solid var(--border) }
.maj-step.is-active{ outline:3px solid var(--ring); background:linear-gradient(180deg, var(--primary), var(--primary-2)); color:white; border-color:transparent }
.maj-line{ width:42px; height:2px; background:linear-gradient(90deg, var(--border), rgba(124,58,237,.5)); border-radius:2px}

.maj-lead,.maj-panel{ padding:20px; }
.maj-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px }
@media (max-width:900px){ .maj-grid{ grid-template-columns: 1fr; } .maj-header{ flex-direction:column; align-items:flex-start; gap:10px} }

/* Floating field */
.maj-field{ position:relative; display:flex; flex-direction:column; gap:6px }
.maj-field > span{ position:absolute; left:12px; top:12px; background:transparent; padding:0 6px; color:var(--muted); font-size:13px; pointer-events:none; transition:all .18s ease }
.maj-field input,.maj-field select{
  appearance:none; background:rgba(148,163,184,0.08); border:1px solid var(--border); color:var(--text);
  border-radius:12px; padding:22px 14px 10px; outline:none; width:100%; transition:border-color .18s, box-shadow .18s, background .18s;
}
.maj-field select{ padding-right:36px; background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px); background-size:5px 5px; background-repeat:no-repeat; }
.maj-field input:focus,.maj-field select:focus{ border-color:var(--primary-2); box-shadow:0 0 0 4px var(--ring); background:rgba(124,58,237,0.06) }
.maj-field input::placeholder,.maj-field select::placeholder{ color:transparent }
.maj-field input:not(:placeholder-shown) ~ span, .maj-field input:focus ~ span,
.maj-field select:focus ~ span, .maj-field select:not(:placeholder-shown) ~ span{
  transform: translateY(-10px) scale(.90); background:var(--card); padding:0 6px; left:10px; color:var(--primary);
}

/* Rows & sections */
.maj-section{ display:flex; flex-direction:column; gap:14px }
.maj-row{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px }
@media (max-width:700px){ .maj-row{ grid-template-columns:1fr } }

/* Buttons */
.maj-btn{ --btn-bg:rgba(148,163,184,.1); --btn-bd:var(--border); --btn-fg:var(--text); display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg);
  cursor:pointer; user-select:none; transition:transform .06s ease, border-color .18s ease, background .18s ease, color .18s ease; text-decoration:none; font-weight:600
}
.maj-btn:hover{ transform:translateY(-1px) }
.maj-btn:active{ transform:translateY(0) scale(.98) }
.maj-primary{ --btn-bg: linear-gradient(180deg, var(--primary), var(--primary-2)); --btn-bd: transparent; --btn-fg: #fff; box-shadow: 0 8px 20px rgba(124,58,237,.35) }
.maj-secondary{ --btn-bg: rgba(124,58,237,.15); --btn-bd: rgba(124,58,237,.35); --btn-fg: var(--text) }
.maj-ghost{ --btn-bg: transparent; --btn-bd: var(--border); --btn-fg: var(--text) }
.maj-actions{ display:flex; gap:10px; margin-top:6px; flex-wrap:wrap }

/* Spinner inside button */
.maj-btn .maj-spinner{ width:16px; height:16px; border-radius:999px; border:2px solid rgba(255,255,255,.35); border-right-color:transparent; display:none; animation: maj-spin .7s linear infinite }
.maj-btn.is-loading .maj-btn-label{ opacity:.65 }
.maj-btn.is-loading .maj-spinner{ display:inline-block }
@keyframes maj-spin{ to { transform: rotate(360deg) } }

/* List & pagination */
.maj-list{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; margin-top:8px }
@media (max-width:900px){ .maj-list{ grid-template-columns:1fr } }
.maj-item{ border:1px solid var(--border); border-radius:12px; padding:12px; background:rgba(148,163,184,0.06) }
.maj-item strong{ display:block; font-size:15px; margin-bottom:4px }
.maj-item div{ color:var(--muted); font-size:13px }
.maj-pager{ margin:10px 0 0; display:flex; gap:8px; flex-wrap:wrap }
.maj-pager a{ padding:7px 10px; border-radius:10px; border:1px solid var(--border); color:var(--text); text-decoration:none; background:rgba(148,163,184,0.06) }
.maj-pager a.active{ outline:3px solid var(--ring); border-color:transparent; background:linear-gradient(180deg, var(--primary), var(--primary-2)); color:white }

/* Output */
.maj-out{ background: #0b1020; color:#e5ecff; border:1px dashed var(--border); border-radius:12px; padding:14px; min-height:72px; margin-top:10px; white-space:pre-wrap }
@media (prefers-color-scheme: light){ .maj-out{ background:#0f172a; color:#dbe6ff } }