.portfolio-dialog,
.portfolio-editor {
  width: min(96vw, 1500px);
  max-width: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 22px;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.55);
}

.portfolio-dialog {
  height: min(96vh, 1100px);
}

.portfolio-dialog::backdrop,
.portfolio-editor::backdrop {
  background: rgba(3, 4, 6, 0.76);
  backdrop-filter: blur(6px);
}

.portfolio-shell {
  min-height: 100%;
  padding: 28px;
  overflow: auto;
}

.portfolio-header,
.portfolio-toolbar,
.portfolio-editor-header,
.portfolio-editor-actions,
.portfolio-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.portfolio-header {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-soft);
}

.portfolio-header .eyebrow,
.portfolio-editor-header .eyebrow {
  margin-top: 0;
}

.portfolio-header h2,
.portfolio-editor-header h3,
.portfolio-toolbar h3,
.portfolio-section-heading h3,
.portfolio-allocation h4,
.portfolio-top-positions h4 {
  margin: 0;
}

.portfolio-header p,
.portfolio-editor-header p,
.portfolio-section-heading p {
  margin-bottom: 0;
  color: var(--muted);
}

.portfolio-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 14px;
}

.portfolio-summary-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.018), transparent), var(--surface-strong);
}

.portfolio-summary-card span,
.portfolio-summary-card small {
  display: block;
  color: var(--muted);
}

.portfolio-summary-card strong {
  display: block;
  margin: 8px 0 6px;
  font-size: clamp(22px, 2.6vw, 34px);
}

.portfolio-summary-card.is-positive strong,
.portfolio-metric.is-positive strong {
  color: var(--green);
}

.portfolio-summary-card.is-negative strong,
.portfolio-metric.is-negative strong {
  color: var(--red);
}

.portfolio-intelligence {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.78fr);
  gap: 14px;
  margin: 14px 0 24px;
}

.portfolio-history-card,
.portfolio-insight-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.014), transparent), var(--surface-strong);
}

.portfolio-section-heading {
  align-items: flex-start;
}

.portfolio-section-heading h3 {
  font-size: 15px;
}

.portfolio-section-heading p {
  margin-top: 4px;
  font-size: 11px;
}

.portfolio-periods {
  display: flex;
  gap: 6px;
}

.portfolio-periods button {
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid #3b3832;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  cursor: pointer;
}

.portfolio-periods button[aria-pressed="true"] {
  color: #1b1306;
  border-color: var(--gold);
  background: var(--gold);
  font-weight: 800;
}

.portfolio-history-wrap {
  position: relative;
  min-height: 286px;
  margin-top: 12px;
}

.portfolio-history-chart {
  width: 100%;
  height: 286px;
  display: block;
  overflow: visible;
}

.portfolio-history-empty {
  min-height: 286px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed var(--border-soft);
  border-radius: 12px;
}

.portfolio-grid-line {
  stroke: rgba(255,255,255,0.08);
  stroke-width: 1;
}

.portfolio-axis-label {
  fill: var(--faint);
  font-size: 10px;
}

.portfolio-market-line,
.portfolio-cost-line {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.portfolio-market-line {
  stroke: var(--gold-bright);
  stroke-width: 3;
}

.portfolio-cost-line {
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-dasharray: 7 7;
  opacity: 0.8;
}

.portfolio-market-dot {
  fill: var(--gold-bright);
  stroke: var(--surface);
  stroke-width: 2;
}

.portfolio-history-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: 10px;
}

.portfolio-history-footer > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.portfolio-history-footer small {
  flex: 1 1 100%;
  color: var(--faint);
}

.portfolio-legend-market,
.portfolio-legend-cost {
  width: 18px;
  height: 2px;
  display: inline-block;
  border-radius: 999px;
}

.portfolio-legend-market {
  background: var(--gold-bright);
}

.portfolio-legend-cost {
  background: repeating-linear-gradient(90deg, var(--muted) 0 5px, transparent 5px 8px);
}

.portfolio-concentration {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0 18px;
}

.portfolio-concentration-stat {
  min-width: 0;
  padding: 11px;
  border-radius: 11px;
  background: rgba(255,255,255,0.025);
}

.portfolio-concentration-stat small,
.portfolio-concentration-stat strong {
  display: block;
}

.portfolio-concentration-stat small {
  color: var(--faint);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.portfolio-concentration-stat strong {
  margin-top: 5px;
  font-size: 15px;
}

.portfolio-allocation,
.portfolio-top-positions {
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

.portfolio-allocation h4,
.portfolio-top-positions h4 {
  margin-bottom: 10px;
  font-size: 12px;
}

.portfolio-allocation-row {
  margin-bottom: 10px;
}

.portfolio-allocation-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  font-size: 10px;
}

.portfolio-allocation-label strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-allocation-label span {
  flex: 0 0 auto;
  color: var(--faint);
}

.portfolio-allocation-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
}

