.app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.appbar {
  flex: 0 0 auto;
  position: relative;
  z-index: 30;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--surface), var(--shadow-sm);
}
.appbar::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(
    to var(--flow, right),
    var(--band-junior-fg) 0%, var(--band-junior-fg) 26%,
    var(--band-mid-fg) 26%, var(--band-mid-fg) 46%,
    var(--band-senior-fg) 46%, var(--band-senior-fg) 66%,
    var(--band-architect-fg) 66%, var(--band-architect-fg) 100%);
  opacity: .55;
  mask-image: linear-gradient(to bottom, #000, #000);
}
html[dir='rtl'] .appbar::after { --flow: left; }

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px 10px;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.brand__mark {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  background:
    linear-gradient(155deg, hsl(0 0% 100% / .28), transparent 52%),
    linear-gradient(150deg, var(--brand-a), var(--brand-b));
  color: #fff;
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / .35),
    0 4px 12px var(--brand-glow),
    var(--shadow-sm);
}
.brand__mark svg { width: 19px; height: 19px; display: block; }

.brand__text { min-width: 0; }
.brand__title {
  margin: 0;
  font-size: 16px;
  font-weight: 680;
  letter-spacing: -.01em;
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand__sub {
  margin: 1px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topbar__spacer { flex: 1 1 auto; }
.topbar__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}

.seg__btn {
  display: grid; place-items: center;
  min-width: 30px; height: 26px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 620;
  letter-spacing: .02em;
  color: var(--text-muted);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.seg__btn:hover { color: var(--text); }
.seg__btn[aria-pressed='true'],
.seg__btn.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.seg__btn svg { width: 15px; height: 15px; display: block; }

.icon-btn {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-md);
  color: var(--text-muted);
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-soft); }
.icon-btn svg { width: 17px; height: 17px; display: block; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 12px;
  flex-wrap: wrap;
}

