.swap-page .staking-main{max-width:calc(var(--content-max-width) + 2 * var(--page-gutter));margin:auto;text-align:left}
.staking-main .page-heading{text-align:center}
.staking-revenue,.staking-position{border:1px solid var(--swap-border);background:var(--swap-panel);padding:24px;border-radius:2px}
.staking-revenue{margin-bottom:40px}
.staking-periods{margin:0}
.staking-main h2{margin:0 0 16px}
.staking-main .design-stats{margin:24px 0}
.staking-columns{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:32px;align-items:start;margin-bottom:40px}
.staking-position{margin:0;min-width:0}
.staking-operation{width:100%;margin:0}
#staking-form{padding:var(--swap-space);margin:0;background:var(--swap-panel);border:1px solid var(--swap-border);border-radius:2px}
.staking-tabs{margin:0 0 20px}
.staking-amount{padding:var(--swap-inner-space);border:1px solid var(--swap-border);background:var(--swap-field);border-radius:2px}
.staking-amount .design-row{margin:0;gap:8px;flex-wrap:nowrap;min-height:32px}
.staking-amount label{font-size:var(--text-field-label);font-weight:var(--weight-field-label)}
#staking-amount{width:0;min-width:0;flex:1;border:0;background:transparent;padding:0;font-size:var(--text-amount)}
.staking-token{display:inline-flex;align-items:center;gap:8px;font-weight:var(--weight-semibold)}
.staking-token img{object-fit:contain}
.staking-balance{display:flex;gap:8px;align-items:center;font-size:var(--text-meta);color:var(--swap-muted)}
.staking-balance[hidden]{display:none}
.swap-page #staking-max{min-height:20px;padding:0;border:0;background:transparent;font-size:inherit;color:inherit}
#staking-message{font-size:var(--text-meta);margin:4px 0 0;min-height:22px}
.staking-chart svg{display:block;width:100%;height:180px;overflow:visible}
.staking-chart .plot-line{fill:none;stroke:var(--hero-accent);stroke-width:2.5;stroke-linejoin:round}
.staking-chart .plot-grid{stroke:var(--swap-border);stroke-width:1;stroke-dasharray:3 5}
.staking-chart text{fill:var(--swap-muted);font:12px var(--font-sans)}
.staking-payouts{margin:0 0 40px}
.staking-table-scroll{overflow:auto}
.staking-payouts table{width:100%;font-variant-numeric:tabular-nums}
.staking-payouts :is(th,td){padding:18px 12px;border-bottom:1px solid var(--swap-border);text-align:right}
.staking-payouts :is(th,td):first-child{text-align:left;padding-left:0}
.staking-payouts :is(th,td):last-child{padding-right:0}
.staking-payouts th{font-size:var(--text-meta);color:var(--swap-muted);font-weight:var(--weight-regular)}
.staking-payouts td{font-size:var(--text-small)}
html[data-theme="dark"] .staking-token img{filter:invert(1)}
@media(max-width:850px){.staking-columns{grid-template-columns:1fr}.staking-operation{grid-row:1}.staking-revenue,.staking-position{padding:16px}.staking-revenue .design-stats{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.site-header nav{gap:16px}.staking-payouts :is(th,td){padding-inline:6px}}
#staking-amount{appearance:textfield;-moz-appearance:textfield}
#staking-amount::-webkit-inner-spin-button,#staking-amount::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* Reuse Swap's balance-controls, trigger, options and MAX styles unchanged. */
.staking-balance.balance-controls{gap:12px}
.staking-summary{border:1px solid var(--swap-border);background:var(--swap-panel);padding:0 24px;margin-bottom:32px;border-radius:2px}
.staking-summary .design-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.staking-columns .staking-revenue{margin:0;min-width:0}
.staking-chart-controls{display:flex;gap:4px}
.staking-chart-controls button{display:grid;place-items:center;width:44px;height:44px;padding:10px}
.staking-chart-controls .icon{width:22px;height:22px}
.icon-histogram{mask-image:url('../assets/icon-histogram.svg')}
.icon-revenue-donut{mask-image:url('../assets/icon-trade-distribution.svg')}
.swap-page .staking-chart-controls [aria-pressed="true"]{color:var(--selection-ink,var(--swap-ink));border-color:var(--selection-border,var(--swap-ink));background:var(--selection-fill,var(--swap-field))}
#revenue-chart svg{height:300px}
#revenue-chart[hidden],#revenue-composition[hidden]{display:none}
@media(max-width:600px){.staking-summary{padding-inline:16px}.staking-summary .design-stats{grid-template-columns:1fr 1fr}#revenue-composition{grid-template-columns:1fr;gap:12px}.revenue-donut{max-width:180px}}

.staking-columns .staking-revenue{border:0;padding:0;background:transparent}
#revenue-chart svg{display:block;width:100%;height:330px}
#revenue-chart .plot-grid{stroke:var(--swap-border);stroke-dasharray:3 5;stroke-width:1}
#revenue-chart text{fill:var(--swap-muted);font-family:var(--font-sans);font-size:var(--text-meta)}
#revenue-chart[hidden],#revenue-composition[hidden]{display:none}
/* Desktop dashboard: matching two-thirds / one-third rows. */
.staking-columns,.staking-bottom-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:32px;align-items:start}
.staking-bottom-grid{margin-bottom:40px}
.staking-bottom-grid .staking-payouts{grid-column:1;min-width:0;margin:0}
.staking-bottom-grid .staking-summary{grid-column:2;min-width:0;margin:0}
.staking-summary .design-stats{grid-template-columns:1fr 1fr}
@media(max-width:850px){.staking-columns,.staking-bottom-grid{grid-template-columns:1fr}.staking-bottom-grid .staking-summary{grid-column:1;grid-row:1}.staking-bottom-grid .staking-payouts{grid-column:1;grid-row:2}}