.portfolio-allocation-track span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}

.portfolio-top-positions {
  margin-top: 16px;
}

.portfolio-top-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.045);
}

.portfolio-top-row:last-child {
  border-bottom: 0;
}

.portfolio-top-row > span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--gold-bright);
  background: var(--gold-soft);
  font-size: 9px;
  font-weight: 800;
}

.portfolio-top-row div {
  min-width: 0;
}

.portfolio-top-row div strong,
.portfolio-top-row div small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-top-row div strong,
.portfolio-top-row > strong {
  font-size: 10px;
}

.portfolio-top-row div small {
  margin-top: 2px;
  color: var(--faint);
  font-size: 9px;
}

.portfolio-toolbar {
  margin: 18px 0 12px;
}

.portfolio-toolbar small {
  color: var(--muted);
}

.portfolio-tools {
  display: flex;
  gap: 10px;
  min-width: min(100%, 760px);
}

.portfolio-tools input,
.portfolio-tools select {
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  color: var(--text);
  background: var(--surface-strong);
}

.portfolio-tools input {
  flex: 1;
}

.portfolio-tools select {
  width: 190px;
}

.portfolio-message {
  min-height: 20px;
  margin: 8px 0;
  color: var(--gold-bright);
}

.portfolio-list {
  display: grid;
  gap: 10px;
}

.portfolio-row {
  display: grid;
  grid-template-columns: 74px minmax(230px, 1.2fr) minmax(540px, 2fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--surface-strong);
}

.portfolio-row.is-missing {
  border-style: dashed;
  background: rgba(213, 165, 76, 0.035);
}

.portfolio-art {
  width: 62px;
  aspect-ratio: 0.714;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  color: var(--faint);
  background: var(--surface-soft);
  font-weight: 800;
}

.portfolio-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.portfolio-info {
  min-width: 0;
}

.portfolio-info strong,
.portfolio-info span,
.portfolio-info small {
  display: block;
}

.portfolio-info strong {
  font-size: 15px;
}

.portfolio-info span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio-info small {
  margin-top: 7px;
  color: var(--faint);
}

.portfolio-row.is-missing .portfolio-info small {
  color: var(--gold-bright);
}

.portfolio-metrics {
  display: grid;
  grid-template-columns: 0.6fr 1fr 1fr 1fr 1.3fr;
  gap: 8px;
}

.portfolio-metric {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
}

.portfolio-metric small,
.portfolio-metric strong {
  display: block;
}

.portfolio-metric small {
  margin-bottom: 4px;
  color: var(--faint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.portfolio-metric strong {
  font-size: 13px;
  white-space: nowrap;
}

.portfolio-edit-button {
  white-space: nowrap;
}

.portfolio-empty {
  padding: 50px 20px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  color: var(--muted);
  text-align: center;
}

.portfolio-editor {
  width: min(92vw, 780px);
}

.portfolio-editor-card {
  padding: 24px;
}

.portfolio-editor-header {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-soft);
}

.portfolio-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0;
}

.portfolio-editor-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}

.portfolio-editor-grid input,
.portfolio-editor-grid textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface-strong);
  resize: vertical;
}

.portfolio-editor-notes {
  grid-column: 1 / -1;
}

.portfolio-action-spacer {
  flex: 1;
}

.danger-action {
  padding: 10px 13px;
  border: 1px solid rgba(236, 128, 118, 0.55);
  border-radius: 10px;
  color: #180807;
  background: var(--red);
  cursor: pointer;
}

.danger-action.danger-outline {
  color: var(--red);
  background: transparent;
}

@media (max-width: 1180px) {
  .portfolio-intelligence {
    grid-template-columns: 1fr;
  }

  .portfolio-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-row {
    grid-template-columns: 70px 1fr auto;
  }

  .portfolio-metrics {
    grid-column: 2 / -1;
  }
}

@media (max-width: 720px) {
  .portfolio-shell {
    padding: 18px;
  }

  .portfolio-header,
  .portfolio-toolbar,
  .portfolio-editor-actions,
  .portfolio-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .portfolio-tools {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }

  .portfolio-tools select,
  .portfolio-tools input,
  .portfolio-tools button {
    width: 100%;
  }

  .portfolio-summary {
    grid-template-columns: 1fr 1fr;
  }

  .portfolio-row {
    grid-template-columns: 54px 1fr;
  }

  .portfolio-art {
    width: 48px;
  }

  .portfolio-metrics,
  .portfolio-edit-button {
    grid-column: 1 / -1;
  }

  .portfolio-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-editor-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-editor-notes {
    grid-column: auto;
  }

  .portfolio-action-spacer {
    display: none;
  }

  .portfolio-history-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
}