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

:root {
  --yb-bg: #f2f2f7;
  --yb-card: #ffffff;
  --yb-text: #1c1c1e;
  --yb-muted: #8e8e93;
  --yb-sep: rgba(60, 60, 67, .12);
  --yb-accent: #007aff;
  --yb-green: #34c759;
  --yb-red: #ff3b30;
  --yb-orange: #ff9500;
  --yb-radius: 14px;
  --bs-body-font-family: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --yb-bg: #000000;
    --yb-card: #1c1c1e;
    --yb-text: #f2f2f7;
    --yb-muted: #8e8e93;
    --yb-sep: rgba(84, 84, 88, .55);
    --yb-accent: #0a84ff;
  }
  .form-control, .form-select { background-color: #2c2c2e; color: var(--yb-text); border-color: #3a3a3c; }
  .form-control:focus, .form-select:focus { background-color: #2c2c2e; color: var(--yb-text); }
  .table { --bs-table-color: var(--yb-text); --bs-table-bg: transparent; --bs-table-striped-color: var(--yb-text); }
  .text-muted { color: var(--yb-muted) !important; }
  .modal-content, .dropdown-menu { background: var(--yb-card); color: var(--yb-text); }
  .form-control::placeholder { color: #636366; }
}

body {
  background: var(--yb-bg);
  color: var(--yb-text);
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--yb-accent); text-decoration: none; }

.yb-shell { display: flex; min-height: 100vh; }

.yb-side {
  width: 250px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--yb-card) 80%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  border-inline-end: 1px solid var(--yb-sep);
  padding: 20px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.yb-brand { font-weight: 800; font-size: 1.25rem; padding: 4px 12px 18px; display: flex; align-items: center; gap: 8px; }
.yb-brand .dot { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, #0a84ff, #5e5ce6); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: .9rem; }

.yb-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--yb-text);
  font-size: .95rem;
  margin-bottom: 2px;
}
.yb-nav a:hover { background: var(--yb-sep); }
.yb-nav a.active { background: var(--yb-accent); color: #fff; }
.yb-nav .sec { color: var(--yb-muted); font-size: .75rem; padding: 14px 12px 6px; }
.yb-nav .badge { margin-inline-start: auto; }

.yb-main { flex: 1; padding: 28px; max-width: 1200px; min-width: 0; }

.yb-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.yb-top h1 { font-size: 1.6rem; font-weight: 800; margin: 0; }

.yb-card {
  background: var(--yb-card);
  border-radius: var(--yb-radius);
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.yb-card h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 14px; }

.yb-stat { background: var(--yb-card); border-radius: var(--yb-radius); padding: 16px 18px; height: 100%; }
.yb-stat .lbl { color: var(--yb-muted); font-size: .82rem; }
.yb-stat .val { font-size: 1.35rem; font-weight: 800; margin-top: 4px; }

.yb-steps .step { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--yb-sep); }
.yb-steps .step:last-child { border-bottom: 0; }
.yb-steps .num { width: 30px; height: 30px; border-radius: 50%; background: var(--yb-sep); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.yb-steps .done .num { background: var(--yb-green); color: #fff; }

.btn { border-radius: 10px; font-weight: 600; }
.btn-primary { background: var(--yb-accent); border-color: var(--yb-accent); }
.form-control, .form-select { border-radius: 10px; }
.table { margin-bottom: 0; }
.table td, .table th { vertical-align: middle; border-color: var(--yb-sep); }
.ltr { direction: ltr; unicode-bidi: embed; }
code.ltr, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.yb-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.yb-auth .yb-card { width: 100%; max-width: 420px; padding: 32px; }

.yb-mobile-bar { display: none; }

@media (max-width: 900px) {
  .yb-side { position: fixed; inset-inline-start: -270px; z-index: 1040; transition: inset-inline-start .25s; height: 100vh; background: var(--yb-card); }
  .yb-side.open { inset-inline-start: 0; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  .yb-main { padding: 16px; }
  .yb-mobile-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--yb-card); border-bottom: 1px solid var(--yb-sep); position: sticky; top: 0; z-index: 1030; }
  .yb-shell { flex-direction: column; }
}