.search {
  position: relative;
  flex: 1 1 260px;
  max-width: 380px;
  min-width: 0;
}
.search__icon {
  position: absolute;
  inset-inline-start: 11px;
  top: 50%; translate: 0 -50%;
  width: 15px; height: 15px;
  color: var(--text-faint);
  pointer-events: none;
}
.search__input {
  width: 100%;
  height: 36px;
  padding-inline: 34px 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 13.5px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.search__input::placeholder { color: var(--text-faint); }
.search__input:focus {
  outline: none;
  border-color: var(--focus);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.search__clear {
  position: absolute;
  inset-inline-end: 6px;
  top: 50%; translate: 0 -50%;
  width: 24px; height: 24px;
  display: none; place-items: center;
  border-radius: var(--r-sm);
  color: var(--text-faint);
}
.search__clear svg { width: 13px; height: 13px; }
.search__clear:hover { background: var(--surface-3); color: var(--text); }
.search.has-value .search__clear { display: grid; }

.band-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

.band-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12.5px;
  font-weight: 570;
  color: var(--text-muted);
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.band-tab:hover { color: var(--text); border-color: var(--border-strong); }
.band-tab__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
}
.band-tab[data-band='junior']    { --tone: var(--band-junior-fg); }
.band-tab[data-band='mid']       { --tone: var(--band-mid-fg); }
.band-tab[data-band='senior']    { --tone: var(--band-senior-fg); }
.band-tab[data-band='architect'] { --tone: var(--band-architect-fg); }
.band-tab .band-tab__dot { color: var(--tone, var(--text-faint)); }

.band-tab[aria-pressed='true'] {
  color: var(--tone, var(--text));
  border-color: currentColor;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px currentColor, var(--shadow-sm);
}
.band-tab[aria-pressed='true'][data-band='all'] { color: var(--text); }

.workspace {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.matrix-area {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
}

.scroll-shell {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.matrix-area .scroll-shell {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.matrix-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border-radius: inherit;
  overscroll-behavior: contain;
  scroll-padding-inline-start: var(--skill-col);
  scroll-padding-block-start: var(--head-h, 64px);
}

.sbar {
  position: absolute;
  z-index: 12;
  border-radius: var(--r-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, background-color .18s ease;
}
.sbar.is-off { display: none; }

.sbar--y { top: 4px; bottom: 4px; inset-inline-end: 3px; width: 10px; }
.sbar--x { inset-inline: 4px; bottom: 3px; height: 10px; }
.scroll-shell.has-both .sbar--y { bottom: 17px; }
.scroll-shell.has-both .sbar--x { inset-inline-end: 17px; }

.scroll-shell:hover > .sbar,
.scroll-shell.is-scrolling > .sbar,
.sbar.is-dragging { opacity: 1; pointer-events: auto; }

.sbar:hover, .sbar.is-dragging { background: var(--sbar-track); }

.sbar__thumb {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  border-radius: var(--r-pill);
  background: var(--sbar-thumb);
  transition: background-color .16s ease;
}
.sbar--y .sbar__thumb { width: 100%; }
.sbar--x .sbar__thumb { height: 100%; top: auto; bottom: 0; }
.sbar__thumb:hover, .sbar.is-dragging .sbar__thumb { background: var(--sbar-thumb-on); }

.matrix {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
}

.matrix col.lc { width: var(--cell-w); }
.matrix col.lc[data-band='junior']    { background: var(--band-junior-wash); }
.matrix col.lc[data-band='mid']       { background: var(--band-mid-wash); }
.matrix col.lc[data-band='senior']    { background: var(--band-senior-wash); }
.matrix col.lc[data-band='architect'] { background: var(--band-architect-wash); }
.matrix col.lc.is-hl { background: var(--hl); }
.matrix col.sc { width: var(--skill-col); }

.matrix th, .matrix td {
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--border-soft);
}

.matrix .corner,
.matrix .skill-cell,
.matrix .cat-row__label { padding-inline: var(--gutter); }

.matrix .corner,
.matrix .skill-cell,
.matrix .cat-row th { text-align: start; }
.matrix .cell,
.matrix .ladder-cell,
.matrix .band-cell { text-align: center; }

.matrix thead th {
  position: sticky;
  background: var(--surface-2);
  z-index: 4;
}
.matrix .band-row th { top: 0; height: var(--band-h); }
.matrix .ladder-row th { top: var(--band-h); height: var(--ladder-h); }

.matrix .corner {
  inset-inline-start: 0;
  z-index: 6;
  background: var(--surface-2);
  border-inline-end: 1px solid var(--border);
  font-size: 11px;
  font-weight: 640;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
  vertical-align: bottom;
  padding-bottom: 9px;
}
html[lang='fa'] .matrix .corner { letter-spacing: 0; text-transform: none; font-size: 12px; }

.band-cell {
  font-size: 11.5px;
  font-weight: 660;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-inline-end: 1px solid var(--border);
}
html[lang='fa'] .band-cell { letter-spacing: 0; text-transform: none; font-size: 12.5px; }

.band-cell__inner {
  display: block;
  margin: 4px 5px;
  border-radius: var(--r-pill);
  padding: 2px 8px;
  line-height: 1.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset 0 0 0 1px var(--pill-line, transparent);
}
.band-cell[data-band='junior']    .band-cell__inner { background: var(--band-junior-soft);    color: var(--band-junior-fg);  --pill-line: var(--band-junior-line); }
.band-cell[data-band='mid']       .band-cell__inner { background: var(--band-mid-soft);       color: var(--band-mid-fg);  --pill-line: var(--band-mid-line); }
.band-cell[data-band='senior']    .band-cell__inner { background: var(--band-senior-soft);    color: var(--band-senior-fg);  --pill-line: var(--band-senior-line); }
.band-cell[data-band='architect'] .band-cell__inner { background: var(--band-architect-soft); color: var(--band-architect-fg); --pill-line: var(--band-architect-line); }

.ladder-cell {
  font-size: 12px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  vertical-align: middle;
}
.matrix .ladder-cell { border-bottom: 1px solid var(--border); }
.ladder-cell.is-band-end { border-inline-end: 1px solid var(--border); }
.ladder-cell.is-hl { color: var(--text); background: var(--hl); }

.cat-row th {
  position: sticky;
  inset-inline-start: 0;

  top: var(--head-h, 64px);
  z-index: 3;
  height: 32px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-3);
  padding: 0;
}
.cat-row__label {
  position: sticky;
  inset-inline-start: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  font-size: 11px;
  font-weight: 680;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
html[lang='fa'] .cat-row__label { letter-spacing: 0; text-transform: none; font-size: 12.5px; }

.skill-row { transition: background .1s ease; }
.skill-row.alt .skill-cell { background: var(--surface-2); }
.skill-row:hover .skill-cell,
.skill-row.is-hl .skill-cell { background: var(--accent-soft); }
.skill-row:hover td,
.skill-row.is-hl td { background: var(--hl); }

.skill-cell {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  height: 40px;
  font-size: 13.5px;
  font-weight: 540;
  line-height: 1.3;
  color: var(--text);
  vertical-align: middle;
}
.skill-cell__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skill-cell mark {
  background: var(--accent-soft);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
  box-shadow: inset 0 -1px 0 var(--accent);
}

.cell {
  height: 40px;
  vertical-align: middle;
  position: relative;
  line-height: 0;
  font-size: 0;
}
.cell.is-band-end { border-inline-end: 1px solid var(--border); }

.chip {
  width: 28px; height: 28px;
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  border-radius: 9px;
  line-height: 1;
  font-size: 12.5px;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  transition: transform .13s cubic-bezier(.34,1.4,.64,1), box-shadow .13s ease,
              background .13s ease, color .13s ease, border-color .13s ease;
}
.chip[data-band='junior']    { --c-fg: var(--band-junior-fg);    --c-bg: var(--band-junior-soft);    --c-line: var(--band-junior-line); }
.chip[data-band='mid']       { --c-fg: var(--band-mid-fg);       --c-bg: var(--band-mid-soft);       --c-line: var(--band-mid-line); }
.chip[data-band='senior']    { --c-fg: var(--band-senior-fg);    --c-bg: var(--band-senior-soft);    --c-line: var(--band-senior-line); }
.chip[data-band='architect'] { --c-fg: var(--band-architect-fg); --c-bg: var(--band-architect-soft); --c-line: var(--band-architect-line); }

.chip {
  color: var(--c-fg);
  background:
    linear-gradient(180deg, var(--chip-sheen), transparent 62%),
    var(--c-bg);
  border-color: var(--c-line);
  box-shadow: var(--chip-shadow);
}
.chip:hover {
  transform: translateY(-1.5px) scale(1.08);
  box-shadow: var(--shadow-sm);
  border-color: var(--c-fg);
}
.chip:active { transform: translateY(0) scale(.97); }
.chip[aria-pressed='true'] {
  background: var(--c-fg);
  color: var(--chip-on-fg);
  border-color: var(--c-fg);
  box-shadow: 0 0 0 3.5px var(--c-bg), 0 4px 12px var(--c-line);
  transform: translateY(-1px);
}

.chip.is-dim { opacity: .32; filter: saturate(.4); }

.matrix-tail { height: 22px; }

.no-results {
  padding: 56px 24px;
  text-align: center;
  color: var(--text-muted);
}
.no-results strong { display: block; font-size: 15px; color: var(--text); margin-bottom: 4px; }
.no-results span { font-size: 13.5px; }

.detail {
  flex: 0 0 auto;
  width: 400px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-inline-start: 1px solid var(--border);
}

.detail__inner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.detail__head {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--c-soft, var(--surface-2)), transparent 96%);
}
.detail__head::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(to right, var(--c-fg, var(--accent)), transparent 78%);
  opacity: .5;
}
html[dir='rtl'] .detail__head::after {
  background: linear-gradient(to left, var(--c-fg, var(--accent)), transparent 78%);
}
.detail__headmain { min-width: 0; flex: 1 1 auto; }

