: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 }
}