.performance-real{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.performance-real__intro{
  margin:0;
}

.performance-real__toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.performance-real__field{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:0 0 min(100%, 320px);
  width:min(100%, 320px);
  min-width:min(100%, 320px);
  color:var(--text-muted, var(--muted));
  font-size:var(--mesa-type-size-overline, 0.68rem);
  font-weight:800;
  letter-spacing:var(--mesa-type-tracking-overline, 0.12em);
  line-height:1.15;
  text-transform:uppercase;
}

.performance-real__select{
  width:100% !important;
  min-width:0;
  min-height:44px;
  color:var(--text);
}

#mesaAppShell #view-performance .performance-real__toolbar .performance-real__field{
  flex-basis:min(100%, 320px);
}

.performance-real__periods{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:1 1 360px;
  min-width:0;
  padding:4px;
  border:1px solid var(--border);
  border-radius:8px;
  background:color-mix(in srgb, var(--surface2, var(--surface)) 72%, transparent);
  overflow:auto;
}

.performance-real__period{
  min-height:34px;
  padding:0 13px;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  color:var(--text-mid, var(--muted));
  font:700 0.82rem/1.1 "DM Sans", "Inter", system-ui, sans-serif;
  white-space:nowrap;
  cursor:pointer;
}

.performance-real__period:hover,
.performance-real__period:focus-visible{
  border-color:color-mix(in srgb, var(--accent) 42%, var(--border));
  color:var(--text);
  outline:none;
}

.performance-real__period.is-active{
  border-color:color-mix(in srgb, var(--accent) 64%, var(--border));
  background:var(--paper);
  color:var(--text);
  box-shadow:0 8px 18px rgba(17,17,15,0.08);
}

.performance-real__refresh{
  min-height:44px;
  white-space:nowrap;
}

.performance-real__status{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb, var(--gold, var(--accent)) 32%, var(--border));
  border-radius:8px;
  background:color-mix(in srgb, var(--gold, var(--accent)) 8%, var(--paper));
  color:var(--text-mid, var(--muted));
  font-size:0.78rem;
  font-weight:650;
  line-height:1.35;
}

.performance-real__metrics{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:10px;
}

.performance-real-metric{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:126px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--paper);
  box-shadow:0 14px 28px rgba(17,17,15,0.06);
}

.performance-real-metric__label{
  color:var(--text-muted, var(--muted));
  font-size:var(--mesa-type-size-overline, 0.68rem);
  font-weight:850;
  letter-spacing:var(--mesa-type-tracking-overline, 0.12em);
  line-height:1.15;
  text-transform:uppercase;
}

.performance-real-metric__value{
  color:var(--text);
  font-size:clamp(1.12rem, 1vw + 0.95rem, 1.55rem);
  font-weight:850;
  line-height:1.05;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.performance-real-metric__sub{
  margin-top:auto;
  color:var(--text-mid, var(--muted));
  font-size:0.75rem;
  font-weight:650;
  line-height:1.35;
}

.performance-real-metric--positive{
  border-color:color-mix(in srgb, var(--positive, var(--green)) 30%, var(--border));
}

.performance-real-metric--negative{
  border-color:color-mix(in srgb, var(--negative, var(--red)) 26%, var(--border));
}

.performance-real .is-positive{
  color:var(--positive, var(--green));
}

.performance-real .is-negative{
  color:var(--negative, var(--red));
}

.performance-real .is-neutral{
  color:var(--text);
}

.performance-real__main-grid{
  display:grid;
  grid-template-columns:minmax(280px, 0.95fr) minmax(420px, 1.55fr);
  gap:12px;
  align-items:stretch;
}

.performance-real-panel{
  min-width:0;
  padding:18px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--paper);
  box-shadow:0 14px 28px rgba(17,17,15,0.06);
}

.performance-real-panel__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}

.performance-real-panel__head .mesa-ui-content-kicker,
.performance-real-panel__head .mesa-ui-content-title{
  margin:0;
}

.performance-real-panel__head .mesa-ui-content-title{
  margin-top:4px;
}

.performance-real-panel__note{
  margin:12px 0 0;
  color:var(--text-muted, var(--muted));
  font-size:0.76rem;
  font-weight:600;
  line-height:1.45;
}

