:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; color: #233044; background: #f6f7fb; font-synthesis: none; font-variant-numeric: tabular-nums; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input { font: inherit; }
button { min-height: 46px; min-width: 46px; border: 0; border-radius: 10px; padding: 10px 17px; cursor: pointer; background: #6657db; color: white; font-weight: 600; }
button:hover { filter: brightness(.95); }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #8c80ed; outline-offset: 3px; }
.header { display: flex; align-items: center; justify-content: space-between; max-width: 1120px; margin: auto; padding: 22px 32px; border-bottom: 1px solid #e4e7ef; }
.brand { display: flex; align-items: center; gap: 9px; color: #7461e1; text-decoration: none; font-size: 27px; font-weight: 800; }
.brand span { color: #233044; font-size: 22px; letter-spacing: -.6px; }
.header-note { color: #7a8295; font-size: 12px; }
main { max-width: 1120px; padding: 28px 32px 40px; margin: auto; min-height: 78vh; }
h1 { margin: 0; font-size: 27px; letter-spacing: -.8px; }
h2 { font-size: 18px; margin: 0; }
.eyebrow { color: #8073ba; font-size: 10px; letter-spacing: 1.8px; font-weight: 700; }
.muted { color: #7a8295; line-height: 1.7; }
.login-panel { max-width: 430px; margin: 45px auto 60px; padding: 34px; background: white; border: 1px solid #e4e7ef; border-radius: 18px; }
.login-panel h1 { margin-top: 12px; }
form { margin-top: 28px; }
label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
input { display: block; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #cad0df; border-radius: 9px; margin-bottom: 16px; background: #fcfcfe; }
form button { display: flex; justify-content: space-between; width: 100%; }
.error { font-size: 14px; color: #b03737; min-height: 20px; }
.fine-print { color: #858c9c; font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; margin: 12px 0 0; }
.intro { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.actions { display: flex; gap: 4px; flex-shrink: 0; }
.secondary { background: white; color: #6156c7; border: 1px solid #e0ddf4; }
.quiet { background: transparent; color: #858b9b; }
.asset-card { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; padding: 18px 22px 12px; border-radius: 14px; color: white; background: linear-gradient(115deg, #6860e5, #874de0); box-shadow: 0 8px 24px #6356cb19; }
.asset-card > div { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.asset-card span { font-size: 13px; color: #f0eafe; }
.asset-card small { font-size: 11px; color: #ddd4ff; }
.asset-total > span small { margin-left: 5px; }
.asset-total strong { font-size: clamp(25px, 3.7vw, 37px); letter-spacing: -.8px; overflow-wrap: anywhere; }
.asset-cny { margin-top: 8px; padding-top: 10px; border-top: 1px solid #ffffff25; }
.asset-cny > span { display: block; margin-bottom: 4px; }
.asset-total .asset-cny > strong { display: block; font-size: clamp(19px, 2.5vw, 25px); letter-spacing: -.5px; }
#total-fx-note { line-height: 1.7; overflow-wrap: anywhere; }
.asset-return { align-items: flex-end; text-align: right; }
.asset-return strong { font-size: clamp(21px, 3vw, 29px); letter-spacing: -.6px; overflow-wrap: anywhere; }
.asset-return #year-return { font-size: 18px; font-weight: 600; }
.asset-return strong.positive, .asset-return #year-return.positive { color: #ffccd6; }
.asset-return strong.negative, .asset-return #year-return.negative { color: #b8f1dd; }
.baseline-note { grid-column: 1 / -1; border-top: 1px solid #ffffff25; margin: 1px 0 0; padding-top: 8px; color: #e0d7ff; font-size: 11px; line-height: 1.6; }
.allocation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.allocation { padding: 12px 16px; border-radius: 10px; min-width: 0; }
.cash { background: #eaf1fd; }
.securities { background: #eaf6ef; }
.allocation > div { display: flex; flex-wrap: wrap; gap: 7px 12px; justify-content: space-between; font-size: 13px; color: #67758b; }
.allocation strong { display: block; font-size: 23px; letter-spacing: -.6px; margin: 4px 0 3px; overflow-wrap: anywhere; }
.allocation small { display: block; color: #84908f; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.portfolio-detail { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 10px 2px 5px; font-size: 12px; color: #7d8698; }
.portfolio-detail strong { margin-left: 7px; font-weight: 600; }
.notice { margin: 6px 0 12px; color: #878e9d; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.notice.warning { color: #946626; background: #fff4df; padding: 11px 14px; border-radius: 9px; }
.data-freshness { margin: 0 0 12px; padding: 11px 14px; border: 1px solid #e7e9f0; border-radius: 10px; background: #fff; }
.freshness-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; color: #7a8295; font-size: 10px; }
.freshness-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; margin: 9px 0 0; }
.freshness-times dt { color: #7a8295; font-size: 11px; }
.freshness-times dd { margin: 3px 0 0; color: #4d5870; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.freshness-note { margin: 8px 0 0; color: #8b713c; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.positions-panel { background: white; border: 1px solid #e7e9f0; border-radius: 16px; overflow: hidden; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; }
#holding-count { display: inline-block; color: #969cab; font-size: 12px; font-weight: 400; margin-left: 5px; }
.badge { font-size: 10px; padding: 5px 8px; border-radius: 5px; background: #f0eff8; color: #867ba6; white-space: nowrap; }
.list-head, .holding, .group-summary { display: grid; grid-template-columns: minmax(170px, 1.7fr) .7fr 1.05fr 1.05fr 1.05fr; align-items: center; gap: 12px; padding: 8px 18px; }
.list-head { color: #9299a8; font-size: 11px; background: #fcfcfe; }
.list-head > :not(:first-child) { text-align: right; }
.holding { border-top: 1px solid #eff0f5; min-height: 68px; }
.holding > div { min-width: 0; }
.instrument h4 { font-size: 13px; line-height: 1.35; margin: 0 0 2px; overflow-wrap: anywhere; }
.instrument p { color: #989fae; font-size: 11px; line-height: 1.4; margin: 1px 0; overflow-wrap: anywhere; }
.instrument .symbol { color: #657186; }
.metric { text-align: right; }
.metric strong { font-size: 14px; line-height: 1.35; font-weight: 600; display: block; overflow-wrap: anywhere; }
.metric p { font-size: 11px; color: #9299a7; line-height: 1.4; margin: 2px 0 0; overflow-wrap: anywhere; }
.metric small { color: #a2a8b6; font-size: 10px; display: block; margin-top: 2px; }
.holding-timing { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 10px; color: #7c8596; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; margin-top: -5px; }
.holding-timing .price-caution { color: #9c7737; }
.metric-label { display: none; }
.holding-group { --detail-indent: 24px; --detail-guide-left: 18px; }
.holding-group + .holding-group { border-top: 5px solid #f6f7fb; }
.group-summary { background: #eeeafa; border-top: 1px solid #e8e4f4; border-bottom: 1px solid #ddd5f0; padding-top: 11px; padding-bottom: 11px; }
.holding-group > .holding { position: relative; background: #fdfdff; }
.holding-group > .holding::before { content: ""; position: absolute; left: var(--detail-guide-left); top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: #e1daef; }
.holding-group > .holding .instrument, .holding-group > .holding .holding-timing { padding-left: var(--detail-indent); }
.group-summary > div { min-width: 0; }
.group-title h3 { color: #4f4478; font-size: 14px; line-height: 1.4; margin: 0 0 3px; overflow-wrap: anywhere; }
.group-title p { color: #857c9d; font-size: 10px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.group-summary .metric-label { display: block; color: #8b809f; font-size: 10px; margin-bottom: 3px; }
.group-summary .metric strong { font-size: 15px; }
.group-summary .metric p { font-size: 12px; font-weight: 600; }
.group-warning { margin: 0; padding: 6px 18px; background: #fff8e9; color: #946626; font-size: 11px; line-height: 1.6; }
.positive, .metric p.positive { color: #df5967; }
.negative, .metric p.negative { color: #239a74; }
.empty { padding: 36px 20px; color: #8991a2; font-size: 13px; text-align: center; line-height: 1.8; }
footer { max-width: 1120px; padding: 22px 32px; margin: auto; border-top: 1px solid #e4e7ef; color: #969dad; font-size: 11px; display: flex; justify-content: space-between; }
@media (max-width: 700px) {
  .header { padding: 17px 18px; } main { padding: 22px 16px 30px; }
  h1 { font-size: 23px; } .intro { margin-bottom: 12px; } .actions button { padding: 9px 12px; }
  .asset-card { padding: 16px 15px 11px; gap: 10px; }
  .asset-total strong { font-size: 26px; } .asset-return strong { font-size: 22px; }
  .asset-card span { font-size: 11px; } .asset-card small { font-size: 10px; }
  .asset-return #year-return { font-size: 16px; }
  .allocation-grid { gap: 8px; margin-top: 8px; } .allocation { padding: 11px 12px; }
  .allocation > div { font-size: 12px; gap: 4px; } .allocation strong { font-size: 21px; }
  .allocation small { font-size: 10px; } .portfolio-detail { line-height: 1.7; }
  .data-freshness { padding: 10px 11px; }
  .freshness-times { grid-template-columns: 1fr; gap: 5px; }
  .freshness-times > div { display: flex; justify-content: space-between; gap: 10px; }
  .freshness-times dt { flex-shrink: 0; line-height: 1.5; }
  .freshness-times dd { margin: 0; text-align: right; font-size: 11px; }
  .section-title { padding: 12px; } h2 { font-size: 17px; }
  .list-head { display: none; }
  #holding-count { display: block; margin: 4px 0 0; font-size: 11px; }
  .holding, .group-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 9px 11px; gap: 7px; }
  .holding-group { --detail-indent: 20px; --detail-guide-left: 11px; }
  .holding-group > .holding { padding-left: calc(11px + var(--detail-indent)); }
  .holding-group > .holding .instrument, .holding-group > .holding .holding-timing { padding-left: 0; }
  .instrument, .group-title { grid-column: 1 / 3; }
  .allocation-metric { grid-column: 3; grid-row: 1; }
  .metric-label { display: block; color: #999fac; font-size: 10px; margin-bottom: 2px; }
  .metric:not(.allocation-metric) { text-align: left; }
  .metric strong { font-size: 13px; } .metric p { font-size: 11px; }
  .metric small { font-size: 9px; line-height: 1.5; }
  .holding-timing { font-size: 10px; margin-top: 0; }
  .group-summary .metric strong { font-size: 13px; } .group-summary .metric p { font-size: 11px; }
  .group-title h3 { font-size: 13px; } .group-warning { padding: 6px 11px; }
  .login-panel { padding: 25px; margin-top: 24px; } footer { padding: 22px 18px; }
}
@media (max-width: 360px) {
  .asset-card { padding: 14px 13px 10px; grid-template-columns: 1fr; }
  .asset-total strong { font-size: 26px; }
  .asset-return { display: grid !important; grid-template-columns: 1fr auto; text-align: left; align-items: center; }
  .asset-return > span:first-child { grid-column: 1 / -1; }
  .asset-return strong { font-size: 22px; }
  .allocation { padding: 10px; } .allocation strong { font-size: 18px; }
  .holding, .group-summary { padding: 8px 9px; gap: 6px; } .metric strong, .group-summary .metric strong { font-size: 12px; }
  .holding-group { --detail-indent: 18px; --detail-guide-left: 9px; }
  .holding-group > .holding { padding-left: calc(9px + var(--detail-indent)); }
  .holding-group > .holding .metric p { font-size: 10px; }
}