.detail__eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 640;
  letter-spacing: .03em;
  white-space: nowrap;
  border: 1px solid transparent;
}
html[lang='fa'] .tag { letter-spacing: 0; font-size: 11.5px; }
.tag--band[data-band='junior']    { background: var(--band-junior-soft);    color: var(--band-junior-fg);    border-color: var(--band-junior-line); }
.tag--band[data-band='mid']       { background: var(--band-mid-soft);       color: var(--band-mid-fg);       border-color: var(--band-mid-line); }
.tag--band[data-band='senior']    { background: var(--band-senior-soft);    color: var(--band-senior-fg);    border-color: var(--band-senior-line); }
.tag--band[data-band='architect'] { background: var(--band-architect-soft); color: var(--band-architect-fg); border-color: var(--band-architect-line); }
.tag--ghost { background: var(--surface-3); color: var(--text-muted); border-color: var(--border-soft); }

.detail__title {
  margin: 0;
  font-size: 19px;
  font-weight: 660;
  letter-spacing: -.015em;
  line-height: 1.3;
}
html[lang='fa'] .detail__title { letter-spacing: 0; }

.detail__meta {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.detail__pane { flex: 1 1 auto; min-height: 0; }

.detail__body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
}

.section-label {
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 690;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}
html[lang='fa'] .section-label { letter-spacing: 0; text-transform: none; font-size: 12px; }

