@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/vazirmatn/Vazirmatn-wght.woff2") format("woff2-variations"),
       url("fonts/vazirmatn/Vazirmatn-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- palette: Karizanta blue + navy, MetaTrader gold/green as accents ---------- */
:root {
  --bs-font-sans-serif: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --app-blue: #1593d6;
  --app-blue-dark: #0b6fa8;
  --app-navy: #0e1b33;
  --app-navy-2: #16294a;
  --app-gold: #d99a0b;
  --app-green: #16a34a;
  --app-red: #dc2626;
  --app-purple: #7c3aed;
  --app-yellow: #eab308;
  --app-line: #e5eaf1;
  --app-soft: #f5f8fc;
  --app-shadow: 0 1px 2px rgba(14, 27, 51, .05), 0 4px 16px rgba(14, 27, 51, .06);

  --bs-primary: var(--app-blue);
  --bs-primary-rgb: 21, 147, 214;
  --bs-link-color: var(--app-blue-dark);
  --bs-link-color-rgb: 11, 111, 168;
  --bs-link-hover-color: var(--app-navy);
  --bs-border-radius: .6rem;
  --bs-border-radius-lg: .9rem;
  --bs-border-color: var(--app-line);
  --bs-body-color: #1f2937;
  --bs-secondary-color: #64748b;
}
body { font-family: var(--bs-font-sans-serif); background: #fff; }

/* night mode: black page (panel only), deep navy surfaces */
[data-bs-theme="dark"] {
  --bs-body-bg: #000;
  --bs-body-bg-rgb: 0, 0, 0;
  --bs-body-color: #e5e7eb;
  --bs-secondary-color: #94a3b8;
  --bs-tertiary-bg: #0b1220;
  --bs-secondary-bg: #101a2c;
  --bs-border-color: #1e2a40;
  --app-line: #1e2a40;
  --app-soft: #0b1220;
  --app-shadow: none;
  --bs-link-color: #5cc0f5;
  --bs-link-color-rgb: 92, 192, 245;
  --bs-link-hover-color: #9bdcff;
}
[data-bs-theme="dark"] body { background: #000; }
[data-bs-theme="dark"] .card { --bs-card-bg: #0a111e; }

/* ---------- buttons ---------- */
.btn-primary {
  --bs-btn-bg: var(--app-blue); --bs-btn-border-color: var(--app-blue);
  --bs-btn-hover-bg: var(--app-blue-dark); --bs-btn-hover-border-color: var(--app-blue-dark);
  --bs-btn-active-bg: var(--app-blue-dark); --bs-btn-active-border-color: var(--app-blue-dark);
  --bs-btn-disabled-bg: var(--app-blue); --bs-btn-disabled-border-color: var(--app-blue);
}
.btn-outline-primary {
  --bs-btn-color: var(--app-blue-dark); --bs-btn-border-color: var(--app-blue);
  --bs-btn-hover-bg: var(--app-blue); --bs-btn-hover-border-color: var(--app-blue);
  --bs-btn-active-bg: var(--app-blue-dark); --bs-btn-active-border-color: var(--app-blue-dark);
}
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #5cc0f5; }
.btn-success { --bs-btn-bg: var(--app-green); --bs-btn-border-color: var(--app-green); }
.btn { font-weight: 500; }
.btn-touch { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-icon { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: .6rem; }
.btn-soft { background: var(--app-soft); border: 1px solid var(--app-line); color: var(--bs-body-color); }
.btn-soft:hover { background: var(--bs-secondary-bg); border-color: var(--app-line); color: var(--bs-body-color); }

/* ---------- top bar + sidebar ---------- */
.app-top { background: var(--bs-body-bg); border-bottom: 1px solid var(--app-line); min-height: 64px; }
.app-side { background: linear-gradient(180deg, var(--app-navy) 0%, var(--app-navy-2) 100%); color: #cbd5e1; }
@media (min-width: 992px) {
  .app-side { position: sticky; top: 64px; min-height: calc(100vh - 64px); }
}
.app-side .offcanvas-header { color: #fff; }
.app-side .btn-close { filter: invert(1); }
.side-nav .nav-link {
  color: #cbd5e1; min-height: 46px; display: flex; align-items: center; gap: .65rem;
  border-radius: .6rem; padding: .55rem .85rem; font-weight: 500;
}
.side-nav .nav-link i { width: 1.25rem; text-align: center; opacity: .85; }
.side-nav .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.side-nav .nav-link.active { color: #fff; background: linear-gradient(90deg, var(--app-blue), #2bb3f0); box-shadow: 0 4px 14px rgba(21, 147, 214, .35); }
.side-help { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); border-radius: .8rem; color: #cbd5e1; }
.side-help .btn { background: var(--app-gold); border-color: var(--app-gold); color: #1f1300; }
.side-help .btn:hover { background: #f0b21c; border-color: #f0b21c; }

.nav-pills .nav-link { min-height: 44px; display: flex; align-items: center; gap: .5rem; }
.app-main { background: var(--bs-body-bg); }

/* ---------- cards ---------- */
.card { border: 1px solid var(--app-line); border-radius: .9rem; box-shadow: var(--app-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--app-line); font-weight: 600; padding: .85rem 1.1rem; }
.page-title { font-weight: 700; letter-spacing: -.01em; }
.page-sub { color: var(--bs-secondary-color); font-size: .9rem; }

/* stat tiles */
.stat { display: flex; align-items: center; gap: .9rem; }
.stat-ico { width: 48px; height: 48px; border-radius: .8rem; display: grid; place-items: center; font-size: 1.25rem; flex: none; }
.stat-label { color: var(--bs-secondary-color); font-size: .82rem; }
.stat-value { font-weight: 700; font-size: 1.1rem; }
.ico-blue { background: rgba(21, 147, 214, .12); color: var(--app-blue); }
.ico-purple { background: rgba(124, 58, 237, .12); color: var(--app-purple); }
.ico-gold { background: rgba(217, 154, 11, .14); color: var(--app-gold); }
.ico-green { background: rgba(22, 163, 74, .12); color: var(--app-green); }
.ico-red { background: rgba(220, 38, 38, .12); color: var(--app-red); }
.progress { background: var(--app-soft); border-radius: 99px; }
.progress-bar { border-radius: 99px; }

/* ---------- terminal cards ---------- */
.term-card { position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.term-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(14, 27, 51, .10); }
.term-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--term-accent, #94a3b8); }
.term-card[data-phase="connected"] { --term-accent: var(--app-green); }
.term-card[data-phase="starting"], .term-card[data-phase="logging_in"] { --term-accent: var(--app-blue); }
.term-card[data-phase="connecting"], .term-card[data-phase="no_account"] { --term-accent: var(--app-gold); }
.term-card[data-phase="login_failed"] { --term-accent: var(--app-red); }
.term-name { font-weight: 700; font-size: 1.05rem; color: var(--bs-body-color); text-decoration: none; }
.term-name:hover { color: var(--app-blue); }
.term-money { font-weight: 700; font-size: 1.35rem; letter-spacing: -.01em; }
.term-kv { color: var(--bs-secondary-color); font-size: .85rem; }
.term-ea { background: var(--app-soft); border: 1px solid var(--app-line); border-radius: .7rem; padding: .55rem .75rem; }
.term-add { border: 2px dashed var(--app-line); box-shadow: none; min-height: 220px; color: var(--bs-secondary-color); }
.term-add:hover { border-color: var(--app-blue); color: var(--app-blue); }

.plat { font-size: .7rem; font-weight: 700; letter-spacing: .03em; padding: .25em .55em; border-radius: .4rem; }
.plat-MT4 { background: rgba(21, 147, 214, .12); color: var(--app-blue-dark); }
.plat-MT5 { background: rgba(124, 58, 237, .12); color: var(--app-purple); }
[data-bs-theme="dark"] .plat-MT4 { color: #5cc0f5; }
[data-bs-theme="dark"] .plat-MT5 { color: #b79cff; }

/* ---------- phase chips (soft colors, dot or spinner) ---------- */
.ph { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; padding: .3rem .7rem; border-radius: 99px; white-space: nowrap; }
.ph::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.ph.ph-busy::before { display: none; }
.ph .spinner-border { width: .8rem; height: .8rem; border-width: .14em; }
.ph-ok { background: rgba(22, 163, 74, .12); color: #15803d; }
.ph-busy { background: rgba(21, 147, 214, .12); color: var(--app-blue-dark); }
.ph-warn { background: rgba(217, 154, 11, .15); color: #a16207; }
.ph-bad { background: rgba(220, 38, 38, .12); color: #b91c1c; }
.ph-off { background: rgba(100, 116, 139, .14); color: #475569; }
[data-bs-theme="dark"] .ph-ok { color: #4ade80; }
[data-bs-theme="dark"] .ph-busy { color: #5cc0f5; }
[data-bs-theme="dark"] .ph-warn { color: #fbbf24; }
[data-bs-theme="dark"] .ph-bad { color: #f87171; }
[data-bs-theme="dark"] .ph-off { color: #94a3b8; }

/* EA state chips reuse the same look */
.chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; padding: .25rem .6rem; border-radius: 99px; }

/* ---------- terminal page ---------- */
.term-head { border-radius: .9rem; }
.tabs-pill { gap: .35rem; border: 0; }
.tabs-pill .nav-link { border: 1px solid var(--app-line); border-radius: .6rem; color: var(--bs-body-color); background: var(--bs-body-bg); padding: .5rem .9rem; }
.tabs-pill .nav-link:hover { border-color: var(--app-blue); color: var(--app-blue); }
.tabs-pill .nav-link.active { background: var(--app-blue); border-color: var(--app-blue); color: #fff; }
.nav-tabs .nav-link { min-height: 44px; display: flex; align-items: center; gap: .35rem; }
.live-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--app-soft); flex: none; }
.dl-clean dt { color: var(--bs-secondary-color); font-weight: 500; }
.dl-clean dt, .dl-clean dd { padding-block: .45rem; border-bottom: 1px dashed var(--app-line); margin: 0; }

.text-purple { color: var(--app-purple) !important; }
.bg-purple { background-color: var(--app-purple) !important; }
.text-gold { color: var(--app-gold) !important; }
.bg-gold { background-color: var(--app-gold) !important; }

.form-control, .form-select { min-height: 44px; border-color: var(--app-line); }
.form-control:focus, .form-select:focus { border-color: var(--app-blue); box-shadow: 0 0 0 .2rem rgba(21, 147, 214, .18); }
.form-check-input:checked { background-color: var(--app-blue); border-color: var(--app-blue); }
.alert { border-radius: .8rem; }
.table > :not(caption) > * > * { padding: .65rem .75rem; }

.log-box { max-height: 60vh; overflow: auto; font-size: .78rem; padding: .75rem; white-space: pre; background: var(--bs-tertiary-bg); border-radius: 0 0 .9rem .9rem; }

/* ---------- login ---------- */
.login-wrap { max-width: 920px; }
.login-card { overflow: hidden; border: 0; box-shadow: 0 10px 40px rgba(14, 27, 51, .14); }
.login-side { background: linear-gradient(150deg, var(--app-navy) 0%, #12305c 55%, var(--app-blue-dark) 100%); color: #dbe7f5; }
.login-side h2 { color: #fff; }
.login-feat { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .9rem; }
.login-feat i { color: var(--app-gold); margin-top: .25rem; width: 1.2rem; text-align: center; }
[data-bs-theme="dark"] .login-card { background: #0a111e; }

/* logo: white chip in night mode so the dark K stays visible */
.brand-logo { display: inline-block; line-height: 0; border-radius: .5rem; }
.brand-logo-lg img { max-height: 56px; width: auto; }
[data-bs-theme="dark"] .brand-logo { background: #fff; padding: .25rem .5rem; }

/* ---------- phones ---------- */
@media (max-width: 575.98px) {
  .app-top .navbar-brand img { height: 26px; }
  .app-top .container-fluid { flex-wrap: nowrap; padding-inline: 0; }
  .app-top .dropdown-toggle::after { display: none; }
  .stat { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .stat-ico { width: 38px; height: 38px; font-size: 1rem; border-radius: .65rem; }
  .stat-value { font-size: .95rem; }
}