.premium-panel {
  width: min(1520px, 100%);
  margin: 14px auto 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.premium-head {
  display: flex;
  min-height: 104px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.premium-head p { margin: 0 0 3px; color: #a9d0ff; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.premium-head h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.premium-head > div > span { display: block; margin-top: 5px; color: var(--text-faint); font-size: 11px; }
.premium-status-wrap { display: flex; align-items: center; gap: 10px; }
.premium-status-wrap .button { min-height: 38px; padding-inline: 12px; font-size: 11px; }

.premium-table-wrap { overflow-x: auto; }
.premium-columns,
.premium-row {
  display: grid;
  min-width: 860px;
  grid-template-columns: minmax(260px, 1.5fr) 190px 110px 130px 130px;
  gap: 16px;
  align-items: center;
  padding: 0 22px;
}
.premium-columns { min-height: 44px; color: var(--text-faint); font-size: 10px; font-weight: 650; }
.premium-columns span:not(:first-child),
.premium-row > .premium-price,
.premium-row > .premium-value,
.premium-row > .premium-amount { text-align: right; }
.premium-row > .premium-identity { text-align: left; }
.premium-row { position: relative; min-height: 72px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.premium-row:hover { background: var(--surface-hover); }
.premium-row-hit { position: absolute; z-index: 1; inset: 0; width: 100%; border: 0; background: transparent; cursor: pointer; }
.premium-identity { display: grid; min-width: 0; }
.premium-identity strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.premium-identity small { color: var(--text-faint); font-size: 10px; }
.premium-row .premium-price { color: var(--text-soft); font-size: 13px; }
.premium-row .premium-value { color: var(--red); font-size: 17px; font-weight: 780; }
.premium-row .premium-value.negative { color: var(--green); }
.premium-row .premium-amount { color: var(--text-soft); font-size: 12px; }
.premium-sparkline { display: flex; justify-content: flex-end; }
.premium-sparkline svg { width: 168px; height: 42px; overflow: visible; }
.premium-empty { padding: 50px 22px; color: var(--text-faint); text-align: center; }
.premium-footnote { margin: 0; padding: 12px 22px; border-top: 1px solid var(--line); color: var(--text-faint); font-size: 10px; }

.premium-modal { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 28px; }
.premium-modal[hidden] { display: none; }
.premium-modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(4,4,5,.8); backdrop-filter: blur(8px); }
.premium-modal-dialog { position: relative; width: min(980px, 100%); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 14px; background: #161618; box-shadow: 0 28px 90px rgba(0,0,0,.58); }
.premium-modal-close { position: absolute; z-index: 4; top: 14px; right: 14px; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 50%; background: #252528; color: var(--text-soft); font-size: 24px; line-height: 1; }
.premium-detail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 24px 76px 20px 24px; border-bottom: 1px solid var(--line); }
.premium-detail-head h2 { margin: 0; font-size: 22px; }
.premium-detail-head p { margin: 4px 0 0; color: var(--text-faint); font-size: 11px; }
.premium-detail-head > strong { color: var(--red); font-size: 25px; font-variant-numeric: tabular-nums; }
.premium-chart-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 8px; }
.premium-chart-toolbar > span { color: var(--text-soft); font-size: 12px; font-weight: 650; }
.premium-chart-toolbar > div { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--surface-raised); }
.premium-chart-toolbar button { min-width: 58px; min-height: 34px; border: 0; border-radius: 6px; background: transparent; color: var(--text-faint); font-size: 11px; }
.premium-chart-toolbar button.active { background: #333337; color: var(--text); }
.premium-chart-stage { position: relative; height: 390px; margin: 0 14px; }
.premium-chart-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.premium-tooltip { position: absolute; z-index: 3; min-width: 188px; transform: translate(12px,-100%); padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(22,22,24,.96); color: var(--text-soft); font-size: 10px; line-height: 1.7; pointer-events: none; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.premium-tooltip strong { display: block; color: var(--text); font-size: 11px; }
.premium-tooltip b { color: var(--red); font-weight: 700; }
.premium-chart-legend { display: flex; gap: 18px; padding: 8px 24px 20px; color: var(--text-faint); font-size: 10px; }
.premium-chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.premium-chart-legend i { display: inline-block; width: 22px; border-top: 2px solid #ff625d; }
.premium-chart-legend i.rule { border-top: 1px dashed #4b9cff; }

@media (max-width: 1040px) {
  .premium-columns,
  .premium-row {
    min-width: 0;
    grid-template-columns: minmax(180px, 1fr) 150px 76px 104px;
    gap: 12px;
    padding-inline: 16px;
  }
  .premium-columns span:last-child,
  .premium-row .premium-amount { display: none; }
  .premium-sparkline svg { width: 142px; }
}
@media (max-width: 820px) {
  .premium-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .premium-status-wrap { width: 100%; justify-content: space-between; }
  .premium-chart-stage { height: 320px; }
}
@media (max-width: 620px) {
  .premium-columns,
  .premium-row { grid-template-columns: minmax(150px, 1fr) 72px 94px; }
  .premium-columns span:nth-child(2),
  .premium-row .premium-sparkline { display: none; }
  .premium-modal { padding: 0; }
  .premium-modal-dialog { width: 100%; height: 100%; border: 0; border-radius: 0; }
  .premium-detail-head { padding-left: 18px; }
  .premium-chart-stage { height: 54vh; margin-inline: 4px; }
}