.criteria {
  list-style: none;
  counter-reset: crit;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.criteria li {
  position: relative;
  counter-increment: crit;
  padding: 12px 14px;
  padding-inline-start: 44px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 13.8px;
  line-height: 1.62;
  color: var(--text);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
html[lang='fa'] .criteria li { line-height: 1.95; font-size: 14px; }
.criteria li:hover {
  border-color: var(--c-line, var(--border));
  background: var(--surface-3);
}
.criteria li::before {
  content: counter(crit);
  position: absolute;
  inset-inline-start: 12px;
  top: 12px;
  width: 21px; height: 21px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-fg, var(--accent));
  background: var(--c-soft, var(--accent-soft));
  box-shadow: inset 0 0 0 1px var(--c-line, transparent);
}

.resources {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resource {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}

.resource__icon {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 1px;
  color: var(--c-fg, var(--accent));
}

.resource.has-file { transition: border-color .16s ease, background .16s ease; }
.resource.has-file:hover { border-color: var(--border-strong); background: var(--surface-3); }

.resource__text { min-width: 0; flex: 1 1 auto; }
.resource__title { display: block; font-size: 13.2px; font-weight: 560; line-height: 1.45; }
.resource__by { display: block; font-size: 11.8px; color: var(--text-muted); margin-top: 2px; }

a.resource__open { color: inherit; text-decoration: none; }
a.resource__open:hover { color: var(--accent); text-decoration: underline; }

.resource__dl {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  margin-inline-start: auto;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  border: 1px solid transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.resource__dl svg { width: 15px; height: 15px; display: block; }
.resource__dl:hover {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--border-soft);
}
html[lang='fa'] .resource__title { line-height: 1.75; }

.level-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.level-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12.5px;
  font-weight: 570;
  color: var(--text-muted);
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.level-pill:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-3); }
.level-pill[aria-current='true'] {
  background: var(--c-soft, var(--accent-soft));
  border-color: var(--c-fg, var(--accent));
  color: var(--c-fg, var(--accent));
  font-weight: 660;
  box-shadow: inset 0 0 0 1px var(--c-fg, var(--accent));
}
.level-pill__ladder { font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }

.detail__empty {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 32px 28px;
  text-align: center;
}
.detail__empty svg { width: 40px; height: 40px; color: var(--text-faint); opacity: .55; }
.detail__empty strong { font-size: 15px; font-weight: 620; }
.detail__empty p { margin: 0; font-size: 13.3px; color: var(--text-muted); max-width: 30ch; line-height: 1.65; }

.detail__backdrop { display: none; }

