/* ═══════════════════════════════════════════════════════════════
   МФО ТаджикБанк — Личный кабинет клиента
   ═══════════════════════════════════════════════════════════════ */
:root {
  --p-bg:      #0F1523;
  --p-bg2:     #161E30;
  --p-bg3:     #1C2640;
  --p-border:  #253050;
  --p-accent:  #3D7EFF;
  --p-accent2: #00C896;
  --p-red:     #FF4D6A;
  --p-orange:  #FFA040;
  --p-text:    #E8EDF8;
  --p-text2:   #A0AECE;
  --p-text3:   #5A6A8A;
  --p-card:    rgba(255,255,255,.04);
  --p-radius:  14px;
  --p-mono:    'SF Mono','Fira Code','Consolas',monospace;
  --p-font:    -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
#mfo-portal { font-family:var(--p-font); color:var(--p-text); background:var(--p-bg); min-height:100vh; }

/* ── SPINNER ── */
.mfop-spinner { width:40px;height:40px;border:3px solid var(--p-border);
  border-top-color:var(--p-accent);border-radius:50%;animation:mfop-spin .8s linear infinite;margin:0 auto; }
@keyframes mfop-spin { to { transform:rotate(360deg); } }

/* ── LAYOUT ── */
.mfop-wrap   { max-width:900px;margin:0 auto;padding:0 16px; }
.mfop-screen { display:none;animation:mfop-fade .25s ease; }
.mfop-screen.active { display:block; }
@keyframes mfop-fade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ── AUTH SCREEN ── */
.mfop-auth-wrap { min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px; }
.mfop-auth-box  { background:var(--p-bg2);border:1px solid var(--p-border);border-radius:20px;
  padding:40px 36px;width:100%;max-width:420px;box-shadow:0 24px 80px rgba(0,0,0,.4); }
.mfop-logo { text-align:center;margin-bottom:32px; }
.mfop-logo-icon { width:64px;height:64px;background:linear-gradient(135deg,var(--p-accent),#7B5FFF);
  border-radius:18px;display:inline-flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:12px; }
.mfop-logo-name { font-size:18px;font-weight:700;color:var(--p-text); }
.mfop-logo-sub  { font-size:12px;color:var(--p-text3);margin-top:2px; }

/* ── FORM ── */
.mfop-form-group { margin-bottom:16px; }
.mfop-label { font-size:12px;font-weight:600;color:var(--p-text2);margin-bottom:6px;display:block;
  text-transform:uppercase;letter-spacing:.5px; }
.mfop-input { width:100%;padding:13px 16px;background:var(--p-bg3);border:1px solid var(--p-border);
  border-radius:10px;color:var(--p-text);font-size:15px;font-family:var(--p-font);
  box-sizing:border-box;transition:border-color .2s; }
.mfop-input:focus { outline:none;border-color:var(--p-accent); }
.mfop-input::placeholder { color:var(--p-text3); }
.mfop-input.otp-input { text-align:center;font-size:28px;font-family:var(--p-mono);
  letter-spacing:12px;padding:16px; }
.mfop-btn { width:100%;padding:14px;border:none;border-radius:10px;font-size:15px;font-weight:600;
  cursor:pointer;transition:all .2s;font-family:var(--p-font); }
.mfop-btn-primary { background:var(--p-accent);color:#fff; }
.mfop-btn-primary:hover { background:#5590FF;transform:translateY(-1px); }
.mfop-btn-primary:disabled { opacity:.5;cursor:default;transform:none; }
.mfop-btn-ghost { background:var(--p-card);color:var(--p-text2);border:1px solid var(--p-border); }
.mfop-btn-ghost:hover { border-color:var(--p-accent);color:var(--p-text); }
.mfop-btn-sm { padding:8px 16px;font-size:13px;width:auto; }
.mfop-btn-danger { background:rgba(255,77,106,.15);color:var(--p-red);border:1px solid rgba(255,77,106,.3); }
.mfop-btn-danger:hover { background:rgba(255,77,106,.25); }
.mfop-link { color:var(--p-accent);cursor:pointer;font-size:13px;text-decoration:none; }
.mfop-link:hover { text-decoration:underline; }
.mfop-error { background:rgba(255,77,106,.12);border:1px solid rgba(255,77,106,.3);
  color:var(--p-red);padding:12px 16px;border-radius:10px;font-size:13px;margin-bottom:16px;display:none; }
.mfop-success { background:rgba(0,200,150,.12);border:1px solid rgba(0,200,150,.3);
  color:var(--p-accent2);padding:12px 16px;border-radius:10px;font-size:13px;margin-bottom:16px;display:none; }
.mfop-otp-timer { text-align:center;font-size:12px;color:var(--p-text3);margin-top:8px; }
.mfop-auth-tabs { display:flex;gap:8px;margin-bottom:24px; }
.mfop-auth-tab { flex:1;padding:10px;border-radius:8px;border:1px solid var(--p-border);
  background:transparent;color:var(--p-text2);cursor:pointer;font-size:13px;font-weight:600;
  font-family:var(--p-font);transition:.2s; }
.mfop-auth-tab.active { background:var(--p-accent);border-color:var(--p-accent);color:#fff; }
.mfop-divider { text-align:center;color:var(--p-text3);font-size:12px;margin:16px 0;position:relative; }
.mfop-divider::before,.mfop-divider::after { content:'';position:absolute;top:50%;
  width:calc(50% - 24px);height:1px;background:var(--p-border); }
.mfop-divider::before { left:0; } .mfop-divider::after { right:0; }

/* ── MAIN APP ── */
.mfop-app { padding-bottom:80px; }
.mfop-topbar { background:var(--p-bg2);border-bottom:1px solid var(--p-border);
  padding:0 20px;position:sticky;top:0;z-index:100; }
.mfop-topbar-inner { max-width:900px;margin:0 auto;height:60px;display:flex;align-items:center;gap:12px; }
.mfop-topbar-logo { font-size:16px;font-weight:800;color:var(--p-text); }
.mfop-topbar-logo span { color:var(--p-accent); }
.mfop-topbar-user { margin-left:auto;font-size:13px;color:var(--p-text2); }
.mfop-topbar-user strong { color:var(--p-text); }
.mfop-logout-btn { margin-left:12px;padding:6px 14px;border-radius:8px;border:1px solid var(--p-border);
  background:transparent;color:var(--p-text3);font-size:12px;cursor:pointer;font-family:var(--p-font); }
.mfop-logout-btn:hover { border-color:var(--p-red);color:var(--p-red); }

/* ── BOTTOM NAV ── */
.mfop-nav { position:fixed;bottom:0;left:0;right:0;background:var(--p-bg2);
  border-top:1px solid var(--p-border);display:flex;padding:8px 0 12px;z-index:100; }
.mfop-nav-item { flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;padding:4px 0;transition:.15s;color:var(--p-text3);border:none;background:transparent;
  font-family:var(--p-font); }
.mfop-nav-item.active { color:var(--p-accent); }
.mfop-nav-item:hover { color:var(--p-text); }
.mfop-nav-icon { font-size:22px;line-height:1; }
.mfop-nav-label { font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px; }

/* ── CARDS & SECTIONS ── */
.mfop-section { padding:24px 20px 0; }
.mfop-section-title { font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;color:var(--p-text3);margin-bottom:16px; }
.mfop-card { background:var(--p-bg2);border:1px solid var(--p-border);border-radius:var(--p-radius);
  padding:20px;margin-bottom:12px; }
.mfop-card-sm { padding:14px 16px; }
.mfop-kpi-row { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px; }
.mfop-kpi { background:var(--p-bg2);border:1px solid var(--p-border);border-radius:12px;
  padding:16px;display:flex;flex-direction:column;gap:4px; }
.mfop-kpi-label { font-size:11px;color:var(--p-text3);text-transform:uppercase;letter-spacing:.4px; }
.mfop-kpi-value { font-size:22px;font-weight:800;color:var(--p-text); }
.mfop-kpi-sub   { font-size:11px;color:var(--p-text2); }
.mfop-next-pay  { background:linear-gradient(135deg,rgba(61,126,255,.15),rgba(0,200,150,.08));
  border:1px solid rgba(61,126,255,.3);border-radius:14px;padding:20px;margin-bottom:12px; }
.mfop-next-pay-label { font-size:11px;color:var(--p-accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px; }
.mfop-next-pay-amount { font-size:32px;font-weight:800;color:var(--p-text); }
.mfop-next-pay-date { font-size:13px;color:var(--p-text2);margin-top:4px; }

/* ── LOAN / DEPOSIT ITEM ── */
.mfop-loan-item { border-left:3px solid var(--p-accent);padding-left:14px;margin-bottom:16px; }
.mfop-loan-num  { font-size:11px;color:var(--p-text3);font-family:var(--p-mono);margin-bottom:2px; }
.mfop-loan-type { font-size:14px;font-weight:700;color:var(--p-text); }
.mfop-loan-row  { display:flex;justify-content:space-between;margin-top:8px; }
.mfop-loan-stat { font-size:12px;color:var(--p-text2); }
.mfop-loan-stat strong { color:var(--p-text); }
.mfop-status { display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700; }
.mfop-status-active   { background:rgba(0,200,150,.15);color:var(--p-accent2); }
.mfop-status-overdue  { background:rgba(255,77,106,.15);color:var(--p-red); }
.mfop-status-closed   { background:rgba(90,106,138,.15);color:var(--p-text3); }
.mfop-badge-pill { padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;
  background:var(--p-bg3);color:var(--p-text2); }

/* ── SCHEDULE TABLE ── */
.mfop-table-wrap { overflow-x:auto;margin-top:12px; }
.mfop-table { width:100%;border-collapse:collapse;font-size:13px; }
.mfop-table th { padding:10px 12px;text-align:left;font-size:10px;text-transform:uppercase;
  letter-spacing:.5px;color:var(--p-text3);border-bottom:1px solid var(--p-border); }
.mfop-table td { padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--p-text2); }
.mfop-table tr:last-child td { border-bottom:none; }
.mfop-table tr.paid td { color:var(--p-text3); }
.mfop-table tr.pending td { color:var(--p-text); }
.mfop-table tr.overdue td { color:var(--p-red); }
.mfop-mono { font-family:var(--p-mono); }

/* ── CURRENCY ── */
.mfop-currency-item { display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--p-border); }
.mfop-currency-item:last-child { border-bottom:none; }
.mfop-currency-code { font-size:18px;font-weight:800;color:var(--p-text);width:56px; }
.mfop-currency-name { font-size:12px;color:var(--p-text3); }
.mfop-currency-rates { text-align:right; }
.mfop-currency-buy  { font-size:16px;font-weight:700;color:var(--p-accent2); }
.mfop-currency-sell { font-size:13px;color:var(--p-text2);margin-top:2px; }

/* ── PROFILE ── */
.mfop-profile-row { display:flex;justify-content:space-between;padding:12px 0;
  border-bottom:1px solid var(--p-border);align-items:flex-start; }
.mfop-profile-row:last-child { border-bottom:none; }
.mfop-profile-key { font-size:12px;color:var(--p-text3);flex:0 0 130px; }
.mfop-profile-val { font-size:14px;color:var(--p-text);text-align:right;word-break:break-all; }

/* ── SESSIONS ── */
.mfop-session { display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--p-border); }
.mfop-session:last-child { border-bottom:none; }
.mfop-session-icon { font-size:24px; }
.mfop-session-info { flex:1; }
.mfop-session-device { font-size:13px;font-weight:600;color:var(--p-text); }
.mfop-session-meta { font-size:11px;color:var(--p-text3);margin-top:2px; }
.mfop-session-current { padding:2px 8px;border-radius:4px;background:rgba(0,200,150,.15);
  color:var(--p-accent2);font-size:10px;font-weight:700;margin-left:6px; }

/* ── BACK BTN ── */
.mfop-back-btn { display:flex;align-items:center;gap:8px;color:var(--p-accent);cursor:pointer;
  font-size:14px;font-weight:600;padding:16px 20px 0;background:none;border:none;font-family:var(--p-font); }
.mfop-back-btn:hover { color:var(--p-text); }

/* ── TOAST ── */
.mfop-toast { position:fixed;top:20px;right:20px;padding:12px 20px;border-radius:10px;
  font-size:13px;font-weight:600;z-index:9999;animation:mfop-slide .3s ease;
  max-width:300px;box-shadow:0 8px 24px rgba(0,0,0,.4); }
.mfop-toast-success { background:#1A3A30;color:var(--p-accent2);border:1px solid rgba(0,200,150,.3); }
.mfop-toast-error   { background:#3A1A22;color:var(--p-red);border:1px solid rgba(255,77,106,.3); }
@keyframes mfop-slide { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }

/* ── RESPONSIVE ── */
@media(max-width:480px){
  .mfop-auth-box{padding:28px 20px}
  .mfop-kpi-value{font-size:18px}
}