:root {
  font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #192e2a; background: #f6f8f6; font-variant-numeric: tabular-nums;
  --green: #246c56; --muted: #50645f; --line: #d7e2dc;
}
* { box-sizing: border-box }
body, h1, h2, p, dl, dd { margin: 0 }
body { font-size: 15px; line-height: 1.55 }
header,.queue,.actions,dialog { background: white }
header { border-bottom: 1px solid var(--line) }
.wrap { max-width: 1180px; padding-inline: 36px; margin: auto }
.top,.title,.section-head,.entry,.shortcut,.filters,label { display: flex; align-items: center }
.top { min-height: 78px; gap: 14px }
.top img { width: 54px }
.top b { font-size: 19px }
label { margin-left: auto; gap: 8px; font-size: 13px; color: var(--muted) }
button,select,a { font: inherit; color: inherit }
button,select { cursor: pointer; background: white; border: 0; min-height: 44px }

.title { padding: 38px 0 23px; gap: 16px; align-items: baseline }
h1 { font-size: 36px; line-height: 1.3 }
h2 { font-size: 18px }
.title span,.section-head span,small,#subtitle { color: var(--muted) }
.layout { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(270px, 1fr); gap: 20px; align-items: start; padding-bottom: 32px }
.queue,.actions,.fund { border: 1px solid var(--line); border-radius: 12px; overflow: hidden }
.section-head { justify-content: space-between; padding: 22px 24px 12px }
.section-head span { font-size: 13px }
.filters { padding: 0 24px 12px; gap: 4px; flex-wrap: wrap }
.filters button { color: var(--muted); padding: 6px 12px; border-radius: 6px }
.filters button[aria-pressed=true] { background: #eaf3ee; color: var(--green); font-weight: 650 }
.entry,.shortcut { width: 100%; text-align: left; gap: 14px; border-top: 1px solid var(--line); text-decoration: none }
.entry { padding: 18px 24px }
.entry:hover,.shortcut:hover,.filters button:hover { background: #f2f6f3 }
.symbol { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: #edf3ef; color: var(--green); flex: none }
svg { display: block; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.entry strong,.entry small { display: block }
.entry small { font-size: 13px; margin-top: 3px }
.trailing { margin-left: auto; text-align: right; white-space: nowrap }
.trailing em { color: var(--green); font-size: 13px; font-style: normal }
.trailing .warn { color: #87500c }
aside { display: grid; gap: 16px }
.fund { padding: 20px; background: #eaf3ee; border-color: #c7dbcf }
.fund p { color: var(--muted); margin-top: 14px; font-size: 13px }
.fund>strong { display: block; font-size: 30px; color: #1b5343; line-height: 1.3 }
dl { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px }
.fund dl { margin-top: 15px; border-top: 1px solid #cadbd0; padding-top: 12px; font-size: 13px }
dt { color: var(--muted) }
dd { text-align: right }
.actions h2 { padding: 16px 20px 12px }
.shortcut { padding: 10px 20px; min-height: 46px; color: var(--green) }
.chevron { margin-left: auto }
dialog { width: min(420px, calc(100% - 32px)); color: inherit; border: 1px solid var(--line); border-radius: 12px; padding: 24px }
dialog::backdrop { background: #162c2766 }
#subtitle { margin: 4px 0 18px; font-size: 14px }
dialog form { margin-top: 20px }
dialog button { background: var(--green); color: white; border-radius: 6px; padding: 6px 18px }
@media(max-width:760px) {
 .wrap { padding-inline: 16px } .top { min-height: 64px; gap: 7px } .top img { width: 36px } .top b { font-size: 15px }
 label { font-size: 0 } select { font-size: 13px }
 .title { padding: 22px 0 14px; gap: 10px } h1 { font-size: 28px } .title span { font-size: 13px }
 .layout { display: flex; flex-direction: column; gap: 12px; align-items: stretch }
 aside { display: contents } body.store .actions { order: -2 } body.store .fund { order: -1 }
 .fund { padding: 14px 16px } .fund p { margin-top: 6px } .fund dl { margin-top: 8px; padding-top: 8px }
 .actions h2 { padding: 12px 16px 6px } #shortcuts { display: flex; padding: 0 6px 6px }
 .shortcut { width: auto; flex: 1; flex-direction: column; gap: 4px; border: 0; padding: 6px 2px; font-size: 13px } .shortcut .chevron { display: none }
 .section-head { padding: 14px 16px 8px } .filters { padding: 0 10px 6px; gap: 0 } .filters button { padding-inline: 10px }
 .entry { padding: 13px 14px; gap: 10px } .symbol { width: 30px; height: 34px } .entry strong { font-size: 14px } .entry small { font-size: 12px }
}
#detail form label { color:var(--muted); font-size:14px; display:grid; gap:3px; margin-bottom:12px }
#detail input { font:inherit; min-height:42px; border:1px solid var(--line); border-radius:6px; padding:6px 10px }

#hq-fund { order: -1 }
@media(max-width:760px) { #hq-fund { order: 0 } }
#store-fund { padding: 0 }
#store-fund summary { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 14px 16px; color: #205d49 }
#store-fund summary::-webkit-details-marker { display: none }
#store-fund summary strong { margin-left: auto; font-size: 18px }
#store-fund summary::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) }
#store-fund[open] summary::after { transform: rotate(225deg) }
#store-fund dl { margin: 0 16px 14px }