/* Rewards use the same violet palette with clearer scope and amount hierarchy. */ #feesView .page-heading{margin-bottom:16px} /* The shared page heading changes; the protected overview cards keep their dimensions. */ @media(max-width:520px){#feesView .payout-cards.kol-reward-cards{margin-inline:1px}} @media(min-width:521px) and (max-width:740px){#feesView .payout-cards.kol-reward-cards{margin-inline:8px}} #feesView .kol-reward-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 22px} #feesView .payout-card{--reward-caption-size:15px;position:relative;overflow:hidden;display:grid;grid-template-rows:auto auto;align-content:start;gap:8px;min-width:0;padding:16px 18px;border-radius:16px;border-color:#44314f;background:linear-gradient(120deg,#24192e,#151019 85%);box-shadow:inset 0 1px #ffffff05} #feesView .reward-total-paid{background:radial-gradient(ellipse at 100% 0,#7651a12b,transparent 65%),linear-gradient(120deg,#291b37,#191220);border-color:#65487b80} #feesView .reward-total-heading{display:flex;align-items:center;gap:10px;min-height:28px;color:#cdb7e3} #feesView .reward-total-label{font-size:var(--reward-caption-size);line-height:1.4;font-weight:500} #feesView .reward-total-icon{display:grid;place-items:center;flex:none;width:24px;height:24px;border:1px solid #b08ad32b;background:#b08ad311;border-radius:8px;color:#c4a0e7} #feesView .reward-total-icon svg{width:14px;height:14px} #feesView .reward-total-help{display:grid;place-items:center;position:relative;flex:none;margin:0 0 0 auto;padding:0;width:28px;height:28px;min-height:28px;min-width:28px;border:0;border-radius:50%;background:transparent;color:#c4a0e7;font:500 12px/1 'Inter',sans-serif;letter-spacing:0;cursor:pointer;transition:background-color var(--motion-control),color var(--motion-control),transform var(--motion-control) var(--motion-ease)} #feesView .reward-total-help svg{width:18px;height:18px;pointer-events:none;transition:transform var(--motion-control) var(--motion-ease)} #feesView .reward-total-help:hover,#feesView .reward-total-help[aria-expanded=true]{background:#b08ad311;color:#ead7fa} #feesView .reward-total-help:is(:hover,[aria-expanded=true]) svg{transform:scale(1.08)} #feesView .reward-total-help:active{transform:scale(.94)} #feesView .reward-total-help:focus-visible{outline:2px solid #d5b4f7;outline-offset:2px} #feesView .reward-total-value{display:flex;align-items:baseline;gap:8px;min-width:0;white-space:nowrap;color:#f0e7fa} #feesView .reward-total-value>strong{display:block;min-width:0;font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:500;line-height:1.15;letter-spacing:-.8px;margin:0;font-variant-numeric:tabular-nums} #feesView .reward-total-unit{font-size:var(--reward-caption-size);line-height:1.4;color:#c9b7d8} #feesView .reward-total-description{display:none} #feesView .payout-card p{color:#b6a5c7;margin:0;font-size:13px} #feesView .rewards-status{font-size:12px;color:#96869f;margin:-8px 0 18px} #feesView .rewards-status:empty{display:none} #feesView .rewards-list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px} #feesView .rewards-list-toolbar>.section-header{display:flex;align-items:center;gap:12px;margin:0;min-width:0} #feesView .rewards-list-toolbar h2{font-size:20px;margin:0;letter-spacing:-.4px} #feesView #feeCoinsStatus{margin:0;padding:4px 8px;border:1px solid #47335366;border-radius:7px;color:#b7a5c8;font-size:11px;text-align:left} #feesView #feeCoinsStatus:empty{display:none} #feesView .fee-search{width:min(340px,40%);margin:0;flex:none} #feesView #accountFeeList{gap:12px} #feesView .fee-coin{border-radius:16px;background:#110e18;border-color:#403049;transition:border-color .24s,background-color .24s} #feesView .fee-coin[open]{border-color:#76578a99;background:#15111d} #feesView #accountFeeList>.fee-coin>summary{grid-template-columns:46px minmax(0,1fr) auto 16px;gap:12px;padding:14px 16px;min-height:74px} #feesView #accountFeeList>.fee-coin[open]>summary{background:linear-gradient(100deg,#261b3280,#1a132200);border-bottom:1px solid #49355266} #feesView #accountFeeList>.fee-coin>summary:hover{background-color:#2a1d3533} #feesView #accountFeeList .fee-coin-art{width:46px;height:46px;border-radius:12px;box-shadow:0 0 0 1px #c7a8e416} #feesView .fee-coin-identity h3{font-size:17px;font-weight:600;letter-spacing:-.2px;margin:0} #feesView .fee-coin-identity>span{font-size:12px;line-height:1.4;color:#b3a0c5;margin-top:2px} #feesView .fee-coin-brief>span{font-size:11px;color:#a992bc} #feesView .fee-coin-brief>strong{font-size:18px;letter-spacing:-.3px;font-weight:500;margin-top:4px;color:#f0e7fa;font-variant-numeric:tabular-nums} #feesView #accountFeeList .fee-coin-brief.is-reward-prompt>span{font-size:13px;font-weight:500;line-height:1.5;color:#d6bfeb;white-space:nowrap} #feesView #accountFeeList .fee-coin-brief>strong[hidden]{display:none} #feesView .fee-expanded-details{padding:18px 20px 20px} #feesView .account-fee-balances{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 16px} :is(#feesView,#coinRewardsDetails) :is(.account-fee-balances,.fee-loading-balances)>.fee-scope{min-width:0;border:1px solid #51366066;border-radius:13px;padding:18px;background:linear-gradient(130deg,#2c1e3b80,#1c142733);display:flex;flex-direction:column} :is(#feesView,#coinRewardsDetails) :is(.account-fee-balances,.fee-loading-balances)>.fee-scope[data-reward-scope=vault]{background:#100e1733;border-color:#42364c80} :is(#feesView,#coinRewardsDetails) :is(.account-fee-balances,.fee-loading-balances)>.fee-scope[data-reward-scope=persona]{grid-column:1/-1} :is(#feesView,#coinRewardsDetails) .fee-scope h4{font-size:13px;font-weight:500;letter-spacing:.01em;color:#d2b4e9;margin:0 0 18px;display:flex;align-items:center;gap:8px} :is(#feesView,#coinRewardsDetails) .fee-scope h4:before{content:'';width:6px;height:6px;border-radius:50%;background:#b896d9;box-shadow:0 0 10px #be99e433;flex:none} :is(#feesView,#coinRewardsDetails) .fee-scope p{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0;padding:10px 0;font-size:12px;color:#bba8ca;line-height:1.6} :is(#feesView,#coinRewardsDetails) .fee-scope p+p{border-top:1px solid #7c5c9426} :is(#feesView,#coinRewardsDetails) .fee-scope strong{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:500;letter-spacing:-.35px;color:#f0e7fa;white-space:normal;overflow-wrap:anywhere;text-align:right;font-variant-numeric:tabular-nums} :is(#feesView,#coinRewardsDetails) .fee-scope [data-fee-metric=generated] strong{font-size:23px;color:#e6d3ff} :is(#feesView,#coinRewardsDetails) .fee-scope small{margin-top:auto;padding-top:12px;font-size:12px;color:#9e8dad;line-height:1.6} :is(#feesView,#coinRewardsDetails) .fee-allocation{border:1px solid #47345180;border-radius:13px;padding:12px 16px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;align-items:center;background:#21172533} :is(#feesView,#coinRewardsDetails) .fee-allocation-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:0} :is(#feesView,#coinRewardsDetails) .fee-allocation h4{font-size:13px;color:#c9b0de;margin:0 auto 0 0} :is(#feesView,#coinRewardsDetails) .fee-allocation-badge{padding:4px 9px;border-radius:7px;background:#c19de512;border:1px solid #b695d32b;color:#c8b1dc;font-size:11px;line-height:1.5} :is(#feesView,#coinRewardsDetails) .fee-allocation:is([data-state=ready],[data-state=released]) .fee-allocation-badge{color:#b6ddcd;background:#9dcbb610;border-color:#9dcbb626} :is(#feesView,#coinRewardsDetails) .fee-allocation-share{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:500;letter-spacing:-1px;color:#e1c9f6} :is(#feesView #accountFeeList,#coinRewardsDetails) .fee-allocation p{font-size:12px;line-height:1.7;color:#b4a3c2;margin:0;max-width:480px} :is(#feesView,#coinRewardsDetails) .fee-allocation[data-state=legacy] p{grid-column:1/-1} #feesView .fee-history-disclosure{margin-top:10px;border-top:1px solid #47354f80} #feesView .fee-history-disclosure>summary{font-size:13px;font-weight:500;color:#d9c5e7;padding:6px 0;min-height:34px} #feesView .fee-history{border:0;padding:0} #feesView .fee-history-heading{display:none} #feesView .fee-history-list{margin:8px 0} #feesView .fee-history-list li{gap:12px;padding:10px;border-color:#654b7b26;border-radius:7px} #feesView .fee-history-list li:nth-child(odd){background:#c8a2ee04} #feesView .fee-history-list strong{font-size:12px;color:#d7c7e4} #feesView .fee-history-list time{font-size:11px;color:#97859f} #feesView .fee-tx-status{font-size:10px;border:1px solid #a8d5c126;border-radius:6px;padding:3px 7px;background:#a8d5c109} #feesView .fee-tx-status.is-failed{border-color:#d999a126;background:#d999a109} #feesView .fee-history-list a{font-size:11px} #feesView .page-footer{border-color:#44334c66;color:#9c8aaa;font-size:12px} @media(max-width:740px){ #feesView .kol-reward-cards{gap:10px;margin-bottom:20px} #feesView .payout-card{--reward-caption-size:14px;padding:12px;gap:7px;border-radius:14px} #feesView .reward-total-heading{gap:6px} #feesView .reward-total-icon{width:22px;height:22px} #feesView .reward-total-value{gap:6px} #feesView .reward-total-value>strong{font-size:26px;letter-spacing:-.6px} #feesView .reward-total-value.is-large>strong{font-size:22px} #feesView .payout-card p{font-size:11px;line-height:1.6} #feesView .rewards-status{font-size:11px;margin:-6px 0 16px} #feesView .rewards-list-toolbar{flex-direction:column;align-items:stretch;gap:8px} #feesView .rewards-list-toolbar>.section-header{justify-content:space-between;gap:10px} #feesView .rewards-list-toolbar h2{font-size:18px} #feesView .fee-search{width:100%} #feesView #accountFeeList>.fee-coin>summary{grid-template-columns:40px minmax(0,1fr) fit-content(42%) 14px;padding:12px 14px;gap:8px} #feesView #accountFeeList .fee-coin-art{grid-column:1;grid-row:1;width:40px;height:40px;border-radius:11px} #feesView .fee-coin-identity h3{font-size:16px} #feesView .fee-coin-identity>span{font-size:12px;overflow-wrap:anywhere} #feesView #accountFeeList .fee-coin-brief{grid-column:3;grid-row:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:1px;text-align:right} #feesView #accountFeeList>.fee-coin>summary::after{grid-column:4;grid-row:1} #feesView #accountFeeList .fee-coin-brief>span{font-size:10px;line-height:1.4} #feesView #accountFeeList .fee-coin-brief>strong{font-size:15px;line-height:1.4;margin:0;white-space:normal;overflow-wrap:anywhere;max-width:100%} #feesView .fee-expanded-details{padding:14px} #feesView .account-fee-balances{grid-template-columns:1fr;gap:10px;margin-bottom:10px} :is(#feesView,#coinRewardsDetails) :is(.account-fee-balances,.fee-loading-balances)>.fee-scope{padding:14px} :is(#feesView,#coinRewardsDetails) .fee-scope h4{margin-bottom:10px;font-size:12px} :is(#feesView,#coinRewardsDetails) .fee-scope p{font-size:11px} :is(#feesView,#coinRewardsDetails) .fee-scope strong{font-size:15px} :is(#feesView,#coinRewardsDetails) .fee-scope [data-fee-metric=generated] strong{font-size:20px} :is(#feesView,#coinRewardsDetails) .fee-scope small{font-size:12px;padding-top:8px} :is(#feesView,#coinRewardsDetails) .fee-allocation{padding:10px 12px;gap:6px 10px} :is(#feesView,#coinRewardsDetails) .fee-allocation-share{font-size:26px} :is(#feesView,#coinRewardsDetails) .fee-allocation h4{font-size:12px} #feesView .fee-history-list li{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:12px 4px} #feesView .fee-history-list li>a{grid-column:1/-1;min-height:32px} } @media(prefers-reduced-motion:reduce){#feesView .fee-coin,#feesView .reward-total-help,#feesView .reward-total-help svg{transition:none}} #feesView #feeCoinsStatus[data-kind="message"]{border:0;padding:0;font-size:12px;max-width:34ch} #feesView .rewards-list-toolbar>.section-header:has([data-kind="message"]){flex-wrap:wrap} :is(#feesView,#coinRewardsDetails) :is(.account-fee-balances,.fee-loading-balances)>.fee-scope:is([data-reward-scope=coin],[data-reward-scope=persona],[data-loading-scope]){grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px} :is(#feesView,#coinRewardsDetails) .fee-scope:is([data-reward-scope=coin],[data-reward-scope=persona],[data-loading-scope])>h4,:is(#feesView,#coinRewardsDetails) .fee-scope:is([data-reward-scope=coin],[data-reward-scope=persona],[data-loading-scope])>small{grid-column:1/-1} :is(#feesView,#coinRewardsDetails) .fee-scope:is([data-reward-scope=coin],[data-reward-scope=persona],[data-loading-scope])>p{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:0} :is(#feesView,#coinRewardsDetails) .fee-scope:is([data-reward-scope=coin],[data-reward-scope=persona],[data-loading-scope])>p+p{border-top:0;border-left:1px solid #7c5c9426;padding-left:20px} :is(#feesView,#coinRewardsDetails) .fee-scope:is([data-reward-scope=coin],[data-reward-scope=persona],[data-loading-scope]) strong{text-align:left;font-size:23px} @media(max-width:740px){:is(#feesView,#coinRewardsDetails) .fee-scope:is([data-reward-scope=coin],[data-reward-scope=persona],[data-loading-scope]) strong{font-size:20px}:is(#feesView,#coinRewardsDetails) :is(.account-fee-balances,.fee-loading-balances)>.fee-scope:is([data-reward-scope=coin],[data-reward-scope=persona],[data-loading-scope]){column-gap:14px}:is(#feesView,#coinRewardsDetails) .fee-scope:is([data-reward-scope=coin],[data-reward-scope=persona],[data-loading-scope])>p+p{padding-left:14px}} :is(#feesView,#coinRewardsDetails) .fee-scope:is([data-reward-scope=coin],[data-reward-scope=persona],[data-loading-scope])>p{justify-content:flex-start}@media(max-width:740px){:is(#feesView,#coinRewardsDetails) .fee-scope:is([data-reward-scope=coin],[data-reward-scope=persona],[data-loading-scope]) strong{font-size:17px;line-height:1.5}} @media(max-width:740px){:is(#feesView,#coinRewardsDetails) .fee-allocation-heading{gap:8px;flex-wrap:wrap}:is(#feesView,#coinRewardsDetails) .fee-allocation-badge{padding:3px 7px;font-size:10px}} /* Both reward panels share the same metric grid and spacing. */ :is(#feesView,#coinRewardsDetails) .fee-scope [data-fee-metric] strong{color:#eee3fa} #feesView #accountFeeList .account-fee-row{padding:16px 20px;border-top:0} #feesView .account-fee-row+.fee-expanded-details{padding-top:0} #feesView .fee-row-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;margin-bottom:14px} #feesView .fee-row-meta>p{margin:0;color:#b9a6c8;font-size:12px;line-height:1.6} #feesView .fee-updated{color:#96849f;font-size:11px;white-space:nowrap} #feesView .fee-manual{border-top:1px solid #76568d26;padding-top:12px;margin-top:2px} #feesView .fee-manual>p{margin:0 0 10px;font-size:12px;color:#ac98bb;line-height:1.6} #feesView .fee-manual-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px} #feesView #accountFeeList .fee-manual-actions>button{margin:0;min-height:var(--primary-height,42px);padding:8px 12px;font-size:12px} #feesView #accountFeeList .fee-manual-actions>a{margin:0 0 0 auto;display:inline-flex;align-items:center;min-height:42px;font-size:12px} :is(#feesView,#coinRewardsDetails) .fee-allocation{align-items:baseline} :is(#feesView,#coinRewardsDetails) .fee-allocation-share{line-height:1.2} @media(max-width:740px){ #feesView #accountFeeList .account-fee-row{padding:14px} #feesView .fee-row-meta{gap:4px;margin-bottom:12px} #feesView .fee-row-meta>p{flex-basis:100%;font-size:11px} #feesView .fee-updated{font-size:10px} #feesView .fee-manual>p{font-size:11px} #feesView .fee-manual-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #feesView #accountFeeList .fee-manual-actions>button{width:100%;height:100%;min-width:0;white-space:normal;padding:9px 10px;line-height:1.5;min-height:var(--primary-height,40px)} #feesView #accountFeeList .fee-manual-actions>a{grid-column:1/-1;justify-self:end;min-height:36px} } #feesView .fee-detail-footer{display:flex;justify-content:flex-start;margin-top:12px} #feesView .fee-coin-details{gap:6px;min-height:var(--utility-height,36px);max-width:100%;white-space:normal;text-align:left;text-decoration:none;transition:background var(--motion-control),border-color var(--motion-control)} #feesView .fee-coin-details>span:last-child{flex:none;font-size:16px;line-height:1;transition:transform var(--motion-control)} #feesView .fee-coin-details:hover>span:last-child{transform:translateX(3px)} #feesView .fee-coin-details:focus-visible{outline:2px solid #d5b4f7;outline-offset:3px} @media(max-width:740px){#feesView .fee-detail-footer{margin-top:10px}} @media(prefers-reduced-motion:reduce){#feesView .fee-coin-details,#feesView .fee-coin-details>span:last-child{transition:none}#feesView .fee-coin-details:hover>span:last-child{transform:none}} /* Skeletons mirror the final rows and panels instead of generic striped blocks. */ #feesView .fee-loading-detail{display:block;padding:0} :is(#feesView,#coinRewardsDetails) .fee-loading-balances{display:grid;grid-template-columns:1fr;gap:14px;grid-column:1/-1} :is(#feesView,#coinRewardsDetails) .fee-loading-detail>.fee-loading-balances{margin-bottom:16px} :is(#feesView,#coinRewardsDetails) .fee-loading-amount{width:7ch;max-width:100%;height:34.5px;margin:0;font-size:23px} #feesView .fee-loading-badge{width:60px;height:25px;color:transparent;border:0} #feesView .fee-loading-share{width:42px;height:34px} #feesView #accountFeeList .fee-loading-description{width:min(100%,390px);min-height:21px;height:1.7em;color:transparent;margin:0} #feesView .fee-loading-history{margin-top:10px;padding:6px 0;border-top:1px solid #47354f80;font-size:13px;font-weight:500;min-height:34px;color:#d9c5e7} #feesView .fee-loading-button{width:188px;height:var(--utility-height,36px);border-radius:10px} #feesView .fee-list-loading-summary{display:grid;grid-template-columns:46px minmax(0,1fr) auto 16px;align-items:center;gap:12px;padding:14px 16px;min-height:76px;border:1px solid #403049;border-radius:16px;background:#110e18} #feesView .fee-loading-art{width:46px;height:46px;border-radius:12px} #feesView .fee-loading-identity{display:grid;gap:6px;min-width:0} #feesView .fee-loading-name{width:135px;max-width:100%;height:17px} #feesView .fee-loading-ticker{width:90px;max-width:100%;height:12px} #feesView .fee-loading-brief{width:85px;height:19.5px} #feesView .fee-loading-chevron{width:12px;height:8px;border-radius:4px} #feesView .reward-total-value>strong.ui-loading-value{display:block;width:4ch;max-width:55%} @media(max-width:740px){ :is(#feesView,#coinRewardsDetails) .fee-loading-balances{gap:10px} :is(#feesView,#coinRewardsDetails) .fee-loading-detail>.fee-loading-balances{margin-bottom:10px} :is(#feesView,#coinRewardsDetails) .fee-loading-amount{font-size:17px;height:25.5px} #feesView .fee-loading-button{width:100%} #feesView .fee-list-loading-summary{grid-template-columns:40px minmax(0,1fr) fit-content(42%) 14px;gap:8px;padding:12px 14px;min-height:76px} #feesView .fee-loading-art{grid-column:1;grid-row:1;width:40px;height:40px;border-radius:11px} #feesView .fee-loading-brief{grid-column:3;grid-row:1} #feesView .fee-loading-chevron{grid-column:4;grid-row:1} #feesView .fee-loading-name{height:16px} } @media(max-width:740px){#feesView #accountFeeList .fee-loading-description{min-height:40.8px}} /* Narrow rows use the same two visible identity lines before and after loading. */ @media(max-width:380px){ #feesView .fee-coin-identity>span{min-height:0} #feesView .fee-loading-identity{gap:2px} #feesView .fee-loading-name{height:21.6px} #feesView .fee-loading-ticker{height:16.8px} } /* Coin details reuse the Rewards panels, with transaction controls below. */ :is(#personaCoinDetail,[data-coin-layout="personaCoinDetail"]) .coin-rewards-grid{display:block} :is(#personaCoinDetail,[data-coin-layout="personaCoinDetail"]) .coin-allocation{border:0;padding:0;margin:18px 0 0} #coinRewardsDetails .account-fee-balances{display:grid;grid-template-columns:1fr;gap:14px} #coinRewardsDetails .fee-scope h4{margin:0 0 18px;font-size:13px} #coinRewardsDetails .fee-scope p{font-size:12px} #coinRewardsDetails .fee-allocation p{margin:0;max-width:480px;font-size:12px;line-height:1.7;color:#b4a3c2} #coinRewardsDetails .fee-allocation[data-state=external] p{grid-column:1/-1} :is(#feesView,#coinRewardsDetails) .reward-explanation,#coinFeeNote,#coinAllocationHelp{font-size:12px;line-height:1.7;color:#ac98bb;margin:10px 0 14px;max-width:78ch} #coinRewardsDetails .fee-scope small{margin-top:12px;padding-top:10px;border-top:1px solid #7c5c941c} #coinFeeActions{display:flex;flex-wrap:wrap;gap:10px} #coinFeeActions:empty,#coinFeeNote:empty,#coinClaimStatus:empty{display:none} #coinFeeActions button,#coinClaimAllocation{margin:0;min-height:42px;padding:10px 14px;font-size:12px;white-space:normal} #coinClaimStatus:not(:empty){font-size:12px;margin:10px 0} @media(max-width:740px){ #coinRewardsDetails .account-fee-balances{gap:10px} #coinRewardsDetails .fee-scope h4{font-size:12px;margin-bottom:10px} #coinRewardsDetails .fee-scope p{font-size:11px} :is(#feesView,#coinRewardsDetails) .reward-explanation,#coinFeeNote,#coinAllocationHelp{font-size:11px} #coinFeeActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} #coinFeeActions button{height:100%} #coinClaimAllocation{width:100%} } /* Keep the amount centered alongside the complete, possibly wrapped sentence. */ :is(#feesView,#coinRewardsDetails) .fee-allocation{align-items:center} :is(#feesView,#coinRewardsDetails) .fee-allocation>p{align-self:center;max-width:none} :is(#feesView,#coinRewardsDetails) .reward-freshness{display:block;margin:8px 0 0;font-size:11px;line-height:1.5;color:#aa96bb} .fee-loading-note{display:block;min-height:2.2em} @media(max-width:740px){:is(#feesView,#coinRewardsDetails) .fee-scope p,:is(#feesView,#coinRewardsDetails) .reward-explanation,#coinFeeNote,#coinAllocationHelp{font-size:12px}} /* Loading values occupy the same lines and grid tracks as their final content. */ :is(#feesView,#coinRewardsDetails) .fee-loading-amount{height:1.6em} :is(#feesView,#coinRewardsDetails) .reward-freshness{grid-column:1/-1;min-height:16.5px} .fee-loading-freshness{visibility:hidden} :is(#feesView,#coinRewardsDetails) .fee-allocation-badge{min-width:9.8em;text-align:center} :is(#feesView,#coinRewardsDetails) .fee-allocation p{min-height:3.4em} #feesView #accountFeeList .fee-loading-description{width:auto;max-width:none;height:auto;min-height:3.4em;font-size:12px;line-height:1.7} #coinRewardsDetails #coinFeeBalances{display:grid;grid-template-columns:1fr;gap:14px} #feesView #accountFeeList .fee-coin-brief{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;width:128px;max-width:100%;min-height:48px} #feesView .fee-loading-brief{width:128px} #feesView .fee-list-loading-summary{min-height:78px} #feesView .reward-total-value>strong.ui-loading-value{height:auto;min-height:1.15em} @media(max-width:740px){ :is(#feesView,#coinRewardsDetails) .fee-loading-amount{height:1.5em} #coinRewardsDetails #coinFeeBalances{gap:10px} #feesView #accountFeeList .fee-coin-brief{width:90px;min-height:36px} #feesView .fee-loading-brief{width:90px} #feesView .fee-list-loading-summary{min-height:76px} } @media(max-width:380px){#feesView .payout-card{--reward-caption-size:13px}#feesView .payout-card:has(.reward-total-value.is-large){--reward-caption-size:12px}#feesView .reward-total-value{gap:5px}#feesView .reward-total-value>strong{font-size:24px}#feesView .reward-total-value.is-large>strong{font-size:20px}} @media(max-width:380px){ :is(#feesView,#coinRewardsDetails) :is(.account-fee-balances,.fee-loading-balances)>.fee-scope:is([data-reward-scope=coin],[data-reward-scope=persona],[data-loading-scope]){column-gap:10px} :is(#feesView,#coinRewardsDetails) .fee-scope:is([data-reward-scope=coin],[data-reward-scope=persona],[data-loading-scope])>p+p{padding-left:10px} } #feesView .payout-card>p{font-size:14px;line-height:1.4} #feesView .fee-coin-identity>span{display:flex;flex-wrap:nowrap;gap:2px 5px;align-items:center;min-height:0} #feesView .fee-coin-ticker{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;color:#f1eff8;font-weight:500} #feesView .fee-coin-identity .coin-ca-control{flex-shrink:0} #feesView .fee-coin-identity .coin-ca-control{font-size:inherit;max-width:100%} #feesView .fee-coin-identity .coin-ca-copy{font-size:inherit;min-height:22px;padding:0;white-space:nowrap;color:#cbb7de} #feesView .fee-coin-identity .coin-ca-copy svg{width:12px;height:12px} @media(max-width:420px){ #feesView #accountFeeList>.fee-coin>summary{grid-template-columns:40px minmax(0,1fr) 14px;gap:4px 8px} #feesView #accountFeeList .fee-coin-art{grid-column:1;grid-row:1;align-self:center} #feesView #accountFeeList .fee-coin-identity{grid-column:2;grid-row:1} #feesView #accountFeeList .fee-coin-brief{grid-column:2;grid-row:2;align-items:flex-start;text-align:left;width:auto;min-height:20px} #feesView #accountFeeList .fee-coin-chevron{grid-column:3;grid-row:2} #feesView #accountFeeList>.fee-coin>summary::after{grid-column:3;grid-row:2} #feesView .fee-list-loading-summary{grid-template-columns:40px minmax(0,1fr) 14px;gap:4px 8px} #feesView .fee-list-loading-summary .fee-loading-art{grid-column:1;grid-row:1} #feesView .fee-list-loading-summary .fee-loading-identity{grid-column:2;grid-row:1} #feesView .fee-list-loading-summary .fee-loading-brief{grid-column:2;grid-row:2;width:90px;min-height:20px} } /* Compact only the mobile list summaries; reward amounts and allocation panels keep their layout. */ @media(max-width:600px){ #feesView #accountFeeList{gap:8px} #feesView #accountFeeList>.fee-coin>summary{grid-template-columns:44px minmax(0,1fr) 14px;gap:2px 8px;padding:10px 12px;min-height:76px} #feesView #accountFeeList .fee-coin-art{grid-column:1;grid-row:1;align-self:start;width:44px;height:44px;border-radius:12px} #feesView #accountFeeList .fee-coin-identity{grid-column:2;grid-row:1} #feesView #accountFeeList .fee-coin-identity h3{font-size:16px;line-height:1.3} #feesView #accountFeeList .fee-coin-identity>span{font-size:13px;margin-top:2px;gap:4px} #feesView #accountFeeList .fee-coin-identity .coin-ca-copy{font-size:inherit;min-height:24px;min-width:0;padding:0;gap:4px} #feesView #accountFeeList .fee-coin-brief{grid-column:2;grid-row:2;align-items:flex-start;text-align:left;width:auto;min-height:18px} #feesView #accountFeeList .fee-coin-brief.is-reward-prompt>span{font-size:12px;line-height:1.5} #feesView #accountFeeList .fee-coin-chevron,#feesView #accountFeeList>.fee-coin>summary::after{grid-column:3;grid-row:1/3;align-self:center} #feesView .fee-list-loading-summary{grid-template-columns:44px minmax(0,1fr) 14px;gap:2px 8px;padding:10px 12px;min-height:76px} #feesView .fee-list-loading-summary .fee-loading-art{grid-column:1;grid-row:1;align-self:start;width:44px;height:44px;border-radius:12px} #feesView .fee-list-loading-summary .fee-loading-identity{grid-column:2;grid-row:1;gap:2px} #feesView .fee-list-loading-summary .fee-loading-name{height:20.8px} #feesView .fee-list-loading-summary .fee-loading-ticker{height:24px} #feesView .fee-list-loading-summary .fee-loading-brief{grid-column:2;grid-row:2;width:90px;height:18px;min-height:18px} #feesView .fee-list-loading-summary .fee-loading-chevron{grid-column:3;grid-row:1/3;align-self:center} } /* Expanded rewards follow the phone form's rhythm, including their loading state. */ @media(max-width:740px){ #feesView .fee-expanded-details{padding:12px} #feesView .account-fee-row+.fee-expanded-details{padding-top:0} #feesView #accountFeeList .account-fee-row{padding:12px} #feesView .fee-row-meta{gap:2px;margin-bottom:8px} :is(#feesView,#coinRewardsDetails) :is(.account-fee-balances,.fee-loading-balances){gap:8px;margin:0 0 8px} :is(#feesView,#coinRewardsDetails) .account-fee-balances>.fee-loading-balances{margin:0} :is(#feesView,#coinRewardsDetails) :is(.account-fee-balances,.fee-loading-balances)>.fee-scope{padding:12px} :is(#feesView,#coinRewardsDetails) .fee-scope h4{margin-bottom:8px} :is(#feesView,#coinRewardsDetails) .fee-scope:is([data-reward-scope=coin],[data-reward-scope=persona],[data-loading-scope])>p{gap:4px} :is(#feesView,#coinRewardsDetails) .fee-scope small{line-height:1.55;margin-top:0;padding-top:8px} :is(#feesView,#coinRewardsDetails) .reward-explanation,#coinFeeNote,#coinAllocationHelp{line-height:1.55;margin:8px 0 10px} #feesView #accountFeeList .account-fee-row>.reward-explanation:last-child{margin-bottom:0} :is(#feesView,#coinRewardsDetails) .fee-allocation{padding:10px 12px;gap:4px 10px} :is(#feesView,#coinRewardsDetails) .fee-allocation p{min-height:3.1em;line-height:1.55} #feesView #accountFeeList .fee-loading-description{min-height:3.1em;line-height:1.55} #feesView .fee-history-disclosure{margin-top:8px} #feesView .fee-history-disclosure>summary{min-height:32px;padding-block:5px} #feesView .fee-history-list li{padding-block:8px;column-gap:8px} #feesView .fee-detail-footer{margin-top:8px} } /* Keep the disclosure prompt beside its arrow rather than under the coin. */ @media(max-width:740px){ #feesView #accountFeeList>.fee-coin>summary,#feesView .fee-list-loading-summary{grid-template-columns:44px minmax(0,1fr) max-content 14px;gap:8px 6px;padding:10px 12px;min-height:66px;align-items:center} #feesView #accountFeeList .fee-coin-art,#feesView .fee-list-loading-summary .fee-loading-art{grid-column:1;grid-row:1;align-self:center;width:44px;height:44px;border-radius:12px} #feesView #accountFeeList .fee-coin-identity,#feesView .fee-list-loading-summary .fee-loading-identity{grid-column:2;grid-row:1} #feesView #accountFeeList .fee-coin-brief{grid-column:3;grid-row:1;align-items:center;text-align:center;width:auto;min-height:0} #feesView #accountFeeList .fee-coin-brief.is-reward-prompt>span{width:min-content;font-size:12px;line-height:1.2;white-space:normal} #feesView #accountFeeList .fee-coin-chevron,#feesView #accountFeeList>.fee-coin>summary::after,#feesView .fee-list-loading-summary .fee-loading-chevron{grid-column:4;grid-row:1;align-self:center} #feesView .fee-list-loading-summary .fee-loading-brief{grid-column:3;grid-row:1;width:44px;height:28.8px;min-height:28.8px} } @media(max-width:380px){ #feesView #accountFeeList>.fee-coin>summary,#feesView .fee-list-loading-summary{column-gap:5px} }