/* Shared controls drawn from the approved mine: ink outlines, mint machinery,
   warm paper and gold ore. Images decorate live HTML controls, never label them. */
:root {
  --ui-ink:#174b42;
  --ui-border:#668f7b;
  --ui-mint:#e2efda;
  --ui-gold:#f7c963;
  --ui-cream:#fffaf0;
  --ui-shadow:#254f4030;
  --muted:#66705b;
  --mine-icon:url('assets/mine-v1.png');
  --stake-icon:url('assets/stake-v1.png');
  --positions-icon:url('assets/positions-v1.png');
  --rewards-icon:url('assets/rewards-v1.png');
  --rankings-icon:url('assets/rankings-v1.png');
  --guide-icon:url('assets/guide-v1.png');
  --wallet-icon:url('assets/wallet-v1.png');
  --refresh-icon:url('assets/refresh-v1.png');
}
.site-header { background:#fff9edee; border-bottom-color:#d4d5b9; }
.header-top { padding-block:18px; min-height:92px; }
.brand { flex-shrink:0; }
.brand .original-brand,.motion-study .brand img {
  display:block; width:148px; height:auto; mix-blend-mode:normal;
}
.environment,.quiet-tag,.study-tag {
  border:1px solid #bdcdb0; border-radius:9px; background:#edf1df;
  color:#4d6544; font-weight:600;
}
.environment-dot,.network-dot { background:#618d5c; border-radius:50%; }
.header-controls { gap:16px; }
.network-control { border:1px solid #c7cdb6; border-radius:10px; background:var(--ui-cream); padding-inline:10px 4px; }
.network-control select { font-weight:600; }
.language-control { gap:3px; padding:3px; border:1px solid #c7cdb6; border-radius:11px; background:#f4efdf; }
.language-control>span { display:none; }
.language-control button { border-radius:7px; padding-inline:9px; min-height:36px; color:#5b6d55; }
.language-control button[aria-pressed=true] { background:#fffdf5; color:var(--ui-ink); box-shadow:0 1px 3px #254f4020; }
.primary-nav { gap:8px; padding-block:6px 13px; }
.primary-nav button {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:48px; padding:8px 13px; border:1.5px solid transparent;
  border-radius:12px; color:#5d705a; font-size:14px; font-weight:600;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.primary-nav button::before {
  content:''; display:block; width:29px; height:29px; flex:0 0 29px;
  background:var(--control-icon) center/contain no-repeat;
}
.primary-nav button::after { display:none; }
.primary-nav button:hover { background:#f1efd9; border-color:#d6d7b8; }
.primary-nav button[aria-selected=true] {
  color:var(--ui-ink); background:#e1edd3; border-color:var(--ui-border);
  box-shadow:0 2px 0 var(--ui-shadow),inset 0 1px 0 #ffffffc0;
}
[data-route=workbench] { --control-icon:var(--mine-icon); }
[data-route=stake],[data-go=stake] { --control-icon:var(--stake-icon); }
[data-route=positions],[data-go=positions] { --control-icon:var(--positions-icon); }
[data-route=rewards],[data-go=rewards] { --control-icon:var(--rewards-icon); }
[data-route=rankings],[data-go=rankings] { --control-icon:var(--rankings-icon); }
[data-route=model],[data-go=model] { --control-icon:var(--guide-icon); }
.button,.motion-button,.scene-hotspot,.text-button,.icon-button,
.motion-study .controls button,.motion-study header>a:last-child {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:10px 16px; border:1.5px solid var(--ui-border);
  border-radius:11px; background:var(--ui-cream); color:var(--ui-ink);
  font-weight:650; text-decoration:none; line-height:1.3;
  box-shadow:0 2px 0 var(--ui-shadow),inset 0 1px 0 #ffffffa0;
  transition:background .16s ease,box-shadow .16s ease,transform .16s ease,border-color .16s ease;
}
.button:hover,.text-button:hover,.motion-button:hover,.scene-hotspot:hover,.icon-button:hover,
.motion-study .controls button:hover,.motion-study header>a:last-child:hover {
  background:#eaf1dc; border-color:#3d7762; text-decoration:none;
}
.button-primary,.button-dark,.motion-study .controls button:first-child {
  background:var(--ui-gold); color:#193f35; border-color:#62744a;
  box-shadow:0 3px 0 #52744b,inset 0 1px 0 #fff4bf;
}
.button-primary:hover:not(:disabled),.button-dark:hover:not(:disabled),.motion-study .controls button:first-child:hover:not(:disabled) { background:#ffda82; border-color:#52744b; }
.button-primary { justify-content:space-between; }
.button-secondary,.button-outline { background:#edf3e1; }
.button-secondary:hover:not(:disabled),.button-outline:hover:not(:disabled) { background:#dfeacb; border-color:#729464; }
.header-controls .button-wallet { background:#e1edda; border-color:#6e937c; padding-inline:13px; gap:8px; }
.header-controls .button-wallet:hover { background:#d3e7c7; }
.text-button { min-height:36px; padding:7px 11px; font-size:12px; box-shadow:0 1px 0 #254f4018; border-color:#c2c9ac; background:#fffaf0b0; }
.motion-button { font-size:12px; background:#edf2de; }
.scene-hotspot { font-size:12px; background:#fff9eb; }
.icon-button { width:44px; padding:9px; }
.button:active:not(:disabled),.text-button:active:not(:disabled),.motion-button:active:not(:disabled),
.scene-hotspot:active,.icon-button:active:not(:disabled),.primary-nav button:active,
.scene-shortcuts button:active,.motion-study button:active:not(:disabled) { transform:translateY(2px); box-shadow:0 0 0 transparent; }
button:disabled,.button:disabled,.motion-button:disabled {
  opacity:.55; box-shadow:none; cursor:not-allowed; transform:none;
}
:is(button,a,input,select,summary):focus-visible { outline:3px solid #1c806d; outline-offset:4px; }
#connect::before,#positionConnect::before,#refresh::before,#rankRefresh::before,
#claimRewards::before,.scene-overview .button::before,.guide-end .button::before {
  content:''; display:block; width:25px; height:25px; flex:0 0 25px;
  background:var(--control-icon) center/contain no-repeat;
}
#connect,#positionConnect { --control-icon:var(--wallet-icon); }
#refresh,#rankRefresh { --control-icon:var(--refresh-icon); }
#claimRewards { --control-icon:var(--rewards-icon); }
.scene-overview .button,.guide-end .button { --control-icon:var(--mine-icon); }
.header-controls #connect .icon { display:none; }
.page-heading h1,.scene-heading h1,.configuration-heading h2,.ranking-card h2,
.scene-overview h2,.panel-heading,.guide-section-header h2,#reviewTitle,.motion-study h1,.motion-study h2 {
  color:var(--ui-ink); font-weight:700; letter-spacing:-.025em;
}
.page-heading h1,.scene-heading h1,.configuration-heading h2 { display:flex; align-items:center; gap:10px; }
.page-heading h1::before,.scene-heading h1::before,.configuration-heading h2::before {
  content:''; width:38px; height:38px; flex:0 0 38px; background:var(--title-icon) center/contain no-repeat;
}
.scene-heading h1,.configuration-heading h2 { --title-icon:var(--mine-icon); }
#stakePanel .page-heading h1 { --title-icon:var(--stake-icon); }
#positions .page-heading h1 { --title-icon:var(--positions-icon); }
#positions[aria-labelledby=rewardsTab] .page-heading h1 { --title-icon:var(--rewards-icon); }
#rankings .page-heading h1 { --title-icon:var(--rankings-icon); }
#model .page-heading h1 { --title-icon:var(--guide-icon); }
.scene-overview,.transaction-sheet,.positions-surface,.guide-sheet,.ranking-card,.review-dialog,.motion-study .scene-card {
  border-color:#b8c5a7; border-width:1.5px; box-shadow:0 4px 0 #74885f14; background-color:#fffcf3;
}
.scene-overview { background:#f4f4df; }
.scene-status { color:#4f704b; }
.scene-shortcuts { gap:14px; }
.scene-shortcuts button {
  border:1.5px solid #bdc6a6; border-radius:14px; background:#fffaf0;
  box-shadow:0 3px 0 #74885f18; transition:background .16s ease,transform .16s ease,box-shadow .16s ease;
}
.scene-shortcuts button:hover { background:#edf2db; border-color:#8fa77a; }
.scene-shortcuts strong { font-weight:700; font-size:14px; }
.scene-shortcuts small { color:#677258; }
.shortcut-icon { width:44px; height:44px; flex-basis:44px; background:var(--control-icon) center/contain no-repeat; font-size:0; border-radius:0; }
.scene-actions { gap:10px; margin-top:2px; }
.transaction-receipt { background:#28564b; }
.receipt-info,.receipt-footnote { color:#dce4ce; }
.stepper,.amount-control,.recovery-controls input {
  border:1.5px solid #a2b79b; border-radius:11px; background:#fffdf6; overflow:hidden;
}
.stepper button { min-height:44px; background:#ecf0dc; color:var(--ui-ink); }
.stepper button:hover { background:#dceac9; }
.stepper button:active { background:#c9e0b6; }
.stepper input { color:var(--ui-ink); font-weight:650; }
.amount-control { padding-block:4px; }
.presets { gap:8px; }
.presets button {
  min-height:36px; padding:6px 12px; border:1px solid #c4ccb0; border-radius:8px;
  background:#fffaf0; color:#5a6e52; font-weight:600; line-height:1.3;
}
.presets button:hover { background:#f0f2dc; }
.presets button[aria-pressed=true] { background:#dcebc9; color:#244f3d; border-color:#7b9c67; box-shadow:inset 0 -2px 0 #b4d29b; }
.segmented-control { padding:4px; border:1px solid #bcc8a5; border-radius:11px; background:#f5f1df; gap:4px; }
.segmented-control label>span { min-height:36px; border-radius:7px; border:1px solid transparent; color:#526848; }
.segmented-control input:checked+span { background:#e0ebc8; color:#234d38; border-color:#8da775; box-shadow:0 1px 0 #8da77540; }
.segmented-control input:focus-visible+span { outline:3px solid #1c806d; outline-offset:2px; }
.positions-tab-bar { gap:8px; padding-block:14px; }
.positions-tab-bar button { min-height:44px; border:1px solid #c6cfb1; border-radius:10px; padding:9px 14px; gap:7px; background:#fffaf0; }
.positions-tab-bar button[aria-pressed=true] { background:#dfebcf; color:var(--ui-ink); border-color:#8da775; box-shadow:0 2px 0 #74955c25; }
.positions-tab-bar button::after { display:none; }
.positions-tab-bar button::before { content:''; width:25px; height:25px; flex:0 0 25px; background:var(--control-icon) center/contain no-repeat; }
.positions-tab-bar .icon { display:none; }
#positionsMineTab { --control-icon:var(--positions-icon); }
#positionsStakeTab { --control-icon:var(--stake-icon); }
.positions-table .button { border-radius:9px; background:#e6edcf; color:var(--ui-ink); border-color:#92aa79; box-shadow:0 2px 0 #74955c25; }
.position-pagination .button { min-height:44px; }
.portfolio-art { background:#f3f1df; }
.portfolio-art img { width:104px; mix-blend-mode:normal; }
.stake-scene-note img { width:74px; mix-blend-mode:normal; }
.empty-icon { width:76px; height:76px; background:var(--wallet-icon) center/contain no-repeat; border:0; border-radius:0; }
.empty-icon svg { display:none; }
.reward-strip { background:#e6edce; border:1px solid #c4ceaa; }
.guide-number { color:#24533d; background:#e1ebcd; border:1px solid #a5bb8b; border-radius:9px; }
.guide-detail,.inline-disclosure { border-color:#c4ccb0; }
details>summary { color:var(--ui-ink); border-radius:8px; }
details>summary:hover { background:#d9e6bd35; }
.receipt-disclosure>summary { color:#f5ecd4; }
.ranking-status { background:#eaf0d7; border:1px solid #c0cda6; }
.ranking-card ol li a { color:#285d4b; text-decoration-thickness:1px; text-underline-offset:3px; }
.recovery-controls .button { background:#e6edd5; color:var(--ui-ink); }
.footer-brand { color:var(--ui-ink); }
.motion-study .controls { background:#f6f2de; }
.motion-study select { border:1.5px solid #a2b79b; border-radius:10px; background:#fffaf0; }
.motion-study .layer-controls label { min-height:44px; padding:5px 12px; border:1px solid #c4ccb0; border-radius:10px; background:#fffaed; }
.motion-study .layer-controls input { accent-color:#3c8064; }
.motion-study .pose-grid button { border:1.5px solid #bcc9a9; border-radius:12px; box-shadow:0 3px 0 #74885f18; }
.motion-study .pose-grid button[aria-pressed=true] { background:#dfebcd; border-color:#6f9560; }
@media(max-width:1180px) {
  .primary-nav button { padding-inline:9px; font-size:13px; gap:5px; }
  .primary-nav { gap:4px; }
  .header-controls { gap:10px; }
}
@media(min-width:761px) and (max-width:1000px) {
  .header-top { flex-wrap:wrap; gap:12px 20px; }
  .header-top>.environment { margin-left:auto; }
  .header-controls { flex:0 0 100%; justify-content:flex-end; }
}
@media(max-width:760px) {
  .header-top { min-height:0; padding-block:15px; }
  .brand .original-brand,.motion-study .brand img { width:118px; }
  .header-controls { gap:8px; }
  .language-control { padding:2px; }
  .language-control button { min-height:38px; padding-inline:6px; }
  .network-control { padding-inline:7px 1px; }
  .primary-nav { gap:7px; padding-block:3px 12px; }
  .primary-nav button { padding:7px 5px; min-height:48px; gap:5px; font-size:12px; }
  .primary-nav button::before { width:25px; height:25px; flex-basis:25px; }
  .header-controls .button-wallet { padding:8px 10px; }
  #connect::before { width:23px; height:23px; flex-basis:23px; }
  .scene-heading h1,.page-heading h1 { font-size:24px; gap:7px; }
  .page-heading h1::before,.scene-heading h1::before,.configuration-heading h2::before { width:31px; height:31px; flex-basis:31px; }
  .scene-heading { gap:12px; }
  .motion-button { max-width:126px; flex-shrink:0; padding:9px 10px; }
  .scene-hotspot { padding:8px 10px; font-size:11px; }
  .scene-shortcuts button { padding:12px; gap:12px; }
  .scene-shortcuts small { font-size:11px; }
  .shortcut-icon { width:42px; height:42px; flex-basis:42px; }
  .presets { gap:6px; }
  .presets button { min-height:40px; padding-inline:10px; }
  .portfolio-art img { width:82px; }
  .positions-tab-bar { gap:6px; }
  .positions-tab-bar button { padding-inline:10px; }
  .motion-study header>a:last-child { padding:8px 10px; font-size:11px; }
}
@media(max-width:380px) {
  .header-controls .button-wallet { width:44px; height:44px; padding:8px; }
  .header-controls #connect .icon { display:none; }
  .primary-nav button { font-size:11px; gap:3px; padding-inline:2px; }
  .primary-nav button::before { width:23px; height:23px; flex-basis:23px; }
  .scene-heading { align-items:flex-start; }
  .motion-button { max-width:108px; font-size:10px; }
  .page-heading { gap:12px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important; }
}

/* One desktop row in reading order: brand, workspace navigation, controls. */
.dismissed-preview-notice { display:none!important; }
.header-top { flex-wrap:wrap; column-gap:16px; row-gap:0; }
.header-top>.nav-row { order:3; flex:0 0 100%; width:100%; }
@media(min-width:1100px) {
  .header-top { flex-wrap:nowrap; min-height:80px; padding-block:14px; }
  .header-top>.nav-row { order:0; flex:1 1 auto; width:auto; min-width:0; }
  .header-top .original-brand { width:132px; }
  .header-top .primary-nav { gap:4px; padding:0; white-space:nowrap; }
  .header-top .primary-nav button { padding:8px; gap:6px; font-size:13px; }
  .header-top .primary-nav button::before { width:26px; height:26px; flex-basis:26px; }
  .header-top .header-controls { gap:8px; margin-left:auto; flex-shrink:0; }
  .header-top .network-control select { max-width:104px; font-size:12px; }
  .header-top .language-control button { font-size:12px; }
  .header-top .button-wallet { padding:10px; font-size:12px; }
  .header-top #connect::before { width:24px; height:24px; flex-basis:24px; }
}