.hwe-widget { position: fixed; z-index: 80; top: calc(62% - 120px); right: 0; font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
.hwe-fab { box-sizing: border-box; width: 58px; min-height: 108px; height: auto; padding: 10px 4px; border: 1px solid #78b3d7; border-right: 0; border-radius: 7px 0 0 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background: linear-gradient(155deg, #0b3f71, #237cb4); box-shadow: 0 10px 25px rgba(8,55,99,.25); cursor: pointer; }
.hwe-fab:hover, .hwe-fab:focus { outline: 0; background: linear-gradient(155deg, #155788, #3595c9); }
.hwe-fab-icon { flex-shrink: 0; line-height: 1; width: 27px; height: 27px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #174e7c; background: #f5c866; font-size: 17px; font-weight: 800; }
.hwe-fab-label { flex-shrink: 0; line-height: 1; white-space: nowrap; margin-top: 8px; font-size: 12px; font-weight: 800; letter-spacing: 2px; writing-mode: vertical-rl; text-orientation: upright; }
.hwe-card { position: fixed; top: 50%; right: 70px; width: 460px; max-height: calc(100vh - 24px); overflow-x: hidden; overflow-y: auto; border: 1px solid #d8e5ee; border-radius: 16px; color: #173b5e; background: #fff; box-shadow: 0 20px 48px rgba(8,55,99,.25); visibility: hidden; opacity: 0; transform: translateY(-50%) translateX(12px) scale(.98); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
.hwe-widget.is-open .hwe-card { visibility: visible; opacity: 1; transform: translateY(-50%) translateX(0); }
.hwe-card::-webkit-scrollbar { width: 6px; }.hwe-card::-webkit-scrollbar-thumb { border-radius: 6px; background: #b8cad8; }
.hwe-head { position: relative; min-height: 82px; padding: 16px 17px; display: flex; align-items: center; gap: 11px; overflow: hidden; color: #fff; background: linear-gradient(135deg, #0c3d70, #2878ad 65%, #4b9bca); }
.hwe-head:after { width: 110px; height: 110px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; position: absolute; top: -60px; right: -34px; content: ""; }
.hwe-head-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #1a6094; background: linear-gradient(145deg, #fff6d9, #eec45d); box-shadow: 0 5px 13px rgba(4,39,73,.24); font-size: 21px; font-weight: 800; }
.hwe-head div { flex: 1; position: relative; z-index: 1; }.hwe-head strong, .hwe-head small { display: block; }.hwe-head strong { font-size: 16px; letter-spacing: .02em; }.hwe-head small { margin-top: 4px; color: rgba(255,255,255,.72); font-size: 11px; }
.hwe-head button { width: 40px; height: 40px; z-index: 1; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.13); font-size: 30px; font-weight: 300; line-height: 36px; cursor: pointer; }.hwe-head button:hover { background: rgba(255,255,255,.25); }
.hwe-content { padding: 12px 16px 13px; }.hwe-mode { margin-bottom: 10px; padding: 3px; border-radius: 8px; display: grid; grid-template-columns: 1fr 1fr; background: #eaf2f7; }.hwe-mode button { height: 28px; border: 0; border-radius: 6px; color: #607a90; background: transparent; font-size: 11px; cursor: pointer; }.hwe-mode button.is-active { color: #0a4d82; background: #fff; box-shadow: 0 2px 6px rgba(20,66,104,.13); font-weight: 700; }.hwe-converter { padding: 10px; border: 1px solid #dce9f1; border-radius: 10px; background: linear-gradient(135deg, #f3f9fc, #eef6fb); }.hwe-converter label { display: block; color: #647e94; font-size: 10px; font-weight: 700; }.hwe-amount-row { height: 36px; margin-top: 5px; border-bottom: 1px solid #cddfea; display: flex; align-items: center; }.hwe-amount-row input { min-width: 0; flex: 1; padding: 0; border: 0; outline: 0; color: #0d548b; background: transparent; font-size: 20px; font-weight: 800; }.hwe-amount-row span { color: #7892a7; font-size: 11px; font-weight: 700; }.hwe-quick { margin-top: 8px; display: flex; gap: 6px; }.hwe-quick button { min-width: 42px; height: 22px; padding: 0 7px; border: 1px solid #d0e0ea; border-radius: 11px; color: #5d778e; background: #fff; font-size: 10px; cursor: pointer; }.hwe-quick button.is-active, .hwe-quick button:hover { border-color: #dcae4c; color: #855d18; background: #fff4d8; }.hwe-exchange-label { margin: 12px 0 6px; color: #5c778f; font-size: 11px; font-weight: 700; }.hwe-row-single { min-height: 48px; }.hwe-row-single strong { font-size: 17px; }
.hwe-list { border: 1px solid #e1ebf2; border-radius: 10px; overflow: hidden; background: #fbfdff; }.hwe-table-head, .hwe-row { display: grid; grid-template-columns: minmax(136px,1.35fr) minmax(86px,.9fr) 74px 58px; column-gap: 7px; }.hwe-table-head { height: 28px; padding: 0 12px; align-items: center; color: #7b92a5; background: #edf5f9; font-size: 10px; font-weight: 700; }.hwe-table-head span:not(:first-child) { text-align: right; }
.hwe-row { min-height: 43px; padding: 0 12px; border-bottom: 1px solid #e7eff4; align-items: center; font-size: 12px; }.hwe-row:last-child { border-bottom: 0; }
.hwe-row:nth-child(even) { background: rgba(235,245,251,.52); }.hwe-currency { min-width: 0; display: flex; align-items: center; gap: 7px; }.hwe-currency > i { width: 25px; height: 18px; flex: 0 0 25px; overflow: hidden; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; font-style: normal; line-height: 18px; }.hwe-currency > span { min-width: 0; color: #587087; font-size: 10px; white-space: nowrap; }.hwe-currency b { margin-right: 5px; color: #204e72; font-size: 12px; }.hwe-row strong { color: #07528b; font-size: 13px; letter-spacing: .01em; text-align: right; white-space: nowrap; }.hwe-row em { margin-left: 2px; color: #8aa0b2; font-size: 9px; font-style: normal; }.hwe-trend { text-align: right; }.hwe-trend svg { width: 56px; height: 20px; fill: none; stroke: #829aaa; stroke-width: 1.8; }.hwe-trend.up svg { stroke: #1d9b77; }.hwe-trend.down svg { stroke: #dd6470; }.hwe-change { font-size: 10px; font-weight: 700; text-align: right; }.hwe-change.up { color: #168766; }.hwe-change.down { color: #d75060; }.hwe-change.flat { color: #9aaab6; }
.hwe-loading, .hwe-error { display: block; padding: 17px 0; color: #8194a5; font-size: 12px; text-align: center; }
.hwe-card footer { margin-top: 10px; padding: 9px 10px; border-radius: 8px; color: #8496a5; background: #f2f7fa; font-size: 10px; line-height: 1.55; }.hwe-card footer span, .hwe-card footer small { display: block; }.hwe-card footer span { color: #587188; }.hwe-card footer .hwe-source { color: #7890a4; }.hwe-card footer small { margin-top: 2px; }
@media (max-width: 520px) { .hwe-widget { top: calc(60% - 34px); right: 0; }.hwe-fab { width: 32px; min-height: 96px; height: auto; padding: 8px 2px; }.hwe-fab-icon { width: 22px; height: 22px; font-size: 14px; }.hwe-fab-label { margin-top: 6px; font-size: 10px; letter-spacing: 1px; }.hwe-card { top: 0; right: 0; width: 100%; max-width: none; max-height: none; height: 100vh; border-radius: 0; transform: translateX(100%); }.hwe-widget.is-open .hwe-card { transform: translateX(0); }.hwe-table-head, .hwe-row { grid-template-columns: minmax(86px,1.2fr) minmax(58px,.8fr) 48px 42px; column-gap: 3px; }.hwe-trend svg { width: 48px; }.hwe-currency > i { display: none; } }