/* ═══════════════════════════════════════
   AUXIL — Styles communs
═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --bd: #0F2344;
  --bm: #1E5FBF;
  --bl: #2FA4FF;
  --v:  #6A4CFF;
  --off: #F4F7FC;
  --mu: #6B7A99;
  --bo: #DDE4F0;
  --white: #fff;
  --gn: #16a34a; --gnb: #dcfce7;
  --rd: #dc2626; --rdb: #fee2e2;
  --ye: #d97706; --yeb: #fef3c7;
  --r: 14px; --rl: 20px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--off); color: var(--bd); overflow-x: hidden; }

/* ── BADGES ── */
.bdg { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 50px; font-size: .7rem; font-weight: 700; }
.bdg::before { content: ''; width: 5px; height: 5px; border-radius: 50%; }
.bg  { background: var(--gnb); color: var(--gn); } .bg::before  { background: var(--gn); }
.by  { background: var(--yeb); color: var(--ye); } .by::before  { background: var(--ye); }
.br  { background: var(--rdb); color: var(--rd); } .br::before  { background: var(--rd); }
.bb  { background: #EEF4FF;    color: var(--bm); } .bb::before  { background: var(--bm); }

/* ── TOAST ── */
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--bd); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: .85rem; font-weight: 500; box-shadow: 0 8px 24px rgba(15,35,68,.22); display: flex; align-items: center; gap: 9px; transform: translateY(70px); opacity: 0; transition: all .4s cubic-bezier(.34,1.56,.64,1); z-index: 9999; max-width: 320px; }
.toast.show { transform: translateY(0); opacity: 1; }
.t-dot { width: 20px; height: 20px; flex-shrink: 0; background: linear-gradient(135deg, var(--bm), var(--v)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 800; }

/* ── MODAL ── */
.moverlay { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(15,35,68,.45); backdrop-filter: blur(5px); align-items: center; justify-content: center; }
.moverlay.open { display: flex; }
.modal { background: #fff; border-radius: var(--rl); padding: 28px; width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; box-shadow: 0 28px 70px rgba(15,35,68,.18); }
.mhd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.mti { font-size: 1.1rem; font-weight: 800; }
.mcl { background: var(--off); border: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: .9rem; color: var(--mu); display: flex; align-items: center; justify-content: center; }
.mcl:hover { background: var(--bo); }
.mft { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--bo); }

/* ── FORM ELEMENTS ── */
.fg { margin-bottom: 14px; }
.fg label { display: block; font-size: .8rem; font-weight: 700; color: var(--bd); margin-bottom: 6px; }
.fg input, .fg select, .fg textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--bo); border-radius: 9px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .88rem; color: var(--bd); background: var(--off); outline: none; transition: border-color .2s; }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--bm); background: #fff; }
.fg input::placeholder { color: var(--bo); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── BUTTONS ── */
.btn-a { background: linear-gradient(135deg, var(--bm), var(--v)); color: #fff; border: none; padding: 9px 18px; border-radius: 50px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .8rem; font-weight: 700; cursor: pointer; transition: all .25s; box-shadow: 0 3px 10px rgba(106,76,255,.2); }
.btn-a:hover { opacity: .9; transform: translateY(-1px); }
.btn-a-sm { padding: 6px 12px; font-size: .72rem; }
.btn-sec { background: var(--off); color: var(--bd); border: 1.5px solid var(--bo); padding: 9px 18px; border-radius: 50px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .8rem; font-weight: 600; cursor: pointer; transition: all .2s; }
.btn-sec:hover { border-color: var(--bm); color: var(--bm); }
.btn-danger { background: var(--rdb); color: var(--rd); border: none; padding: 6px 12px; border-radius: 50px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .72rem; font-weight: 700; cursor: pointer; transition: all .2s; }
.btn-danger:hover { background: var(--rd); color: #fff; }

/* ── LOADER ── */
.loader { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── EMPTY STATE ── */
.empty { text-align: center; padding: 44px 20px; color: var(--mu); }
.empty-ico { font-size: 2.8rem; margin-bottom: 10px; opacity: .35; }
.empty p { font-size: .88rem; }

/* ── FOOTER ── */
footer { background: var(--bd); color: rgba(255,255,255,.35); text-align: center; padding: 20px; font-size: .78rem; }
footer strong { color: rgba(255,255,255,.7); }