@keyframes chipIn {
  from { opacity: 0; transform: translateY(5px) scale(.82); }
  to   { opacity: 1; transform: none; }
}
@keyframes paneIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.chip {
  animation: chipIn .34s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay: calc(var(--i, 0) * 11ms);
}
.detail__head, .detail__empty { animation: fadeIn .26s ease backwards; }
.detail__body > * { animation: paneIn .32s cubic-bezier(.22,1,.36,1) backwards; }
.detail__body > *:nth-child(2) { animation-delay: 40ms; }
.detail__body > *:nth-child(3) { animation-delay: 70ms; }
.detail__body > *:nth-child(4) { animation-delay: 95ms; }

.statusbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 9px 20px;
  border-top: 1px solid var(--border);
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  font-size: 12px;
  color: var(--text-muted);
}
.stats { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stat { display: inline-flex; align-items: baseline; gap: 5px; }
.stat b {
  font-size: 13px;
  font-weight: 680;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.stat + .stat { padding-inline-start: 14px; border-inline-start: 1px solid var(--border-soft); }
.build {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: .01em;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-soft);
  background: var(--surface-3);
  color: var(--text-faint);
  direction: ltr;
  white-space: nowrap;
}

.statusbar__spacer { flex: 1 1 auto; }
.statusbar__note { opacity: .8; }
.src-link {
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-xs);
}
.src-link:hover code {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.src-link code { transition: color .15s ease, background .15s ease, border-color .15s ease; }

.statusbar code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
  direction: ltr;
  display: inline-block;
}

@media (max-width: 1180px) {
  .detail {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(420px, 92vw);
    z-index: 60;
    box-shadow: var(--shadow-lg);
    transform: translateX(var(--slide, 102%));
    transition: transform .28s cubic-bezier(.32,.72,0,1);
  }
  html[dir='rtl'] .detail { --slide: -102%; }
  .app.detail-open .detail { transform: translateX(0); }

  .detail__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: hsl(var(--nh) 30% 8% / .42);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
  }
  .app.detail-open .detail__backdrop { opacity: 1; pointer-events: auto; }
}

