/* ==========================================================================
   X SHOP — S4 Заказы, S4.1 Детали заказа, S6 Профиль
   ========================================================================== */

.orders { max-width: 880px; }
.ogroup + .ogroup { margin-top: var(--sp-6); }
.ogroup__head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0 2px var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text-2);
  letter-spacing: 0;
}
.ogroup__head .tnum { color: var(--c-text-3); font-weight: var(--fw-medium); }

/* Детали заказа */
.order { max-width: 720px; }
.ocard {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: 0 0 0 1px var(--c-line) inset;
}
.ocard + .ocard,
.ocard + .notice { margin-top: var(--sp-3); }
.ocard--hero {
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(40, 119, 250, 0.14), transparent 65%),
    var(--c-surface);
}
.ocard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.ocard__time { font-size: var(--fs-sm); color: var(--c-text-3); }
.ocard__total {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(1.75rem, 8vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1;
}
.ocard__meta { margin-top: var(--sp-2); color: var(--c-text-2); font-size: var(--fs-sm); }
.ocard__store { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.ocard__title { margin-bottom: var(--sp-4); font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: 0; }

.obuyer { display: flex; align-items: center; gap: var(--sp-3); }
.obuyer div { display: grid; }
.obuyer span { font-size: var(--fs-sm); color: var(--c-text-2); }
.ocomment {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  font-size: var(--fs-sm);
}
.ocomment .i { color: var(--c-text-3); flex: none; margin-top: 2px; }

.oitems { display: grid; }
.oitems li { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 0; }
.oitems li + li { border-top: 1px solid var(--c-line); }
.oitems .thumb { width: 44px; height: 44px; border-radius: 12px; font-size: 12px; }
.oitems__main { flex: 1; min-width: 0; display: grid; }
.oitems__main strong { font-weight: var(--fw-medium); }
.oitems__main span { font-size: var(--fs-sm); color: var(--c-text-2); }
.oitems li > .tnum { font-weight: var(--fw-semibold); }
.oitems__total {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line-strong);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
}

.ohist { display: grid; gap: var(--sp-3); }
.ohist li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }
.ohist li span:last-child { color: var(--c-text-3); }
.ohist__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-text-3); }
.ohist__dot--new { background: #6FA5FF; }
.ohist__dot--processing { background: var(--c-warning); }
.ohist__dot--done { background: var(--c-success); }

.order .notice { margin-top: var(--sp-3); }

/* Профиль */
.profile { max-width: 720px; }
.pcard-me {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: 0 0 0 1px var(--c-line) inset;
}
.pcard-me .avatar { width: 56px; height: 56px; font-size: var(--fs-xl); }
.pcard-me__name { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
.pcard-me__sub { color: var(--c-text-2); font-size: var(--fs-sm); }
.profile .attn__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none; }

/* Аналитика */
.analytics { max-width: 980px; }
.analytics__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.analytics__tools > div:empty { display: none; }
.analytics__hero { margin-bottom: var(--sp-3); }
.agrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 768px) { .agrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.atile { display: grid; gap: 4px; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-line) inset; }
.acols { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.acols .ocard + .ocard { margin-top: 0; }
@media (min-width: 1024px) { .acols { grid-template-columns: 1fr 1fr; } }
.hbars { display: grid; gap: var(--sp-3); }
.hbar { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }
.hbar--store { grid-template-columns: 24px minmax(0, 110px) 1fr auto; }
.hbar__label { color: var(--c-text-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hbar__track { height: 8px; border-radius: 4px; background: var(--c-surface-3); overflow: hidden; }
.hbar__fill { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--c-accent); transition: width var(--dur-4) var(--ease-out); }
.hbar__fill--new { background: #6FA5FF; }
.hbar__fill--processing { background: var(--c-warning); }
.hbar__fill--done { background: var(--c-success); }
.hbar__fill--cancelled { background: var(--c-text-3); }
.hbar__value { font-weight: var(--fw-semibold); }
.atop { display: grid; }
.atop li { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 0; font-size: var(--fs-sm); }
.atop li + li { border-top: 1px solid var(--c-line); }
.atop__n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--c-surface-2); font-weight: var(--fw-semibold); font-size: var(--fs-xs); }
.atop__name { flex: 1; min-width: 0; display: grid; font-weight: var(--fw-medium); }
.atop__name em { font-style: normal; color: var(--c-text-3); font-weight: var(--fw-regular); }
.atop li > .tnum { font-weight: var(--fw-semibold); }