.performance-real-thermo__badge{
  flex:0 0 auto;
  padding:6px 10px;
  border:1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
  border-radius:999px;
  background:color-mix(in srgb, var(--accent) 9%, var(--paper));
  color:var(--text);
  font-size:0.72rem;
  font-weight:850;
  line-height:1;
  white-space:nowrap;
}

.performance-real-thermo__scale{
  position:relative;
  height:20px;
  margin:18px 0 10px;
}

.performance-real-thermo__axis{
  position:absolute;
  inset:7px 0;
  border-radius:999px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--negative, var(--red)) 76%, #2a211f),
    color-mix(in srgb, var(--gold, var(--accent)) 54%, var(--paper)),
    color-mix(in srgb, var(--positive, var(--green)) 72%, #1d2d24)
  );
}

.performance-real-thermo__pointer{
  position:absolute;
  top:0;
  left:var(--performance-pointer, 50%);
  width:4px;
  height:20px;
  border-radius:999px;
  background:var(--text);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--paper) 78%, transparent);
  transform:translateX(-50%);
}

.performance-real-thermo__labels{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:6px;
  color:var(--text-muted, var(--muted));
  font-size:0.64rem;
  font-weight:800;
  letter-spacing:0.05em;
  line-height:1.2;
  text-align:center;
  text-transform:uppercase;
}

.performance-real-thermo__message{
  margin:16px 0 0;
  color:var(--text-mid, var(--muted));
  font-size:0.86rem;
  font-weight:650;
  line-height:1.45;
}

.performance-real-chart{
  grid-row:span 2;
}

.performance-real-chart__meta{
  flex:0 0 auto;
  color:var(--text-muted, var(--muted));
  font-size:0.74rem;
  font-weight:750;
  white-space:nowrap;
}

.performance-real-chart__svg{
  display:block;
  width:100%;
  height:auto;
  min-height:220px;
  border:1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius:8px;
  background:color-mix(in srgb, var(--surface2, var(--surface)) 42%, var(--paper));
}

.performance-real-chart__grid{
  fill:none;
  stroke:color-mix(in srgb, var(--border) 72%, transparent);
  stroke-width:1;
}

.performance-real-chart__line{
  fill:none;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.performance-real-chart__line--portfolio{
  stroke:var(--positive, var(--green));
}

.performance-real-chart__line--benchmark{
  stroke:var(--accent);
  stroke-dasharray:8 8;
}

.performance-real-chart__legend{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:12px;
  color:var(--text-mid, var(--muted));
  font-size:0.8rem;
  font-weight:750;
}

.performance-real-chart__legend span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.performance-real-chart__dot{
  width:10px;
  height:10px;
  border-radius:999px;
}

.performance-real-chart__dot--portfolio{
  background:var(--positive, var(--green));
}

.performance-real-chart__dot--benchmark{
  background:var(--accent);
}

.performance-real-excess__track{
  position:relative;
  height:22px;
  border-radius:999px;
  background:color-mix(in srgb, var(--surface2, var(--surface)) 70%, var(--paper));
  overflow:hidden;
}

.performance-real-excess__zero{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:color-mix(in srgb, var(--text) 40%, transparent);
}

.performance-real-excess__bar{
  position:absolute;
  top:6px;
  height:10px;
  width:calc(var(--performance-excess-width, 0%) / 2);
  border-radius:999px;
}

.performance-real-excess__track--right .performance-real-excess__bar{
  left:50%;
  background:var(--positive, var(--green));
}

.performance-real-excess__track--left .performance-real-excess__bar{
  right:50%;
  background:var(--negative, var(--red));
}

.performance-real-excess__labels{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  color:var(--text-muted, var(--muted));
  font-size:0.68rem;
  font-weight:800;
  letter-spacing:0.06em;
  line-height:1.2;
  text-transform:uppercase;
}

.performance-real-composition{
  grid-column:1 / -1;
}

.performance-real-composition__rows{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.performance-real-composition__row{
  display:grid;
  grid-template-columns:minmax(170px, 0.8fr) minmax(140px, 1fr) minmax(150px, 0.65fr);
  gap:12px;
  align-items:center;
}

.performance-real-composition__label{
  color:var(--text);
  font-size:0.82rem;
  font-weight:800;
  line-height:1.2;
}

.performance-real-composition__track{
  height:10px;
  border-radius:999px;
  background:color-mix(in srgb, var(--surface2, var(--surface)) 72%, var(--paper));
  overflow:hidden;
}

.performance-real-composition__track i{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--text-muted, var(--muted));
}

.performance-real-composition__row--positive .performance-real-composition__track i{
  background:var(--positive, var(--green));
}

.performance-real-composition__row--negative .performance-real-composition__track i{
  background:var(--negative, var(--red));
}

.performance-real-composition__value{
  color:var(--text);
  font-size:0.86rem;
  font-weight:850;
  line-height:1.2;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.performance-real-composition__row--positive .performance-real-composition__value{
  color:var(--positive, var(--green));
}

.performance-real-composition__row--negative .performance-real-composition__value{
  color:var(--negative, var(--red));
}

.performance-real-composition__note{
  display:block;
  margin-top:3px;
  color:var(--text-muted, var(--muted));
  font-size:0.64rem;
  font-weight:700;
  line-height:1.2;
}

.performance-real-audit{
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--paper);
  box-shadow:0 14px 28px rgba(17,17,15,0.06);
  overflow:hidden;
}

.performance-real-audit summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:52px;
  padding:0 18px;
  color:var(--text);
  font-size:0.9rem;
  font-weight:850;
  cursor:pointer;
  list-style:none;
}

