:root {
  --n31-r: 16px;
  --n31-r-sm: 11px;
  --n31-hair: color-mix(in oklab, var(--line) 72%, transparent);
  --n31-soft: color-mix(in oklab, var(--ink) 4%, transparent);
  --n31-tint: color-mix(in oklab, var(--green) 10%, transparent);
  --n31-tint-2: color-mix(in oklab, var(--green) 17%, transparent);
  --n31-sh: 0 1px 2px color-mix(in oklab, var(--ink) 7%, transparent);
  --n31-sh-2: 0 14px 34px color-mix(in oklab, var(--ink) 10%, transparent);
  --n31-ease: cubic-bezier(.2, .8, .3, 1);
}

.nv-copy {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 7px 12px;
  border-radius: var(--n31-r-sm);
  border: 1px solid var(--n31-hair);
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  font-size: calc(12px * var(--fz-base, 1));
  cursor: pointer;
  transition: border-color .16s var(--n31-ease), background .16s var(--n31-ease), color .16s var(--n31-ease);
}
.nv-copy .v {
  direction: ltr;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nv-copy svg { width: 15px; height: 15px; flex: none; opacity: .7 }
.nv-copy:hover { border-color: var(--green); background: var(--n31-tint); color: var(--green) }
.nv-copy:hover svg { opacity: 1 }
.nv-copy.is-done { border-color: var(--green); background: var(--n31-tint-2); color: var(--green) }
.nv-copy:focus-visible { outline: 2px solid var(--green); outline-offset: 2px }
.nv-copy.sm { padding: 5px 9px; font-size: calc(11px * var(--fz-small, 1)) }

.nv-trackbox {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 0;
  padding: 13px 15px;
  border-radius: var(--n31-r);
  background: var(--surface);
  border: 1px solid var(--n31-hair);
  box-shadow: var(--n31-sh);
}
.nv-trackbox .ic {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 12px;
  background: var(--n31-tint);
  color: var(--green);
}
.nv-trackbox .ic svg { width: 19px; height: 19px }
.nv-trackbox .tx { flex: 1 1 180px; min-width: 0 }
.nv-trackbox .tx b { display: block; font-size: calc(12.5px * var(--fz-base, 1)) }
.nv-trackbox .tx span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: calc(11px * var(--fz-small, 1));
  line-height: 1.8;
}
.nv-trackbox .go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--n31-r-sm);
  background: var(--n31-soft);
  color: var(--muted);
  font-weight: 800;
  font-size: calc(11.5px * var(--fz-base, 1));
}
.nv-trackbox .go:hover { background: var(--n31-tint); color: var(--green) }

.nv-acc-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 16px 18px;
  border-radius: var(--n31-r);
  background: linear-gradient(135deg, var(--n31-tint), transparent 62%), var(--surface);
  border: 1px solid var(--n31-hair);
  box-shadow: var(--n31-sh);
}
.nv-acc-hero .av {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font: 900 22px var(--font, Vazirmatn), sans-serif;
}
.nv-acc-hero .who { flex: 1 1 190px; min-width: 0 }
.nv-acc-hero .who b { display: block; font-size: calc(16px * var(--fz-base, 1)); letter-spacing: -.02em }
.nv-acc-hero .who span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(11.5px * var(--fz-small, 1));
}
.nv-acc-stats { display: flex; gap: 8px; flex-wrap: wrap }
.nv-acc-stats > div {
  padding: 8px 13px;
  border-radius: var(--n31-r-sm);
  background: var(--surface);
  border: 1px solid var(--n31-hair);
  text-align: center;
  min-width: 86px;
}
.nv-acc-stats b {
  display: block;
  font-size: calc(15px * var(--fz-base, 1));
  font-variant-numeric: tabular-nums;
}
.nv-acc-stats span { font-size: calc(10px * var(--fz-small, 1)); color: var(--muted) }