@media (max-width: 720px) {
  :root { --skill-col: 142px; --cell-w: 42px; --gutter: 12px; }

  .topbar { padding: 9px 14px 7px; gap: 10px; }
  .brand__mark { width: 30px; height: 30px; border-radius: 9px; }
  .brand__mark svg { width: 17px; height: 17px; }
  .brand__title { font-size: 14.5px; }
  .brand__sub { display: none; }
  .toolbar { padding: 0 14px 9px; gap: 7px; }
  .search__input { height: 34px; }
  .band-tab { height: 30px; padding: 0 11px; }
  .search { flex: 1 1 100%; max-width: none; }

  .band-tabs {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    overscroll-behavior-inline: contain;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
  html[dir='rtl'] .band-tabs {
    mask-image: linear-gradient(to left, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
  .matrix-area { padding: 10px 10px 12px; }
  .matrix-scroll { border-radius: var(--r-md); }
  .skill-cell { font-size: 12.6px; line-height: 1.32; }
  .skill-cell__name {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cell, .skill-cell { height: 44px; }
  .chip { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }

  .detail {
    inset: auto 0 0 0;
    width: 100%;
    max-height: 88dvh;
    border-inline-start: 0;
    border-top: 1px solid var(--border);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(102%);
  }
  html[dir='rtl'] .detail { transform: translateY(102%); }
  .app.detail-open .detail { transform: translateY(0); }
  .detail::before {
    content: '';
    position: absolute;
    top: 7px; left: 50%; translate: -50% 0;
    width: 38px; height: 4px;
    border-radius: var(--r-pill);
    background: var(--border-strong);
  }
  .detail__head { padding: 18px 16px 13px; }
  .detail__body { padding: 16px; }
  .statusbar { padding: 7px 14px; font-size: 11.5px; gap: 10px; }
  .statusbar__note { display: none; }
}

@media (max-width: 400px) {
  :root { --skill-col: 132px; --cell-w: 40px; --gutter: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .appbar, .detail, .statusbar, .detail__backdrop { display: none !important; }
  .app, .matrix-scroll { height: auto; overflow: visible; }
  body { background: #fff; }
}

/* ── Team identity: brand link and cross-site switcher ─────────────────── */

a.brand {
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-md);
  padding: 3px;
  margin: -3px;
  transition: background .16s ease;
}
a.brand:hover { background: var(--surface-3); }
a.brand:hover .brand__mark { transform: translateY(-1px) rotate(-3deg); }
.brand__mark { transition: transform .26s var(--ease-out); }

.brand__title .brand__accent { color: var(--accent); }

.brand__badge {
  display: inline-block;
  margin-inline-start: 8px;
  vertical-align: 2px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  color: var(--band-architect-fg);
  background: var(--band-architect-soft);
  border: 1px solid var(--band-architect-line);
}
html[lang='fa'] .brand__badge { letter-spacing: 0; text-transform: none; font-size: 10.5px; }

.switcher { position: relative; flex: 0 0 auto; }

.switcher__btn, .switcher__item {
  --tone:   hsl(var(--h, 222) 64% 46%);
  --tone-2: hsl(var(--h2, 266) 60% 54%);
}
:root[data-theme='dark'] .switcher__btn,
:root[data-theme='dark'] .switcher__item {
  --tone:   hsl(var(--h, 222) 76% 64%);
  --tone-2: hsl(var(--h2, 266) 70% 68%);
}

.switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px 0 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
html[dir='rtl'] .switcher__btn { padding: 0 8px 0 10px; }
.switcher__btn:hover { color: var(--text); border-color: var(--border-strong); }
.switcher__btn[aria-expanded='true'] { color: var(--text); background: var(--surface); box-shadow: var(--shadow-sm); }
.switcher__btn svg { width: 13px; height: 13px; opacity: .7; }
.switcher__btn .switcher__caret { transition: transform .2s var(--ease-out); }
.switcher__btn[aria-expanded='true'] .switcher__caret { transform: rotate(180deg); }

.switcher__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--tone);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 24%, transparent);
}

.switcher__label { white-space: nowrap; }

.switcher__menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 80;
  min-width: 268px;
  max-width: min(400px, calc(100vw - 24px));
  padding: 7px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transform-origin: top var(--menu-origin, right);
  pointer-events: none;
  transition: opacity .18s ease, transform .22s var(--ease-out);
}
html[dir='rtl'] .switcher__menu { --menu-origin: left; }
.switcher.is-open .switcher__menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.switcher__heading {
  padding: 6px 10px 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}
html[lang='fa'] .switcher__heading { letter-spacing: 0; text-transform: none; font-size: 11.5px; }

.switcher__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: background .14s ease;
}
.switcher__item:hover, .switcher__item:focus-visible { background: var(--surface-3); }
.switcher__item[aria-current='page'] { background: var(--accent-soft); }

.switcher__mark {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(150deg, var(--tone), var(--tone-2));
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .32);
}
.switcher__mark svg { width: 16px; height: 16px; display: block; }

.switcher__text { min-width: 0; flex: 1 1 auto; }
.switcher__name {
  display: block;
  font-size: 13.5px;
  font-weight: 640;
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.switcher__desc {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.switcher__tick { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent); opacity: 0; }
.switcher__item[aria-current='page'] .switcher__tick { opacity: 1; }

.switcher__soon {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  color: var(--text-muted);
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
}
html[lang='fa'] .switcher__soon { letter-spacing: 0; text-transform: none; }
.switcher__item.is-soon { opacity: .62; cursor: default; }

.switcher__sep { height: 1px; margin: 6px 8px; background: var(--border-soft); }

@media (max-width: 860px) {
  .switcher__label { display: none; }
  .switcher__btn { padding-inline: 8px; }
}

@media (max-width: 720px) {
  .switcher { position: static; }
  .switcher__menu {
    top: calc(100% + 6px);
    inset-inline: 12px;
    min-width: 0;
    max-width: none;
    transform-origin: top center;
  }
}