.performance-real-audit summary::-webkit-details-marker{
  display:none;
}

.performance-real-audit summary span:last-child{
  color:var(--text-muted, var(--muted));
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.performance-real-audit__body{
  padding:0 18px 18px;
  border-top:1px solid var(--border);
}

.performance-real-audit__box{
  margin:14px 0;
  padding:12px;
  border:1px solid color-mix(in srgb, var(--gold, var(--accent)) 40%, var(--border));
  border-radius:8px;
  background:color-mix(in srgb, var(--gold, var(--accent)) 8%, var(--paper));
}

.performance-real-audit__box strong{
  display:block;
  margin-bottom:8px;
  color:var(--text);
  font-size:0.82rem;
}

.performance-real-audit__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  padding-top:14px;
}

.performance-real-audit h4{
  margin:0 0 10px;
  color:var(--text);
  font-size:0.82rem;
  font-weight:850;
  line-height:1.2;
}

.performance-real-audit__list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.performance-real-audit__list li{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px;
  border:1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius:8px;
  background:color-mix(in srgb, var(--surface2, var(--surface)) 48%, transparent);
  color:var(--text-mid, var(--muted));
  font-size:0.75rem;
  font-weight:650;
  line-height:1.35;
}

.performance-real-audit__list strong{
  color:var(--text);
  font-size:0.78rem;
}

.performance-real-audit__list small{
  color:var(--text-muted, var(--muted));
  font-size:0.68rem;
  line-height:1.35;
}

.performance-real-audit__empty,
.performance-real__empty{
  margin:0;
  padding:18px;
  color:var(--text-mid, var(--muted));
  font-size:0.9rem;
  font-weight:650;
  line-height:1.45;
}

.performance-real__empty{
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--paper);
}

@media (max-width: 1280px){
  .performance-real__metrics{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .performance-real-audit__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px){
  .performance-real__main-grid{
    grid-template-columns:1fr;
  }

  .performance-real-chart{
    grid-row:auto;
  }
}

@media (max-width: 767px){
  .performance-real{
    gap:14px;
  }

  .performance-real__toolbar{
    align-items:stretch;
  }

  .performance-real__field,
  .performance-real__periods,
  .performance-real__refresh{
    width:100%;
    flex-basis:100%;
  }

  .performance-real__periods{
    scrollbar-width:none;
  }

  .performance-real__periods::-webkit-scrollbar{
    display:none;
  }

  .performance-real__metrics{
    grid-template-columns:1fr;
  }

  .performance-real-metric{
    min-height:112px;
  }

  .performance-real-panel{
    padding:15px;
  }

  .performance-real-panel__head,
  .performance-real-audit summary{
    align-items:flex-start;
    flex-direction:column;
  }

  .performance-real-composition__row{
    grid-template-columns:1fr;
    gap:7px;
  }

  .performance-real-composition__value{
    text-align:left;
  }

  .performance-real-audit__grid{
    grid-template-columns:1fr;
  }
}