.acc-panel {
  border-radius: var(--n31-r);
  border-color: var(--n31-hair);
  box-shadow: var(--n31-sh);
  overflow: hidden;
}
.acc-panel + .acc-panel { margin-top: 16px }
.acc-panel-head { gap: 11px; padding: 15px 17px; background: var(--n31-soft) }
.acc-panel-head .ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--n31-hair);
  font-size: 16px;
}
.acc-panel-body { padding: 17px }
.acc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px }
.acc-fields .full { grid-column: 1 / -1 }
.acc-panel .form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: calc(11.5px * var(--fz-base, 1));
  font-weight: 800;
}
.acc-panel .form-group input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border-radius: var(--n31-r-sm);
  border: 1px solid var(--n31-hair);
  background: var(--surface);
  color: var(--ink);
  transition: border-color .16s var(--n31-ease), box-shadow .16s var(--n31-ease);
}
.acc-panel .form-group input:focus {
  outline: 0;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--n31-tint);
}
.acc-panel .form-group input:disabled { background: var(--n31-soft); color: var(--muted) }
.acc-panel .form-group small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: calc(10.5px * var(--fz-small, 1));
  line-height: 1.85;
}
.acc-panel-foot { padding: 13px 17px; background: var(--n31-soft); border-top: 1px solid var(--n31-hair) }

.nv-ord-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-radius: var(--n31-r);
  background: var(--surface);
  border: 1px solid var(--n31-hair);
  box-shadow: var(--n31-sh);
}
.nv-ord-top h1 { margin: 0 }
.nv-ord-top .subtitle { margin: 4px 0 0 }
.nv-ord-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }

.stepper {
  padding: 16px 18px;
  border-radius: var(--n31-r);
  background: var(--surface);
  border: 1px solid var(--n31-hair);
  box-shadow: var(--n31-sh);
}
.stepper-track { margin-top: 18px }
.stepper .step-num {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--green) 9%, transparent);
}
.stepper .step-label { font-weight: 700 }

.acc-split > .table-scroll, .acc-split .box {
  border-radius: var(--n31-r);
  border: 1px solid var(--n31-hair);
  background: var(--surface);
  box-shadow: var(--n31-sh);
  overflow: hidden;
}
.acc-split .box { padding: 16px 17px }
.acc-split .box h3 {
  margin: 0 0 12px;
  font-size: calc(13px * var(--fz-base, 1));
  font-weight: 900;
}
.sumrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: calc(12px * var(--fz-base, 1));
}
.sumrow:nth-child(odd) { background: var(--n31-soft) }
.sumrow span { color: var(--muted) }
.sumrow b { font-variant-numeric: tabular-nums }
.sumrow.off b { color: var(--green) }
.sumrow.total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--n31-hair);
  background: none;
  font-weight: 900;
}
.sumrow.total b { font-size: calc(14.5px * var(--fz-base, 1)) }

.nv-recv { display: grid; gap: 8px }
.nv-recv > div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: calc(11.5px * var(--fz-base, 1));
  line-height: 1.9;
}
.nv-recv > div > span:first-child {
  flex: none;
  min-width: 62px;
  color: var(--muted);
  font-size: calc(10.5px * var(--fz-small, 1));
}
.nv-recv b { font-weight: 800 }

.nv-orders-table th, .nv-orders-table td { vertical-align: middle }
.nv-orders-table .code {
  font-weight: 900;
  direction: ltr;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.nv-orders-table .go { color: var(--green); font-weight: 800 }

@media (max-width: 720px) {
  .nv-acc-hero { padding: 14px }
  .nv-acc-stats { width: 100% }
  .nv-acc-stats > div { flex: 1 }
  .nv-ord-top { padding: 14px }
  .nv-trackbox { padding: 12px }
  .nv-trackbox .go { width: 100%; justify-content: center }
  .acc-fields { grid-template-columns: 1fr }
}

.av.has-img { padding: 0; overflow: hidden; background: var(--surface2) }
.av.has-img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block }

.acc-av { position: relative; flex: none; display: inline-flex }
.acc-av .av { width: 52px; height: 52px }
.acc-av.lg .av { width: 76px; height: 76px; font-size: calc(30px * var(--fz-base, 1)) }

.nv-tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 30px;
  line-height: 1.7;
  font: 800 11px var(--font, Vazirmatn), sans-serif;
  font-size: calc(11px * var(--fz-badge, 1));
  color: var(--nv-tier, var(--green));
  background: color-mix(in oklch, var(--nv-tier, var(--green)), transparent 88%);
}
.nv-tier svg, .nv-tier .nv-i { width: 14px; height: 14px; flex: none }
.nv-tier .nv-i-img { border-radius: 4px; object-fit: cover }
.nv-tier-gold { --nv-tier: oklch(62% .13 78) }
.nv-tier-silver { --nv-tier: oklch(57% .015 85) }
.nv-tier-bronze { --nv-tier: oklch(56% .09 45) }
.nv-tier-diamond { --nv-tier: oklch(59% .12 245) }

.acc-meter {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: var(--n31-r);
  background: var(--surface);
  border: 1px solid var(--n31-hair);
  box-shadow: var(--n31-sh);
}
.acc-meter-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px }
.acc-meter-top b { font-size: calc(13px * var(--fz-base, 1)) }
.acc-meter-top span { margin-inline-start: auto; font-size: calc(11px * var(--fz-small, 1)) }
.acc-meter-bar { height: 8px; border-radius: 20px; background: var(--surface2); overflow: hidden }
.acc-meter-bar i {
  display: block;
  height: 100%;
  border-radius: 20px;
  background: var(--acc-c, var(--green));
  transition: width .4s var(--n31-ease);
}
.acc-chiprow { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px }
.acc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 30px;
  border: 1px solid var(--n31-hair);
  color: var(--muted);
  font: 700 11px var(--font, Vazirmatn), sans-serif;
  font-size: calc(11px * var(--fz-badge, 1));
}
.acc-chip svg, .acc-chip .nv-i { width: 13px; height: 13px }
.acc-chip.ok { color: var(--green); border-color: color-mix(in oklch, var(--green), transparent 65%); background: var(--n31-tint) }

.acc-club {
  margin-bottom: 16px;
  padding: 15px 16px;
  border-radius: var(--n31-r);
  background: linear-gradient(135deg, color-mix(in oklch, var(--acc-c, var(--green)), transparent 90%), transparent 62%), var(--surface);
  border: 1px solid var(--n31-hair);
  box-shadow: var(--n31-sh);
}
.acc-club-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 11px }
.acc-club-badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 14px;
  color: var(--acc-c, var(--green));
  background: color-mix(in oklch, var(--acc-c, var(--green)), transparent 86%);
}
.acc-club-top > div { flex: 1 1 180px; min-width: 0 }
.acc-club-top b { display: block; font-size: calc(14px * var(--fz-base, 1)) }
.acc-club-top span { display: block; margin-top: 2px; color: var(--muted); font-size: calc(11.5px * var(--fz-small, 1)) }
.acc-club p { margin: 10px 0 0; font-size: calc(11.5px * var(--fz-small, 1)) }

.acc-avrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
.acc-avpick { flex: 1 1 200px; min-width: 0; display: grid; gap: 7px }
.acc-avpick input[type=file] {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--n31-r-sm);
  border: 1px dashed var(--line);
  background: var(--n31-soft);
  font-size: calc(12px * var(--fz-form, 1));
}
.acc-avpick small { color: var(--muted); font-size: calc(10.5px * var(--fz-small, 1)) }

.acc-flag {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: calc(9.5px * var(--fz-badge, 1));
  font-weight: 800;
  color: var(--muted);
  background: var(--surface2);
}
.acc-flag.ok { color: var(--green); background: var(--n31-tint) }

.acc-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 18px }
.acc-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: var(--n31-r);
  background: var(--surface);
  border: 1px solid var(--n31-hair);
  box-shadow: var(--n31-sh);
  transition: transform .18s var(--n31-ease), border-color .18s;
}
.acc-links a:hover { transform: translateY(-2px); border-color: color-mix(in oklch, var(--green), transparent 60%) }
.acc-links .ic {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 12px;
  color: var(--green);
  background: var(--n31-tint);
}
.acc-links a > span:nth-child(2) { flex: 1; min-width: 0 }
.acc-links b { display: block; font-size: calc(12.5px * var(--fz-base, 1)) }
.acc-links small { display: block; margin-top: 2px; color: var(--muted); font-size: calc(10.5px * var(--fz-small, 1)) }
.acc-links a > svg:last-child, .acc-links a > .nv-i:last-child { flex: none; color: var(--muted) }

@media (max-width: 560px) {
  .acc-av.lg .av { width: 64px; height: 64px }
  .acc-links { grid-template-columns: 1fr }
}